Comments (8)
AmoebeLabs
commented on September 14, 2024
1
The upcoming v2.5.1 converts all states to a string before processing, including attributes. That would automatically fix this bug.
So in your case, the rgb_color attribute will be converted to something like '10,20,30' as the rgb_color attribute is an array of the RGB values. That would be enough for your use case.
However:
- This does not work for objects, as these are converted to the string "Object".
- It also doesn't work for lights that don't have the
rgb_colorattribute (all my RGB led strips use xyz mode), so some extra converters to convert some HSL, or xyz color state to RGB would be nice to have in the future.
from swiss-army-knife-card.
AmoebeLabs
commented on September 14, 2024
1
Fantastic!
This does not work for objects, as these are converted to the string "Object".
Using
JSON.stringify()andJSON.parse()might be a workaround in these cases, or I can create something usingObject.keys(). :)
So far, even without JSON.*, the hs_color attribute which should be implemented by most color_mode variations seems to work. My led strip has a color mode (xy) and a color temperature mode. Both are updated by monitoring the hs_color attribute.
The new state string builder checks the current color_mode and takes the appropriate attribute to calculate and adjust the color for contrast, and returns this as either a CSV formatted string or a hex string.
If the light is switched off, these attributes are removed by HA, and become undefined. This state is passed on to the tool. Hence you can test that state (typeof (state) === 'undefined') to remove the fill.
I can't monitor more than 1 attribute for a single entity, but it works this way, so I'll keep it this way for now.
The redesigned & rewritten state handling and state display makes all these things possible.
State changes: state change --> convert state (convert:) --> new state as string.
State display: new state --> format state (format:) --> localize state --> render state.
It seems to work in my environment, but of course there will be bugs, as I can't test every situation.
from swiss-army-knife-card.
martydingo
commented on September 14, 2024
1
This works perfectly, thanks.
from swiss-army-knife-card.
martydingo
commented on September 14, 2024
Here is an example that works, watching color_temp which returns an integer, not an array.
- type: custom:swiss-army-knife-card
aspectratio: 3/3
entities:
- entity: light.office_door_spotlight
- entity: light.office_door_spotlight
attribute: brightness
format: brightness
unit: "%"
- entity: light.office_door_spotlight
attribute: color_temp
format: color_temp
layout:
toolsets:
- toolset: 3_spotlight_triad
position:
cx: 50
cy: 50
tools:
- type: "circle"
entity_index: 2
position:
cx: 150
cy: 100
radius: 47
styles:
circle:
stroke: "var(--secondary-background-color)"
filter: url(#sak-nm-default)
animations:
- state: "[[[ return (state); ]]]"
styles:
circle:
filter: url(#nm-1-reverse)
fill: >-
[[[ return
`rgb(${states["light.office_door_spotlight"].attributes.rgb_color})`
]]]
- state: "off"
styles:
circle:
filter: url(#sak-nm-default)
- type: "circle"
entity_index: 0
position:
cx: 150
cy: 100
radius: 50
styles:
circle:
stroke: "var(--secondary-background-color)"
filter: url(#sak-nm-default)
animations:
- state: "on"
styles:
circle:
filter: url(#nm-1-reverse)
fill: url(#light-power-gradient-radial)
- state: "off"
styles:
circle:
filter: url(#sak-nm-default)
stroke: "var(--secondary-background-color)"
user_actions:
tap_action:
haptic: light
actions:
- action: call-service
service: light.toggle
hold_action:
haptic: light
actions:
- action: more-infofrom swiss-army-knife-card.
AmoebeLabs
commented on September 14, 2024
I have some progress 😄
Ikea light with the temperature only:
- SAK:
- HA:
RGBW light with color:
- SAK:
- HA:
These three circles use the following entities:
- entity: light.livingroom_light_cupboard_light
attribute: hs_color
convert: rgb_csv
- entity: light.livingroom_light_cupboard_light
attribute: hs_color
convert: rgb_hex
- entity: light.livingroom_light_duo_right_light
attribute: color_temp
convert: rgb_hexAnd the tool with rgb_csv formatting:
- type: circle
position:
cx: 50
cy: 50
radius: 22.5
entity_index: 2
animations:
- state: '[[[ return state; ]]]'
styles:
circle:
fill: >-
[[[ if (typeof (state) === 'undefined') return 'none';
return `rgb(${state})`; ]]]The tool with rgb_hex formatting:
- type: circle
position:
cx: 50
cy: 90
radius: 10
entity_index: 3
animations:
- state: '[[[ return state; ]]]'
styles:
circle:
fill: >-
[[[ if (typeof (state) === 'undefined') return 'none';
return state; ]]]from swiss-army-knife-card.
martydingo
commented on September 14, 2024
Fantastic!
This does not work for objects, as these are converted to the string "Object".
Using JSON.stringify() and JSON.parse() might workaround in these cases, or I can create something using Object.keys(). :)
from swiss-army-knife-card.
AmoebeLabs
commented on September 14, 2024
Closed due to #227
from swiss-army-knife-card.
AmoebeLabs
commented on September 14, 2024
This works perfectly, thanks.
Great. Thanks for the feedback!
from swiss-army-knife-card.
Related Issues (20)
- Refactor state building (states, animations) and state display (localization, specifics) HOT 2
- iPhone Custom Element Doesn't exist HOT 10
- Live Update of Entities HOT 3
- refactor: Remove custom-card-helpers HOT 1
- refactor: Refactor icon state building HOT 1
- Add Sparkline Graph tool HOT 10
- usersvg - png - animations not beingapplied HOT 17
- After updating to v2.5.1 my buienradar integration gives an error "Cannot read properties of null (reading 'toString') HOT 1
- Error : i.setConfig is not a function HOT 19
- Own toolset template not working HOT 1
- Add Progress Bar based on path tool HOT 1
- Cannot read properties of undefined (reading 'template')
- Safari 17 has scale and rotate issues
- scaling not working on mobile (android) HOT 1
- the ">" and ">=" operator gets ignored HOT 3
- "Null" attributes throw and error (and do not load card) HOT 1
- To make support for the type of user action "hold_action" HOT 3
- Feature: Refresh SVG on animation/time/state/... HOT 1
- Can't use notify service because of entity_id being added HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from swiss-army-knife-card.