0

Using GPIO Pins with HTML

ThreeDegrees

November 06, 2021 09:59

None

Follow

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.

    <script>
        var bp900_gpio = new BSControlPort("BrightSign");
 
        bp900_gpio.oncontroldown = function(e){
		test.runondown();
        }
 
        bp900_gpio.oncontrolup = function(e){
		test.runonup();
        }
 
    </script>

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.

• Facebook
• Twitter
• LinkedIn

3 comments

• 0
  
  Monica Knutson November 06, 2021 16:37

   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!

  <script>
  // setup instance as BrightSign on-board GPIO
  var obj_gpio = new BSControlPort("BrightSign");
  
  // set as inputs vs outputs (also confirm in your presentation properties)
  obj_gpio.ConfigureAsInput(0);
  obj_gpio.ConfigureAsInput(1);
  obj_gpio.ConfigureAsInput(2);
  obj_gpio.ConfigureAsInput(3);
  obj_gpio.ConfigureAsInput(4);
  obj_gpio.ConfigureAsInput(5);
  obj_gpio.ConfigureAsInput(6);
  obj_gpio.ConfigureAsInput(7);
  
  // 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
         break;
       case 4:
         // do something else
         break;
       default:
         // do something if no matches
  
    } // End switch statement
  } // End function
  
  // Don't forget to close the connection
  void Close();
  </script>

• 0
  
  ThreeDegrees November 06, 2021 16:40

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

• 0
  
  Monica Knutson November 06, 2021 16:54

  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.