Displaying html page on ui template

Dashboard
1

Hello everyone (please be nice this is my first time and I am very much a noob)

The problem I have seems like it must have an obvious answer, but I'm stumped.

I'm using a template node to write html which will change according to the msg.payload:-

<!Doctype Html>   
<Html>     
<Head>      
<style>  
.rotate{{payload}} {  
  -webkit-transform:rotate({{payload}}deg);  
  -moz-transform: rotate({{payload}}deg);  
  -ms-transform: rotate({{payload}}deg);  
  -o-transform: rotate({{payload}}deg);  
  transform: rotate({{payload}}deg);  
}  
</style>  
</Head>  
<Body>   
<img src="http://hailshamhistoricalsociety.co.uk/images/Museum-entrance.png" width="100" height="100" class="rotate{{payload}}"> 
</Body>     
</Html>

This is then sent to a ui template with default text (<div ng-bind-html="msg.payload"></div>)

The problem is that although the image shows up in the dashboard it doesn't rotate, but if I paste the output (captured by a default node) directly into the ui template it works fine!

Could anyone tell me what is happening?

Any help very gratefully recieved.

Kind regards

Paul

2

I would think the head and body tags are not required, As you are not rendering the full page. Dashboad has already used those tags. try its like this

[{"id":"4e43e998.a15018","type":"ui_template","z":"c74669a0.6a34f8","group":"2d4fe667.28f8ba","name":"","order":6,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":430,"y":2140,"wires":[[]]},{"id":"c9137879.569d7","type":"template","z":"c74669a0.6a34f8","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>  \n.rotate{{payload}} {  \n  -webkit-transform:rotate({{payload}}deg);  \n  -moz-transform: rotate({{payload}}deg);  \n  -ms-transform: rotate({{payload}}deg);  \n  -o-transform: rotate({{payload}}deg);  \n  transform: rotate({{payload}}deg);  \n}  \n</style>  \n<img src=\"http://hailshamhistoricalsociety.co.uk/images/Museum-entrance.png\" width=\"100\" height=\"100\" class=\"rotate{{payload}}\">","output":"str","x":250,"y":2140,"wires":[["4e43e998.a15018"]]},{"id":"65c626ad.2f448","type":"inject","z":"c74669a0.6a34f8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"90","payloadType":"num","x":100,"y":2140,"wires":[["c9137879.569d7"]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":1,"disp":true,"width":"6","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]
3

Nor the html tags

4

Hi there thankyou very much for all the replies however it still doesn't work.

As an aside I don't really understand the reply from E1cid, could you tell me what format the code is that you've written in / where its supposed to go?:wink:

Does anyone know if there is a specific reason why the html works fine if pasted into the ui template, but if sent from a normal template the image shows, but doesn't rotate?

What I would like to do is in some way just display an image on the dashboard that rotates by the number of degrees sent in the msg.payload. Should i possibly try a different method?

Again many thanks for your help

Paul

5

I have not added any code, I just removed your html, head and body tags from your html. Then in the template node I set it to msg.template.

From the image below you can see it rotated 90 degrees.

Screenshot_20210727-221449
Screenshot_20210727-2214491920Ă—1080 99.9 KB

That website is local to me, small world.

Post your example flow with the issue.

[edit] The reason it is not working direct in ui-template is you have used
{{payload}}
while in ui-template it is
{{msg.payload}}
eg.

[{"id":"cd47d5fb.f6e3e8","type":"inject","z":"c74669a0.6a34f8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"90","payloadType":"num","x":170,"y":2860,"wires":[["9c02d482.9d5358"]]},{"id":"9c02d482.9d5358","type":"ui_template","z":"c74669a0.6a34f8","group":"8b5cde76.edd58","name":"","order":5,"width":0,"height":0,"format":"<style>  \n.rotate{{msg.payload}} {  \n  -webkit-transform:rotate({{msg.payload}}deg);  \n  -moz-transform: rotate({{msg.payload}}deg);  \n  -ms-transform: rotate({{msg.payload}}deg);  \n  -o-transform: rotate({{msg.payload}}deg);  \n  transform: rotate({{msg.payload}}deg);  \n}  \n</style>  \n<img src=\"http://hailshamhistoricalsociety.co.uk/images/Museum-entrance.png\" width=\"100\" height=\"100\" class=\"rotate{{msg.payload}}\">","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":320,"y":2860,"wires":[[]]},{"id":"8b5cde76.edd58","type":"ui_group","name":"","tab":"8f03e639.85956","order":1,"disp":true,"width":"12","collapse":false},{"id":"8f03e639.85956","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
6

Thank you so much E1cid (I live in Hailsham btw) its worksssss!!

The key thing was changing the template payload to msg.template, but I have no idea why, could you possibly explain, I have trawled the internet. but can't find an explanation.

I actually used the below instead of the tab to achieve the same thing but in less lines:-

    
    <script>
        document.querySelector("#img").style.transform = "rotate({{payload}}deg)";
    </script>

Many thanks again. BTW if you would consider giving lessons, I would be very interested.

Kind regards

Paul

7

form the ui-template help

Using msg.template :
You can also define the template content via msg.template , so you can use external files for example.
Template will be reloaded on input if it has changed.
Code written in the Template field will be ignored when msg.template is present.

[edit] I'm from the Bourne, message me if you need further assistance, I'm not a IT expert but over the years have developed some knowledge.

1 Like
8

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