Home Assistant - Het Swiss Army Knife Beta FEEDBACK topic

Pagina: 1 2 3 4 5 Laatste
Acties:

Acties:
  • 0 Henk 'm!

  • Mars Warrior
  • Registratie: Oktober 2003
  • Laatst online: 17-09 18:48

Mars Warrior

Earth, the final frontier

Topicstarter
[_ave_] schreef op dinsdag 15 augustus 2023 @ 20:26:
Ziet er weer fantastisch uit.. Zelf heb ik niet van die apparaten (de vrouw vind dat ik al genoeg geld uitgeef :P) maar als ik ze wel had zou ik gaan voor de onderste met de achtergrond van degene linksboven.
De achtergrond bij de eerste is optioneel. Is eigenlijk het voor Awair gebruikte icoon.

Ik heb slechts €100 / stuk betaald in de aanbieding bij Amazon. Totaal dus €300, maar dan heb je ook wat.

Voor de rest komen mijn sensoren voornamelijk uit China (Ali dus). De meeste waren €8 / stuk. Dus dit was ook voor mij een best hoge uitgave.

Material 3 Thema's voor HA | Swiss Army Knife custom card voor HA | AmoebeLabs


Acties:
  • 0 Henk 'm!

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
De achtergrond bij de eerste is optioneel. Is eigenlijk het voor Awair gebruikte icoon.

Ik heb slechts €100 / stuk betaald in de aanbieding bij Amazon. Totaal dus €300, maar dan heb je ook wat.

Voor de rest komen mijn sensoren voornamelijk uit China (Ali dus). De meeste waren €8 / stuk. Dus dit was ook voor mij een best hoge uitgave.
Ali, ja die ken ik wel, daar komt bijna al mijn domotica vandaan :)

Als ik mag vragen, de opmaak van het label op je light cards. Waar heb je die verstopt?

Afbeeldingslocatie: https://tweakers.net/i/-NtcoMCkqIHXTMLcpKtbdo5_pYs=/full-fit-in/4000x4000/filters:no_upscale():fill(white):strip_exif()/f/image/S0Il4d21HPkiVB3tD9Yezaq9.png?f=user_large

Ik wil de tekst graag wit maar zie nergens de opmaak van de tekst 7(8)7

  • Mars Warrior
  • Registratie: Oktober 2003
  • Laatst online: 17-09 18:48

Mars Warrior

Earth, the final frontier

Topicstarter
[_ave_] schreef op woensdag 16 augustus 2023 @ 19:04:
[...]


Ali, ja die ken ik wel, daar komt bijna al mijn domotica vandaan :)

Als ik mag vragen, de opmaak van het label op je light cards. Waar heb je die verstopt?

[Afbeelding]

Ik wil de tekst graag wit maar zie nergens de opmaak van de tekst 7(8)7
Dat zal uit de standaard class komen. Je zult dus zelf een styles sectie erbij moeten zetten om de tekst wit te maken. Dus een fill: white...

Material 3 Thema's voor HA | Swiss Army Knife custom card voor HA | AmoebeLabs


Acties:
  • +1 Henk 'm!

  • Mars Warrior
  • Registratie: Oktober 2003
  • Laatst online: 17-09 18:48

Mars Warrior

Earth, the final frontier

Topicstarter
Na wat configuratie en software wijzigingen weer een kaart gemaakt. Dit is allemaal Awair, maar zou ook voor andere analoge sensoren bruikbaar moeten zijn.

Je ziet dat het met deze kaart mogelijk is om het sparkline type te wijzigen...
  • Graded / rank_order met de typische Awair weergave
  • Area met fade optie
  • Barcode / Audio
  • Line
Afbeeldingslocatie: https://tweakers.net/i/30bCz9cRSchGD08Yqsl5fNYygd4=/x800/filters:strip_exif()/f/image/CudfOdn53BQEllAqr7Lqx4P5.png?f=fotoalbum_large

Afbeeldingslocatie: https://tweakers.net/i/wDzami7TOAbn5TSlI6MX0aznyoo=/x800/filters:strip_exif()/f/image/YXZFLZ8elP6Kr0Qtgds8JcXr.png?f=fotoalbum_large

En nog twee chart types die het met deze generieke setup goed doen:
  • Bars
  • Dots
Afbeeldingslocatie: https://tweakers.net/i/i3J0Z5nv_wWF_6okhY1glhptAeU=/800x/filters:strip_exif()/f/image/r19oCzmCA1lYnnXf3smesdvs.png?f=fotoalbum_large

De yaml vanuit de view om deze kaarten met templates te maken is:
YAML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    - type: grid
      columns: 2
      square: false
      cards:
        - type: 'custom:swiss-army-knife-card'
          entities:
            - entity: sensor.awair_element_study_humidity
              name: 'Humidity'
              area: 'Study'
              decimals: 0
          layout:
            template:
              name: sak_layout_fce2_awair2a
              variables:
                - sak_layout_awair_chart_type: barcode
                - sak_layout_awair_chart_variant: audio
                - sak_layout_awair_background_icon_disabled: false
                - sak_layout_awair_sensor_colorstop_v1: sak_colorstops_awair_humidity_v1
                - sak_layout_awair_sensor_colorstop_v2: sak_colorstops_awair_humidity_v2
                - sak_layout_awair_sensor_scale_max: 100

          # -------------------------------------------------------------------
        - type: 'custom:swiss-army-knife-card'
          entities:
            - entity: sensor.awair_element_study_pm2_5
              name: 'PM2.5'
              area: 'Study'
              icon: mdi:dots-circle
          layout:
            template:
              name: sak_layout_fce2_awair2a
              variables:
                - sak_layout_awair_chart_type: line
                - sak_layout_awair_background_icon_disabled: false
                - sak_layout_awair_sensor_colorstop_v1: sak_colorstops_awair_pm25_v1
                - sak_layout_awair_sensor_colorstop_v2: sak_colorstops_awair_pm25_v2
                - sak_layout_awair_sensor_scale_max: 100


In den beginne wilde ik enkel een line en area chart erbij hebben...

Material 3 Thema's voor HA | Swiss Army Knife custom card voor HA | AmoebeLabs


  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
Mars Warrior schreef op donderdag 17 augustus 2023 @ 10:27:
[...]

Dat zal uit de standaard class komen. Je zult dus zelf een styles sectie erbij moeten zetten om de tekst wit te maken. Dus een fill: white...
Thanks

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
Mars Warrior schreef op donderdag 17 augustus 2023 @ 17:19:
Na wat configuratie en software wijzigingen weer een kaart gemaakt. Dit is allemaal Awair, maar zou ook voor andere analoge sensoren bruikbaar moeten zijn.

Je ziet dat het met deze kaart mogelijk is om het sparkline type te wijzigen...
  • Graded / rank_order met de typische Awair weergave
  • Area met fade optie
  • Barcode / Audio
  • Line
[Afbeelding]

Hoogtijd dat ik met pensioen kan, dan heb ik tenminste tijd om dit allemaal te leren. :)

[Afbeelding]

En nog twee chart types die het met deze generieke setup goed doen:
  • Bars
  • Dots
[Afbeelding]

De yaml vanuit de view om deze kaarten met templates te maken is:
YAML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    - type: grid
      columns: 2
      square: false
      cards:
        - type: 'custom:swiss-army-knife-card'
          entities:
            - entity: sensor.awair_element_study_humidity
              name: 'Humidity'
              area: 'Study'
              decimals: 0
          layout:
            template:
              name: sak_layout_fce2_awair2a
              variables:
                - sak_layout_awair_chart_type: barcode
                - sak_layout_awair_chart_variant: audio
                - sak_layout_awair_background_icon_disabled: false
                - sak_layout_awair_sensor_colorstop_v1: sak_colorstops_awair_humidity_v1
                - sak_layout_awair_sensor_colorstop_v2: sak_colorstops_awair_humidity_v2
                - sak_layout_awair_sensor_scale_max: 100

          # -------------------------------------------------------------------
        - type: 'custom:swiss-army-knife-card'
          entities:
            - entity: sensor.awair_element_study_pm2_5
              name: 'PM2.5'
              area: 'Study'
              icon: mdi:dots-circle
          layout:
            template:
              name: sak_layout_fce2_awair2a
              variables:
                - sak_layout_awair_chart_type: line
                - sak_layout_awair_background_icon_disabled: false
                - sak_layout_awair_sensor_colorstop_v1: sak_colorstops_awair_pm25_v1
                - sak_layout_awair_sensor_colorstop_v2: sak_colorstops_awair_pm25_v2
                - sak_layout_awair_sensor_scale_max: 100


