feat(GUI): 色彩调整界面。

chore: GUI 增加路由。
fix: wrong sample points on mac os 13.
2023-04-16 12:53:03 +08:00 · 2023-04-15 18:58:40 +08:00 · 2023-04-15 13:45:30 +08:00 · 2023-04-15 11:26:41 +08:00 · 2023-04-14 22:18:59 +08:00 · 2023-04-14 21:27:14 +08:00
22 changed files with 1148 additions and 818 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,5 +3,8 @@
  "cSpell.words": [
    "Itertools",
    "Leds"
-  ]
+  ],
+  "idf.customExtraVars": {
+    "OPENOCD_SCRIPTS": "/Users/ivan/.espressif/tools/openocd-esp32/v0.11.0-esp32-20211220/openocd-esp32/share/openocd/scripts"
+  }
 }
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -3,15 +3,24 @@
 	// for the documentation about the tasks.json format
 	"version": "2.0.0",
 	"tasks": [
+		{
+			"label": "dev",
+			"type": "shell",
+			"isBackground": true,
+			"command": "pnpm",
+			"args": [
+				"tauri",
+				"dev"
+			],
+			"problemMatcher": [
+				"$eslint-stylish"
+			]
+		},
 		{
 			"label": "ui:dev",
 			"type": "shell",
-			// `dev` keeps running in the background
-			// ideally you should also configure a `problemMatcher`
-			// see https://code.visualstudio.com/docs/editor/tasks#_can-a-background-task-be-used-as-a-prelaunchtask-in-launchjson
 			"isBackground": true,
-			// change this to your `beforeDevCommand`:
-			"command": "yarn",
+			"command": "pnpm",
 			"args": [
 				"dev"
 			]
@@ -19,8 +28,7 @@
 		{
 			"label": "ui:build",
 			"type": "shell",
-			// change this to your `beforeBuildCommand`:
-			"command": "yarn",
+			"command": "pnpm",
 			"args": [
 				"build"
 			]
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
  },
  "license": "MIT",
  "dependencies": {
+    "@solidjs/router": "^0.8.2",
    "@tauri-apps/api": "^1.2.0",
    "solid-js": "^1.4.7",
    "solid-tippy": "^0.2.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -305,9 +305,9 @@ dependencies = [

 [[package]]
 name = "concurrent-queue"
-version = "2.1.0"
+version = "2.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c278839b831783b70278b14df4d45e1beb1aad306c07bb796637de9a0e323e8e"
+checksum = "62ec6771ecfa0762d24683ee5a32ad78487a3d3afdc0fb8cae19d2c5deb50b7c"
 dependencies = [
 "crossbeam-utils",
 ]
@@ -330,9 +330,9 @@ dependencies = [

 [[package]]
 name = "core-foundation-sys"
-version = "0.8.3"
+version = "0.8.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5827cebf4670468b8772dd191856768aedcb1b0278a04f989f7766351917b9dc"
+checksum = "e496a50fda8aacccc86d7529e2c1e0892dbd0f898a6b5645b5561b89c3210efa"

 [[package]]
 name = "core-graphics"
@@ -379,9 +379,9 @@ dependencies = [

 [[package]]
 name = "crossbeam-channel"
-version = "0.5.7"
+version = "0.5.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cf2b3e8478797446514c91ef04bafcb59faba183e621ad488df88983cc14128c"
+checksum = "a33c2bf77f2df06183c3aa30d1e96c0695a313d4f9c453cc3762a6db39f99200"
 dependencies = [
 "cfg-if",
 "crossbeam-utils",
@@ -599,13 +599,13 @@ dependencies = [

 [[package]]
 name = "errno"
-version = "0.3.0"
+version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "50d6a0976c999d473fe89ad888d5a284e55366d9dc9038b1ba2aa15128c4afa0"
+checksum = "4bcfec3a70f97c962c307b2d2c56e358cf1d00b558d74262b5f929ee8cc7e73a"
 dependencies = [
 "errno-dragonfly",
 "libc",
- "windows-sys 0.45.0",
+ "windows-sys 0.48.0",
 ]

 [[package]]
@@ -633,6 +633,15 @@ dependencies = [
 "instant",
 ]

+[[package]]
+name = "fdeflate"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d329bdeac514ee06249dabc27877490f17f5d371ec693360768b838e19f3ae10"
+dependencies = [
+ "simd-adler32",
+]
+
 [[package]]
 name = "field-offset"
 version = "0.3.5"
@@ -645,14 +654,14 @@ dependencies = [

 [[package]]
 name = "filetime"
-version = "0.2.20"
+version = "0.2.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8a3de6e8d11b22ff9edc6d916f890800597d60f8b2da1caf2955c274638d6412"
+checksum = "5cbc844cecaee9d4443931972e1289c8ff485cb4cc2767cb03ca139ed6885153"
 dependencies = [
 "cfg-if",
 "libc",
 "redox_syscall 0.2.16",
- "windows-sys 0.45.0",
+ "windows-sys 0.48.0",
 ]

 [[package]]
@@ -662,7 +671,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a8a2db397cb1c8772f31494cb8917e48cd1e64f0fa7efac59fbd741a0a8ce841"
 dependencies = [
 "crc32fast",
- "miniz_oxide",
+ "miniz_oxide 0.6.2",
 ]

 [[package]]
@@ -761,7 +770,7 @@ checksum = "89ca545a94061b6365f2c7355b4b32bd20df3ff95f02da9329b34ccc3bd6ee72"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.13",
+ "syn 2.0.15",
 ]

 [[package]]
@@ -917,9 +926,9 @@ dependencies = [

 [[package]]
 name = "getrandom"
-version = "0.2.8"
+version = "0.2.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c05aeb6a22b8f62540c194aac980f2115af067bfe15a0734d7277a768d396b31"
+checksum = "c85e1d9ab2eadba7e5040d4e09cbd6d072b76a557ad64e797c2cb9d4da21d7e4"
 dependencies = [
 "cfg-if",
 "libc",
@@ -1252,25 +1261,25 @@ dependencies = [

 [[package]]
 name = "io-lifetimes"
-version = "1.0.9"
+version = "1.0.10"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "09270fd4fa1111bc614ed2246c7ef56239a3063d5be0d1ec3b589c505d400aeb"
+checksum = "9c66c74d2ae7e79a5a8f7ac924adbe38ee42a859c6539ad869eb51f0b52dc220"
 dependencies = [
 "hermit-abi 0.3.1",
 "libc",
- "windows-sys 0.45.0",
+ "windows-sys 0.48.0",
 ]

 [[package]]
 name = "is-terminal"
-version = "0.4.6"
+version = "0.4.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "256017f749ab3117e93acb91063009e1f1bb56d03965b14c2c8df4eb02c524d8"
+checksum = "adcf93614601c8129ddf72e2d5633df827ba6551541c6d8c59520a371475be1f"
 dependencies = [
 "hermit-abi 0.3.1",
 "io-lifetimes",
 "rustix",
- "windows-sys 0.45.0",
+ "windows-sys 0.48.0",
 ]

 [[package]]
@@ -1368,9 +1377,9 @@ checksum = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646"

 [[package]]
 name = "libc"
-version = "0.2.140"
+version = "0.2.141"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "99227334921fae1a979cf0bfdfcc6b3e5ce376ef57e16fb6fb3ea2ed6095f80c"
+checksum = "3304a64d199bb964be99741b7a14d26972741915b3649639149b2479bb46f4b5"

 [[package]]
 name = "line-wrap"
@@ -1489,6 +1498,16 @@ dependencies = [
 "adler",
 ]

+[[package]]
+name = "miniz_oxide"
+version = "0.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e7810e0be55b428ada41041c41f32c9f1a42817901b4ccf45fa3d4b6561e74c7"
+dependencies = [
+ "adler",
+ "simd-adler32",
+]
+
 [[package]]
 name = "mio"
 version = "0.8.6"
@@ -1658,9 +1677,9 @@ dependencies = [

 [[package]]
 name = "openssl-sys"
-version = "0.9.84"
+version = "0.9.85"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3a20eace9dc2d82904039cb76dcf50fb1a0bba071cfd1629720b5d6f1ddba0fa"
+checksum = "0d3d193fb1488ad46ffe3aaabc912cc931d02ee8518fe2959aea8ef52718b0c0"
 dependencies = [
 "cc",
 "libc",
@@ -1897,21 +1916,22 @@ dependencies = [
 "base64 0.21.0",
 "indexmap",
 "line-wrap",
- "quick-xml 0.28.1",
+ "quick-xml 0.28.2",
 "serde",
 "time",
 ]

 [[package]]
 name = "png"
-version = "0.17.7"
+version = "0.17.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5d708eaf860a19b19ce538740d2b4bdeeb8337fa53f7738455e706623ad5c638"
+checksum = "aaeebc51f9e7d2c150d3f3bfeb667f2aa985db5ef1e3d212847bdedb488beeaa"
 dependencies = [
 "bitflags",
 "crc32fast",
+ "fdeflate",
 "flate2",
- "miniz_oxide",
+ "miniz_oxide 0.7.1",
 ]

 [[package]]
@@ -1968,9 +1988,9 @@ checksum = "dc375e1527247fe1a97d8b7156678dfe7c1af2fc075c9a4db3690ecd2a148068"

 [[package]]
 name = "proc-macro2"
-version = "1.0.55"
+version = "1.0.56"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1d0dd4be24fcdcfeaa12a432d588dc59bbad6cad3510c67e74a2b6b2fc950564"
+checksum = "2b63bdb0cd06f1f4dedf69b254734f9b45af66e4a031e42a7480257d9898b435"
 dependencies = [
 "unicode-ident",
 ]
@@ -1986,9 +2006,9 @@ dependencies = [

 [[package]]
 name = "quick-xml"
-version = "0.28.1"
+version = "0.28.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e5c1a97b1bc42b1d550bfb48d4262153fe400a12bab1511821736f7eac76d7e2"
+checksum = "0ce5e73202a820a31f8a0ee32ada5e21029c81fd9e3ebf668a40832e4219d9d1"
 dependencies = [
 "memchr",
 ]
@@ -2062,7 +2082,7 @@ version = "0.6.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ec0be4795e2f6a28069bec0b5ff3e2ac9bafc99e6a9a7dc3547996c5c816922c"
 dependencies = [
- "getrandom 0.2.8",
+ "getrandom 0.2.9",
 ]

 [[package]]
@@ -2113,7 +2133,7 @@ version = "0.4.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b033d837a7cf162d7993aded9304e30a83213c648b6e389db233191f891e5c2b"
 dependencies = [
- "getrandom 0.2.8",
+ "getrandom 0.2.9",
 "redox_syscall 0.2.16",
 "thiserror",
 ]
@@ -2155,16 +2175,16 @@ dependencies = [

 [[package]]
 name = "rustix"
-version = "0.37.6"
+version = "0.37.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d097081ed288dfe45699b72f5b5d648e5f15d64d900c7080273baa20c16a6849"
+checksum = "85597d61f83914ddeba6a47b3b8ffe7365107221c2e557ed94426489fefb5f77"
 dependencies = [
 "bitflags",
 "errno",
 "io-lifetimes",
 "libc",
 "linux-raw-sys",
- "windows-sys 0.45.0",
+ "windows-sys 0.48.0",
 ]

 [[package]]
@@ -2237,29 +2257,29 @@ dependencies = [

 [[package]]
 name = "serde"
-version = "1.0.159"
+version = "1.0.160"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3c04e8343c3daeec41f58990b9d77068df31209f2af111e059e9fe9646693065"
+checksum = "bb2f3770c8bce3bcda7e149193a069a0f4365bda1fa5cd88e03bca26afc1216c"
 dependencies = [
 "serde_derive",
 ]

 [[package]]
 name = "serde_derive"
-version = "1.0.159"
+version = "1.0.160"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4c614d17805b093df4b147b51339e7e44bf05ef59fba1e45d83500bcfb4d8585"
+checksum = "291a097c63d8497e00160b166a967a4a79c64f3facdd01cbd7502231688d77df"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.13",
+ "syn 2.0.15",
 ]

 [[package]]
 name = "serde_json"
-version = "1.0.95"
+version = "1.0.96"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d721eca97ac802aa7777b701877c8004d950fc142651367300d21c1cc0194744"
+checksum = "057d394a50403bcac12672b2b18fb387ab6d289d957dab67dd201875391e52f1"
 dependencies = [
 "itoa 1.0.6",
 "ryu",
@@ -2274,7 +2294,7 @@ checksum = "bcec881020c684085e55a25f7fd888954d56609ef363479dc5a1305eb0d40cab"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.13",
+ "syn 2.0.15",
 ]

 [[package]]
@@ -2369,6 +2389,12 @@ dependencies = [
 "libc",
 ]

+[[package]]
+name = "simd-adler32"
+version = "0.3.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "238abfbb77c1915110ad968465608b68e869e0772622c9656714e73e5a1a522f"
+
 [[package]]
 name = "siphasher"
 version = "0.3.10"
@@ -2488,9 +2514,9 @@ dependencies = [

 [[package]]
 name = "syn"
-version = "2.0.13"
+version = "2.0.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4c9da457c5285ac1f936ebd076af6dac17a61cfe7826f2076b4d015cf47bc8ec"
+checksum = "a34fcf3e8b60f57e6a14301a2e916d323af98b0ea63c599441eec8558660c822"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -2563,7 +2589,7 @@ dependencies = [
 "scopeguard",
 "serde",
 "unicode-segmentation",
- "uuid 1.3.0",
+ "uuid 1.3.1",
 "windows 0.39.0",
 "windows-implement",
 "x11-dl",
@@ -2621,7 +2647,7 @@ dependencies = [
 "thiserror",
 "tokio",
 "url",
- "uuid 1.3.0",
+ "uuid 1.3.1",
 "webkit2gtk",
 "webview2-com",
 "windows 0.39.0",
@@ -2665,7 +2691,7 @@ dependencies = [
 "tauri-utils",
 "thiserror",
 "time",
- "uuid 1.3.0",
+ "uuid 1.3.1",
 "walkdir",
 ]

@@ -2698,7 +2724,7 @@ dependencies = [
 "serde_json",
 "tauri-utils",
 "thiserror",
- "uuid 1.3.0",
+ "uuid 1.3.1",
 "webview2-com",
 "windows 0.39.0",
 ]
@@ -2716,7 +2742,7 @@ dependencies = [
 "raw-window-handle",
 "tauri-runtime",
 "tauri-utils",
- "uuid 1.3.0",
+ "uuid 1.3.1",
 "webkit2gtk",
 "webview2-com",
 "windows 0.39.0",
@@ -2833,7 +2859,7 @@ checksum = "f9456a42c5b0d803c8cd86e73dd7cc9edd429499f37a3550d286d5e86720569f"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.13",
+ "syn 2.0.15",
 ]

 [[package]]
@@ -2915,7 +2941,7 @@ checksum = "61a573bdc87985e9d6ddeed1b3d864e8a302c847e40d647746df2f1de209d1ce"
 dependencies = [
 "proc-macro2",
 "quote",
- "syn 2.0.13",
+ "syn 2.0.15",
 ]

 [[package]]
@@ -3106,11 +3132,11 @@ checksum = "bc5cf98d8186244414c848017f0e2676b3fcb46807f6668a97dfe67359a3c4b7"

 [[package]]
 name = "uuid"
-version = "1.3.0"
+version = "1.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1674845326ee10d37ca60470760d4288a6f80f304007d92e5c53bab78c9cfd79"
+checksum = "5b55a3fef2a1e3b3a00ce878640918820d3c51081576ac657d23af9fc7928fdb"
 dependencies = [
- "getrandom 0.2.8",
+ "getrandom 0.2.9",
 ]

 [[package]]
@@ -3307,7 +3333,7 @@ version = "0.44.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9e745dab35a0c4c77aa3ce42d595e13d2003d6902d6b08c9ef5fc326d08da12b"
 dependencies = [
- "windows-targets",
+ "windows-targets 0.42.2",
 ]

 [[package]]
@@ -3342,12 +3368,12 @@ version = "0.42.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5a3e1820f08b8513f676f7ab6c1f99ff312fb97b553d30ff4dd86f9f15728aa7"
 dependencies = [
- "windows_aarch64_gnullvm",
+ "windows_aarch64_gnullvm 0.42.2",
 "windows_aarch64_msvc 0.42.2",
 "windows_i686_gnu 0.42.2",
 "windows_i686_msvc 0.42.2",
 "windows_x86_64_gnu 0.42.2",
- "windows_x86_64_gnullvm",
+ "windows_x86_64_gnullvm 0.42.2",
 "windows_x86_64_msvc 0.42.2",
 ]

@@ -3357,7 +3383,16 @@ version = "0.45.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "75283be5efb2831d37ea142365f009c02ec203cd29a3ebecbc093d52315b66d0"
 dependencies = [
- "windows-targets",
+ "windows-targets 0.42.2",
+]
+
+[[package]]
+name = "windows-sys"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "677d2418bec65e3338edb076e806bc1ec15693c5d0104683f2efe857f61056a9"
+dependencies = [
+ "windows-targets 0.48.0",
 ]

 [[package]]
@@ -3366,15 +3401,30 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8e5180c00cd44c9b1c88adb3693291f1cd93605ded80c250a75d472756b4d071"
 dependencies = [
- "windows_aarch64_gnullvm",
+ "windows_aarch64_gnullvm 0.42.2",
 "windows_aarch64_msvc 0.42.2",
 "windows_i686_gnu 0.42.2",
 "windows_i686_msvc 0.42.2",
 "windows_x86_64_gnu 0.42.2",
- "windows_x86_64_gnullvm",
+ "windows_x86_64_gnullvm 0.42.2",
 "windows_x86_64_msvc 0.42.2",
 ]

+[[package]]
+name = "windows-targets"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7b1eb6f0cd7c80c79759c929114ef071b87354ce476d9d94271031c0497adfd5"
+dependencies = [
+ "windows_aarch64_gnullvm 0.48.0",
+ "windows_aarch64_msvc 0.48.0",
+ "windows_i686_gnu 0.48.0",
+ "windows_i686_msvc 0.48.0",
+ "windows_x86_64_gnu 0.48.0",
+ "windows_x86_64_gnullvm 0.48.0",
+ "windows_x86_64_msvc 0.48.0",
+]
+
 [[package]]
 name = "windows-tokens"
 version = "0.39.0"
@@ -3387,6 +3437,12 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "597a5118570b68bc08d8d59125332c54f1ba9d9adeedeef5b99b02ba2b0698f8"

+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "91ae572e1b79dba883e0d315474df7305d12f569b400fcf90581b06062f7e1bc"
+
 [[package]]
 name = "windows_aarch64_msvc"
 version = "0.39.0"
@@ -3399,6 +3455,12 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e08e8864a60f06ef0d0ff4ba04124db8b0fb3be5776a5cd47641e942e58c4d43"

+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b2ef27e0d7bdfcfc7b868b317c1d32c641a6fe4629c171b8928c7b08d98d7cf3"
+
 [[package]]
 name = "windows_i686_gnu"
 version = "0.39.0"
@@ -3411,6 +3473,12 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c61d927d8da41da96a81f029489353e68739737d3beca43145c8afec9a31a84f"

+[[package]]
+name = "windows_i686_gnu"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "622a1962a7db830d6fd0a69683c80a18fda201879f0f447f065a3b7467daa241"
+
 [[package]]
 name = "windows_i686_msvc"
 version = "0.39.0"
@@ -3423,6 +3491,12 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "44d840b6ec649f480a41c8d80f9c65108b92d89345dd94027bfe06ac444d1060"

+[[package]]
+name = "windows_i686_msvc"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4542c6e364ce21bf45d69fdd2a8e455fa38d316158cfd43b3ac1c5b1b19f8e00"
+
 [[package]]
 name = "windows_x86_64_gnu"
 version = "0.39.0"
@@ -3435,12 +3509,24 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8de912b8b8feb55c064867cf047dda097f92d51efad5b491dfb98f6bbb70cb36"

+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ca2b8a661f7628cbd23440e50b05d705db3686f894fc9580820623656af974b1"
+
 [[package]]
 name = "windows_x86_64_gnullvm"
 version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "26d41b46a36d453748aedef1486d5c7a85db22e56aff34643984ea85514e94a3"

+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7896dbc1f41e08872e9d5e8f8baa8fdd2677f29468c4e156210174edc7f7b953"
+
 [[package]]
 name = "windows_x86_64_msvc"
 version = "0.39.0"
@@ -3453,6 +3539,12 @@ version = "0.42.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9aec5da331524158c6d1a4ac0ab1541149c0b9505fde06423b02f5ef0106b9f0"

+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.48.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1a515f5799fe4961cb532f983ce2b23082366b898e52ffbce459c86f67c8378a"
+
 [[package]]
 name = "winnow"
 version = "0.4.1"
--- a/src-tauri/src/ambient_light/publisher.rs
+++ b/src-tauri/src/ambient_light/publisher.rs
@@ -23,8 +23,6 @@ pub struct LedColorsPublisher {
    sorted_colors_tx: Arc<RwLock<watch::Sender<Vec<u8>>>>,
    colors_rx: Arc<RwLock<watch::Receiver<Vec<u8>>>>,
    colors_tx: Arc<RwLock<watch::Sender<Vec<u8>>>>,
-    display_colors_rx: Arc<RwLock<broadcast::Receiver<(u32, Vec<u8>)>>>,
-    display_colors_tx: Arc<RwLock<broadcast::Sender<(u32, Vec<u8>)>>>,
    inner_tasks_version: Arc<RwLock<usize>>,
 }

@@ -35,7 +33,6 @@ impl LedColorsPublisher {

        let (sorted_tx, sorted_rx) = watch::channel(Vec::new());
        let (tx, rx) = watch::channel(Vec::new());
-        let (display_colors_tx, display_colors_rx) = broadcast::channel(8);

        LED_COLORS_PUBLISHER_GLOBAL
            .get_or_init(|| async {
@@ -44,8 +41,6 @@ impl LedColorsPublisher {
                    sorted_colors_tx: Arc::new(RwLock::new(sorted_tx)),
                    colors_rx: Arc::new(RwLock::new(rx)),
                    colors_tx: Arc::new(RwLock::new(tx)),
-                    display_colors_rx: Arc::new(RwLock::new(display_colors_rx)),
-                    display_colors_tx: Arc::new(RwLock::new(display_colors_tx)),
                    inner_tasks_version: Arc::new(RwLock::new(0)),
                }
            })
@@ -56,14 +51,17 @@ impl LedColorsPublisher {
        &self,
        display_id: u32,
        sample_points: Vec<Vec<LedSamplePoints>>,
+        bound_scale_factor: f32,
+        display_colors_tx: broadcast::Sender<(u32, Vec<u8>)>,
    ) {
-        let display_colors_tx = self.display_colors_tx.clone();
        let internal_tasks_version = self.inner_tasks_version.clone();

        tokio::spawn(async move {
-            let display_colors_tx = display_colors_tx.read().await.clone();
-
-            let colors = screenshot_manager::get_display_colors(display_id, &sample_points);
+            let colors = screenshot_manager::get_display_colors(
+                display_id,
+                &sample_points,
+                bound_scale_factor,
+            );

            if let Err(err) = colors {
                warn!("Failed to get colors: {}", err);
@@ -78,7 +76,9 @@ impl LedColorsPublisher {
                interval.tick().await;
                tokio::time::sleep(Duration::from_millis(1)).await;

-                if internal_tasks_version.read().await.clone() != init_version {
+                let version = internal_tasks_version.read().await.clone();
+
+                if version != init_version {
                    log::info!(
                        "inner task version changed, stop.  {} != {}",
                        internal_tasks_version.read().await.clone(),
@@ -90,7 +90,11 @@ impl LedColorsPublisher {

                // log::info!("tick: {}ms", start.elapsed().as_millis());
                start = tokio::time::Instant::now();
-                let colors = screenshot_manager::get_display_colors(display_id, &sample_points);
+                let colors = screenshot_manager::get_display_colors(
+                    display_id,
+                    &sample_points,
+                    bound_scale_factor,
+                );

                if let Err(err) = colors {
                    warn!("Failed to get colors: {}", err);
@@ -121,30 +125,32 @@ impl LedColorsPublisher {
        });
    }

-    fn start_all_colors_worker(&self, display_ids: Vec<u32>, mappers: Vec<SamplePointMapper>) {
+    fn start_all_colors_worker(
+        &self,
+        display_ids: Vec<u32>,
+        mappers: Vec<SamplePointMapper>,
+        mut display_colors_rx: broadcast::Receiver<(u32, Vec<u8>)>,
+    ) {
        let sorted_colors_tx = self.sorted_colors_tx.clone();
        let colors_tx = self.colors_tx.clone();
-        let display_colors_rx = self.display_colors_rx.clone();
+        log::debug!("start all_colors_worker");

        tokio::spawn(async move {
            for _ in 0..10 {
-                let mut rx = display_colors_rx.read().await.resubscribe();
-
                let sorted_colors_tx = sorted_colors_tx.write().await;
                let colors_tx = colors_tx.write().await;

                let mut all_colors: Vec<Option<Vec<u8>>> = vec![None; display_ids.len()];
                let mut start: tokio::time::Instant = tokio::time::Instant::now();

-                log::info!("start all_colors_worker");
+                log::debug!("start all_colors_worker task");
                loop {
-                    // log::info!("display_colors_rx changed");
-                    let color_info = rx.recv().await;
+                    let color_info = display_colors_rx.recv().await;

                    if let Err(err) = color_info {
                        match err {
                            broadcast::error::RecvError::Closed => {
-                                break;
+                                return;
                            }
                            broadcast::error::RecvError::Lagged(_) => {
                                warn!("display_colors_rx lagged");
@@ -200,9 +206,6 @@ impl LedColorsPublisher {
        tokio::spawn(async move {
            let publisher = Self::global().await;

-            let mut inner_tasks_version = inner_tasks_version.write().await;
-            *inner_tasks_version = inner_tasks_version.overflowing_add(1).0;
-
            let config_manager = ConfigManager::global().await;
            let mut config_receiver = config_manager.clone_config_update_receiver();

@@ -221,113 +224,35 @@ impl LedColorsPublisher {

                let configs = configs.unwrap();

+                let mut inner_tasks_version = inner_tasks_version.write().await;
+                *inner_tasks_version = inner_tasks_version.overflowing_add(1).0;
+                drop(inner_tasks_version);
+
+                let (display_colors_tx, display_colors_rx) =
+                    broadcast::channel::<(u32, Vec<u8>)>(8);
+
                for sample_point_group in configs.sample_point_groups.clone() {
                    let display_id = sample_point_group.display_id;
                    let sample_points = sample_point_group.points;
+                    let bound_scale_factor = sample_point_group.bound_scale_factor;

-                    publisher.start_one_display_colors_fetcher(display_id, sample_points);
+                    publisher.start_one_display_colors_fetcher(
+                        display_id,
+                        sample_points,
+                        bound_scale_factor,
+                        display_colors_tx.clone(),
+                    );
                }

                let display_ids = configs.sample_point_groups;
                publisher.start_all_colors_worker(
                    display_ids.iter().map(|c| c.display_id).collect(),
                    configs.mappers,
+                    display_colors_rx,
                );
-
-                break;
            }
        });

-        // tokio::spawn(async move {
-        //     loop {
-        //         let sorted_colors_tx = sorted_colors_tx.write().await;
-        //         let colors_tx = colors_tx.write().await;
-        //         let screenshot_manager = ScreenshotManager::global().await;
-
-        //         let config_manager = ConfigManager::global().await;
-        //         let config_receiver = config_manager.clone_config_update_receiver();
-        //         let configs = config_receiver.borrow().clone();
-        //         let configs = Self::get_colors_configs(&configs).await;
-
-        //         if let Err(err) = configs {
-        //             warn!("Failed to get configs: {}", err);
-        //             sleep(Duration::from_millis(100)).await;
-        //             continue;
-        //         }
-
-        //         let configs = configs.unwrap();
-
-        //         let mut merged_screenshot_receiver =
-        //             screenshot_manager.clone_merged_screenshot_rx().await;
-
-        //         let mut screenshots = HashMap::new();
-
-        //         // let mut start = tokio::time::Instant::now();
-
-        //         loop {
-        //             let screenshot = merged_screenshot_receiver.recv().await;
-
-        //             if let Err(err) = screenshot {
-        //                 match err {
-        //                     tokio::sync::broadcast::error::RecvError::Closed => {
-        //                         warn!("closed");
-        //                         continue;
-        //                     }
-        //                     tokio::sync::broadcast::error::RecvError::Lagged(_) => {
-        //                         warn!("lagged");
-        //                         continue;
-        //                     }
-        //                 }
-        //             }
-
-        //             let screenshot = screenshot.unwrap();
-        //             // log::info!("got screenshot: {:?}", screenshot.display_id);
-
-        //             screenshots.insert(screenshot.display_id, screenshot);
-
-        //             if screenshots.len() == configs.sample_point_groups.len() {
-        //                 // log::info!("{}", start.elapsed().as_millis().to_string());
-        //                 {
-        //                     let screenshots = configs
-        //                         .sample_point_groups
-        //                         .iter()
-        //                         .map(|strip| screenshots.get(&strip.display_id).unwrap())
-        //                         .collect::<Vec<_>>();
-
-        //                     let colors = screenshot_manager
-        //                         .get_all_colors(&configs.sample_point_groups, &screenshots)
-        //                         .await;
-
-        //                     let sorted_colors =
-        //                         ScreenshotManager::get_sorted_colors(&colors, &configs.mappers)
-        //                             .await;
-
-        //                     match colors_tx.send(colors) {
-        //                         Ok(_) => {
-        //                             // log::info!("colors updated");
-        //                         }
-        //                         Err(_) => {
-        //                             warn!("colors update failed");
-        //                         }
-        //                     }
-
-        //                     match sorted_colors_tx.send(sorted_colors) {
-        //                         Ok(_) => {
-        //                             // log::info!("colors updated");
-        //                         }
-        //                         Err(_) => {
-        //                             warn!("colors update failed");
-        //                         }
-        //                     }
-        //                 }
-
-        //                 // screenshots.clear();
-        //                 // start = tokio::time::Instant::now();
-        //             }
-        //         }
-        //     }
-        // });
-
        let rx = self.sorted_colors_rx.clone();
        tokio::spawn(async move {
            let mut rx = rx.read().await.clone();
@@ -380,6 +305,7 @@ impl LedColorsPublisher {
        let mut colors_configs = Vec::new();

        let mut merged_screenshot_receiver = screenshot_manager.clone_merged_screenshot_rx().await;
+        merged_screenshot_receiver.resubscribe();

        let mut screenshots = HashMap::new();

@@ -426,15 +352,22 @@ impl LedColorsPublisher {
                        .map(|config| screenshot.get_sample_points(&config))
                        .collect();

-                    let colors_config = DisplaySamplePointGroup { display_id, points };
+                    let bound_scale_factor = screenshot.bound_scale_factor;
+
+                    let colors_config = DisplaySamplePointGroup {
+                        display_id,
+                        points,
+                        bound_scale_factor,
+                    };

                    colors_configs.push(colors_config);
                }

+                log::debug!("got all colors configs: {:?}", colors_configs.len());
+
                return Ok(AllColorConfig {
                    sample_point_groups: colors_configs,
                    mappers,
-                    // screenshot_receivers: local_rx_list,
                });
            }
        }
@@ -456,4 +389,5 @@ pub struct AllColorConfig {
 pub struct DisplaySamplePointGroup {
    pub display_id: u32,
    pub points: Vec<Vec<LedSamplePoints>>,
+    pub bound_scale_factor: f32,
 }
--- a/src-tauri/src/screenshot.rs
+++ b/src-tauri/src/screenshot.rs
@@ -1,9 +1,9 @@
-use std::cell::RefCell;
-use std::{iter, cell::Ref};
+
+use std::iter;
 use std::sync::Arc;

 use serde::{Deserialize, Serialize};
-use tauri::async_runtime::{RwLock, Mutex};
+use tauri::async_runtime::RwLock;

 use crate::{ambient_light::LedStripConfig, led_color::LedColor};

@@ -15,6 +15,7 @@ pub struct Screenshot {
    pub bytes_per_row: usize,
    pub bytes: Arc<RwLock<Vec<u8>>>,
    pub scale_factor: f32,
+    pub bound_scale_factor: f32,
 }

 static SINGLE_AXIS_POINTS: usize = 5;
@@ -27,6 +28,7 @@ impl Screenshot {
        bytes_per_row: usize,
        bytes: Vec<u8>,
        scale_factor: f32,
+        bound_scale_factor: f32,
    ) -> Self {
        Self {
            display_id,
@@ -35,13 +37,16 @@ impl Screenshot {
            bytes_per_row,
            bytes: Arc::new(RwLock::new(bytes)),
            scale_factor,
+            bound_scale_factor,
        }
    }

    pub fn get_sample_points(&self, config: &LedStripConfig) -> Vec<LedSamplePoints> {
        let height = self.height as usize;
        let width = self.width as usize;
-
+        // let height = CGDisplay::new(self.display_id).bounds().size.height as usize;
+        // let width = CGDisplay::new(self.display_id).bounds().size.width as usize;
+        
        match config.border {
            crate::ambient_light::Border::Top => {
                Self::get_one_edge_sample_points(height / 18, width, config.len, SINGLE_AXIS_POINTS)
@@ -153,6 +158,7 @@ impl Screenshot {
                b += bitmap[position] as f64;
                g += bitmap[position + 1] as f64;
                r += bitmap[position + 2] as f64;
+                // log::info!("position: {}, total: {}", position, bitmap.len());
            }
            let color = LedColor::new((r / len) as u8, (g / len) as u8, (b / len) as u8);
            colors.push(color);
--- a/src-tauri/src/screenshot_manager.rs
+++ b/src-tauri/src/screenshot_manager.rs
@@ -1,4 +1,3 @@
-use std::cell::{Ref, RefCell};
 use std::{collections::HashMap, sync::Arc};

 use core_graphics::display::{
@@ -12,9 +11,9 @@ use tokio::time::{self, Duration};

 use crate::screenshot::LedSamplePoints;
 use crate::{
-    ambient_light::{SamplePointConfig, SamplePointMapper},
+    ambient_light::SamplePointMapper,
    led_color::LedColor,
-    screenshot::{ScreenSamplePoints, Screenshot},
+    screenshot::Screenshot,
 };

 pub fn take_screenshot(display_id: u32, scale_factor: f32) -> anyhow::Result<Screenshot> {
@@ -37,6 +36,10 @@ pub fn take_screenshot(display_id: u32, scale_factor: f32) -> anyhow::Result<Scr

    let bytes = buffer.bytes().to_owned();

+
+    let cg_display = CGDisplay::new(display_id);
+    let bound_scale_factor = (cg_display.bounds().size.width / width as f64) as f32;
+
    Ok(Screenshot::new(
        display_id,
        height as u32,
@@ -44,12 +47,14 @@ pub fn take_screenshot(display_id: u32, scale_factor: f32) -> anyhow::Result<Scr
        bytes_per_row,
        bytes,
        scale_factor,
+        bound_scale_factor
    ))
 }

 pub fn get_display_colors(
    display_id: u32,
    sample_points: &Vec<Vec<LedSamplePoints>>,
+    bound_scale_factor: f32,
 ) -> anyhow::Result<Vec<LedColor>> {
    log::debug!("take_screenshot");
    let cg_display = CGDisplay::new(display_id);
@@ -69,14 +74,23 @@ pub fn get_display_colors(
        let (start_y, end_y) = (usize::min(start_y, end_y), usize::max(start_y, end_y));

        let origin = CGPoint {
-            x: start_x as f64 + cg_display.bounds().origin.x,
-            y: start_y as f64 + cg_display.bounds().origin.y,
+            x: start_x as f64  * bound_scale_factor as f64 + cg_display.bounds().origin.x,
+            y: start_y as f64  * bound_scale_factor as f64  + cg_display.bounds().origin.y,
        };
        let size = CGSize {
            width: (end_x - start_x + 1) as f64,
            height: (end_y - start_y + 1) as f64,
        };

+        // log::info!(
+        //     "origin: {:?}, size: {:?}, start_x: {}, start_y: {}, bounds: {:?}",
+        //     origin,
+        //     size,
+        //     start_x,
+        //     start_y,
+        //     cg_display.bounds().size
+        // );
+
        let cg_image = CGDisplay::screenshot(
            CGRect::new(&origin, &size),
            kCGWindowListOptionOnScreenOnly,
@@ -151,7 +165,7 @@ impl ScreenshotManager {
                warn!("take_screenshot_loop: {}", screenshot.err().unwrap());
                return;
            }
-            let mut interval = time::interval(Duration::from_millis(3300));
+            let mut interval = time::interval(Duration::from_millis(1000));
            let mut start = tokio::time::Instant::now();

            let screenshot = screenshot.unwrap();
@@ -190,7 +204,9 @@ impl ScreenshotManager {
        let screenshot = take_screenshot(display_id, scale_factor);
        if let Ok(screenshot) = screenshot {
            match merged_screenshot_tx.send(screenshot.clone()) {
-                Ok(_) => {}
+                Ok(_) => {
+                    log::info!("take_screenshot_loop: merged_screenshot_tx.send success. display#{}", display_id);
+                }
                Err(err) => {
                    // warn!("take_screenshot_loop: merged_screenshot_tx.send failed. display#{}. err: {}", display_id, err);
                }
@@ -202,23 +218,6 @@ impl ScreenshotManager {
        }
    }

-    pub async fn get_all_colors(
-        &self,
-        configs: &Vec<SamplePointConfig>,
-        screenshots: &Vec<&Screenshot>,
-    ) -> Vec<LedColor> {
-        let mut all_colors = vec![];
-
-        for (index, screenshot) in screenshots.iter().enumerate() {
-            let config = &configs[index];
-            let mut colors = screenshot.get_colors_by_sample_points(&config.points).await;
-
-            all_colors.append(&mut colors);
-        }
-
-        all_colors
-    }
-
    pub fn get_sorted_colors(colors: &Vec<u8>, mappers: &Vec<SamplePointMapper>) -> Vec<u8> {
        let total_leds = mappers
            .iter()
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,104 +1,18 @@
-import { createEffect, onCleanup } from 'solid-js';
-import { invoke } from '@tauri-apps/api/tauri';
-import { DisplayView } from './components/display-view';
-import { DisplayListContainer } from './components/display-list-container';
-import { displayStore, setDisplayStore } from './stores/display.store';
-import { LedStripConfigContainer } from './models/led-strip-config';
-import { setLedStripStore } from './stores/led-strip.store';
-import { listen } from '@tauri-apps/api/event';
-import { LedStripPartsSorter } from './components/led-strip-parts-sorter';
-import { createStore } from 'solid-js/store';
-import {
-  LedStripConfigurationContext,
-  LedStripConfigurationContextType,
-} from './contexts/led-strip-configuration.context';
+import { Routes, Route } from '@solidjs/router';
+import { LedStripConfiguration } from './components/led-strip-configuration/led-strip-configuration';
+import { WhiteBalance } from './components/white-balance/white-balance';

 function App() {
-  createEffect(() => {
-    invoke<string>('list_display_info').then((displays) => {
-      setDisplayStore({
-        displays: JSON.parse(displays),
-      });
-    });
-    invoke<LedStripConfigContainer>('read_led_strip_configs').then((configs) => {
-      console.log(configs);
-      setLedStripStore(configs);
-    });
-  });
-
-  // listen to config_changed event
-  createEffect(() => {
-    const unlisten = listen('config_changed', (event) => {
-      const { strips, mappers } = event.payload as LedStripConfigContainer;
-      console.log(event.payload);
-      setLedStripStore({
-        strips,
-        mappers,
-      });
-    });
-
-    onCleanup(() => {
-      unlisten.then((unlisten) => unlisten());
-    });
-  });
-
-  // listen to led_colors_changed event
-  createEffect(() => {
-    const unlisten = listen<Uint8ClampedArray>('led_colors_changed', (event) => {
-      const colors = event.payload;
-
-      setLedStripStore({
-        colors,
-      });
-    });
-
-    onCleanup(() => {
-      unlisten.then((unlisten) => unlisten());
-    });
-  });
-
-  // listen to led_sorted_colors_changed event
-  createEffect(() => {
-    const unlisten = listen<Uint8ClampedArray>('led_sorted_colors_changed', (event) => {
-      const sortedColors = event.payload;
-
-      setLedStripStore({
-        sortedColors,
-      });
-    });
-
-    onCleanup(() => {
-      unlisten.then((unlisten) => unlisten());
-    });
-  });
-
-  const [ledStripConfiguration, setLedStripConfiguration] = createStore<
-    LedStripConfigurationContextType[0]
-  >({
-    selectedStripPart: null,
-  });
-
-  const ledStripConfigurationContextValue: LedStripConfigurationContextType = [
-    ledStripConfiguration,
-    {
-      setSelectedStripPart: (v) => {
-        setLedStripConfiguration({
-          selectedStripPart: v,
-        });
-      },
-    },
-  ];
-
  return (
    <div>
-      <LedStripConfigurationContext.Provider value={ledStripConfigurationContextValue}>
-        <LedStripPartsSorter />
-        <DisplayListContainer>
-          {displayStore.displays.map((display) => {
-            return <DisplayView display={display} />;
-          })}
-        </DisplayListContainer>
-      </LedStripConfigurationContext.Provider>
+      <div>
+        <a href="/led-strips-configuration">灯条配置</a>
+        <a href="/white-balance">白平衡</a>
+      </div>
+      <Routes>
+        <Route path="/led-strips-configuration" component={LedStripConfiguration} />
+        <Route path="/white-balance" component={WhiteBalance} />
+      </Routes>
    </div>
  );
 }
--- a/src/components/led-strip-configuration/display-info-panel.tsx
+++ b/src/components/led-strip-configuration/display-info-panel.tsx
@@ -1,5 +1,5 @@
 import { Component, JSX, ParentComponent, splitProps } from 'solid-js';
-import { DisplayInfo } from '../models/display-info.model';
+import { DisplayInfo } from '../../models/display-info.model';

 type DisplayInfoItemProps = {
  label: string;
--- a/src/components/led-strip-configuration/display-list-container.tsx
+++ b/src/components/led-strip-configuration/display-list-container.tsx
@@ -6,8 +6,8 @@ import {
  onMount,
  ParentComponent,
 } from 'solid-js';
-import { displayStore, setDisplayStore } from '../stores/display.store';
-import background from '../assets/transparent-grid-background.svg?url';
+import { displayStore, setDisplayStore } from '../../stores/display.store';
+import background from '../../assets/transparent-grid-background.svg?url';

 export const DisplayListContainer: ParentComponent = (props) => {
  let root: HTMLElement;
--- a/src/components/led-strip-configuration/display-view.tsx
+++ b/src/components/led-strip-configuration/display-view.tsx
@@ -1,7 +1,7 @@
 import { Component, createMemo } from 'solid-js';
-import { DisplayInfo } from '../models/display-info.model';
-import { displayStore } from '../stores/display.store';
-import { ledStripStore } from '../stores/led-strip.store';
+import { DisplayInfo } from '../../models/display-info.model';
+import { displayStore } from '../../stores/display.store';
+import { ledStripStore } from '../../stores/led-strip.store';
 import { DisplayInfoPanel } from './display-info-panel';
 import { LedStripPart } from './led-strip-part';
 import { ScreenView } from './screen-view';
--- a/src/components/led-strip-configuration/led-strip-configuration.tsx
+++ b/src/components/led-strip-configuration/led-strip-configuration.tsx
@@ -0,0 +1,106 @@
+import { createEffect, onCleanup } from 'solid-js';
+import { invoke } from '@tauri-apps/api/tauri';
+import { DisplayView } from './display-view';
+import { DisplayListContainer } from './display-list-container';
+import { displayStore, setDisplayStore } from '../../stores/display.store';
+import { LedStripConfigContainer } from '../../models/led-strip-config';
+import { setLedStripStore } from '../../stores/led-strip.store';
+import { listen } from '@tauri-apps/api/event';
+import { LedStripPartsSorter } from './led-strip-parts-sorter';
+import { createStore } from 'solid-js/store';
+import {
+  LedStripConfigurationContext,
+  LedStripConfigurationContextType,
+} from '../../contexts/led-strip-configuration.context';
+
+export const LedStripConfiguration = () => {
+  createEffect(() => {
+    invoke<string>('list_display_info').then((displays) => {
+      setDisplayStore({
+        displays: JSON.parse(displays),
+      });
+    });
+    invoke<LedStripConfigContainer>('read_led_strip_configs').then((configs) => {
+      console.log(configs);
+      setLedStripStore(configs);
+    });
+  });
+
+  // listen to config_changed event
+  createEffect(() => {
+    const unlisten = listen('config_changed', (event) => {
+      const { strips, mappers } = event.payload as LedStripConfigContainer;
+      console.log(event.payload);
+      setLedStripStore({
+        strips,
+        mappers,
+      });
+    });
+
+    onCleanup(() => {
+      unlisten.then((unlisten) => unlisten());
+    });
+  });
+
+  // listen to led_colors_changed event
+  createEffect(() => {
+    const unlisten = listen<Uint8ClampedArray>('led_colors_changed', (event) => {
+      if (!window.document.hidden) {
+        const colors = event.payload;
+        setLedStripStore({
+          colors,
+        });
+      }
+    });
+
+    onCleanup(() => {
+      unlisten.then((unlisten) => unlisten());
+    });
+  });
+
+  // listen to led_sorted_colors_changed event
+  createEffect(() => {
+    const unlisten = listen<Uint8ClampedArray>('led_sorted_colors_changed', (event) => {
+      if (!window.document.hidden) {
+        const sortedColors = event.payload;
+        setLedStripStore({
+          sortedColors,
+        });
+      }
+    });
+
+    onCleanup(() => {
+      unlisten.then((unlisten) => unlisten());
+    });
+  });
+
+  const [ledStripConfiguration, setLedStripConfiguration] = createStore<
+    LedStripConfigurationContextType[0]
+  >({
+    selectedStripPart: null,
+  });
+
+  const ledStripConfigurationContextValue: LedStripConfigurationContextType = [
+    ledStripConfiguration,
+    {
+      setSelectedStripPart: (v) => {
+        setLedStripConfiguration({
+          selectedStripPart: v,
+        });
+      },
+    },
+  ];
+
+  return (
+    <div>
+      <LedStripConfigurationContext.Provider value={ledStripConfigurationContextValue}>
+        <LedStripPartsSorter />
+        <DisplayListContainer>
+          {displayStore.displays.map((display) => {
+            return <DisplayView display={display} />;
+          })}
+        </DisplayListContainer>
+      </LedStripConfigurationContext.Provider>
+    </div>
+  );
+};
--- a/src/components/led-strip-configuration/led-strip-part.tsx
+++ b/src/components/led-strip-configuration/led-strip-part.tsx
@@ -12,9 +12,9 @@ import {
 } from 'solid-js';
 import { useTippy } from 'solid-tippy';
 import { followCursor } from 'tippy.js';
-import { LedStripConfig } from '../models/led-strip-config';
-import { LedStripConfigurationContext } from '../contexts/led-strip-configuration.context';
-import { ledStripStore } from '../stores/led-strip.store';
+import { LedStripConfig } from '../../models/led-strip-config';
+import { LedStripConfigurationContext } from '../../contexts/led-strip-configuration.context';
+import { ledStripStore } from '../../stores/led-strip.store';

 type LedStripPartProps = {
  config?: LedStripConfig | null;
@@ -24,12 +24,6 @@ type PixelProps = {
  color: string;
 };

-async function subscribeScreenshotUpdate(displayId: number) {
-  await invoke('subscribe_encoded_screenshot_updated', {
-    displayId,
-  });
-}
-
 export const Pixel: Component<PixelProps> = (props) => {
  const style = createMemo(() => ({
    background: props.color,
@@ -51,7 +45,6 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
  const [localProps, rootProps] = splitProps(props, ['config']);
  const [stripConfiguration] = useContext(LedStripConfigurationContext);

-  const [ledSamplePoints, setLedSamplePoints] = createSignal();
  const [colors, setColors] = createSignal<string[]>([]);

  // update led strip colors from global store
@@ -87,17 +80,6 @@ export const LedStripPart: Component<LedStripPartProps> = (props) => {
    setColors(colors);
  });

-  // get led strip sample points
-  createEffect(() => {
-    if (localProps.config) {
-      invoke('get_led_strips_sample_points', {
-        config: localProps.config,
-      }).then((points) => {
-        setLedSamplePoints(points);
-      });
-    }
-  });
-
  const [anchor, setAnchor] = createSignal<HTMLElement>();

  useTippy(anchor, {
--- a/src/components/led-strip-configuration/led-strip-parts-sorter.tsx
+++ b/src/components/led-strip-configuration/led-strip-parts-sorter.tsx
@@ -0,0 +1,316 @@
+import {
+  batch,
+  Component,
+  createEffect,
+  createMemo,
+  createSignal,
+  For,
+  Index,
+  JSX,
+  Match,
+  onCleanup,
+  onMount,
+  Switch,
+  untrack,
+  useContext,
+} from 'solid-js';
+import { LedStripConfig, LedStripPixelMapper } from '../../models/led-strip-config';
+import { ledStripStore } from '../../stores/led-strip.store';
+import { invoke } from '@tauri-apps/api';
+import { LedStripConfigurationContext } from '../../contexts/led-strip-configuration.context';
+import background from '../../assets/transparent-grid-background.svg?url';
+
+const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper }> = (
+  props,
+) => {
+  const [leds, setLeds] = createSignal<Array<string | null>>([]);
+  const [dragging, setDragging] = createSignal<boolean>(false);
+  const [dragStart, setDragStart] = createSignal<{ x: number; y: number } | null>(null);
+  const [dragCurr, setDragCurr] = createSignal<{ x: number; y: number } | null>(null);
+  const [dragStartIndex, setDragStartIndex] = createSignal<number>(0);
+  const [cellWidth, setCellWidth] = createSignal<number>(0);
+  const [, { setSelectedStripPart }] = useContext(LedStripConfigurationContext);
+  const [rootWidth, setRootWidth] = createSignal<number>(0);
+
+  let root: HTMLDivElement;
+
+  const move = (targetStart: number) => {
+    if (targetStart === props.mapper.start) {
+      return;
+    }
+    console.log(
+      `moving strip part ${props.strip.display_id} ${props.strip.border} from ${props.mapper.start} to ${targetStart}`,
+    );
+    invoke('move_strip_part', {
+      displayId: props.strip.display_id,
+      border: props.strip.border,
+      targetStart,
+    }).catch((err) => console.error(err));
+  };
+
+  // reset translateX on config updated
+  createEffect(() => {
+    const indexDiff = props.mapper.start - dragStartIndex();
+    const start = untrack(dragStart);
+    const curr = untrack(dragCurr);
+    const _dragging = untrack(dragging);
+
+    if (start === null || curr === null) {
+      return;
+    }
+    if (_dragging && indexDiff !== 0) {
+      const compensation = indexDiff * cellWidth();
+      batch(() => {
+        setDragStartIndex(props.mapper.start);
+        setDragStart({
+          x: start.x + compensation,
+          y: curr.y,
+        });
+      });
+    } else {
+      batch(() => {
+        setDragStartIndex(props.mapper.start);
+        setDragStart(null);
+        setDragCurr(null);
+      });
+    }
+  });
+
+  const onPointerDown = (ev: PointerEvent) => {
+    if (ev.button !== 0) {
+      return;
+    }
+    batch(() => {
+      setDragging(true);
+      if (dragStart() === null) {
+        setDragStart({ x: ev.clientX, y: ev.clientY });
+      }
+      setDragCurr({ x: ev.clientX, y: ev.clientY });
+      setDragStartIndex(props.mapper.start);
+    });
+  };
+
+  const onPointerUp = (ev: PointerEvent) => {
+    if (ev.button !== 0) {
+      return;
+    }
+
+    if (dragging() === false) {
+      return;
+    }
+    setDragging(false);
+    const diff = ev.clientX - dragStart()!.x;
+    const moved = Math.round(diff / cellWidth());
+    if (moved === 0) {
+      return;
+    }
+    move(props.mapper.start + moved);
+  };
+
+  const onPointerMove = (ev: PointerEvent) => {
+    if (dragging() === false) {
+      return;
+    }
+
+    setSelectedStripPart({
+      displayId: props.strip.display_id,
+      border: props.strip.border,
+    });
+    if (!(ev.buttons & 1)) {
+      return;
+    }
+    const draggingInfo = dragging();
+    if (!draggingInfo) {
+      return;
+    }
+    setDragCurr({ x: ev.clientX, y: ev.clientY });
+  };
+
+  const onPointerLeave = () => {
+    setSelectedStripPart(null);
+  };
+
+  createEffect(() => {
+    onMount(() => {
+      window.addEventListener('pointermove', onPointerMove);
+      window.addEventListener('pointerleave', onPointerLeave);
+      window.addEventListener('pointerup', onPointerUp);
+    });
+
+    onCleanup(() => {
+      window.removeEventListener('pointermove', onPointerMove);
+      window.removeEventListener('pointerleave', onPointerLeave);
+      window.removeEventListener('pointerup', onPointerUp);
+    });
+  });
+
+  const reverse = () => {
+    invoke('reverse_led_strip_part', {
+      displayId: props.strip.display_id,
+      border: props.strip.border,
+    }).catch((err) => console.error(err));
+  };
+
+  const setColor = (fullIndex: number, colorsIndex: number, fullLeds: string[]) => {
+    const colors = ledStripStore.colors;
+    let c1 = `rgb(${Math.floor(colors[colorsIndex * 3] * 0.8)}, ${Math.floor(
+      colors[colorsIndex * 3 + 1] * 0.8,
+    )}, ${Math.floor(colors[colorsIndex * 3 + 2] * 0.8)})`;
+    let c2 = `rgb(${Math.min(Math.floor(colors[colorsIndex * 3] * 1.2), 255)}, ${Math.min(
+      Math.floor(colors[colorsIndex * 3 + 1] * 1.2),
+      255,
+    )}, ${Math.min(Math.floor(colors[colorsIndex * 3 + 2] * 1.2), 255)})`;
+
+    if (fullLeds.length <= fullIndex) {
+      console.error('out of range', fullIndex, fullLeds.length);
+      return;
+    }
+
+    fullLeds[fullIndex] = `linear-gradient(70deg, ${c1} 10%, ${c2})`;
+  };
+
+  // update fullLeds
+  createEffect(() => {
+    const { start, end, pos } = props.mapper;
+
+    const leds = new Array(Math.abs(start - end)).fill(null);
+
+    if (start < end) {
+      for (let i = 0, j = pos; i < leds.length; i++, j++) {
+        setColor(i, j, leds);
+      }
+    } else {
+      for (let i = leds.length - 1, j = pos; i >= 0; i--, j++) {
+        setColor(i, j, leds);
+      }
+    }
+
+    setLeds(leds);
+  });
+
+  // update rootWidth
+  createEffect(() => {
+    let observer: ResizeObserver;
+    onMount(() => {
+      observer = new ResizeObserver(() => {
+        setRootWidth(root.clientWidth);
+      });
+      observer.observe(root);
+    });
+
+    onCleanup(() => {
+      observer?.unobserve(root);
+    });
+  });
+  // update cellWidth
+  createEffect(() => {
+    const cellWidth = rootWidth() / ledStripStore.totalLedCount;
+    setCellWidth(cellWidth);
+  });
+
+  const style = createMemo<JSX.CSSProperties>(() => {
+    return {
+      transform: `translateX(${
+        (dragCurr()?.x ?? 0) -
+        (dragStart()?.x ?? 0) +
+        cellWidth() * Math.min(props.mapper.start, props.mapper.end)
+      }px)`,
+      width: `${cellWidth() * leds().length}px`,
+    };
+  });
+
+  return (
+    <div
+      class="flex mx-2 select-none cursor-ew-resize focus:cursor-ew-resize"
+      onPointerDown={onPointerDown}
+      ondblclick={reverse}
+      ref={root!}
+    >
+      <div
+        style={style()}
+        class="rounded-full border border-white flex h-3"
+        classList={{
+          'bg-gradient-to-b from-yellow-500/60 to-orange-300/60': dragging(),
+          'bg-gradient-to-b from-white/50 to-stone-500/40': !dragging(),
+        }}
+      >
+        <For each={leds()}>
+          {(it) => (
+            <div
+              class="flex-auto flex h-full w-full justify-center items-center relative"
+              title={it ?? ''}
+            >
+              <div
+                class="absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full ring-1 ring-stone-100"
+                classList={{ 'ring-stone-300/50': !it }}
+                style={{ background: it ?? 'transparent' }}
+              />
+            </div>
+          )}
+        </For>
+      </div>
+    </div>
+  );
+};
+
+const SorterResult: Component = () => {
+  const [fullLeds, setFullLeds] = createSignal<string[]>([]);
+
+  createEffect(() => {
+    const colors = ledStripStore.sortedColors;
+    const fullLeds = new Array(ledStripStore.totalLedCount)
+      .fill('rgba(255,255,255,0.1)')
+      .map((_, i) => {
+        let c1 = `rgb(${Math.floor(colors[i * 3] * 0.8)}, ${Math.floor(
+          colors[i * 3 + 1] * 0.8,
+        )}, ${Math.floor(colors[i * 3 + 2] * 0.8)})`;
+        let c2 = `rgb(${Math.min(Math.floor(colors[i * 3] * 1.2), 255)}, ${Math.min(
+          Math.floor(colors[i * 3 + 1] * 1.2),
+          255,
+        )}, ${Math.min(Math.floor(colors[i * 3 + 2] * 1.2), 255)})`;
+
+        return `linear-gradient(70deg, ${c1} 10%, ${c2})`;
+      });
+    setFullLeds(fullLeds);
+  });
+
+  return (
+    <div class="flex h-2 m-2">
+      <For each={fullLeds()}>
+        {(it) => (
+          <div
+            class="flex-auto flex h-full w-full justify-center items-center relative"
+            title={it}
+          >
+            <div
+              class="absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full ring-1 ring-stone-300"
+              style={{ background: it }}
+            />
+          </div>
+        )}
+      </For>
+    </div>
+  );
+};
+
+export const LedStripPartsSorter: Component = () => {
+  return (
+    <div
+      class="select-none overflow-hidden"
+      style={{
+        'background-image': `url(${background})`,
+      }}
+    >
+      <SorterResult />
+      <Index each={ledStripStore.strips}>
+        {(strip, index) => (
+          <Switch>
+            <Match when={strip().len > 0}>
+              <SorterItem strip={strip()} mapper={ledStripStore.mappers[index]} />
+            </Match>
+          </Switch>
+        )}
+      </Index>
+    </div>
+  );
+};
--- a/src/components/led-strip-configuration/screen-view.tsx
+++ b/src/components/led-strip-configuration/screen-view.tsx
--- a/src/components/led-strip-parts-sorter.tsx
+++ b/src/components/led-strip-parts-sorter.tsx
@@ -1,228 +0,0 @@
-import {
-  batch,
-  Component,
-  createContext,
-  createEffect,
-  createMemo,
-  createSignal,
-  For,
-  Index,
-  JSX,
-  on,
-  untrack,
-  useContext,
-} from 'solid-js';
-import { LedStripConfig, LedStripPixelMapper } from '../models/led-strip-config';
-import { ledStripStore } from '../stores/led-strip.store';
-import { invoke } from '@tauri-apps/api';
-import { LedStripConfigurationContext } from '../contexts/led-strip-configuration.context';
-import background from '../assets/transparent-grid-background.svg?url';
-
-const SorterItem: Component<{ strip: LedStripConfig; mapper: LedStripPixelMapper }> = (
-  props,
-) => {
-  const [fullLeds, setFullLeds] = createSignal<Array<string | null>>([]);
-  const [dragging, setDragging] = createSignal<boolean>(false);
-  const [dragStart, setDragStart] = createSignal<{ x: number; y: number } | null>(null);
-  const [dragCurr, setDragCurr] = createSignal<{ x: number; y: number } | null>(null);
-  const [dragStartIndex, setDragStartIndex] = createSignal<number>(0);
-  const [cellWidth, setCellWidth] = createSignal<number>(0);
-  const [, { setSelectedStripPart }] = useContext(LedStripConfigurationContext);
-
-  const move = (targetStart: number) => {
-    if (targetStart === props.mapper.start) {
-      return;
-    }
-    invoke('move_strip_part', {
-      displayId: props.strip.display_id,
-      border: props.strip.border,
-      targetStart,
-    }).catch((err) => console.error(err));
-  };
-
-  // reset translateX on config updated
-  createEffect(() => {
-    const indexDiff = props.mapper.start - dragStartIndex();
-    untrack(() => {
-      if (!dragStart() || !dragCurr()) {
-        return;
-      }
-
-      const compensation = indexDiff * cellWidth();
-      batch(() => {
-        setDragStartIndex(props.mapper.start);
-        setDragStart({
-          x: dragStart()!.x + compensation,
-          y: dragCurr()!.y,
-        });
-      });
-    });
-  });
-
-  const onPointerDown = (ev: PointerEvent) => {
-    if (ev.button !== 0) {
-      return;
-    }
-    setDragging(true);
-    setDragStart({ x: ev.clientX, y: ev.clientY });
-    setDragCurr({ x: ev.clientX, y: ev.clientY });
-    setDragStartIndex(props.mapper.start);
-  };
-
-  const onPointerUp = () => (ev: PointerEvent) => {
-    if (ev.button !== 0) {
-      return;
-    }
-    setDragging(false);
-  };
-
-  const onPointerMove = (ev: PointerEvent) => {
-    setSelectedStripPart({
-      displayId: props.strip.display_id,
-      border: props.strip.border,
-    });
-    if (!(ev.buttons & 1)) {
-      return;
-    }
-    const draggingInfo = dragging();
-    if (!draggingInfo) {
-      return;
-    }
-    setDragCurr({ x: ev.clientX, y: ev.clientY });
-
-    const cellWidth =
-      (ev.currentTarget as HTMLDivElement).clientWidth / ledStripStore.totalLedCount;
-    const diff = ev.clientX - dragStart()!.x;
-    const moved = Math.round(diff / cellWidth);
-    if (moved === 0) {
-      return;
-    }
-    setCellWidth(cellWidth);
-    move(props.mapper.start + moved);
-  };
-
-  const onPointerLeave = () => {
-    setSelectedStripPart(null);
-  };
-
-  const reverse = () => {
-    invoke('reverse_led_strip_part', {
-      displayId: props.strip.display_id,
-      border: props.strip.border,
-    }).catch((err) => console.error(err));
-  };
-
-  // update fullLeds
-  createEffect(() => {
-    const fullLeds = new Array(ledStripStore.totalLedCount).fill(null);
-    const colors = ledStripStore.colors;
-
-    const { start, end, pos } = props.mapper;
-    const isForward = start < end;
-    const step = isForward ? 1 : -1;
-    for (let i = start, j = pos; i !== end; i += step, j++) {
-      let c1 = `rgb(${Math.floor(colors[j * 3] * 0.8)}, ${Math.floor(
-        colors[j * 3 + 1] * 0.8,
-      )}, ${Math.floor(colors[j * 3 + 2] * 0.8)})`;
-      let c2 = `rgb(${Math.min(Math.floor(colors[j * 3] * 1.2), 255)}, ${Math.min(
-        Math.floor(colors[j * 3 + 1] * 1.2),
-        255,
-      )}, ${Math.min(Math.floor(colors[j * 3 + 2] * 1.2), 255)})`;
-
-      fullLeds[i] = `linear-gradient(70deg, ${c1} 10%, ${c2})`;
-    }
-
-    setFullLeds(fullLeds);
-  });
-
-  const style = createMemo<JSX.CSSProperties>(() => {
-    return {
-      transform: `translateX(${(dragCurr()?.x ?? 0) - (dragStart()?.x ?? 0)}px)`,
-    };
-  });
-
-  return (
-    <div
-      class="flex h-2 m-2 select-none cursor-ew-resize focus:cursor-ew-resize"
-      style={style()}
-      onPointerMove={onPointerMove}
-      onPointerDown={onPointerDown}
-      onPointerUp={onPointerUp}
-      onPointerLeave={onPointerLeave}
-      ondblclick={reverse}
-    >
-      <For each={fullLeds()}>
-        {(it) => (
-          <div
-            class="flex-auto flex h-full w-full justify-center items-center relative"
-            title={it ?? ''}
-          >
-            <div
-              class="absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full ring-1 ring-stone-100"
-              classList={{ 'ring-stone-300/50': !it }}
-              style={{ background: it ?? 'transparent' }}
-            />
-          </div>
-        )}
-      </For>
-    </div>
-  );
-};
-
-const SorterResult: Component = () => {
-  const [fullLeds, setFullLeds] = createSignal<string[]>([]);
-
-  createEffect(() => {
-    const colors = ledStripStore.sortedColors;
-    const fullLeds = new Array(ledStripStore.totalLedCount)
-      .fill('rgba(255,255,255,0.1)')
-      .map((_, i) => {
-        let c1 = `rgb(${Math.floor(colors[i * 3] * 0.8)}, ${Math.floor(
-          colors[i * 3 + 1] * 0.8,
-        )}, ${Math.floor(colors[i * 3 + 2] * 0.8)})`;
-        let c2 = `rgb(${Math.min(Math.floor(colors[i * 3] * 1.2), 255)}, ${Math.min(
-          Math.floor(colors[i * 3 + 1] * 1.2),
-          255,
-        )}, ${Math.min(Math.floor(colors[i * 3 + 2] * 1.2), 255)})`;
-
-        return `linear-gradient(70deg, ${c1} 10%, ${c2})`;
-      });
-    setFullLeds(fullLeds);
-  });
-
-  return (
-    <div class="flex h-2 m-2">
-      <For each={fullLeds()}>
-        {(it) => (
-          <div
-            class="flex-auto flex h-full w-full justify-center items-center relative"
-            title={it}
-          >
-            <div
-              class="absolute top-1/2 -translate-y-1/2 h-2.5 w-2.5 rounded-full ring-1 ring-stone-300"
-              style={{ background: it }}
-            />
-          </div>
-        )}
-      </For>
-    </div>
-  );
-};
-
-export const LedStripPartsSorter: Component = () => {
-  return (
-    <div
-      class="select-none overflow-hidden"
-      style={{
-        'background-image': `url(${background})`,
-      }}
-    >
-      <SorterResult />
-      <Index each={ledStripStore.strips}>
-        {(strip, index) => (
-          <SorterItem strip={strip()} mapper={ledStripStore.mappers[index]} />
-        )}
-      </Index>
-    </div>
-  );
-};
--- a/src/components/white-balance/color-slider.tsx
+++ b/src/components/white-balance/color-slider.tsx
@@ -0,0 +1,17 @@
+import { Component, JSX } from 'solid-js';
+
+type Props = {} & JSX.HTMLAttributes<HTMLInputElement>;
+
+export const ColorSlider: Component<Props> = (props) => {
+  return (
+    <input
+      type="range"
+      value="50"
+      {...props}
+      class={
+        'w-full h-2 bg-gradient-to-r rounded-lg appearance-none cursor-pointer dark:bg-gray-700 drop-shadow ' +
+        props.class
+      }
+    />
+  );
+};
--- a/src/components/white-balance/test-colors-bg.tsx
+++ b/src/components/white-balance/test-colors-bg.tsx
@@ -0,0 +1,99 @@
+import { Component, createSignal } from 'solid-js';
+
+const ColorItem: Component<{
+  color: string;
+  position: [number, number];
+  size?: [number, number];
+  onClick?: (color: string) => void;
+}> = (props) => {
+  return (
+    <div
+      style={{
+        background: props.color,
+        'grid-row-start': props.position[0],
+        'grid-column-start': props.position[1],
+        'grid-row-end': props.position[0] + (props.size ? props.size[0] : 1),
+        'grid-column-end': props.position[1] + (props.size ? props.size[1] : 1),
+        cursor: props.onClick ? 'pointer' : 'default',
+      }}
+      onClick={() => {
+        props.onClick?.(props.color);
+      }}
+    />
+  );
+};
+
+export const TestColorsBg: Component = () => {
+  const [singleColor, setSingleColor] = createSignal<string | null>(null);
+
+  return (
+    <>
+      <section
+        class="grid grid-cols-[8] grid-rows-[8] h-full w-full"
+        classList={{
+          hidden: singleColor() !== null,
+        }}
+      >
+        <ColorItem color="#ff0000" position={[1, 1]} onClick={setSingleColor} />
+        <ColorItem color="#ffff00" position={[1, 2]} onClick={setSingleColor} />
+        <ColorItem color="#00ff00" position={[1, 3]} onClick={setSingleColor} />
+        <ColorItem color="#00ffff" position={[1, 4]} onClick={setSingleColor} />
+        <ColorItem color="#0000ff" position={[1, 5]} onClick={setSingleColor} />
+        <ColorItem color="#ff00ff" position={[1, 6]} onClick={setSingleColor} />
+        <ColorItem color="#ffffff" position={[1, 7]} onClick={setSingleColor} />
+        <ColorItem color="#000000" position={[1, 8]} onClick={setSingleColor} />
+        <ColorItem color="#ffff00" position={[2, 1]} onClick={setSingleColor} />
+        <ColorItem color="#00ff00" position={[3, 1]} onClick={setSingleColor} />
+        <ColorItem color="#00ffff" position={[4, 1]} onClick={setSingleColor} />
+        <ColorItem color="#0000ff" position={[5, 1]} onClick={setSingleColor} />
+        <ColorItem color="#ff00ff" position={[6, 1]} onClick={setSingleColor} />
+        <ColorItem color="#ffffff" position={[7, 1]} onClick={setSingleColor} />
+        <ColorItem color="#000000" position={[8, 1]} onClick={setSingleColor} />
+        <ColorItem color="#ffffff" position={[2, 8]} onClick={setSingleColor} />
+        <ColorItem color="#ff00ff" position={[3, 8]} onClick={setSingleColor} />
+        <ColorItem color="#0000ff" position={[4, 8]} onClick={setSingleColor} />
+        <ColorItem color="#00ffff" position={[5, 8]} onClick={setSingleColor} />
+        <ColorItem color="#00ff00" position={[6, 8]} onClick={setSingleColor} />
+        <ColorItem color="#ffff00" position={[7, 8]} onClick={setSingleColor} />
+        <ColorItem color="#ff0000" position={[8, 8]} onClick={setSingleColor} />
+        <ColorItem color="#ffffff" position={[8, 2]} onClick={setSingleColor} />
+        <ColorItem color="#ff00ff" position={[8, 3]} onClick={setSingleColor} />
+        <ColorItem color="#0000ff" position={[8, 4]} onClick={setSingleColor} />
+        <ColorItem color="#00ffff" position={[8, 5]} onClick={setSingleColor} />
+        <ColorItem color="#00ff00" position={[8, 6]} onClick={setSingleColor} />
+        <ColorItem color="#ffff00" position={[8, 7]} onClick={setSingleColor} />
+      </section>
+      <section
+        class="grid grid-cols-[8] grid-rows-[8] h-full w-full"
+        classList={{
+          hidden: singleColor() === null,
+        }}
+      >
+        <ColorItem
+          color={singleColor()!}
+          position={[1, 1]}
+          size={[1, 7]}
+          onClick={() => setSingleColor(null)}
+        />
+        <ColorItem
+          color={singleColor()!}
+          position={[8, 2]}
+          size={[1, 7]}
+          onClick={() => setSingleColor(null)}
+        />
+        <ColorItem
+          color={singleColor()!}
+          position={[2, 1]}
+          size={[7, 1]}
+          onClick={() => setSingleColor(null)}
+        />
+        <ColorItem
+          color={singleColor()!}
+          position={[1, 8]}
+          size={[7, 1]}
+          onClick={() => setSingleColor(null)}
+        />
+      </section>
+    </>
+  );
+};
--- a/src/components/white-balance/white-balance.tsx
+++ b/src/components/white-balance/white-balance.tsx
@@ -0,0 +1,43 @@
+import { ColorSlider } from './color-slider';
+import { TestColorsBg } from './test-colors-bg';
+
+export const WhiteBalance = () => {
+  const exit = () => {
+    window.history.back();
+  };
+
+  return (
+    <section class="select-none">
+      <div class="absolute top-0 left-0 right-0 bottom-0">
+        <TestColorsBg />
+      </div>
+      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 max-w-lg bg-stone-200 p-5 rounded-xl drop-shadow">
+        <label class="flex items-center gap-2">
+          <span class="w-3 block">R:</span>
+          <ColorSlider class="from-cyan-500 to-red-500" />
+        </label>
+        <label class="flex items-center gap-2">
+          <span class="w-3 block">G:</span>
+          <ColorSlider class="from-pink-500 to-green-500" />
+        </label>
+        <label class="flex items-center gap-2">
+          <span class="w-3 block">B:</span>
+          <ColorSlider class="from-yellow-500 to-blue-500" />
+        </label>
+        <label class="flex items-center gap-2">
+          <span class="w-3 block">W:</span>
+          <ColorSlider class="from-yellow-50 to-cyan-50" />
+        </label>
+        <button
+          class="absolute -right-4 -top-4 rounded-full aspect-square bg-stone-300 p-1 shadow border border-stone-400"
+          onClick={exit}
+        >
+          X
+        </button>
+        <button class="absolute -right-4 -bottom-4 rounded-full aspect-square bg-stone-300 p-1 shadow border border-stone-400">
+          R
+        </button>
+      </div>
+    </section>
+  );
+};
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,5 +3,13 @@ import { render } from "solid-js/web";

 import "./styles.css";
 import App from "./App";
+import { Router } from '@solidjs/router';

-render(() => <App />, document.getElementById("root") as HTMLElement);
+render(
+  () => (
+    <Router>
+      <App />
+    </Router>
+  ),
+  document.getElementById('root') as HTMLElement,
+);
--- a/src/stores/led-strip.store.tsx
+++ b/src/stores/led-strip.store.tsx
@@ -7,6 +7,15 @@ export const [ledStripStore, setLedStripStore] = createStore({
  colors: new Uint8ClampedArray(),
  sortedColors: new Uint8ClampedArray(),
  get totalLedCount() {
-    return Math.max(0, ...ledStripStore.mappers.map((m) => Math.max(m.start, m.end)));
+    return Math.max(
+      0,
+      ...ledStripStore.mappers.map((m) => {
+        if (m.start === m.end) {
+          return 0;
+        } else {
+          return Math.max(m.start, m.end);
+        }
+      }),
+    );
  },
 });
Author	SHA1	Message	Date
Ivan Li	fc8b3164d8	feat(GUI): 色彩调整界面。	2023-04-16 12:53:03 +08:00
Ivan Li	932cc78bcf	chore: GUI 增加路由。	2023-04-15 18:58:40 +08:00
Ivan Li	782f3bf029	fix: wrong sample points on mac os 13.	2023-04-15 13:45:30 +08:00
Ivan Li	09799cb2d5	fix: 修复灯带顺序控件不能很好地被控制。	2023-04-15 11:26:41 +08:00
Ivan Li	a905c98823	fix: 更新配置时无法应用配置到灯带颜色获取逻辑。	2023-04-14 22:18:59 +08:00
Ivan Li	9cbccedc72	fix: wrong sample points on mac os 13.	2023-04-14 21:27:14 +08:00
Ivan Li	aa7430c54e	build: update deps.	2023-04-12 23:43:41 +08:00