Hi @JustinG & @litronics @JamesC
I’ve been picking at these examples to build some dynamic layouts using rects and paths…
But I can’t figure out how to drop a bit of text using the same process onto a dynamic layout.
Or home-grown SVG icon for that matter.
Do either of you have an example? Here is what I have working and what I’d like to get working:
- component: rect
config:
id: area-livingroom
width: 150
height: 160
x: 40
y: 520
fill: yellow
opacity: =Math.round(items.gLight_LivingRoom.state)/100
stroke: black
- component: rect
config:
id: area-bedroom
width: 150
height: 140
x: 40
y: 380
fill: yellow
opacity: =Math.round(items.gLight_Bedroom.state)/100
stroke: black
As an alternate approach, I can isolate this power indicator from this a power widget so that it displays a simple SVG animation on my layout:
uid: SVG_Temperature_Marker
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Jan 1, 2023, 1:47:55 PM
component: f7-card
config: {}
slots:
default:
- component: f7-block
config:
style:
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><path stroke="red" stroke-width="2" id="grid_import" d="m80,5l60,0" opacity="undefined" stroke-linecap="undefined" stroke-linejoin="undefined" fill="none"/><circle r="5" fill="red"> <animateMotion dur="5s" repeatCount="indefinite" path="m80,5l60,0" /> </circle> </svg>')
border-style: solid
border-width: 0px
height: 10px
left: 0px
margin-left: 50px
margin-right: auto
margin-top: auto
position: absolute
right: -10px
top: 10px
transform: translate(-50%, -50%)
width: 280px
but when I substitute my own SVG I can’t get it to show anything - I have a feeling it has with all the different margins and sizes, but can’t figure it out for the life of me.
Any basic examples would be hugely appreciated!