Version 15

Revamped WebView to use watched Variables instead of DataToUI

README.md

@@ -140,6 +140,9 @@ Excess energy available in kW.
 - **v14**
   - Bug fix for authentication and session token problem
 
+- **v15**
+  - Revamped WebView to use watched Variables instead of DataToUI
+
 ## Compiled Driver Available from Releases:
 https://github.com/Leighm0/enphase_gateway/releases
 

driver.lua

@@ -173,14 +173,6 @@ function OPC.Password(value)
 	end
 end
 
---[[=============================================================================
-    Received From Proxy
-===============================================================================]]
-
-function RFP.SELECT()
-	C4:SetTimer(500,function(timer) updateWebUI() end, false)
-end
-
 --[[=============================================================================
     Enphase Gateway data functions
 ===============================================================================]]
@@ -411,14 +403,12 @@ function ENPHASE.Production(data)
 	local value = string.format("%.2f", data / 1000)
 	C4:SetVariable("PRODUCTION_KW", value)
 	C4:UpdateProperty("Production (kW)", tostring(value))
-	updateWebUI()
 end
 
 function ENPHASE.Consumption(data)
 	local value = string.format("%.2f", data / 1000)
 	C4:SetVariable("CONSUMPTION_KW", value)
 	C4:UpdateProperty("Consumption (kW)", tostring(value))
-	updateWebUI()
 end
 
 function ENPHASE.Grid(consumption_now, production_now)
@@ -432,22 +422,19 @@ function ENPHASE.Grid(consumption_now, production_now)
 		local value = string.format("%.2f", data / 1000)
 		C4:SetVariable("GRID_POWER_KW", value)
 		C4:UpdateProperty("Grid (kW)", tostring(value))
-		updateWebUI()
 	end
 end
 
 function ENPHASE.DailyProduction(data)
 	local value = string.format("%.2f", data / 1000)
 	C4:SetVariable("DAILY_ENERGY_PRODUCTION_KWH", value)
 	C4:UpdateProperty("Production Today (kWh)", tostring(value))
-	updateWebUI()
 end
 
 function ENPHASE.DailyConsumption(data)
 	local value = string.format("%.2f", data / 1000)
 	C4:SetVariable("DAILY_ENERGY_CONSUMPTION_KWH", value)
 	C4:UpdateProperty("Consumption Today (kWh)", tostring(value))
-	updateWebUI()
 end
 
 function ENPHASE.Excess(consumption_now, production_now)
@@ -464,41 +451,5 @@ function ENPHASE.Excess(consumption_now, production_now)
 		C4:SetVariable("EXCESS_SOLAR", excess)
 		C4:SetVariable("EXCESS_SOLAR_KW", value)
 		C4:UpdateProperty("Excess Solar (kW)", tostring(value))
-		updateWebUI()
-	end
-end
-
---[[=============================================================================
-    Send Data to the Web UI
-===============================================================================]]
-
-function updateWebUI()
-	local xml = BuildXmlPacket()
-	C4:SendDataToUI(xml)
-end
-
-function BuildXmlPacket()
-	local properties = {
-		{ tag = "producing-power", value = Variables.PRODUCTION_KW },
-		{ tag = "consuming-power", value = Variables.CONSUMPTION_KW },
-		{ tag = "grid-power", value = Variables.GRID_POWER_KW },
-		{ tag = "daily-production", value = Variables.DAILY_ENERGY_PRODUCTION_KWH },
-		{ tag = "daily-consumption", value = Variables.DAILY_ENERGY_CONSUMPTION_KWH },
-		{ tag = "excess-solar", value = Variables.EXCESS_SOLAR_KW }
-	}
-	local xml = "<data>"
-	for _, property in ipairs(properties) do
-		xml = xml .. BuildSimpleXml(property.tag, property.value)
-	end
-	xml = xml .. "</data>"
-	return xml
-end
-
-function BuildSimpleXml(tag, value)
-	if not value then
-		return ""
 	end
-	local xml = ""
-	xml = xml .. "<" .. tag .. ">" .. value .. "</" .. tag .. ">"
-	return xml
 end

driver.xml

@@ -6,7 +6,7 @@
 	<model>IQ/Envoy S Metered Gateways</model>
 	<created>11/3/2023 12:00 AM</created>
 	<modified>11/30/2023 12:00 AM</modified>
-	<version>14</version>
+	<version>15</version>
 	<control>lua_gen</control>
 	<driver>DriverWorks</driver>
 	<large image_source="c4z">icons\device_lg.png</large>

www/contents/index.html

@@ -23,7 +23,7 @@ <h1>Solar Dashboard</h1>
 						<path d="M8.68,8.68,6.92,6.92" transform="translate(-1.341 -1.343)" fill="rgba(0,0,0,0)" stroke="#01b4de" stroke-linecap="round" stroke-width="1.5"></path>
 					</g>
 				</svg>			
-				<producing-value-text><span id="producing-power">0.00</span> <producing-kw-text>kW</producing-kw-text></producing-value-text>
+				<producing-value-text><span id="PRODUCTION_KW">0.00</span> <producing-kw-text>kW</producing-kw-text></producing-value-text>
 				<producing-label>Producing</producing-label>
 			</div>
 			<div class="circle consuming-circle">
