webfrontend - dl3ebb/OpenIot GitHub Wiki

#Web Frontend

An IoT device becomes more user-friendly with a web frontend. OpenIot provides a WebSocket server to forward events from OpenIot elements to a web interface. The WebSocket connection ensures that events are sent to connected clients.

Built-in Web Pages for Configuration

In addition to displaying application-specific web pages, OpenIot includes several pages to assist with device configuration. These pages are part of the library and handle web page modifications in the background.

The example Code :

/**
 * Demo of the web frontend
 * 
 * Dont forget to copy the web pages from the library and from this example to your 
 * project's data directory and create and umload the fileimage to the ESP Chip. 
 * 
 */
    
 #define SWITCH_PIN 25
 #define LED_PIN    32
 #define WLAN_SSID   "your_ssid"
 #define WLAN_PASSWD "your_passwd"
 
 #include <OpenIot.h>
 #include <Connector/DigitalInConnector.h>
 #include <Connector/DigitalOutConnector.h>
 #include <Connector/WebConnector.h>
 #include <Logger/SerialLogger.h>
 #include <Modules/Wifi.h>
 
 #include <Webpages/IndexPage.h>
 #include <Webpages/DeviceForm.h>
 #include <Webpages/HotspotForm.h>
 #include <Webpages/LoggingForm.h>
 #include <Webpages/MqttForm.h>
 #include <Webpages/NtpForm.h>
 #include <Webpages/RebootForm.h>
 #include <Webpages/WebUpdateForm.h>
 #include <Webpages/WifiForm.h>
 
 void setup() {
     serialLogger->setBaudrate(115200);
     openIot.setLogger(serialLogger);
 
     //--- Register all Configpages -----
     openIot.registerForm(indexPage);
     openIot.registerForm(hotspotForm);
     openIot.registerForm(wifiForm);
     openIot.registerForm(mqttForm);
     openIot.registerForm(ntpForm);
     openIot.registerForm(deviceForm);
     openIot.registerForm(loggingForm);
     openIot.registerForm(webUpdateForm);
     openIot.registerForm(rebootForm);
 
     /**
      * Create the Elements and register them to the connectors
      */
     BoolElement *switch1 = new BoolElement("Switch1");
     digitalInConnector->registerElement(switch1, SWITCH_PIN, true);
     webConnector->registerElement(switch1);
 
     BoolElement *led1 = new BoolElement("Led1");
     digitalOutConnector->registerElement(led1, LED_PIN);
     webConnector->registerElement(led1);
 
     eventManager.addListener<NewBoolValueEvent>(NewBoolValue, "Switch1", [led1](NewBoolValueEvent *event) {
         led1->setValue(event->newValue);
     });

     openIot.setup("OpenIotSwitch", 1);
 }
 
 void loop() {
     openIot.loop();
 }

  • Configuration Pages: Located in the data directory of the library.

  • Integration with the Application: Copy these pages into the application's data directory to include them in the final application image. Currently, there is no known method to automate this process.

Example: Using the Web Frontend

Registering Pages and Elements

Backend Registration: The backend for each web page is registered using registerPage in OpenIot. These backends perform tasks such as validating input data.

Element Registration:

The application elements, such as LED and Switch, are registered with the webConnector. This enables event communication with the web frontend via WebSocket.

Main Pages

index.html: This page is displayed when the device's web interface is accessed. It loads all other pages and integrates them into a menu.

home.html: This is the main page of the application, displayed by default. In this example, it is straightforward:

<div>
    <table style="width:100%">
        <tr>
            <td width="50%">&nbsp;</td>
            <td><span id="Switch1"></span></td>
            <td><span class="Led" id="Led1"></span></td>
        </tr>
</table>
</div>
<script>
    new LedButton("Led1", { size: 32, bordercolor: "red", centercolor: "black", switchid: "Switch1" });
    new Switch("Switch1", { width: 40, height: 20, offColor: "#FFF", onColor: "#2196F3" });
</script>

Elements and Rendering:

  • Two span elements, Switch1 and Led1, are defined.
  • JavaScript initializes objects to render in these spans.

Name Matching:

  • The names in the frontend must match the backend element names.

Parameterization:

  • You can pass parameters to influence appearance and behavior.
  • The switchid parameter for the LedButton connects it to the backend's Switch element.

LedButton Behavior

The LedButton serves multiple purposes:

  • LED Visualization: Displays the status of a LED or actuator.
  • Button Functionality: Acts as a button when provided with the Switch ID from the backend.

With these tools, OpenIot facilitates seamless integration between IoT devices and their web frontends, enabling efficient monitoring and control.

| ← Previous Page (Syslog Logger) | ↑ Tutorial Main Page |

Open Iot Wiki

⚠️ **GitHub.com Fallback** ⚠️