Home Assistant - Het Swiss Army Knife Beta FEEDBACK topic

[Mars Warrior]

Aanleiding Ik had in het "Show je setup" topic van Home Assistant een teaser geplaatst van deze kaart om te kijken wat anderen ervan vinden. Daar werd door Koepert voorgesteld om een apart topic aan te maken zodat een beperkt aantal mensen de kaart kan testen en uitproberen. En zo geschiedde. Het DOEL Het doel van dit topic is letterlijk feedback te krijgen met het gebruik van deze kaart zodat ik deze kaart met een gerust(er) hart kan vrijgeven op het Home Assistant Forum en kan verspreiden via HACS. Punten in willekeurige volgorde waar ik zo aan denk zijn: Lukt de installatie? Hoe wordt het werken ermee ervaren? Wat zijn cruciale zaken die in de handleiding (wordt Engels natuurlijk) moeten komen voor toekomstige gebruikers? Lukt het om zelf nieuwe creaties te maken, hoe simpel dan ook! Hoe draait het op een Android telefoon? Ik heb enkel iPhone/iPad, dus geen mogelijkheden om Android te testen. Het ondersteunen van zowel Safari als Chrome was af en toe al een hele uitdaging vanwege totaal andere implementaties van de SVG standaard. Nu verwacht ik dat chrome op Android gewoon hetzelfde kan als op de PC - dus geen problemen - maar ik kan het niet testen! Voor WIE? Het is van belang om te begrijpen dat dit topic mij moet helpen. Vanwege het overlijden van mijn zusje dit jaar heb ik af en toe wat tijd voor mezelf nodig. Er wordt dus de nodige zelfwerkzaamheid verwacht. Nu zitten we op Tweakers waar we gewend zijn om eigen inzet te tonen, dus ik maak me daar niet echt zorgen over. De beta testers zijn voor mij dus erg belangrijk om de kaart tzt vrij te geven. Eeuwige roem dus Dus voor wie? Je bent nieuwsgierig Je wilt hier tijd in steken om deze kaart te begrijpen en te leren gebruiken Je schrikt niet van YAML, je eet YAML bij je ontbijt... Je bent bereid om de bugs die je vind goed te omschrijven zodat ik er wat mee kan later De volgende dingen kunnen daarbij een pré zijn: Bekendheid met decluttering card. Deze wordt gebruikt en moet dus (via HACS) geïnstalleerd zijn Bekendheid met CSS; de styling van alle tools wordt direct met CSS gedaan namelijk Creativiteit om een totaal nieuwe visualisatie te maken of iets bestaands aan te passen. Ik ben op zich wel benieuwd wat anderen kunnen maken. Dat hoeft geen complexe weergave te zijn: soms zijn simpele dingen ontzettend bruikbaar! Mocht je beta tester willen zijn, dan kun je onderaan bij "Meedoen" lezen hoe je aan alle spullen kunt komen. Op dit ogenblik is SAK nog niet publiek beschikbaar via Github namelijk.
Welkom Inhoudsopgave Wijzigingshistorie Achtergrond Introductie en korte uitleg Voorbeelden met toelichting Voorbeeld #1 - Mijn MOAC Voorbeeld #2 - Weergave en bediening van lampen Voorbeeld #3 - Weergave van sensoren Voorbeeld #4 - Weergave van sensoren - Neumorphic en Flat design Voorbeeld #5 - Het weer op een soort auto dashboard Voorbeeld #6 - Het weer en airvisual op een achtergrond van cirkels Voorbeeld #7 - Server weergave Voorbeeld #8 - Het beweegt! 2x Gifje Meedoen, download en installatie
2021-11-15, Koppen aangepast zodat deze op een mobiel ook fatsoenlijk werken 2021-11-14, Topic geopend
Aanleiding Ik gebruik Home Assistant al heel wat jaren. Ik ben visueel ingesteld. Het enorme aantal mogelijke cards & custom cards was één van de dingen die mij daarom altijd erg aanspraken: zoveel keus! Ondanks deze keus zat ik vaak bestaande kaarten aan te passen, zodat ze net wat meer overeenkwamen met de visualisatie zoals ik die zou willen. En zo leerde ik beetje bij beetje hoe een custom card in elkaar zat. Tegelijkertijd kwam de vraag "Wat als ik de mogelijkheid zou hebben om een willekeurige visualisatie te maken? Dat ik zelf componenten kan samenstellen? Dan kan ik veel meer leuke dingen maken!" steeds vaker terug. En toen kwam het bericht dat mijn zusje dood zou gaan en had ik iets nodig om in balans te blijven en ben ik begonnen om mijn eigen vraag te realiseren: een kaart die mij een grote vrijheid geeft qua visualisaties, qua werk complex en uitdagend is en een perfecte afleiding is van alle ellende. Achteraf gezien ben ik veel, maar dan ook veel verder gekomen dan ik aan het begin had durven hopen. Dus zo zie je maar wat je als mens kunt leren als je ergens gemotiveerd aan begint Wat statistieken Er zit inmiddels zo'n 1.000 uur werk in. Dat is dus bij een werkweek van 40 uur zo'n 6 maanden werk! De omvang van de kaart zelf is zo'n 8.000 regels javascript Er zijn ca 50 schetsen gemaakt voor visualisaties Totaal beslaan de gemaakte views en diverse templates met alle test kaarten bijna 11.000 regels YAML. Daarbij variërend in grootte van 170 regels (perfect hergebruik en decluttering card) tot copy/paste views met zeer veel cards van 3.500 regels YAML. Het bedenken en maken van alles heeft dus heel veel tijd gekost. Daarbij heb ik ook het nodige moeten leren, want ik wist nog niks van browser afhankelijkheden, SVG details en het bestaan van custom animation frames, laat staan het zelf programmeren van zulke stukken software voor de segmented arc tool. Ook het van tijd tot tijd refactoren van de code (en dus ook alle YAML in een aantal gevallen) heeft wat tijd gekost, maar ook veel opgeleverd qua structuur, performance, leesbaarheid en onderhoudbaarheid. Als ik software ontwikkelaar zou zijn, dan zou het bijna op werk lijken
Intro... De naam van de kaart "Swiss Army Knife" was al snel bepaald door de veelzijdige tools die ik aan het bouwen was. Dus een eigen logo was ook snel geboren! De basis van SAK SAK is opgebouwd uit een aantal basis elementen die belangrijk zijn om te begrijpen hoe de kaart werkt, en hoe je visualisaties moet maken. SAK is volledig gebouwd met SVG: SAK is volledig gebouwd op de SVG (Scalable Vector Graphics) 'standaard'. Standaard tussen aanhalingstekens, want de implementatie door verschillende browsers is allesbehalve standaard. Het woord schaalbaar is hier het toverwoord: hoe groot de visualisatie ook wordt weergegeven, het is altijd scherp. Verder schaalt ook tekst perfect mee, dus ook daar heb je geen omkijken naar! Animaties (SMIL of CSS) behoren tot de mogelijkheden, naast de uitgebreide ondersteuning voor filters om bijv. schaduwen te kunnen maken. SAK gebruikt een eigen coördinaten stelsel om alle objecten te plaatsen: SVG is grafisch, en dus heb je coördinaten (x,y) nodig om objecten te kunnen plaatsen op een canvas. De grootte van dat canvas is de SAK Card die een configureerbare grootte heeft. Binnen SAK heten de grafische objecten 'tools', en een verzameling van 'tools' een 'toolset'. Beiden maken gebruik van een coördinaten stelsel dat SVG details netjes afschermt voor de gebruiker. Een toolset zorgt ervoor dat je een verzameling aan tools in één keer kunt plaatsen op de gewenste positie ipv dat je alle tools afzonderlijk van de juiste coördinaten moet voorzien: een toolset is daarmee dus een herbruikbare component! De card, tools en toolsets en de x,y coordinaten werken als volgt samen: Een SAK card heeft een configureerbare grootte: je moet de x/y verhoudingen opgeven, dus bijv 1/1 voor een vierkante card, 2/1 voor een 2x zo brede als hoge card, etc. Je kent dit soort verhoudingen mogelijk wel van iet als Instagram. De verhouding 1/1 komt overeen met een canvas van 100x100. Een verhouding van 2/1 met een canvas van 200x100. Elke tool is gebaseerd op dit standard canvas van 100x100, waarbij linksboven (0,0) is en rechtsonder (100,100). Het centrum ligt dus op (50,50). Een tool kan - indien nodig - wel groter zijn, maar het algemene doel is altijd om deze binnen het 100x100 canvas te laten passen. Een tool wordt in het algemeen opgebouwd rondom de centrum coördinaten van (50,50): dat maakt het plaatsen een stuk logischer op de card, hetzij als tool zelf, hetzij vanuit een toolset. Een toolset heeft vanzichzelf geen grootte, maar wel centrum coördinaten: deze moeten passen binnen het canvas van de SAK card. In de praktijk ziet een card met dimensions 1/1 met daarop een toolset, bestaande uit tools "circle", "state" en "icon" er dan als volgt uit, waarbij x,y elke keer de centrumcoördinaten voorstellen: De toolset staat met (50,50) in het midden. Zou deze op (45,50) worden gezet, dan zouden alle tools naar links schuiven, tegen de rand van de card aan. En wat wordt door SAK aan tools ondersteund? Eenvoudige grafische objecten als een circle, ellipse, line, rectangle/rectex, regpoly (veelhoeken en sterren) en text. Home Assistant specifieke zaken als state, name, area en icon. Specifieke bedienelementen zoals een slider en een switch. Een bar voor de eenvoudige historie weergave Een usersvg tool voor laden en weergave van externe SVG bestanden En last but not least: de segarc of segmented arc tool. Complex van aard, maar veel gebruikt en prominent aanwezig in de meeste voorbeelden. Ondersteuning van CSS Elke tool can via de style: definitie worden gestyled. Hierbij kan gebruik worden gemaakt van CSS definities. Er vind geen vertaling plaats binnen SAK. Dat betekent dat als je bijv. via de Chrome Inspector tools handmatig bent wezen stylen, je deze kunt overnemen in je YAML definitie. Om de styles beter beheersbaar te maken is er - experimentele - ondersteuning voor CSS classes binnen SAK: zo kun je een class definieren, en deze vervolgens hergebruiken. Dat scheelt natuurlijk enorm veel style regels YAML. Sommige tools ondersteunen daarnaast colorstops en varianten daarop zodat je afhankelijk van de state de kleur bijv. kunt wijzigen. Last but not least: animaties! Animaties maken het mogelijk om de style te wijzigen van tools aan de hand van een state wijziging van een state of attribute. Als voorbeeld een stukje (template) uit de lamp weergave (zie voorbeeld 2 en voorbeeld 8, waarbij de activatie ring om de lamp van kleur wijzigt als de lamp aan of uit is: Algemene styling staat onder de algemene styles: definitie. Hierin zie je ook dat een style overgang 0.8 seconde duurt. De "transition: 'all .8s ease'" is een CSS animatie die vertelt dat elke ondersteunde style wijziging er 0.8 seconde over doet om van de ene style naar de andere style te gaan. De activatie ring kleurt dus in 0.8 seconde naar de gewenste oranje kleur. Onder de animations: definitie zie je dat bij state: on de ring licht orange kleurt, en bij state: off naar de volgens het thema primaire text kleur (donkergrijs in dit geval) gaat. En dat opacity naar 70% wordt gezet. Tot zover... Tot zover de basis. Elke tool kent nog de nodige eigenschappen die je voorlopig uit de YAML voorbeelden zult moeten halen. Terug naar Inhoudsopgave...
Intro... Hoe kwamen de voorbeelden tot stand? Tsja. Ik heb het afgelopen jaar zo'n 50 schetsen gemaakt in Procreate op mijn iPad. Veel schetsen hebben het nooit gehaald om te maken. Dat kon zijn omdat ze niks toevoegen, te lastig waren, of gewoon lelijk achteraf. Onderstaand zo'n ruwe schets met daarin een voorversie van het server voorbeeld en van een lamp. Nog niet echt Leonardo da Vinci niveau , maar je moet het doen met je eigen mogelijkheden: Vanuit een schets werken is soms wat veel werk om die in productie te krijgen. En dan gaat het voornamelijk om alle coördinaten, oftewel de posities van de diverse tools. Maar ook dat went: ff wat in YAML wijzigen, en dan op ctrl-F5 rammen in de browser en je ziet de laatste stand van je creatie In het geval van voorbeeld #6 heb ik dat anders gedaan: door in Affinity Designer alles op schaal te maken (een 100x100 matrix) kon ik alle coördinaten en groottes letterlijk uit AD overnemen. Rechtsonder zie je de coördinaten (77, 59) en grootte (22) van de geselecteerde cirkel: die heb ik letterlijk in YAML overgenomen om de cirkel met de tool erop te plaatsen: En in YAML ziet het er dan zo uit voor de cirkel die hierop wordt geplaatst. Je ziet de definitie van een toolset (verzameling/groepering van tools) en een deel van de tools definities, in dit geval de cirkel waar het weertype uiteindelijk op komt. De toolset coordinaten (50,50) zorgen ervoor dat alles netjes in het midden staat: als we alles net waar naar links hadden willen zetten, dan had dit bijv. (45,50) kunnen zijn en had de cirkel tegen de rand van de card aangezeten. Het Design: Zo ongeveer alle voorbeelden zijn gebaseerd op een Neumorphic Design. Dat vond ik leuk omdat het weer eens wat anders is. Bij dit ontwerp komen objecten uit de achtergrond omhoog, of liggen ze erin. Afhankelijk van de achtergrondkleur is het noodzakelijk dat de lichte en donkere kleuren passen bij de achtergrondkleur. Een site om de kleuren te bepalen die je nodig hebt in je thema is hier te vinden! Het gebruik van Neumorphic Design is vanzelfsprekend niet verplicht: je kunt elk plat design, of een material design met schaduwen maken. Kwestie van het toepassen van de juiste SVG filters die zijn voorgedefinieerd! De voorbeelden: De voorbeelden zijn echte screenshots van mijn iPhone, ik doe aan een "Mobile First Approach", dus al mijn views zijn passend en bedienbaar gemaakt op een iPhone. 3 kaarten naast elkaar in een rij zijn dus het maximum wat nog te bedienen is. 2 kaarten zou nog beter zijn volgens UX experts, maar voor mij is dit net goed. Deze screenshots zijn vervolgens in een mockup van een iPhone in Affinity Designer gevoegd om het totaal plaatje te krijgen. Terug naar Inhoudsopgave...
Voorbeeld #1 - Mijn MOAC (Mother of All Cards) Dit is de grootste visualisatie die ik heb gemaakt als het gaat om aantallen entiteiten/attributen en zeker qua omvang in YAML. Geen hergebruik van onderdelen, gewoon lekker copy/paste en dan zit je rond de 1.500 regels! Databronnen: Met Weather Airvisual Totaal ca 50 entities / attributes Weergave: Het weer: weergegeven door een state afhankelijke externe SVG (wolk/zon). Het zonnetje draait dus en bij zonsondergang wordt de zon vervangen door een maan! De temperatuur: segmented arc, state en icon Luchtvochtigheid: segmented arc, state en icon Airvisual waarde: segmented arc, state en state afhankelijk icon Luchtdruk: icon, state en unit of measurement Zonsopgang: icon en state Windsnelheid en richting: icon, state en unit of measurement Zonsondergang: icon en state Per dag de weersvoorspelling: dag, weertype, max. temperatuur, huidige temperatuur, regenverwachting Interacties: Voor de meeste tools is de actie "more-info" gedefinieerd: je krijgt dus een grafiek bijv. van de temperatuur, luchtvochtigheid, etc. Bijzonderheden: De kaart ondersteund vertalingen. Dat zie je in deze weergave bij "Gedeeltelijk bewolkt" en de windrichting "WZW". Gaat niet vanzelf, maar er is dus ondersteuning voor via een YAML definitie Niet direct zichtbaar is de ondersteuning van javascript op een aantal plekken. De verkorte dagnamen ma-vr zijn hier via javascript bepaald als een afgeleide state. Soms erg handig omdat je in een ander geval template variabelen zou moeten maken. Ook de bepaling van het weertype heeft de hulp van een stukje javascript: tussen zonsondergang en zonsopgang wordt een maan in het weertype gebruikt ipv een zonnetje. Documentatie De documentatie voor dit voorbeeld staat hier. Terug naar Inhoudsopgave...
Voorbeeld #2 - Weergave en bediening van lampen De visualisatie en bediening van lampen. Mag natuurlijk ook iets anders zijn. De eerste rij bevat verschillende variaties met een slider die semi-realtime de brightness bediend. Semi-realtime betekent dat als je de slider schuift, de verlichting in stapjes meegaat. Databronnen: Mijn Tradfri Zigbee lampen Domme lampen aan een Wifi schakelaar 1 entity en 1 attribuut per lamp Weergave: Een menu linksboven die je het light popup menu geeft. Er zit nog geen touch area onder het menu icon, dus het aanraken is nog lastig... De lamp zelf met zijn toestand aan/uit. Dit is ook de touch area om de lamp te bedienen. Afhankelijk van de state veranderd de rand, het icoon en het filter voor diepte werking alsof een knop is ingedrukt Slider voor brightness en de state van de brightness Een segmented arc (2de en 3de lamp) die de brightness weergeeft. En dan de omschrijving van de lamp entity Interacties: Het menu links bovenin geeft een "more-info" popup voor de lamp waar je nog meer kunt instellen. De touch area is nog niet goed, dus het aanraken van het menu is erg lastig... De lamp om deze aan/uit te zetten via een action Een slider die je kunt verslepen/klikken op een bepaalde waarde. Hier zit wel al een touch area achter, zodat je eigenlijk altijd goed zit met je vinger! Bijzonderheden: De brightness zoals Home Assistant deze doorgeeft is een getal tussen de 0..255. Een stukje javascript in de YAML definitie van de weergave zet dit netjes om naar een afgeleide waarde 0..100 en voegt daaraan de unit of measurement "%" toe zodat ook deze kan worden weergegeven. Terug naar Inhoudsopgave...
Voorbeeld #3 - Weergave van sensoren Weergave van de toestand van diverse sensoren. Databronnen: Mijn Aqara Zigbee sensoren (temperature, humidity en pressure) Weergave: Een rectangle met afgeronde hoek rechtsboven en een cirkel over elkaar heen als basis voor de weergave. Dankzij het Neumorphic Design 'morphen' deze twee objecten alsof het één object is. De state en de unit of measurement De naam van de entity Een eenvoudige trendweergave over de laatste 24 uur Interacties: Voor de meeste tools is de actie "more-info" gedefinieerd: je krijgt dus een grafiek bijv. van de temperatuur, luchtvochtigheid, etc. Terug naar Inhoudsopgave...
Voorbeeld #4 - Weergave van sensoren - Neumorphic en Flat design Wederom een aantal weergaves van sensoren, maar nu op een geheel andere manier dan de vorige weergave. De eerste rij is een Neumorphic Design, en de tweede rij is een zeer eenvoudig Flat Design: enkel wat rectangles met kleuren over elkaar heen, en daarop de sensor gegevens. het kan dus erg simpel! Databronnen: Mijn Aqara Zigbee sensoren (temperature, humidity en pressure) Weergave 1ste rij: Icon Segmented Arc met colorstops en scale State met unit of measurement Name van de entity Eenvoudige historie over de laatste 24 uur Weergave 2de rij: State met unit of measurement Icon Name van de entity Eenvoudige historie over de laatste 24 uur Interacties: Voor de meeste tools is de actie "more-info" gedefinieerd: je krijgt dus een grafiek bijv. van de temperatuur, luchtvochtigheid, etc. Documentatie De documentatie voor het sensor voorbeeld staat hier. Terug naar Inhoudsopgave...
Voorbeeld #5 - Het weer op een soort auto dashboard Weergave van het weer buiten geïnspireerd door de klokken in het dashboard van een auto. De eerste weergave is een Flat Design met een beetje schaduw. De tweede weergave weer een Neumorphic Design. Databronnen: Met Weather sensor Weergave: In beide gevallen 3x Segmented Arc die de state weergeeft, en per entity de state, uom, icon waarden Tenslotte nog de name en area als teksten onderaan. Interacties: Voor de meeste tools is de actie "more-info" gedefinieerd: je krijgt dus een grafiek bijv. van de temperatuur, luchtvochtigheid, etc. Terug naar Inhoudsopgave...
Voorbeeld #6 - Het weer en airvisual op een achtergrond van cirkels Het weer verveelt nooit, en is makkelijk door iedereen te gebruiken als voorbeeld. Ditmaal is in Affinity Designer een leuke achtergrond gemaakt bestaande uit wat cirkels met een kleurverloop. Daarboven op zijn de 5 cirkels geplaatst met de data van de nodige entities. Databronnen: Met Weather sensor Airvisual AQI Weergave: Achtergrond als externe SVG, geladen via de userSVG tool van de SAK kaart Linksboven als titel wat tekst Het weer in de diverse cirkels Weertype als een state afhankelijke externe, dynamische SVG. De airvisual data: state en icon, waarbij het icon afhankelijk is van de state! Interacties: Voor de meeste tools is de actie "more-info" gedefinieerd: je krijgt dus een grafiek bijv. van de temperatuur, luchtvochtigheid, etc. Bijzonderheden: De bepaling van het weertype heeft de hulp van een stukje javascript: tussen zonsondergang en zonsopgang wordt een maan in het weertype gebruikt ipv een zonnetje. Dat zie je in voorbeeld #8. Documentatie De documentatie voor het auto dashboard voorbeeld staat hier. Terug naar Inhoudsopgave...
Voorbeeld #7 - Servers weergave Weergave van de basis gegevens van twee servers. Mijn nucje waar oa Home Assistant op draait in containers en een server die als frontend dient voor het grote boze internet. Ook hier alles in docker containers. Beide systemen zijn ff flink belast om de weergave wat aantrekkelijker te maken: de colorstops zijn nu tenminste goed zichtbaar bij de system load. Databronnen: De bovenste haalt zijn gegevens uit de System Monitor integratie De onderste gebruikt de Glances integratie om aan deze gegevens te komen, aangevuld met wat extra REST entiteiten omdat die integratie niet alles levert Weergave: Linksboven de DISK weergave, gebruikt in %, gebruikt/vrij in GiB. De schaal gaat naar geel en erger vanaf 70% bezetting Linksonder de RAM weergave. Zelfde aanpak als voor de DISK ruimte. het CPU gebruik en de system load (1m, 5m en 15m) ieder in hun eigen segmented arc, icon en state weergave. Interacties: Voor de meeste tools is de actie "more-info" gedefinieerd: je krijgt dus een grafiek bijv. van de DISK, RAM of CPU, etc. Bijzonderheden: Er is optimaal gebruik gemaakt van toolsets en het kunnen schalen van een toolset: de DISK, RAM, CPU en de drie load weergaves zijn gebaseerd op een template toolset met ieder hun eigen schaalfactor. Omdat alles in SVG is gebouwd is het perfect schalen geen probleem: ook de tekst wordt namelijk exact meegeschaald. Een scale van 0.8 betekent 80% van de werkelijke toolset grootte Terug naar Inhoudsopgave...
Voorbeeld #8 - Het beweegt! 2x Gifje Wow! Bewegende beelden De gifjes zijn niet van top kwaliteit, maar laten een aantal animaties zien. Noot: Het kort knipperende vierkant wat je ziet bij de lampen is iets van iOS schijnt het bij het bedienen van de lamp: ik krijg dat niet gedisabled. Dit zit overigens niet bij bediening van de sliders en is ook niet in Chrome te zien op de PC. Ik zie het dus als een "known feature" Terug naar Inhoudsopgave...
Deze TS was al een hoop werk, dus dit laatste deel wordt nog ingevuld met instructies. Ik wil bijv. alle voorbeelden in aparte views ter beschikking stellen, zodat het uitproberen eenvoudiger wordt. Daar heb ik denk ik nog wat dagen voor nodig. Wil je meedoen en heb je het doel van het topic en voor wie deel goed gelezen, dan mag je me een DM sturen. Als ik alles gereed heb krijg je daarna vanzelf een antwoord met daarin een download link, en zal ik de instructies hier ook aanvullen! Alvast bedankt! Marco aka Mars Warrior aka AmoebeLabs. Handleidingen: https://swiss-army-knife-card-manual.amoebelabs.com/ https://material3-themes-manual.amoebelabs.com/ Terug naar Inhoudsopgave...
Ter compleetheid de huidige lijst van open issues die ik nog voor een public release wil oplossen. Deels bugs, en deels zaken die een refactoring nodig maken, en dus mogelijk wijzigingen in YAML. Die wil ik niet doen als alles al is vrijgegeven!

[Voor 5% gewijzigd door Mars Warrior op 15-06-2022 11:55]

[maartend]

Hee man, sterkte.

[barrymossel]

Held. (Op)bouwen!

Zoals ik al eerder zei: respect voor je creativiteit. Misschien laat ik wel een mooi design maken, want dat ligt me niet zo. YAML eet ik als midnight snack!

[mklcln]

Gecondoleerd en sterkte, maar wat een mooie teaser al, echt mooi.
Meteen gebookmarkt en volgend. Zeer benieuwd naar de resultaten.

Succes met dit project.

[skank]

Superknap hoor! Hoewel het totaal niet mijn stijl is, toch echt knap !!! Proficiat !

[Polyphemus]

Ziet er, vind ik, geweldig uit 🤩. Ik had je graag willen helpen met testen, ik heb wel een aardige HA installatie draaien, alleen themes en yaml begint ik net te ontdekken 😔

[royalt123]

Het ziet heel mooi uit en heel anders dan huidige look van Home Assistant.
Ik kijk er alvast uit naar officiele release omdat ik amper ervaring hebt met yaml dus geen slechte tester wilt zijn

[remcoXP]

Echt heel mooi! ben ook zeer benieuwd naar de uitbreidingen en varianten hierop. laat de filmpjes maar komen.
Zelf heb ik zoveel integraties en producten dat is nog wel even bezig ben om alles om te buigen denk ik.

[Mars Warrior]

Bedankt alvast voor de reacties.

Heb de TS ff aangepast zodat koppen het ook op mobiel doen, en ik heb de huidige lijst van issues die ik voor vrijgave wil oplossen er ff bij gedaan. Dan zijn de mij bekende bugs ook helder.

Voor wat betreft de weergave: ik heb jaren een Apple Home Kit layout/visualisatie gehad zoals @skank volgens mij nu ook gebruikt. Was er lang tevreden mee, maar de hang naar een stukje meer variatie / creativiteit bleef toch terugkomen.

Het Neumorphic Design geeft daarbij helemaal een niet HA look: sommige mensen die het eerder op mijn mobiel zagen herkenden van geen kant dat ik HA gebruik. Met daarbij opmerkingen dat dat systeem dat ik gebruik dingen kan (qua weergave), die in HA niet kunnen Vond ik best grappig

En daarom ben ik ook zeer benieuwd hoe anderen deze kaart gebruiken, waarbij deze qua look & feel perfect past binnen de layout die je nu al gebruikt. Zou mooi zijn als ik bij de publieke vrijgave ook nog hele andere layouts / look&feel voorbeelden kan toevoegen!

Het Neumorphic Design heeft wel eea opgeleverd als het gaat om kennis en gebruik van SVG hiërarchieën/layers gecombineerd met filters: ook een material design zoals HA die standaard gebruikt met schaduw werking voor diepte heeft hier dus profijt van.

[Voor 4% gewijzigd door Mars Warrior op 15-11-2021 12:13]

[Tribunus]

@Mars Warrior Instant bookmark, dit is echt prachtig! Helaas ben ik nog niet handig genoeg om je te "helpen" maar ik kijk er nu al naar uit om dit te proberen wanneer het "officieel" beschikbaar komt!

[Mars Warrior]

Even een update!

Ik heb iets van 10 aanmeldingen om eea te gaan testen, dus daar ben ik erg blij mee

Ik ben inmiddels een stuk verder tussen wat andere werkzaamheden door:

• alle voorbeelden zijn losgetrokken uit de bestaande views en deze ieder een eigen view gegeven. Dat maakt alles een stuk overzichtelijker
• de templates (oa tools, css definities voor SAK en eindgebruikers) zijn netjes in aparte bestanden gezet. Scheelt ook een stuk zoeken.
• een aantal cards zijn wat gedocumenteerd. Niet structureel maar het commentaar moet in ieder geval helpen
• een tweetal breaking changes zijn alvast doorgevoerd: het zou beetje jammer zijn voor iedereen om al snel weer dingen te moeten wijzigen
• decluttering templates zijn nagekeken en al het overbodige (door testen/proberen) verwijderd

Ik moet nu enkel nog:

• het thema dat in de voorbeelden gebruikt wordt wat opschonen
• nog wat kleine dingen in de source code doen

Dus ben bijna zover om alles via een link vrij te geven.

Alles zal in een zip file gaan zitten met daarin de mappen waarin alles behoord te staan, en waar de YAML includes ook mee werken. Wat je gebruikt mag je natuurlijk zelf bepalen.

[Bartske]

Leuk, ga dit topic zeker volgen. Leuk dat je dit openbaar maakt voor iedereen

[_Mitchie_]

Topic wat ik zeker ga volgen . Helaas zelf nog niet de skills om dit voor de mekaar te krijgen.
Maar weldoende leert men

@Mars Warrior Ga je misschien nog in de toekomst een youtube tutorial maken ?

[Campo di Casa]

Ik heb hier echt de ballen verstand van, kan je op geen enkele manier helpen, maar wou ff laten weten dat dit er echt tof uit ziet wat je aan het doen bent. Kudos!

[Mars Warrior]

@_Mitchie_ , geen idee nog. Hangt ook af van alle ervaringen die ik hier terug krijg.

Aan de andere kant wel leuk om te doen natuurlijk. Een video van een stap voor stap aanpak hoe ik zelf dingen doe en ontwerp kan een aantal mensen wel helpen om zelf een kaart te maken.

Voorlopig beetje druk met eea opschonen en vrijgeven, dus ik heb het op mijn “leuk om later te doen” lijstje gezet. Die is aardig lang al met uitbreidingen / ideeen voor deze kaart, dus ik zal tzt moeten gaan kiezen wat ik al eerste wil gaan doen

[Kire88]

Mars Warrior schreef op zondag 21 november 2021 @ 17:38:

Voorlopig beetje druk met eea opschonen en vrijgeven, dus ik heb het op mijn “leuk om later te doen” lijstje gezet. Die is aardig lang al met uitbreidingen / ideeen voor deze kaart, dus ik zal tzt moeten gaan kiezen wat ik al eerste wil gaan doen

Je hebt werknemers nodig

[Mars Warrior]

Kire88 schreef op zondag 21 november 2021 @ 19:37:
[...]
Je hebt werknemers nodig

Ik verwacht dat als alles straks is vrijgegeven, er wel wat mensen PRs (Pull Requests) zullen indienen om dingen te wijzigen en uit te breiden. Wat is altijd afwachten, maar dat zie ik tzt wel

Kan ik lekker verder hobbyen en filmpjes maken

[Mars Warrior]

Ik heb inmiddels alle voorbeeld views getest en er - kon het niet laten - nog 1 bijgemaakt.

Ik dacht ik doe er nog een homekit achtig voorbeeld bij met heel weinig kleuren, maar wel een paar animaties zodat je ook kan zien wat je met een state wijziging kan doen.

De icon animatie doet het enkel onder Safari. Als de render pipelines van Chrome en Safari voor iconen wordt gelijkgetrokken, dan zal dit wel opgelost worden…

Het pulserende witte vlak doet het onder beide browsers overigens.

Voorbeeldje:



In de eerste card behoort de waarde 17 ook groen te zijn, maar ja, niet alles werkt nog correct

Het maken van deze kaarten adh van een voorbeeld was zo gedaan. Het fixen van wat bugs en implementatie van de secondary_info had iets langer nodig, maar dat werkt nu (grotendeels) dus ook!

Thema is ook aardig opgeruimd , en dan moet ik enkel nog wat aan de software doen, en dan ben ik ff klaar en ga ik alles netjes inpakken voor de testers!

[Intro_Verti]

Dat ziet er heerlijk strak uit @Mars Warrior !

[D4NG3R]

Helden, deze ga ik volgen.

[water_escape]

@Mars Warrior Als eerst gecondoleerd! Mooi dat je dit opdraagt.
Dit is de mooiste HA die ik tot nu toe gezien heb en zou ik graag willen gaan draaien.

Mijn kennis is basis tot laag. Code aanpassen en spelen lukt nog, maar zelf schrijven niet. Mocht je dat als doelgroep wil testen ook (zodat meer mensen het kunnen gebruiken) duik ik er graag in voor je.

Is dit design Mobile only, of ook voor wall tablet / browser?

[Voor 8% gewijzigd door water_escape op 23-11-2021 09:00]

[AlxRoelofs]

Allereerst gecondoleerd!

Helaas kan ik je niet helpen, want zo veel ervaring met hetgeen je vraagt heb ik niet. Ik kan je wel zeggen dat als het allemaal rond en af is, je er een download bij hebt want dit ziet er echt strak uit!

[Casper92]

Gecondoleerd met het verlies van je zus!

Ik ben helemaal onder de indruk - ik volg je topic en je hebt er sowieso een gebruiker bij. Ik heb geen die hard code-ervaring, maar als je ergens over wilt sparren, let me know.

[Chevalric]

Wat een mooie, constructieve manier om het verlies van je zusje te verwerken, sterkte verder.

Ik ga binnenkort beginnen met het volledig nieuw opbouwen van mijn HomeAssistant setup (ivm nieuwe woning). Ik zie het helemaal zitten om jouw werk te gebruiken voor de dashboards en waar mogelijk misschien wat te helpen om dingen te verbeteren!

In ieder geval alvast bedankt voor je werk.

[Mars Warrior]

Intro_Verti schreef op maandag 22 november 2021 @ 22:47:
Dat ziet er heerlijk strak uit @Mars Warrior !

Klopt. Homekit is ook aardig monotoon en strak qua vormgeving, dus dat krijg je als je dit idee overneemt.

Maar wat ik wilde laten zien hiermee dat het geen design contest ofzo is: je kunt met SAK ook hele eenvoudige en rustige kaarten maken.

In dit geval heb ik een plaatje van internet gehaald, deze in Affinity Designer geplakt om de coördinaten te bepalen, en daarna wat dingen lopen knippen & plakken uit andere views. Want ook ik kopieer gewoon vanuit andere views en bedenk bijna niks vanaf scratch als het gaat om de YAML definities.

---

Binnen SAK zijn alle CSS definities hetzij gedefinieerd in sak-css-definitions.yaml voor alle SAK gerelateerde zaken (ook de gedefinieerde animaties die je kunt gebruiken staan daarin), en in user-css-definitions.yaml voor alle dingen die de gebruiker extra wil definiëren, of juist de SAK definities wil overschrijven.

Voor voorbeeld 8 heb ik wat CSS class definities in user-css-definitions.yaml toegevoegd. Dit is zuiver CSS ingepakt in een YAML definitie:

YAML:

# Demo using classes for example #8, some homekit like cards...
#------------------------------------------------------------------------------
  - descr: default Name styling
    content: >
      .homekit-name__name {
        text-anchor: start;
        font-size: 12em;
        font-weight: 700;
        fill: var(--primary-text-color);
      }

  # Note: font-size MUST be defined as style for the state.
  # Otherwise, uom can't be rendered!
  - descr: default State & Uom styling
    content: >
      .homekit-state__value {
        text-anchor: start;
        font-weight: 700;
        fill: var(--primary-text-color);
      }
      .homekit-state__uom {
        fill: var(--primary-text-color);
        font-weight: 700;
      }

En dan de AQI state (eerste rij, eerste kaart, die gekleurde tekst onderaan) in view-sake8.yaml gedefinieerd met de coördinaten en de colorstops die de kleuren definieert. Deze kun je ook als een template definiëren waardoor deze overal is te hergebruiken.
Verder zie je de hierboven gedefinieerde classes die gebruikt worden voor de state.

YAML:

                  # Display the AQI value using the colors specified by AirVisual,
                  # from green to purple using a colorstop and specifying fill as
                  # the property to change.
                  - type: state
                    position:
                      cx: 10
                      cy: 85
                    entity_index: 0
                    show:
                      style: 'colorstops'
                    colorstops:
                      fill: true
                      colors:
                        0: '#A8E05F'
                        51: '#FDD74B'
                        101: '#FE9B57'
                        151: '#FE6A69'
                        201: '#A97ABC'
                        301: '#A87383'
                    classes:
                      state:
                        homekit-state__value: true
                      uom:
                        homekit-state__uom: true
                    # Note:
                    # Due to rendering not knowing classes, the state MUST have a 
                    # font-size because uom expects this value to be defined...
                    styles:
                      state:
                        font-size: 12em

Door zo'n kaart als template te definiëren, kun je deze dus in een view overal hergebruiken en wijzigt alles mee als je de template wijzigt

Je ziet ook dat zo'n definitie wel wat regels nodig heeft, maar niet echt complex is. Als je de colorstops zou weglaten, dan blijft er niet veel anders over dan de positie, de entity_index en de classes/styles definitie. Gebruik je de standaard SAK styling, dan kun je ook die weglaten en wordt het best compact!

De entity name die erboven staat, ziet er als volgt uit:

YAML:

                  - type: name
                    position:
                      cx: 10
                      cy: 70
                    entity_index: 0
                    classes:
                      name:
                        homekit-name__name: true

Compacter dan dat wordt het niet

[Voor 4% gewijzigd door Mars Warrior op 23-11-2021 12:10]

[Mars Warrior]

Dankjulliewel voor je medeleven. Dat vind ik fijn!

[Mars Warrior]

water_escape schreef op dinsdag 23 november 2021 @ 08:54:
@Mars Warrior Als eerst gecondoleerd! Mooi dat je dit opdraagt.
Dit is de mooiste HA die ik tot nu toe gezien heb en zou ik graag willen gaan draaien.

Mijn kennis is basis tot laag. Code aanpassen en spelen lukt nog, maar zelf schrijven niet. Mocht je dat als doelgroep wil testen ook (zodat meer mensen het kunnen gebruiken) duik ik er graag in voor je.

Dankjewel! En als je met "Code aanpassen en spelen" YAML bedoelt, dan heb je straks voldoende voorbeelden om aan te passen als je dat wilt

Als bovenstaande klopt, zou ik zeggen, stuur ff een DM om je aan te melden, want dat is de lijst die ik hanteer.

Is dit design Mobile only, of ook voor wall tablet / browser?

Ik gebruik weliswaar een Mobile First Approach zoals dat zo mooi heet, maar niets staat je in de weg om dit in een browser of tablet te gebruiken. Voor mobiel gebruik ik alles in een enkele vertical-stack, maar als je er hiervan meer gebruikt krijg je een mooi gevuld scherm.

In sommige van mijn eigen test views heb ik dat ook: anders blijf ik maar scrollen met max 3 kaarten naast elkaar in een horizontal-stack, terwijl ik ontwikkel op een 38" 21:9 UHD monitor

[water_escape]

wrong post

[Voor 94% gewijzigd door water_escape op 23-11-2021 15:25]

[R0y.]

Deze ga ik volgen. Ik denk dat je niet veel aan mij gaat hebben als tester dus ik wacht even op een release. Veel succes!

[Mars Warrior]

Weer een update!

Ik had vanaf eind vorige week wat rare dingen. Ik kon bijv. op een gegeven moment niet eens meer mijn eigen repository lezen: kreeg autorisatie fouten.

Todat ik een mail kreeg van Github dat een Jekyll build was mislukt. Huh? Ik gebruik helemaal geen Jekyll, dus wat is hier nu aan de hand? En pas toen zag ik dat Github problemen had

Dus ik dacht: ga ff wat anders doen!

Ik zat namelijk nog met de documentatie die natuurlijk nodig is. Gezien de omvang van de TS, gaat een simpele README dus niet voldoen En zolang ik niks heb gekozen, kan ik ook niks gaan invullen of vragen beantwoorden. Het zeurde dus een beetje!

Dus ben op zoek gegaan naar een doc tooltje dat iets moois oplevert met een goede menu structuur, simpele navigatie, veel mogelijkheden (call-outs, tabellen, etc.) en iets dat aan te passen is, want het moet nog een beetje smoelen ook

Dus zie hier het resultaat van de Github problemen: een eerste opzet van de documentatie. Mijn toetsenbord heeft het zwaar gehad :

• het overgrote deel van de structuur staat
• van de tools zijn enkel de 'basic' delen al ingevuld, en van de advanced enkel de switch. Verder niet.

Kan ik nu weer verder met de andere dingen: moet nog wat herstellen want github heeft wat bestanden beetje corrupt weten te maken. Ach ja, ik heb gelukkig nog een backup

[djiedjee]

@Mars Warrior Lekker bezig!

[Mars Warrior]

djiedjee schreef op dinsdag 30 november 2021 @ 19:08:
@Mars Warrior Lekker bezig!

Yep!

Github is weer bij / hersteld, dus ik heb ook weer de juiste homepage

Weer eens wat anders dan een Github README...



Man man Kan ik nu weer verder met zorgen dat de testers hun spullen krijgen. Ben dus net zover als vorige week woensdag, maar goed. Wat is een week op een mensenleven en itt vorige week heb ik nu wel een stuk documentatie.

En altijd jammer dat je ook nog overdag moet werken

[Mars Warrior]

En weer tijd voor een update!

Ik zie het licht aan het einde van de tunnel vwb het vrijgeven van de beta spullekes

Aan het einde van het jaar is het op de een of andere manier altijd druk met werk en andere dingen. Geen idee waarom, maar zo hou je nauwelijks tijd over voor je hobby

Ik heb in de documentatie net een installatie stappenplan gezet zodat ik zelf kan zien welke bestanden ik allemaal moet gaan nalopen en in een distributiemap moet zetten. En natuurlijk voor de testers om te zien waar wat staat en wat ze ermee moeten...

De documentatie is ook her en der wat aangepast nog terwijl ik bezig was om eea uit te zoeken.

[Bartvw]

Ik volg dit op de voet, maar heb me nog niet aangemeld voor de bèta test. Kan niet garanderen dat ik er genoeg tijd in kan steken om compleet dashboard te bouwen. Maar zodra het public is ga ik zeker wel een view proberen te maken!

[Mars Warrior]

Bijna



Om het gebruik / testen te vereenvoudigen zonder gevolgen voor de bestaande Home Assistant installatie zitten alle voorbeelden nu in een eigen dashboard, met eigen thema definities...

Hieronder zie je het standaard HA thema, waar voorbeeld 8 het gonsboro thema gebruikt. Werkt als een tierelier en daarmee kun je dus ook eenvoudig verschillende thema's / look&feel mixen.



De installatie handleiding heb ik net aangepast hierop.

Moet nu nog de relevante bestanden, conform handleiding op een OneDrive share zetten, en daarna ff de beta testers op de hoogte brengen

Maar voordat ik dat doe, eerst ff lunchen en werken...

[born2tweak]

Ik heb de beta inmiddels handmatig geïnstalleerd in mijn docker omgeving en krijg de eerste resultaten eruit. helaas gaat het niet zo 1 op 1 goed, zoals in de examples, maar dat is natuurlijk te verwachten.

Het installeren van de custom cards is volgens mij wel gelukt: ik heb example5 werkend met mijn eigen woonkamer temp sensor van Aqara. De andere kaarten doen het helaas nog niet en ik ben lekker aan het uitproberen om een eigen card te maken met m'n eigen entities.

Wat voor mij belangrijk was: ik had geen ui-lovelace.yaml omdat ik alles in de frontend deed. Die dus toegevoegd en ook de resources geupdate met mijn paden. Zo heb ik /hacsfiles vervangen voor /local/community/. Ik weet niet of dit noodzakelijk is, maar nu werkt het
Verder dus de configuration aangepast met de lovelace en frontend verwijzingen, waardoor je een mix van dashboards krijgt, naast je bestaande dashboards.
Ook moest ik dus de custom:button-card en custom:decluttering-card installeren omdat ik die nog niet gebruikte.

update: na het wijzigen van entities op de sake2 example begint die ook te werken. Wat wel lastig is, is dat je geen feedback krijgt waarom het niet werkt. Maar als je dat eenmaal doorhebt, dan verschijnen de lampjes!

Ik heb het idee dat een aantal graphics nog niet opgepakt worden, zoals de hexagon plaatjes. Die zie ik nog niet terug in de templates.

Update:
In één van de decluttering templates (sak-sensor-history-nm-tpl.yaml) zit een rechtstreekse verwijzing naar weather.zoefdehaas, waardoor mijn entities het niet deden. Die regel eruit en het werkt wel weer. Nu ook voorbeeld3 aan de praat, zij het zonder de kleurtjes.... Oke, bij het wijzigen van het Thema op de user, krijg je meer kleurtjes.

Wat ik prettig vind is dat de verschillende voorbeeld pagina's allemaal anders zijn opgebouwd, dus door gebruik te maken van templates, of juist helemaal uitgewerkt in één bestand. Zo kun je je eigen vorm kiezen. Zeker voor de versies met template is het prettig omdat je snel entities toevoegt zonder allerlei code te moeten schrijven.

[Voor 34% gewijzigd door born2tweak op 09-12-2021 08:59]

[water_escape]

Mooie eerste feedback. hier nog geen tijd gehad. Misschien goed om screenshots erbij te doen?

[born2tweak]

Ik krijg helaas sake1 niet aan de praat, de weather forecast. Ik denk dat 't te maken heeft met een andere weather integration, maar ook bij het aanpassen van de entities krijg ik geen beeld. Ik zie ook niet hoe de mapping van de entities naar de toolset gaat, hoe hij moet herkennen wat de layout van een entity moet zijn.

Ik heb bijvoorbeeld Accuweather toegevoegd en een toolset hernoemd zodat ik hopelijk een mapping krijg, maar dat is wat lastig te debuggen als je niet precies weet hoe het werkt
Dus in plaats van

YAML:

entity: weather.zoefdehaas
attribute: temperature

gebruik ik:

YAML:

entity: sensor.huis_apparent_temperature

Werkt Accuweather eigenlijk dan ook hetzelfde? Ik kan helaas niet vinden hoe ik de attributes van weather definieer of vind.
Ook Met Weather geinstalleerd en gekoppeld zoals Mars ook heeft, maar nog geen visuals.
Ja, airvisual is geinstalleerd.

Voor de Sake7, kan het zijn dat de verwijzing naar de template niet goed is? Je verwijst naar tools_segarc_icon_state, maar de template heet toolset-segarc-icon-state-template.yaml. In de template zelf heet de toolset: segarc-icon-state. dus ik kan niet met 100% zekerheid zeggen dat dit goed is.

Ik probeer nu m'n eigen pagina te maken met cards, maar zit nog te stoeien met hoe de koppeling tussen toolset en entity plaatsvindt. Ik snap de toolsets maar mis ergens een bruggetje hoe ik voor een lijstje entities een template bouw.

update: gevonden! entity-index verwijst rechtstreeks naar de entities van bovenaf de pagina. Dus niets met namen of zoiets, maar verwijzend naar de volgorde van entities.

sake1: regel 181 geeft bij mij een foutmelding op de state. Als ik hier handmatig een tekst invul gaat het wel goed, maar met return (state + '-day'); gaat het mis. Later op regel 900 staat het weer maar daar werkt het wel. Enige verschil is dat je daaronder nog iets noemt over styles. En ik heb in de eerste horizontal-tab 3 entities weggehaald, maar de indexen aangepast. De rest van deze tab doet het wel.
Opgelost door de airvisual te installeren, daardoor verdwijnt ergens een fout waardoor state beschikbaar komt.

Nog een leuke: de sunrise en sunset geven op m'n pc een tijd met AM/PM en op m'n telefoon niet. de AM/PM zorgt ervoor dat de tekst over het icon heen loopt, deze schuift niet mee.

Naast de schoonheidsfoutjes nu heel sake1 werkend gekregen! Daardoor nu op ieder example in ieder geval een aantal entities staan waar ik verder mee kan.

[Voor 63% gewijzigd door born2tweak op 09-12-2021 14:43]

[Mars Warrior]

Even kort, oa dankzij @born2tweak heb ik de documentatie van de voorbeelden aangepast en een kopje "How to make it work in your own installation" toegevoegd.

Daarin staat welke integraties NOODZAKELIJK zijn, en of je entiteiten moet aanpassen.

Verder ook waar van toepassing mijn eigen sensor templates toegevoegd.

Dit zou in ieder geval het werkend maken van de voorbeelden in je eigen installatie moeten vereenvoudigen, of in ieder geval moeten verduidelijken wat je zou moeten wijzigen om ze allemaal werkend te krijgen.

Toch fijn deze opmerkingen!

Morgen kijk ik nog ff naar de overige opmerkingen. Daar is het nu te laat voor...

[Driek]

Ziet er mooi uit. Zal van het weekend eens kijken of ik tijd heb.

[djiedjee]

ik wilde dit weekend ook e.e.a. gaan proberen, maar toch vanavond achter de computer gekropen.

Net als @born2tweak heb ik na een recente versie installatie zoveel mogelijk vanuit de GUI gedaan.
Ook ik had geen ui-lovelace.yaml, resources ook via de frontend invuld etc.

E.e.a. nu omgezet, maar nu werken mijn bestaande custom-cards niet meer. Ik heb wel de SAK-kaart zien werken, dus dat is mooi.
Ik ga nu even een backup terugzetten, dit weekend weer verder.

[born2tweak]

@djiedjee let er vooral op dat wanneer je je resources.yaml update, je de eerder toegevoegde resources ook opneemt. Als je die voorheen via de gui had toegevoegd moet je die nu misschien via de /lovelace/resources/resources.yaml opnemen. Het pad wat je dan opneemt is bijvoorbeeld:

code:

- url: /local/air-visual-card/air-visual-card.js
  type: js

Je bestand moet dan staan in /www/air-visual-card/air-visual-card.js.

Daarnaast kun je dus je bestaande dashboard bewaren en SAK als nieuw dashboard toevoegen.
Zodra je die instellingen in configuration.yaml opneemt, zal je default dashboard ook yaml managed worden, dus misschien handig om een extra dashboard met UI-managed setting te maken en je views en cards daar naartoe te verplaatsen.

[Mars Warrior]

Je kunt ui en yaml mixen. Ff in de documentatie van HA kijken!

[djiedjee]

@Mars Warrior @born2tweak

Daar was ik inmiddels ook achter.
Gisteren toch even alle bestaande resources met juiste paden (nieuwe standaard HACS-lokatie is /community, niet meer /hacsfiles) opgenomen in de YAML-file.
Oude dashboards werken nu weer.

Blijkbaar worden de GUI resources disabled als je een resource YAML-file neerzet of wanneer je
lovelace- mode: yaml gebruikt in de config?

Wat wel weer gek is: HACS geeft nu aan "You have 9 Lovelace elements that are not loaded properly in Lovelace".
Dat zal dan wel komen doordat hij ze op 2 plekken tegenkomt maar er slechts 1 geladen kan worden.
Daar ga ik nog wel even mee testen.

Backup niet teruggezet, de komende dagen even spelen met SAK dus.


Edit:
ik zag dat ik uiteindelijk onderstaande includes in de ui-lovelace.yaml en in sak-examples-dashboard.yaml had staan.
Dat lijkt me 1x teveel.

# Decluttering Templates
decluttering_templates:
!include lovelace/decluttering_templates/decluttering_templates.yaml

# Swiss Army Knife Templates
sak_templates:
!include lovelace/sak_templates/sak_templates.yaml

[Voor 20% gewijzigd door djiedjee op 10-12-2021 09:23]

[mrCowboyBunny]

Hier inmiddels ook bijna helemaal aan de praat. Het was de meeste moeite om hem in mijn eigen HA omgeving draaiend te krijgen, gezien ik daar voor diverse zaken al wat includes had waardoor o.a. de themes niet lekker opgepakt werden. Dat is nu allemaal gefixed.

Qua themes had ik bijv. een "include_dir_merge_named themes" in de configuration.yaml staan, waardoor de nm-01-gonsboro.yaml e.d. fouten gaven (want die komen vanuit de themes.yaml die wordt meegeleverd in de zip). De thema bestanden heb ik daarom aangepast naar .yml en de themes.yaml ook zo aangepast dat nm-01-gonsboro.yml wordt geinclude ipv yaml.

De entities in de voorbeeld dashboard zijn ook aangepast en dat ziet er al voortreffelijk uit.

Van het weekend ga ik er denk ik even verder mee. De baas zal het waarderen als ik de rest van de dag toch wél aan het werk ga

Edit:
Nog een klein dingetje, waarvan ik niet weet of dat aan mijn installatie ligt:
Als ik het dashboard opnieuw open (F5, opnieuw naar de pagina toe ga, etc.) dan zijn soms de cards een stuk groter. Het opnieuw laden van de pagina maakt de cards weer de gewone grote. Dat lijkt op het eerste gezicht wat willekeurig te gebeuren.

[Voor 41% gewijzigd door mrCowboyBunny op 10-12-2021 10:59]

[Mars Warrior]

Leuk om de 1ste werkende screenshots te zien

---

Algemeen
Als ik even wat algemene dingen samenvat dan kan er nog eea verbeterd worden aan de integratie van de yaml files, waarbij gebruik wordt gemaakt van de "include_dir_*" methodes. Ik doe alles handmatig zoals jullie zien, maar als meer mensen dit soort functies gebruiken is het handiger om dat ook in de voorbeelden (en dus in mijn eigen installatie) te doen. Dat scheelt gewoon werk voor iedereen straks!

Ik zie in de HA documentatie over het splitsen van je config, ook de verschillende mogelijkheden staan, waaronder ook het gebruik van *.yml en *.yaml files staan zoals @mrCowboyBunny al aangeeft.

Die methode zou een mooie mix zijn.

---

Mix van ui en yaml aanpak
Die vind ik nog lastig. Ik krijg uit het commentaar niet ff helemaal duidelijk wat nu de aangewezen aanpak is. Denk wel dat er straks veel meer mensen zijn die hier tegenaan lopen, dus wil het wel opnemen in de documentatie.

born2tweak schreef op woensdag 8 december 2021 @ 21:20:
Verder dus de configuration aangepast met de lovelace en frontend verwijzingen, waardoor je een mix van dashboards krijgt, naast je bestaande dashboards.

Kun je dat nog toelichten?

---

born2tweak

born2tweak schreef op woensdag 8 december 2021 @ 21:20:
Wat voor mij belangrijk was: ik had geen ui-lovelace.yaml omdat ik alles in de frontend deed. Die dus toegevoegd en ook de resources geupdate met mijn paden. Zo heb ik /hacsfiles vervangen voor /local/community/. Ik weet niet of dit noodzakelijk is, maar nu werkt het

Vreemd dat bij mij dan /hacsfiles gewoon werkt. Ik neus ff in de officiele documentatie wat nu de correcte methode is, en pas dan alles aan.

Ook moest ik dus de custom:button-card en custom:decluttering-card installeren omdat ik die nog niet gebruikte.

Oeps, die zit er inderdaad nog in om in een horizontal-stack alles uit te lijnen als je maar 2 kaarten gebruikt in een stack van 3... Hmmm. Moet ff in de documentatie, of ik moet zorgen dat die voorbeelden kleiner worden zodat alles past op een rij van 3. Dan is het integreren eenvoudiger.

update: na het wijzigen van entities op de sake2 example begint die ook te werken. Wat wel lastig is, is dat je geen feedback krijgt waarom het niet werkt. Maar als je dat eenmaal doorhebt, dan verschijnen de lampjes!

Er zit nog niet heel veel errorlogging in: in veel gevallen wordt uitgegaan van foutloze gebruikers

Update:
In één van de decluttering templates (sak-sensor-history-nm-tpl.yaml) zit een rechtstreekse verwijzing naar weather.zoefdehaas, waardoor mijn entities het niet deden. Die regel eruit en het werkt wel weer. Nu ook voorbeeld3 aan de praat, zij het zonder de kleurtjes.... Oke, bij het wijzigen van het Thema op de user, krijg je meer kleurtjes.

Kijk, die had ik dus volledig over het hoofd gezien. Zal ik in de documentatie moeten aanpassen, want dit is natuurlijk wat zoekwerk.

Wat ik prettig vind is dat de verschillende voorbeeld pagina's allemaal anders zijn opgebouwd, dus door gebruik te maken van templates, of juist helemaal uitgewerkt in één bestand. Zo kun je je eigen vorm kiezen. Zeker voor de versies met template is het prettig omdat je snel entities toevoegt zonder allerlei code te moeten schrijven.

Fijn dat dat zo overkomt, en niet als luiheid van mijn kant
Het klopt wel dat iedereen zo zijn eigen methode kan kiezen, of kan varieren. Templates maken het in veel gevallen eenvoudiger, maar is ook als je ff wat snel wilt doen een stuk meer werk.

Ik probeer nu m'n eigen pagina te maken met cards, maar zit nog te stoeien met hoe de koppeling tussen toolset en entity plaatsvindt. Ik snap de toolsets maar mis ergens een bruggetje hoe ik voor een lijstje entities een template bouw.

update: gevonden! entity-index verwijst rechtstreeks naar de entities van bovenaf de pagina. Dus niets met namen of zoiets, maar verwijzend naar de volgorde van entities.

Klopt. Deze aanpak wordt door elke custom-card gebruikt: daardoor kun je nl ook templates maken: je geeft de entities door, en verder enkel via een nummer/index. Scheelt een hoop werk als je wat wilt wijzigen.

Nog een leuke: de sunrise en sunset geven op m'n pc een tijd met AM/PM en op m'n telefoon niet. de AM/PM zorgt ervoor dat de tekst over het icon heen loopt, deze schuift niet mee.

Dat heeft te maken met 'local' instellingen: NL of USA/Engels bijv.

Dat dingen over elkaar heen komen is typisch een SVG Text eigenschap: die kent geen ellipses zoals HTML kent. Komt wel in de SVG 2.0 spec, maar die is zwaar vertraagd helaas.

Ik wil nog wel tzt die ellipses nabouwen in Javascript: daar zijn nl voorbeelden van, want dit probleem is niet uniek voor SAK, en dus de oplossing gelukkig ook niet.

---

mrCowboyBunny

mrCowboyBunny schreef op vrijdag 10 december 2021 @ 10:56:
Hier inmiddels ook bijna helemaal aan de praat. Het was de meeste moeite om hem in mijn eigen HA omgeving draaiend te krijgen, gezien ik daar voor diverse zaken al wat includes had waardoor o.a. de themes niet lekker opgepakt werden. Dat is nu allemaal gefixed.

Qua themes had ik bijv. een "include_dir_merge_named themes" in de configuration.yaml staan, waardoor de nm-01-gonsboro.yaml e.d. fouten gaven (want die komen vanuit de themes.yaml die wordt meegeleverd in de zip). De thema bestanden heb ik daarom aangepast naar .yml en de themes.yaml ook zo aangepast dat nm-01-gonsboro.yml wordt geinclude ipv yaml.

Als je dat nog kunt toelichten, want zoals ik al in het algemene deel aangaf van mijn commentaar: het zou fijn zijn als ik dat eenvoudig kan aangeven of zelfs voor kan zijn, zodat in de toekomst dat eenvoudiger kan!

Edit:
Nog een klein dingetje, waarvan ik niet weet of dat aan mijn installatie ligt:
Als ik het dashboard opnieuw open (F5, opnieuw naar de pagina toe ga, etc.) dan zijn soms de cards een stuk groter. Het opnieuw laden van de pagina maakt de cards weer de gewone grote. Dat lijkt op het eerste gezicht wat willekeurig te gebeuren.

Geen idee. Komt me niet bekend voor. Heb je wel alles in een horizontal-stack gezet? Als je ongelijk aantal kaarten daar in gebruikt moet je eigenlijk uitlijnen door een dummy card erbij te doen: dat is waar ik de button-card nog voor misbruik.

Hoe gaat trouwens het aanpassen van de helderheid? Gaat dat goed?

[DennusB]

Ziet er super uit. Ik ga na mijn verhuizing zeker eens hiermee spelen Dank voor al je harde werk!

[born2tweak]

Ok, wat screenshots van mijn setup. Ze zijn nog bijna hetzelfde als de online voorbeelden, maar dus wel werkend in mijn setup!

Ik ben nu bezig om ook scenes aan sake2 toe te voegen, zal zsm daar ook een screenshot van maken.
Trouwens: ik heb de template van deze lights aangepast zodat ook het menu automatisch toegevoegd wordt. Dus in de template gedaan, zodat je in de dashboard zelf verder niets hoeft toe te voegen. De template gaat er vanzelf vanuit dat je die erbij wilt.

Mijn lovelace dashboards overzicht ziet er nu zo uit:

Daar zie je dus een mix van dashboards. Mijn normale home is dus een ui-controlled dashboard en links in het menu heb ik dus nu 2 extra dashboards, die yaml managed zijn.

[Voor 39% gewijzigd door born2tweak op 10-12-2021 14:40]

[mrCowboyBunny]

[b]Mars Warrior schreef op vrijdag 10 december 2021 @ 13:36:
Als je dat nog kunt toelichten, want zoals ik al in het algemene deel aangaf van mijn commentaar: het zou fijn zijn als ik dat eenvoudig kan aangeven of zelfs voor kan zijn, zodat in de toekomst dat eenvoudiger kan!

Zeker!

In de configuration.yaml heb ik opgenomen:

code:

frontend:
  themes: !include_dir_merge_named themes

In mijn themes map staan dan zaken als:

code:

themes/
  google_dark_theme/
    google_dark_theme.yaml
  google_light_theme/
    google_light_theme.yaml
  ios-dark-mode/
    ios-dark-mode.yml

Deze themes heb ik vanuit HACS geïnstalleerd. Uit je zipje heb ik vervolgens de inhoud van je themes map in mijn bestaande themes geplaatst, met als resultaat:

code:

themes/
  google_dark_theme/
    google_dark_theme.yaml
  google_light_theme/
    google_light_theme.yaml
  ios-dark-mode/
    ios-dark-mode.yaml
  themes.yaml
  nm-01-gonsboro.yaml
  nm-02-steelblue.yaml
  nm-03-dark-steelblue.yaml

Met deze opzet krijg ik de volgende errors:

code:

Invalid config for [frontend]: expected a dictionary for dictionary value @ data['frontend']['themes']['accent-color']. Got 'var(--cs-theme-default-accent)'
expected a dictionary for dictionary value @ data['frontend']['themes']['adc-wheat']. Got '#e5d7b9'
expected a dictionary for dictionary value @ data['frontend']['themes']['adc-whitesmoke']. Got '#edf4f6'
en zo gaat nog 252 regels door

En dat is wel logisch, want mijn Home Assistant pakt namelijk de themes.yaml op maar ook de nm-01-gonsboro.yaml, terwijl nm-01-gonsboro.yaml niet rechtstreeks uitgelezen zou moeten worden, want daarvoor heb je hem ge-include in je themes.yaml. Mijn HA pakt alle *.yaml bestanden in de themes map namelijk op. Volgens mij zijn hier 2 oplossingen voor:

1) nm-01-gonsboro.yaml hernoemen naar nm-01-gonsboro.yml (en de andere 2 theme bestanden ook), zodat je in je theme.yaml deze .yml bestanden include.
2) Regel 6 en 9 uit je theme.yaml verplaatsen naar nm-01-gonsboro.yaml en nm-03-dark-steelblue.yaml. Het gaat dan om deze regel:

