Reproducing a D1 Dashboard using UIBUILDER?

Dashboard
21

You can simply set your browser to prefer dark mode. Or simply add class="dark" to the html tag in your index.html file.

You might need to prompt me again in a few weeks to improve the documentation - screen time very limited for a couple of weeks while I recover from a 2nd eye operation (in the end, had ot have both eyes operated on).

The easiest way to do that is to use an object as the input rather than an array. The input object's 1st level property names should appear in the resulting HTML. I think that is the case anyway, let me know if it isn't and I will fix in the next release.

Have you watched any of the videoa or used either the new quick start or the previous first walkthrough in the documentation? The new quick-start document may be of particular help

You can create far more complex layouts far easier than in D1 or D2 since you don't have to fight the frameworks. Of course, it does generally require a little HTML/CSS knowledge to do so. Some common example layouts are included in the documentation and example flows.

A dashboard style layout is one of the provided examples and I use it regularly myself. The trick is to use "semantic" style HTML and a couple of provided classes. You will find the standard <article> to be your special friend as the default CSS formats it as a card that can hold any content. You can put that in a container tag such as <main> or <section> and tag it with a class to turn the container into a grid (or, of course, create your own custom grid style class)

That isn't especially complex and is perfect for a grid styled container. I would provide an example but unfortunatley,, I'm recovering from operations on both eyes just now. If you prompt me again in a couple of weeks, I will knock something up to help if you like.

If using UIBUILDER, you can use the uib-tag node to help build that from Node-RED if you don't want to write any HTML directly. However, I would generally recommend that you simply write the HTML if it is static, the zero-code UIBUILDER nodes (rather like D1/D2) are great to quickly get going but eventually, you will generally find yourself simply wanting the simple code anyway (the big difference between uibuilder and D1/D2 is that its zero-code nodes result in actual native HTML which you can save into your static index.html file for ongoing amendments and best performance).

You can choose whether to send the audio as data from Node-RED to a uibuilder front-end (though take note of message sizes if your audio is long) or simply use the uib-save node to save an audio file from node-red to a static file that the front end can use.

To translate that to uibuilder, you simply need to use the uib-save node to output the TTS file if it is too large to be sent as a message. THe standard alarm.wav should simply be put into the same folder as your index.html file (uib-save simply makes it easier to know where the folder is - there is nothing special other than that).

Triggering the play automatically generally requires that the user has taken some kind of action on the page - check out the link that I shared, it should have the details.

I think I shared an example using video a long time ago - it is basically the same as audio.

22

I actually got the audio issue figured out shortly after I posted that, thanks to an AI summary during a google search. :grinning_face: I just didn't have a chance to post the solution yet.

I switched to the Vue3 template and then added...

<audio id="myAudioPlayer"></audio>

...to index.html. I then added...

// Listen for incoming messages from the Node-RED server
uibuilder.onChange('msg', function (msg) {
    // Get a reference to the audio player
    const audioPlayer = document.getElementById('myAudioPlayer');

    // Check if the message has a specific topic and a payload
    if (msg.topic === 'play' && msg.payload) {
        // Set the audio source to the URL from the payload
        audioPlayer.src = msg.payload;
        // Play the audio
        audioPlayer.play();
    } else if (msg.topic === 'stop') {
        // Stop and clear the audio source
        audioPlayer.pause();
        audioPlayer.src = '';
    }
});

...to index.js.

I uploaded Alarm.wav to the src folder (as you indicated) and send...

msg.payload = "Alarm.wav"
msg.topic = "play"

...when a downtime occurs. I then send the alarm description to elevenlabs.io using TTS-Ultimate, configured to save the files in a subdirectory of the src folder, parse the filename from the output and do the same thing I'm doing to play Alarm.wav. It's working really well!

I'll experiment tonight with sending the table data as an object instead of an array. Thanks again!

2 Likes