UI improvements in web

CHANGELOG.md

@@ -5,10 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [2.0.0 alpha]
+## [2.0.0 beta]
 
 ### Changed
-- everything. See README
+- everything. See `README.md`
 
 ## [1.9.5] 30-04-2020
 

README.md

@@ -1,13 +1,19 @@
 # EMS-ESP version 2.0
 
+## **Breaking changes**
+
+- MQTT base has been removed. The hostname is only used.
+
 ## **New Features in v2**
 
 - A new web interface using React and TypeScript that's now secure as each URL endpoint is protected by issuing a JWT which is then sent using Bearer Authentication. Using a Captive Portal in AP mode or connecting to a local wifi network.
 
-![settings](media/web_settings.PNG)
-![status](media/web_status.PNG)
+<img src="media/web_settings.PNG" width=70% height=70%>
+<img src="media/web_status.PNG" width=70% height=70%>
+<img src="media/web_devices.PNG" width=70% height=70%>
+<img src="media/web_mqtt.PNG" width=70% height=70%>
 
-- A new console. Like in version 1.9 it works with both Serial and Telnet but with a rich set of commands and more intuitive with behavior similar to a Linux-style shell. It supports multiple connections and commands that alter the settings or interact directly with EMS devices are secure behind an admin password. A full list of commands is below, here are the key ones:
+- A new console. Like in version 1.9 it works with both Serial and Telnet but with a more intuitive Linux shell like behavior. It supports multiple connections and has basic security to prevent any changes to EMS-ESP. A full list of commands is below, here are the key ones:
     * `help` lists the commands and keywords
     * some commands take you into a new context, a bit like a sub-menu. e.g. `system`, `thermostat`. Use `help` to show which commands this context has and `exit` or CTRL-D to get back to the root.
     * To change a setting use the `set` command. Typing `set` shows the current settings.
@@ -112,43 +118,73 @@ thermostat
 - See if it's easier to use timers instead of millis() based timers, using [polledTimeout](https://github.com/esp8266/Arduino/blob/master/libraries/esp8266/examples/BlinkPolledTimeout/BlinkPolledTimeout.ino).
 - Port over to ESP-IDF. The Arduino SDK is showing its limitations
 
+### **Features to add**
+
+- Multi-language. German, Dutch, French
+- Click on a device in the Web UI shows it's details
+- Publish time can be customized per device (solar, mixing etc)
+
 ### **Customizing the Web UI**
 
 The Web is based off Rick's awesome [esp8266-react](https://github.com/rjwats/esp8266-react/) framework. These are the files that are modified:
 
 **`interface:`**
-  * `.env` (project name and project path to ems-esp)
-  * `.env.development` (CORS URL)
+  * `.env` project name and project path to ems-esp
+  * `.env.development` CORS URL
  
 **`interface/public:`**
-  * `app/manifest.json` (ems-esp name)
-  * `index.html` (ems-esp name)
-  * `app/icon.png` (256x256 PNG)
-  * `favicon.ico` 
+  * `app/manifest.json` ems-esp name
+  * `index.html` ems-esp name
+  * `app/icon.png` 256x256 PNG
+  * `favicon.ico` replaced
 
 **`interface/src:`**
-  * `CustomMuiTheme.tsx` (colors for dark mode)
-  * `interface/src/wifi/WifiSettingsController.tsx` (rename esp8266-react)
+  * `CustomMuiTheme.tsx` colors for dark mode
+  * `interface/src/wifi/WifiSettingsController.tsx` rename esp8266-react
 
 **`interface/src/project:`**
