From d713e00671a479bc2a4b4953feb9af1925e37ab9 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Tue, 23 Aug 2022 16:15:53 +0200 Subject: [PATCH] Add attribution for plantnet, styling tweaks --- UI/BigComponents/PlantNetSpeciesSearch.ts | 31 ++++++++++++++++++----- UI/SpecialVisualizations.ts | 9 ++++++- assets/svg/license_info.json | 10 ++++++++ assets/svg/plantnet_logo.svg | 22 ++++++++++++++++ css/index-tailwind-output.css | 28 ++++++++++---------- langs/en.json | 23 +++++++++-------- 6 files changed, 91 insertions(+), 32 deletions(-) create mode 100644 assets/svg/plantnet_logo.svg diff --git a/UI/BigComponents/PlantNetSpeciesSearch.ts b/UI/BigComponents/PlantNetSpeciesSearch.ts index f5bae3b11..872dcecda 100644 --- a/UI/BigComponents/PlantNetSpeciesSearch.ts +++ b/UI/BigComponents/PlantNetSpeciesSearch.ts @@ -9,6 +9,8 @@ import Combine from "../Base/Combine"; import Title from "../Base/Title"; import WikipediaBox from "../Wikipedia/WikipediaBox"; import Translations from "../i18n/Translations"; +import List from "../Base/List"; +import Svg from "../../Svg"; export default class PlantNetSpeciesSearch extends VariableUiElement { @@ -28,8 +30,15 @@ export default class PlantNetSpeciesSearch extends VariableUiElement { return UIEventSource.FromPromiseWithErr(PlantNet.query(images.slice(0,5))); }) .map(result => { - if (result === null) { - return t.takeImages + if (images.data.length === 0) { + return new Combine([t.takeImages, t.howTo.intro, new List( + [ + t.howTo.li0, + t.howTo.li1, + t.howTo.li2, + t.howTo.li3 + ] + )]).SetClass("flex flex-col") } if (result === undefined) { return new Loading(t.querying.Subs(images.data)) @@ -79,13 +88,21 @@ export default class PlantNetSpeciesSearch extends VariableUiElement { return plantOverview } const buttons = new Combine([ - new Button("Confirm", () => { + new Button( + new Combine([ + Svg.back_svg().SetClass("w-4"), + t.back]).SetClass("flex"), + () => { + selectedSpecies.setData(undefined) + }).SetClass("btn btn-secondary"), + + new Button( + new Combine([Svg.confirm_svg().SetClass("w-4"), t.confirm]).SetClass("flex") + , () => { onConfirm(wikidataSpecies) }).SetClass("btn"), - new Button("Back to plant overview", () => { - selectedSpecies.setData(undefined) - }).SetClass("btn btn-secondary") - ]).SetClass("flex self-end"); + + ]).SetClass("flex justify-between"); return new Combine([ new WikipediaBox([wikidataSpecies], { diff --git a/UI/SpecialVisualizations.ts b/UI/SpecialVisualizations.ts index 3cccea1f0..32901dbec 100644 --- a/UI/SpecialVisualizations.ts +++ b/UI/SpecialVisualizations.ts @@ -1318,7 +1318,7 @@ export default class SpecialVisualizations { } const detect = new UIEventSource(false) - return new Toggle( + const toggle = new Toggle( new Lazy(() => { const allProvidedImages: Store = AllImageProviders.LoadImagesFor(tags, imagePrefixes) const allImages: Store = allProvidedImages.map(pi => pi.map(pi => pi.url)) @@ -1340,6 +1340,13 @@ export default class SpecialVisualizations { new SubtleButton(undefined, "Detect plant species with plantnet.org").onClick(() => detect.setData(true)), detect ) + + return new Combine([ + toggle, + new Combine([Svg.plantnet_logo_svg().SetClass("w-8"), + Translations.t.plantDetection.poweredByPlantnet]) + .SetClass("flex p-2 bg-gray-200 rounded-xl self-end") + ]).SetClass("flex flex-col") } } ] diff --git a/assets/svg/license_info.json b/assets/svg/license_info.json index 6d1d8401e..7c7cf6049 100644 --- a/assets/svg/license_info.json +++ b/assets/svg/license_info.json @@ -985,6 +985,16 @@ "authors": [], "sources": [] }, + { + "path": "plantnet_logo.svg", + "license": "Logo (fair usage)", + "authors": [ + "https://plantnet.org" + ], + "sources": [ + "Plantnet.org" + ] + }, { "path": "plus.svg", "license": "CC0; trivial", diff --git a/assets/svg/plantnet_logo.svg b/assets/svg/plantnet_logo.svg new file mode 100644 index 000000000..a9966e2f4 --- /dev/null +++ b/assets/svg/plantnet_logo.svg @@ -0,0 +1,22 @@ + + + + + + + + + diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index 4983438de..a0b27ac2a 100644 --- a/css/index-tailwind-output.css +++ b/css/index-tailwind-output.css @@ -1054,10 +1054,6 @@ video { height: 6rem; } -.h-96 { - height: 24rem; -} - .h-64 { height: 16rem; } @@ -1102,6 +1098,10 @@ video { height: 8rem; } +.h-96 { + height: 24rem; +} + .h-16 { height: 4rem; } @@ -1166,6 +1166,11 @@ video { width: 2rem; } +.w-min { + width: -webkit-min-content; + width: min-content; +} + .w-1\/3 { width: 33.333333%; } @@ -1186,11 +1191,6 @@ video { width: 2.75rem; } -.w-min { - width: -webkit-min-content; - width: min-content; -} - .w-max { width: -webkit-max-content; width: max-content; @@ -1512,6 +1512,11 @@ video { background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); } +.bg-gray-200 { + --tw-bg-opacity: 1; + background-color: rgba(229, 231, 235, var(--tw-bg-opacity)); +} + .bg-red-400 { --tw-bg-opacity: 1; background-color: rgba(248, 113, 113, var(--tw-bg-opacity)); @@ -1532,11 +1537,6 @@ video { background-color: rgba(0, 0, 0, var(--tw-bg-opacity)); } -.bg-gray-200 { - --tw-bg-opacity: 1; - background-color: rgba(229, 231, 235, var(--tw-bg-opacity)); -} - .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgba(243, 244, 246, var(--tw-bg-opacity)); diff --git a/langs/en.json b/langs/en.json index cac8bdc2c..44f5a6df1 100644 --- a/langs/en.json +++ b/langs/en.json @@ -686,22 +686,25 @@ "warnAnonymous": "You are not logged in. We won't be able to contact you to resolve your issue." }, "plantDetection": { + "back": "Back to species overview", + "confirm": "Select species", "error": "Something went wrong while detecting the tree species: {error}", - "loadingWikidata": "Loading information about {species}", - "matchPercentage": "{match}% match", - "overviewIntro": "The AI on PlantNet.org thinks the images show the species below.", - "overviewTitle": "Automatically detected species", - "overviewVerify": "Please verify that correct species and link it to the tree", - "querying": "Querying plantnet.org with {length} images", - "seeInfo": "See more information about the species", - "takeImages": "Take images of the tree to automatically detect the tree type", - "howTo":{ + "howTo": { "intro": "For optimal results,", "li0": "take a picture which show the tree in the center without much background", "li1": "take a picture which shows a single leaf", "li2": "take a picture which shows the bark", "li3": "take a picture of the flowers" - } + }, + "loadingWikidata": "Loading information about {species}", + "matchPercentage": "{match}% match", + "overviewIntro": "The AI on PlantNet.org thinks the images show the species below.", + "overviewTitle": "Automatically detected species", + "overviewVerify": "Please verify that correct species and link it to the tree", + "poweredByPlantnet": "Powered by plantnet.org", + "querying": "Querying plantnet.org with {length} images", + "seeInfo": "See more information about the species", + "takeImages": "Take images of the tree to automatically detect the tree type" }, "privacy": { "editing": "When you make a change to the map, this change is recorded on OpenStreetMap and is publicly available to anyone. A changeset made with MapComplete includes the following data:
  • The changes you made
  • Your username
  • When this change is made
  • The theme you used while making the change
  • The language of the user interface
  • An indication of how close you were to changed objects. Other mappers can use this information to determine if a change was made based on survey or on remote research
Please refer to the privacy policy on OpenStreetMap.org for detailed information. We'd like to remind you that you can use a fictional name when signing up.",