In den beginne wilde ik enkel een line en area chart erbij hebben...

  • paQ
  • Registratie: Augustus 2001
  • Nu online

paQ

*verkeerd

[ Voor 99% gewijzigd door paQ op 18-08-2023 00:24 ]

Ik doe niet aan bijgeloof. Dat brengt ongeluk.


Acties:
  • 0 Henk 'm!

  • Mars Warrior
  • Registratie: Oktober 2003
  • Laatst online: 17-09 18:48

Mars Warrior

Earth, the final frontier

Topicstarter
Ik heb een development prerelease vrijgegeven.

Wel ff goed kijken, want ik heb wat wijzigingen in de configuratie door moeten voeren:
  • Alle templates hebben nu de sak- prefix om dubbelingen te voorkomen
  • Ik heb de map structuur van de templates gewijzigd, zodat deze alphabetisch geladen wordt.
https://github.com/Amoebe...releases/tag/v2.5.1-dev.2

Material 3 Thema's voor HA | Swiss Army Knife custom card voor HA | AmoebeLabs


Acties:
  • 0 Henk 'm!

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
Mars Warrior schreef op vrijdag 18 augustus 2023 @ 11:46:
Ik heb een development prerelease vrijgegeven.

Wel ff goed kijken, want ik heb wat wijzigingen in de configuratie door moeten voeren:
  • Alle templates hebben nu de sak- prefix om dubbelingen te voorkomen
  • Ik heb de map structuur van de templates gewijzigd, zodat deze alphabetisch geladen wordt.
https://github.com/Amoebe...releases/tag/v2.5.1-dev.2
Ik ga eens kijken wat voor moois je hebt neergezet. Ben nu toe aan een nieuw dashboard voor mijn PV installatie maar ben er nog niet helemaal over uit wat precies. In elk geval een overzicht van alle panelen afzonderlijk en de totaal opbrengst. Zit alleen nog te dubben of ik de afgelopen zeven dagen in de grafiek zal laten zien of alleen de laatste 24 uur.

Moet zeggen dat het maken van HA op deze manier wel meer tijd kost. :)

Acties:
  • +2 Henk 'm!

  • Sjeuf
  • Registratie: Februari 2003
  • Laatst online: 10-08 10:31
Ik ben mijn dashboard aan het restylen. Kwam er maar niet uit wat de mooiste buttons waren. Veel inspiratie via dribble en zelfs wat laten maken via midjourney maar blijft een zoektocht naar de ultieme button. Ik ben nog niet tevreden maar ik maak het nu af en schaaf later bij.
Zodra ik een leuk dashboard heb , post ik het weer hier.

even een vraag of het klopt of het een bug is.
Misschien hoort deze eerder op github thuis...

Als ik een lineaire gradient over een rectex doe dan werkt "filter" niet maar alleen "fill"

bv

code:
1
2
3
4
5
styles:
     rectex:
      # fill: "#e0e0e0" 
       fill: url(#sak-light-brightness-gradient)
       # filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5))


Gebruik ik de drop-shadow (zie hierboven dan moet deze wel onder filter). Wanneer gebruik ik nu "fill" en wanneer "filter" voor zaken die in sak-svg-definitions.yml staan voor bv rectex, circle, SVGs?

Alvast hartelijk dank


-----------------------------
EDIT

Ik zie dat de neumorphic filters ook tussen <filter> quotes staan en de lineair gradients niet.

Prima zo ! Nu kan ik beide over elkaar gebruiken..

SOLVED voor mijzelf ;)

[ Voor 10% gewijzigd door Sjeuf op 29-10-2023 12:30 . Reden: opgelost ]


Acties:
  • +1 Henk 'm!

  • Mars Warrior
  • Registratie: Oktober 2003
  • Laatst online: 17-09 18:48

Mars Warrior

Earth, the final frontier

Topicstarter
@Sjeuf , sommige dingen heb ik moeten scheiden omdat anders iOS (Safari) het niet correct kan weergeven. De SVG implementatie van Safari loopt nog steeds mijlen ver achter op de standaard.

Men is wel bezig met een complete rewrite van de SVG engine van WebKit, maar die is nog niet in Safari geland helaas. Dat zou zoveel gemekker oplossen voor mij (qua werk), maar ja. Het sleutelwoord is "wachten".

Ben benieuwd straks naar je nieuwe dashboards natuurlijk 8)

Material 3 Thema's voor HA | Swiss Army Knife custom card voor HA | AmoebeLabs


Acties:
  • 0 Henk 'm!

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
Nou ik was even weg, druk en daarna lekker op vakantie. Inmiddels heb ik een noviteit in HA erbij. De SAK kaarten voor de verlichting doen het niet meer zoals ze het deden voor de vakantie. Ik kan drukken op een kaart tot ik een ons weeg (wat best lang gaat duren met mijn gewicht :P) maar ik kan vanuit HA geen verlichting meer aan- of uitzetten. Ik gebuik WiFi lampen maar vraag me af of Zigbee misschien niet een beter alternatief is? In de smartlife app (tuya) werkt alles zoals het hoort.

Acties:
  • 0 Henk 'm!

  • GilbertvH
  • Registratie: Oktober 2004
  • Laatst online: 09:44
[_ave_] schreef op woensdag 15 november 2023 @ 14:19:
Nou ik was even weg, druk en daarna lekker op vakantie. Inmiddels heb ik een noviteit in HA erbij. De SAK kaarten voor de verlichting doen het niet meer zoals ze het deden voor de vakantie. Ik kan drukken op een kaart tot ik een ons weeg (wat best lang gaat duren met mijn gewicht :P) maar ik kan vanuit HA geen verlichting meer aan- of uitzetten. Ik gebuik WiFi lampen maar vraag me af of Zigbee misschien niet een beter alternatief is? In de smartlife app (tuya) werkt alles zoals het hoort.
Welke integratie gebruik je hiervoor? Deze (of HA) al eens herlaad? Als je via Tuya een gratis subscription hebt kan die verlopen zijn.

Acties:
  • 0 Henk 'm!

  • d-vine
  • Registratie: Augustus 2006
  • Laatst online: 09:30
[_ave_] schreef op woensdag 15 november 2023 @ 14:19:
Nou ik was even weg, druk en daarna lekker op vakantie. Inmiddels heb ik een noviteit in HA erbij. De SAK kaarten voor de verlichting doen het niet meer zoals ze het deden voor de vakantie. Ik kan drukken op een kaart tot ik een ons weeg (wat best lang gaat duren met mijn gewicht :P) maar ik kan vanuit HA geen verlichting meer aan- of uitzetten. Ik gebuik WiFi lampen maar vraag me af of Zigbee misschien niet een beter alternatief is? In de smartlife app (tuya) werkt alles zoals het hoort.
Ik ervaar momenteel ook wat problemen met de cards die altijd hebben gewerkt en sommige nul response geven andere wel werken of Wall pluggs cards die verdwenen zijn.

Alles werkt wel met de standaard HA dashboard dus het zit ergens in SAK

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
Afbeeldingslocatie: https://tweakers.net/i/eVdRTKyqVbCJItEpBtBzspqWD9M=/full-fit-in/4000x4000/filters:no_upscale():fill(white):strip_exif()/f/image/D7cvPVqVfcxG39fXpBgAGzBs.png?f=user_large

