{"id":654,"date":"2022-11-27T23:36:56","date_gmt":"2022-11-27T22:36:56","guid":{"rendered":"https:\/\/www.hilltop-cottage.info\/blogs\/adam\/?p=654"},"modified":"2023-06-17T10:13:59","modified_gmt":"2023-06-17T09:13:59","slug":"using-websockets-with-emonpi-to-create-a-live-feed-dashboard","status":"publish","type":"post","link":"https:\/\/www.hilltop-cottage.info\/blogs\/adam\/using-websockets-with-emonpi-to-create-a-live-feed-dashboard\/","title":{"rendered":"Using Websockets with EmonPi MQTT Broker to Create a “Live Feed” Dashboard"},"content":{"rendered":"

This is not a complete description of the background tech; there is plenty of info on the web about websockets, mqtt, and the javascript libraries.<\/em><\/p>\n

The motivating idea behind this experiment is to be able to have a live-updating dashboard with the minimum set of dependencies of the “install X” kind. Since the EmonPi aleady has a MQTT broker, it provides the basis for feeding data to the dashboard. Websockets allows a “web page” (it can be a file viewed in your web browser) to send and receive data, and update the page, using JavaScript. This is not particularly difficult, but there are several steps which took a couple of evenings to research and put into practice, so here are some notes (for myself in the future, and anyone else who finds it!).<\/p>\n

If you are looking for some “homework reading”, a decent place to start is Steve’s Internet Guide<\/a>.<\/p>\n

Make Mosquitto Listen for Websockets Connections<\/h2>\n

Mosquitto is the MQTT broker on the EmonPi. It is configured to listen for connections which employ the “mqtt:” protocol. It is possible to add a websockets listener (“ws:” protocol), with the conventional port 9001 assignment as follows:<\/p>\n

    \n
  • SSH onto the EmonPi and navigate to \/etc\/mosquitto.<\/li>\n
  • Modify the mosquitto.conf file to add “listener 9001” and “protocol websockets”, see below. I have also added explicit lines for the default mqtt listener on port 1883 in the interest of clarity, although I believe they are not required. You will need to use “sudo”. Alternatively, it should be possible to add a file to the “include_dir”.<\/li>\n
  • Restart mosquitto using “sudo systemctl restart mosquitto.service”<\/li>\n<\/ul>\n
    \n
    pid_file \/var\/run\/mosquitto.pid\r\npersistence false\r\npersistence_location \/var\/lib\/mosquitto\/\r\nlog_dest file \/var\/log\/mosquitto\/mosquitto.log\r\ninclude_dir \/etc\/mosquitto\/conf.d\r\n\r\nlistener 1883\r\nprotocol mqtt\r\n\r\nlistener 9001\r\nprotocol websockets\r\n\r\nallow_anonymous false\r\npassword_file \/etc\/mosquitto\/passwd\r\nlog_type error<\/pre>\n<\/blockquote>\n
    It should now be possible to test two things: that the existing mqtt protocol listener, which is relied on to service data to EmonCMS, and that the websockets listener us “up”. I used “MQTT Explorer”, a free and simple client, which should be set up to not<\/em> validate a certificate and to have an empty “Basepath” (it defaults to “ws”).<\/p>\n
    Create the Websockets Dashboard with HTML and JavaScript<\/h2>\n
    My primary aim for this experiment is to be able to co-opt EmonPi to broker air quality data from a home-brew particulate matter, VOC, NOx, CO2 sensor combo, but I’m using the existing emon data to demonstrate the concept, which boils down to “guages” using the Google Charts toolkit, and scrolling line charts using Chart.js.<\/p>\n
    Here is the code to hack about with, based on snippets from various places, with modifications and updating to a recent. It should just live in a plain text file with a “.html” extension, and can be opened in your web browser. It is not beautiful but demonstrates the concept. There is some logging to the “console”, which is where error messages will also appear. Hit F12 on Firefox or Edge (or Chrome too I think) to find the console.<\/p>\n
    \n
    \n
    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n\u00a0 \u00a0 <meta charset=\"UTF-8\">\r\n  \u00a0 <!-- This helps with viewing on mobile devices -->\r\n\u00a0 \u00a0 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\r\n\u00a0 \u00a0 <title>Real-Time Charts<\/title>\r\n  \u00a0 <!-- Google charts -->\r\n\u00a0 \u00a0 <script type=\"text\/javascript\" src=\"https:\/\/www.gstatic.com\/charts\/loader.js\"><\/script>\r\n  \u00a0 <!-- Chart.js -->\r\n\u00a0 \u00a0 <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.9.1\/chart.min.js\" integrity=\"sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"><\/script>\r\n  \u00a0 <!-- The Paho Javascript for MQTT over Websockets -->\r\n\u00a0 \u00a0 <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/paho-mqtt\/1.0.1\/mqttws31.min.js\" type=\"text\/javascript\"><\/script>\r\n\u00a0 \u00a0 <!-- Bootstrap CSS - can be removed but will help with the styling -->\r\n\u00a0 \u00a0 <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bootstrap\/5.2.3\/css\/bootstrap.min.css\" integrity=\"sha512-SbiR\/eusphKoMVVXysTKG\/7VseWii+Y3FdHrt0EpKgpToZeemhqHeZeLWLhJutz\/2ut2Vw1uQEj2MbRF+TVBUA==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\r\n\u00a0 \u00a0 <link rel=\"stylesheet\" type=\"text\/css\" href=\"{{ url_for('static', filename='main.css') }}\">\r\n<\/head>\r\n<body>\r\n<script type=\"text\/javascript\">\r\n\u00a0 \u00a0 \/\/ load the google charts stuff and only after it is loaded should we start to set up the data acquisition\r\n\u00a0 \u00a0 \/\/ otherwise, we find the charts library is being called upon before it exists!\r\n\u00a0 \u00a0 google.charts.load('current', {'packages':['gauge']});\r\n\u00a0 \u00a0 google.charts.setOnLoadCallback(doWhenReady);\r\n\r\n\u00a0 \u00a0 function doWhenReady() {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ Create a client instance. NB clientid SHOULD BE DIFFERENT between browser clients; the following should work fine in a home environment.\r\n\u00a0 \u00a0 \u00a0 \u00a0 var clientId = \"client-\" + Date.now().toString();\r\n\u00a0 \u00a0 \u00a0 \u00a0 client = new Paho.MQTT.Client(\"192.168.1.1\", 9001, clientId);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ set callback handlers\r\n\u00a0 \u00a0 \u00a0 \u00a0 client.onConnectionLost = onConnectionLost;\r\n\u00a0 \u00a0 \u00a0 \u00a0 client.onMessageArrived = onMessageArrived;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ connect the client\r\n\u00a0 \u00a0 \u00a0 \u00a0 client.connect({onSuccess:onConnect, userName: \"emonpi\", password: \"emonpimqtt2016\"});\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ called when the client connects\r\n\u00a0 \u00a0 \u00a0 \u00a0 function onConnect() {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Once a connection has been made, make subscriptions\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(\"onConnect\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 client.subscribe(\"emon\/emonpi\/vrms\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 client.subscribe(\"emon\/emonpi\/power1\");\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ called when the client loses its connection\r\n\u00a0 \u00a0 \u00a0 \u00a0 function onConnectionLost(responseObject) {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (responseObject.errorCode !== 0) {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(\"onConnectionLost: \" + responseObject.errorMessage);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 document.getElementById(\"status\").innerText = \"Lost connection due to: \" + responseObject.errorMessage;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ called when a message arrives. Note that the full topic name is aka \"destinationName\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 function onMessageArrived(message) {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 document.getElementById(\"status\").innerHTML = \"\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(\"onMessageArrived: \" + message.destinationName + \" : \" + message.payloadString);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (message.destinationName == \"emon\/emonpi\/vrms\") {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ \"+\" converts string to numeric, which is then rounded by toFixed(), which returns a string!\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 var vrms = (+message.payloadString).toFixed(2);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Google chart guage\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 vrmsGaugeData.setValue(0, 1, +vrms);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 vrms_gauge.draw(vrmsGaugeData, vrmsOptions);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ scrolling line chart.js\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (vrmsChartData.data.labels.length === 20) {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 vrmsChartData.data.labels.shift();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 vrmsChartData.data.datasets[0].data.shift();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ we don't have the time in the mqtt message!\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 var timestamp = new Date().toLocaleTimeString();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 vrmsChartData.data.labels.push(timestamp);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 vrmsChartData.data.datasets[0].data.push(vrms);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 lineChartVrms.update();\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 } else if (message.destinationName == \"emon\/emonpi\/power1\") {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 var power1 = message.payloadString;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ Google\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 power1GaugeData.setValue(0, 1, +power1);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 power1_gauge.draw(power1GaugeData, power1Options);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ ------------- Google Charts -----------\r\n\u00a0 \u00a0 \u00a0 \u00a0 var vrmsGaugeData = new google.visualization.arrayToDataTable([\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ['Label', 'Value'],\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ['Vrms', 240]\r\n\u00a0 \u00a0 \u00a0 \u00a0 ]);\r\n  \u00a0 \u00a0 \u00a0 var power1GaugeData = google.visualization.arrayToDataTable([\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ['Label', 'Value'],\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ['Power', 0]\r\n\u00a0 \u00a0 \u00a0 \u00a0 ]);\r\n\u00a0 \u00a0 \u00a0 \u00a0 var vrmsOptions = {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 min \u00a0 \u00a0 \u00a0 \u00a0: 200,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 max \u00a0 \u00a0 \u00a0 \u00a0: 260,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 minorTicks : 5,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 greenFrom \u00a0: 230,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 greenTo \u00a0 \u00a0: 250,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 majorTicks : ['200', '210', '220', '230', '240', '250', '260']\r\n\u00a0 \u00a0 \u00a0 \u00a0 };\r\n\u00a0 \u00a0 \u00a0 \u00a0 var power1Options = {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 min \u00a0 \u00a0 \u00a0 \u00a0: 0,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 max \u00a0 \u00a0 \u00a0 \u00a0: 5000,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 minorTicks : 5,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 majorTicks : ['0', '1kW', '2kW', '3kW', '4kW', '5kW']\r\n\u00a0 \u00a0 \u00a0 \u00a0 };\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 var vrms_gauge = new google.visualization.Gauge(document.getElementById('vrms-gauge'));\r\n\u00a0 \u00a0 \u00a0 \u00a0 var power1_gauge = new google.visualization.Gauge(document.getElementById('power1-gauge'));\r\n\u00a0 \u00a0 \u00a0 \u00a0 vrms_gauge.draw(vrmsGaugeData, vrmsOptions);\r\n\u00a0 \u00a0 \u00a0 \u00a0 power1_gauge.draw(power1GaugeData, power1Options);\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ chart.js\r\n\u00a0 \u00a0 \u00a0 \u00a0 var chartOptions = {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 responsive: true,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 tooltips: {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 mode: 'index',\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 intersect: false,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 hover: {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 mode: 'nearest',\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 intersect: true\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 scales: {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 xAxes: {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: true,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 scaleLabel: {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: true,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labelString: 'Time'\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 yAxes: {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: true,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 scaleLabel: {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: true,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labelString: 'Value'\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 };\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ this allows us to have common chart options, while varying the scale in each chart\r\n\u00a0 \u00a0 \u00a0 \u00a0 var vrmsChartOptions = structuredClone(chartOptions);\r\n\u00a0 \u00a0 \u00a0 \u00a0 \/\/ use sensible range, which will be expanded if the data goes outside \"suggested\"\r\n\u00a0 \u00a0 \u00a0 \u00a0 vrmsChartOptions.scales.yAxes.suggestedMin = 230;\r\n\u00a0 \u00a0 \u00a0 \u00a0 vrmsChartOptions.scales.yAxes.suggestedMax = 250;\r\n\r\n  \u00a0 \u00a0 \u00a0 var vrmsChartData = {\r\n\u00a0 \u00a0 \u00a0 \u00a0 type : 'line',\r\n\u00a0 \u00a0 \u00a0 \u00a0 data : {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 labels: [],\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 datasets : [{\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 label : 'Vrms',\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 backgroundColor : 'rgba(255, 136, 0, 0.5)',\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 borderColor : 'rgba(255, 136, 0, 1.0)',\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 fill: true,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 data : []\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }]\r\n\u00a0 \u00a0 \u00a0 \u00a0 },\r\n\u00a0 \u00a0 \u00a0 \u00a0 options : vrmsChartOptions\r\n\u00a0 \u00a0 \u00a0 \u00a0 };\r\n\r\n  \u00a0 \u00a0 \u00a0 const lineChartVrms = new Chart('vrmsChart', vrmsChartData);\r\n\u00a0 \u00a0 }\r\n<\/script>\r\n\r\n<h1>EmonPi Live Feed<\/h1>\r\n<div class=\"container\">\r\n\u00a0 \u00a0 <div class=\"row\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 <div id=\"vrms-gauge\" style=\"width: 120px; height: 120px;\"><\/div>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <div id=\"power1-gauge\" style=\"width: 120px; height: 120px;\"><\/div>\r\n\u00a0 \u00a0 <\/div>\r\n\u00a0 \u00a0 <div class=\"row\" id=\"status\">loading data...<\/div>\r\n\u00a0 \u00a0 <div class=\"col-10\">\r\n\u00a0 \u00a0 <div class=\"card\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 <div class=\"card-body\">\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <canvas id=\"vrmsChart\"><\/canvas>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/div>\r\n\u00a0 \u00a0 <\/div>\r\n<\/div>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<\/blockquote>\n<\/div>\n
    Don’t forget to change the IP address for the MQTT broker!<\/p>\n
    Serving the Dashboard<\/h2>\n
    While the above HTML + JavaScript works fine as a file on your PC <\/em>(so long as you have a network connection to acquire all those JavaScript libraries from), it can also be placed on the EmonPi.<\/p>\n
    I have opted to create a separate area from EmonCMS in the interest of avoiding too much risk of cock-up, future muddle, etc… The files in this separate area will all be “static” in the sense that they are just served to users as they are (no PHP etc). The dashboard page above IS static in this sense, since the JavaScript executes on your PC inside the web browser; all the EmonPi does is send it.<\/p>\n
    EmonCMS uses the Apache2 web server, so it is easy to make it listen on a different port (EmonCMS uses port 80, and I have chosen port 8001) using the following commands (in a SSH).<\/p>\n
    Create the place where the HTML file will live<\/strong><\/p>\n
    \n
    cd \/var\/www\r\nmkdir static<\/pre>\n<\/blockquote>\n
    Check the directory ownership is correct using “ls -la”, which should show “drwxr-xr-x 2 pi pi 4096 Nov 27 23:02 static”.<\/p>\n
    If necessary “chown pi:pi static”.<\/p>\n
    Place the HTML + JavaScript file here (I suggest using the scp command, for example “scp dashboard.html pi@192.168.1.1:\/var\/www\/static”).<\/p>\n
    Change the Apache2 config<\/strong><\/p>\n
    There are two things to change, first to make apache2 listen on port 8001, and secondly to tell it to use the files in \/var\/www\/static in connection with port 8001 requests.<\/p>\n
    \n
    cd \/etc\/apache2\r\nsudo nano ports.conf<\/pre>\n<\/blockquote>\n
    Add a single line “Listen 8001”, then save and exit.<\/p>\n
    For the second step, enter the “sites-enabled” directory. I chose to copy the existing emoncms.conf file, naming the copy “static.conf” and editing it to contain:<\/p>\n
    \n
    <VirtualHost *:8001>\r\n  ServerName localhost\r\n  ServerAdmin webmaster@localhost\r\n  DocumentRoot \/var\/www\/static\r\n\r\n  # Virtual Host specific error log\r\n  ErrorLog \/var\/log\/static\/apache2-error.log\r\n\r\n  <Directory \/var\/www\/static>\r\n    Options FollowSymLinks Indexes\r\n    AllowOverride All\r\n    DirectoryIndex index.html\r\n    Order allow,deny\r\n    Allow from all\r\n  <\/Directory>\r\n<\/VirtualHost><\/pre>\n<\/blockquote>\n
    The changes are fairly obvious, but note that I have also added “Indexes” against “Options”. This makes apache give a listing of all the files in “static” when I use the URL “http:\/\/192.168.1.1:8001”. If you only have one dashboard, then simply name it “index.html” and it will appear when that URL is used.<\/p>\n
    Make a directory for logs<\/strong><\/p>\n
    Otherwise apache2 will not restart.<\/em><\/p>\n
    \n
    cd \/var\/log\r\nmkdir static<\/pre>\n<\/blockquote>\n
    Restart Apache2<\/strong><\/p>\n
    To load the new config.<\/em><\/p>\n
    \n
    sudo systemctl restart apache2<\/pre>\n<\/blockquote>\n
    Make sure EmonCMS is still working, then visit your new site! It should work adequately on a mobile phone, once rotated to landscape format.<\/p>\n
     <\/p>\n","protected":false},"excerpt":{"rendered":"
    This is not a complete description of the background tech; there is plenty of info on the web about websockets,…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34,35,36,1],"tags":[],"class_list":["post-654","post","type-post","status-publish","format-standard","hentry","category-iot","category-mqtt","category-open-energy-monitor","category-uncategorized","post-archive"],"_links":{"self":[{"href":"https:\/\/www.hilltop-cottage.info\/blogs\/adam\/wp-json\/wp\/v2\/posts\/654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hilltop-cottage.info\/blogs\/adam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hilltop-cottage.info\/blogs\/adam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hilltop-cottage.info\/blogs\/adam\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hilltop-cottage.info\/blogs\/adam\/wp-json\/wp\/v2\/comments?post=654"}],"version-history":[{"count":11,"href":"https:\/\/www.hilltop-cottage.info\/blogs\/adam\/wp-json\/wp\/v2\/posts\/654\/revisions"}],"predecessor-version":[{"id":665,"href":"https:\/\/www.hilltop-cottage.info\/blogs\/adam\/wp-json\/wp\/v2\/posts\/654\/revisions\/665"}],"wp:attachment":[{"href":"https:\/\/www.hilltop-cottage.info\/blogs\/adam\/wp-json\/wp\/v2\/media?parent=654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hilltop-cottage.info\/blogs\/adam\/wp-json\/wp\/v2\/categories?post=654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hilltop-cottage.info\/blogs\/adam\/wp-json\/wp\/v2\/tags?post=654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}