diff --git a/README.md b/README.md index 52972de..c5ded4b 100644 --- a/README.md +++ b/README.md @@ -3,23 +3,25 @@ ![FritzGate screenshot](docs/FritzGate_Screenshot.svg) +## Demo + +You can view a demo of the FritzGate interface [here](https://vnau.github.io/FritzGate/). + ## Features -- **FRITZ!Box integration:** Connect and control thermostats directly from Fritzbox. FritzGate does not affect weekly plans or other thermostat settings. +- **FRITZ!Box integration:** FritzGate does not affect weekly plans or other thermostat settings. Connect and control thermostats directly from FritzBox. - **Binding with external Temperature Sensors:** Utilize third party temperature sensors placed in living spaces for precise temperature control in a room. FritzGate automatically corrects temperature offsets of thermostat sensors. - **Embedded Web Server:** Easily manage thermostat-sensor bindings, monitor temperature and humidity through a user-friendly web interface. ## Advantages - **Easy Configuration:** Set up effortlessly by scanning a QR code with the Ai Thinker camera for Wi-Fi credentials. -- **Cost-Effective Hardware:** Utilize the budget-friendly and energy efficient ESP32-CAM board. -- **Can be Powered by FRITZ!Box:** Leverage the convenience of powering the device directly from the FRITZ!Box USB port, eliminating the need for additional space and power sources. -- **Optimized for Climate Control with third party Sensors:** Use any of [70+ models](https://decoder.theengs.io/devices/devices.html) of temperature sensors for precise climate control in living spaces, ensuring optimal comfort and energy savings. +- **Cost-Effective Hardware:** Utilize the budget-friendly and energy efficient **ESP32-CAM** board. +- **Powered by FRITZ!Box:** Leverage the convenience of powering the device directly from the *FRITZ!Box** USB port, eliminating the need for additional space and power sources. +- **70+ Supported Sensors:** Use any of [70+ models](https://decoder.theengs.io/devices/devices.html) of temperature sensors for precise climate control in living spaces, ensuring optimal comfort and energy savings. - **Embedded Web Server:** Easily manage thermostat-sensor bindings through the embedded web server, providing an intuitive interface for users to customize and monitor their smart heating system. - **Can be used without FRITZ!Box:** If you're not authorized in FritzBox, you can still monitor temperature and humidity from nearby temperature sensors. -This project caters to users looking for a straightforward, cost-effective, and energy-efficient solution for smart thermostat control. With the added flexibility of integrating third party temperature sensors, users can achieve optimal climate control in their living spaces. The easy configuration process and minimal hardware requirements make **FritzGate** an ideal choice for DIY enthusiasts seeking a hassle-free smart home solution. - ## Getting Started ### Hardware Requirements @@ -28,7 +30,7 @@ This project caters to users looking for a straightforward, cost-effective, and - [Temperature sensors](https://decoder.theengs.io/devices/devices.html) - Fritzbox with compatible thermostats (optional) -### Installation Steps +### Installation 1. Clone the repository to your local machine: diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 03632e4..cd8a11c 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -13,6 +13,7 @@ "@tsconfig/svelte": "^5.0.2", "bootstrap": "^5.3.2", "cypress": "^13.6.0", + "jsooner": "^1.0.4", "sass": "^1.69.5", "svelte": "^4.2.19", "svelte-check": "^3.6.0", @@ -2338,6 +2339,12 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/jsooner": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/jsooner/-/jsooner-1.0.4.tgz", + "integrity": "sha512-WetdPbCFjzcI8dcH70MAaayZrCUL2xNdJA+GsZX7UnQSlbAmYQsT41j1AD2Oba5WQPLoz0BANm80Cx1xXbxVEw==", + "dev": true + }, "node_modules/jsprim": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-2.0.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index 7cc6565..b76a36b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -17,6 +17,7 @@ "@tsconfig/svelte": "^5.0.2", "bootstrap": "^5.3.2", "cypress": "^13.6.0", + "jsooner": "^1.0.4", "sass": "^1.69.5", "svelte": "^4.2.19", "svelte-check": "^3.6.0", diff --git a/frontend/public/api/status b/frontend/public/status.json similarity index 100% rename from frontend/public/api/status rename to frontend/public/status.json diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index 48ddaeb..75324a9 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -6,17 +6,11 @@ import PageSensors from "./Pages/PageSensors.svelte"; import PageThermostats from "./Pages/PageThermostats.svelte"; import WaitBox from "./lib/WaitBox.svelte"; - import type { SensorStatus, StatusData } from "./interfaces"; + import type { ApiService, SensorStatus, StatusData } from "./interfaces"; import github from "./assets/github-mark.svg"; - const host = window.location.host.split(":")[0]; - const apiUrl = - host == "localhost" || host == "127.0.0.1" - ? "http://fritzgate/api/" - : host == "vnau.github.io" - ? "/FritzGate/api/" - : "/api/"; - //const apiUrl = "/api/"; + export let api: ApiService; + export let baseUrl: string; let data: StatusData; let busy = false; let timer: NodeJS.Timeout; @@ -30,17 +24,14 @@ } async function fetchData() { - const controller = new AbortController(); - const timeoutId = setTimeout(() => { - controller.abort(); - busy = true; - }, 1000); try { - const sensorsJson = await fetch(apiUrl + "status", { - signal: controller.signal, - }); - const newData: StatusData = await sensorsJson.json(); - newData?.sensors?.forEach((s) => { + const newData: StatusData | undefined = await api.fetchStatus(); + if (!newData) { + busy = true; + return; + } + + newData.sensors?.forEach((s) => { // fix rssi 0 to undefined (not connected) s.rssi = s.rssi ? s.rssi : undefined!; }); @@ -58,9 +49,9 @@ data = newData; busy = false; } catch { + busy = true; // request failed } finally { - clearTimeout(timeoutId); timer = setTimeout(fetchData, 2000); } } @@ -77,8 +68,12 @@