New settings component with dynamically generated UI for #5

WebConfigUI/src/components/Dialog.jsx

@@ -1,33 +1,42 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { Fragment, useEffect, useRef, useState } from "react";
-import { useTimeoutFn } from "react-use";
+import React, { Fragment, useEffect, useRef, useState } from "react";
 
-export default function MyModal() {
-  const [open, setOpen] = useState(false);
-  const cancelButtonRef = useRef();
+export default function MyModal(props) {
+  let OkayButtonRef = useRef();
 
-  // This code makes the demo automatically show on initial render
-  let [, clear, resetIsShowing] = useTimeoutFn(() => setOpen(true), 750);
-  useEffect(() => {
-    clear();
-    setOpen(true);
-  }, []);
+  props.type == "OK/Cancel"
 
-  function closeModal() {
-    setOpen(false);
-    resetIsShowing();
+  let cancelButton = ""
+  let okayButtonLabel = "OK"
+
+  if(props.confirmMessage)
+  {
+    okayButtonLabel = props.confirmMessage
+  }
+
+  if(props.type == "OK/Cancel")
+  {
+    cancelButton = (
+      <button
+        type="button"
+        className="w-full inline-flex text-sm font-medium btn btn-secondary uppercase"
+        onClick={() => props.onClose(false)}
+      >
+        Cancel
+      </button>
+    )
   }
 
   return (
-    <Transition show={open} as={Fragment}>
+    <Transition show={props.show} as={Fragment}>
       <Dialog
         as="div"
         id="modal"
         className="fixed inset-0 z-10 overflow-y-auto"
-        initialFocus={cancelButtonRef}
         static
-        open={open}
-        onClose={closeModal}
+        initialFocus={OkayButtonRef}
+        open={props.show}
+        onClose={() => props.onClose(false)}
       >
         <div className="min-h-screen px-4 text-center">
           <Transition.Child
@@ -39,16 +48,8 @@ export default function MyModal() {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Dialog.Overlay className="fixed inset-0" />
+            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"/>
           </Transition.Child>
-
-          {/* This element is to trick the browser into centering the modal contents. */}
-          <span
-            className="inline-block h-screen align-middle"
-            aria-hidden="true"
-          >
-            &#8203;
-          </span>
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -58,28 +59,24 @@ export default function MyModal() {
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <div className="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
+            <div className="inline-block w-full sm:max-w-lg p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
               <Dialog.Title
-                as="h3"
-                className="text-lg font-medium leading-6 text-gray-900"
+                as="h1"
+                className="text-2xl font-medium text-gray-900"
               >
-                Payment successful
+                {props.title}
               </Dialog.Title>
-              <div className="mt-2">
-                <p className="text-sm text-gray-500">
-                  Your payment has been successfully submitted. We’ve sent your
-                  an email with all of the details of your order.
+              <Dialog.Description as="div" className="mt-2">
+                <p className="text-lg text-gray-500">
+                  {props.children}
                 </p>
-              </div>
+              </Dialog.Description>
 
-              <div className="mt-4">
-                <button
-                  type="button"
-                  className="inline-flex justify-center px-4 py-2 text-sm font-medium text-blue-900 bg-blue-100 border border-transparent rounded-md hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"
-                  onClick={closeModal}
-                >
-                  Got it, thanks!
+              <div className="mt-4 space-y-4">
+                <button type="button" ref={OkayButtonRef} onClick={() => props.onClose(true)} className="w-full inline-flex btn btn-primary float-right uppercase">
+                  {okayButtonLabel}
                 </button>
+                {cancelButton}
               </div>
             </div>
           </Transition.Child>

WebConfigUI/src/css/tailwind.css

@@ -26,3 +26,18 @@
         @apply rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 transform transition;
     }
 }
+
+@layer components {
+    .btn {
+        @apply justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
+    }
+
+    .btn-primary {
+        @apply text-white bg-indigo-600 hover:bg-indigo-700
+
+    }
+
+    .btn-secondary {
+        @apply text-indigo-900 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-400
+    }
+}

WebConfigUI/src/data/BaseConfig.json

@@ -0,0 +1,28 @@
+{
+    "ENABLE_BLYNK": true,
+    "BLYNK_AUTH_TOKEN": "AUTH_TOKEN_GOES_HERE",
+    "BLYNK_SERVER": "blynk-cloud.com",
+    "OTA_UPLOAD": true,
+    "HOST_NAME": "LED-Shelf",
+    "NUM_RETRIES": 50,
+    "SMART_CONFIG": true,
+    "NTP_SERVER": "pool.ntp.org",
+    "TIMEZONE_INFO": "CET-1CEST-2,M3.5.0/02:00:00,M10.5.0/03:00:00",
+    "TIME_SYNC_INTERVAL": 1800,
+    "TIMER_FLASH_TIME": false,
+    "TIMER_FLASH_COUNT": 10,
+    "ALARM_NOTIFICATION_PERIOD": 600,
+    "NOTIFICATION_BRIGHTNESS": 125,
+    "TIME_UPDATE_INTERVAL":	500,
+    "DISPLAY_0_AT_MIDNIGHT": false,
+    "DISPLAY_SWITCH_OFF_AT_0": false,
+    "USE_24_HOUR_FORMAT": false,
+    "LOADING_ANIMATION_DURATION": 3000,
+    "BRIGHTNESS_INTERPOLATION": 3000,
+    "ANIMATION_TARGET_FPS": 60,
+    "ANIMATION_AFTERGLOW": 0.2,
+    "DOT_FLASH_SPEED": 2000,
+    "DOT_FLASH_INTERVAL": 4000,
+    "NUM_SEPARATION_DOTS": 2,
+    "DIGIT_ANIMATION_SPEED": 900
+}

WebConfigUI/src/data/BaseConfig_definition.js

@@ -0,0 +1,164 @@
+const definition = [
+    {
+      label: "Enable Blynk functionality",
+      type: "bool",
+      target: "ENABLE_BLYNK"
+    },
+    {
+      label: "Blynk Auth token",
+      type: "string",
+      target: "BLYNK_AUTH_TOKEN",
+      onlyIf: "ENABLE_BLYNK"
+    },
+    {
+      label: "Blynk server URL",
+      type: "string",
+      target: "BLYNK_SERVER",
+      onlyIf: "ENABLE_BLYNK"
+    },
+    {
+      label: "Enable OTA Updates",
+      type: "bool",
+      target: "OTA_UPLOAD"
+    },
+    {
+      label: "Host name",
+      type: "string",
+      target: "HOST_NAME"
+    },
+    {
+      label: "Number of retries for WIFI reconnection before smart config is started (if enabled)",
+      type: "int",
+      target: "NUM_RETRIES",
+      min: 1,
+      max: 1000
+    },
+    {
+      label: "Enable Smart config if WIFI connection was lost",
+      type: "bool",
+      target: "SMART_CONFIG"
+    },
+    {
+      label: "NTP server URL",
+      type: "string",
+      target: "NTP_SERVER"
+    },
+    {
+      label: "Enter a configuration string for you timezone according to this website: https://remotemonitoringsystems.ca/time-zone-abbreviations.php",
+      type: "string",
+      target: "TIMEZONE_INFO"
+    },
+    {
+      label: "Time in seconds for the interval in which the time should be synchronized with the time (NTP) server",
+      type: "int",
+      target: "TIME_SYNC_INTERVAL",
+      min: 1,
+      max: 4294967295
+    },
+    {
+      label: "Flash the current time in case a timer is expired instead of flashing 00:00",
+      type: "bool",
+      target: "TIMER_FLASH_TIME"
+    },
+    {
+      label: "Number of flashes until an alarm is considered expired and the system goes back to normal",
+      type: "int",
+      target: "TIMER_FLASH_COUNT",
+      min: 1,
+      max: 65535
+    },
+    {
+      label: "For how long the Display should flash when an alarm was fired in seconds. For example: An Alarm for 12:00 would stop flashing at 12:01 if this was set to 60",
+      type: "int",
+      target: "ALARM_NOTIFICATION_PERIOD",
+      min: 1,
+      max: 65535
+    },
+    {
+      label: "How bright the clock should flash when an alarm or timer was triggered",
+      type: "int",
+      target: "NOTIFICATION_BRIGHTNESS",
+      min: 0,
+      max: 255
+    },
+    {
+      label: "How often the time on the displays is updated in MS",
+      type: "int",
+      target: "TIME_UPDATE_INTERVAL",
+      min: 1,
+      max: 65535
+    },
+    {
+      label: "If turned on the display will show 0 at midnight and 12 otherwise",
+      type: "bool",
+      target: "DISPLAY_0_AT_MIDNIGHT",
+    },
+    {
+      label: "If turned on the higher digit displays will turn off in case they would show 0",
+      type: "bool",
+      target: "DISPLAY_SWITCH_OFF_AT_0"
+    },
+    {
+      label: "If set to true 24 hour format will be used. Only usable if the hour display has all 7 segments",
+      type: "bool",
+      target: "USE_24_HOUR_FORMAT"
+    },
+    {
+      label: "The time it shall take for one iteration of the loading animation",
+      type: "int",
+      target: "LOADING_ANIMATION_DURATION",
+      min: 1,
+      max: 65535
+    },
+    {
+      label: "How fast the brightness interpolation shall react to brightness changes",
+      type: "int",
+      target: "BRIGHTNESS_INTERPOLATION",
+      min: 1,
+      max: 65535
+    },
+    {
+      label: "Target frames per second for the smoothness of animations",
+      type: "int",
+      target: "ANIMATION_TARGET_FPS",
+      min: 1,
+      max: 255
+    },
+    {
+      label: "Length of sooth animation transition from fully on to black and vice versa in percent. NOTE: The higher this number the less obvious easing effects like bounce or elastic will be",
+      type: "float",
+      target: "ANIMATION_AFTERGLOW",
+      min: 0,
+      max: 1
+    },
+    {
+      label: "Length of the dot/s fading animation in MS. One flash fades in and out",
+      type: "int",
+      target: "DOT_FLASH_SPEED",
+      min: 1,
+      max: 65535
+    },
+    {
+      label: "Interval in MS in which the dot/s should flash",
+      type: "int",
+      target: "DOT_FLASH_INTERVAL",
+      min: 1,
+      max: 65535
+    },
+    {
+      label: "Number of separation dots that shall be displayed",
+      type: "int",
+      target: "NUM_SEPARATION_DOTS",
+      min: 0,
+      max: 2
+    },
+    {
+      label: "The time it takes in MS for one digit to morph into another",
+      type: "int",
+      target: "DIGIT_ANIMATION_SPEED",
+      min: 1,
+      max: 65535
+    },
+];
+
+export default definition;

WebConfigUI/src/sites/Navigation.jsx

@@ -5,18 +5,20 @@ import React from "react";
 const pages = [
   {link: "/WIFI", label: "WIFI Setup"},
   {link: "/Settings", label: "Settings"},
+  {link: "/", label: "Colors"},
+  {link: "/", label: "Display Setup"},
+  {link: "/", label: "Animation Setup"},
 ];
 
 function NavigationMenu(props) {
-
   return (
     <div>
       <h1 className="text-6xl w-full text-center my-8">LED Pixel Clock</h1>
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
         <Menu as="div" className="">
           <Menu.Items as="div" static className="mb-0 space-y-4">
             {pages.map((page) =>(
-              <Menu.Item as="div" key={page.link} className="block items-center">
+              <Menu.Item as="div" key={page.label} className="block items-center">
                 {({ active }) => (
                   <Link to={page.link} className={`${
                     active ? "bg-indigo-500 text-white" : "text-gray-900"}