Work

.vscode/settings.json

@@ -20,5 +20,5 @@
     "valarray": "cpp",
     "vector": "cpp"
   },
-  "C_Cpp.errorSquiggles": "enabled"
+  "C_Cpp.errorSquiggles": "disabled"
 }

dashboard/.prettierrc

@@ -1,7 +1,7 @@
 {
 	"useTabs": true,
 	"singleQuote": true,
-	"trailingComma": "none",
+	"trailingComma": "all",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte"],
 	"pluginSearchDirs": ["."],

dashboard/package.json

@@ -4,7 +4,7 @@
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build",
+		"build": "vite build && cp -r ./build/* ../data",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -14,19 +14,27 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/adapter-static": "^2.0.1",
-		"@sveltejs/kit": "^1.5.0",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
-		"@typescript-eslint/parser": "^5.45.0",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
+		"@sveltejs/kit": "^1.10.0",
+		"@typescript-eslint/eslint-plugin": "^5.54.0",
+		"@typescript-eslint/parser": "^5.54.0",
+		"autoprefixer": "^10.4.7",
+		"daisyui": "^2.51.3",
+		"eslint": "^8.35.0",
+		"eslint-config-prettier": "^8.7.0",
 		"eslint-plugin-svelte3": "^4.0.0",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.8.1",
-		"svelte": "^3.54.0",
-		"svelte-check": "^3.0.1",
-		"tslib": "^2.4.1",
-		"typescript": "^4.9.3",
-		"vite": "^4.0.0"
+		"gauge-chart-js": "^2.0.1",
+		"postcss": "^8.4.14",
+		"postcss-load-config": "^4.0.1",
+		"prettier": "^2.8.4",
+		"prettier-plugin-svelte": "^2.9.0",
+		"sass": "^1.58.3",
+		"svelte": "^3.55.1",
+		"svelte-check": "^3.0.4",
+		"tailwindcss": "^3.1.5",
+		"tslib": "^2.5.0",
+		"typescript": "^4.9.5",
+		"vite": "^4.1.4",
+		"svelte-preprocess": "^4.10.7"
 	},
 	"type": "module"
 }

dashboard/postcss.config.cjs

@@ -0,0 +1,13 @@
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
+const config = {
+	plugins: [
+		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+		tailwindcss(),
+		//But others, like autoprefixer, need to run after,
+		autoprefixer,
+	],
+};
+
+module.exports = config;

dashboard/src/app.postcss

@@ -0,0 +1,4 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

dashboard/src/lib/components/Gauge.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Gauge } from 'gauge-chart-js';
+
+	export let value: number;
+	export let color = '#000';
+	export let lineWidth = 1;
+	export let gaugeRadius = 10;
+
+	let gauge: Gauge;
+	let container: HTMLElement;
+
+	$: gauge?.setValue(value);
+
+	onMount(() => {
+		gauge = new Gauge({
+			container,
+			color,
+			lineWidth,
+			gaugeRadius,
+		});
+		gauge.setValue(value);
+	});
+</script>
+
+<div bind:this={container} />

dashboard/src/lib/sensor.ts

@@ -1,22 +1,65 @@
 import { browser } from '$app/environment';
 import { readable } from 'svelte/store';
 
+const url = 'http://192.168.116.72';
+
 export type SensorData = {
 	temp: number;
 	hum: number;
+	out1: boolean;
+	out2: boolean;
 };
 
-export const sensor = readable<SensorData | null>(null, (set) => {
+const defaultData: SensorData = {
+	temp: 0,
+	hum: 0,
+	out1: false,
+	out2: false,
+};
+
+export const sensor = readable<SensorData>(defaultData, (set) => {
 	if (browser) {
-		const source = new EventSource('http://10.50.0.113/events');
+		const source = new EventSource(`${url}/events`);
 
 		source.addEventListener('open', () => {
 			console.log('Connected');
 		});
 
 		source.addEventListener('message', (e) => {
-			const data: SensorData = JSON.parse(e.data);
-			set(data);
+			set(JSON.parse(e.data));
 		});
 	}
 });
+
+export async function setOutput(pin: number, value: boolean) {
+	await fetch(`${url}/set`, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+			Accept: 'application/json',
+		},
+		body: JSON.stringify({ pin, value }),
+	});
+}
+
+export async function setOnTemp(temp: number) {
+	await fetch(`${url}/settings`, {
+		method: 'PATCH',
+		headers: {
+			'Content-Type': 'application/json',
+			Accept: 'application/json',
+		},
+		body: JSON.stringify({ onTemp: temp }),
+	});
+}
+
+export async function setOnHum(hum: number) {
+	await fetch(`${url}/settings`, {
+		method: 'PATCH',
+		headers: {
+			'Content-Type': 'application/json',
+			Accept: 'application/json',
+		},
+		body: JSON.stringify({ onHum: hum }),
+	});
+}

dashboard/src/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<script>
+	import '../app.postcss';
+</script>
+
+<slot />

