Developing your own WebBrick site
It helps to know a little bit about JavaScript, but you can make a pretty good user interface of your own design with only a little knowledge. The correct way to do this is with the WebBrick Javascript API. This provides some standard functions you can use in your code that work across different browsers and that make interacting with WebBrick easy. You can get the WebBrickAPI.html Version 1.0 here. It includes some examples of how you can interact with WebBrick from JavaScript.
Cut and paste the API code into your web page interface. You will then be able to use simple JavaScript commands to control your brick.
To execute a program, use the DoExecute function. You can call this from a button. The syntax is DoExecute(program,task). For example:
<FORM> <INPUT TYPE=BUTTON VALUE="Run Program 1" ONCLICK="DoExecute(1,0)"> </FORM>
To check the sensor values or to see if the motors are running etc, you use the DoPoll command. The syntax is DoPoll(source,number,on_reading), where on_reading is some JavaScript code you want to execute when the brick responds. This code can also use the special variable Reading, which will contain the result of the response from the brick. Currently, DoPoll can only read positive values. For example:
<FORM NAME="read_sensor"> <INPUT TYPE=TEXT VALUE="No reading yet" NAME="sensor_reading"> <INPUT TYPE=BUTTON VALUE="Get Sensor Reading" ONCLICK="DoPoll(9,1,'document.read_sensor.sensor_reading.value=Reading')"> </FORM>
The following table has a list of codes you can use in DoPoll
Use DoSet to set the values of variables. The syntax is DoSet(variable,value). Variables are a little tricky to use. The brick code uses the variables, and you need to determine which ones are safe for you to access from JavaScript. The code on the brick may be using the variables for its own purposes, so be careful when you set them. Here is an example that lets the user type in a value, and that value is set in variable 10.
<FORM NAME="setvar"> <INPUT TYPE=TEXT VALUE=0 name="varvalue"> <INPUT TYPE=BUTTON VALUE="Set Variable 10" ONCLICK="DoSet(10,'document.setvar.varvalue.value')"> </FORM>
// Slot 1: Run motor A backward for 5 seconds
m_Spirit.SelectPrgm(0);
m_Spirit.BeginOfTask(0);
m_Spirit.Off("motor1motor2");
m_Spirit.SetRwd("motor0");
m_Spirit.On("motor0");
m_Spirit.Wait(2,50);
m_Spirit.Off("motor0");
m_Spirit.EndOfTask();
// Slot 2: Run motor A forward for 5 seconds
m_Spirit.SelectPrgm(1);
m_Spirit.BeginOfTask(0);
m_Spirit.Off("motor1motor2");
m_Spirit.SetFwd("motor0");
m_Spirit.On("motor0");
m_Spirit.Wait(2,50);
m_Spirit.Off("motor0");
m_Spirit.EndOfTask();
// Slot 3: Run motor B backward for 5 seconds
m_Spirit.SelectPrgm(2);
m_Spirit.BeginOfTask(0);
m_Spirit.Off("motor0motor2");
m_Spirit.SetRwd("motor1");
m_Spirit.On("motor1");
m_Spirit.Wait(2,50);
m_Spirit.Off("motor1");
m_Spirit.EndOfTask();
// Slot 4: Run motor B forward for 5 seconds
m_Spirit.SelectPrgm(3);
m_Spirit.BeginOfTask(0);
m_Spirit.Off("motor0motor2");
m_Spirit.SetFwd("motor1");
m_Spirit.On("motor1");
m_Spirit.Wait(2,50);
m_Spirit.Off("motor1");
m_Spirit.EndOfTask();
// Slot 5: Beep, then run motor C forward for 50 seconds
m_Spirit.SelectPrgm(4);
m_Spirit.BeginOfTask(0);
m_Spirit.PlaySystemSound(1);
m_Spirit.Off("01");
m_Spirit.SetFwd("2");
m_Spirit.On("2");
m_Spirit.Wait(2,500);
m_Spirit.Off("2");
m_Spirit.EndOfTask();