[FR]: Embed SVG pictures in integration as `data:base64..` ?

[LordMike]

Describe the feature you wish to make a request for

I read the text on affalddk_images.zip and how to serve it from the local webserver - but is this necessary? Both SVG's and PNG's should be embeddable as a data url.

Both the entity_picture attribute and the picture-entity card use url as the reference to the image to show. Url can be a data url, like this:

example picture-entity card

Describe alternatives you've considered

Alternatively host on the internet - but that sucks. :)

Additional context

SVG as data uri: https://gist.github.com/jennyknuth/222825e315d45a738ed9d6e04c7a88d0

Wikipedia: https://en.wikipedia.org/wiki/Data_URI_scheme#Examples_of_use (example on PNG/SVG/..)

[LordMike]

I edited the attribute using the States developer tool, and now have this.

[LordMike]

Note, I ran svgo (online edition) on the above and reduced the base64 from ~4k to ~700bytes. I can recommend doing that before embedding it as attributes :).. After I compacted, I used this converter to get a data uri - but that's just me being lazy :)

I would've made a PR - but I'm not entirely sure how to, in python, embed the svg files in the relevant code .. :/ I imagine you'll want to read the svg file and then embed it, rather than copy in the base64 into a map.

[briis]

Tak Michael, Jeg ledte faktisk efter en måde at gøre dette på, men kunne ikke lige finde ud af det. Jeg kigger på det og se om jeg ikke kan få det implementeret. TAK.

[briis]

Jeg har nu eksperimenteret med dette og gjort alt hvad jeg kan for at få reduceret størrelsen i de forskellige filer, men nogen af dem kan jeg simpelthen ikke få ned på en størrelse så de ikke overskriver maks længden der er understøtte i HA. Jeg har prøvet de værktøjer du foreslog og også nogle andre, har du andre ideer til at reducere nogle af de mere komplekse svg filer?

[LordMike]

Det ligner, for images/affalddk/, at en del af SVG'erne indeholder base64-encoded PNG'er?

Så er det jo ikke helt rigtigt SVG :). Er det images/affalddk/ som er filerne der skal bruges? så skal vi nok have fundet nogle SVG'er (og så samtidigt fjerne de artifacts der er i f.eks. farligtaffald.svg.

[briis]

Du har jo helt ret i at ikke alle filerne er rigtige SVG filer - Jeg kunne ikke finde Haveaffald, Storskrald, Farligtaffald etc, som SVG, kun som PNG, og jeg 'konverterede' dem så til svg. Hvis du kigger i images/original så er det de filer jeg har brugt til at lave de sammensatte svg filer. De orginal kan minimeres til næsten igenting, men så snart jeg sætter 4 af dem sammen, så bliver de store. Det er nok mine manglende færdigheder omkring grafiske filer.

[LordMike]

