How to apply style(css) to dashboard item when a message arrives

Dashboard
1

Hey i have the same Problem like @kiran,

I would like to create a Dashboard with ui_text Node.
This Dashboard is Displayed for End Customer, when they say for Example "Hello",
The Voice2Json should trigger a Message and send it at the ui_text node.

My first Question is: When this Message Arrive, is it possible to use a Fade in everytime it gets an new message?
And is there a Solution to use Google Fonts for this Text.

I know how to Style CSS, but where do i put my Styles or is it possible to modify the main css from the Dashboard.

Thanks in Advance

Mirco

2

While you can style the ui_text by using ui_template node to add a style to the head section of the page it would probably be easier to do it all in a ui_template node as that way you can create your own div with an id that you can style uniquely. You can apply google fonts if you wish but would require internet access to do so... (not that Google ever goes down these days does it :wink:

1 Like
3

Hey,

thanks for your fast reply.
I tried it out and this is my actual Flow.

[{"id":"b5438fd1.b1fd8","type":"tab","label":"Dashboard2","disabled":false,"info":""},{"id":"8eed9b00.06cce8","type":"inject","z":"b5438fd1.b1fd8","name":"Message","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"Welcome","payload":"Hello Customer!","payloadType":"str","x":290,"y":200,"wires":[["b8376880.31ae48"]]},{"id":"b8376880.31ae48","type":"ui_template","z":"b5438fd1.b1fd8","group":"e0fdbf51.c76bb","name":"","order":4,"width":0,"height":0,"format":"<!DOCTYPE html>\n<html>\n    <head>\n        <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\">\n        <link href=\"https://fonts.googleapis.com/css2?family=East+Sea+Dokdo&display=swap\" rel=\"stylesheet\">\n        <style>\n        #css p,div {\n            \n            font-family: 'East Sea Dokdo', cursive;\n            text-align: center;\n            font-size: 50px;\n    -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */\n            }\n            \n            @keyframes fadein {\n                from { opacity: 0; }\n                to   { opacity: 1; }\n            }\n            \n            /* Safari, Chrome and Opera > 12.1 */\n            @-webkit-keyframes fadein {\n                from { opacity: 0; }\n                to   { opacity: 1; }\n            }\n\n        </style>\n    </head>\n    <body>\n       \n         <p id=\"css\" ng-bind-html=\"msg.payload\"></p>\n    </body>\n</html>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":580,"y":320,"wires":[[]]},{"id":"2c3541f0.cf088e","type":"inject","z":"b5438fd1.b1fd8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":300,"y":340,"wires":[["b8376880.31ae48"]]},{"id":"e0fdbf51.c76bb","type":"ui_group","name":"Standard","tab":"c3455fe5.78f72","order":1,"disp":false,"width":"20","collapse":false},{"id":"c3455fe5.78f72","type":"ui_tab","name":"Dashboard Gruppe","icon":"dashboard","disabled":false,"hidden":false}]

I used the timestamp with intervall, so i can see if it Fade in every time if a new message arrive. It just does it when the Dashboard initialize. Anyone a soltution?

Thanks in Advance

Mirco

4

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