code:

NM - Gonsboro:

en

code:

NM - Steelblue:

Optie 2 werkt alleen als mensen in hun configuration wel de hele themes map include ipv themes.yaml.

Ik heb zojuist optie 2 geïmplementeerd, omdat ik die persoonlijk het mooiste vind aansluiten bij mijn eigen Home Assistant. Daarbij dus themes.yaml verwijderd en in "nm-01-gonsboro.yaml", "nm-02-steelblue.yaml" & "nm-03-dark-steelblue.yaml" de 1e kop geplaatst (ik weet even niet hoe je het anders moet noemen, maar het gaat dan om bijv. dit stukje:

code:

NM - Gonsboro:
  #
  # Theming the box-shadow for a card using Neumorphic guidelines.
  # --------------------------------------------------------------
  ha-card-box-shadow: '3px 3px 6px var(--cs-theme-shadow-darker), -3px -3px 6px var(--cs-theme-shadow-lighter)'
  .... rest van het thema ....

Overigens werkt de setup zoals je die in je zipje had staan, vermoed ik, wel direct als het om een schone HA installatie gaat of bijv. een installatie waar nog geen thema's zijn toegevoegd. Daarbij ben ik absoluut geen HA expert en wellicht ben ik ergens in mijn hele HA setup afgeweken van wat standaar zou zijn; dat sluit ik ook niet uit

[b]Mars Warrior schreef op vrijdag 10 december 2021 @ 13:36:

Geen idee. Komt me niet bekend voor. Heb je wel alles in een horizontal-stack gezet? Als je ongelijk aantal kaarten daar in gebruikt moet je eigenlijk uitlijnen door een dummy card erbij te doen: dat is waar ik de button-card nog voor misbruik.

Hoe gaat trouwens het aanpassen van de helderheid? Gaat dat goed?

Het aanpassen van de helderheid werkt direct en reageert goed. Op de mobile app had ik eerst even ruzie met een swipe addon die ik had geinstalleerd, zodat ik door de verschillende tabbladen in een dashboard kon swipen. Daardoor ging mijn weergave naar het volgende tabblad terwijl ik nog mijn verlichting aan het aanpassen was qua helderheid Nu ik dat (swipe addon) heb uitgeschakeld, werkt het een stuk beter!

Qua het groter zijn van de cards: ik heb je voorbeeld dashboard aangepast met mijn eigen light entities. Verder (nog) niks aangepast qua horizontal-stack's enzo. Ik heb mijn scherm opgenomen en het (korte) filmpje hiervan in mijn Google Photo's geplaatst.

[born2tweak]

mrCowboyBunny schreef op vrijdag 10 december 2021 @ 14:49:
Overigens werkt de setup zoals je die in je zipje had staan, vermoed ik, wel direct als het om een schone HA installatie gaat of bijv. een installatie waar nog geen thema's zijn toegevoegd. Daarbij ben ik absoluut geen HA expert en wellicht ben ik ergens in mijn hele HA setup afgeweken van wat standaar zou zijn; dat sluit ik ook niet uit

Klopt, ik heb geen probleem gehad met themes, maar had deze dan ook zelf niet in gebruik. Dus dan zou het wel goed moeten gaan. Overigens wordt ergens in de templates naar de dark steelblue verwezen maar die is in themes.yaml niet gereferenced.

mrCowboyBunny schreef op vrijdag 10 december 2021 @ 14:49:
Het aanpassen van de helderheid werkt direct en reageert goed. Op de mobile app had ik eerst even ruzie met een swipe addon die ik had geinstalleerd, zodat ik door de verschillende tabbladen in een dashboard kon swipen. Daardoor ging mijn weergave naar het volgende tabblad terwijl ik nog mijn verlichting aan het aanpassen was qua helderheid Nu ik dat (swipe addon) heb uitgeschakeld, werkt het een stuk beter!

Qua het groter zijn van de cards: ik heb je voorbeeld dashboard aangepast met mijn eigen light entities. Verder (nog) niks aangepast qua horizontal-stack's enzo. Ik heb mijn scherm opgenomen en het (korte) filmpje hiervan in mijn Google Photo's geplaatst.

Waar je op moet letten is dat je de posities wel netjes aanvult. Als je pagina uit gaat van 3 entities naast elkaar, moet je ze opvullen met de custom:button-card / blank-card. Daarna schalen ze wel netjes.

Wat ik nu moet doen als ik zo'n lichtschakelaar wil toevoegen, is het toevoegen van deze regels aan het dashboard. Dan regelt ie zelf de styling in lijn met de rest:

code:

       - type: custom:decluttering-card
          template: sak_light_button_template_nm_tpl
          variables:
            - entity: light.mqtt_staande_lampen
            - area: Woonkamer
            - name: Staande lampen
            - icon: 'mdi:floor-lamp'

Ik krijg dan het menu erbij, click action, de slider en de brightness value.

Edit: nu ook met scenes buttons in het sake2 voorbeeld

[Voor 4% gewijzigd door born2tweak op 10-12-2021 15:24]

[Intro_Verti]

Even een snelle vraag, ik ben zojuist begonnen met het installeren van de files.
Na een restart zie ik nu ineens, dat al mijn resource files verdwenen zijn. Er staan nu slechts nog die van SAK zelf in ...Ik gok dat dat komt vanwege de include die ik moet doen?

code:

# LOVELACE 
lovelace:
  mode: yaml
  resources: !include lovelace/resources/resources.yaml

Hoe kan ik ervoor zorgen, dat zowel de resources die in de aangeboden resources.yaml file staan, als mijn bestaande (?) resources beschikbaar blijven?

Nu ligt a) mijn eigen dashboard overhoop en b) heb ik geen mdi files zichtbaar in SAK, omdat ik daar Hue Icons voor gebruik (via HACS).