Jeg har skrevet til Cirkulær (affalds brancheorganisation) da jeg godt kan se der ikke er SVG formater af piktogrammerne på sitet (https://www.affaldspiktogrammer.dk/piktogrammer). Med lidt held har de SVG varianter af dem alle sammen.

Næste bud er Futu, designbureauet der lavede piktogrammerne i første omgang.

Sent from Outlook for iOShttps://aka.ms/o0ukef

---

From: Bjarne Riis @.> Sent: Sunday, March 10, 2024 8:35:05 AM To: briis/affalddk @.> Cc: Michael Bisbjerg @.>; Author @.> Subject: Re: [briis/affalddk] [FR]: Embed SVG pictures in integration as data:base64.. ? (Issue #14)

Du har jo helt ret i at ikke alle filerne er rigtige SVG filer - Jeg kunne ikke finde Haveaffald, Storskrald, Farligtaffald etc, som SVG, kun som PNG, og jeg 'konverterede' dem så til svg. Hvis du kigger i images/original så er det de filer jeg har brugt til at lave de sammensatte svg filer. De orginal kan minimeres til næsten igenting, men så snart jeg sætter 4 af dem sammen, så bliver de store. Det er nok mine manglende færdigheder omkring grafiske filer.

— Reply to this email directly, view it on GitHubhttps://github.com/briis/affalddk/issues/14#issuecomment-1987119817, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAH2YJ6E3Z3HSONIF7HEQG3YXQEKTAVCNFSM6AAAAABELW3GLGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOBXGEYTSOBRG4. You are receiving this because you authored the thread.Message ID: @.***>

[briis]

Fedt. Tak. Glæder mig til at høre hvad de siger.

[LordMike]

Mens vi venter så hentede jeg alle piktogrammerne og kørte dem gennem CloudConvert. Det gav et rimeligt godt resultat - de fleste er få KB store, mens enkelte rammer 20 KB. Jeg har også taget alle dem jeg kunne finde, og ikke kun dem der allerede fandtes i repo'et her. svgo gav også en 50% reduktion.

Der er oprettet PR #21 som viser filerne.

Jeg har ikke konverteret ikonerne (ikon.png), da opløsningen (72 dpi) simpelthen er for lille til et godt resultat. Da jeg ikke selv kan åbne EPS filerne heller, så kan jeg ikke se om de måske skulle være der som et lag - ellers mangler der en kildefil til ikonerne.. :/ .. man kunne dog måske gå alle filerne her igennem, fjerne teksterne, og så skrumpe dem til en ikon-agtig størrelse. Jeg vil umiddelbart tro de er bedre uden tekst når de skal være små og på f.eks. en kalender.

Om noget er det lidt fedt at have SVG varianter af alle de her :)

Hvilke affaldstyper kommer der fra API'erne af?.. Er det dem der ligger i affalddk/?

[briis]

Tak Michael. Jeg så din PR, og der jo rigtig mange SVG'er. De fleste bruger de nok på Genbrugspladsen og ikke hjemme i privaten. Jeg har kodt det ned til 26 kategorier, hvoraf jo en del er blandet i samme container, og det giver så den udfordring at vi jo ikke kan vise, eksempelvis 4 billeder, på én sensor, men der har jeg så selv lavet en ny svg med de 2-4 kategorier. Kategorierne er her:

NAME_LIST = {
    "dagrenovation": "Dagrenovation",
    "farligtaffald": "Farligt affald",
    "farligtaffaldmiljoboks": "Farligt affald & Miljøboks",
    "flis": "Flis",
    "genbrug": "Genbrug",
    "glas": "Glas",
    "glasplast": "Glas, Plast & Madkartoner",
    "haveaffald": "Haveaffald",
    "jern": "Jern",
    "metalglas": "Metal & Glas",
    "pap": "Pap",
    "papir": "Papir",
    "papirglas": "Papir, Pap & Glas",
    "papirmetal": "Papir & Metal",
    "pappapir": "Pap & Papir",
    "pappapirglasmetal": "Pap, Papir, Glas & Metal",
    "pappi": "Papir & Plast",
    "plast": "Plast",
    "plastmadkarton": "Plast & Madkarton",
    "plastmetal": "Plast & Metal",
    "plastmetalmadmdk": "Plast, Metal, Mad & Drikkekartoner",
    "plastmetalpapir": "Plast, Metal & Papir",
    "restaffaldmadaffald": "Rest & Madaffald",
    "storskrald": "Storskrald",
    "storskraldogtekstilaffald": "Storskrald & Tekstilaffald",
    "tekstil": "Tekstilaffald",
}

[LordMike]

Lige opfølger. Har fået svaret at der ikke laves SVG’er officielt men at Illustrator filerne også kan bruges til at lave ikonerne.

Jeg formoder der er et lag i dem.

Jeg prøver om jeg kan få skabt ikon-SVG’er for alle de her filer.

Sent from Outlook for iOShttps://aka.ms/o0ukef

---

From: Bjarne Riis @.> Sent: Monday, March 11, 2024 8:07:17 AM To: briis/affalddk @.> Cc: Michael Bisbjerg @.>; Author @.> Subject: Re: [briis/affalddk] [FR]: Embed SVG pictures in integration as data:base64.. ? (Issue #14)

Tak Michael. Jeg så din PR, og der jo rigtig mange SVG'er. De fleste bruger de nok på Genbrugspladsen og ikke hjemme i privaten. Jeg har kodt det ned til 26 kategorier, hvoraf jo en del er blandet i samme container, og det giver så den udfordring at vi jo ikke kan vise, eksempelvis 4 billeder, på én sensor, men der har jeg så selv lavet en ny svg med de 2-4 kategorier. Kategorierne er her:

NAME_LIST = { "dagrenovation": "Dagrenovation", "farligtaffald": "Farligt affald", "farligtaffaldmiljoboks": "Farligt affald & Miljøboks", "flis": "Flis", "genbrug": "Genbrug", "glas": "Glas", "glasplast": "Glas, Plast & Madkartoner", "haveaffald": "Haveaffald", "jern": "Jern", "metalglas": "Metal & Glas", "pap": "Pap", "papir": "Papir", "papirglas": "Papir, Pap & Glas", "papirmetal": "Papir & Metal", "pappapir": "Pap & Papir", "pappapirglasmetal": "Pap, Papir, Glas & Metal", "pappi": "Papir & Plast", "plast": "Plast", "plastmadkarton": "Plast & Madkarton", "plastmetal": "Plast & Metal", "plastmetalmadmdk": "Plast, Metal, Mad & Drikkekartoner", "plastmetalpapir": "Plast, Metal & Papir", "restaffaldmadaffald": "Rest & Madaffald", "storskrald": "Storskrald", "storskraldogtekstilaffald": "Storskrald & Tekstilaffald", "tekstil": "Tekstilaffald", }

— Reply to this email directly, view it on GitHubhttps://github.com/briis/affalddk/issues/14#issuecomment-1987753381, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAH2YJ2W73C7JE5DX57XRUTYXVJ2LAVCNFSM6AAAAABELW3GLGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSOBXG42TGMZYGE. You are receiving this because you authored the thread.Message ID: @.***>

[LordMike]

Så jeg fik jo ikke noget godt svar, men har så fundet ud af at kunne fjerne bogstaver fra originalerne, så vi nu har "icon" varianter. Jeg har opdateret PR'en med en SVG, en icon.SVG, og så minified udgaver af alle (fordi why not)..

Jeg har opdateret nogle af billederne i affalddk med de her SVG'er. Min første samlede udgave er glasplast.svg. Meld gerne tilbage om det er godt - for så kan jeg i Inkscape lave resten også.

... Nu kiggede jeg lige på den i HA, og den trænger godt nok til at være kvadratisk. :)

[LordMike]

Så blev jeg færdig. I min branch er affalddk/ billederne (inkl. de nyeste) lavet så de er udelukkende SVG'er. De er kvadratiske og ser rimeligt gode ud, og fylder næsten intet - den største er 5367 B (plastmetalmadmdk, minified). Som datauri er den 7182 B.

Jeg har ikke committet minified udgaver, jeg tænker at det kan bygges automatisk med svgo i en build pipeline eller hvor nødvendigt.

Jeg kan se at pyaffalddk giver en entity_picture attribut som er sat til f.eks. genbrug.svg eller haveaffald.svg. Det er lidt spøjst da billederne lever i det her repository :).. Men om noget kunne man lave et map af f.eks plastmetalmadmdk.svg => data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3.... og så bruge den værdi.