Deze dus. HA heb ik al herstart, meerdere keren en dan werkt het heel eventjes.

Ik ben vijf smartplugs, vier daarvan doen het zonder issues. 1 is gek genoeg niet zichtbaar maar de verlicting achter deze plug gaat 's avond's wel gewoon aan samen met de rest en op de opgegeven tijd ook weer uit. Grappige is, dat wanneer de lamp achter deze smartplug aan is, de kaart wel zichtbaar wordt in HA. Alle verlichting en een wall switch doen het niet. Zou haast gaan denken dat het aan mijn netwerk ligt. Maar als dat zo zou zijn dan zou ik vanuit de smartlife app de verlichting niet kunnen bedienen, dan zou het daar ook niet werken.

een check bij Tuya geeft geen inzicht dat de subscription verlopen is. Ik kan alle apparaten online zien wanneer ik inlog in mijn tuya project.

Ik gebruik nog niet de dev. release die je pas hebt vrijgegeven. Ik ben voornemens deze in een separate omgeving te installeren en testen.

Als je nog meer informatie wilt, logs, etc. let me knw.

  • Koepert
  • Registratie: Augustus 2013
  • Laatst online: 09:29
[_ave_] schreef op donderdag 16 november 2023 @ 07:31:
[Afbeelding]

Deze dus. HA heb ik al herstart, meerdere keren en dan werkt het heel eventjes.

Ik ben vijf smartplugs, vier daarvan doen het zonder issues. 1 is gek genoeg niet zichtbaar maar de verlicting achter deze plug gaat 's avond's wel gewoon aan samen met de rest en op de opgegeven tijd ook weer uit. Grappige is, dat wanneer de lamp achter deze smartplug aan is, de kaart wel zichtbaar wordt in HA. Alle verlichting en een wall switch doen het niet. Zou haast gaan denken dat het aan mijn netwerk ligt. Maar als dat zo zou zijn dan zou ik vanuit de smartlife app de verlichting niet kunnen bedienen, dan zou het daar ook niet werken.

een check bij Tuya geeft geen inzicht dat de subscription verlopen is. Ik kan alle apparaten online zien wanneer ik inlog in mijn tuya project.

Ik gebruik nog niet de dev. release die je pas hebt vrijgegeven. Ik ben voornemens deze in een separate omgeving te installeren en testen.

Als je nog meer informatie wilt, logs, etc. let me knw.
Wellicht domme opmerking, maar heb je al een "default dashboard" geprobeerd met de standaard kaarten: Werken die wel? Dus: ligt het aan SAK-kaarten of aan aansturen van de lampen

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
Koepert schreef op donderdag 16 november 2023 @ 12:07:
[...]


Wellicht domme opmerking, maar heb je al een "default dashboard" geprobeerd met de standaard kaarten: Werken die wel? Dus: ligt het aan SAK-kaarten of aan aansturen van de lampen
Er bestaan geen domme opmerkingen of vragen. :) .

Ik heb het nog niet met een standaard dashboard geprobeerd. Wel even getest vanuit de integratie en dan werkt het gewoon. Maar ja, hoe ga je aan de vrouw uitleggen dat ze via een omweg de verlichting aan moet zetten als ze net heeft geaccepteerd dat ze een app moet gebruiken i.p.v. de lichtknop?

Sowieso zat er na mijn vakantie iets niet lekker thuis want ik kon de airco niet aanzetten vanuit HA (ook niet met de m-air app overigens ) en moest ik de wifi module van de airco resetten om ook dat weer te laten werken. Denk dat ik daarmee een beetje op het verkeerde been ben gezet dat het in HA zou zitten.

  • Koepert
  • Registratie: Augustus 2013
  • Laatst online: 09:29
[_ave_] schreef op donderdag 16 november 2023 @ 12:19:
[...]


Er bestaan geen domme opmerkingen of vragen. :) .

Ik heb het nog niet met een standaard dashboard geprobeerd. Wel even getest vanuit de integratie en dan werkt het gewoon. Maar ja, hoe ga je aan de vrouw uitleggen dat ze via een omweg de verlichting aan moet zetten als ze net heeft geaccepteerd dat ze een app moet gebruiken i.p.v. de lichtknop?

Sowieso zat er na mijn vakantie iets niet lekker thuis want ik kon de airco niet aanzetten vanuit HA (ook niet met de m-air app overigens ) en moest ik de wifi module van de airco resetten om ook dat weer te laten werken. Denk dat ik daarmee een beetje op het verkeerde been ben gezet dat het in HA zou zitten.
Nee dat ben k helemaal met je eens, maar bedoel het ook meer in de richting van het troubleshooten: Dat je kunt uitsluiten dat het in SAK zit, of juist kunt bevestigen dat het daar in zit.

Overigens, dat heb ik omzeild door het juist te automatiseren op lichtinval/tijd/beweging zodat ze het niet HOEFT te doen, uitgezonderd de WC< die zat op een deursensor maar met een slimme schakelaar dus kan ze handmatig de lamp aan uit doen, maar kan ik ook op afstand die uit doen (Als deze te lang aan is). maar omdat de WC deur vaak op een kier staat, werkte de deursensor voor geen meter. En de schakelaar zit BUITEN de WC.

Acties:
  • 0 Henk 'm!

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
Vandaag een tweede VM ingericht met core 9.4. Daarin alleen de button-card, decluttering-card en sak geinstalleerd. Tuya geinstalleerd en geconfigureerd. Eerste kaart toegevoegd met zelfde resultaat. Zit in elk geval niet in de core van HA. Ga deze nu updaten naar 9.5.

Acties:
  • 0 Henk 'm!

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
[_ave_] schreef op zaterdag 18 november 2023 @ 23:49:
Vandaag een tweede VM ingericht met core 9.4. Daarin alleen de button-card, decluttering-card en sak geinstalleerd. Tuya geinstalleerd en geconfigureerd. Eerste kaart toegevoegd met zelfde resultaat. Zit in elk geval niet in de core van HA. Ga deze nu updaten naar 9.5.
Dat maakt ook geen verschil. Op naar het updaten van het OS naar 10.5

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
Inmiddels uitgezocht dat mijn subscription verlopen is. Was dus al in mei verlopen. Wel raar dat ik dat pas in november merk. Eens kijken of het met de lokale vesie van Tuya beter gaat anders moet ik toch langzaam afscheid gaan nemen van Tuya en op zoek naar een alternatief.

Acties:
  • 0 Henk 'm!

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
Hoi allemaal,

