quasar color picker replaced by iro js

WEBUI_SRC/src/components/ColorCard.vue

@@ -5,13 +5,37 @@
     </q-card-section>
     <q-card-section class="q-pt-none">
       <div class="q-pa-md">
-        <q-color v-model="hex" :format-model="rgb" @change="UpdateColor" />
-      </div>
         <div class="colorPicker"></div>
+        <div id="values"></div>
+      </div>
     </q-card-section>
   </q-card>
 </template>
 
+<style>
+#values {
+  font-family: monospace;
+  line-height: 150%;
+}
+
+.swatchGrid {
+  display: grid;
+  grid-template-columns: repeat(8, 28px);
+  grid-template-rows: repeat(2, 28px);
+  grid-gap: 6px;
+  margin-bottom: 1em;
+}
+
+.swatch {
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+a {
+  color: MediumSlateBlue;
+}
+</style>
+
 <script setup>
 import { computed, onUnmounted, reactive, onMounted, ref } from "vue";
 import { PostData } from "components/webguicomp/network";
@@ -22,40 +46,74 @@ var colorPicker;
 defineOptions({
   name: 'ColorCard'
 })
-let hex = ref('#335566');
-const init = {
-  RGB: { R: 0, G: 0, B: 0 }
-}
 
-function UpdateColor() {
+const init = {
-  console.log(hex.value);
+  color: { r: 0, g: 0, b: 0 }
-  let m = hex.value.match(/^#([0-9a-f]{6})$/i)[1];
-  console.log(m);
-  if (m) {
-    data.RGB.R = parseInt(m.substr(0, 2), 16);
-    data.RGB.G = parseInt(m.substr(2, 2), 16);
-    data.RGB.B = parseInt(m.substr(4, 2), 16);
-    PostData(data, 1, 0, null);
-  }
 }
 
 onMounted(() => {
   colorPicker = new iro.ColorPicker(".colorPicker", {
-    width: 280,
+    width: 320,
-    color: "rgb(255, 0, 0)",
+    color: "rgb(127, 255, 127)",
     borderWidth: 1,
-    borderColor: "#fff",
+    borderColor: "#aaaaaa",
+    layout: [
+      {
+        component: iro.ui.Box,
+      },
+      {
+        component: iro.ui.Slider,
+        options: {
+          id: 'hue-slider',
+          sliderType: 'hue'
+        }
+      },
+      {
+        component: iro.ui.Slider,
+        options: {
+          sliderType: 'kelvin',
+        }
+      },
+      {
+        component: iro.ui.Slider,
+        options: {
+          sliderType: 'saturation'
+        }
+      },
+      {
+        component: iro.ui.Slider,
+        options: {
+          sliderType: 'red'
+        }
+      },
+      {
+        component: iro.ui.Slider,
+        options: {
+          sliderType: 'green'
+        }
+      },
+      {
+        component: iro.ui.Slider,
+        options: {
+          sliderType: 'blue'
+        }
+      },
+    ]
   });
-  colorPicker.on('color:change', function (color) {
+  colorPicker.on('input:end', function (color) {
-    // log the current color as a HEX string
+    data.color = color.rgb;
-    hex.value = color.hexString;
+    PostData(data, 1, 0, null);
-    UpdateColor();
   });
+  var values = document.getElementById("values");
+  colorPicker.on(["color:init", "color:change"], function (color) {
+    values.innerHTML = [
+      "hex: " + color.hexString,
+      "rgb: " + color.rgbString,
+      "hsl: " + color.hslString,
+    ].join("<br>");
+  });
+
 })
-
-
-
 const data = reactive(init);
 PostData(data, 2, 0, null);
-
 </script>

main/main.c

@@ -5,7 +5,7 @@
 #include "AppConfiguration.h"
 
 //#define LED_STRIP_GPIO 21
-#define LED_STRIP_GPIO 33
+#define LED_STRIP_GPIO 35
 
 void UserMQTTEventHndlr(int idx, void *handler_args, esp_event_base_t base, int32_t event_id, void *event_data);
 void SaveUserConf();

main/src/RestApiHandlersApp.c

@@ -44,15 +44,15 @@ static int GammaCorrection(int input, float gamma)
     return (int) ((float) 255 * pow(((float) input / 255), gamma));
 }
 
-static void funct_RGB(char *argres, int rw)
+static void funct_color(char *argres, int rw)
 {
     struct jReadElement result;
     jRead(argres, "", &result);
     if (result.dataType == JREAD_OBJECT)
     {
-        int R = jRead_int(argres, "{'R'", 0);
+        int R = jRead_int(argres, "{'r'", 0);
-        int G = jRead_int(argres, "{'G'", 0);
+        int G = jRead_int(argres, "{'g'", 0);
-        int B = jRead_int(argres, "{'B'", 0);
+        int B = jRead_int(argres, "{'b'", 0);
 
         R = GammaCorrection(R, GAMMA_R);
         G = GammaCorrection(G, GAMMA_G);
@@ -63,9 +63,9 @@ static void funct_RGB(char *argres, int rw)
 
         struct jWriteControl jwc;
         jwOpen(&jwc, argres, VAR_MAX_VALUE_LENGTH, JW_OBJECT, JW_COMPACT);
-        jwObj_int(&jwc, "R", R);
+        jwObj_int(&jwc, "r", R);
-        jwObj_int(&jwc, "G", G);
+        jwObj_int(&jwc, "g", G);
-        jwObj_int(&jwc, "B", B);
+        jwObj_int(&jwc, "b", B);
         jwEnd(&jwc);
         jwClose(&jwc);
     }
@@ -77,7 +77,7 @@ const rest_var_t ApplicationVariables[] =
 
     {   0, "mytime", &funct_time, VAR_FUNCT, R, 0, 0},
     {   0, "myvar", &AppConfig.test, VAR_INT, R, 0, 0},
-    {   0, "RGB", &funct_RGB, VAR_FUNCT, R, 0, 0},
+    {   0, "color", &funct_color, VAR_FUNCT, R, 0, 0},
 
 };
 

sdkconfig

@@ -462,8 +462,8 @@ CONFIG_ESPTOOLPY_MONITOR_BAUD=115200
 # CONFIG_PARTITION_TABLE_SINGLE_APP_LARGE is not set
 # CONFIG_PARTITION_TABLE_TWO_OTA is not set
 CONFIG_PARTITION_TABLE_CUSTOM=y
-CONFIG_PARTITION_TABLE_CUSTOM_FILENAME="partitions_user_2ota_4M.csv"
+CONFIG_PARTITION_TABLE_CUSTOM_FILENAME="partitions_user_2ota_8M.csv"
-CONFIG_PARTITION_TABLE_FILENAME="partitions_user_2ota_4M.csv"
+CONFIG_PARTITION_TABLE_FILENAME="partitions_user_2ota_8M.csv"
 CONFIG_PARTITION_TABLE_OFFSET=0x8000
 CONFIG_PARTITION_TABLE_MD5=y
 # end of Partition Table

sdkconfig.old

@@ -1,6 +1,6 @@
 #
 # Automatically generated file. DO NOT EDIT.
-# Espressif IoT Development Framework (ESP-IDF)  Project Configuration
+# Espressif IoT Development Framework (ESP-IDF) 5.1.2 Project Configuration
 #
 CONFIG_SOC_MPU_MIN_REGION_SIZE=0x20000000
 CONFIG_SOC_MPU_REGIONS_MAX_NUM=8
@@ -502,7 +502,6 @@ CONFIG_COMPILER_STACK_CHECK_MODE_NONE=y
 #
 # CONFIG_APPTRACE_DEST_JTAG is not set
 CONFIG_APPTRACE_DEST_NONE=y
-# CONFIG_APPTRACE_DEST_UART0 is not set
 # CONFIG_APPTRACE_DEST_UART1 is not set
 # CONFIG_APPTRACE_DEST_UART2 is not set
 # CONFIG_APPTRACE_DEST_USB_CDC is not set
@@ -943,15 +942,18 @@ CONFIG_ESP_MAIN_TASK_AFFINITY_CPU0=y
 # CONFIG_ESP_MAIN_TASK_AFFINITY_NO_AFFINITY is not set
 CONFIG_ESP_MAIN_TASK_AFFINITY=0x0
 CONFIG_ESP_MINIMAL_SHARED_STACK_SIZE=2048
-# CONFIG_ESP_CONSOLE_UART_DEFAULT is not set
+CONFIG_ESP_CONSOLE_UART_DEFAULT=y
 # CONFIG_ESP_CONSOLE_USB_CDC is not set
-CONFIG_ESP_CONSOLE_USB_SERIAL_JTAG=y
+# CONFIG_ESP_CONSOLE_USB_SERIAL_JTAG is not set
 # CONFIG_ESP_CONSOLE_UART_CUSTOM is not set
 # CONFIG_ESP_CONSOLE_NONE is not set
-CONFIG_ESP_CONSOLE_SECONDARY_NONE=y
+# CONFIG_ESP_CONSOLE_SECONDARY_NONE is not set
+CONFIG_ESP_CONSOLE_SECONDARY_USB_SERIAL_JTAG=y
 CONFIG_ESP_CONSOLE_USB_SERIAL_JTAG_ENABLED=y
+CONFIG_ESP_CONSOLE_UART=y
 CONFIG_ESP_CONSOLE_MULTIPLE_UART=y
-CONFIG_ESP_CONSOLE_UART_NUM=-1
+CONFIG_ESP_CONSOLE_UART_NUM=0
+CONFIG_ESP_CONSOLE_UART_BAUDRATE=115200
 CONFIG_ESP_INT_WDT=y
 CONFIG_ESP_INT_WDT_TIMEOUT_MS=300
 CONFIG_ESP_INT_WDT_CHECK_CPU1=y
@@ -2051,11 +2053,13 @@ CONFIG_ESP32S3_DEFAULT_CPU_FREQ_MHZ=160
 CONFIG_SYSTEM_EVENT_QUEUE_SIZE=32
 CONFIG_SYSTEM_EVENT_TASK_STACK_SIZE=2304
 CONFIG_MAIN_TASK_STACK_SIZE=3584
-# CONFIG_CONSOLE_UART_DEFAULT is not set
+CONFIG_CONSOLE_UART_DEFAULT=y
 # CONFIG_CONSOLE_UART_CUSTOM is not set
 # CONFIG_CONSOLE_UART_NONE is not set
 # CONFIG_ESP_CONSOLE_UART_NONE is not set
-CONFIG_CONSOLE_UART_NUM=-1
+CONFIG_CONSOLE_UART=y
+CONFIG_CONSOLE_UART_NUM=0
+CONFIG_CONSOLE_UART_BAUDRATE=115200
 CONFIG_INT_WDT=y
 CONFIG_INT_WDT_TIMEOUT_MS=300
 CONFIG_INT_WDT_CHECK_CPU1=y