Voor de rest kan ik nog niet zoveel terugkoppelen, hopelijk binnenkort!

[Voor 0% gewijzigd door Intro_Verti op 10-12-2021 21:30. Reden: typos]

[djiedjee]

@Intr0spect1ve
Of je oude resources toevoegen aan de yaml file

Of

De nieuwe resources via de GUI invoeren en de resources-YAML niet includen.

[Intro_Verti]

Ok, ik kan dan dus simpelweg de benoemde resources pakken uit die yaml file en invoeren in diezelfde GUI als ik hierboven in de snapshot heb staan? Ga ik dat doen, had niet zo snel door dat dat mijn resources die ik al had, zou overschrijven. Maar dit is sneller dan mijn resources toevoegen aan de nieuwe resources.yaml...

Direct nog een vraag:
Mijn basis Lovelace view is geheel verdwenen na restart. Wellicht komt dat door de ui.lovelace.yaml ?
Ik had een Lovelace in de GUI gemaakt met een bak aan tabbladen. Alles is weg, ik zie nu alleen SAK. Dat kan de bedoeling (nog) niet zijn toch?

P.S.
Je hebt de verkeerde persoon getagged @djiedjee

[djiedjee]

@Intro_Verti nu wel goed getagged :-)

Geen idee: mijn views waren er nog.
Misschien wel een verschil: ik gebruik een zelfgemaakte view als basis, niet een aangepaste standaard.