-  * `ProjectRouting.tsx` (removed demo, renamed DemoProject to EMSESP)
-  * `DemoProject.tsx` (remove /demo/ and changed title, renamed to EMSESP.tsx)
-  * `ProjectMenu.tsx` (title)
-  * `DemoInformation.tsx` (removed file)
-  * `types.ts` (add variables)
+  * `ProjectRouting.tsx` removed demo, added paths to ems-esp/status, ems-esp/settings and *
+  * `DemoProject.tsx` remove /demo/ and changed title, renamed to EMSESP.tsx
+  * `ProjectMenu.tsx` title change, added /ems-esp/settings
+  * `DemoInformation.tsx` removed file
+  * `types.ts` add variables
+  * added all custom files starting with EMSESP*
+
+**`interface/src/mqtt:`**
+  * `types.ts` added mqtt_fails
+  * `MqttStatusForm.tsx` added MQTT Publish Errors
+  * `MqttStatus.ts` added function mqttPublishHighlight
+  * `MqttSettingsForm.tsx` added publish time, qos, format
+
+**`interface/src/authentication:`**
+  * `AuthenticationWrapper.tsx` commented out features.security because we added version
+  * `AuthenticationContext.tsx` added version
+  * `MqttSettingsForm.tsx` added publish time, qos, format
+
+**`interface/src/components:`**
+  * `MenuAppBar.tsx` added version to toolbar
+
+**`interface/src/system:`**
+  * `types.ts` added uptime and free_mem
+  * `SystemStatusForm.tsx` added system uptime, % free mem
 
 **`lib/framework`:**
-
-* `SystemStatus.h` : added #include <LittleFS.h>
-* `SystemStatus.cpp` : added LittleFS.info(fs_info); 
-* Commented out all `Serial.print`'s
+  * `SystemStatus.h` added #include <LittleFS.h>, #include <uuid/log.h>, #include "../../src/system.h"
+  * `SystemStatus.cpp` added LittleFS.info(fs_info); root["uptime"], root["free_mem"]
+  * Commented out all `Serial.print`'s in all files
+  * `MqttStatus.h` added #include "../../src/mqtt.h"
+  * `MqttStatus.cpp` added root["mqtt_fails"]
+  * `SecuritySettingsService.cpp` added version to the JWT payload
+  * `SecuritySettingsService.h` #include "../../src/version.h"  
   * `features.ini`: -D FT_NTP=0
-* customized `platformio.ini`
-* customized `factory_settings.ini` with `ems-esp-neo` as password and `ems-esp` everywhere else
+  * `platformio.ini` using our own version
+  * `factory_settings.ini` modified with `ems-esp-neo` as password and `ems-esp` everywhere else
 
 
- Info on UI customizations:
+ UI customization links:
 
   * icons: https://material-ui.com/components/material-icons/
   * colors: https://material-ui.com/customization/color/
   * tables: https://material-ui.com/components/tables/#dense-table
+
+

