NXT2WiFi: Using Webpage Sliders to Control Motors

PDF24    Send article as PDF   
This tutorial follows on from my previous NXT2WiFi Articles. In this example [robotc] is used to program the NXT. Using Webpage Sliders to Control LEGO Mindstorms NXT Motors with your [NXT2WiFi] is relatively easy. You will need to have the latest [NXT2WiFi] Custom Webserver Source Code in order to use Slide Controls.

NXT2WiFi Slder Motor Control

Whenever the user interacts with the webpage, the NXT2WIFI sends a special Direct Command to the NXT. The line in the RobotC source code below:  N2WreadWS(type, ID, state, value);, call reads in the data from the webpage. The value ‘type’ refers to what type of “Web Event’ occurred. 0 refers to a ‘Slider’, 1 refers to a ‘Button’, and 3 a ‘Checkbox’.

NXT2WiFi Slider Motor Control

The ‘ID‘ in the call refers to the identity of the widget. ‘State‘ refers to the boolean status, 1 or 0 with Buttons and Checkboxes. With ‘Sliders‘ this will always be ‘2‘. For sliders, the ‘Value‘ is the integer value for the slider position. The maximum and minimum values for the slider are set in the webpage.

RobotC Source Code:

 

The Webpage requires a little more effort to understand. The ‘Slider Widgets’ relies on Javascript code in the webpage’s header as well as standard HTML code for them to be displayed and sent data to the ‘NXT’ for processing. Among the Javascript code used several Javascript and CSS (syle sheet) libraries are needed:

  • jquery-ui.css
  • content.css
  • jquery-1.5.min.js
  • jquery-ui-1.8.21.custom.min.js
  • json2.min.js
  • lib.min.js

HTML Source Code:


<br />

 

  Motor A   Motor B   Motor C


 

The following Javascript code is use to set-up the ‘Slider”:

 

For each ‘Slider‘ you use, you will need to duplicate the above code, replacing the ‘*‘ with the a unique number for each slider. "scala_min": 0 is the minimum value yow wish to use for the slider. "scala_max": 100 is the maximum value yow wish to use for the slider.

The code snippet &nbsp; Motor A

displays the actual ‘Slider’ on the Webpage. You will need a copy of this code snippet for each ‘Slider’ you wish to use, remembering you need to include the unique number of the slider as well.

Download Tutorial Code: NXT2WiFiSliderMotorControl.zip

Previous Post

RobotC: NXT Beach Buggy Controlled via NXT2WiFi

This LEGO Mindstorms NXT Beach Buggy is controlled via an Internet Browser Interface using a LEGO Mindstorms NXT [NXT2WiFi]. This is my first project using one of Daniele Benedettelli's [NXT2WiFi]. Any Internet ... Read more

Next Post

Connecting the NXT2WiFi Webserver to a WLAN

The simplest way to connect to the NXT2WiFi Mini-Webserver Module is via an Ad-hoc Network, also called WiFi Direct network where devices communicate only peer to peer (P2P). There is ... Read more

Short URL: http://tinyurl.com/zmu2stq

Leave a Reply

Your email address will not be published. Required fields are marked *



Do NOT follow this link or you will be banned from the site!
error: Content is protected !!