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.
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
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>
:::
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
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
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>
big thanks!
Erwin
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
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..
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
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
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
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.
Thanks, I thought so.
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
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.
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?
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.
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.
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
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?
Never mind :) Was a UDP issue on my end
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.
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
Do you upload this HTML to the player its self? if so where. I'm a novice with brightsign.
Yes, you run the html from the player. How you do so depends on what you plan on running on the device. Are you using brightauthor to publish a presentation? If so, you can include an html widget inside one of your zones that points to the local assets on your computer (index.html, etc) that will run your html code.
It copies related files / folders over when you select the "home page" of the HTML site you are wanting to use. So the "page" you select is the "home page" that will open.
Cheers,
Monica
Thanks Monica,
I just deleted my post. I happened to just test it ha ha.
I didn't think it would be that simple !!!