dashboard/src/routes/+page.svelte

@@ -1,8 +1,56 @@
 <script lang="ts">
-	import { sensor } from '../lib/sensor';
+	import { sensor, setOnHum, setOnTemp, setOutput } from '../lib/sensor';
+
+	let temp = 26;
+	let hum = 50;
+
+	async function handleTempChange() {
+		await setOnTemp(temp);
+	}
+
+	async function handleHumChange() {
+		await setOnHum(hum);
+	}
 </script>
 
-{#if $sensor}
-	<p>Temperature {$sensor.temp} °C</p>
-	<p>Humidity {$sensor.hum}%</p>
-{/if}
+<p>Temperature {$sensor.temp} °C</p>
+<p>Humidity {$sensor.hum} %</p>
+
+<div class="form-control w-full p-16">
+	<label class="label cursor-pointer">
+		<span class="label-text">Heater</span>
+		<input
+			type="checkbox"
+			class="toggle"
+			checked={$sensor.out1}
+			on:change={(e) => setOutput(16, e.currentTarget.checked)}
+		/>
+	</label>
+	<label class="label cursor-pointer">
+		<span class="label-text">Dehumidifier</span>
+		<input
+			type="checkbox"
+			class="toggle"
+			checked={$sensor.out2}
+			on:change={(e) => setOutput(17, e.currentTarget.checked)}
+		/>
+	</label>
+	<span>{temp}</span>
+	<input
+		type="range"
+		min="0"
+		max="100"
+		bind:value={temp}
+		class="range"
+		on:change={handleTempChange}
+	/>
+	<span>{hum}%</span>
+	<input
+		type="range"
+		min="0"
+		max="100"
+		bind:value={hum}
+		class="range"
+		on:change={handleHumChange}
+	/>
+</div>

dashboard/svelte.config.js

@@ -1,18 +1,24 @@
+import preprocess from 'svelte-preprocess';
 import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	preprocess: vitePreprocess(),
+	preprocess: [
+		vitePreprocess(),
+		preprocess({
+			postcss: true,
+		}),
+	],
 	kit: {
 		adapter: adapter({
 			pages: 'build',
 			assets: 'build',
 			fallback: null,
 			precompress: false,
-			strict: true
-		})
-	}
+			strict: true,
+		}),
+	},
 };
 
 export default config;

dashboard/tailwind.config.cjs

@@ -0,0 +1,9 @@
+const config = {
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [require('daisyui')],
+};
+
+module.exports = config;

dashboard/tsconfig.json

@@ -10,6 +10,7 @@
 		"sourceMap": true,
 		"strict": true
 	}
+
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//
 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes

dashboard/vite.config.ts

@@ -2,5 +2,5 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
 });

lib/settings/settings.cpp

@@ -4,6 +4,12 @@
 Settings::Settings() {
   refreshInterval = 1000;
   sensorPin = 26;
+  onTemp = 26.0;
+  onHum = 60.0;
+  tempOffset = 2.0;
+  humOffset = -2.0;
+  heaterOn = false;
+  dehumOn = false;
 }
 
 void Settings::load() {
@@ -28,4 +34,46 @@ void Settings::setSensorPin(unsigned int sensorPin) {
   save();
 }
 
-unsigned int Settings::getSensorPin() { return sensorPin; }
+unsigned int Settings::getSensorPin() { return sensorPin; }
+
+void Settings::setOnTemp(float temp) {
+  onTemp = temp;
+  save();
+}
+
+float Settings::getOnTemp() { return onTemp; }
+
+void Settings::setOnHum(float hum) {
+  onHum = hum;
+  save();
+}
+
+float Settings::getOnHum() { return onHum; }
+
+void Settings::setTempOffset(float temp) {
+  tempOffset = temp;
+  save();
+}
+
+float Settings::getTempOffset() { return tempOffset; }
+
+void Settings::setHumOffset(float hum) {
+  humOffset = hum;
+  save();
+}
+
+float Settings::getHumOffset() { return humOffset; }
+
+void Settings::setHeaterOn(bool on) {
+  heaterOn = on;
+  save();
+}
+
+bool Settings::getHeaterOn() { return heaterOn; }
+
+void Settings::setDehumOn(bool on) {
+  dehumOn = on;
+  save();
+}
+
+bool Settings::getDehumOn() { return dehumOn; }

lib/settings/settings.h

@@ -11,9 +11,33 @@ public:
   void setSensorPin(unsigned int);
   unsigned int getSensorPin();
 
+  void setOnTemp(float temp);
+  float getOnTemp();
+
+  void setOnHum(float hum);
+  float getOnHum();
+
+  void setTempOffset(float temp);
+  float getTempOffset();
+
+  void setHumOffset(float hum);
+  float getHumOffset();
+
+  void setHeaterOn(bool on);
+  bool getHeaterOn();
+
+  void setDehumOn(bool on);
+  bool getDehumOn();
+
 private:
   unsigned long refreshInterval;
   unsigned int sensorPin;
+  float onTemp;
+  float onHum;
+  float tempOffset;
+  float humOffset;
+  bool heaterOn;
+  bool dehumOn;
 
   void save();
 };

