0

Send UDP from a HTML interface

I would like to create an HTML document that would have buttons for controlling an XD1230 via UDP.  The BrightSign would have a "home" screen and three videos.  From a web browser, on a separate PC, you could choose which video to play. What is the programming on the HTML side that would send the UDP command to the BrightSign player.

I have used UDP to communicate between BrightSign players but this is my first attempt to send UDP from a non BrightSign device.

23 comments

  • 1
    Avatar
    Lyndon

    You can use a custom device page to do this. I'm including a link to a sample one. You add it to brightauthor, under perferences, variables, custom device page. It shows a generic page with a list of any udp events in the projectd. There's a javascript call that retrieves the list of udp events used in the project. You can modify the html however you want and republish it to the player to get a custom look.

     

    You then log into http://unitipaddress:8008

     

    This assumes you enabled the local server on the unit, different from the diag server, when you set it up. 

     

    Example device page here: 

    https://www.brightsignnetwork.com/download/Tools/custom%20device%20page.zip

     

  • 0
    Avatar
    Shaun

    As mentioned above you can use a local device I have done this and it works well I have done it before.

    For BS Support is it possible to use bsp.js to do this remotely or does it need to be on the BS unit itself?

    It is possible to send UDP commands using PHP fairly easily.

    :::

    <?php
    $udpsend = "";
    $udp = "";

    if(isset($_POST['submit'])){
    $udpsend = $_POST['udp'];
    $sock = socket_create(AF_INET, SOCK_DGRAM, SOL_UDP);

    $msg = $udpsend;
    $len = strlen($udpsend);

    socket_sendto($sock, $msg, $len, 0, '192.168.1.68', 5000);
    socket_close($sock);

    }
    ?>

    <form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
    UDP to Send: <input type="text" name="udp" value="<?php echo $udp;?>">
    <input type="submit" name="submit" value="Submit">
    </form>

    :::

     

  • 0
    Avatar
    Lyndon

    What do you mean by do it remotely? Do you mean retrieve a list of udp events from the unit remotely? You can mkae a call like the following to the unit. This gets you a list of udp events in the current running presentation. 

    http://ipaddress:8008/GetUDPEvents

  • 1
    Avatar
    Erwin

    hi there,

    i will also try to make an custom website with udp buttons and control it with the brightsignApp. Is this possible? i dont want the standard-buttons on the right side of the app.

    thanks

  • 0
    Avatar
    Lyndon

     

    Yes, you can make a custom page for displaying the buttons. I've attached an example of a custom device page that shows buttons automatically. I've also included an example in the post of how you could call a single button. 

    https://www.brightsignnetwork.com/download/Tools/custom%20device%20page.zip

     


    If you want to create a single udp button, and call a specific UDP event, you'd use example like this below. In the example below, the udp event "button1" will be trigged by this call.


    <script src="js/jquery-1.10.2.min.js"></script>

    <script>

    myfunction();

    function myfunction() {
    $.post("http://localhost:8080/SendUDP", {key: "button1"});
    }
    </script>

     

  • 0
    Avatar
    Erwin

    big thanks!

    Erwin

  • 0
    Avatar
    Alfonso Descalzo

    Hi Lindon,

     

    What if I want to control some BS from one BS UI?

    I tried:

    <script>

    function myfunction() {
    $.post("http://172.0.1.123:8080/SendUDP", {key: "button1" , value: "1"});

     

    function myfunction2() {
    $.post("http://172.0.1.124:8080/SendUDP", {key: "button1" , value: "1"});
    }
    </script>

     

    but both buttons control both units

     

    Anyway to do it?

    Thks

  • 0
    Avatar
    Lyndon

     

    What's the value supposed to be? Yes, you can use the same command to reference a specific player ip address to send udp events to that player. 

     

    Your call looks like this:

    My example looked like this, no extra value:"1" at the end..

  • 0
    Avatar
    Robert Breuer

    Hello Lyndon,

    thank you for sharing your code

    https://www.brightsignnetwork.com/download/Tools/custom%20device%20page.zip

    Is there a chance to sort the output of the UDP Buttons in alphabetical order? I have to admit that I am not familiar with JavaScript.

    Best regards,

    Robert

  • 0
    Avatar
    Robert Breuer

    I have found this via google:

    https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

    The bsp.js needs a little modification an the output is sorted in alphabetical order.

    // alphabetical sort of label
    evlist.sort(function(a, b) {
    var labelA = a.label.toUpperCase(); // ignore upper and lowercase
    var labelB = b.label.toUpperCase(); // ignore upper and lowercase
    if (labelA < labelB) {
    return -1;
    }
    if (labelA > labelB) {
    return 1;
    }

    // namen müssen gleich sein
    return 0;
    });

    Best regards,

    Robert

     

  • 0
    Avatar
    Olaf Meyer

    Lyndon,

     

    Your first comment in reply to Lance refers to a link for a sample custom device page. Can you re post the link. I dont see it.

    Thank you

  • 0
    Avatar
    Lyndon

    I added it to the original post now.

    https://www.brightsignnetwork.com/download/Tools/custom%20device%20page.zip

     

    It was later in the thread that I added it. 

  • 0
    Avatar
    Olaf Meyer

    Thanks, I thought so.

  • 0
    Avatar
    Ashley Baker

    Hey Lyndon, i'm a complete novice when it comes to HTML and Javascript. I have the example in the links above working great, but to customise the specific buttons (Make them bigger / Different Colours) etc, is it something within the Javascript files to change or within the main custom web device. I can change backgrounds of the page and add titles etc, but i need more freedom in building a page.

     

    Kindest Regards,

     

    Ash 

  • 0
    Avatar
    Lyndon

    Ash, I'm new to html/js also, but you can change anything in the code that you wish. You can build your own buttons, use your own colors. You just have to send the appropriate udp command when you want that specific message sent. 

  • 0
    Avatar
    Ashley Baker

    Okay no problem. i just don't know where to add in the new code and in which line/section of the example. If you have a simpler template that would work with UDP that would be great to send over. Unless anyone else in the thread has one i can look at?

     

  • 0
    Avatar
    slucas

    Hi,

    I'm having a similar experience to Alfonso above. If I have multiple BrightSigns/IPs, any signal I send to one appears to broadcast to all of them.

    FE if my BrightSigns are 192.168.249.1 and 192.168.249.2, and I send a post with key:STOP to only http://192.168.249.1:8080/SendUDP, both BrightSigns stop. 

    So either both are receiving the signal, or IP1 is relaying the signal to IP2 (without even knowing what it's IP address is). 

    Any idea what is happening here? In your response above you said "Yes, you can use the same command to reference a specific player ip address to send udp events to that player. " -- so it sounds like it should work for a single player, but so far anything I try to send to a particular IP is triggering events on all IPs.

  • 0
    Avatar
    Lance Lander

    You should start by checking the UDP settings in the Presentation Properties of BrightAuthor. The UDP settings are under the Interactive tab. There you can set the specific IP address or all devices on the local subnet or all the devices connected via ethernet.

  • 0
    Avatar
    Alfonso Descalzo

    Yes slucas, as Lance says you have to look at "file/presentation properties/interactive/Specific IP address", and set the same IP of the player, for the UDP be sent to the same device

  • 0
    Avatar
    Stuart, Michael T

    Hi Lyndon,

    The page you linked to only has the example of showing all UDP events on the page. Didn't you have one that auto populated the buttons as well?

  • 0
    Avatar
    Stuart, Michael T

    Never mind :)  Was a UDP issue on my end

  • 0
    Avatar
    Jack

    Thanks for providing the template for building a web page that integrates with the UDP commands to control files on the BS player.

    What additional documentation in available? We are trying to build a custom device page to replace the generic buttons for playing video files on the player via the BrightSign mobile app.

    How are those UDP controls implemented in html? The template is helpful but more specific guidance or documentation is needed.  

    Support on this front is much appreciated, since UDP in html seems to be a pretty uncommon web development topic.

  • 0
    Avatar
    Chris

    Hi.. because of not being a programmer i do have troubles to get my data sent to my pc. I want to send my touchcoordinates (DRAG) from an HTML/JS Site on the Brightsign Player to my PC via UDP. I started a thread already ( https://brightsign.zendesk.com/hc/en-us/community/posts/360036106873-Send-Touch-to-PC-via-UDP?page=1#community_comment_360009122894 ) and stumbled over yours after a lot of research. Has anybody a solution for my issue? I would really appreciate any help in this case.

    Thanks in advance, Chris

Please sign in to leave a comment.