# Warp Speed Indicator - Changing background colour according to payload value. CSS only

**URL:** <https://discourse.nodered.org/t/warp-speed-indicator-changing-background-colour-according-to-payload-value-css-only/57256>\
**Category:** Share Your Projects\
**Tags:** node-red-dashboard\
**Created:** [26 January 2022 13:32 UTC](https://discourse.nodered.org/t/warp-speed-indicator-changing-background-colour-according-to-payload-value-css-only/57256 "2022-01-26T13:32:13Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [26 January 2022 13:32 UTC](https://discourse.nodered.org/t/warp-speed-indicator-changing-background-colour-according-to-payload-value-css-only/57256/1 "2022-01-26T13:32:13Z")

</div>

The background colour of this template smoothly transitions green - yellow - red as msg.payload varies from 0 to 10.  
Suggested use is as a weather station display, the colour reflecting the temperature. Would have to tweek it for the expected temperature range of course.  
I'd be glad of any comments / criticisms.  
 ![CPT2201261446-260x104](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/1/51493c31d716755ee6422779204884aac02bad35.gif)

Demo flow  
 ![Untitled 4](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/4/543ab9b5ad9efceb25b10c7c308585bb9d35ea87.jpeg)

```auto
[{"id":"6de21d982cbf28e2","type":"ui_template","z":"b728f1859db218ee","group":"10803925012d751a","name":"Warpometer","order":1,"width":"5","height":2,"format":"<div class=\"warpobackground\">\n <div class=\"warpolayer1\" style=\"--fudge: {{msg.payload}};\">\n <div class=\"warpolayer2\" style=\"--fudge: {{msg.payload}};\">\n <div class=\"warpocontent\">\n {{msg.topic}} {{(msg.payload || 0)}}\n </div>\n <div class=\"warpolabel\">\n <span>Sirius Cybernetics Corp</span>\n </div> \n </div>\n </div>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":450,"y":100,"wires":[[]]},{"id":"f80ccf1fdbd2712d","type":"ui_template","z":"b728f1859db218ee","group":"10803925012d751a","name":"CSS","order":2,"width":0,"height":0,"format":"<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Big Shoulders Display\">\n<style>\n.warpobackground{\n position: relative;\n height: 100%;\n width: 100%;\n background-color: rgb(30, 150, 0);\n}\n.warpolayer1, .warpolayer2 {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n}\n.warpolayer1 {\n background-color: rgba(255, 242, 0, calc((var(--fudge) - 2) / 3));\n}\n.warpolayer2 {\n background-color: rgba(255, 0, 0, calc((var(--fudge) - 5 ) / 3 ));\n box-sizing: border-box;\n border:4px solid black;\n}\n.warpocontent {\n position: absolute;\n top: 18%;\n left: 5%;\n font-family: \"Big Shoulders Display\", sans-serif;\n font-size: 2.8em;\n}\n.warpolabel {\n position: absolute;\n bottom: 2%;\n right: 2%;\n font-size: .8em;\n font-family: sans-serif;\n}\n</style>\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":430,"y":60,"wires":[[]]},{"id":"8469a1aec341cbbe","type":"function","z":"b728f1859db218ee","name":"Data","func":"var num = context.get('count') || 0.0;\nnum += 1;\nnum %= 100;\ncontext.set('count', num);\nmsg.payload = num/10;\nmsg.topic = \"Warp Factor\"\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":290,"y":100,"wires":[["6de21d982cbf28e2"]]},{"id":"0cdb447c29e82832","type":"inject","z":"b728f1859db218ee","name":"10/sec","props":[{"p":"payload"}],"repeat":"0.1","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":100,"wires":[["8469a1aec341cbbe"]]},{"id":"10803925012d751a","type":"ui_group","name":"Warpometer","tab":"f4cfd2456e490c21","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"f4cfd2456e490c21","type":"ui_tab","name":"Warpometer","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [26 January 2022 13:38 UTC](https://discourse.nodered.org/t/warp-speed-indicator-changing-background-colour-according-to-payload-value-css-only/57256/2 "2022-01-26T13:38:24Z")

</div>

My only criticism would be you need a [star scape background](https://codepen.io/sdphm80/pen/MxgQrE?css-preprocessor=less) moving at the appropriate rate 😛

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [26 January 2022 14:02 UTC](https://discourse.nodered.org/t/warp-speed-indicator-changing-background-colour-according-to-payload-value-css-only/57256/3 "2022-01-26T14:02:54Z")

</div>

Jeez. Node-red dashboard is widgets, not a viewport!

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [26 January 2022 16:04 UTC](https://discourse.nodered.org/t/warp-speed-indicator-changing-background-colour-according-to-payload-value-css-only/57256/4 "2022-01-26T16:04:22Z")

</div>

She cannae tak' ony mair captain !

---

<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:** [26 January 2022 17:24 UTC](https://discourse.nodered.org/t/warp-speed-indicator-changing-background-colour-according-to-payload-value-css-only/57256/5 "2022-01-26T17:24:56Z")

</div>

> [@jbudd](#):
>
> glad of any comments

You can add comments to the code. Specially for key points what makes this solution working. 🙂

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [26 January 2022 17:50 UTC](https://discourse.nodered.org/t/warp-speed-indicator-changing-background-colour-according-to-payload-value-css-only/57256/6 "2022-01-26T17:50:27Z")

</div>

Well...  
There are 3 divs superimposed.

The background colour is fixed.

2nd and 3rd layers have a background colour specified as rgba()

The background is gradually made visible by adjusting the alpha channel value calculated from the payload. If a\<=0 it's fully transparent, a\>=1, fully opaque.

The payload is made accessible to the CSS arithmetic by style = "--fudge: {{payload}}" in the html.  
There may be a better way to access the payload.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 January 2022 22:13 UTC](https://discourse.nodered.org/t/warp-speed-indicator-changing-background-colour-according-to-payload-value-css-only/57256/7 "2022-01-26T22:13:33Z")

</div>

Given that it is manufactured by Sirius Cybernetics, shouldn't it be improbability level rather than warp factor?

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [26 January 2022 22:23 UTC](https://discourse.nodered.org/t/warp-speed-indicator-changing-background-colour-according-to-payload-value-css-only/57256/8 "2022-01-26T22:23:57Z")

</div>

I do have a version that shows improbability but it hasn't counted up to infinity yet.

Share and Enjoy.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [27 January 2022 07:22 UTC](https://discourse.nodered.org/t/warp-speed-indicator-changing-background-colour-according-to-payload-value-css-only/57256/9 "2022-01-27T07:22:32Z")

</div>

> [@jbudd](#):
>
> it hasn't counted up to infinity yet.

You need to press the big red button.  
Was it red? I can't remember.