Ik probeer een kaart te maken voor de zon azimuth en elevation. Mijn startpunt is een template van SAK. (sak-arc180-sparklingbar24.yaml. Hier heb ik een kopie van gemaakt en hernoemt. Wat ik uiteindelijk wil bereiken is iets dat lijkt op de compass-card maar dan met SAK. Ik heb de eerste aanpassingen kunnen doen door iets aan te passen en te kijken wat er veranderd. Maar, wat ik ook doe, de tekstgrootte veranderd niet.

Hieronder de tot nu toe aangepaste code:

YAML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
default:
  #- decimals: 0
  - decimals: 2
  - cx: 50
  - cy: 50
  - scale_min: 0
  - scale_max: 100
  # area: 'Home'
  - area: ' '
  - colorstops_template: colorstops_humidity
  - icon: 'mdi:water-percent'

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

  entities: 
    - entity: sensor.[[entity]]
      decimals: '[[decimals]]'
      name: '[[name]]'
      icon: '[[icon]]'
      area: '[[area]]'

  aspectratio: 1/1
  dev:
    debug: false
    ts: true
  
  layout:
    styles:
      card:
      toolsets:
        filter: url(#nm-1)
    toolsets:
      # ==============================================================================
      - toolset: humi-dt
        position:
          cx: '[[cx]]'
          cy: '[[cy]]'
        tools:
          - type: 'area'
            id: 0
            entity_index: 0
            position:
              cx: 50
              cy: 98
            styles:
              area:
                font-size: 2em;
                text-anchor: middle;

          - type: 'name'
            id: 1
            entity_index: 0
            position:
              cx: 50
              #cy: 53
              cy: 68
            styles:
              name:               
                #font-size: 1.2em;
                font-size: 4em;
                text-anchor: middle;

          - type: 'segarc'
            id: 2
            entity_index: 0
            position:
              cx: 49
              #cy: 50
              cy: 60
              start_angle: -90
              #start_angle: 0
              end_angle: 90
              #end_angle: 360
              #width: 5
              width: 3
              radius: 45
              #radius: 35
            scale:
              min: '[[scale_min]]'
              max: '[[scale_max]]'
              #width: 15
              #offset: -15
            show:
              #scale: true
              scale: false
              style: 'colorstops'
            segments:
              colorstops:
                template:
                  name: '[[colorstops_template]]'
                  variables:
                    - thegap: 0
            styles:
              foreground:
                fill: var(--theme-gradient-color-01);
              background:
                fill: var(--primary-background-color);

          - type: 'state'
            id: 3
            entity_index: 0
            position:
              cx: 50
              cy: 35
            styles:
              state:
                text-anchor: center;
                #font-size: 3em;
                font-size: 4em;
                fill: var(--theme-gradient-color-01);

          - type: 'icon'
            id: 4
            entity_index: 0
            position:
              #cx: 10
              cx: 90
              cy: 10
              align: center
              #icon_size: 15
              icon_size: 10
            styles:
              icon:
                color: var(--theme-gradient-color-01);
                fill: var(--theme-gradient-color-01);

#          - type: 'bar'
#           id: 5
#            entity_index: 0
#           position:
#              orientation: vertical
#              cx: 50
#              cy: 72
#              width: 80
#              height: 25
#            hours: 24
#            barhours: 1
#            styles:
#              bar:
#                stroke: var(--theme-gradient-color-01);
#                stroke-linecap: butt;


Afbeeldingslocatie: https://tweakers.net/i/pbZl7WBndv5u-FddTcRk0iVMaGU=/full-fit-in/4000x4000/filters:no_upscale():fill(white):strip_exif()/f/image/gNoxNwNrVJbcz8oGJjpbrdCe.png?f=user_large

Links is de compas-card, rechts mijn poging iets te maken wat hierop lijkt. Voordat ik de volgende fase inga weet iemand waarom de fontsize niet wordt aangepast?

Acties:
  • 0 Henk 'm!

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
Ok, ik ben een stap verder

YAML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
default:
  - decimals: 2
  - unit: '°'
  - cx: 50
  - cy: 50
  - scale_min: 0
  - scale_max: 100
  - colorstops_template: colorstops_humidity
  - icon: 'mdi:sun-angle'
  - name: 'Azimuth' 
card:
  type: 'custom:swiss-army-knife-card'

  entities: 
    - entity: sensor.[[entity]]
      decimals: '[[decimals]]'
      name: '[[name]]'
      icon: '[[icon]]'
      unit: '[[unit]]'

  aspectratio: 1/1
  
  layout:
    styles:
      card:
      toolsets:
        #filter: url(#nm-1)
    toolsets:
      # ==============================================================================
      - toolset: azimuth
        position:
          cx: '[[cx]]'
          cy: '[[cy]]'

        tools:
          - type: 'name'
            id: 0
            entity_index: 0
            position:
              cx: 18
              cy: 10
            styles:
              name:               
                font-size: '24px'
                text-anchor: center;

          - type: 'segarc'
            id: 1
            entity_index: 0
            position:
              cx: 50
              cy: 55
              start_angle: -40
              end_angle: 360
              width: 1
              radius: 38
            show:
              scale: false
              style: 'colorstops'
            segments:
              colorstops:
                template:
                  name: '[[colorstops_template]]'
                  variables:
                    - thegap: 0
            styles:
              foreground:
                fill: var(--theme-gradient-color-01);
              background:
                fill: var(--primary-background-color);

          - type: 'state'
            id: 2
            entity_index: 0
            position:
              cx: 50
              cy: 54
            styles:
              state:
                text-anchor: center;
                font-size: '58px'
                fill: var(--theme-gradient-color-01);

          - type: 'icon'
            id: 3
            entity_index: 0
            position:
              cx: 90
              cy: 10
              align: center
              icon_size: 10
            styles:
              icon:
                color: var(--theme-gradient-color-02);
                fill: var(--theme-gradient-color-02);
Afbeeldingslocatie: https://tweakers.net/i/ucwY7rAOvnJpbsz-K-XBJrCl9cs=/full-fit-in/4000x4000/filters:no_upscale():fill(white):strip_exif()/f/image/jfxeCIEZQOOvWZhFtc5fbkwm.png?f=user_large

Nu eens kijken of ik daar een graden verdeling op kan zetten. Daarna zal ik moeten leren hoe ik een nog te maken indicatie kan laten meedraaien (over de cirkel) zodat zichtbaar wordt waar de zon zich op dat moment t.o.v. het huis bevind.

Ik ga deze kaart steeds leuker vinden :)

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
[_ave_] schreef op dinsdag 1 augustus 2023 @ 12:41:
He hallo,

Kwam dit waanzinnig stukje add-on voor HA tegen en dacht WAUW!!!! Dat ziet er waanzinnig en gelikt uit. Dat wil ik ook. Nou dat was toch minder eenvoudig dan in eerste instantie gedacht. Het was niet zoals ik was gewend, een simpel kaartje toevoegen en ff aanpassen naar mijn eigen smaak.
Gelukkig deins ik niet snel terug en wilde toch wel heel graag weten hoe dit werkte. Dat heb ik geweten :-).

Ben wel al een heel eind op weg maar loop wel tegen iets aan waar ik niet zo snel de oplossing voor kan vinden, geen idee of dit de juiste weg is maar kon ook niet zo snel ergens iets vinden waar ik vragen kan stellen. Ik heb de kaart voor het overzicht van de systeem belasting genomen en aangepast voor mijn NAS.

Nu ziet dit op het scherm (view.png) er redelijk OK uit. (ben nog niet helemaal content met de schaduw) maar op mobiel (een Android versie 13) mis ik de load 15 5m en 15m (onderste is op PC)

Ik heb aan de originele yaml code niet heel veel veranderd, de gap heb ik op 0 gezet, vind ik zelf mooier en ik heb de 1m en 15m van plek verwisseld. Aan posities heb ik niets veranderd.

Mijn vraag: hoe komt het dat deze kaart er op mijn mobiel anders uitziet?[Afbeelding]

