Using GPIO Pins with HTML

Hello Everyone,

I guess I need to preface this by saying that my coding knowledge is fairly poor - I've managed to get most of what I want by hacking bits together but I'm struggling to translate GPIO button presses into something I can use with the HTML5.

At the moment I've used some of the Demo code from - https://brightsign.atlassian.net/wiki/spaces/DOC/pages/370672359/BSControlPort 

I'm now successfully getting inputs and triggering things based on the code below - but every GPIO pin triggers either the oncontroldown or oncontrolup - I'd like each pin to trigger something different if possible.

var bp900_gpio = new BSControlPort("BrightSign");

bp900_gpio.oncontroldown = function(e){

bp900_gpio.oncontrolup = function(e){


But I'm now struggling to figure out how to run things based on a specific button press, ideally I'd like to be able to use 5-6 different buttons to trigger various JS on the page. 

Would anyone be kind enough to point me in the right direction in terms of how to trigger specific things based on different pins being triggered.


  • 0
    Monica Knutson

     You're close!  :o)  

    What you need to do is set some configurations in your script and then interpret the event.  You will need to look up how your device maps the "buttons" to the "pins" here.  For example, the XDxx34 series maps them in this way:

    • Button 0 - pin 3
    • Button 1 - pin 4
    • Button 2 - pin 5
    • Button 3 - pin 6
    • Button 4 - pin 9
    • Button 5 - pin 10
    • Button 6 - pin 11
    • Button 7 - pin 12

    Some of the javascript is based on the BrightScript on the device (roControlPort), using roControlUp and roControlDown as a basis.  You may need to read up a little on what is passed in the functions here.  ControlDown is the input goes from high to low.  ControlUp is low to high.

    I added a line for debugging so you can see what is contained in the event (e.code) whether it is the PIN number or the BUTTON number.  Then, adjust as needed.  This should give you a start.  Follow up when you've had a chance to test this.  I did not test!

    // setup instance as BrightSign on-board GPIO
    var obj_gpio = new BSControlPort("BrightSign");

    // set as inputs vs outputs (also confirm in your presentation properties)

    // Listen for button down (do something similar for oncontrolup)
    obj_gpio.oncontroldown = function(e) {
    // Get event data
    whichInput = e.code;
    console.log('###### BUTTON PRESSED EVENT CODE: ' + whichInput + '######'); // For debugging

    // Start switch statement - multi-conditional based upon variable
    switch (whichInput) {
    case 3:
    // do something
    case 4:
    // do something else
    // do something if no matches

    } // End switch statement
    } // End function

    // Don't forget to close the connection
    void Close();

  • 0

    Ohhhhh - thanks so much for the comprehensive reply, this is exactly what I needed !

  • 0
    Monica Knutson

    Give it a go... like I said, it's untested.  I added the console log info on what the e.code should output.  I could not find anything in the documentation to say what "code" should contain.  So we're flying blind a little on that.

    If the switch statement doesn't work like above... you may just need to loop through and check every pin with an IF/THEN statement using something like this:

    // Initialize variables
    var chkbtn0
    var chkbtn1
    var chkbtn2
    var chkbtn3
    var chkbtn4
    var chkbtn5
    var chkbtn6
    var chkbtn7

    // This code below would be inside the oncontroldown function:
    chkbtn0 = GetPinValue(0);
    chkbtn1 = GetPinValue(1);
    chkbtn2 = GetPinValue(2);
    chkbtn3 = GetPinValue(3);
    chkbtn4 = GetPinValue(4);
    chkbtn5 = GetPinValue(5);
    chkbtn6 = GetPinValue(6);
    chkbtn7 = GetPinValue(7);

    if (chkbtn0 == true) {
    // do something
    return; // exits function
    boolean GetPinValue(in unsigned long Button)

    Returns the output of the specified button.

Please sign in to leave a comment.