[Intro_Verti]

Goed, ik heb de resources-yaml niet meer op include staan.
So far so good. Ik heb mijn eigen dashboard terug, mijn Lovelace tabs en SAK staat er ook in.
Maar nu heb ik helemáál geen resources meer *slik* .
Vreemd, want het werkt wél (als in: bijvoorbeeld mijn Hue Icons zijn weer zichtbaar in mijn eigen dashboard).

Wat ben ik vergeten en hoe kan ik dit nog herstellen? Dan ben ik weer terug en kan ik de resources toevoegen die SAK vereist.



Dit is wat ik nu heb staan, wellicht ligt het daaraan. Ik ben nog teveel aan de UI gewend, dat is wel duidelijk

code:

# LOVELACE 
lovelace:
  mode: yaml
#  resources: !include lovelace/resources/resources.yaml
  dashboards:
    sak-examples:
      mode: yaml
      filename: sak-examples-dashboard.yaml
      title: SAK
      icon: mdi:knife-military
      show_in_sidebar: true

Was net lekker op weg:





Voor nu stop ik maar even, want kom nu niet verder. Alvast dank voor de hulp!

[Voor 41% gewijzigd door Intro_Verti op 10-12-2021 23:06. Reden: Aanvullende info]

[Intro_Verti]

Oh, zonder alleen maar te willen zaniken, maar m'n HA Companion app is ook leeg, start wel op maar dan nix...cache leeg gemaakt, maar kan alleen inloggen via browser nu?

