Scrolling text in ui-text? (ticker)

Dashboard
1

How can i get a smooth scrolling effect of a text in a widget , this is what i have done so far, not very smooth, and i am sure not right method.

there are some posts on vertical scrolling (add new line, and move the old one top kind of thing, but i am looking for horizontal scrolling) Here

scrolling

[{"id":"73f388d6e187c7a1","type":"ui_button","z":"18e2f3c66d61a086","name":"SCROLLING TEXT","group":"dd6a48a52cad3d74","order":2,"width":"18","height":1,"passthru":false,"label":"{{payload}}","tooltip":"","color":"black","bgcolor":"white","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":600,"y":660,"wires":[[]]},{"id":"a4015729d041b423","type":"change","z":"18e2f3c66d61a086","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"I WANT THIS TEXT TO SCROLL MORE SMOOTHLY","tot":"str"},{"t":"set","p":"length","pt":"msg","to":"$number($moment().format(\"ss\"))\t","tot":"jsonata"},{"t":"set","p":"payload","pt":"msg","to":"$substring(payload, 0, length)\t","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":380,"y":660,"wires":[["73f388d6e187c7a1"]]},{"id":"8ac5040f5a3b2f59","type":"inject","z":"18e2f3c66d61a086","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":190,"y":660,"wires":[["a4015729d041b423"]]},{"id":"dd6a48a52cad3d74","type":"ui_group","name":"HEADER","tab":"d90e028674af84a9","order":1,"disp":false,"width":"44","collapse":false,"className":""},{"id":"d90e028674af84a9","type":"ui_tab","name":"LIVE","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

EDIT:
there was some information here, looks like what i want, but i have absolutely no idea how to get this done with ui-template node. hope some one will be helping me out.

Scrolling ticker example

2

CSS animation should work

[{"id":"64c1a1ab0fd513a2","type":"inject","z":"1d319bc3005a51a2","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Then change to this if i want adifferent text","payloadType":"str","x":170,"y":780,"wires":[["3b323530d14f9ad7"]]},{"id":"3b323530d14f9ad7","type":"ui_template","z":"1d319bc3005a51a2","group":"2d4fe667.28f8ba","name":"","order":25,"width":0,"height":0,"format":"<style>\n.marquee {\n  margin: 0 auto;\n  white-space: nowrap;\n  overflow: hidden;\n  position: absolute;\n}\n\n.marquee span {\n  display: inline-block;\n  padding-left: 100%;\n  animation: marquee 5s linear infinite;\n}\n\n@keyframes marquee {\n  0% {\n    transform: translate(0, 0);\n  }\n  100% {\n    transform: translate(-100%, 0);\n  }\n}\n</style>\n<p class=\"marquee marquee\">\n  <span>{{msg.payload}}</span>\n</p>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":400,"y":720,"wires":[[]]},{"id":"8ac5040f5a3b2f59","type":"inject","z":"1d319bc3005a51a2","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"I want this text to scroll across the screen smoothly","payloadType":"str","x":170,"y":720,"wires":[["3b323530d14f9ad7"]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false,"className":""},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

Fountain of knowledge
[edit] You could also apply the css directly to the ui text,

1 Like
3

Yes, Perfect. Thank You

4

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