[Afbeelding]
Ik heb dit uiteindelijk werkend gekregen op mijn Android telefoon en tablet. Ik heb de kaart van scratch opnieuw gemaakt zonder de areatoolset en zonder de template. Nu is het goed zichtbaar op mijn mobiel. De areatoolset verwijderen zorgde ervoor dat het rechterdeel van de kaart onbruikbaar werd (ongeveer 20% van de grafische weergave viel aan de rechterkant weg. Door alle code in op de .yaml pagina te zetten i.p.v. de template te gebruiken is het beeld nu goed.

Afbeeldingslocatie: https://tweakers.net/i/8f4hGgcJqSm4QTdkEa27PaU92DU=/x800/filters:strip_icc():strip_exif()/f/image/OSo2hhJf9QW23kJA4LhFe5Zh.jpg?f=fotoalbum_large

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
De onderste kaarten zijn gewone entity kaarten. Wanneer ik dit op een SAK card zet dan veranderd security van safe naar ok (de entity zegt safe) en last boot van last week naar een onmogelijk lange datum notatie.

Acties:
  • 0 Henk 'm!

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
Allen,

Met dank aan James Wood heb ik een SAK kaart gemaakt voor de windrichting/windsnelheid:

Afbeeldingslocatie: https://tweakers.net/i/SBN4ueiILdNeLzanG34TK1B-Wao=/full-fit-in/4000x4000/filters:no_upscale():fill(white):strip_exif()/f/image/IMHeyAUhCSJMoA0KUhJ3jizW.png?f=user_large

Het ziet er best redelijk uit maar er is één ding dat ik niet voor elkaar krijg; nl. het mee laten draaien van de naald met de windrichting,deze blijft op noord staan. Nu komt de wind op dit moment toevallig ook uit het noorden waardoor het wellicht niet opvalt. Echter wanneer de wind uit een andere richting komt dan blijft de naald in het noorden staan. Kan iemand mij vertellen wat ik moet aanpassen zodat de naald daar staat waar de wind vandaan komt en niet alleen in het noorden? Onderstaand de code.

YAML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
  - type: vertical-stack
    cards:
    - type: horizontal-stack
      cards:
        # Windrichting en snelheid
        - type: custom:swiss-army-knife-card

          aspectratio: 1/1

          disable_card: false

          entities:
            - entity: sensor.wind_speed                                         # Index ID = 0
              decimals: 1
              #icon: mdi:windsock
              icon: mdi:selection-ellipse-arrow-inside
              area: 'Windsnelheid'
            - entity: sensor.wind_direction                                     # Index ID = 1
              area: 'Windrichting'

          layout:
            styles:
              card:
              toolsets:
                #filter: url(#nm-1)

            toolsets:

              # Titlebalk
              - toolset: titlebar
                position:
                  cx: 50
                  cy: 50
                tools:
                  - type: text
                    id: 1
                    position:
                      cx: 5
                      cy: 5
                    text: 'Windrichting/snelheid'
                    styles:
                      text:
                        font-size: 6em
                        font-weight: 300
                        text-anchor: start
                        fill: var(--primary-text-color)
                  - type: icon
                    id: 2
                    position:
                      cx: 95
                      cy: 5
                      align: center
                      icon_size: 6
                    entity_index: 0
                    styles:
                      icon:
                        fill: var(--primary-text-color)
                        opacity: 0.7

              # Background_outer-circle
              - toolset: backgroud-circle
                position:
                  cx: 50
                  cy: 50
                tools:
                  - type: 'circle'
                    id: 0
                    position:
                      cx: 50
                      cy: 55
                      radius: 38
                    styles:
                      circle:
                        opacity: 1
                        fill: '#C5C5C5'


              # Background-iamge
              - toolset: background-image
                position:
                  cx: 50
                  cy: 55
                tools:
                  - type: 'usersvg'
                    id: 2
                    position:
                      cx: 50
                      cy: 50
                      height: 89
                      width: 89
                    style: 'images'
                    images:
                      - default: /local/images/backgrounds/compass.svg

              # Background_inner-circle
              - toolset: backgroud-circle
                position:
                  cx: 50
                  cy: 50
                tools:
                  - type: 'circle'
                    id: 0
                    position:
                      cx: 50
                      cy: 55
                      radius: 29
                    styles:
                      circle:
                        opacity: 1
                        fill: var(--primary-background-color)


              # Wind Speed & Direction Guage Set
              - toolset: wind_speed
                position:
                  cx: 50
                  cy: 50
                tools:
                  # Windsnelheid (gauge)
                  - type: segarc
                    position:
                      cx: 50
                      cy: 55
                      start_angle: -135
                      end_angle: 225
                      width: 4
                      radius: 28
                    entity_index: 0
                    scale:
                      min: 0
                      max: 120
                      offset: 1.5
                    show:
                      scale: true
                      style: colorstops
                    segments:
                      colorstops:
                        gap: 0
                        colors:
                          0: '#C2C2C0'
                          1: '#27CD3E'
                          40: '#FFC300'
                          75: '#F49E29'
                          100: '#CA1021'
                    styles:
                      foreground:
                        fill: var(--theme-gradient-color-01)
                        opacity: 1
                      background:
                        fill: var(--cs-theme-default-darken-15)
                        filter: url(#is-1)
                        opacity: 0.2

                  # Windrichting Gauge
                  - type: circslider
                    position:
                      cx: 50
                      cy: 55
                      start_angle: -135
                      end_angle: 225
                      radius: 28
                      thumb:
                        width: 1.25
                        height: 9
                        radius: 0.5
                    entity_index: 1
                    show:
                      uom: none
                    scale:
                      min: 0
                      max: 360
                      step: 1
                    styles:
                      circslider:
                        stroke: none
                        pointer-events: none
                      active:
                        stroke: none
                        pointer-events: none
                      track:
                        stroke: none
                        pointer-events: none
                      thumb:
                        fill: '#8C8C8C'
                        fill-opacity: 1
                        stroke: "#CA04FB"
                        stroke-width: 0.75
                        pointer-events: none
                      capture:
                        fill: '#FFC300'
                        fill-opacity: 0
                        pointer-events: none

                  # Windsnelheid in KM/H
                  - type: state
                    position:
                      cx: 50
                      cy: 60
                    entity_index: 0
                    show:
                      uom: bottom
                    styles:
                      state:
                        font-size: 9em
                        font-weight: 400
                        text-anchor: middle
                        fill: var(--primary-text-color)
                      uom:
                        font-weight: 500
                        fill: var(--primary-text-color)

                  # Windrichting (Cardinal)
                  - type: state
                    position:
                      cx: 50
                      cy: 55
                    entity_index: 1
                    derived_entity:
                      state: |
                        [[[
                          const DIRECTION = ["N", "NNO", "NO", "ONO", "O", "OZO", "ZO", "ZZO", "Z", "ZZW", "ZW", "WZW", "W", "WNW", "NW", "NNW", ];
                          const dir = Math.floor((state / 22.5) + .5);
                          return DIRECTION[(dir % 16)];
                        ]]]
                      show:
                        uom: none
                    styles:
                      state:
                        font-size: 9em
                        font-weight: 400
                        text-anchor: middle
                        fill: var(--primary-text-color)

                  # Windrichting in tekst (in cirkel)
                  - type: state
                    position:
                      cx: 50
                      cy: 45
                    entity_index: 1

                    styles:
                      state:
                        font-size: 9em
                        font-weight: 400
                        text-anchor: middle
                        fill: var(--primary-text-color)

Acties:
  • 0 Henk 'm!

  • d-vine
  • Registratie: Augustus 2006
  • Laatst online: 09:30
[_ave_] schreef op zaterdag 6 januari 2024 @ 10:17:
Allen,

Met dank aan James Wood heb ik een SAK kaart gemaakt voor de windrichting/windsnelheid:

[Afbeelding]

Het ziet er best redelijk uit maar er is één ding dat ik niet voor elkaar krijg; nl. het mee laten draaien van de naald met de windrichting,deze blijft op noord staan. Nu komt de wind op dit moment toevallig ook uit het noorden waardoor het wellicht niet opvalt. Echter wanneer de wind uit een andere richting komt dan blijft de naald in het noorden staan. Kan iemand mij vertellen wat ik moet aanpassen zodat de naald daar staat waar de wind vandaan komt en niet alleen in het noorden? Onderstaand de code.
Ik ben vorig jaar kort bezig geweest om mijn eigen weather omgeving te maken. Gebaseerd op voorbeelden. Maar nooit kunnen voortzetten door wat privé omstandigheden. Hoop dat ik er over tijd weer meer tijd voor heb.

Ik heb dus niet zo'n mooie windrichting kaart kunnen maken maar wel de slider card "misbruikt" om dat pijltje te kunnen laten bewegen. Met de hand kun je deze dus ronddraaien maar bij de eerste beste update schiet de pijl wel weer naar de juiste richting. Misschien is het een oplossing voor je of geeft het een idee

Let maar niet op de kleuren, vormen en tekst grote dat is allemaal fun playing geweest.

Afbeeldingslocatie: https://tweakers.net/i/VMExKBPPwnFa-stdzJYC_rJst3k=/full-fit-in/4000x4000/filters:no_upscale():fill(white):strip_exif()/f/image/7zShANHaLWDnIWHRjRA6Svro.png?f=user_large

Als je de volledige code wilt stuur maar een dm

Er staat een het nodige van mijn HA op github, alleen al een poosje niet een update gegeven maar dan heb je een idee van mijn omgeving.

PS:
Ik ben maar een hobby bob met het maken van dit en lease hier en daar en ga dan spelen om het werkend te krijgen.
Alles wat anders en eenvoudiger kan gewoon zeggen ;)

HomeAssistant Github D-Vine

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
              # ================================================================
              - toolset: circ-slider-test
                position:
                  cx: 25
                  cy: 110

                tools:
                # ------------------------------------------------------------
                  - type: circslider
                    position:
                      cx: 50
                      cy: 50
                      radius: 20
                      start_angle: 0
                      end_angle: 360
                      thumb:
                        width: 2
                        height: 12
                        radius: 1
                      label:
                        placement: 'position'
                        cx: 50
                        cy: 40
                    entity_index: 4
                    scale:
                      min: 1
                      max: 360
                      step: 1
                    styles:
                      circslider:
                        stroke: none
                        fill: var(--theme-sys-elevation-surface-neutral4)
                      thumb:
                        stroke: var(--theme-sys-elevation-surface-neutral10)
                        #fill: white
                        stroke-width: 1em
                      track:
                        stroke-width: 2em
                        stroke-linecap: square
                        stroke: url(#sak-light-color-temperature-gradient)
                      active:
                        #stroke: 'black'
                        #stroke: url(#sak-light-color-temperature-gradient)
                        #stroke: var(--primary-background-color)
                        #stroke: url(#sak-light-brightness-gradient)
                        stroke: none
                      capture:
                        fill: none
                      label:
                        text-anchor: middle
                        font-size: 8em
                        font-weight: 250
                        pointer-events: auto
                      uom:
                        font-weight: 250

                  - type: state
                    id: 0
                    position:
                      cx: 50
                      cy: 55
                    entity_index: 6
                    styles:
                      state:
                        font-size: 11em
                        font-weight: 400
                        text-anchor: middle
                      uom:
                        alignment-baseline: central
              # ================================================================
              - toolset: wind
                position:
                  cx: 75
                  cy: 110
                tools:
                  - type: 'circle'
                    id: 0
                    position:
                      cx: 50
                      cy: 50
                      radius: 22
                    styles:
                      circle:
                        opacity: 1
                        fill: var(--primary-background-color)

                  - type: 'segarc'
                    id: 0
                    entity_index: 3
                    position:
                      cx: 50
                      cy: 50
                      start_angle: 0
                      end_angle: 360
                      width: 2
                      radius: 20
                    scale:
                      min: 0
                      max: 80
                    show:
                      scale: false
                      style: 'colorstops'
                    segments:
                      colorstops:
                        gap: 1
                        colors:
                          0: 'white'
                          10: '#5e4fa2'
                          20: '#3288bd'
                          30: '#66c2a5'
                          40: '#abdda4'
                          50: '#e6f598'
                          60: '#fee08b'
                          70: '#fdae61'
                          80: '#f46d43'
                          90: '#d53e4f'
                          100: '#9e0142'
                    styles:
                      foreground:
                        fill: var(--theme-gradient-color-01)
                      background:
                        #fill: var(--cs-theme-default-darken-15)
                        fill: var(--theme-ref-palette-secondary95)
                        filter: url(#is-1)

                  - type: icon
                    id: 2
                    position:
                      cx: 50
                      cy: 40
                      icon_size: 12
                    entity_index: 3
                    styles:
                      icon:
                        filter: url(#is-1)
                        opacity: 0.6

                  - type: state
                    id: 3
                    position:
                      cx: 50
                      cy: 55
                    entity_index: 3
                    styles:
                      state:
                        font-size: 10em
                        font-weight: 370
                        text-anchor: middle
                      uom:
                        alignment-baseline: central



Was hier aan begonnen omdat ik mijn Netatmo de deur had gewezen en een Ecowitt (WS90) Wittboy heb gekocht die veel nauwkeuriger is en ook nog 1 unit voor alles.

Eigenlijk is het de bedoeling om dat dashboard op een leuke manier in HA te krijgen

Afbeeldingslocatie: https://tweakers.net/i/fDV43vtGqRRXbmaetCSu7O-s1Ds=/800x/filters:strip_exif()/f/image/62ScmK0HcrmG28ThOF4bBNYT.png?f=fotoalbum_large

Acties:
  • +3 Henk 'm!

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
Het werkt :)

Uiteindelijk een extra entity toegevoegd die de windrichting in graden aangeeft. en onder - type: circslider dit stukje toegevoegd onder tumb:

code:
1
2
3
4
                        label:
                          placement: 'position'
                          cx: 80
                          cy: 95

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
  - type: vertical-stack
    cards:
    - type: horizontal-stack
      cards:
        # Windrichting en snelheid
        - type: custom:swiss-army-knife-card

          entities:
            - entity: sensor.wind_speed                                         # Index ID = 0
              decimals: 1
              #icon: mdi:windsock
              icon: mdi:selection-ellipse-arrow-inside
              area: 'Windsnelheid'
            - entity: sensor.wind_direction                                     # Index ID = 1
              area: 'Windrichting'
            - entity: sensor.openweathermap_wind_bearing                        # Index ID = 2
              area: 'Windrichting'
              decimals: 1
              unit: '°'

          aspectratio: 1/1

          disable_card: false

          layout:
            styles:
              card:

            toolsets:

              # Titlebalk
              - toolset: titlebar
                position:
                  cx: 50
                  cy: 50
                tools:
                  - type: text
                    id: 1
                    position:
                      cx: 5
                      cy: 5
                    text: 'Windrichting/snelheid'
                    styles:
                      text:
                        font-size: 6em
                        font-weight: 400
                        text-anchor: start
                        fill: var(--primary-text-color)
                  - type: icon
                    id: 2
                    position:
                      cx: 95
                      cy: 5
                      align: center
                      icon_size: 6
                    entity_index: 0
                    styles:
                      icon:
                        fill: var(--primary-text-color)
                        opacity: 0.9

              # Background_outer-circle
              - toolset: backgroud_outer-circle
                position:
                  cx: 50
                  cy: 50
                tools:
                  - type: 'circle'
                    id: 0
                    position:
                      cx: 50
                      cy: 55
                      radius: 38.5
                    styles:
                      circle:
                        opacity: 0.7
                        fill: '#C3C3C3'
                        filter: url(#nm-1)

              # Background_inner-circle
              - toolset: backgroud_inner-circle
                position:
                  cx: 50
                  cy: 50
                tools:
                  - type: 'circle'
                    id: 0
                    position:
                      cx: 50
                      cy: 55
                      radius: 29
                    styles:
                      circle:
                        opacity: 1
                        fill: var(--primary-background-color)

              # Background-image
              - toolset: background-image
                position:
                  cx: 50
                  cy: 55
                tools:
                  - type: 'usersvg'
                    id: 2
                    position:
                      cx: 50
                      cy: 50
                      height: 78 
                      width: 78
                    style: 'images'
                    images:
                      - default: /local/images/backgrounds/compass_north_225.svg


              # WindSnelheid
              - toolset: wind_speed_direction
                position:
                  cx: 50
                  cy: 50
                tools:
                  # Windsnelheid (gauge)
                  - type: segarc
                    position:
                      cx: 50
                      cy: 55
                      start_angle: -135
                      end_angle: 225
                      width: 2
                      radius: 28.15
                    entity_index: 0
                    scale:
                      min: 0
                      max: 120
                      offset: 1.5
                    show:
                      scale: true
                      style: colorstops
                    segments:
                      colorstops:
                        gap: 0
                        colors:
                          0: '#C2C2C0'
                          1: '#27CD3E'
                          40: '#FFC300'
                          75: '#F49E29'
                          100: '#CA1021'
                    styles:
                      foreground:
                        fill: var(--theme-gradient-color-01)
                        opacity: 1
                      background:
                        fill: var(--cs-theme-default-darken-15)
                        filter: url(#is-1)
                        opacity: 0.2

                  # Windsnelheid KM/H (in cirkel)
                  - type: state
                    position:
                      cx: 50
                      cy: 60
                    entity_index: 0
                    show:
                      uom: bottom
                    styles:
                      state:
                        font-size: 9em
                        font-weight: 400
                        text-anchor: middle
                        fill: var(--primary-text-color)
                      uom:
                        font-weight: 500
                        fill: var(--primary-text-color)

                  # Windrichting tekst (in cirkel)
                  - type: state
                    position:
                      cx: 50
                      cy: 45
                    entity_index: 1
                    styles:
                      state:
                        font-size: 9em
                        font-weight: 400
                        text-anchor: middle
                        fill: var(--primary-text-color) 

                  - type: circslider
                    position:
                      cx: 50.01
                      cy: 50.01
                      start_angle: -141
                      end_angle: 219
                      radius: 30

                      thumb:
                        width: 1.25
                        height: 9
                        radius: 0.5
                        label:
                          placement: 'position'
                          cx: 80
                          cy: 95

                    entity_index: 2

                    show:
                      uom: none

                    scale:
                      min: 1
                      max: 360
                      step: 0.1

                    styles:
                      circslider:
                        stroke: none
                      active:
                        stroke: none
                      track:
                        stroke: none
                      thumb:
                        fill: '#8C8C8C'
                        fill-opacity: 0.9
                        stroke: "#CA04FB"
                        stroke-width: 0.75
                        pointer-events: none
                      capture:
                        fill: '#FFC300'
                        fill-opacity: 0
                      uom:
                        font-weight: 400


Afbeeldingslocatie: https://tweakers.net/i/SegpVIhdLfK9ERVm6lkqPn61pYU=/full-fit-in/4000x4000/filters:no_upscale():fill(white):strip_exif()/f/image/38qmDZd0ldf4YtlnCTIPzHQ2.png?f=user_large

Afbeeldingslocatie: https://tweakers.net/i/szSSn1bQmLGoF_5_-Bgy6fITYAk=/full-fit-in/4000x4000/filters:no_upscale():fill(white):strip_exif()/f/image/1xmXog97yCI0ENFu9jJuu7ie.png?f=user_large

Acties:
  • +1 Henk 'm!

  • Sjeuf
  • Registratie: Februari 2003
  • Laatst online: 10-08 10:31
Beste allen,

even een vraag. Is het mogelijk om een live camera feed te laten zien in SAKS via een card?

Kan het bv met image via User-svg en dan een http of rstp stream op te geven? Als ik dat nu doe krijg ik een "broken-image" teken. Het is voor mijn dashboard van belang dat er een live-stream zichtbaar is.

Alvast hartelijk dank!


Reeds gelukt:

Als image gebruik ik de ... /api/camera_proxy/camera.camera?token=..... regel uit de camera entiteit. Dan laat hij hem zien in een SAKS card

:)

[ Voor 20% gewijzigd door Sjeuf op 03-03-2024 15:56 ]


Acties:
  • 0 Henk 'm!

  • Sjeuf
  • Registratie: Februari 2003
  • Laatst online: 10-08 10:31
@Mars Warrior inmiddels hard hier aan het werk om via v2.5.1-dev.2 mijn cards te vullen met grafieken. Lukt allemaal op 1 ding na... de fade onder de line in de "area chart-type". De line wordt mooi getoond maar de fade niet.

zowel niet via :
YAML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
  
  - type: 'custom:swiss-army-knife-card'
    entities:
      - entity: sensor.buiten_temperatuur_temperature
        name: 'Air quality'
        area: 'Tha Moon'
        show_graph: true
        
    aspectratio: 1/1                          # Card is 100x100 grid
    layout:
      styles:
        card:
      toolsets:
        - toolset: graph-test
          position:
            cx: 50
            cy: 50
          tools:
            # ------------------------------------------------------------
            - type: sparkline
              id: 1
              position:
                orientation: horizontal
                cx: 50
                cy: 50
                width: 100
                height: 100
                margin:
                  l: 1
                  x: 1
                  y: 0
                  r: 1
                  t: 2
                  b: 50
              entity_index: 0
              entity_indexes:
                - entity_index: 0
              period:
                rolling_window:
                  duration:
                    hour: 24
                  bins: 
                    per_hour: 1
              sparkline:
                show:
                  chart_type: area
                  fill: fade
                area: 
                  line_width : 2
                  show_line: true
                  fill: fade
                colorstops_transition: smooth
                colorstops:
                  colors:
                    - value: 500
                      color: var(--theme-sys-palette-secondary85)
                    - value: 3000
                      color: var(--theme-sys-palette-secondary60)


als ook niet via een bestaand template:

YAML:
1
2
3
4
5
6
7
8
      layout:
      template:
        name: sak_layout_fce2_awair2a
        variables:
               # Chart types barcode, dots, line, area, bar or graded work nicely
               # The equalizer not!
            - sak_layout_awair_chart_type: area
              # Check documentation for chart variant per chart type........


Ik weet dat het een pre-release is maar als je hier wat licht over kunt laten schijnen wat ik niet goed doe dan hoor ik het graag.

PS. sinds augustus of zo geen nieuws meer omtrent deze card. Ik vind het een top card maar voordat ik me helemaal suf codeer met deze card en er later breaking changes komen vanuit home assistant en deze card wordt niet meer geupdate. Kun je bevestigen dat dit nog een ongoing project is?

[ Voor 0% gewijzigd door Septillion op 21-03-2024 07:30 . Reden: YAML code-tags ]


Acties:
  • 0 Henk 'm!

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
Geen idee.

[ Voor 96% gewijzigd door [_ave_] op 06-05-2024 14:52 ]


Acties:
  • 0 Henk 'm!

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
Sjeuf schreef op zondag 3 maart 2024 @ 15:36:
Beste allen,

even een vraag. Is het mogelijk om een live camera feed te laten zien in SAKS via een card?

Kan het bv met image via User-svg en dan een http of rstp stream op te geven? Als ik dat nu doe krijg ik een "broken-image" teken. Het is voor mijn dashboard van belang dat er een live-stream zichtbaar is.

Alvast hartelijk dank!


Reeds gelukt:

Als image gebruik ik de ... /api/camera_proxy/camera.camera?token=..... regel uit de camera entiteit. Dan laat hij hem zien in een SAKS card

:)
Zou je het stukje code willen delen waar je de image hebt geplaatst en wat je onder usesvg hebt staan ajb? Ik zou dit graag willen toepassen op een nieuwe dashboard dat ik met SAK aan het maken ben. en wat je onder usesvg hebt staan

[ Voor 4% gewijzigd door [_ave_] op 06-05-2024 14:56 ]


Acties:
  • 0 Henk 'm!

  • Sjeuf
  • Registratie: Februari 2003
  • Laatst online: 10-08 10:31
[_ave_] schreef op maandag 6 mei 2024 @ 14:53:
[...]


Zou je het stukje code willen delen waar je de image hebt geplaatst en wat je onder usesvg hebt staan ajb? Ik zou dit graag willen toepassen op een nieuwe dashboard dat ik met SAK aan het maken ben. en wat je onder usesvg hebt staan
Uiteindelijk is het dit geworden:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
# ================================================================
      
              
      - toolset: camera
        position:
          cx: 100 
          cy: 50
        tools:
# ------------------------------------------------------------      
          - type: rectex
            position:
              cx: 50
              cy: 50
              width: 200
              height: 100
            styles:
              rectex:
                fill: "#e0e0e0"
# ------------------------------------------------------------          
          - type: 'usersvg'           # tooltype is 'usersvg'
            position:                 # Position on (100x100) canvas
              cx: 50                 # cx=50 is center position
              cy: 50                  # cy=50 is center position
              height: 100            # Image covers full heigth and...
              width: 200              # ...width of card.
            entity_index: 0
            # clip_path:
            #   position:
            #     cx: 50
            #     cy: 50
            #     height: 90      # clip height and width to a bit
            #     width: 180      # smaller than image size (95/95)
            #     radius:         # Irrelevant, since mask will make
            #       all: 5  
            style: 'images'
            images:     
                - default: >
                    [[[
                      return (states["camera.vdcamera"].attributes.entity_picture);
                    ]]]



Het is een generic camera die ik heb toegevoegd: https://www.home-assistant.io/integrations/generic
Afbeeldingslocatie: https://tweakers.net/i/MLRkx3RfbRjfuruR-hfgCTt-tcg=/800x/filters:strip_exif()/f/image/zwAtVXfBVA3fgxB2GJUxnCy9.png?f=fotoalbum_large
Dan krijg je zoiets

Nu moet ik zeggen dat het niet echt live is. Er zit enkele minuten vlgs mij vertraging in maar als je er op klikt dan zie je wel het live beeld. OMdat ik nu nog met een geheel ander ding met SAKS bezig ben is de camera voor mij nu niet een hot issue. Daar komt ik later nog op terug.

Acties:
  • 0 Henk 'm!

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
Dank voor de reactie, heb het uitgeprobeerd maar blijkt in de praktijk toch niet zo lekker te werken. De ene keer is het beeld zichtbaar, de andere keer weer niet. Werkt niet echt als je even snel wilt kijken of de bui al in de buurt is of niet :) Ik heb nu maar de windrichting in het midden geplaatst en laat de camera.buienradar wel als aparte kaart op het dashboard staan.

Acties:
  • 0 Henk 'm!

  • Sjeuf
  • Registratie: Februari 2003
  • Laatst online: 10-08 10:31
[_ave_] schreef op dinsdag 14 mei 2024 @ 12:53:
Dank voor de reactie, heb het uitgeprobeerd maar blijkt in de praktijk toch niet zo lekker te werken. De ene keer is het beeld zichtbaar, de andere keer weer niet. Werkt niet echt als je even snel wilt kijken of de bui al in de buurt is of niet :) Ik heb nu maar de windrichting in het midden geplaatst en laat de camera.buienradar wel als aparte kaart op het dashboard staan.
Als ik tijd heb ga ik hiermee aan de slag. Misschien werkt dit wel goed
YouTube: Boost your Security Camera Video in Home Assistant using WebRTC

Acties:
  • 0 Henk 'm!

  • Sjeuf
  • Registratie: Februari 2003
  • Laatst online: 10-08 10:31
Even een showcase en update. Ben er nog lang niet. Aan een kant te druk en teveel info, maar te weinig info is ook niet zinvol op een dashboard. moet nog wat verplaatsen. De energie en gas + water icons zijn te kleurig en leiden af. Deze moet ik nog veranderen en verplaatsen. Hiernaast nog binnen en buiten categorie maken. Dan weer verder kijken. Misschien gewoon maar eens af maken en dan fine tunen

Afbeeldingslocatie: https://tweakers.net/i/lWrN2g4B1k3bKxZR7e-ztCiDt4E=/x800/filters:gifsicle():strip_exif()/f/image/uNF22oyWfEJtsCogSgicHJ0u.gif?f=fotoalbum_large

Acties:
  • +2 Henk 'm!

  • Sjeuf
  • Registratie: Februari 2003
  • Laatst online: 10-08 10:31
Even "my 2 cents" over SAKS en toekomst. corrigeer me waar nodig.

E.e.a valt en staat met het onderhouden van / updates van deze kaart. De laatste grote update was ca 1 jaar geleden. Zag wel nog activiteit in SAKS js vorige maand maar geen contac met de TS

De effort die hij in deze kaart heeft gestoken is enorm. Alleen al the manual met hiernaast ook material themes 3 documentatie laat staan alle extreem vele uren in de code getuigt van een commitment naar een betere dashboard voor home assistant. De ruime mogelijkheden zonder extreem ingewikkeld javascript/yaml gaf mij de doorslag om hiermee aan de slag te gaan en mij vele uren bezig te houden en te ontdekken. Mijn eigen drang naar het perfecte dashboard heeft me langs dribbble en vele andere sites geleid in de hoop inspiratie te vinden die ik kon ombuigen naar een voor mij ideaal dashboard. Ik ben er naar toe aan het groeien maar ben er nog lang niet (waarschijnlijk omdat perfect niet bestaat...).

Terwijl ik groei naar mijn perfecte dashboard kijk ik ook wat home-assistant zelf doet. Met project Grace komt een uiterlijk beter dashboard langzaam dichterbij met drag&drop https://www.home-assistan...3/04/dashboard-chapter-1/

Home Assistant zal zo ook langzaam meer functionaliteit naar het dashboard halen en haalt langzaam tools zoals de button card en card-mod e.d. in. Zo ook denk ik met SAKS.

Ik ben er dus ergens , helaas, over na aan het denken om SAKS los te laten. Mede door de weinige updates of respons van de TS, wat ik overigens hem niet kwalijk neem. SAKS is een hobby. En het project heeft niet meerdere developers die kunnen bijspringen in tijd dat er een uitvalt/vakantie/ziek/etc. Ik wou dat ik de programming skills had om te helpen maar zit totaal niet in de IT. Een project dat steeds groter wordt en maar van 1 persoon afhankelijk is qua development, wordt lastig.

Gezien ik ook functionaliteit belangrijk vind en in mijn huishouden ook een keer iets moet gaan werken (voor de rest in mijn huishouden) ga ik naast SAKS ook eens met Grace en native layout van home assistant aan de slag. Niet omdat ik SAKS compleet wil laten vallen maar ik ben bang dat er een keer een breaking change komt in home assistant (is er al eens geweest) waardoor SAKS afunctioneel wordt en ik niet meer op mijn dashboard kom. Als er geen actieve ontwikkeling is dan wordt dat gevaar steeds groter en met mijn steeds grotere afhankelijkheid van het functioneren van mijn huis via home assistant is een zga 100% uptime van mijn home assistant nu wel langzaam een must....

@Mars Warrior , dank voor al het harde en vele werk!

Acties:
  • 0 Henk 'm!

  • [_ave_]
  • Registratie: April 2013
  • Laatst online: 31-07-2024
Grace is overigens geen kaart maar een dashboard. Als het gaat om SAK te vervangen gaat dat met Grace niet werken volgens mij

Acties:
  • 0 Henk 'm!

  • Sjeuf
  • Registratie: Februari 2003
  • Laatst online: 10-08 10:31
[_ave_] schreef op dinsdag 28 mei 2024 @ 08:05:
Grace is overigens geen kaart maar een dashboard. Als het gaat om SAK te vervangen gaat dat met Grace niet werken volgens mij
Klopt volkomen. Ik wil het liefst saks blijven gebruiken. Wat ik meer bedoel is dat ik breaking changes van een mogelijk niet onderhouden card niet meer kan veroorloven. Ik gebruik dan nog steeds andere custom cards en ook dat blijft een risico. Ik snap dat het geen homekit is of een andere box en dat er gevaren zijn maar enige ontwikkeling stelt mij altijd gerust. En ook meerdere developers geeft ook rust

Acties:
  • 0 Henk 'm!

  • Pandabeer35
  • Registratie: Mei 2011
  • Laatst online: 09:57
ik kwam deze custom add on voor Home Assistant tegen - lijkt me super om te gaan gebruiken, maar zie weinig tot geen wijzigingen meer in de afgelopen periode? Ook na het installeren via HACS kom ik niet echt verder, is het nog de bedoeling dat dit verder vervolg gaat krijgen? Zoveel tijd en energie ingestoken las ik, jammer om dit niet op meer HA systemen actief te maken...

@Mars Warrior komt er nog een vervolg?
Pagina: 1 2 3 4 5 Laatste

Let op:
Voor de leesbaarheid, zet je yaml tussen [code=yaml]~[/code]. Ook makkelijker voor de eventuele foutopsporing.