merge with master

README.md

@@ -71,9 +71,9 @@ And then open the app in the browser at `http://localhost:8000`.
 
 This will start the webpack dev server, which will recompile the app on code changes and hot reload the UI.
 
-Note that the app will attempt to by default connect to MQTT broker served via the same port as the app and path `websocket-mqtt`, and that will eventually fail.
+Note that the app will attempt to connect to MQTT broker served via the same port as the app and path `/websocket-mqtt`, and that will eventually fail.
 
-You will need to change the `host`, `port`, and `path` (defaults to `websocket-mqtt`) query parameters to connect to a different Venus websocket MQTT host.
+You will need to change the `host`, `port`, and `path` (defaults to `/websocket-mqtt`) query parameters to connect to a different Venus websocket MQTT host.
 
 To connect to a Venus device with `VENUS_DEVICE_IP` running firmware >= 3.50 use the following URL:
 
@@ -85,7 +85,7 @@ To connect to Venus device with `VENUS_DEVICE_IP` running firmware < 3.50, or to
 
 Note: the `port` needs to be overriden to connect directly to `flashmq` provided websocket port.
 
-Note: the `path` URL parameter requires special sequence `%02%03` in order to properly override the default `websocket-mqtt` path and specify an empty string.
+Note: the `path` URL parameter requires special sequence `%02%03` in order to properly override the default `/websocket-mqtt` path and specify an empty string.
 
 This way you can run the local app against any Venus device that is reachable via your network.
 
@@ -191,6 +191,14 @@ Then you can run the cypress UI interactively with `npm run cy:open`.
 
 To run the ui tests in CI-style use `npm run test:e2e`
 
+### 3.4 Simulating/Debugging MFD UI locally
+
+MFDs ship web browsers based on `AppleWebKit/537` or `AppleWebKit/601`.
+
+Partially Simulating the MFD web browser can be achieved by running any browser using the same engine.
+
+Google Chrome 49 runs `AppleWebKit/537`, so contains all the same CSS/JS limitations, and can be use to simulate/debug CSS issues faster.
+
 ## 4. Making a release
 
 Whenever a new tag is created, GitHub Actions will build the app, archive the built files and upload them as `venus-html5-app.tar.gz` to the Github Release associated with the tag.
