How to rotate a text ui

Dashboard
1

Greetings everyone,

I would like to know whether the text ui in the dashboard able to rotate for -90° or not. Thanks in advance.

Best Regards.

This is my dashboard :

image
image310×526 16 KB

This is the example of rotated text dashboard found at the internet:

image
image374×600 50.4 KB

2

not sure if you are asking or showing us what you have done. If the former - I can't think of a way myself - if the latter then well done - please share !

3

Thank you for the reply.

No, I didn't. The second image is the one I found it on the internet, which I wish to achieve the same like it.

4

Can't say if it will be perfect but something like this can be done

image

[{"id":"61b6a155.7ef1b","type":"ui_template","z":"b633308d.4a91a","group":"2d39c4ed.6ee85c","name":"vertical text","order":1,"width":1,"height":"3","format":"<style>\n.rotated {\n    writing-mode: tb-rl;\n    transform: rotate(-180deg);\n    white-space: nowrap;\n    text-align: center;\n    margin: auto;\n    width: 50%;\n    font-weight:500;\n}\n</style>\n\n<div id=\"blue-rotated\" class=\"rotated\">ROTATED TEXT<div>\n    \n<script>\nfunction updateContainerStyle (el) {\n\tel = el.parentElement\n\tif (el && el.classList.contains('nr-dashboard-template')) {\n\t\tel.style.backgroundColor = \"#4c75db\";\n\t}\n}\nupdateContainerStyle(document.getElementById(\"blue-rotated\"))\n</script>\n\n    ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":510,"y":220,"wires":[[]]},{"id":"2d39c4ed.6ee85c","type":"ui_group","z":"","name":"HOME","tab":"4486cc51.18fc44","order":1,"disp":true,"width":4,"collapse":false},{"id":"4486cc51.18fc44","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
1 Like
5

Yes, this should help too. Thank you for helping so much :pray:t2: :pray:t2:

6

Oh there was bug in that template,
fix this line

<div id="blue-rotated" class="rotated">ROTATED TEXT</div>
1 Like
7

:rofl:Sorry for my stupid question, I had used your node and did for the rotation text. But I think the width is too large and which can be scroll, it there a way to reduce it?
My current dashboard :

image
image1368×535 111 KB

8

May you try this then

<style>
.rotated {
    writing-mode: tb-rl;
    transform: rotate(-180deg);
    white-space: nowrap;
    text-align: center;
    font-weight:500;
   
}
</style>

<div id="blue-rotated" class="rotated">{{msg.payload}}</div>
    
<script>
function updateContainerStyle (el) {
	el = el.parentElement
	if (el && el.classList.contains('nr-dashboard-template')) {
		el.style.background = "linear-gradient(90deg, rgba(76,184,254,1) 0%, rgba(21,128,219,1) 84%, rgba(39,125,215,1) 100%)";
		el.style.paddingTop = "36px";
        el.style.paddingLeft = "12px";
	}
}
updateContainerStyle(document.getElementById("blue-rotated"))
</script>

Edit:
It will be better to adjust the container padding.
But you then need to finetune the vaules to get text centered

1 Like
9

Now you made me to working on this. To get it work on dynamic content the previous thing also fails.
But there is better solution

[{"id":"61b6a155.7ef1b","type":"ui_template","z":"b633308d.4a91a","group":"2d39c4ed.6ee85c","name":"vertical text","order":1,"width":1,"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(-180deg)\n}\n</style>\n\n<div id=\"blue-rotated\" class=\"rotated\">{{msg.payload}}</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":390,"y":100,"wires":[[]]},{"id":"d78b0778.6cffa8","type":"inject","z":"b633308d.4a91a","name":"","topic":"","payload":"MEDIUM TEXT","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":160,"y":80,"wires":[["61b6a155.7ef1b"]]},{"id":"88f31749.bb5268","type":"inject","z":"b633308d.4a91a","name":"","topic":"","payload":"TEXT","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":150,"y":40,"wires":[["61b6a155.7ef1b"]]},{"id":"2e1ac32f.3fd39c","type":"inject","z":"b633308d.4a91a","name":"","topic":"","payload":"LONG LONG TEXT","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":170,"y":120,"wires":[["61b6a155.7ef1b"]]},{"id":"2d39c4ed.6ee85c","type":"ui_group","z":"","name":"HOME","tab":"4486cc51.18fc44","order":1,"disp":true,"width":4,"collapse":false},{"id":"4486cc51.18fc44","type":"ui_tab","z":"","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
2 Likes
10

Yes, now it works! Thank you so much for the effort.:innocent: :innocent:

11

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