New post
0

How to show a picture based on a variable

Avatar
Eugen Weber
None
Follow

Hello everyone,

I'm working in a small science center and we use Bright Signs on several different screens. Now I would like to give our guides the possibility to show pictures and videos on the screens during a tour. These picture vary based on the theme of the tour and also the guide (everyone has his/her favorite). To select what to show they will have a html file with buttons. The buttons will then send the command to the desired Player/Screen.

Now I was able to set up the players and use UDP to show a picture. However, I have to define a special UDP command for every picture which is not really dynamic and every additional media means to re-do everything. Now I'm wondering if there is a way to use variables to make it more flexible?

Imagine I have 3 pictures. With the command "1" I show picture 1, with "2" I show 2 and so on. But that means for 100 pictures I would have to define 100 commands. Would it be possible to show the picture based on a variable? Meaning I send "57.png" through a variable (e.g. 'pic2show') and it would show the specific picture? So if I have a new one called "newpic.png" I could simply set the variable 'pic2show' to "newpic.png" and would have to add that only in the html file?

Or is there a simpler way I don't see atm?

Date Votes

3 comments

  • 0
    Avatar
    Eugen Weber

    Ok I found the solution myself :) I'm using an "On Demand" widget and can add the content in there. I can then send a simple UDP Packet with the key and it will show. That works fine for me.

    Now the real problem is to send the UDP Packets from a local html file. A lot of the tips and examples are outdated, so I'm still in the dark there :( I know I have to use node.js, but atm I'm lost on how to set this up. Is there an easy solution? All I need is a html page (locally) that allows me to press a button that sends a UDP packet to my player.

  • 0
    Avatar
    Bright Scripters

    You could send UDP from HTML page using javascript.

    Something like the below. This code has not been tested :)

    // Import the dgram module
    const dgram = require('dgram');

    // Create a socket
    const client = dgram.createSocket('udp4');

    // Message to be sent
    const message = Buffer.from('Hello, UDP server!');

    // Define the server address and port
    const serverAddress = '127.0.0.1';
    const serverPort = 41234;

    // Send the message
    client.send(message, serverPort, serverAddress, (err) => {
      if (err) {
        console.error('Error sending message:', err);
      } else {
        console.log('Message sent');
      }
      // Close the client
      client.close();
    });

  • 0
    Avatar
    Eugen Weber

    Thanks, but it didn't work :(

    This is so frustrating as it's working through a UDP Terminal and I also managed to program a python script that sends the packet and the player is doing exactly what I want him to do. But to achieve that with HTML seems to need me to learn node.js and develop a frontend server application just so I can send a UDP command :(

    It's also not helping that all the online examples and help I find is multiple years old and all the screenshot look different and some of the options aren't even there. I have the feeling I'm sooooo close to a solution but still don't find it :(

    Not giving up yet though :)

Please sign in to leave a comment.