src/main.cpp

@@ -8,11 +8,11 @@
 #include <SPIFFS.h>
 #include <WiFi.h>
 
-void sendSensorData();
+void readSensor();
 void setupSensor();
 
-const char *ssid = "stoenka";
-const char *password = "topavem2020";
+const char *ssid = "Vegova RVP4";
+const char *password = "Vegova_RVP4";
 
 DHT *dht;
 Settings settings;
@@ -35,7 +35,7 @@ void setupWifi() {
 
 void onConnect(AsyncEventSourceClient *client) {
   Serial.println("New client connected");
-  sendSensorData();
+  readSensor();
 }
 
 void setupServer() {
@@ -44,11 +44,30 @@ void setupServer() {
     return;
   }
 
+  // POST /set - set the output pin
+  AsyncCallbackJsonWebHandler *setHandler = new AsyncCallbackJsonWebHandler(
+      "/set", [](AsyncWebServerRequest *req, JsonVariant &json) {
+        if (json["pin"].isNull() || json["value"].isNull()) {
+          req->send(400);
+          return;
+        }
+        digitalWrite(json["pin"].as<int>(), json["value"].as<bool>());
+        readSensor();
+        req->send(200);
+      });
+  server.addHandler(setHandler);
+
   // GET /settings - Get the current settings
   server.on("/settings", HTTP_GET, [](AsyncWebServerRequest *req) {
     StaticJsonDocument<200> json;
     json["refreshInterval"] = settings.getRefreshInterval();
     json["sensorPin"] = settings.getSensorPin();
+    json["onTemp"] = settings.getOnTemp();
+    json["onHum"] = settings.getOnHum();
+    json["tempOffset"] = settings.getTempOffset();
+    json["humOffset"] = settings.getHumOffset();
+    json["heaterOn"] = settings.getHeaterOn();
+    json["dehumOn"] = settings.getDehumOn();
 
     String buffer;
     serializeJson(json, buffer);
@@ -67,10 +86,30 @@ void setupServer() {
               settings.setSensorPin(json["sensorPin"].as<unsigned int>());
               setupSensor();
             }
+            if (!json["onTemp"].isNull()) {
+              settings.setOnTemp(json["onTemp"].as<float>());
+            }
+            if (!json["onHum"].isNull()) {
+              settings.setOnHum(json["onHum"].as<float>());
+            }
+            if (!json["tempOffset"].isNull()) {
+              settings.setTempOffset(json["tempOffset"].as<float>());
+            }
+            if (!json["humOffset"].isNull()) {
+              settings.setHumOffset(json["humOffset"].as<float>());
+            }
             req->send(200);
           });
   server.addHandler(settingsHandler);
 
+  server.onNotFound([](AsyncWebServerRequest *request) {
+    if (request->method() == HTTP_OPTIONS) {
+      request->send(200);
+    } else {
+      request->send(404);
+    }
+  });
+
   events.onConnect(onConnect);
   server.addHandler(&events);
   server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html");
@@ -84,10 +123,33 @@ void setupSensor() {
   dht->begin();
 }
 
-void sendSensorData() {
+void readSensor() {
+  float temp = dht->readTemperature();
+  float hum = dht->readHumidity();
+
+  float onTemp = settings.getOnTemp();
+  float offTemp = onTemp + settings.getTempOffset();
+
+  float onHum = settings.getOnHum();
+  float offHum = onHum + settings.getHumOffset();
+
+  if (temp <= onTemp) {
+    digitalWrite(16, HIGH);
+  } else {
+    digitalWrite(16, LOW);
+  }
+
+  if (hum >= onHum) {
+    digitalWrite(17, HIGH);
+  } else {
+    digitalWrite(17, LOW);
+  }
+
   StaticJsonDocument<200> json;
-  json["temp"] = (int)(dht->readTemperature() * 100 + 0.5) / 100.0;
-  json["hum"] = dht->readHumidity();
+  json["temp"] = (int)(temp * 100 + 0.5) / 100.0;
+  json["hum"] = hum;
+  json["out1"] = (bool)digitalRead(16);
+  json["out2"] = (bool)digitalRead(17);
 
   String buffer;
   serializeJson(json, buffer);
@@ -98,6 +160,9 @@ void sendSensorData() {
 void setup() {
   Serial.begin(115200);
 
+  pinMode(16, OUTPUT);
+  pinMode(17, OUTPUT);
+
   setupWifi();
   setupServer();
 
@@ -112,6 +177,6 @@ void loop() {
   unsigned long currMillis = millis();
   if (currMillis - prevMillis > settings.getRefreshInterval()) {
     prevMillis = currMillis;
-    sendSensorData();
+    readSensor();
   }
 }