# Payload values to CSS variable

**URL:** <https://discourse.nodered.org/t/payload-values-to-css-variable/64980>\
**Category:** Dashboard\
**Created:** [12 July 2022 05:10 UTC](https://discourse.nodered.org/t/payload-values-to-css-variable/64980 "2022-07-12T05:10:15Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kundepuu](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@Kundepuu](https://discourse.nodered.org/u/Kundepuu)\
**Post date:** [12 July 2022 05:10 UTC](https://discourse.nodered.org/t/payload-values-to-css-variable/64980/1 "2022-07-12T05:10:15Z")

</div>

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

 ![tikkupallukat](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/5/15ad020e86e970b3ab43bd048581a46406e60f91.png)  
 ![pallukka1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/d/4d3bbbea0252632587f69ef904e55408edf74861.png)  
template node

```auto
<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 😉

```auto
: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
}

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [12 July 2022 06:04 UTC](https://discourse.nodered.org/t/payload-values-to-css-variable/64980/2 "2022-07-12T06:04:36Z")

</div>

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

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![Kundepuu](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@Kundepuu](https://discourse.nodered.org/u/Kundepuu)\
**Post date:** [12 July 2022 07:48 UTC](https://discourse.nodered.org/t/payload-values-to-css-variable/64980/3 "2022-07-12T07:48:45Z")

</div>

cant get working...

tempate

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [12 July 2022 08:00 UTC](https://discourse.nodered.org/t/payload-values-to-css-variable/64980/4 "2022-07-12T08:00:50Z")

</div>

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

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

```

Use `calc()` to make it working

```auto
margin: 25px calc(var(--kylmäpiste) * 1px)

```

---

<div class="post-metadata">

**Author:** ![Kundepuu](https://avatars.discourse-cdn.com/v4/letter/k/bcef8e/32.png) [@Kundepuu](https://discourse.nodered.org/u/Kundepuu)\
**Post date:** [12 July 2022 08:19 UTC](https://discourse.nodered.org/t/payload-values-to-css-variable/64980/5 "2022-07-12T08:19:01Z")

</div>

Thanks!  
Now works...

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [26 July 2022 08:19 UTC](https://discourse.nodered.org/t/payload-values-to-css-variable/64980/6 "2022-07-26T08:19:39Z")

</div>

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