Alert / Toast on Worldmap (with timeout)

General
1

I wonder, if it would be possible to show a "toast" popup message on top of WorldMap ?
Would be nice, if it would support:

  • multi line,
  • choosable (at least background-) colour,
  • timeout (seconds),
  • set to be user-closable only.

Optionally:

  • Settable to close it on 1 browser window only, so it would auto-close on all other clients.
  • Would be able to handle multiple alerts, scrollable
    • so they do not overlap each other,
    • nor spam the whole screen vertically.
  • Maybe prioritise (critical / alert / info / debug)

ChatGPT gave me some "ready to use" solution, which (of course) has nothing to do with reality, because WorldMap module has no such functions as:

msg.payload = {
    command: {
        alert: "GPS not found!"
    }
};

nor :

msg.payload = {
    command: {
        javascript: `
(function() { ...
2

Well if you embed worldmap inside your own web page as an iframe (eg using dashboard2) then you have control of the rest of the page and can probably popup whatever you like.

3

Or UIBUILDER of course! Where you really do get full control. :wink:

4

I don't think I mentioned his name three times did I ?

5

No need: I lurk, therefore I am!

6

< OFF >

I have always followed your progress about DashBoard2.
Also watched the how-to-first-steps video last week.
This is an amazing piece of module, and one day I'll have to start learning it, how to use it,
but at first view it is too complicated for my basic knowledge about html + css.

@TotallyInformation it is not Your fault, but mine because I'm not a web-developer and seeing the "default template" made me realise: it's an overkill for what I need and that learning process about the whole thing would probably take month if not years to understand how everything works.

I'm also afraid that it would make an extra overhead to the browser, (more memory + CPU consumption), which is not acceptable on a POS PC.
(Must be optimised to max 50ms respond time for the user, sometimes on a non-cooled, limited freq 6th gen CPU with 2GB RAM + Win7 running at 45+ °C environment.)

7

If there is no ready-to-use toast solution, I'll probably have to:

  • change the code of worldmap.js itself
  • and upload as a separate NPM to fit my needs.

(That's what ChatGPT suggested too.)

8

No problem, that post wasn't aimed at anyone in particular. I just like to remind people that not everything is necessarily best in Dashboard and that there is a viable alternative for those who want it.

No, the opposite is true. UIBUILDER driven web sites use significantly LESS resource than Dashboard particularly in the browser while delivering a lot more flexibility. This page has some details.

Admittedly, I've not done direct comparison tests on the server-end but most use of UIBUILDER on the server has minimal impact. The new Markweb features may have a little more impact but only if you have many users using the web site; this is because conversion from Markdown to HTML happens on the server not in the browser. But for standard uibuilder nodes, there is some startup effort that adds a bunch of routes and endpoints to Node-RED's ExpressJS web server but, again, unless you have a lot of end-users hitting your resulting pages rapidly, the overheads should be minimal.

Dashboard 2, on the other hand, has to do a lot of data delivery to the front-end in order for anything to happen at all. In the browser, you have to load multiple heavy-duty libraries and the code as well as data for everything is passed from Node-RED to each client. Not a criticism of D2 by the way, just an observation.

Anyway, not a problem, you need to use whatever is best for you.

9

I may be able to add some form of dialog as the basics are there for the help panel. But will be a while until I get some time and probably won’t easily styled apart from rewriting the css file

10

Is it also difficult to allow to run "command": {"js" : ...} ?
The map would run that JavaScript code, so we could do anything as we want.

11

I've just found out:

Leaflet.Notifications
Try Demo << here.

12

Wow ... I've just realised the full potential of Leaflet by these plugins!

One I like the most is: Leaflet.Control.Custom > Demo
It seems anything is possible with this.
But this is cool too: Leaflet.Dialog

@dceejay Question:

  • is it possible to directly operate with Leaflet ?
  • something like: "leaflet": {...} ?
  • or it would make no sense, because those plugins would need to be imported first anyway?
13

No way am I going to allow random commands to run. Security nightmare

14

< OFF >

Huhhh... I do not know what to say to that.

  • I do not see any difference to, what you have suggested at the first place.
    (wrapping WM to Dashboard and running ANY kind of JS / HTML etc insice DashB2)
  • If you are afraid of "extra problem support" that these unallowed scripts would cause, simply deny any help on those.
  • Why would be a Leaflet pluging a problem, if millions of other people use it daily bases ?

We are the programmers, who write code into those nodes. So basically You are saying:

  • WE ARE the security risk.
15
  1. correct. If you write a page to wrap it you can do what you want (and own any security issues)
  2. correct. I’m avoiding them by saying no up front.
  3. it’s not the plugins it’s the suggestion to allow full access to js

And re plugins. I have multiple built in already. Yes I could build in more. Just needs to be done in a controlled manner.