Work

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()],
 });