Payload values to CSS variable

Dashboard
1

I need to put msg.kylmäpiste and msg. lämpöpiste into root variables to move corresponding balls in the flow

tikkupallukat
tikkupallukat1917×552 85.1 KB

pallukka1
pallukka11739×598 40 KB

template node

<div id="bgr">
    <div class="txt" id="txt1">{{msg.s1}}</div>
    <div class="txt" id="txt2">{{msg.s2}}</div>
    <div class="txt" id="txt3">{{msg.s3}}</div> 
    <div class="txt" id="txt4">{{msg.s4}}</div>    
    <div class="txt" id="txt5">{{msg.s5}}</div> 
    <div class="txt" id="txt6">{{msg.s6}}</div>  
    <div class="txt" id="txt7">{{msg.s7}}</div> 
    <div class="txt" id="txt8">{{msg.s8}}</div> 
    <div class="ball" id="ball1"></div>
    <div class="ball" id="ball2"></div>
</div>

<style>
.ball{
    position:absolute;
	width: 40px;
	height: 50px;
	border-radius: 50%;
}
#ball1 {
	margin: 25px 1360px;
    background-color:blue
}
#ball2 {
	margin: 25px 360px;
    background-color:red
}

I try this and many other ones. Surely simple to fix :wink:

:root {
 --lämpöpiste : {{msg.lämpöpiste }};
 --kylmäpiste : {{msg.kylmäpiste }};
}
.ball{
    position:absolute;
	width: 40px;
	height: 50px;
	border-radius: 50%;
}
#ball1 {
	margin: 25px var(--kylmäpiste)px;
       background-color:blue
}
#ball2 {
	margin: 25px var(--lämpöpiste)px;
    background-color:red
}
2

Here's one solution how the CSS variables can be set and changed dynamically with the incoming message.

[{"id":"e75ed9b136aac959","type":"inject","z":"9141c3fbcc7d9e2b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"a\":30,\"b\":40}","payloadType":"json","x":350,"y":3060,"wires":[["6b20bc688347d6cd"]]},{"id":"1e81cc1e8d565bad","type":"inject","z":"9141c3fbcc7d9e2b","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"a\":70,\"b\":20}","payloadType":"json","x":350,"y":3120,"wires":[["6b20bc688347d6cd"]]},{"id":"6b20bc688347d6cd","type":"ui_template","z":"9141c3fbcc7d9e2b","group":"f6124e036e2d2ffb","name":"","order":10,"width":0,"height":0,"format":"<div class=\"container\" id=\"{{'container_'+$id}}\" style=\"--variable_1:50; --variable_2:50\">\n    <div class=\"dot\"></div>\n</div>\n<style>\n    .container {\n        display: contents;\n    }\n\n    .dot {\n        width: calc(var(--variable_1) * 1%);\n        height: calc(var(--variable_2) * 1%);\n        background: red;\n    }\n</style>\n<script>\n    (function(scope) {\n        scope.$watch('msg', function(msg) {\n        if (msg) {\n        // Do something when msg arrives\n            document.getElementById(\"container_\"+scope.$id).style.setProperty('--variable_1', msg.payload.a);\n            document.getElementById(\"container_\"+scope.$id).style.setProperty('--variable_2', msg.payload.b);\n        }\n    });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":540,"y":3080,"wires":[[]]},{"id":"f6124e036e2d2ffb","type":"ui_group","name":"Default","tab":"34ab7d39f3e308fc","order":1,"disp":true,"width":"5","collapse":false,"className":""},{"id":"34ab7d39f3e308fc","type":"ui_tab","name":"Home","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
3

cant get working...

tempate

<script>
    (function(scope) {
        scope.$watch('msg', function(msg) {
        if (msg) {
        // Do something when msg arrives
            document.getElementById("container_"+scope.$id).style.setProperty('--lämpöpiste', msg.payload.a);
            document.getElementById("container_"+scope.$id).style.setProperty('--kylmäpiste', msg.payload.b);
        }
    });
})(scope);
</script>    
    <div class="container" id="{{'container_'+$id}}"  style="--kylmäpiste:1360; --lämpöpiste:360">
    <div class="txt" id="txt1">{{msg.s1}}</div>
    <div class="txt" id="txt2">{{msg.s2}}</div>
    <div class="txt" id="txt3">{{msg.s3}}</div> 
    <div class="txt" id="txt4">{{msg.s4}}</div>    
    <div class="txt" id="txt5">{{msg.s5}}</div> 
    <div class="txt" id="txt6">{{msg.s6}}</div>  
    <div class="txt" id="txt7">{{msg.s7}}</div> 
    <div class="txt" id="txt8">{{msg.s8}}</div> 
    <div class="ball" id="ball1"></div>
    <div class="ball" id="ball2"></div>
</div>

<style>
.ball{
    position:absolute;
	width: 40px;
	height: 50px;
	border-radius: 50%;
}
#ball1 {
	margin: 25px var(--kylmäpiste)px;
    background-color:blue
}
#ball2 {
	margin: 25px var(--lämpöpiste)px;
    background-color:red
}
.container{
  background-color: antiquewhite;
  background-image: url("/Pictures/tikkuvaaka.png");
  background-size: contain;
  background-repeat: no-repeat;
  position:relative;
  width:100%;
  height:100%;
  z-index:0;
}

.txt{
    color:red;
    font-weight:bold;
}

#txt1 {
    position: absolute;
    left: 225px;
    top: 120px;
    font-size:25px;
}
#txt2 {
    position: absolute;
    left: 395px;
    top: 120px;
    font-size:25px;
}
#txt3{
    position: absolute;
    left: 545px;
    top:120px;
    font-size:25px;
}
#txt4{
    position: absolute;
    left: 710px;
    top: 120px;
    font-size:25px;
}
#txt5{
    position: absolute;
    left: 870px;
    top: 120px;
    font-size:25px;
}
#txt6{
    position: absolute;
    left: 1020px;
    top: 120px;
    font-size:25px;
}
#txt7{
    position: absolute;
    left: 1180px;
    top: 120px;
    font-size:25px;
}
#txt8{
    position: absolute;
    left: 1360px;
    top: 120px;
    font-size:25px;
}
}   
</style>
4

In many cases, using the variable and combining it with the units do need calculation in css.
Use browser developer tools and search for computed styles for element to make sure it actually works.
This will be 0px margins in all directions

margin: 25px var(--kylmäpiste)px;

Use calc() to make it working

margin: 25px calc(var(--kylmäpiste) * 1px)
1 Like
5

Thanks!
Now works...

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.