webcontrols

webcontrols

factory webcontrols

Description:

  • Implements Javascript mechanisms to dialog with a connected object via a web page.

    • In order to use these functionnalities, use a construct of the form:
    <html>
 <head>
  <!-- page title and others head elements -->
   <link rel='stylesheet' href='https://line.gitlabpages.inria.fr/aide-group/esp32gpiocontrol/webcontrols.css'/>
   <script type='text/javascript' src='https://line.gitlabpages.inria.fr/aide-group/esp32gpiocontrol/webcontrols.js'></script>
 </head>
 <body style='width:800px'>
  <!-- page content -->
 </body>
</html>
    • To add a control button in this framewrok, simply introduce a construct of the form, adjusting the style at will:
    <div class='button-ba'>
  <button onclick='doButton(this)' style='background-color:yellow'>Do it</button>
  <!-- other buttons -->
</div>
    • Examples of usage are given here and there.

Members

(static) verbose

Description:

  • Defines if the curl call is verbose.

    • If true output a message in the <div id='console' ... before and after the call.

Defines if the curl call is verbose.

  • If true output a message in the <div id='console' ... before and after the call.

Methods

(static) addButtonOnOff(id, options, callback)

Description:

  • Creates a button which is alternatively on and off.

Parameters:
Name Type Description
id string

A unique ID to index the HTML element
options object

Optional options, defining the element on and off text and color, and optional CSS style directives:

{
  on_text: "ON",
  off_text: "OFF",
  on_color: "red",
  off_color: "lightgreen",
  style: ""
}
callback callback

A callback(on_else_off) function called when the button is clicked.

(static) addButtonRange(id, options, callback)

Description:

  • Creates a button to input a numerical value.

Parameters:
Name Type Description
id string

A unique ID to index the HTML element
options object

Optional options, defining the element value minimal, maximal and initial default value, the text input number of chars, the slider width in pixel, and optional CSS style directives:

{
  min: 0,
  max: 100,
  default: 50, 
  size: 4,
  width: 200,
  style: ""
}
callback callback

A callback(value) function called when the value is changed.

  • A global variable is also assigned with value, its name corresponds to the ID in lowercase with '_' for any non-letter, e.g., "My value" writes "my_value".

(static) addConsole(verbose)

Description:

  • Adds a textual console to print some log information.

    • It is inserted in the HTML using a construct of the form:
    <script>webcontrols.addConsole();</script>
    • The webcontrols.consoleLog(string) and webcontrols.consoleClear() functions allows to use the console.
Parameters:
Name Type Description
verbose boolean

If true the curl function outputs a message before and after the call.

(static) consoleLog(text)

Description:

  • Prints a message in the console.

Parameters:
Name Type Description
text string

The message string, without HTML tag, a newline is added.

(static) loadJSON(url, callbackopt)

Description:

  • Gets a remote JSON file.

Parameters:
Name Type Attributes Default Description
url string

The JSON file URL.
callback callback <optional>
 function(value){}

The callback that handles the JSON returned value, as a text.

(static) consoleClear()

Description:

  • Clears the text in the console.

(static) curl(urlopt, inputopt, methodopt, callbackopt) → {string}

Description:

  • Performs a Javascript HTTP request to dialog with a web service and returns response.

Parameters:
Name Type Attributes Default Description
url string <optional>
 ""

The HTTP URL.

  • An URL of the form @/$route stands for http[s]:/$hostname:$port/$route considering the current page address.
input string <optional>
 ""

The URL query or content:

  • GET method, the URL query, if not empty, it is appended to the URL adding and prefixed with a '?' char, thus input is empty.
  • POST method, the URL query, a string of the form name_1=encodeURIComponent(value_1)&name_2=encodeURIComponent(value_2), which will be URL encoded.
  • PUT method, the URL put content, a string of the form name_1=encodeURIComponent(value_1)&name_2=encodeURIComponent(value_2), usually encoded as a JSON string.
method string <optional>
 "GET"

Either GET, POST or PUT, i.e. the HTTP method.
callback callback <optional>
 function(value){}

The callback that handles the query return value.

  • Runs the callback(value: string, error: string) function with
    • value: the query answer value,
    • error: false if no error, else the http.status as a string.
  • If the server is not running, or if the query is invalid or not implemented, the callback value is the empty string, and information is given in the console of the browser.
Returns:

The response value, or an error message, if any.

Type
string