Jeg konverterer i øvrigt alle svg'er til minified med:

find . -type f -name "*.svg" -exec sh -c 'svgo "$1" -o "${1%.svg}.min.svg"' _ {} \;

Og til base64 / datauri:

echo "data:image/svg+xml;base64,`base64 -w 0 batterier.svg`"

// For alle
find . -type f -name "*.min.svg" -exec sh -c 'echo "''$1'' => data:image/svg+xml;base64,`base64 -w 0 $1`"' _ {} \;

[briis]

Hej Michael, Super godt. Din PR er stadig i Draft mode, så jeg har ikke merged den endnu. Jeg har lavet en fil images.py hvor jeg netop vil lave mapping mellem kategorierne og data:image, og så er det blot den fil der skal vedligeholdes hvis der skal ske ændringer. Jeg er ved at flytte Wrapperen til netop pyaffalddk og det ville være fedt hvis du kunne opdatere filen pyaffalddk/images.py med base64/datauri ud for hver kategori.

[LordMike]

Ville du egentligt ikke hellere lade det her repository om at behandle billeder - altså, pyaffalddk er udelukkende et API der skaffer data, og så er det her repo visningen af data, med bl.a. billeder?

I så fald skulle pyaffalddk hellere returnere en kategori (uden .svg), og så ville det her repo lave mappet (eller et link til en .svg).

