Top right Notification box too small? (No Dynamic sizing?)

Hello.

I am creating a HTML message (seems to have better formatting control that way) and sending it to the Notification - Top Right.
The problem is that I have too much information and the box only has a very small dynamic resizing limits.
Example popup:

image

Here is the test flow I am experimenting with:

[{"id":"5c01d1484c60092d","type":"inject","z":"0928763894a95f05","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":430,"y":580,"wires":[["f09982bb6665715d"]]},{"id":"7d67b18647a92348","type":"ui_toast","z":"0928763894a95f05","position":"top right","displayTime":"30","highlight":"","sendall":true,"outputs":0,"ok":"OK","cancel":"","raw":true,"className":"","topic":"","name":"","x":820,"y":580,"wires":[]},{"id":"f09982bb6665715d","type":"function","z":"0928763894a95f05","name":"HTML Popup","func":"//Pretty typical payload\nmsg.payload.Timestamp = \"15:42:37Z 24-01-2022\";\nmsg.filter=\"CLRD\";\nmsg.payload.ICAO=\"896C3E\";\nmsg.payload.Rego=\"1229\";\nmsg.payload.Type=\"C17\";\nmsg.payload.Desc=\"BOEING C-17 Globemaster 3\";\nmsg.payload.ADSBEx=\"https://globe.adsbexchange.com/?icao=896C3E\";\nmsg.payload.Raw=\"AES:896C3E GES:D0 2 .40007A ! A1 R\\n\\n\\t/YQXE4YA.OC1/CLX 1542 220124 CZQX CLRNCE 633\\n\\tUAF1230 CLRD TO EGPK VIA NICSO\\n\\tRANDOM ROUTE\\n\\t48N050W 52N040W 55N030W 56N020W PIKIL SOVED\\n\\tFM NICSO/1632 MNTN F290 M079\\n\\tEND OF MESSAGE18B9\\n\\n\";\nmsg.sat=\"C-98W\";\n\n//Build the HTML for the popup\nmsg.payload = '<!DOCTYPE html><html><body>'+\n'<h3>Trigger: '+msg.filter+'</h3>'+\n'<p>ICAO: '+msg.payload.ICAO+'</p>'+\n'<p>Reg: '+msg.payload.Rego+'</p>'+\n'<p>Description: '+msg.payload.Desc+'</p>'+\n'<p>Msg source: '+msg.sat+'</p>'+\n'<a target=\"_blank\" href='+msg.payload.ADSBEx+'><font color=\"7e97fc\">Link to ADSBExchange</a>'+\n'</body></html>';\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":590,"y":580,"wires":[["7d67b18647a92348"]]}]

I have already pulled about as much as I can from the HTML.
Not sure how to make it smaller?

And yes, I use the center 'click Ok to close' notification, but need to save my use of that and use the 30 second box for more frequent notifications.

The top right is perfect, its just too small.

Thanks.
Ben.

Try this, add a ui template node with the following:

<style>
    md-toast .md-toast-content {
  min-height: 148px;
}
</style>

you will need to adjust the hight to your needs.

1 Like

Thanks for the nudge in some direction.
That indeed does make the popup (toast) bigger, but it also removes the original payload and so its blank:

I tried putting the template in the front and behind the function node with the data. I have tired changing the name of the payload, but the notification node only looks for msg.payload.

I have done probably 30 or 40 deploys trying different things, it just seems that the template has to remove the payload in order for it to do its job?

Here is how I currently have the flow:

