Sound notification

[Pieter3033]

What are you building with SQLPage ?

Built a temperature monitoring application designed for drivers of refrigerated trucks. The app interfaces with temperature probes to continuously monitor and display temperatures on a user-friendly front-end. It provides real-time alerts when temperatures fall below the minimum threshold or exceed the maximum value set by the client.

What is my problem ?

Visually indicating that there is a problem with the temperatures are not enough as drivers are constantly focusing on the road, I would like to add a sound notification if the temperatures meet a criteria.

However, SQLPage does not offer sound notifications.

What am I currently doing ?

I have created a custom handlebar to play a sound.

sound.handlebars

<audio 
id="notification_sound" 
src="sound.mp3" 
preload="auto">
</audio>

notify.js

document.addEventListener('DOMContentLoaded', function() {
    var sound = document.getElementById('notification_sound');
    
    if (sound) {
        sound.volume = 1; 

        // Attempt to play sound and catch any errors
        sound.play().catch(function(error) {
            console.log('Audio playback was prevented:', error);
        });
    }
});

I added the javascript file to my Shell parameters.
I added the mp3 file to the desired location.

After I simply called the component in SQLPage.

SELECT  'sound' AS component
WHERE value1 <> condition

It works as expected.
Note that the Shell component refreshes every 15 seconds to retrieve the latest information.

Describe the solution you'd like

It would be nice if the sound notification can be a component on it's own, which will allow you to call it when needed.

I am not sure how it works on your side, but it would also make sense to implement it in the alert component for example.

Additional context

Just screenshots of the app created.

[lovasoa]

I'm ambivalent about adding this by default to SQLPage. You can simplify your existing code by integrating the JavaScript directly in your component, since SQLPage v0.26:

https://sql.datapage.app/custom_components.sql

<script nonce="{{@csp_nonce}}">
// your javascript code here
</script>

[Pieter3033]

Hi Ophir, good to hear from you.
Thanks for the advice, it does make custom components easier to use.

I thought about it and understand why you have doubts in adding sound to SQLPage.

[Pieter3033]

Ooh and props to you and @alexisrc1, SQLPage is growing with popularity and will keep on excelling exponentially.

Keep it up gents 🔥