User Interface

This page describes everthing about the core/ui.js file, which provides functions and classes for basic stuff related to the overall user interface.

The aliases

First of all, we use some aliases for common Node selector functions, for example:

let page = get ('#myPage');
let button = getIn (page, '#myButton');
let images = getAll (page, 'img');

Will attach the DOM #myPage to the variable page, get #myButton inside page and get all DOM with the HTML img tag in page.

Notificatios and logs

To show notifications and log a message do:

UI ['notify'].send (string_);
UI ['notify'].log (string_);

Both functions are from the class notify, the basics about it:

class notify()

The notification class is used to show notifications and keep logs.

notify.logs

All logs are stored here

notify.messages

All messages are stored here

notify.log(message)

Show a notification in the user interface, will also add it to notify#logs.

Arguments

  • message (string()) – The notification message.

notify.send(message)

Show a notification in the user interface, will also add it to notify#logs.

Arguments

  • message (string()) – The notification message.

Blockly and the user interface

The bridge between Google’s Blockly and BIPES happens inside the workspace class. This class also handles the target device (e.g. ESP32).

class workspace()

The user interface integration of the Blockly workspace, therefore, will handle XML loading and generation, the target device and its specification and the styling for connection status with the devices.

workspace.devices

gets devinfo/devinfo.json data as an object.

workspace.freeboard

store loaded freeboard JSON, generated by freeboard#serialize().

workspace.change()

Switch the workspace to DOM #device_selector selected value if available in workspace#devices. Will update the dropdown in the Blockly.Blocks['pinout'] block, change the toolbox and set webserial#packetSize and webserial#speed with the target device info.

workspace.changeTo(device)

Change the device in the dropdown DOM #device_selector and call workspace#change()

Arguments

  • device (string()) – device that will the ‘#device_selector’ be changed to, if available in workspace#devices.

workspace.connectClick()

Switch for DOM #connectButton to connect or disconnect on click.

workspace.connecting()

Styling for when the platform is trying to connect to a device.

workspace.loadFreeboard(JSON_)

Load freeboard from JSON.

Arguments

  • JSON_ (string()) – serialized freeboard JSON.

workspace.loadXML()

Load XML, called after clicking the button DOM #loadButton. Will check if there is a file, if can be parsed as XML and if contains unique variables already in the Blockly workspace.

workspace.readWorkspace(xml, prettyText)

Read freeboard, device, timestamp and origin from BIPES generated XML. if XML </workspace> not available, will set to the first device in workspace#devices

Arguments

  • xml (string()) – BIPES generated XML.

  • prettyText (boolean()) – If the XML contains indentation and line breaks (human readable).

workspace.receiving()

Switch on styling for connected to device.

workspace.run()

Run program from Blockly workspace or stop current running program, called when clicking DOM #runButton. If not connection, will try to connect then run.

workspace.runAbort()

Switch off styling for connected to device.

workspace.saveXML(uid)

Generate XML through Blockly and download it.

Arguments

  • uid (string()) – optional uid to download a specific project, if none, the current will be downloaded.

workspace.writeWorkspace(xml, prettyText)

Write device, timestamp and origin to Blockly generated XML.

Arguments

  • xml (string()) – Blockly generated XML.

  • prettyText (boolean()) – If the XML contains indentation and line breaks (human readable).

The progress bar

A progress bar is shown in many operations inside BIPES and is handled with the progress class. A simple example on how to use it is shown below:

let i=150
UI ['progress'].start(i);
let loading = setInterval(()=>{
  UI ['progress'].remain(i);
  i = i-1;
  if(i<=0) {
         clearInterval(loading);
        UI ['progress'].end (150);
  }
}, 100)
class progress()

Show a progress bar under the DOM .top-menu.

progress.dom

DOM node element for the progress bar.

progress.end()

Hides notify#dom and reset the style.

progress.load(loaded, total)

Sets the progress bar width by the loaded and total to load, e.g. loaded=256, total=1024 equals 75%.

Arguments

  • loaded (number()) – How much has been loaded.

  • total (number()) – Total to load.

progress.remain(len_)

Sets the progress bar width by the remaining value to load, e.g. 256 from 1024 equals 75%.

Arguments

  • len_ (number()) – How much more to load.

progress.start(len_)

Unhide notify#dom. and sets the (estimated) loading length.

Arguments

  • len_ (number()) – The (estimated) loading length.

The panels

The account, notification and channel panels are all inherited from the panel class.

class panel(button_, panel_)

Attach a panel that contains a button to shows and hides it.

Arguments

  • button_ (string()) – the query selector for the button.

  • panel_ (string()) – the query selector for the panel.

panel.showPanel()

Show or hide the panel.

class account(button_, panel_)

The account panel to manage projects and settings.

account.deleteProject(uid)

Delete project.

Arguments

  • uid (string()) – UID of the project to be deleted.

account.getProjectName_(uid)

Get project name from XML stored in localStorage.

Arguments

  • uid (string()) – UID of the project.

account.importProject(xml)

Import a project to localStorage.

Arguments

  • xml (string()) – XML of the project to be imported.

account.listProject(uid, timestamp)

List project in the account panel.

Arguments

  • uid (string()) – UID of the project

  • timestamp (string()) – Timestamp for the project

account.newProject()

Create new project and open it.

account.openLastEdited()

Open last edited project

account.openProject(uid)

Open project.

Arguments

  • uid (string()) – UID of the project to be opened.

account.restoreProjects(projects_)

Check if project listed in localStorage’s item bipes_projects is stored in localStorage and then list it in the account panel. If not, the item is discarted.

Arguments

  • projects_ (Object()) – parsed JSON from localStorage’s item bipes_projects.

account.setCurrentProjectName_(str_)

Set current project name from block to the account panel.

Arguments

  • str_ (string()) – Project name to be displayed in the account panle.

class channelPanel(button_, panel_)

The channel panel to connect and switch protocols.

Responsive interface

The panels change position based on the screen size by a rule in the ui/style.css. To hide the panels when the user taps outside it, the x and y coordinates are mapped and recalculated on window.onresize().

class responsive()

Handles how the panel are disposed in the user interface.

responsive.panels

The dead area for each panel in ‘em’, if the users taps out, the panel will close

responsive.hidePanels(ev)

Hide panels if the users taps outside the dead zone.

XML Http Requests

This functions handles both XMLHttpRequest as a local search inside index_offline.html when running without a server.

xhrGET(filename, responsetype, onsuccess, onfail)

Do a XML Http request, if in offline mode, will try to find the data inside the index.html file.

Arguments

  • filename (string()) – The name of the file

  • responsetype (string()) – The types of responses, ‘document’, ‘text’ or ‘’ (empty).

  • onsuccess (function()) – Callback function when the the XMLHttpRequest succeed.

  • onfail (function()) – Callback function when the the XMLHttpRequest fails.