[djiedjee]

@Intro_Verti als je onder lovelace mode YAML zet, dan verdwijnen de resources uit de lijst in de GUI.
Ze doen het nog wel, maar je ziet ze niet meer.

mode YAML weghalen uit de config, herstarten, dan zou je ze weer terug moeten hebben.

Met de app had ik gisteren ook rare dingen. Cache legen hielp toen wel.

[Voor 13% gewijzigd door djiedjee op 11-12-2021 09:48]

[Mars Warrior]

@Intro_Verti , het gaat er weer om om de config goed te krijgen voor en storage en yaml mode.

Ik heb bijna altijd yaml mode gebruikt, dus heb weinig met de GUI gedaan.

Volgens: https://www.home-assistant.io/lovelace/dashboards/ is dit één van de voorbeelden voor een mix van storage en yaml mode qua definitie.

YAML:

lovelace:
  mode: storage
  # Add yaml dashboards
  dashboards:
    lovelace-yaml:
      mode: yaml
      title: YAML
      icon: mdi:script
      show_in_sidebar: true
      filename: lovelace.yaml

En vwb de app: dat heb ik onder iOS ook soms. Zeg in 95% van de gevallen betekent een pull-down van de app een volledige refresh (vergelijkbaar met ctrl-F5 in de browser), maar soms dus niet, en wordt bijv. de laatste versie van SAK niet geladen of een nieuwe Lovelace view niet.

