BBUI: Add autodetect platform, update documentation

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
+            */
+   }
+```