diff --git a/Support/bone101/UI/README.md b/Support/bone101/UI/README.md
index 9a9e03a4..91faa426 100644
--- a/Support/bone101/UI/README.md
+++ b/Support/bone101/UI/README.md
@@ -15,7 +15,7 @@ This UI can be run by visiting http://beagleboard.github.io/bone101/Support/bone
1. [Hardware](#hardware)
1. [UI](#ui)
1. [Events](#events)
-
+
## BBUI
This script renders the UI, reacts to user input and calls the BoneScript functions for hardware interaction. Including this script exposes 1 initialization function called 'bbui' and is built as 4 classes:
* Canvas: fetches the canvas elements from the HTML page and expose them to the rest of BBUI.
@@ -25,7 +25,7 @@ This script renders the UI, reacts to user input and calls the BoneScript functi
## IIFE
- BBUI components is wraped in an Immediately Invoked Function Expression (IIFE).
-
+
*Why?* : An IIFE removes variables from the global scope. This helps prevent variables and function declarations from living longer than expected in the global scope, which also helps avoid variable collisions.
*Why?* : The code is minified and bundled into a single file for convienient access. An IIFE protects BBUI components against collisions of variables and many global variables by providing variable scope for each class.
@@ -65,6 +65,73 @@ It is used to add additional canvases beyond the initial 9 with new z-index valu
_example_: Canvas.add(pin.id + ' Graph', 10); 'creates a canvas for specific pin'
+## Hardware
+
+The Hardware provides methods to modify, fetch and expose the hardware status using BoneScript socket calls.
+
+```javascript
+○ var Hardware = (function () {
+ var hw;
+ /*
+ * hardware methods
+ * are defined here
+ */
+ })
+```
+```javascript
+• function init()
+```
+The init function defines all the methods used to make the bonescript calls , we will go for each one explaining its functionality.
+
+```javascript
+○ Hardware.add = function(name , category , subCategory)
+```
+Use the add function to make a bonescript call to intialize a pin to its corresponding category.
+
+**arguments**:
+
+- name: pin object name.
+- category: category of the pin Object('analog','digital','led',...).
+- subCategory: sub-category of the pin ('input','output', ...).
+
+```javascript
+○ Hardware.read = function(pin , callback)
+```
+Use the read function to make a bonescript call to return the state of the pin inside a callback function.
+
+**arguments**:
+
+- pin: corresponding pin object.
+- callback: function called upon execution: callback(error,value).
+
+```javascript
+○ Hardware.write = function(pin , callback)
+```
+Use the write function to make a bonescript call to write the state of the pin to the board.
+
+**arguments**:
+
+- pin: corresponding pin object.
+- callback: function called upon execution.
+
+```javascript
+○ Hardware.rcInit = function(pin)
+```
+Use the rcInit function to make a bonescript call to call the roboticscape intialize method and other RC peripheral enable methods(servo,motor) corresponding to the category of the pins.
+
+**arguments**:
+
+- pin: corresponding pin object.
+
+```javascript
+○ Hardware.rcWrite = function(pin)
+```
+Use the rcWrite function to make a bonescript call to call the roboticscape methods to write the UI state to RC peripherals (servo,motor).
+
+**arguments**:
+
+- pin: corresponding pin object.
+
## UI
The UI provides the user interface drawing and interaction logic, and initializes global positions of BBUI elements. Each element position is related mainly to two variables **`BBposX`** and **`BBposY`**.
@@ -79,7 +146,7 @@ The init function defines all the methods used to draw different elements/object
```javascript
ui.button = (function() {
var button = {};
- /*
+ /*
* button objects
* are defined here
*/
@@ -105,22 +172,22 @@ Use to highlight digital menu buttons (input, output, pwm).
if you want to keep the button highlighted, set highlightButton = true.
```javascript
-○ button.highlightPlus = function()
+○ button.highlightPlus = function(flag)
```
-Use to highlight the zoom-in button, color will change to red.
+Used to highlight the zoom-in button, if flag is true, color will change from black to red, otherwise changes from red to black.
```javascript
-○ button.highlightMinus = function()
+○ button.highlightMinus = function(flag)
```
-Use to highlight the zoom-out button, color will change to red.
+Use to highlight the zoom-out button, if flag is true, color will change from black to red, otherwise changes from red to black.
```javascript
-○ button.highlightStop = function()
+○ button.highlightStop = function(flag)
```
-Use to highlight the stop button, color will change to red.
+Use to highlight the stop button, if flag is true, color will change from black to red, otherwise changes from red to black.
```javascript
-○ button.highlightPlay = function()
+○ button.highlightPlay = function(flag)
```
-Use to highlight the play button, color will change to red.
+Use to highlight the play button, if flag is true, color will change from black to red, otherwise changes from red to black.
```javascript
○ button.draw = function(b, context, highlight, x, y)
```
@@ -133,19 +200,6 @@ Use the draw function to draw the main buttons and probes. make `highlight = tru
- highlight: true for highlighting (using `offColor`).
- x,y: only defined for custom buttons positions.
-
-_PS. each of the following two functions draws a layer, one for the on switch and another for off switch. The two layers overlap each other to make the on/off switch._
-
-```javascript
-○ button.on = function(probe)
-```
-Use button.on to draw on-switch, takes probe as an argument to match probe position and colors.
-
-```javascript
-○ button.off = function(probe)
-```
-Use button.off to draw off-switch, takes probe as an argument to match probe position and colors.
-
```javascript
○ button.createOutput = function()
```
@@ -180,3 +234,203 @@ the method returns the deleted button object.
```
Use this method to return buttons object.
+```javascript
+ui.bar = (function () {
+ var bar = {};
+ /*
+ * slider bar objects
+ * are defined here
+ */
+ })
+```
+`ui.bar`, an IIFE provides slider bars used in BBUI with different attributes; starting and ending position of the sliderbar, the color, the text on the side of the slider bar , type(pwm , motor , servo ..etc) and the category of each slider bar.
+ `ui.bar` wraps the functions used to draw and interact with slider bars.
+
+ ```javascript
+ ○ bar.create = function(probe,pin)
+ ```
+ **arguments**:
+ - probe: the probe object corresponding to which slider is to be created.
+ - pin: the pin to be attached to the slider bar.
+
+ Use this method to create a single slider bar corresponding to the pin and probe, the attributes of the sliderbar are determined by the properties of the pin and probe, the properties of pin corresponding to a bar can be accessed using `bars[i].pin`, the category of the slider bar is decided by the pin category, the pin.freq variable is changed corresponding to the slider bar movement
+
+ ```javascript
+ ○ bar.createRGBBar = function(probe,pin)
+ ```
+ **arguments**:
+ - probe: the probe object corresponding to which slider is to be created.
+ - pin: the pin to be attached to the slider bar.
+
+ Use this method to create a group of three slider bars having similar properties as the above single slider bar, but overrides the color properties of the pin/probe, the rgb slider bars will have red , green and blue colors which will change the properties pin.red , pin.blue , pin. green (between 0 and 1) respectively.
+
+ ```javascript
+ ○ bar.draw = function(index)
+ ```
+ **arguments**:
+ - index: the index of the bar to be drawn in bars[] (default = len - 1).
+
+ Use this method to draw the last created slider bar / draw a slider bar with the corresponding index.
+
+ ```javascript
+ ○ bar.off = function()
+ ```
+
+ changes the `move` state of each bar to off , ie . the bars does not respond to slider changes.
+
+ ```javascript
+ ○ bar.move = function(event)
+ ```
+
+ This method moves the sliderBar to the event location and changes the pin.freq(or pin.red ,pin. green , pin.blue) value and changes the text on the side of the sliderBar.
+
+ ```javascript
+ ○ bar.sliderTest = function(event)
+ ```
+
+ This method returns "slider" when event coordinates are inside a black square slider.
+
+ ```javascript
+ ○ bar.test = function(event)
+ ```
+
+ This method returns "slider" when event coordinates are inside the entire sliderbar.
+
+ ```javascript
+ ui.onOff = (function () {
+ var onOff = {};
+ /*
+ * onOff button objects
+ * are defined here
+ */
+ })
+ ```
+`ui.onOff`, an IIFE provides onOff buttons for probes used in BBUI with different attributes; starting and ending position of the button, the color, the text inside the buttons.
+`ui.onOff` wraps the functions used to draw and interact with On-Off buttons.
+
+```javascript
+○ onOff.create = function(probe,pin)
+```
+**arguments**:
+- probe: the probe object corresponding to which button is to be created.
+- pin: the pin to be attached to the buttons.
+
+Use this method to create a onOff button attached to the pin and probe, the attributes of the buttons are determined by the properties of the pin and probe, the properties of pin corresponding to a onOff button can be accessed using `onoffs[i].pin`,the pin.state variable is changed corresponding to the OnOff button state.
+
+```javascript
+○ onOff.on = function(index)
+```
+**arguments**:
+- index: the index of the button to be drawn in onOffs[] (default = len - 1)s.
+
+Use this method to draw a onOff button attached to the pin with default On position, this also changes the pin.state value to 1.
+
+```javascript
+○ onOff.off = function(index)
+```
+**arguments**:
+- index: the index of the button to be drawn in onOffs[] (default = len - 1)s.
+
+Use this method to draw a onOff button attached to the pin with default Off position, this also changes the pin.state value to 0.
+
+_PS. each of the following two functions draws a layer, one for the on switch and another for off switch. The two layers overlap each other to make the on/off switch._
+```javascript
+○ onOff.test = function(event)
+```
+
+This method returns "probeon" or "probeoff" when event coordinates are inside the on or off regions of the button respectively.
+
+`ui.pin`, an IIFE provides pin defintions for boards used in BBUI with different attributes: name, position, size, category of pins corresponding to each board.
+`ui.pin` wraps the functions used to highlight and interact with the board pins.
+
+```javascript
+○ pin.highlight = function(button, digitalHighlight)
+```
+**arguments**:
+- button: the selected or hovered button object.
+- digitalHighlight: boolean value whether the selected button is a digital button.
+
+Use this method to highlight the pins corresponding to a selected button category, the highlight color is determined accorinding to the board color.
+
+```javascript
+○ pin.getVoltage = function(pn)
+```
+**arguments**:
+- pin: the selected pin object for which the voltage state is to be read and plotted to the graph.
+
+Use this method to retrieve the current voltage status of the corresponding pin , the Hardware.read() method and graph plotting methods are called by this method
+
+
+```javascript
+○ pin.blink = function(pn)
+```
+**arguments**:
+- pin: the selected pin object for which the state is to be written and is to be reflected to the UI.
+
+Use this method to write a corresponding value to the pin , also if the pin supports blinking(w.r.t BBUI : leds,DigitalOutputs), the pin is set to blinking state with the corresponding frequency, this method also updates the UI elements(draws blinking leds) according to the change made.
+
+```javascript
+○ pin.test = function(event)
+```
+
+This method returns the pin object corresponding to the event coordinates.
+
+`ui.wire`, an IIFE provides different wires used in BBUI corresponding to join each category of buttons with the corresponding pins and to the graph.
+`ui.wire` wraps the different styles of wire drawing functions corresonding to each category of buttons.
+
+```javascript
+ ui.probe = (function() {
+ var probe = {};
+ /*
+ * probe objects
+ * are defined here
+ */
+ })
+```
+`ui.probe`, an IIFE provides the probes used in BBUI with different attributes; each element inserted into the UI is termed as a probe.
+`ui.probe` wraps the functions used to draw and interact with UI probes.
+
+
+```javascript
+○ probe.push = function(button)
+```
+This function pushes the button to the probes variable, which defines the button to be used as a probe in future.
+
+**arguments**:
+- button: button object to be pushed.
+
+```javascript
+○ probe.dragButton= function(event)
+```
+This function draws the button around the event coordinates while it is being dragged into the container.
+
+```javascript
+○ probe.clearDrag= function(event)
+```
+This function clears the duplicate buttons while dragging it to the container.
+
+```javascript
+○ probe.selectText= function()
+```
+This function display the user prompt to select the pin corresponding to the button and also the warning for the selected category of button(if any).
+
+```javascript
+○ probe.addTest= function(event)
+```
+This function returns "hoverpin" when the button is dragged into the container(white rectangle) or "cancelled" otherwise.
+
+## Events
+
+The Events provides the logic to enable/disable event listeners in the UI, new events are defined with a type and a function in the events variable.eg :
+```javascript
+○ var events = {
+ 'clickExit': {
+ event: 'click',
+ func: clickExit
+ },
+ /*
+ * rest events
+ * are descrbed here
+ */
+ }
+```
diff --git a/Support/bone101/UI/bbui.js b/Support/bone101/UI/bbui.js
index 10401b88..b5e5de30 100644
--- a/Support/bone101/UI/bbui.js
+++ b/Support/bone101/UI/bbui.js
@@ -123,10 +123,10 @@ var Hardware = (function () {
callback(null, 0);
} else if (pin.category == 'thumbwheel')
hw.b.analogRead('P1_19', callback);
- else if (pin.category == 'digital') {
+ else if (pin.category == 'digital' || pin.category == 'motor') {
if (pin.subType == 'input')
hw.b.digitalRead(pin.name, callback);
- if (pin.subType == 'pwm')
+ if (pin.subType == 'pwm' || pin.category == 'motor')
callback(null, 3.3 * pin.freq);
} else
callback(null, 3.3 * pin.state);
@@ -179,6 +179,18 @@ var Hardware = (function () {
}
}
+ function getPlatform(callback) {
+ try {
+ if (!hw.b) {
+ hw.b = require('bonescript');
+ }
+ } catch (ex) {
+ console.log(ex);
+ }
+ if (!hw.b) return;
+ hw.b.getPlatform(callback)
+ }
+
return {
'get': function () {
if (!hw) {
@@ -186,6 +198,7 @@ var Hardware = (function () {
}
return hw;
},
+ 'getPlatform': getPlatform,
'add': add,
'write': write,
'read': read,
@@ -2218,7 +2231,7 @@ var UI = (function () {
};
pin.getVoltage = function (pin) {
- if (pin.category == 'rgbled' || pin.category == 'servo' || pin.category == 'motor') return;
+ if (pin.category == 'rgbled' || pin.category == 'servo') return;
if (!pin.getVoltage)
pin.getVoltage = setInterval(function () {
Hardware.read(pin, ongetVoltage)
@@ -2430,13 +2443,13 @@ var UI = (function () {
ctx.fillStyle = 'rgba(255,255,255,0.25)';
ctx.fillRect(0, 0, width - 10, height);
ctx.fillStyle = 'rgba(0,102,204,0.85)';
- ctx.fillRect(width / 3.75, height / 4, width / 1.8, height / 2.85);
+ ctx.fillRect(width / 3.75, height / 4, width / 1.8, height / 2.65);
ctx.fillStyle = color;
ctx.font = '12pt Arial';
ctx.fillText('X', width / 2 + 250, height / 4 + 25);
ctx.fillStyle = 'white';
ctx.font = '14pt Arial';
- ctx.fillText('Welcome to the beaglebone user interface!', width / 3.75 + 20, height / 4 + 30);
+ ctx.fillText('Welcome to the BeagleBone User Interface!', width / 3.75 + 20, height / 4 + 30);
ctx.font = '10pt Arial';
ctx.fillText('This interface allows you to play with analog to digital converters,', width / 3.75 + 25, height / 4 + 55);
ctx.fillText('digital pins (including inputs, outputs, and pwms), and the user leds', width / 3.75 + 25, height / 4 + 70);
@@ -2445,7 +2458,9 @@ var UI = (function () {
ctx.fillText('the white rectangle and select a pin. The input button requires both an', width / 3.75 + 25, height / 4 + 115);
ctx.fillText('input and an output. The graph to the right will display the voltage', width / 3.75 + 25, height / 4 + 130);
ctx.fillText('of the corresponding pin. Use the zoom in or zoom out to alter the graph,', width / 3.75 + 25, height / 4 + 145);
- ctx.fillText('stop to stop recording voltages, and play again to reset. Enjoy!', width / 3.75 + 25, height / 4 + 160);
+ ctx.fillText('stop to stop recording voltages, and play again to reset.', width / 3.75 + 25, height / 4 + 160);
+ ctx.fillText('Use the board select buttons at the bottom to select platform. Enjoy!', width / 3.75 + 25, height / 4 + 175);
+
};
loop.clear();
@@ -2466,6 +2481,7 @@ var UI = (function () {
beagleBone.src = base_url + '/static/images/' + board + '.png';
beagleBone.onload();
}
+ base.baseBoard = 'beaglebone';
return base;
})();
@@ -3168,8 +3184,10 @@ var Events = (function () {
probe.graphColors.splice(0, 1);
e.ui.wire.rgbled(pin, probe);
e.ui.onOff.create(probe, pin);
+ pin.prevPoint = [e.ui.xyAxis.properties.zeroX + 100 * (e.ui.xyAxis.properties.currTime - 0.3), e.ui.xyAxis.properties.zeroY - 160];
e.ui.bar.create(probe, pin);
e.ui.bar.draw();
+ e.ui.pin.getVoltage(pin);
Hardware.RCInit(pin);
listen(true, 'hoverButton')
}
diff --git a/Support/bone101/UI/index.html b/Support/bone101/UI/index.html
index 06afc673..8d255135 100644
--- a/Support/bone101/UI/index.html
+++ b/Support/bone101/UI/index.html
@@ -44,3 +44,23 @@
+