quasar color picker replaced by iro js
This commit is contained in:
parent
70dda996ec
commit
cfe27743fe
|
|
@ -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 class="colorPicker"></div>
|
||||
<div id="values"></div>
|
||||
</div>
|
||||
<div class="colorPicker"></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() {
|
||||
console.log(hex.value);
|
||||
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);
|
||||
}
|
||||
const init = {
|
||||
color: { r: 0, g: 0, b: 0 }
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
colorPicker = new iro.ColorPicker(".colorPicker", {
|
||||
width: 280,
|
||||
color: "rgb(255, 0, 0)",
|
||||
width: 320,
|
||||
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) {
|
||||
// log the current color as a HEX string
|
||||
hex.value = color.hexString;
|
||||
UpdateColor();
|
||||
colorPicker.on('input:end', function (color) {
|
||||
data.color = color.rgb;
|
||||
PostData(data, 1, 0, null);
|
||||
});
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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 G = jRead_int(argres, "{'G'", 0);
|
||||
int B = jRead_int(argres, "{'B'", 0);
|
||||
int R = jRead_int(argres, "{'r'", 0);
|
||||
int G = jRead_int(argres, "{'g'", 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, "G", G);
|
||||
jwObj_int(&jwc, "B", B);
|
||||
jwObj_int(&jwc, "r", R);
|
||||
jwObj_int(&jwc, "g", G);
|
||||
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},
|
||||
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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_FILENAME="partitions_user_2ota_4M.csv"
|
||||
CONFIG_PARTITION_TABLE_CUSTOM_FILENAME="partitions_user_2ota_8M.csv"
|
||||
CONFIG_PARTITION_TABLE_FILENAME="partitions_user_2ota_8M.csv"
|
||||
CONFIG_PARTITION_TABLE_OFFSET=0x8000
|
||||
CONFIG_PARTITION_TABLE_MD5=y
|
||||
# end of Partition Table
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user