[{"id":"5c01d1484c60092d","type":"inject","z":"0928763894a95f05","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":430,"y":580,"wires":[["f09982bb6665715d"]]},{"id":"7d67b18647a92348","type":"ui_toast","z":"0928763894a95f05","position":"top right","displayTime":"30","highlight":"","sendall":true,"outputs":0,"ok":"OK","cancel":"","raw":true,"className":"","topic":"","name":"","x":1000,"y":580,"wires":[]},{"id":"f09982bb6665715d","type":"function","z":"0928763894a95f05","name":"HTML Popup","func":"//Pretty typical payload\nmsg.payload.Timestamp = \"15:42:37Z 24-01-2022\";\nmsg.filter=\"CLRD\";\nmsg.payload.ICAO=\"896C3E\";\nmsg.payload.Rego=\"1229\";\nmsg.payload.Type=\"C17\";\nmsg.payload.Desc=\"BOEING C-17 Globemaster 3\";\nmsg.payload.ADSBEx=\"https://globe.adsbexchange.com/?icao=896C3E\";\nmsg.payload.Raw=\"AES:896C3E GES:D0 2 .40007A ! A1 R\\n\\n\\t/YQXE4YA.OC1/CLX 1542 220124 CZQX CLRNCE 633\\n\\tUAF1230 CLRD TO EGPK VIA NICSO\\n\\tRANDOM ROUTE\\n\\t48N050W 52N040W 55N030W 56N020W PIKIL SOVED\\n\\tFM NICSO/1632 MNTN F290 M079\\n\\tEND OF MESSAGE18B9\\n\\n\";\nmsg.sat=\"C-98W\";\n\n//Build the HTML for the popup\nmsg.payload = '<!DOCTYPE html><html><body>'+\n'<h3>Trigger: '+msg.filter+'</h3>'+\n'<p>ICAO: '+msg.payload.ICAO+'</p>'+\n'<p>Reg: '+msg.payload.Rego+'</p>'+\n'<p>Description: '+msg.payload.Desc+'</p>'+\n'<p>Msg source: '+msg.sat+'</p>'+\n'<a target=\"_blank\" href='+msg.payload.ADSBEx+'><font color=\"7e97fc\">Link to ADSBExchange</a>'+\n'<p>Raw msg: '+msg.payload.Raw+'</p>'+\n'</body></html>';\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":650,"y":580,"wires":[["d9b3a29be6385fe8"]]},{"id":"d9b3a29be6385fe8","type":"template","z":"0928763894a95f05","name":"toast","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<style>\n    md-toast .md-toast-content {\n  min-height: 480px;\n}\n</style>","output":"str","x":810,"y":580,"wires":[["7d67b18647a92348"]]}]

You used the tempate node when I said to use the ui-template node Try this:

[{"id":"ce736ec2afa4d4b2","type":"inject","z":"0e41a1e97169b7e1","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":240,"y":420,"wires":[["f4e69f075502f223"]]},{"id":"0576199eb26b6d3a","type":"ui_toast","z":"0e41a1e97169b7e1","position":"top right","displayTime":"30","highlight":"","sendall":true,"outputs":0,"ok":"OK","cancel":"","raw":true,"className":"","topic":"","name":"","x":660,"y":420,"wires":[]},{"id":"f4e69f075502f223","type":"function","z":"0e41a1e97169b7e1","name":"HTML Popup","func":"//Pretty typical payload\nmsg.payload.Timestamp = \"15:42:37Z 24-01-2022\";\nmsg.filter=\"CLRD\";\nmsg.payload.ICAO=\"896C3E\";\nmsg.payload.Rego=\"1229\";\nmsg.payload.Type=\"C17\";\nmsg.payload.Desc=\"BOEING C-17 Globemaster 3\";\nmsg.payload.ADSBEx=\"https://globe.adsbexchange.com/?icao=896C3E\";\nmsg.payload.Raw=\"AES:896C3E GES:D0 2 .40007A ! A1 R\\n\\n\\t/YQXE4YA.OC1/CLX 1542 220124 CZQX CLRNCE 633\\n\\tUAF1230 CLRD TO EGPK VIA NICSO\\n\\tRANDOM ROUTE\\n\\t48N050W 52N040W 55N030W 56N020W PIKIL SOVED\\n\\tFM NICSO/1632 MNTN F290 M079\\n\\tEND OF MESSAGE18B9\\n\\n\";\nmsg.sat=\"C-98W\";\n\n//Build the HTML for the popup\nmsg.payload = '<!DOCTYPE html><html><body>'+\n'<h3>Trigger: '+msg.filter+'</h3>'+\n'<p>ICAO: '+msg.payload.ICAO+'</p>'+\n'<p>Reg: '+msg.payload.Rego+'</p>'+\n'<p>Description: '+msg.payload.Desc+'</p>'+\n'<p>Msg source: '+msg.sat+'</p>'+\n'<a target=\"_blank\" href='+msg.payload.ADSBEx+'><font color=\"7e97fc\">Link to ADSBExchange</a>'+\n'</body></html>';\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":420,"y":420,"wires":[["0576199eb26b6d3a"]]},{"id":"94dedb8f9252855b","type":"ui_template","z":"0e41a1e97169b7e1","group":"1067c487a1fd6cfe","name":"","order":17,"width":0,"height":0,"format":"<style>\n    md-toast .md-toast-content {\n  min-height: 480px;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":570,"y":340,"wires":[[]]},{"id":"1067c487a1fd6cfe","type":"ui_group","name":"Dashboard","tab":"85b1ab4efdea8f73","order":1,"disp":false,"width":"24","collapse":false,"className":""},{"id":"85b1ab4efdea8f73","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

(I've also used the wrong template node :flushed:)

2 Likes

I am a noob (grin)
Your flow works great.
Thanks for spoon feeding me. I never would have figured out the solution.
Cheers.

1 Like

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