Geen idee waarom. Enige dat dan helpt is de frontend cache te legen.

[Intro_Verti]

Thanks @djiedjee en @Mars Warrior
Heb YAML mode weggehaald en opnieuw opgestart. Alles werkt weer en de app deed het ook gelijk weer.

Heb nu in de GUI handmatig de resources toegevoegd, volgens mij kan ik verder zo.

De mix storage/yaml mode config heb ik nog niet hoeven toe te voegen.

[djiedjee]

Nou, ik weet niet of iedereen pas gaat testen/klooien als de F1 race geweest is :-)

Mijn ideeën tot nu toe, in random order:
Alle samples heb ik nog niet werkend gemaakt, het zijn er ook wel veel.
Om alle entiteiten in 1 view aan te passen is best wel wat werk, een foutje is zo gemaakt en debuggen is lastig.
Voor het testen en aanpassen van de cards alleen kun je ook overal dezelfde entiteit voor gebruiken. Dan heb je in ieder geval de samples sneller aan de gang met 1 search/replace.
Voor het testen van de cards zelf heb je ook niet alle horizontale en verticale stacks nodig. Ik wil de cards en de layout daarvan los van elkaar gaan ontwikkelen.

Qua layout van bijvoorbeeld view 2 zijn 3 cards naast elkaar op de telefoon een beetje klein. De sliders worden dan al wat lastiger te pakken.
De horizontale sliders in combinatie met swipe navigation gaat dan ook vaak mis. Je swiped dan naar de volgende tab.
Op mijn OLED telefoon gebruik ik bjina overal Dark themes. Ik wil dus gaan kijken hoe ik die zo mooi mogelijk kan krijgen.

Ter vergelijk: bestaand dashboard vs SAK

[Voor 27% gewijzigd door djiedjee op 12-12-2021 12:09]

[Mars Warrior]

@djiedjee , het thema staat nu gedefinieerd in de view. Dus dat zul je in ieder geval moeten aanpassen aan het thema dat je nu gebruikt.

Dan moet je wel wat kleuren die in het gonsboro thema zitten moeten aanpassen / definieren.

[Mars Warrior]

djiedjee schreef op zondag 12 december 2021 @ 11:45:
Nou, ik weet niet of iedereen pas gaat testen/klooien als de F1 race geweest is :-)

Qua layout van bijvoorbeeld view 2 zijn 3 cards naast elkaar op de telefoon een beetje klein. De sliders worden dan al wat lastiger te pakken.

Ik had al aangegeven dat op mijn iPhone Max Max Max, 3 kaarten op een rij toch wel de Max Max Max is

[djiedjee]

Zucht, ik had het natuurlijk gelezen..... dat koste me ook weer een halfuur of zo....

born2tweak schreef op woensdag 8 december 2021 @ 21:20:

In één van de decluttering templates (sak-sensor-history-nm-tpl.yaml) zit een rechtstreekse verwijzing naar weather.zoefdehaas, waardoor mijn entities het niet deden. Die regel eruit en het werkt wel weer. Nu ook voorbeeld3 aan de praat, zij het zonder de kleurtjes.... Oke, bij het wijzigen van het Thema op de user, krijg je meer kleurtjes.

[djiedjee]

@Mars Warrior uuuhhh....?

[Mars Warrior]

djiedjee schreef op maandag 13 december 2021 @ 09:52:
@Mars Warrior uuuhhh....?

[Afbeelding]

Ojee! Je hebt nog een easter egg gevonden die ik nog niet had gecorrigeerd

Ik zal de jonge paashaas nog wel even toespreken als ik hem zie

[Polyphemus]

Mars Warrior schreef op maandag 13 december 2021 @ 12:44:
[...]

Ojee! Je hebt nog een easter egg gevonden die ik nog niet had gecorrigeerd

Ik zal de jonge paashaas nog wel even toespreken als ik hem zie

'een' easter egg impliceert dat er meerdere zijn

[Intro_Verti]

Een vraagje...Ik heb even wat tijd gepakt om Sake 3 op te bouwen. Ben begonnen met het vullen van temp sensors en humidity sensors. Omdat ik nieuwsgierig was naar hoe het er uit ging zien, een restart gedaan. Echter...het blijft akelig leeg. Waar kan dat aan liggen? Of waar kan ik lezen waar dat aan kan liggen?

Dank voor de hulp.

[Mars Warrior]

Intro_Verti schreef op maandag 13 december 2021 @ 17:06:
Een vraagje...Ik heb even wat tijd gepakt om Sake 3 op te bouwen. Ben begonnen met het vullen van temp sensors en humidity sensors. Omdat ik nieuwsgierig was naar hoe het er uit ging zien, een restart gedaan. Echter...het blijft akelig leeg. Waar kan dat aan liggen? Of waar kan ik lezen waar dat aan kan liggen?

Dank voor de hulp.[Afbeelding]

Het lijkt een sensor probleem. De kaart wordt wel geladen zie ik, want de koppen staan er wel.

Normaal zou je ook een kaart met foutmeldingen moeten zien, maar die is er ook niet

Gebruik je Chrome? Dan zou je in de inspector de foutmeldingen kunnen zien. Daar zou ik uit moeten kunnen afleiden wat er aan de hand is.

[Mars Warrior]

Polyphemus schreef op maandag 13 december 2021 @ 16:18:
[...]
'een' easter egg impliceert dat er meerdere zijn

Ik doelde hiermee eigenlijk op onverwachte functionaliteit: gezien de vele mogelijkheden en combinaties van mogelijkheden ben ik zelf al vaker gekke dingen tegengekomen, die er inmiddels allemaal uit zijn.

