Skip to content

Home

Jump to bottom
btsimonh edited this page Feb 10, 2022 · 2 revisions

Welcome to the webapp wiki!

This repo represents a prototype for a rich UI for OpenBekenIOT based devices.

Design:

There is a very simple webpage on the device:

const char *apppage1 = 
"<!DOCTYPE html>"
"<html>"
"    <head>"
"        <script>"
"            var root = '";
const char * apppage2 = "';"
"            var device = 'http://";
const char * apppage3 = "';"
"        </script>"
"        <script src=\"";
const char * apppage4 = "startup.js\"></script>"
"    </head>"
"<body>"
"</body>"
"</html>";

This is constructed from the webapp address and the device address.

NOTE: The device responds to any OPTIONS with a very permissive CORS header - required for the webapp to work. This could in the future be restricted to the chosen domain of the webapp source.

The startup.js is read from the webapp webserver, and contains a list of .vue files which are loaded at page load, dependencies first, using http-vue-loader.

The main .vue file is then launched in vue.

This allows the main .vue file to use other .vue controls, etc. within it's template.

e.g. we may have separate modules for logs, controller, setup, etc.

Clone this wiki locally