How to rotate a text ui depending on payload

Dashboard
1

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

[
    {
        "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 ?

2

Try this...

image

[{"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}]
3 Likes
3

Thanks, works great

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

4

Yes

change the template node code.

replace

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

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

result...
Sf367nZV41

5

Thank you all very much.

6

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