# How to rotate a text ui depending on payload

**URL:** https://discourse.nodered.org/t/how-to-rotate-a-text-ui-depending-on-payload/49723
**Category:** Dashboard
**Created:** [14 August 2021 19:43 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui-depending-on-payload/49723 "2021-08-14T19:43:21Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Jurg1505](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@Jurg1505](https://discourse.nodered.org/u/Jurg1505)
#### Post date: [14 August 2021 19:43 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui-depending-on-payload/49723/1 "2021-08-14T19:43:21Z")

</div>

Hello,  
I try to make a dashboard inclinometer to see if the camper is level.  
I have modified the [https://discourse.nodered.org/t/how-to-rotate-a-text-ui/25657](https://discourse.nodered.org/t/how-to-rotate-a-text-ui/25657)

```auto
[
    {
        "id": "9150c0c61a95662d",
        "type": "tab",
        "label": "Level",
        "disabled": false,
        "info": ""
    },
    {
        "id": "256234d4c9cfdd8e",
        "type": "ui_template",
        "z": "9150c0c61a95662d",
        "group": "2d39c4ed.6ee85c",
        "name": "vertical text",
        "order": 1,
        "width": "4",
        "height": "2",
        "format": "<style>\n.rotated {\n writing-mode: tb-rl;\n white-space: nowrap;\n font-weight:500;\n color:red;\n margin: 0;\n position: absolute;\n top: 50%;\n left: 50%;\n margin-right: -50%;\n transform: translate(-50%, -50%) rotate(85deg)\n}\n</style>\n\n<div id=\"blue-rotated\" class=\"rotated\">{{=============================}}</div>\n \n<script>\nfunction updateContainerStyle (el) {\n\tel = el.parentElement\n\tif (el && el.classList.contains('nr-dashboard-template')) {\n\t\tel.style.background = gray;\n\t}\n}\nupdateContainerStyle(document.getElementById(\"blue-rotated\"))\n</script>\n\n ",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "x": 510,
        "y": 280,
        "wires": [
            []
        ]
    },
    {
        "id": "fd346cfbd1056c80",
        "type": "ui_slider",
        "z": "9150c0c61a95662d",
        "name": "",
        "label": "slider",
        "tooltip": "",
        "group": "2d39c4ed.6ee85c",
        "order": 6,
        "width": 0,
        "height": 0,
        "passthru": false,
        "outs": "end",
        "topic": "topic",
        "topicType": "msg",
        "min": "80",
        "max": "100",
        "step": 1,
        "x": 240,
        "y": 280,
        "wires": [
            [
                "256234d4c9cfdd8e"
            ]
        ]
    },
    {
        "id": "2d39c4ed.6ee85c",
        "type": "ui_group",
        "name": "HOME",
        "tab": "4486cc51.18fc44",
        "order": 1,
        "disp": true,
        "width": 4,
        "collapse": false
    },
    {
        "id": "4486cc51.18fc44",
        "type": "ui_tab",
        "name": "TEST",
        "icon": "dashboard",
        "order": 3,
        "disabled": false,
        "hidden": false
    }
]

```

How to rotate the "text" with the payload ?

---

<div class="post-metadata">

### Author: ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)
#### Post date: [14 August 2021 21:44 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui-depending-on-payload/49723/2 "2021-08-14T21:44:23Z")

</div>

Try this...

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/6/16c904006c2003fc52347fb00eb4c606adeb7925.png)

```auto
[{"id":"61b6a155.7ef1b","type":"ui_template","z":"16797b6c72d40455","group":"b9d366f18ff7ae74","name":"vertical text","order":2,"width":4,"height":3,"format":"<style>\n.rotated {\n writing-mode: tb-rl;\n white-space: nowrap;\n font-weight:500;\n margin: 0;\n position: absolute;\n top: 50%;\n left: 50%;\n margin-right: -50%;\n transform: translate(-50%, -50%) rotate({{msg.level}})\n}\n</style>\n\n<div id=\"blue-rotated\" class=\"rotated\">--- {{msg.payload}} ° Deg ---</div>\n \n<script>\nfunction updateContainerStyle (el) {\n\tel = el.parentElement\n\tif (el && el.classList.contains('nr-dashboard-template')) {\n\t\tel.style.background = \"linear-gradient(90deg, rgba(76,184,254,1) 0%, rgba(21,128,219,1) 84%, rgba(39,125,215,1) 100%)\";\n\t}\n}\nupdateContainerStyle(document.getElementById(\"blue-rotated\"))\n</script>\n\n ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":710,"y":320,"wires":[[]]},{"id":"747d799ea09f51f4","type":"ui_slider","z":"16797b6c72d40455","name":"","label":"slider","tooltip":"","group":"b9d366f18ff7ae74","order":8,"width":0,"height":0,"passthru":true,"outs":"all","topic":"payload","topicType":"msg","min":"0","max":"360","step":1,"x":390,"y":320,"wires":[["3365af0f1e8990be"]]},{"id":"3365af0f1e8990be","type":"function","z":"16797b6c72d40455","name":"","func":"let deg = msg.payload;\nlet rot = (deg + \"deg\");\nmsg.level = rot;\nreturn msg;\n\n\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":540,"y":320,"wires":[["61b6a155.7ef1b"]]},{"id":"b9d366f18ff7ae74","type":"ui_group","name":"test","tab":"ffba43d73860d25d","order":1,"disp":true,"width":"6","collapse":false},{"id":"ffba43d73860d25d","type":"ui_tab","name":"Level","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

### Author: ![Jurg1505](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@Jurg1505](https://discourse.nodered.org/u/Jurg1505)
#### Post date: [15 August 2021 10:28 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui-depending-on-payload/49723/3 "2021-08-15T10:28:08Z")

</div>

Thanks, works great

Is it possible to set a image to the background instead of gradient color ?

---

<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: [15 August 2021 11:16 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui-depending-on-payload/49723/4 "2021-08-15T11:16:41Z")

</div>

> [@Jurg1505](#):
>
> Is it possible to set a image to the background instead of gradient color

Yes

change the template node code.

replace

```auto
el.style.background = "linear-gradient(90deg, rgba(76,184,254,1) 0%, rgba(21,128,219,1) 84%, rgba(39,125,215,1) 100%)";

```

with

```auto
el.style.backgroundImage = 'url("https://image.shutterstock.com/image-vector/abstract-background-modern-hipster-futuristic-600w-1441782806.jpg")';

```

result...  
 ![Sf367nZV41](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/d/ad830a42f3a9e83adc7d9f3fe9380d20537c7609.gif)

---

<div class="post-metadata">

### Author: ![Jurg1505](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@Jurg1505](https://discourse.nodered.org/u/Jurg1505)
#### Post date: [15 August 2021 20:28 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui-depending-on-payload/49723/5 "2021-08-15T20:28:02Z")

</div>

Thank you all very much.

---

<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: [14 September 2021 20:28 UTC](https://discourse.nodered.org/t/how-to-rotate-a-text-ui-depending-on-payload/49723/6 "2021-09-14T20:28:53Z")

</div>

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