@@ -224,7 +232,9 @@ A sample recipe for the HTML5 app is [here](https://github.com/victronenergy/met
 
 ## 5. Device error logging
 
-When the app is hosted from a VenusGX, there is no convenient way to see the errors in the js console. To make troubleshooting easier the app sends (at least attempts to send) the error messages through websocket to the device. The log can be found at `/var/log/venus-html5-app/current`.
+When the app is hosted from a Venus device, there is no convenient way to see the errors in the js console.
+To make troubleshooting easier the app can send the error messages through websocket port 7890 to the device.
+To enable this debugging mode, setup https://github.com/vi/websocat on your Venus device, uncomment the debug code in `index.html`, and deploy to the device.
 
 ## 6. Device debugging
 
@@ -234,4 +244,4 @@ By adding `debug=true` to the query params you can enable some convenience featu
 - "Browser info" button - links to page containing basic information about the browser in which the app is running
 - A debug log element, which redirects all console messages to a visible element in the ui
 
-To enable this on a device set the debugReload and debugLog elements to visible in index.html and deploy to the device.
+To enable this this debugging mode on a MFD device, uncommend the debug code in `index.html`, override the `debug=true` check, and deploy to the device.

package.json

@@ -17,7 +17,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
-    "@victronenergy/mfd-modules": "^5.1.0",
+    "@victronenergy/mfd-modules": "^7.1.1",
     "axios": "^0.28.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.0",

public/Marine/manifest.json

@@ -2,7 +2,7 @@
     "name": "Victron MFD",
     "short_name": "Victron MFD",
     "description": "Victron Marine MFD",
-    "start_url": ".",
+    "start_url": "/app",
     "icons": [
         {
             "src": "favicon.ico",
@@ -23,4 +23,4 @@
     "theme_color": "#1f2535",
     "background_color": "#1f2535",
     "display": "standalone"
-}
+}

public/Marine2/manifest.json

@@ -2,7 +2,7 @@
     "name": "Victron MFD",
     "short_name": "Victron MFD",
     "description": "Victron Marine MFD",
-    "start_url": ".",
+    "start_url": "/app",
     "icons": [
         {
             "src": "favicon.ico",
@@ -23,4 +23,4 @@
     "theme_color": "#1f2535",
     "background_color": "#1f2535",
     "display": "standalone"
-}
+}

public/index.html

@@ -22,63 +22,78 @@
 </head>
 
 <body>
-  <div id="root" class="w-full h-full"></div>
-  <div id="debugReload" style="position: fixed; top: 10px; left: 20px; display: none;">
-    <input type="button" value="Reload page" onclick="location.reload(true)" />
-    <input type="button" value="Browser info"
+<div id="root" class="w-full h-full"></div>
+
+<!-- DEBUG: uncomment this code to enable debugging during development -->
+<!--
+  <div id="debugReload" style="position: fixed; top: 10px; left: 100px; display: none;">
+    <input type="button" style="background-color: red; color: black;" value="Reload page" onclick="location.reload(true)" />
+    <input type="button" style="background-color: red; color: black;" value="Browser info"
       onclick="window.location.href = 'browser-info.html' + window.location.search" />
   </div>
   <div id="debugLog"
-  style="color: white; background-color: rgba(18, 26, 40, 1); max-height: 200px; overflow: auto; position: fixed; bottom: 0">
-</div>
+    style="color: white; background-color: rgba(18, 26, 40, 1); max-height: 200px; overflow: auto; position: fixed; bottom: 0; display: none;">
+  </div>
+-->
+
 <script>
-  function getParameterByName(name, url) {
-    if (!url) url = window.location.href
-    name = name.replace(/[\[\]]/g, "\\$&")
-    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
-      results = regex.exec(url)
-    if (!results) return null
-    if (!results[2]) return ""
-    return decodeURIComponent(results[2].replace(/\+/g, " "))
-  }
 
+  // DEBUG: uncomment this code to enable debugging during development
+  // function getParameterByName(name, url) {
+  //   if (!url) url = window.location.href
+  //   name = name.replace(/[\[\]]/g, "\\$&")
+  //   var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+  //     results = regex.exec(url)
+  //   if (!results) return null
+  //   if (!results[2]) return ""
+  //   return decodeURIComponent(results[2].replace(/\+/g, " "))
+  // }
 
-  if (window.location.protocol === "http:") {
-    var host = getParameterByName("host") || window.location.hostname || "localhost"
-    var socket = new WebSocket("ws://" + host + ":7890")
-    window.onerror = function (msg, url, lineNo, columnNo, err) {
-      var data = {
-        time: new Date(),
-        error: msg
-      }
 
-      if (err) {
-        data.stack = err.stack
-      }
+  // DEBUG: uncomment this code to forward error messages generated by the app
+  // DEBUG: to the port 7890 where you can listen for them using tool like
+  // DEBUG: websocat: https://github.com/vi/websocat
+  // DEBUG: # websocat -s 7890
+  // DEBUG: this can be useful for example on MFD where you do not have a direct
+  // DEBUG: access to the web browser console but can ssh to the Venus device
+  // if (window.location.protocol === "http:") {
+  //   var host = getParameterByName("host") || window.location.hostname || "localhost"
+  //   var socket = new WebSocket("ws://" + host + ":7890")
+  //   window.onerror = function (msg, url, lineNo, columnNo, err) {
+  //     var data = {
+  //       time: new Date(),
+  //       error: msg
+  //     }
 
-      socket.send(JSON.stringify(data))
-      return true
-    }
-  }
+  //     if (err) {
+  //       data.stack = err.stack
+  //     }
 
-  function debugLogFn(msg) {
-    document.getElementById("debugLog").innerHTML += msg + "<br/>"
-    return false
-  }
+  //     socket.send(JSON.stringify(data))
+  //     return true
+  //   }
+  // }
 
-  function debug(name, url) {
-    console.log = debugLogFn
-    console.error = debugLogFn
-    document.getElementById("debugLog").style.display = "block"
-  }
+  // DEBUG: uncomment this code to enable debugging during development
+  // function debugLogFn(msg) {
+  //   document.getElementById("debugLog").innerHTML += msg + "<br/>"
+  //   return false
+  // }
 
-  window.onload = function () {
-    if (getParameterByName("debug")) {
-      debug()
-      document.getElementById("debugReload").style.display = "block"
-    }
-  }
+  // function enableDebugging() {
+  //   console.log = debugLogFn
+  //   console.error = debugLogFn
+  //   document.getElementById("debugLog").style.display = "block"
+  // }
+
+  // window.onload = function () {
+  //   if (getParameterByName("debug")) {
+  //     enableDebugging()
+  //     document.getElementById("debugReload").style.display = "block"
+  //   }
+  // }
 </script>
+
 </body>
 
 </html>

src/app/KVNRV/components/Tanks/SmallTank.tsx

@@ -20,8 +20,8 @@ import {
 import { Translate } from "react-i18nify"
 import { observer } from "mobx-react"
 
-export const fluidTypeFormatter = (fluidType: string) => {
-  switch (Number(fluidType)) {
+export const fluidTypeFormatter = (fluidType: number) => {
+  switch (fluidType) {
     case FLUID_TYPES.FUEL:
       return "Fuel"
     case FLUID_TYPES.FRESH_WATER:
@@ -46,7 +46,7 @@ export const SmallTank = observer(({ tankId }: TankProps) => {
   const footer = useSendUpdate(
     !hasReverseConfig ? 1 - tank.level / 100 : tank.level / 100,
     hasReverseConfig ? TANKS_CONF.REVERSE_TANK : TANKS_CONF.STANDART_TANK,
-    tank.fluidType && fluidTypeFormatter(tank.fluidType)
+    fluidTypeFormatter(tank.fluidType)
   )
 
   const unit: VolumeUnit =