mobile.md

Mobile app

For every registered user, mDash serves custom Progressive Web App (PWA). This gives an ability to manage user's devices via a mobile phone. In order to enable PWA,

Choose "Mobile App" in the menu
Tick the "Enable mobile app" checkbox
Enter your email address and press on "Send invitation" button

That creates a built-in mobile app for the whole fleet of devices.

Customizing built-in app

The default app is customisable. It displays a list of devices shared with the particular mobile app customer, and for each device, displays a list of control widgets. The information displayed by each widget is based on a device shadow. Read-only widgets just display certain shadow values, and "actuator" widgets (swithes, buttons) modify shadow values. All device changes are caught via the websocket notifications, and displayed real-time.

The look and feel of the built-in app could be customised in by changing the var ui = { ... }; object in the PWA code. This is the default value:

  var ui = {
    title: 'My devices',
    // icon: 'fa-save',
    controls: [
      { path: 'on', type: 'toggle', title: 'LED on/off:' },
      { path: 'uptime', type: 'value', format: 'up:  %D', icon: 'fa-clock-o' },
    ],
  };

As you see, you could modify app's title, menu icon, and define an arbitrary number of control widgets. The description of the available widgets is below.

Toggle button

{ path: 'SHADOW_KEY', type: 'toggle', title: 'YOUR TITLE' }

Renders a toggle button with a label. A shadow key points to a boolean true/false.

Example:

var ui = {
  title: 'Cool app',
  controls: [
    { path: 'on', type: 'toggle', title: 'my light:' },
  ],
};

Value

{ path: 'SHADOW_KEY', type: 'value', icon: 'fa-save', format: '', title: 'hello' }

Renders shadow value. icon is optional, could be a font-awesome class, e.g. fa-save, or an inline base64-encoded icon data. The format could be:

%D expects a number of seconds, converts it to a Xd Xh Xm Xs.
%.Nf formats floating-point value, e.g. %.1f leaves one digits after comma.

Example:

var ui = {
  title: 'Cool app',
  controls: [
    { path: 'on', type: 'toggle', title: 'my light:' },
    { path: 'uptime', type: 'value', title: 'up:', icon: 'fa-clock-o', format: 'up: %D' },
  ],
};

Push button

{ path: 'SHADOW_KEY', type: 'button', icon: 'fa-save', title: 'hello' }

Renders a push button. icon is optional, could be a font-awesome class, e.g. fa-save, or an inline base64-encoded icon data. The shadow value must be an numeric value. Pushing a button will increment it and set incremented value in desired.

Example:

var ui = {
  title: 'Cool app',
  controls: [
    { path: 'on', type: 'toggle', title: 'my light:' },
    { path: 'uptime', type: 'value', title: 'up:', icon: 'fa-clock-o', format: 'up: %D' },
    { path: 'v1', type: 'button', title: 'start action', icon: 'fa-flash' },
  ],
};

Fully custom app

You can save your own code and totally modify the look and feel of the app. If you do so, you can always restore the built-in app by pressing the "Restore default app" button.

Mobile app API

mDash exports a different set of RESTful API to the mobile app. Mobile app API allows to get a list of devices, and render the UI according to their shadows.