Dit was ff wat anders natuurlijk. Die haal ik er wel uit in de volgende versie

Er zijn geen bewust ingebouwde easter eggs in ieder geval!

[born2tweak]

Intro_Verti schreef op maandag 13 december 2021 @ 17:06:
Een vraagje...Ik heb even wat tijd gepakt om Sake 3 op te bouwen. Ben begonnen met het vullen van temp sensors en humidity sensors. Omdat ik nieuwsgierig was naar hoe het er uit ging zien, een restart gedaan. Echter...het blijft akelig leeg. Waar kan dat aan liggen? Of waar kan ik lezen waar dat aan kan liggen?

Dank voor de hulp.[Afbeelding]

Volgens mij kan het dan aan een aantal dingen liggen die je moet controleren:
- iedere entity moet een entity_index hebben en die indexen moeten ook een toolset hebben.
- je entities die je in je yaml noemt moeten ook echt bestaan

[Intro_Verti]

Mars Warrior schreef op maandag 13 december 2021 @ 17:31:
[...]

Het lijkt een sensor probleem. De kaart wordt wel geladen zie ik, want de koppen staan er wel.

Normaal zou je ook een kaart met foutmeldingen moeten zien, maar die is er ook niet

Gebruik je Chrome? Dan zou je in de inspector de foutmeldingen kunnen zien. Daar zou ik uit moeten kunnen afleiden wat er aan de hand is.

Ik gebruik Opera GX, maar kan natuurlijk in Chrome even de paginaopenen. Echter, wat zou je dan precies nodig hebben?

[Intro_Verti]

born2tweak schreef op maandag 13 december 2021 @ 19:30:
[...]

Volgens mij kan het dan aan een aantal dingen liggen die je moet controleren:
- iedere entity moet een entity_index hebben en die indexen moeten ook een toolset hebben.
- je entities die je in je yaml noemt moeten ook echt bestaan

Ik begrijp je niet goed. De entities bestaan in elk geval sowieso, die gebruik ik al een hele tijd in mijn huidige dashboard(s).

[born2tweak]

Intro_Verti schreef op maandag 13 december 2021 @ 19:51:
[...]


Ik begrijp je niet goed. De entities bestaan in elk geval sowieso, die gebruik ik al een hele tijd in mijn huidige dashboard(s).

Je entity moet in je yaml de juiste naam hebben en dan onderin bij je toolset moet je de goede entity-index gebruiken. Als één van de twee niet klopt, zie je niets op je dashboard.
Stel je wilt 5 entities laten zien, dan heb je eerst in je yaml 5 entities gedefinieerd en daaronder moet iedere entity een toolset verwijzing hebben dmv entity-index.

[Mars Warrior]

born2tweak schreef op maandag 13 december 2021 @ 19:59:
[...]

Je entity moet in je yaml de juiste naam hebben en dan onderin bij je toolset moet je de goede entity-index gebruiken. Als één van de twee niet klopt, zie je niets op je dashboard.
Stel je wilt 5 entities laten zien, dan heb je eerst in je yaml 5 entities gedefinieerd en daaronder moet iedere entity een toolset verwijzing hebben dmv entity-index.

Dat zou goed moeten staan in de voorbeelden, dus enkel de entities vervangen met eigen zou voldoende moeten zijn.

Het enige waar ik nu aan denk (kan ff niet kijken in de bestanden), @Intro_Verti is of deze view een decluttering template gebruikt. Soms wordt daar bij doorgeven entity nl het domein (sensor) weggelaten.

Als jij dat nu hebt toegevoegd gaat dat fout, eant het template maakt er dan sensor.sensor.x van!

Maar dat is en gokje van mij…

Verder is Opera toch ook Chromium? Dan zou via rechter muis menu de inspector zijn op te roepen. In de console die dan dacht ik standaard open staat moeten in het rood foutmeldingen te zien zijn.

[Voor 9% gewijzigd door Mars Warrior op 13-12-2021 20:10]

[Polyphemus]

Mars Warrior schreef op maandag 13 december 2021 @ 18:20:
[...]

Ik doelde hiermee eigenlijk op onverwachte functionaliteit: gezien de vele mogelijkheden en combinaties van mogelijkheden ben ik zelf al vaker gekke dingen tegengekomen, die er inmiddels allemaal uit zijn.

Dit was ff wat anders natuurlijk. Die haal ik er wel uit in de volgende versie

Er zijn geen bewust ingebouwde easter eggs in ieder geval!

Was ook maar een grapje van me

[Intro_Verti]

Mars Warrior schreef op maandag 13 december 2021 @ 20:08:
[...]

Dat zou goed moeten staan in de voorbeelden, dus enkel de entities vervangen met eigen zou voldoende moeten zijn.

Het enige waar ik nu aan denk (kan ff niet kijken in de bestanden), @Intro_Verti is of deze view een decluttering template gebruikt. Soms wordt daar bij doorgeven entity nl het domein (sensor) weggelaten.

Als jij dat nu hebt toegevoegd gaat dat fout, eant het template maakt er dan sensor.sensor.x van!

Maar dat is en gokje van mij…

Verder is Opera toch ook Chromium? Dan zou via rechter muis menu de inspector zijn op te roepen. In de console die dan dacht ik standaard open staat moeten in het rood foutmeldingen te zien zijn.

Eerlijk? Ik heb niets toegevoegd of veranderd. Slechts vullen en dan bekijken wat ik ermee kan.
Dus heel simpel, ik heb je Sake3 gepakt en de entities aangepast naar de mijne.

Dus, als voorbeeld:

code:

- type: horizontal-stack
      cards:
        - type: custom:decluttering-card
          template: sak_sensor_history_template_nm_tpl
          variables:
            - entity: sensor.woonkamer_temperatuur
            - name: Woonkamer
            - icon: mdi:thermometer
        - type: custom:decluttering-card
          template: sak_sensor_history_template_nm_tpl
          variables:
            - entity: sensor.keuken_temperatuur
            - name: Keuken
            - icon: mdi:thermometer

Is dit wat je zoekt?

Mars Warrior schreef op maandag 13 december 2021 @ 20:20:
[...]

Yep!

Lijkt dus toch een probleem met een entity. Ik ga straks ff neuzen. Ben nu onderweg nl…

Entity lijkt niet te bestaan, en dat geeft een ‘undefined’ error…

Dat is prima hoor, geen haast. Eigen tijd hè!
Maareh...de entities werken prima hoor ;-) Althans in andere dashboard(s) wel.
Ik zie overigens wel deze foutmelding in mijn log:

code:

Logger: frontend.js.latest.202112110
Source: components/system_log/__init__.py:189
First occurred: 17:02:11 (17 occurrences)
Last logged: 20:18:25

http://192.168.0.11:8123/hacsfiles/wip-swiss-army-knife-card/dev-swiss-army-knife-card.min.js:303:72 Uncaught TypeError: Cannot read properties of undefined (reading 'undefined')
http://192.168.0.11:8123/hacsfiles/wip-swiss-army-knife-card/dev-swiss-army-knife-card.min.js:372:920 Uncaught TypeError: Cannot read properties of undefined (reading 'drawStart')
http://192.168.0.11:8123/sak-examples/sake2:0:0 Uncaught

[Voor 26% gewijzigd door Intro_Verti op 13-12-2021 20:23]

[Mars Warrior]

Polyphemus schreef op maandag 13 december 2021 @ 20:09:
[...]
Was ook maar een grapje van me

Jaja, dat had ik al door hoor, maar ik heb nog niet gekeken wat er verder nog in de voorbeelden aan yaml is toegevoegd

En humor wordt tegenwoordig niet door iedereen meer begrepen merk ik zelf, dus dit soort paashaas akties moeten er wel uit voor de vrijgave… lampen die plotseling kip, koe, ei en paard heten zal niemand over vallen.

[Mars Warrior]

Intro_Verti schreef op maandag 13 december 2021 @ 20:13:
[...]


Eerlijk? Ik heb niets toegevoegd of veranderd. Slechts vullen en dan bekijken wat ik ermee kan.
Dus heel simpel, ik heb je Sake3 gepakt en de entities aangepast naar de mijne.

Dus, als voorbeeld:

code:

- type: horizontal-stack
      cards:
        - type: custom:decluttering-card
          template: sak_sensor_history_template_nm_tpl
          variables:
            - entity: sensor.woonkamer_temperatuur
            - name: Woonkamer
            - icon: mdi:thermometer
        - type: custom:decluttering-card
          template: sak_sensor_history_template_nm_tpl
          variables:
            - entity: sensor.keuken_temperatuur
            - name: Keuken
            - icon: mdi:thermometer

Is dit wat je zoekt?

[Afbeelding]

Yep!

Lijkt dus toch een probleem met een entity. Ik ga straks ff neuzen. Ben nu onderweg nl…

Entity lijkt niet te bestaan, en dat geeft een ‘undefined’ error…

[Mars Warrior]

Intro_Verti schreef op maandag 13 december 2021 @ 20:13:
[...]
[...]
Dat is prima hoor, geen haast. Eigen tijd hè!
Maareh...de entities werken prima hoor ;-) Althans in andere dashboard(s) wel.
Ik zie overigens wel deze foutmelding in mijn log:

code:

Logger: frontend.js.latest.202112110
Source: components/system_log/__init__.py:189
First occurred: 17:02:11 (17 occurrences)
Last logged: 20:18:25

http://192.168.0.11:8123/hacsfiles/wip-swiss-army-knife-card/dev-swiss-army-knife-card.min.js:303:72 Uncaught TypeError: Cannot read properties of undefined (reading 'undefined')
http://192.168.0.11:8123/hacsfiles/wip-swiss-army-knife-card/dev-swiss-army-knife-card.min.js:372:920 Uncaught TypeError: Cannot read properties of undefined (reading 'drawStart')
http://192.168.0.11:8123/sak-examples/sake2:0:0 Uncaught

[Afbeelding]

No worries 😉

De tweede foutmelding, ‘drawStart’ is een bekende bug voor mij, maar geen probleem. De eerste, reading ‘undefined’ dus wel.

Ik laat het straks nog weten als ik kan vinden wat het probleem is!

[Mars Warrior]

@Intro_Verti , het is de bekende bug in een decluttering template waar op de één of andere manier een extra entity is gedefinieerd die verwijst naar 'weather.zoefdehaas'. En die bestaat niet bij jou!

Anderen zijn er ook al tegenaan gelopen besef ik nu.

In het decluttering template sak-sensor-history-nm-tpl.yaml in de deculttering_templates map zie je de volgende dingen staan:

YAML:

card:
  type: 'custom:dev-swiss-army-knife-card'

  entities: 
    - entity: '[[entity]]'
      name: '[[name]]'
      icon: '[[icon]]'
      decimals: '[[decimals]]'
    - entity: weather.zoefdehaas

Regel 9 moet je weghalen. Die verpest alles...

Daar na zul je wel weer moeten zorgen voor het opnieuw inlezen van deze instellingen. Soms helpt een ctrl-F5 in de browser, maar vaak moet je ff iets wijzigen in of de sak-examples-dashboard.yaml file of de ui-lovelace.yaml file. Pas dan worden deze bestanden door HA ingelezen namelijk.

[Intro_Verti]

Dank je wel @Mars Warrior ! Ik had daarover heen gelezen in de bestaande posts hier.
Maar inderdaad...die regel eruit en ik zie nu wél mijn bestaande entities.



Thanks!

[Voor 3% gewijzigd door Intro_Verti op 14-12-2021 10:26]

[born2tweak]

@Mars Warrior Ik heb nog een probleem gevonden met de slider, die je in sake2 gebruikt. Als je de position van de slider <> 50 is, dan klopt de positie van de pointer niet op de slider. Stel je hebt de slider op pos.40 met lengte 70, dan is 100% brightness niet aan het einde van de slider. Ik heb het nu zelf opgelost door het label onder de slider te zetten en de slider te centreren op cx: 50.

Dit is met cx: 40, capture en track width 70.


Helaas nog niet gevonden waar dit nou in zit en of ik het kan oplossen voor je... sorry

[Voor 31% gewijzigd door born2tweak op 14-12-2021 10:33]

[Mars Warrior]

born2tweak schreef op dinsdag 14 december 2021 @ 10:29:
@Mars Warrior Ik heb nog een probleem gevonden met de slider, die je in sake2 gebruikt. Als je de position van de slider <> 50 is, dan klopt de positie van de pointer niet op de slider. Stel je hebt de slider op pos.40 met lengte 70, dan is 100% brightness niet aan het einde van de slider. Ik heb het nu zelf opgelost door het label onder de slider te zetten en de slider te centreren op cx: 50.

Dit is met cx: 40, capture en track width 70.

[Afbeelding]
Helaas nog niet gevonden waar dit nou in zit en of ik het kan oplossen voor je... sorry

Er zit ergens een rekenfout in de slider als de slider niet een cx=50 heeft, oftewel niet in het midden staat. Dat wordt nog ff puzzelen waar die rekenfout nu zit.

Elke tool heeft dit soort positie berekeningen. Die zijn generiek. Voor de slider gaat dat dus ergens fout. Daar zit dus een uitzondering blijkt waar ik geen rekening mee heb gehouden.

Hij staat op de lijst om uit te zoeken

[Mars Warrior]

