Skip to content

050. The UI

Jump to bottom
reivaxy edited this page Sep 1, 2018 · 1 revision

The web app

It's composed of several parts:

  • The master hosted skeleton webpage
  • The libs
  • The Xiot framework UI files
  • The agent UI files

Master hosted skeleton page

It's designed to be as small as possible. It's part of the program flashed into the master ESP-8266 program memory. It's an HTML document that loads the various libs, and then the framework UI files. It's not aware of what agents are available, so that the master module needs not be updated when a new type of agent is available.

The libs

The libs are hosted on CDNs, but you could host them on any server accessible from the terminal you load the web app on.

For now, it's using:

  • jQuery,
  • underscoreJs
  • backboneJs
  • boostrapJs

I'm not totally happy with these, and I want to explore making another UI with vueJs and/or MobxJs. It would be really easy to have them each in a different file, and have them available at the same time, for the user to choose.

The framework UI files

I'm hosting these on a static web server whose address is part of the initial configuration of the master module. They are loaded by the app skeleton page. They provide some basic features, such as periodically requesting the master API to get the list of agents and their statuses. They are in charge of loading the additional files required by each agent, according to the UI class name present in the agent list. They provide containers for agents UI, with features such as "open the configuration panel", "save the configuration", "Edit the agent's name", "Remove agent from the list" most of which are not done yet.

The agent UI files

It's a js and a css file, they are both in a directory whose name is the UI class present in the master's agent collection. They are in charge of the UI inside the container provided by the framework.

BEWARE: for now, these containers are not sandboxed, which means the UI of a module can access the UI of the others. It could then forge requests to change module states. Some iframe sandboxing + messages + using Mac instead of IP to identify target agents should fix all this. It's not really an issue as long as I'm the only one designing/using agents :)

The mobile app.

It's not even started yet. The idea is to use the same UI elements as the web app, but without loading them from the web. The only HTTP communication would be through the master's API.

Clone this wiki locally