diff --git a/ESP source.code-workspace b/ESP source.code-workspace
new file mode 100644
index 0000000..1c9b3a9
--- /dev/null
+++ b/ESP source.code-workspace
@@ -0,0 +1,63 @@
+{
+ "folders": [
+ {
+ "path": ".",
+ "name": "ESP source"
+ },
+ ],
+ "settings": {
+ "files.exclude": {
+ "**/.git": true,
+ "WebConfigUI": true
+ },
+ "files.associations": {
+ "array": "cpp",
+ "deque": "cpp",
+ "string": "cpp",
+ "unordered_map": "cpp",
+ "unordered_set": "cpp",
+ "vector": "cpp",
+ "initializer_list": "cpp",
+ "functional": "cpp",
+ "bitset": "cpp",
+ "regex": "cpp",
+ "utility": "cpp",
+ "*.tcc": "cpp",
+ "cmath": "cpp",
+ "cstdio": "cpp",
+ "new": "cpp",
+ "algorithm": "cpp",
+ "random": "cpp",
+ "cctype": "cpp",
+ "clocale": "cpp",
+ "cstdarg": "cpp",
+ "cstddef": "cpp",
+ "cstdint": "cpp",
+ "cstdlib": "cpp",
+ "cstring": "cpp",
+ "ctime": "cpp",
+ "cwchar": "cpp",
+ "cwctype": "cpp",
+ "exception": "cpp",
+ "system_error": "cpp",
+ "tuple": "cpp",
+ "type_traits": "cpp",
+ "fstream": "cpp",
+ "iomanip": "cpp",
+ "iosfwd": "cpp",
+ "iostream": "cpp",
+ "istream": "cpp",
+ "limits": "cpp",
+ "memory": "cpp",
+ "ostream": "cpp",
+ "numeric": "cpp",
+ "sstream": "cpp",
+ "stdexcept": "cpp",
+ "streambuf": "cpp",
+ "cinttypes": "cpp",
+ "typeinfo": "cpp"
+ },
+ "editor.detectIndentation": false,
+ "editor.insertSpaces": false
+ }
+}
\ No newline at end of file
diff --git a/WebConfigUI/.gitignore b/WebConfigUI/.gitignore
new file mode 100644
index 0000000..a7ca8fd
--- /dev/null
+++ b/WebConfigUI/.gitignore
@@ -0,0 +1,3 @@
+node_modules/**
+build/**
+package-lock.json
\ No newline at end of file
diff --git a/WebConfigUI/.vscode/tasks.json b/WebConfigUI/.vscode/tasks.json
new file mode 100644
index 0000000..11a0f08
--- /dev/null
+++ b/WebConfigUI/.vscode/tasks.json
@@ -0,0 +1,28 @@
+{
+ "version": "2.0.0",
+ "tasks": [
+ {
+ "type": "npm",
+ "script": "build",
+ "label": "npm: build",
+ "detail": "set NODE_ENV=production && set PURGE_FILES=1 && webpack --mode production",
+ },
+ {
+ "type": "shell",
+ "label": "Build and copy",
+ "command": "copy",
+ "dependsOn": "npm: build",
+ "dependsOrder": "sequence",
+ "options": {
+ "cwd": "${workspaceFolder}"
+ },
+ "args": [
+ "${workspaceFolder}\\build\\index.js.gz",
+ "\"${workspaceFolder}\\../data/index.js.gz\"",
+ "/Y"
+ ],
+ "group": "build",
+ "problemMatcher": []
+ }
+ ]
+}
\ No newline at end of file
diff --git a/WebConfigUI/WebUI.code-workspace b/WebConfigUI/WebUI.code-workspace
new file mode 100644
index 0000000..df281b1
--- /dev/null
+++ b/WebConfigUI/WebUI.code-workspace
@@ -0,0 +1,13 @@
+{
+ "folders": [
+ {
+ "path": ".",
+ "name": "Web UI"
+ }
+ ],
+ "settings": {
+ "editor.detectIndentation": false,
+ "editor.insertSpaces": false,
+ "editor.tabSize": 2
+ }
+}
\ No newline at end of file
diff --git a/WebConfigUI/babel.config.json b/WebConfigUI/babel.config.json
new file mode 100644
index 0000000..b5c4c08
--- /dev/null
+++ b/WebConfigUI/babel.config.json
@@ -0,0 +1,4 @@
+{
+ "presets": ["@babel/preset-env", "@babel/preset-react"],
+ "plugins": ["@babel/plugin-transform-runtime"]
+}
diff --git a/WebConfigUI/index.html b/WebConfigUI/index.html
new file mode 100644
index 0000000..b037a25
--- /dev/null
+++ b/WebConfigUI/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ LED Pixel Clock Configuration
+
+
+
+
+
+
diff --git a/WebConfigUI/package.json b/WebConfigUI/package.json
new file mode 100644
index 0000000..e6bf72c
--- /dev/null
+++ b/WebConfigUI/package.json
@@ -0,0 +1,43 @@
+{
+ "name": "web-config-ui",
+ "version": "1.0.0",
+ "description": "",
+ "main": "src/main.jsx",
+ "scripts": {
+ "dev": "set NODE_ENV=development && set PURGE_FILES=0 && vite",
+ "build": "set NODE_ENV=production && set PURGE_FILES=1 && webpack --mode production",
+ "start": "set NODE_ENV=development && set PURGE_FILES=0 && webpack serve --mode development"
+ },
+ "author": "",
+ "license": "ISC",
+ "devDependencies": {
+ "@babel/core": "^7.13.15",
+ "@babel/plugin-transform-runtime": "^7.13.15",
+ "@babel/preset-env": "^7.13.15",
+ "@babel/preset-react": "^7.13.13",
+ "@headlessui/react": "^1.0.0",
+ "@tailwindcss/forms": "^0.3.2",
+ "autoprefixer": "^10.2.5",
+ "babel-loader": "^8.2.2",
+ "brotli-webpack-plugin": "^1.1.0",
+ "compression-webpack-plugin": "^7.1.2",
+ "css-loader": "^5.2.4",
+ "html-webpack-plugin": "^5.3.1",
+ "postcss": "^8.2.10",
+ "postcss-loader": "^5.2.0",
+ "postcss-preset-env": "^6.7.0",
+ "style-loader": "^2.0.0",
+ "tailwindcss": "^2.1.1",
+ "vite": "^2.2.1",
+ "webpack": "^5.34.0",
+ "webpack-cli": "^4.6.0",
+ "webpack-dev-server": "^3.11.2"
+ },
+ "dependencies": {
+ "@heroicons/react": "^1.0.1",
+ "esbuild": "^0.11.13",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
+ "react-router-dom": "^5.2.0"
+ }
+}
diff --git a/WebConfigUI/postcss.config.js b/WebConfigUI/postcss.config.js
new file mode 100644
index 0000000..d64cc37
--- /dev/null
+++ b/WebConfigUI/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+};
diff --git a/WebConfigUI/src/App.jsx b/WebConfigUI/src/App.jsx
new file mode 100644
index 0000000..dcbfcab
--- /dev/null
+++ b/WebConfigUI/src/App.jsx
@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from "react";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+
+import Navigation from "./sites/Navigation";
+import WIFI_setup from "./sites/WIFI-setup";
+import Settings from "./sites/Settings";
+import Dialog from './components/Dialog';
+
+export default function App() {
+ const [saveResponse, setSaveResponse] = useState("ERROR: Not saved");
+ const [dialogShown, setDialogShown] = useState(false);
+
+ // Function for fetching the config file from the server
+ const getConfigFile = async (fileUrl, hook) => {
+ const requestOptions = {
+ method: 'GET',
+ headers: { 'Content-Type': 'application/json' }
+ };
+ const response = await fetch(fileUrl, requestOptions);
+ if (!response.ok) {
+ console.log("Error while getting config file: " + response.statusText);
+ return;
+ }
+ const parsedJson = await response.json();
+ hook(parsedJson);
+ }
+
+ const putConfigFile = async (fileUrl, value) => {
+ console.log("Putting: " + value)
+ console.log("To: " + fileUrl)
+ const requestOptions = {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: value
+ };
+ const response = await fetch(fileUrl, requestOptions);
+ if (!response.ok) {
+ console.log("Error while putting config file: " + response.statusText);
+ return false;
+ }
+ setSaveResponse(await response.text());
+ setDialogShown(true);
+ return true;
+ }
+
+
+ const handleSubmit = (domain, values, setter) => {
+ putConfigFile(domain, values);
+ if(setter != null)
+ {
+ getConfigFile(domain + '.json', setter);
+ }
+ }
+
+ return (
+
+
+
+ } />
+
+ handleSubmit(d, v, null)}/>} />
+
+ getConfigFile('UI_definitions.json', setter)} getValues={(setter)=>getConfigFile('BaseConfig.json', setter)}>
+ General Settings
+ } />
+
+ getConfigFile('UI_definitions.json', setter)} getValues={(setter)=>getConfigFile('ColorConfig.json', setter)}>
+ Color Settings
+ } />
+
+ getConfigFile('UI_definitions.json', setter)} getValues={(setter)=>getConfigFile('HWConfig.json', setter)}>
+ Hardware Settings
+ } />
+
+
+
+
+ );
+}
diff --git a/WebConfigUI/src/components/Dialog.jsx b/WebConfigUI/src/components/Dialog.jsx
new file mode 100644
index 0000000..9e3daa8
--- /dev/null
+++ b/WebConfigUI/src/components/Dialog.jsx
@@ -0,0 +1,87 @@
+import { Dialog, Transition } from "@headlessui/react";
+import React, { Fragment, useRef} from "react";
+
+export default function MyModal(props) {
+ let OkayButtonRef = useRef();
+
+ props.type == "OK/Cancel"
+
+ let cancelButton = ""
+ let okayButtonLabel = "OK"
+
+ if(props.confirmMessage)
+ {
+ okayButtonLabel = props.confirmMessage
+ }
+
+ if(props.type == "OK/Cancel")
+ {
+ cancelButton = (
+
+ )
+ }
+
+ return (
+
+
+
+ );
+}
diff --git a/WebConfigUI/src/components/SettingsForm.jsx b/WebConfigUI/src/components/SettingsForm.jsx
new file mode 100644
index 0000000..df3a3a9
--- /dev/null
+++ b/WebConfigUI/src/components/SettingsForm.jsx
@@ -0,0 +1,271 @@
+import React, { Fragment, useEffect, useState } from "react";
+import Dialog from '../components/Dialog'
+import { Listbox, Transition } from '@headlessui/react'
+import { CheckIcon, SelectorIcon } from '@heroicons/react/solid'
+
+
+const loadConfig = (UIDefinition, InitialValues) => {
+ const settings = [...UIDefinition];
+ UIDefinition.forEach((element, index) => {
+ settings[index].value = InitialValues[element.target];
+ });
+ return settings;
+}
+
+const SettingsForm = (props) => {
+ const [Settings, setSettings] = useState([]);
+ const [Values, setValues] = useState([]);
+ const [dialogShown, setDialogShown] = useState(false);
+
+ useEffect(() => {
+ props.getUI((value)=>{
+ setSettings(value[props.domain]);
+ });
+ props.getValues(setValues);
+ }, []);
+
+ const handleSubmit = (event) => {
+ event.preventDefault();
+ setDialogShown(true);
+ }
+
+ const handleDialogClose = (result) => {
+ setDialogShown(false);
+ if(result == true)
+ {
+ let results = {};
+ Settings.forEach((setting, i) => {
+ if(Settings[i].type == "color")
+ {
+ results[setting.target] = toColorValue(Values[setting.target]);
+ }
+ else
+ {
+ results[setting.target] = Values[setting.target];
+ }
+ });
+ props.onSubmit(props.domain, JSON.stringify(results));
+ }
+ }
+
+ const valueChangedHandler = (event, target) => {
+ const newSettingValue = {...Values};
+ const targetSettingIndex = Settings.findIndex(p => p.target === target);
+ const setting = Settings[targetSettingIndex];
+
+ const newValue = event.target.value;
+ switch(setting.type)
+ {
+ case "bool":
+ newSettingValue[target] = event.target.checked;
+ break;
+ case "float":
+ case "int":
+ if(isNaN(newValue) || (newValue < setting.min || newValue > setting.max) && newValue != "" || newValue.includes("e") || (newValue.includes(".") && setting.type === "int"))
+ {
+ console.log("Invalid value");
+ return;
+ }
+ newSettingValue[target] = parseInt(newValue, 10);
+ case "color":
+ parseRGBColor(target);
+ switch (event.target.id) {
+ case "r":
+ newSettingValue[target].r = event.target.value;
+ break;
+ case "g":
+ newSettingValue[target].g = event.target.value;
+ break;
+ case "b":
+ newSettingValue[target].b = event.target.value;
+ break;
+ default:
+ break;
+ }
+ break;
+ default:
+ newSettingValue[target] = newValue;
+ break;
+ }
+ setValues(newSettingValue);
+ }
+
+ const isDisabled = (setting) => {
+ if("onlyIf" in setting)
+ {
+ const invert = setting.onlyIf.startsWith("!");
+ const onlyIfTarget = setting.onlyIf.replace("!", "");
+
+ const targetSettingIndex = Settings.findIndex(p => p.target === onlyIfTarget);
+ if(Settings[targetSettingIndex].type === "bool")
+ {
+ if(invert)
+ {
+ return Values[onlyIfTarget];
+ }
+ else
+ {
+ return !Values[onlyIfTarget];
+ }
+ }
+ }
+ return false;
+ }
+
+ const parseRGBColor = (target) => {
+ if(typeof(Values[target]) !== 'object' && Values[target] !== null)
+ {
+ const newSettingValue = {...Values};
+ newSettingValue[target] = toColor(Values[target]);
+ setValues(newSettingValue);
+ return newSettingValue[target];
+ }
+ return Values[target];
+ }
+
+ const toColor = (num) => {
+ const rgbColor = {
+ b: num & 0xFF,
+ g: (num & 0xFF00) >> 8,
+ r: (num & 0xFF0000) >> 16
+ }
+ return rgbColor;
+ }
+
+ const toColorStyle = (rgbColor) => {
+ return "rgba(" + [rgbColor.r, rgbColor.g, rgbColor.b, 1].join(",") + ")";
+ }
+
+ const toColorValue = (rgbColor) => {
+ return (rgbColor.r << 16) + (rgbColor.g << 8) + rgbColor.b;
+ }
+
+ const settingsForm = Settings.map((settingEntry, index) => {
+ const Disabled = isDisabled(settingEntry);
+ let stepSize = 1;
+ switch(settingEntry.type)
+ {
+ case "string":
+ return (
+
+
+
+ valueChangedHandler(e, settingEntry.target)} autoComplete="off" type="text"/>
+
+
+ valueChangedHandler(e, settingEntry.target)}/>
+
+
+ )
+ case "float":
+ stepSize = 0.1
+ case "int":
+ return (
+
+
+
+ valueChangedHandler(e, settingEntry.target)} autoComplete="off" type="number"/>
+
+
+
+
+
+
+
+
valueChangedHandler(e, settingEntry.target)}>
+
+
+ {selectedItem}
+
+
+
+
+
+ {listboxOptions}
+
+
+
+
+
+
+
+
+
+
LED Pixel Clock
+
+
+
+
+
+
+
{props.children}
+
+
+
+
+
+
+
Connect to your WIFI
+
+
+
+
+