hi Can you use Angular Notifications
in red dashboard
I am interested in such
ngx-Notifications
Soft Notifications
How are they used with NR Dashboard ???
Those libraries are both angular 5+.
Dashboard is built on Angular.js (or v1 if you like)
In short, they won't work
1 Like
ok thanks to reply
this work in v1
how can used
I don't know the answer to your question, but there is a Notification node (ui-toast) in the node red dashboard that may do what you want.
but ui-toast
not Configurable Colour or style
I didn't say it would do what you want, I said it may do what you want. It may be possible to style it using css, but I don't know about that.
i want styling color and transparent background body and title color according to type of notification error, info,warn ....etc
error -> red
info -> green
warning -> orange
By a bit of an ugly hack, I add a <script> to the payload that sets the md-toast element class & use a head template to setup notification styles
Import and adjust the styles to your liking.
[{"id":"f4b7f5d47f78fcfc","type":"inject","z":"553814a2.1248ec","name":"","props":[{"p":"topic","vt":"str"},{"p":"payload"},{"p":"class","v":"notification-error","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"ERROR","payload":"An error happened","payloadType":"str","x":2400,"y":180,"wires":[["9cbdb5b6a574ddd9"]]},{"id":"07e9633b37b26775","type":"ui_toast","z":"553814a2.1248ec","position":"top right","displayTime":"5","highlight":"","sendall":true,"outputs":0,"ok":"OK","cancel":"","raw":true,"topic":"","name":"","x":2760,"y":240,"wires":[]},{"id":"887c3c77e479e52e","type":"ui_template","z":"553814a2.1248ec","group":"dce9e7a2.d20c78","name":"notification styles","order":10,"width":0,"height":0,"format":"<style>\n md-toast.notification-info {\n border-width: 10px;\n border-color: darkgreen;\n }\n md-toast.notification-info > h3 {\n background-color: green;\n }\n md-toast.notification-info > div {\n background: rgba(0, 255, 0, 0.5);\n color: darkgreen;\n }\n\n\n md-toast.notification-warn {\n border-width: 10px;\n border-color: darkorange;\n }\n md-toast.notification-warn > h3 {\n background-color: orange;\n }\n md-toast.notification-warn > div {\n background: rgba(245, 173, 66, 0.5);\n color: darkorange;\n }\n \n\n md-toast.notification-error {\n border-width: 10px;\n border-color: darkred;\n }\n md-toast.notification-error > h3 {\n background-color: red;\n }\n md-toast.notification-error > div {\n background: rgba(255, 0, 0, 0.5);\n color: darkred;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":2770,"y":200,"wires":[[]]},{"id":"9cbdb5b6a574ddd9","type":"function","z":"553814a2.1248ec","name":"add style","func":"var cls = msg.class || 'notification-info';\n\nmsg.payload = `${msg.payload}\n<span class=\"${cls}\" style=\"display: none\"></span>\n<script>\n \\$(\"div.md-toast-content span.${cls}\").closest(\"md-toast\").addClass(\"${cls}\");\n</script>\n`\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":2600,"y":220,"wires":[["07e9633b37b26775"]]},{"id":"372dc9715e13dbc4","type":"inject","z":"553814a2.1248ec","name":"","props":[{"p":"topic","vt":"str"},{"p":"payload"},{"p":"class","v":"notification-info","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"INFO","payload":"Some info","payloadType":"str","x":2360,"y":220,"wires":[["9cbdb5b6a574ddd9"]]},{"id":"274974bef8ef7e49","type":"inject","z":"553814a2.1248ec","name":"","props":[{"p":"topic","vt":"str"},{"p":"payload"},{"p":"class","v":"notification-warn","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"WARN","payload":"This is a warning","payloadType":"str","x":2390,"y":260,"wires":[["9cbdb5b6a574ddd9"]]},{"id":"dce9e7a2.d20c78","type":"ui_group","name":"Object detection","tab":"5132060d.4cde48","order":1,"disp":true,"width":"9","collapse":false},{"id":"5132060d.4cde48","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
@dceejay - this has gotta be one of those times where allowing users to enter a class would really simplify overriding styles. I think it could be really useful (even if it is an advanced feature)
1 Like
Happy to look at a PR
How the hell I managed myself into this situation 
2 Likes
thank man
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