@@ -32,7 +32,7 @@ <h1>Solar Dashboard</h1>
 						<path d="M4.058,24a.654.654,0,0,1-.655-.654V12.653H.655a.654.654,0,0,1-.463-1.117L11.536.192a.654.654,0,0,1,.925,0L23.805,11.536a.654.654,0,0,1-.463,1.117H20.594v10.69a.654.654,0,0,1-.655.654Zm15.227-1.309V12a.654.654,0,0,1,.654-.655h1.824L12,1.58,2.235,11.344H4.058A.654.654,0,0,1,4.712,12V22.688H9.073V14.834a.655.655,0,0,1,.655-.655h4.538a.655.655,0,0,1,.654.655v7.854Zm-5.674,0v-7.2H10.383v7.2Z" fill="#f37320" stroke="#f37320" stroke-linecap="round" stroke-width="0.3"></path>
 					</g>
 				</svg>
-				<consuming-value-text><span id="consuming-power">0.00</span> <consuming-kw-text>kW</consuming-kw-text></consuming-value-text>
+				<consuming-value-text><span id="CONSUMPTION_KW">0.00</span> <consuming-kw-text>kW</consuming-kw-text></consuming-value-text>
 				<consuming-label>Consuming</consuming-label>
 			</div>
 			<div class="circle grid-circle">
@@ -43,22 +43,22 @@ <h1>Solar Dashboard</h1>
 						<path d="M30.802 16.666H15.549" stroke="#CBCFD2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
 					</g>
 				</svg>
-				<grid-value-text><span id="grid-power">0.00</span> <grid-kw-text>kW</grid-kw-text></grid-value-text>
+				<grid-value-text><span id="GRID_POWER_KW">0.00</span> <grid-kw-text>kW</grid-kw-text></grid-value-text>
 				<grid-label>Grid</grid-label>
 			</div>
 		</div>
 		<div class="container2">
 			<div class="production-value-box">
 				<h2>Production Today</h2>
-				<production-value-text><span id="daily-production">0.00</span> <production-kwh-text>kWh</production-kwh-text></production-value-text>
+				<production-value-text><span id="DAILY_ENERGY_PRODUCTION_KWH">0.00</span> <production-kwh-text>kWh</production-kwh-text></production-value-text>
 			</div>
 			<div class="consumption-value-box">
 				<h2>Consumption Today</h2>
-				<consumption-value-text><span id="daily-consumption">0.00</span> <consumption-kwh-text>kWh</consumption-kwh-text></consumption-value-text>
+				<consumption-value-text><span id="DAILY_ENERGY_CONSUMPTION_KWH">0.00</span> <consumption-kwh-text>kWh</consumption-kwh-text></consumption-value-text>
 			</div>
 			<div class="excess-solar-value-box">
 				<h2>Excess Solar</h2>
-				<excess-solar-value-text><span id="excess-solar">0.00</span> <excess-solar-kw-text>kW</excess-solar-kw-text></excess-solar-value-text>
+				<excess-solar-value-text><span id="EXCESS_SOLAR_KW">0.00</span> <excess-solar-kw-text>kW</excess-solar-kw-text></excess-solar-value-text>
 			</div>
 		</div>
 	</body>

www/contents/javascript/dashboard.js

@@ -1,30 +1,23 @@
 document.addEventListener("DOMContentLoaded", function(){
-	C4.subscribeToDataToUi(true);
+	C4.subscribeToDataToUi(false);
+    C4.subscribeToVariable("PRODUCTION_KW");
+    C4.subscribeToVariable("CONSUMPTION_KW");
+    C4.subscribeToVariable("GRID_POWER_KW");
+    C4.subscribeToVariable("DAILY_ENERGY_PRODUCTION_KWH");
+    C4.subscribeToVariable("DAILY_ENERGY_CONSUMPTION_KWH");
+    C4.subscribeToVariable("EXCESS_SOLAR_KW");
 });
 
 function updateData(variable, value) {
 	console.log("updateData: " + variable + value)
 	document.getElementById(variable).textContent=value;
 }
 
-function onDataToUi(value) {
-	console.log("DATA_TO_UI: " + value);
-	var response = JSON.parse(value);
-	if (!response || typeof response !== "object") {
-		console.log("DATA_TO_UI: onDataToUi called with invalid or no JSON");
-		return;
-	}
-	console.log("DATA_TO_UI: successfully parsed response.");
-	var data = response.data;
-	console.log(data);
-	for (var property in data) {
-		if (data.hasOwnProperty(property)) {
-			console.log(data[property]);
-			updateData(property, data[property]);
-		}
-	}
+function onVariable(variable, value) {
+	console.log("Received variable: " + variable + value);
+	updateData(variable, value);
 }
 
-function onSubscribeToDataToUi(message) {
-	alert("Error subscribing to data to ui: " + message);
-}
+function onSubscribeToVariableError(variable, message) {
+	alert("Error subscribing to variable: " + variable + "," + message);
+}

www/documentation.md

@@ -139,3 +139,6 @@ Excess energy available in kW.
 
 - **v14**
   - Bug fix for authentication and session token problem
+
+- **v15**
+  - Revamped WebView to use watched Variables instead of DataToUI