Det er jo heller ikke sikkert at andre consumere af pyaffalddk kan bruge de billeder den måtte give. Der kan helt sikkert komme nogle HA-specifikke ting ind i billederne der skal bruges. F.eks. at de netop skal være kvadratiske, eller fordi de bliver vist inde i en cirkel, at nogle af symbolerne skal flyttes mod centrum og ikke længere være i midten af deres kvadrant.

[briis]

God pointe. pyaffalddk returnerer allerede en kategori, så mapningen er simpel nok. Man kunne tage images.py filen fra pyaffalddk og flytte den til HA integrationen i stedet.

EDIT: Hvis du kunne lave filen, med de rigtige base64/datauri, så kan jeg sikre de bliver mappet korrekt.

[LordMike]

Kan du give mig en template for en py fil jeg kan fylde ud?

[briis]

Nedenfor finder du images.py filen. Det er List, hvor data:image/svg.... så blot skal tilføjes mellem de 2 "" efter hver kategori.

"""This module contains the embedded images for Entity Pictures."""
from __future__ import annotations

PICTURE_ITEMS = {
    "batterier": "",
    "elektronik": "",
    "dagrenovation": "",
    "farligtaffald": "",
    "farligtaffaldmiljoboks": "",
    "flis": "",
    "genbrug": "",
    "glas": "",
    "glasplast": "",
    "haveaffald": "",
    "jern": "",
    "metalglas": "",
    "pap": "",
    "papir": "",
    "papirglas": "",
    "papirglasdaaser": "",
    "papirglasmetalplast": "",
    "papirmetal": "",
    "pappapir": "",
    "pappapirglasmetal": "",
    "pappi": "",
    "plast": "",
    "plastmadkarton": "",
    "plastmetal": "",
    "plastmetalmadmdk": "",
    "plastmetalpapir": "",
    "restaffaldmadaffald": "",
    "storskrald": "",
    "storskraldogtekstilaffald": "",
    "tekstil": "",
}

[LordMike]

Jeg bikser lige noget sammen.

[LordMike]

Prøv at tjekke det ud. Der er en bash fil der kan producere images.py, ud fra images.py.template.

[LordMike]

Har fjernet draft, da jeg tror det er klart. Images.py skal nok være et andet sted, men det ved du bedst :)

[briis]

Er på vej ud af døren til Påskefrokost, men glæder mig til at teste det hele når jeg er tilbage, senere i dag eller i morgen tidlig.

[briis]

Konen var længe om det, så jeg nåede lige at få merged dine ændringer. Så løb jeg ind i problemer med base64 converteren. Jeg kører på en Mac, og den version virker ikke med -w flag. Havde dog lige en debian på min proxmox server jeg kunne lægge svgo ind på, og fik testet at lave images .py. Det virker perfekt, men kræver lige lidt kopiering frem og tilbage, men det overlever jeg. Stærkt arbejde Michael. Jeg har også lavet ændringen i selve programmet, så den nu bruger embedded images fra images.py.

Nu lader jeg det lige stå, og sikrer mig alt spiller, så kan jeg slippe denne udgave. Tusind tak foreløbig Michael.