interface/src/authentication/AuthenticationContext.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 export interface Me {
   username: string;
   admin: boolean;
+  version: string; // proddy added
 }
 
 export interface AuthenticationContext {

interface/src/authentication/AuthenticationWrapper.tsx

@@ -59,10 +59,11 @@ class AuthenticationWrapper extends React.Component<AuthenticationWrapperProps,
   }
 
   refresh = () => {
-    if (!this.props.features.security) {
-      this.setState({ initialized: true, context: { ...this.state.context, me: { admin: true, username: "admin" } } });
-      return;
-    }
+    // proddy removed
+    // if (!this.props.features.security) {
+    //   this.setState({ initialized: true, context: { ...this.state.context, me: { admin: true, username: "admin" } } });
+    //   return;
+    // }
     const accessToken = getStorage().getItem(ACCESS_TOKEN)
     if (accessToken) {
       authorizedFetch(VERIFY_AUTHORIZATION_ENDPOINT)

interface/src/components/MenuAppBar.tsx

@@ -124,11 +124,18 @@ class MenuAppBar extends React.Component<MenuAppBarProps, MenuAppBarState> {
           <Box display="flex">
             <img src="/app/icon.png" className={classes.toolbarImage} alt={PROJECT_NAME} />
           </Box>
+
           <Typography variant="h6" color="textPrimary">
             {PROJECT_NAME}
           </Typography>
+
+          <Typography align="right" variant="caption" color="textPrimary">
+            &nbsp;&nbsp;{authenticatedContext.me.version}
+          </Typography>
+
           <Divider absolute />
         </Toolbar>
+
         {features.project && (
           <Fragment>
             <ProjectMenu />

interface/src/mqtt/MqttStatus.ts

@@ -44,7 +44,7 @@ export const disconnectReason = ({ disconnect_reason }: MqttStatus) => {
   }
 }
 
-export const mqttStatusHighlight2 = ({ mqtt_fails }: MqttStatus, theme: Theme) => {
+export const mqttPublishHighlight = ({ mqtt_fails }: MqttStatus, theme: Theme) => {
 
   if (mqtt_fails === 0)
     return theme.palette.success.main;
@@ -53,5 +53,4 @@ export const mqttStatusHighlight2 = ({ mqtt_fails }: MqttStatus, theme: Theme) =
     return theme.palette.warning.main;
 
   return theme.palette.success.main;
-
 }

interface/src/mqtt/MqttStatusForm.tsx

@@ -9,7 +9,7 @@ import ReportIcon from '@material-ui/icons/Report';
 import SpeakerNotesOffIcon from "@material-ui/icons/SpeakerNotesOff";
 
 import { RestFormProps, FormActions, FormButton, HighlightAvatar } from '../components';
-import { mqttStatusHighlight, mqttStatus, mqttStatusHighlight2, disconnectReason } from './MqttStatus';
+import { mqttStatusHighlight, mqttStatus, mqttPublishHighlight, disconnectReason } from './MqttStatus';
 import { MqttStatus } from './types';
 
 type MqttStatusFormProps = RestFormProps<MqttStatus> & WithTheme;
@@ -30,7 +30,7 @@ class MqttStatusForm extends Component<MqttStatusFormProps> {
           <Divider variant="inset" component="li" />
           <ListItem>
           <ListItemAvatar>
-            <HighlightAvatar color={mqttStatusHighlight2(data, theme)}>
+            <HighlightAvatar color={mqttPublishHighlight(data, theme)}>
               <SpeakerNotesOffIcon />
             </HighlightAvatar>
           </ListItemAvatar>

interface/src/project/EMSESP.tsx

@@ -9,6 +9,7 @@ import { AuthenticatedRoute } from '../authentication';
 
 import EMSESPStatusController from './EMSESPStatusController';
 import EMSESPDevicesController from './EMSESPDevicesController';
+import EMSESPHelp from './EMSESPHelp';
 
 class EMSESP extends Component<RouteComponentProps> {
 
@@ -20,10 +21,12 @@ class EMSESP extends Component<RouteComponentProps> {
     return (
       <MenuAppBar sectionTitle="Dashboard">
         <Tabs value={this.props.match.url} onChange={this.handleTabChange} variant="fullWidth">
-          <Tab value={`/${PROJECT_PATH}/status`} label="EMS-ESP Status" />
+          <Tab value={`/${PROJECT_PATH}/status`} label="EMS Status" />
           <Tab value={`/${PROJECT_PATH}/devices`} label="EMS Devices" />
+          <Tab value={`/${PROJECT_PATH}/help`} label="EMS-ESP Help" />
         </Tabs>
         <Switch>
+          <AuthenticatedRoute exact path={`/${PROJECT_PATH}/help`} component={EMSESPHelp} />
           <AuthenticatedRoute exact path={`/${PROJECT_PATH}/status`} component={EMSESPStatusController} />
           <AuthenticatedRoute exact path={`/${PROJECT_PATH}/devices`} component={EMSESPDevicesController} />
           <Redirect to={`/${PROJECT_PATH}/status`} />

interface/src/project/EMSESPDevicesForm.tsx

@@ -115,7 +115,7 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
           (
             <Box bgcolor="error.main" color="error.contrastText" p={2} mt={2} mb={2}>
               <Typography variant="body1">
-                No EMS devices found. Check connection and for Tx errors. Try forcing a scan.
+                No EMS devices found. Check the connection and for possible Tx errors and try scanning for new devices.
               </Typography>
             </Box>
           )
@@ -174,8 +174,9 @@ class EMSESPDevicesForm extends Component<EMSESPDevicesFormProps, EMSESPDevicesF
   render() {
     return (
       <Fragment>
+        <br></br>
         {this.createTableItems()}
-
+        <br></br>
         <Box display="flex" flexWrap="wrap">
           <Box flexGrow={1} padding={1}>
             <FormButton startIcon={<RefreshIcon />} variant="contained" color="secondary" onClick={this.props.loadData}>

interface/src/project/EMSESPHelp.tsx

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import { Typography, Box, Link } from '@material-ui/core';
+import { SectionContent } from '../components';
+
+class EMSESPHelp extends Component {
+
+    render() {
+        return (
+            <SectionContent title='EMS-ESP Help' titleGutter>
+
+                <Box bgcolor="info.main" border={1} p={3} mt={1} mb={0}>
+                    <Typography variant="body1">
+                        EMS-ESP is an open-source firmware to communicate with heating devices that support the EMS protocol, such as equipment from Bosch, Junkers, Nefit, Buderus and Worcester.
+            <p></p>
+            Please consider supporting this project via the GitHub page <Link href="https://github.com/proddy/EMS-ESP" color="primary">{'http://github.com/proddy/EMS-ESP'}</Link>.
+                    </Typography>
+                </Box>
+                <br></br>
+                <Typography variant="body1" paragraph>
+                    Check for news and updates on the <Link href="https://emsesp.github.io/docs/#/" color="primary">{'Wiki'}</Link>.
+                </Typography>
+                <Typography variant="body1" paragraph>
+                    For live community chat go to <Link href="https://gitter.im/EMS-ESP/community#" color="primary">{'Gitter'}</Link>.
+                </Typography>
+                <Typography variant="body1" paragraph>
+                    To report an issue or feature request go to <Link href="https://github.com/proddy/EMS-ESP/issues/new/choose" color="primary">{'the github project page'}</Link>.
+                </Typography>
+
+            </SectionContent>
+        )
+    }
+
+}
+
+export default EMSESPHelp;

interface/src/project/EMSESPStatusController.tsx

@@ -17,7 +17,7 @@ class EMSESPStatusController extends Component<EMSESPStatusControllerProps> {
 
     render() {
         return (
-            <SectionContent title="EMS-ESP Status">
+            <SectionContent title="EMS Status">
                 <RestFormLoader
                     {...this.props}
                     render={formProps => <EMSESPStatusForm {...formProps} />}

interface/src/project/EMSESPStatusForm.tsx

@@ -12,9 +12,6 @@ import {
   ListItem,
   ListItemAvatar,
   ListItemText,
-  Typography,
-  Box,
-  Link
 } from "@material-ui/core";
 
 import RefreshIcon from "@material-ui/icons/Refresh";
@@ -42,17 +39,7 @@ class EMSESPStatusForm extends Component<EMSESPStatusFormProps> {
     const { data, theme } = this.props;
     return (
       <Fragment>
-        <Box bgcolor="info.main" border={1} p={3} mt={1} mb={0}>
-          <Typography variant="body1">
-            Firmware Version is <b>{data.version}</b>
-            <br /><br />
-            Check for news and updates on the <Link href="https://emsesp.github.io/docs/#/" color="primary">{'Wiki'}</Link>
-            <br/>
-            For live community chat go to <Link href="https://gitter.im/EMS-ESP/community#" color="primary">{'Gitter'}</Link>
-            <br/>
-            To report issues, contribute and give kudos visit <Link href="https://github.com/proddy/EMS-ESP" color="primary">{'github.com/proddy/EMS-ESP'}</Link>
-          </Typography>
-        </Box>
+
         <ListItem>
           <ListItemAvatar>
             <HighlightAvatar color={busStatusHighlight(data, theme)}>

interface/src/project/EMSESPtypes.ts

@@ -16,7 +16,6 @@ export enum busConnectionStatus {
 }
 
 export interface EMSESPStatus {
-  version: string;
   status: busConnectionStatus;
   rx_received: number;
   tx_sent: number;

interface/src/wifi/WiFiSettingsController.tsx

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 
 import { restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
 import WiFiSettingsForm from './WiFiSettingsForm';
-import { WiFiConnectionContext } from './WiFiConnectionContext';
 import { WIFI_SETTINGS_ENDPOINT } from '../api';
 import { WiFiSettings } from './types';
 
@@ -10,39 +9,15 @@ type WiFiSettingsControllerProps = RestControllerProps<WiFiSettings>;
 
 class WiFiSettingsController extends Component<WiFiSettingsControllerProps> {
 
-  static contextType = WiFiConnectionContext;
-  context!: React.ContextType<typeof WiFiConnectionContext>;
-
   componentDidMount() {
-    const { selectedNetwork } = this.context;
-    if (selectedNetwork) {
-      const wifiSettings: WiFiSettings = {
-        ssid: selectedNetwork.ssid,
-        password: "",
-        hostname: "ems-esp",
-        static_ip_config: false,
-      }
-      this.props.setData(wifiSettings);
-    } else {
     this.props.loadData();
   }
-  }
-
-  deselectNetworkAndLoadData = () => {
-    this.context.deselectNetwork();
-    this.props.loadData();
-  }
-
-  componentWillUnmount() {
-    this.context.deselectNetwork();
-  }
 
   render() {
     return (
       <SectionContent title="WiFi Settings">
         <RestFormLoader
           {...this.props}
-          loadData={this.deselectNetworkAndLoadData}
           render={formProps => <WiFiSettingsForm {...formProps} />}
         />
       </SectionContent>

interface/src/wifi/WiFiSettingsForm.tsx

@@ -24,15 +24,39 @@ class WiFiSettingsForm extends React.Component<WiFiStatusFormProps> {
   static contextType = WiFiConnectionContext;
   context!: React.ContextType<typeof WiFiConnectionContext>;
 
+  constructor(props: WiFiStatusFormProps, context: WiFiConnectionContext) {
+    super(props);
+
+    const { selectedNetwork } = context;
+    if (selectedNetwork) {
+      const wifiSettings: WiFiSettings = {
+        ssid: selectedNetwork.ssid,
+        password: "",
+        hostname: props.data.hostname,
+        static_ip_config: false,
+      }
+      props.setData(wifiSettings);
+    }
+  }
+
   componentWillMount() {
     ValidatorForm.addValidationRule('isIP', isIP);
     ValidatorForm.addValidationRule('isHostname', isHostname);
     ValidatorForm.addValidationRule('isOptionalIP', optional(isIP));
   }
 
+  deselectNetworkAndLoadData = () => {
+    this.context.deselectNetwork();
+    this.props.loadData();
+  }
+
+  componentWillUnmount() {
+    this.context.deselectNetwork();
+  }
+
   render() {
     const { selectedNetwork, deselectNetwork } = this.context;
-    const { data, handleValueChange, saveData, loadData } = this.props;
+    const { data, handleValueChange, saveData } = this.props;
     return (
       <ValidatorForm onSubmit={saveData} ref="WiFiSettingsForm">
         {
@@ -167,7 +191,7 @@ class WiFiSettingsForm extends React.Component<WiFiStatusFormProps> {
           <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
             Save
           </FormButton>
-          <FormButton variant="contained" color="secondary" onClick={loadData}>
+          <FormButton variant="contained" color="secondary" onClick={this.deselectNetworkAndLoadData}>
             Reset
           </FormButton>
         </FormActions>

lib/framework/MqttStatus.cpp

@@ -16,7 +16,7 @@ void MqttStatus::mqttStatus(AsyncWebServerRequest * request) {
     root["client_id"]         = _mqttSettingsService->getClientId();
     root["disconnect_reason"] = (uint8_t)_mqttSettingsService->getDisconnectReason();
 
-    root["mqtt_fails"] = emsesp::Mqtt::publish_fails();
+    root["mqtt_fails"] = emsesp::Mqtt::publish_fails(); // proddy added
 
     response->setLength();
     request->send(response);

lib/framework/MqttStatus.h

@@ -9,7 +9,7 @@
 #include <ESPAsyncTCP.h>
 #endif
 
-#include "../../src/mqtt.h"
+#include "../../src/mqtt.h" // proddy added
 
 #include <MqttSettingsService.h>
 #include <ArduinoJson.h>

lib/framework/SecuritySettingsService.cpp

@@ -61,6 +61,7 @@ Authentication SecuritySettingsService::authenticate(const String& username, con
 inline void populateJWTPayload(JsonObject& payload, User* user) {
   payload["username"] = user->username;
   payload["admin"] = user->admin;
+  payload["version"] = EMSESP_APP_VERSION; // proddy added
 }
 
 boolean SecuritySettingsService::validatePayload(JsonObject& parsedPayload, User* user) {

lib/framework/SecuritySettingsService.h

@@ -6,6 +6,8 @@
 #include <HttpEndpoint.h>
 #include <FSPersistence.h>
 
+#include "../../src/version.h" // added by proddy
+
 #ifndef FACTORY_ADMIN_USERNAME
 #define FACTORY_ADMIN_USERNAME "admin"
 #endif

lib/framework/SystemStatus.cpp

@@ -34,13 +34,13 @@ void SystemStatus::systemStatus(AsyncWebServerRequest * request) {
     root["fs_used"]  = SPIFFS.usedBytes();
 #elif defined(ESP8266)
     FSInfo fs_info;
-    LittleFS.info(fs_info); // TODO added littlefs
+    LittleFS.info(fs_info); // // proddy added
     root["fs_total"] = fs_info.totalBytes;
     root["fs_used"]  = fs_info.usedBytes;
 #endif
 
-    root["uptime"]   = uuid::log::format_timestamp_ms(uuid::get_uptime_ms(), 3);
-    root["free_mem"] = emsesp::System::free_mem();
+    root["uptime"]   = uuid::log::format_timestamp_ms(uuid::get_uptime_ms(), 3); // proddy added
+    root["free_mem"] = emsesp::System::free_mem(); // proddy added
 
     response->setLength();
     request->send(response);

lib/framework/SystemStatus.h

@@ -9,7 +9,7 @@
 #include <ESP8266WiFi.h>
 #include <ESPAsyncTCP.h>
 #include <FS.h>
-#include <LittleFS.h> // TODO added littlefs
+#include <LittleFS.h> // proddy added
 #endif
 
 #include <ArduinoJson.h>
@@ -17,8 +17,8 @@
 #include <ESPAsyncWebServer.h>
 #include <SecurityManager.h>
 
-#include <uuid/log.h>
-#include "../../src/system.h"
+#include <uuid/log.h> // proddy added
+#include "../../src/system.h" // proddy added
 
 #define MAX_ESP_STATUS_SIZE 1024
 #define SYSTEM_STATUS_SERVICE_PATH "/rest/systemStatus"

platformio.ini

@@ -37,7 +37,7 @@ libs_core =
 
 [env]
 extra_scripts = 
-  pre:scripts/build_interface.py
+  ; pre:scripts/build_interface.py
   scripts/main_script.py
 
 framework = arduino

src/EMSESPStatusService.cpp

@@ -54,8 +54,6 @@ void EMSESPStatusService::emsespStatusService(AsyncWebServerRequest * request) {
     AsyncJsonResponse * response = new AsyncJsonResponse(false, MAX_EMSESP_STATUS_SIZE);
     JsonObject          root     = response->getRoot();
 
-    root["version"] = EMSESP_APP_VERSION;
-
     root["status"]      = EMSESP::bus_status(); // 0, 1 or 2
     root["rx_received"] = EMSESP::rxservice_.telegram_count();
     root["tx_sent"]     = EMSESP::txservice_.telegram_read_count() + EMSESP::txservice_.telegram_write_count();

src/version.h

@@ -1 +1 @@
-#define EMSESP_APP_VERSION "2.0.0_b4" // based off a32
+#define EMSESP_APP_VERSION "2.0.0_b4"