Display Pushbutton States

With a way for the page to ask the BASIC Stamp questions, it can ask for sensor states.  In this example, the page asks the BASIC Stamp about pushbutton states every 3 seconds and updates the states of radio buttons and text displaying the button states.  

If you only have two pushbuttons, you can borrow the stationing mode pushbutton connected to P14 and just temporarily leave P14 disconnected.  If you do that, make sure to rebuild the P14 pushbutton after you are done with this activity.

  • Build the pushbutton circuit shown here:

Reminder: If you followed the instructions in the Join Another Wi-Fi Network section, you’ll have to replace 192.168.4.1 with your IP address.

  • Go to your Wi-Fi module’s Files page at http://192.168.4.1/update-ffs.html.
  • Use the Choose file button to upload page-displays-buttons.html to your Wi-Fi module.
  • In your web browser, open 192.168.4.1/files/page-displays buttons.html.
  • If you haven’t already done so, connect your BOE + BS2 to power and your computer, and set PWR to 2.
  • Use your BASIC Stamp programming software to open Page Displays Buttons Host.bs2.
  • Page Displays Buttons Host.bs2.
  • Click the web page’s refresh button.
  • Verify that the it displays Value: 00 while no buttons are pressed (for at least 3 seconds).
  • Press and hold one of the pushbuttons on your Board of Education and wait for more than 3 seconds.
  • Verify that the page updates to display that the display updates to Value: 01 and the P1 radio button has a solid dot inside it.
  • Repeat this test for P3, and then for P1 and P3 at the same time.

 

Try This - Reduce the Sample Interval

To really speed things up, we’ll use WebSockets, but that’s in a later activity.  For the time being, we can speed it up a little without risking data loss due to unpredictable times it takes for HTTP requests to complete.    

  • Open page-displays-buttons.html with a text editor.
  • Change the 2000 to 1500 in this line : var myTimer = setInterval(getFromMcu, 2000).
  • Save the modified file and re-upload it to the Wi-Fi module.
  • Refresh 192.168.4.1/files/page-displays-buttons.html in your browser.

Note: it’s probably not a good idea to try to see how fast you can make this go, because it can end up making the application unresponsive.  We have websockets (introduced soon) to establish a communication line that’s much more streamlined than HTTP requests.

 

How it Works

The HTML part of the page is a couple radio buttons.  You might have seen radio buttons from online quizzes and questionnaires.  You normally click them to select your answer or reply.  In this example, the JavaScript will update their selected/not selected states according to whether the BASIC Stamp sends a 1 (pressed) or 0 (not pressed) for a given puhsbutton.  As with other elements, the radio buttons have IDs so that the JavaScript can act one when a given button is pressed on the Board of Education.

The var myTimer = setInterval(getFromMcu, 2000) is one way to tell a web page to repeatedly call a function.  There’s a lot more to this than meets the eye, but for now, just remember that this line causes the browser to automatically call the getFromMCU function every 2 seconds (2000 ms).  

The getFromMcu function, which now gets called every 2 seconds, calls the httpGet function.  Remember from the How it Works section in Page Requests Info from BS2 that the BASIC Stamp’s program has code that detects when a GET request comes through with a path of “/tpfm” (to page from microcontroller).  Remember also that the GET request will take an unknown amount of time and is designed to take care of that in the background while the main thread moves on, and that its second argument is the function to call when it’s done.    

This is the httpGet function, which sends the GET request and then eventually reaches a readyState or 4 and calls the callback function, which in your program is useMcuReply.  For more info on how this works, revisit the Page Requests Info from BS2 activity’s Advanced Topic section. 

The useMcuReply function is the one that gets called when the httpGet request is done and is really the only function that has changed since Page Requests Info from BS2.  The response parameter is going to contain a reply from the BASIC Stamp, which is running Page Displays Buttons Host.bs2.  That program replies with a string that contains the characters representing two binary digits.  The four different strings that might come through are “11”, “10”, “01”, and “00”.  The left digit is 1 if the P3 pushbutton is pressed, or 0 if it’s not.  Likewise, the right digit is 1 if the P1 pushbutton is pressed, and 0 if it’s not.  Keep in mind that’s what response contains.  

The first thing useMcuReply does is change the HTML paragraph with the value ID to something like Value = 01.  (That would be if the P1 button is pressed and held down.)  The two lines that do that are var = val = document.getElementById(“value”); and val.innerHTML = “Value: “ + response.  Assuming the response contained “01” that would cause Value = 01 to be displayed.

Next, a couple of if...else statements set the states of the radio buttons.  In the case of “01”, the response.charAt(0) gets the leftmost 0th character from the string.  Since that’s a “0”, the code sets the radio button with the P3 ID to false (unchecked or un-selected).  The second if condition is true since charAt(1), which is the second character in the string, really is “1”.  So it’ set’s the checked property in the radio button object with the P1 ID to true, causing it to appear to be checked or selected.

All the setup in Page Displays Buttons Host.bs2 is the same as it was in Val from Micro Host.bs2 from Page Requests Info from BS2.  When an HTTP GET request comes through requesting the resource from the “/tpfm” path, the Poll_Events subroutine stores a value in the id variable that matches getsId.  When that happens, the BASIC Stamp sets the program’s charCount variable to 2 since it’s going to send two characters (“11”, “10”, “01”, or “00”).  The SEROUT command between the Get_Request_Start and Get_Request_Ack subroutines is what sends those two characters.  BIN1 IN3 sends the character representation of the 1/0 stored in the IN3 variable, and BIN1 IN1 does the same for the IN1 variable.  For lots more information on how these variables automatically store pushbutton states, see Chapter 3 in What’s a Microcontroller.