Not sure if this belong in this section, so please let me know and I’ll move the topic.
Let me start with what I am trying to do:
- type: 'custom:floorplan-card'
config:
image:
location: /local/media/dashboards/psychrometry-chart.svg
cache: false
stylesheet: /local/media/dashboards/psychrometry-chart.css
defaults:
hover_action: hover-info
tap_action: more-info
rules:
- entity: sensor.workspace_temperature
state_action:
action: call-service
service: floorplan.style_set
service_data:
element: indicator-workspace
style: |
>
var x = (parseFloat(entity.state) + 20) / 65 * 1007 - 343;
var y = 665 - (parseFloat(states['sensor.workspace_humidity'].state) / 35 * 665) - 241;
return `transform: translate(${x}px, ${y}px);`;
It is not working. The element is not moving on the picture where I wanted it to be.
I would like to see what the var x and var y are, and what the return is as far as coordinates on the picture.
Any way to do that? I feel like I am blind trying to figure out why it is not working, other than the classic debug of putting some values in x, y, and rebuilding the code one line at a time.
Figured I’d ask. (embedded hardware background, not software, and definitely not YAML)