Intro_Verti schreef op dinsdag 14 december 2021 @ 10:25:
Dank je wel @Mars Warrior ! Ik had daarover heen gelezen in de bestaande posts hier.
Maar inderdaad...die regel eruit en ik zie nu wél mijn bestaande entities.

[Afbeelding]

Thanks!

Mooi!

Tsja, het is zo’n fout waar je in je eigen installatie niet achter komt, maar gelukkig zijn er testers

[born2tweak]

@Mars Warrior klein vraagje: hoe werkt die toolset filter eigenlijk?

code:

toolsets:
   filter: url(#nm-1)

Ik kan even niet plaatsen hoe ik die kan gebruiken. Verwijst dit naar een stylesheet of een template bijvoorbeeld en hoe wordt deze referentie dan gezet?

[Mars Warrior]

born2tweak schreef op woensdag 15 december 2021 @ 11:36:
@Mars Warrior klein vraagje: hoe werkt die toolset filter eigenlijk?

code:

toolsets:
   filter: url(#nm-1)

Ik kan even niet plaatsen hoe ik die kan gebruiken. Verwijst dit naar een stylesheet of een template bijvoorbeeld en hoe wordt deze referentie dan gezet?

Een toolsets filter werkt over ALLE toolsets. Staat dus hoog in de hiërarchie. Is eigenlijk hetzelfde als op de hele kaart een filter zetten.

Die filters zijn de naam van het SVG filter dat nu nog in de code is gedefinieerd en is onderdeel van de <defs></defs> sectie van de svg die wordt gemaakt:

Cascading Stylesheet:

    <filter id="nm-1" x="-10%" y="-10%" width="120%" height="120%">
      <feDropShadow stdDeviation="5" in="SourceGraphic" dx="6" dy="6" flood-color="var(--cs-theme-shadow-darker)" flood-opacity="0.5" result="dropShadow"/>
      <feDropShadow stdDeviation="4.5" in="SourceGraphic" dx="-6" dy="-6" flood-color="var(--cs-theme-shadow-lighter)" flood-opacity="1" result="dropShadow1"/>
      <feMerge result="merge">
        <feMergeNode in="dropShadow1"/>
        <feMergeNode in="dropShadow"/>
      </feMerge>
    </filter>

De verwijzing url(#nm-1) is dus een verwijzing naar het id van het filter.

Ik ga die filters nog in YAML zetten, net als de CSS definities. Dat betekent dat je de SAK definities kunt nakijken, en je zelf filters, maar ook gradients in user-svg-definitions.yaml kunt definiëren.

De verwijzing is overal dezelfde manier.

Definieer je bijv. een gradient, dan heeft die ook een id:

Cascading Stylesheet:

    <linearGradient id="light-color-temperature-gradient" x1="1" x2="0">
      <stop stop-color="#ffa000"/>
      <stop offset=".5" stop-color="#fff"/>
      <stop offset="1" stop-color="#a6d1ff"/>
    </linearGradient>

En deze kun je vervolgens gebruiken als fill voor bijv. een 'rect':

YAML:

  styles:
    rect:
      fill: url(#light-color-temperature-gradient)

Deze gradient die ik hier gebruikt heb, zie je hier terug onder de helpers.

[Mars Warrior]

Ik kreeg verder nog een vraag over high-contrast mogelijkheden / voorbeelden. Dus heb wat zitten knutselen. High-contrast is nooit erg mooi, maar goed. Het is weer iets heel anders:



En omdat ik die balkjes met status eigenlijk wel wat vond, dacht ik, ik bouw nog wat anders, met wat variaties in de 1ste rij...



En zo blijkt dat ik ook een 'lege' SAK kaart kan maken (2de rij, 3de kaart). Heb ik daarvoor de button-card ook niet meer nodig. Scheelt mensen die de voorbeelden willen gebruiken ook weer een kaart die ze mogelijk niet gebruiken...

Afijn. Dat zijn dus SAKE9 en SAKE10. Weer 2 voorbeelden erbij

[born2tweak]

Ah, dat ga ik even nazoeken!
Nu gebruik ik dus nog wat snippets uit jouw voorbeelden, maar ben wel m'n eigen cards aan het maken nu.


Dit wordt onderdeel van m'n energy dashboard met verbruik, levering, enz.

[Mars Warrior]

born2tweak schreef op woensdag 15 december 2021 @ 15:06:
Ah, dat ga ik even nazoeken!
Nu gebruik ik dus nog wat snippets uit jouw voorbeelden, maar ben wel m'n eigen cards aan het maken nu.

[Afbeelding]
Dit wordt onderdeel van m'n energy dashboard met verbruik, levering, enz.

Ah! Leuk om te zien. Dit is de afname op je 3 fasen ofzo??

[born2tweak]

Mars Warrior schreef op woensdag 15 december 2021 @ 15:23:
[...]

Ah! Leuk om te zien. Dit is de afname op je 3 fasen ofzo??

Klopt, 3 fasen aansluiting. In mijn huidige HA dashboard heb ik o.a. voltage en power van de 3 fasen van verbruik, maar ook de levering van zonnepanelen is zichtbaar. Ik heb dus ook template sensors gemaakt die het gecombineerde vermogen tonen, dus zowel verbruik als teruglevering in 1 sensor. + en - verbruik dus

Ik ben alleen niet zo goed in het verzinnen van styling, dus ik doe nu maar wat

[Voor 8% gewijzigd door born2tweak op 15-12-2021 15:48]

[Mars Warrior]

born2tweak schreef op woensdag 15 december 2021 @ 15:47:
[...]
Klopt, 3 fasen aansluiting. In mijn huidige HA dashboard heb ik o.a. voltage en power van de 3 fasen van verbruik, maar ook de levering van zonnepanelen is zichtbaar. Ik heb dus ook template sensors gemaakt die het gecombineerde vermogen tonen, dus zowel verbruik als teruglevering in 1 sensor. + en - verbruik dus

Ik ben alleen niet zo goed in het verzinnen van styling, dus ik doe nu maar wat

Als je eerst je functionele opzet voor elkaar hebt, dan komt de rest daarna wel.

Zo ben ik ook begonnen, alleen dat was september 2020, dus ik loop een beetje voor

En voordat je goed kunt stylen, moet je eerst wel wat kunnen bouwen!

Suc6 en we zien het resultaat hier wel verschijnen

[Mars Warrior]

Hmmmmm. Ik heb nu iets vreemds!

Als ik in het laatste voorbeeld wat ik hierboven heb gepost de lampen bedien, of via een ander device bedien, dan is er een grote kans dat de HA App volledig bevriest! Via Safari gebeurt dat ook Op de PC (Chrome) nergens last van.

Dit is enkel in voorbeeld 10 met die 3 lampen op de 3de rij. Voorbeeld 9 waar ook een lamp in zit geeft geen problemen, laat staan voorbeeld 2 (al mijn lampen) die ik al bijna 1 jaar gebruik...

En soms gaat het ook een hele dag goed, kan ik klikken wat ik wil zonder enig probleem.

Ben benieuwd welke zgn 'edge case' ik nu geraakt heb

Upate 1:
Ik zag plotseling dat het '%' teken van de helderheid op de iPad in het midden staat van de kaart als de lamp wordt aangezet. Dat hoort natuurlijk niet, en gaat op geen enkele andere kaart zo mis. Op Chrome zie ik dit probleem ook niet...

Na disablen van de sliders voor de 3 lampen, geen lock-ups meer. Lijkt dus op dit ogenblik dat er iets in de slider zit die dit veroorzaakt. En dan enkel op Safari, niet onder Chrome

[Voor 62% gewijzigd door Mars Warrior op 16-12-2021 11:46]

[born2tweak]

Mars Warrior schreef op donderdag 16 december 2021 @ 10:33:
Hmmmmm. Ik heb nu iets vreemds!

Als ik in het laatste voorbeeld wat ik hierboven heb gepost de lampen bedien, of via een ander device bedien, dan is er een grote kans dat de HA App volledig bevriest! Via Safari gebeurt dat ook Op de PC (Chrome) nergens last van.

Nee, geen last van gehad nog, maar ik heb die voorbeelden ook niet geïnstalleerd. Heb een lampen panel met 8 lampen en wat buttons en die werkt gewoon goed.

[Mars Warrior]

born2tweak schreef op donderdag 16 december 2021 @ 13:17:
[...]

Nee, geen last van gehad nog, maar ik heb die voorbeelden ook niet geïnstalleerd. Heb een lampen panel met 8 lampen en wat buttons en die werkt gewoon goed.

Mooi. Ik heb met andere voorbeelden ook geen problemen. Dus geen idee nog wat er met het nieuwe voorbeeld anders is op Safari en dus iOS.

Is ook lastig debuggen want ik heb geen Mac oid. Wordt dus trial and error. Dat is tot nu toe elke keer goed gekomen, maar kost wat tijd.

Het ligt dus niet aan de HA app, want in de browser bevriest de tab met HA ook.

Het is of de config, of toch software, of een rare race conditie in de software/browser combi die dit doet. Er crashed dus niks. Dus ook geen foutmeldingen in de log van de HA App helaas.

Ik hoef ook niks te doen zelf in de HA App. Als ik op de PC een lamp aanzet dan hangt de App al als voorbeeld 10 voor staat. Voorbeeld 2 werkt gewoon.

[Intro_Verti]

Ik had zojuist even een half uurtje willen pakken om verder te gaan, maar "ineens" zie ik nu, dat alle kaarten het niet meer doen. Wat kan dit zijn?

Heb niets veranderd, file staat gewoon waar hij moet staan (community/ wip-swiss-army-knife-card/dev-swiss-army-knife-card.js) => alhoewel de file anders heet dan in de documentatie?

In de downloadable files voor SAK zit een file met de naam:
dev-swiss-army-knife-card.min.js

Anyway, daar heeft hij tot het weekend wel mee gedraaid, dus wat is er aan de hand? Iemand?

[Mars Warrior]

Intro_Verti schreef op maandag 20 december 2021 @ 16:33:
Ik had zojuist even een half uurtje willen pakken om verder te gaan, maar "ineens" zie ik nu, dat alle kaarten het niet meer doen. Wat kan dit zijn?

Heb niets veranderd, file staat gewoon waar hij moet staan (community/ wip-swiss-army-knife-card/dev-swiss-army-knife-card.js) => alhoewel de file anders heet dan in de documentatie?

In de downloadable files voor SAK zit een file met de naam:
dev-swiss-army-knife-card.min.js

Anyway, daar heeft hij tot het weekend wel mee gedraaid, dus wat is er aan de hand? Iemand?


[Afbeelding]

[Afbeelding]

Vreemd ja.

Je resource moet naar de dev-swiss-army-knife.min.js bestand wijzen, dit is een zgn minified versie: die is de helft van het origineel qua omvang, maar verder hetzelfde qua functionaliteit.

Maar als je niks hebt veranderd is dat wel heel raar.

[f.welvering]

Intro_Verti schreef op maandag 20 december 2021 @ 16:33:
Ik had zojuist even een half uurtje willen pakken om verder te gaan, maar "ineens" zie ik nu, dat alle kaarten het niet meer doen. Wat kan dit zijn?

Heb niets veranderd, file staat gewoon waar hij moet staan (community/ wip-swiss-army-knife-card/dev-swiss-army-knife-card.js) => alhoewel de file anders heet dan in de documentatie?

In de downloadable files voor SAK zit een file met de naam:
dev-swiss-army-knife-card.min.js

Anyway, daar heeft hij tot het weekend wel mee gedraaid, dus wat is er aan de hand? Iemand?


[Afbeelding]

[Afbeelding]

Ik heb exact ditzelfde, heb er al een uur op stuk geslagen, nog geen oplossing

[Mars Warrior]

f.welvering schreef op maandag 20 december 2021 @ 20:06:
[...]
Ik heb exact ditzelfde, heb er al een uur op stuk geslagen, nog geen oplossing

Geen nieuwe versie van HA geïnstalleerd ofzo?

Bij mij werkt alles nog, dus dit is erg vreemd…

Als de resource niet is gewijzigd, en gewoon naar de min.js file wijst, dan zou ik niet weten waarom sak niet gevonden kan worden.

[Voor 18% gewijzigd door Mars Warrior op 20-12-2021 20:10]

[Mars Warrior]

djiedjee schreef op vrijdag 10 december 2021 @ 09:12:
@Mars Warrior @born2tweak

Daar was ik inmiddels ook achter.
Gisteren toch even alle bestaande resources met juiste paden (nieuwe standaard HACS-lokatie is /community, niet meer /hacsfiles) opgenomen in de YAML-file.
Oude dashboards werken nu weer.

Hmm. Blijkbaar iets veranderd? Default hacs pad gewijzigd?

@Intro_Verti , @f.welvering

Zie: https://hacs.xyz/docs/categories/plugins.

[Voor 8% gewijzigd door Mars Warrior op 20-12-2021 20:48]

[Intro_Verti]

Mars Warrior schreef op maandag 20 december 2021 @ 20:09:
[...]

Geen nieuwe versie van HA geïnstalleerd ofzo?

Bij mij werkt alles nog, dus dit is erg vreemd…

Als de resource niet is gewijzigd, en gewoon naar de min.js file wijst, dan zou ik niet weten waarom sak niet gevonden kan worden.

Zeker wel. Ik zit nu op 2021.12.3