Compare commits
57 Commits
2fa02086c9
...
v1.0
| Author | SHA1 | Date | |
|---|---|---|---|
| b2077c0199 | |||
| 0fdc11c0b0 | |||
| 91bd78ab31 | |||
| 2be0640622 | |||
| 0e96223bf6 | |||
| d8b33923d5 | |||
| 4ce515be1c | |||
| f88bf03939 | |||
| 7cd4a91350 | |||
| d907ca37ad | |||
| 6c6ed22dbe | |||
| 00514f0525 | |||
| cf1d831b5a | |||
| fd37183400 | |||
| 5fdeb57b74 | |||
| 1576383d09 | |||
| 8503315bef | |||
| 928263fbd8 | |||
| 7e33f7db6a | |||
| e74ef6d64f | |||
| 3ed435824c | |||
| d7fabf58a4 | |||
| a7e921805a | |||
| c56739c5fa | |||
| fd52e40d17 | |||
| f48c8789c7 | |||
| 80ff216e54 | |||
| 1fb3dee942 | |||
| a4502055fb | |||
| 6e61ec8de6 | |||
| 48d02f0e70 | |||
| cacaa3505e | |||
| 97ffc69b12 | |||
| 9f37dbbff0 | |||
| df37f15f73 | |||
| 9c43a0a22b | |||
| d41faddfca | |||
| 9e2409430c | |||
| 5f6e45af09 | |||
| cccda24448 | |||
| 5cca60d830 | |||
| ac750a36e7 | |||
| 01f373f0bd | |||
| d00d21e2b6 | |||
| deca1b6c37 | |||
| 5c35e68ab2 | |||
| 8b6bbdeb56 | |||
| 09bc09cca3 | |||
| e57feda131 | |||
| 3242aa464b | |||
| 72b7ba39ef | |||
| c2a0cfaef4 | |||
| 4c3337a232 | |||
| 825ae1f637 | |||
| 14a70cb024 | |||
| 425511d41f | |||
| 3e5239f3c6 |
116
.cursor/debug.log
Normal file
116
.cursor/debug.log
Normal file
@@ -0,0 +1,116 @@
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434706543}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434706552}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434707852}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434707860}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434708466}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434708474}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768434709765}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768434709787}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768434717888}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":201,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768434717903}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434717904}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434717913}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434738084}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434738093}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434739031}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434739040}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434746453}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434746496}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768434748859}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768434748866}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768434773921}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":201,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768434773931}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434773931}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434773940}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768434810105}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768434810119}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768434816383}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":201,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768434816399}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434816400}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434816414}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434944656}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434944756}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434945369}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434945427}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434946108}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434946162}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434946680}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434946736}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768434947640}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768434947656}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768434953064}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":201,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768434953079}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434953080}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768434953093}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435103720}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435103776}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435104593}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435104647}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435105158}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435105253}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435275247}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435275315}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435276178}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435276278}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435276945}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435276998}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768435278150}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768435278162}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768435281966}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":400,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768435281988}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435387623}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435387680}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435388399}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435388454}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/create-form-fragment","targetId":""},"timestamp":1768435389910}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/create-form-fragment","targetId":""},"timestamp":1768435389922}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs","targetId":"tabs-list"},"timestamp":1768435393213}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs","targetId":"tabs-list"},"timestamp":1768435393231}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435393233}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435393245}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/12/content-fragment","targetId":"tab-content"},"timestamp":1768435395729}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/12/content-fragment","targetId":"tab-content"},"timestamp":1768435395748}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/13/content-fragment","targetId":"tab-content"},"timestamp":1768435396771}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/13/content-fragment","targetId":"tab-content"},"timestamp":1768435396788}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/12/content-fragment","targetId":"tab-content"},"timestamp":1768435398656}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/12/content-fragment","targetId":"tab-content"},"timestamp":1768435398674}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/13/content-fragment","targetId":"tab-content"},"timestamp":1768435399748}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/13/content-fragment","targetId":"tab-content"},"timestamp":1768435399774}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435668310}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":false,"hasPaletteContainer":false,"hasLightingController":false},"timestamp":1768435668311}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435668355}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435669841}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":false,"hasPaletteContainer":false,"hasLightingController":false},"timestamp":1768435669842}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435669852}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435672686}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435673713}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435674316}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435674560}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435680419}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":false,"modalActive":null},"timestamp":1768435680897}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435814285}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":true,"hasPaletteContainer":false,"hasLightingController":false},"timestamp":1768435814287}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H3","location":"src/static/color_palette.js:DOMContentLoaded","message":"palette script loaded","data":{"hasButton":true,"hasModal":true,"hasClose":true},"timestamp":1768435814287}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435814350}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435815080}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H3","location":"src/static/color_palette.js:DOMContentLoaded","message":"palette script loaded","data":{"hasButton":true,"hasModal":true,"hasClose":true},"timestamp":1768435815081}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":true,"hasPaletteContainer":false,"hasLightingController":false},"timestamp":1768435815082}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435815135}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435815724}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H3","location":"src/static/color_palette.js:DOMContentLoaded","message":"palette script loaded","data":{"hasButton":true,"hasModal":true,"hasClose":true},"timestamp":1768435815725}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":true,"hasPaletteContainer":false,"hasLightingController":false},"timestamp":1768435815725}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435815778}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H4","location":"src/static/color_palette.js:openModal","message":"palette modal opened","data":{"active":true},"timestamp":1768435817104}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":true,"modalActive":true},"timestamp":1768435817105}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H4","location":"src/static/color_palette.js:closeModal","message":"palette modal closed","data":{"active":false},"timestamp":1768435820180}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435931118}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":true,"hasPaletteContainer":true,"hasLightingController":false},"timestamp":1768435931120}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H3","location":"src/static/color_palette.js:DOMContentLoaded","message":"palette script loaded","data":{"hasButton":true,"hasModal":true,"hasClose":true,"hasContainer":true,"hasAddButton":true},"timestamp":1768435931119}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435931173}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:htmx:beforeRequest","message":"htmx request","data":{"path":"/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435931791}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H1","location":"src/templates/index.html:DOMContentLoaded","message":"palette elements presence","data":{"hasPaletteButton":true,"hasPaletteModal":true,"hasPaletteContainer":true,"hasLightingController":false},"timestamp":1768435931793}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H3","location":"src/static/color_palette.js:DOMContentLoaded","message":"palette script loaded","data":{"hasButton":true,"hasModal":true,"hasClose":true,"hasContainer":true,"hasAddButton":true},"timestamp":1768435931793}
|
||||
{"sessionId":"debug-session","runId":"tabs-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:htmx:afterRequest","message":"htmx response","data":{"status":200,"responseURL":"http://localhost:5000/tabs/list-fragment","targetId":"tabs-list"},"timestamp":1768435931895}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H2","location":"src/templates/index.html:color-palette-btn","message":"color palette button clicked","data":{"hasPaletteModal":true,"modalActive":true},"timestamp":1768435933111}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H4","location":"src/static/color_palette.js:openModal","message":"palette modal opened","data":{"active":true},"timestamp":1768435933110}
|
||||
{"sessionId":"debug-session","runId":"palette-pre-fix","hypothesisId":"H4","location":"src/static/color_palette.js:closeModal","message":"palette modal closed","data":{"active":false},"timestamp":1768435943332}
|
||||
29
.gitignore
vendored
Normal file
29
.gitignore
vendored
Normal file
@@ -0,0 +1,29 @@
|
||||
# Python
|
||||
__pycache__/
|
||||
*.py[cod]
|
||||
*$py.class
|
||||
*.so
|
||||
.Python
|
||||
|
||||
# Virtual environments
|
||||
venv/
|
||||
env/
|
||||
ENV/
|
||||
.venv
|
||||
|
||||
# IDE
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Project specific
|
||||
*.log
|
||||
*.db
|
||||
*.sqlite
|
||||
|
||||
10
Pipfile
10
Pipfile
@@ -7,8 +7,18 @@ name = "pypi"
|
||||
mpremote = "*"
|
||||
pyserial = "*"
|
||||
esptool = "*"
|
||||
pyjwt = "*"
|
||||
watchfiles = "*"
|
||||
requests = "*"
|
||||
selenium = "*"
|
||||
adafruit-ampy = "*"
|
||||
|
||||
[dev-packages]
|
||||
|
||||
[requires]
|
||||
python_version = "3.12"
|
||||
|
||||
[scripts]
|
||||
web = "python /home/pi/led-controller/tests/web.py"
|
||||
watch = "python -m watchfiles 'python tests/web.py' src tests"
|
||||
install = "pipenv install"
|
||||
926
Pipfile.lock
generated
Normal file
926
Pipfile.lock
generated
Normal file
@@ -0,0 +1,926 @@
|
||||
{
|
||||
"_meta": {
|
||||
"hash": {
|
||||
"sha256": "c963cd52164ac13fda5e6f3c5975bc14db6cea03ad4973de02ad91a0ab10d2ea"
|
||||
},
|
||||
"pipfile-spec": 6,
|
||||
"requires": {
|
||||
"python_version": "3.12"
|
||||
},
|
||||
"sources": [
|
||||
{
|
||||
"name": "pypi",
|
||||
"url": "https://pypi.org/simple",
|
||||
"verify_ssl": true
|
||||
}
|
||||
]
|
||||
},
|
||||
"default": {
|
||||
"adafruit-ampy": {
|
||||
"hashes": [
|
||||
"sha256:4a74812226e53c17d01eb828633424bc4f4fe76b9499a7b35eba6fc2532635b7",
|
||||
"sha256:f4cba36f564096f2aafd173f7fbabb845365cc3bb3f41c37541edf98b58d3976"
|
||||
],
|
||||
"index": "pypi",
|
||||
"version": "==1.1.0"
|
||||
},
|
||||
"anyio": {
|
||||
"hashes": [
|
||||
"sha256:41cfcc3a4c85d3f05c932da7c26d0201ac36f72abd4435ba90d0464a3ffed703",
|
||||
"sha256:d405828884fc140aa80a3c667b8beed277f1dfedec42ba031bd6ac3db606ab6c"
|
||||
],
|
||||
"markers": "python_version >= '3.9'",
|
||||
"version": "==4.12.1"
|
||||
},
|
||||
"async-generator": {
|
||||
"hashes": [
|
||||
"sha256:01c7bf666359b4967d2cda0000cc2e4af16a0ae098cbffcb8472fb9e8ad6585b",
|
||||
"sha256:6ebb3d106c12920aaae42ccb6f787ef5eefdcdd166ea3d628fa8476abe712144"
|
||||
],
|
||||
"markers": "python_version >= '3.5'",
|
||||
"version": "==1.10"
|
||||
},
|
||||
"attrs": {
|
||||
"hashes": [
|
||||
"sha256:16d5969b87f0859ef33a48b35d55ac1be6e42ae49d5e853b597db70c35c57e11",
|
||||
"sha256:adcf7e2a1fb3b36ac48d97835bb6d8ade15b8dcce26aba8bf1d14847b57a3373"
|
||||
],
|
||||
"markers": "python_version >= '3.9'",
|
||||
"version": "==25.4.0"
|
||||
},
|
||||
"bitarray": {
|
||||
"hashes": [
|
||||
"sha256:004d518fa410e6da43386d20e07b576a41eb417ac67abf9f30fa75e125697199",
|
||||
"sha256:014df8a9430276862392ac5d471697de042367996c49f32d0008585d2c60755a",
|
||||
"sha256:01c5f0dc080b0ebb432f7a68ee1e88a76bd34f6d89c9568fcec65fb16ed71f0e",
|
||||
"sha256:025d133bf4ca8cf75f904eeb8ea946228d7c043231866143f31946a6f4dd0bf3",
|
||||
"sha256:0ca70ccf789446a6dfde40b482ec21d28067172cd1f8efd50d5548159fccad9e",
|
||||
"sha256:0df69d26f21a9d2f1b20266f6737fa43f08aa5015c99900fb69f255fbe4dabb4",
|
||||
"sha256:0f8069a807a3e6e3c361ce302ece4bf1c3b49962c1726d1d56587e8f48682861",
|
||||
"sha256:15a2eff91f54d2b1f573cca8ca6fb58763ce8fea80e7899ab028f3987ef71cd5",
|
||||
"sha256:15e8d0597cc6e8496de6f4dea2a6880c57e1251502a7072f5631108a1aa28521",
|
||||
"sha256:165052a0e61c880f7093808a0c524ce1b3555bfa114c0dfb5c809cd07918a60d",
|
||||
"sha256:178c5a4c7fdfb5cd79e372ae7f675390e670f3732e5bc68d327e01a5b3ff8d55",
|
||||
"sha256:18214bac86341f1cc413772e66447d6cca10981e2880b70ecaf4e826c04f95e9",
|
||||
"sha256:1a54d7e7999735faacdcbe8128e30207abc2caf9f9fd7102d180b32f1b78bfce",
|
||||
"sha256:1a926fa554870642607fd10e66ee25b75fdd9a7ca4bbffa93d424e4ae2bf734a",
|
||||
"sha256:1c8f2a5d8006db5a555e06f9437e76bf52537d3dfd130cb8ae2b30866aca32c9",
|
||||
"sha256:21ca6a47bf20db9e7ad74ca04b3d479e4d76109b68333eb23535553d2705339e",
|
||||
"sha256:22c540ed20167d3dbb1e2d868ca935180247d620c40eace90efa774504a40e3b",
|
||||
"sha256:239578587b9c29469ab61149dda40a2fe714a6a4eca0f8ff9ea9439ec4b7bc30",
|
||||
"sha256:25b9cff6c9856bc396232e2f609ea0c5ec1a8a24c500cee4cca96ba8a3cd50b6",
|
||||
"sha256:26714898eb0d847aac8af94c4441c9cb50387847d0fe6b9fc4217c086cd68b80",
|
||||
"sha256:28a85b056c0eb7f5d864c0ceef07034117e8ebfca756f50648c71950a568ba11",
|
||||
"sha256:2a3d1b05ffdd3e95687942ae7b13c63689f85d3f15c39b33329e3cb9ce6c015f",
|
||||
"sha256:2c3bb96b6026643ce24677650889b09073f60b9860a71765f843c99f9ab38b25",
|
||||
"sha256:2fa23fdb3beab313950bbb49674e8a161e61449332d3997089fe3944953f1b77",
|
||||
"sha256:2fe8c54b15a9cd4f93bc2aaceab354ec65af93370aa1496ba2f9c537a4855ee0",
|
||||
"sha256:30989a2451b693c3f9359d91098a744992b5431a0be4858f1fdf0ec76b457125",
|
||||
"sha256:31a4ad2b730128e273f1c22300da3e3631f125703e4fee0ac44d385abfb15671",
|
||||
"sha256:337c8cd46a4c6568d367ed676cbf2d7de16f890bb31dbb54c44c1d6bb6d4a1de",
|
||||
"sha256:33af25c4ff7723363cb8404dfc2eefeab4110b654f6c98d26aba8a08c745d860",
|
||||
"sha256:3ea52df96566457735314794422274bd1962066bfb609e7eea9113d70cf04ffe",
|
||||
"sha256:3eae38daffd77c9621ae80c16932eea3fb3a4af141fb7cc724d4ad93eff9210d",
|
||||
"sha256:41b53711f89008ba2de62e4c2d2260a8b357072fd4f18e1351b28955db2719dc",
|
||||
"sha256:451f9958850ea98440d542278368c8d1e1ea821e2494b204570ba34a340759df",
|
||||
"sha256:46cf239856b87fe1c86dfbb3d459d840a8b1649e7922b1e0bfb6b6464692644a",
|
||||
"sha256:4779f356083c62e29b4198d290b7b17a39a69702d150678b7efff0fdddf494a8",
|
||||
"sha256:4902f4ecd5fcb6a5f482d7b0ae1c16c21f26fc5279b3b6127363d13ad8e7a9d9",
|
||||
"sha256:4d73d4948dcc5591d880db8933004e01f1dd2296df9de815354d53469beb26fe",
|
||||
"sha256:4d9984017314da772f5f7460add7a0301a4ffc06c72c2998bb16c300a6253607",
|
||||
"sha256:4f298daaaea58d45e245a132d6d2bdfb6f856da50dc03d75ebb761439fb626cf",
|
||||
"sha256:50ddbe3a7b4b6ab96812f5a4d570f401a2cdb95642fd04c062f98939610bbeee",
|
||||
"sha256:5338a313f998e1be7267191b7caaae82563b4a2b42b393561055412a34042caa",
|
||||
"sha256:5591daf81313096909d973fb2612fccd87528fdfdd39f6478bdce54543178954",
|
||||
"sha256:56896ceeffe25946c4010320629e2d858ca763cd8ded273c81672a5edbcb1e0a",
|
||||
"sha256:58a01ea34057463f7a98a4d6ff40160f65f945e924fec08a5b39e327e372875d",
|
||||
"sha256:5bfac7f236ba1a4d402644bdce47fb9db02a7cf3214a1f637d3a88390f9e5428",
|
||||
"sha256:5c5a8a83df95e51f7a7c2b083eaea134cbed39fc42c6aeb2e764ddb7ccccd43e",
|
||||
"sha256:5f2fb10518f6b365f5b720e43a529c3b2324ca02932f609631a44edb347d8d54",
|
||||
"sha256:64af877116edf051375b45f0bda648143176a017b13803ec7b3a3111dc05f4c5",
|
||||
"sha256:6d70fa9c6d2e955bde8cd327ffc11f2cc34bc21944e5571a46ca501e7eadef24",
|
||||
"sha256:6d79f659965290af60d6acc8e2716341865fe74609a7ede2a33c2f86ad893b8f",
|
||||
"sha256:720963fee259291a88348ae9735d9deb5d334e84a016244f61c89f5a49aa400a",
|
||||
"sha256:75a3b6e9c695a6570ea488db75b84bb592ff70a944957efa1c655867c575018b",
|
||||
"sha256:792462abfeeca6cc8c6c1e6d27e14319682f0182f6b0ba37befe911af794db70",
|
||||
"sha256:79ec4498a545733ecace48d780d22407411b07403a2e08b9a4d7596c0b97ebd7",
|
||||
"sha256:7f14d6b303e55bd7d19b28309ef8014370e84a3806c5e452e078e7df7344d97a",
|
||||
"sha256:7f65bd5d4cdb396295b6aa07f84ca659ac65c5c68b53956a6d95219e304b0ada",
|
||||
"sha256:81c6b4a6c1af800d52a6fa32389ef8f4281583f4f99dc1a40f2bb47667281541",
|
||||
"sha256:82a07de83dce09b4fa1bccbdc8bde8f188b131666af0dc9048ba0a0e448d8a3b",
|
||||
"sha256:847c7f61964225fc489fe1d49eda7e0e0d253e98862c012cecf845f9ad45cdf4",
|
||||
"sha256:84b52b2cf77bb7f703d16c4007b021078dbbe6cf8ffb57abe81a7bacfc175ef2",
|
||||
"sha256:86685fa04067f7175f9718489ae755f6acde03593a1a9ca89305554af40e14fd",
|
||||
"sha256:8a9c962c64a4c08def58b9799333e33af94ec53038cf151d36edacdb41f81646",
|
||||
"sha256:8cbd4bfc933b33b85c43ef4c1f4d5e3e9d91975ea6368acf5fbac02bac06ea89",
|
||||
"sha256:8ffe660e963ae711cb9e2b8d8461c9b1ad6167823837fc17d59d5e539fb898fa",
|
||||
"sha256:94652da1a4ca7cfb69c15dd6986b205e0bd9c63a05029c3b48b4201085f527bd",
|
||||
"sha256:969fd67de8c42affdb47b38b80f1eaa79ac0ef17d65407cdd931db1675315af1",
|
||||
"sha256:9858dcbc23ba7eaadcd319786b982278a1a2b2020720b19db43e309579ff76fb",
|
||||
"sha256:99d25aff3745c54e61ab340b98400c52ebec04290a62078155e0d7eb30380220",
|
||||
"sha256:99f55e14e7c56f4fafe1343480c32b110ef03836c21ff7c48bae7add6818f77c",
|
||||
"sha256:9d35d8f8a1c9ed4e2b08187b513f8a3c71958600129db3aa26d85ea3abfd1310",
|
||||
"sha256:a2ba92f59e30ce915e9e79af37649432e3a212ddddf416d4d686b1b4825bcdb2",
|
||||
"sha256:a2cb35a6efaa0e3623d8272471371a12c7e07b51a33e5efce9b58f655d864b4e",
|
||||
"sha256:a358277122456666a8b2a0b9aa04f1b89d34e8aa41d08a6557d693e6abb6667c",
|
||||
"sha256:a60da2f9efbed355edb35a1fb6829148676786c829fad708bb6bb47211b3593a",
|
||||
"sha256:aa7dec53c25f1949513457ef8b0ea1fb40e76c672cc4d2daa8ad3c8d6b73491a",
|
||||
"sha256:b1572ee0eb1967e71787af636bb7d1eb9c6735d5337762c450650e7f51844594",
|
||||
"sha256:b4f10d3f304be7183fac79bf2cd997f82e16aa9a9f37343d76c026c6e435a8a8",
|
||||
"sha256:bbbbfbb7d039b20d289ce56b1beb46138d65769d04af50c199c6ac4cb6054d52",
|
||||
"sha256:c394a3f055b49f92626f83c1a0b6d6cd2c628f1ccd72481c3e3c6aa4695f3b20",
|
||||
"sha256:c396358023b876cff547ce87f4e8ff8a2280598873a137e8cc69e115262260b8",
|
||||
"sha256:c5ba07e58fd98c9782201e79eb8dd4225733d212a5a3700f9a84d329bd0463a6",
|
||||
"sha256:c764fb167411d5afaef88138542a4bfa28bd5e5ded5e8e42df87cef965efd6e9",
|
||||
"sha256:cbba763d99de0255a3e4938f25a8579930ac8aa089233cb2fb2ed7d04d4aff02",
|
||||
"sha256:cbd1660fb48827381ce3a621a4fdc237959e1cd4e98b098952a8f624a0726425",
|
||||
"sha256:cd761d158f67e288fd0ebe00c3b158095ce80a4bc7c32b60c7121224003ba70d",
|
||||
"sha256:cdfbb27f2c46bb5bbdcee147530cbc5ca8ab858d7693924e88e30ada21b2c5e2",
|
||||
"sha256:d2dbe8a3baf2d842e342e8acb06ae3844765d38df67687c144cdeb71f1bcb5d7",
|
||||
"sha256:d5c931ec1c03111718cabf85f6012bb2815fa0ce578175567fa8d6f2cc15d3b4",
|
||||
"sha256:df6d7bf3e15b7e6e202a16ff4948a51759354016026deb04ab9b5acbbe35e096",
|
||||
"sha256:dfbe2aa45b273f49e715c5345d94874cb65a28482bf231af408891c260601b8d",
|
||||
"sha256:e12769d3adcc419e65860de946df8d2ed274932177ac1cdb05186e498aaa9149",
|
||||
"sha256:e5aed4754895942ae15ffa48c52d181e1c1463236fda68d2dba29c03aa61786b",
|
||||
"sha256:e645b4c365d6f1f9e0799380ad6395268f3c3b898244a650aaeb8d9d27b74c35",
|
||||
"sha256:ed3493a369fe849cce98542d7405c88030b355e4d2e113887cb7ecc86c205773",
|
||||
"sha256:f08342dc8d19214faa7ef99574dea6c37a2790d6d04a9793ef8fa76c188dc08d",
|
||||
"sha256:f0a55cf02d2cdd739b40ce10c09bbdd520e141217696add7a48b56e67bdfdfe6",
|
||||
"sha256:f0ce9d9e07c75da8027c62b4c9f45771d1d8aae7dc9ad7fb606c6a5aedbe9741",
|
||||
"sha256:f1f723e260c35e1c7c57a09d3a6ebe681bd56c83e1208ae3ce1869b7c0d10d4f",
|
||||
"sha256:f2fcbe9b3a5996b417e030aa33a562e7e20dfc86271e53d7e841fc5df16268b8",
|
||||
"sha256:f3fd8df63c41ff6a676d031956aebf68ebbc687b47c507da25501eb22eec341f",
|
||||
"sha256:f8d3417db5e14a6789073b21ae44439a755289477901901bae378a57b905e148",
|
||||
"sha256:fbf05678c2ae0064fb1b8de7e9e8f0fc30621b73c8477786dd0fb3868044a8c8",
|
||||
"sha256:fc98ff43abad61f00515ad9a06213b7716699146e46eabd256cdfe7cb522bd97",
|
||||
"sha256:ff1863f037dad765ef5963efc2e37d399ac023e192a6f2bb394e2377d023cefe"
|
||||
],
|
||||
"version": "==3.8.0"
|
||||
},
|
||||
"bitstring": {
|
||||
"hashes": [
|
||||
"sha256:69d1587f0ac18dc7d93fc7e80d5f447161a33e57027e726dc18a0a8bacf1711a",
|
||||
"sha256:a08bc09d3857216d4c0f412a1611056f1cc2b64fd254fb1e8a0afba7cfa1a95a"
|
||||
],
|
||||
"markers": "python_version >= '3.8'",
|
||||
"version": "==4.3.1"
|
||||
},
|
||||
"certifi": {
|
||||
"hashes": [
|
||||
"sha256:9943707519e4add1115f44c2bc244f782c0249876bf51b6599fee1ffbedd685c",
|
||||
"sha256:ac726dd470482006e014ad384921ed6438c457018f4b3d204aea4281258b2120"
|
||||
],
|
||||
"markers": "python_version >= '3.7'",
|
||||
"version": "==2026.1.4"
|
||||
},
|
||||
"cffi": {
|
||||
"hashes": [
|
||||
"sha256:00bdf7acc5f795150faa6957054fbbca2439db2f775ce831222b66f192f03beb",
|
||||
"sha256:07b271772c100085dd28b74fa0cd81c8fb1a3ba18b21e03d7c27f3436a10606b",
|
||||
"sha256:087067fa8953339c723661eda6b54bc98c5625757ea62e95eb4898ad5e776e9f",
|
||||
"sha256:0a1527a803f0a659de1af2e1fd700213caba79377e27e4693648c2923da066f9",
|
||||
"sha256:0cf2d91ecc3fcc0625c2c530fe004f82c110405f101548512cce44322fa8ac44",
|
||||
"sha256:0f6084a0ea23d05d20c3edcda20c3d006f9b6f3fefeac38f59262e10cef47ee2",
|
||||
"sha256:12873ca6cb9b0f0d3a0da705d6086fe911591737a59f28b7936bdfed27c0d47c",
|
||||
"sha256:19f705ada2530c1167abacb171925dd886168931e0a7b78f5bffcae5c6b5be75",
|
||||
"sha256:1cd13c99ce269b3ed80b417dcd591415d3372bcac067009b6e0f59c7d4015e65",
|
||||
"sha256:1e3a615586f05fc4065a8b22b8152f0c1b00cdbc60596d187c2a74f9e3036e4e",
|
||||
"sha256:1f72fb8906754ac8a2cc3f9f5aaa298070652a0ffae577e0ea9bd480dc3c931a",
|
||||
"sha256:1fc9ea04857caf665289b7a75923f2c6ed559b8298a1b8c49e59f7dd95c8481e",
|
||||
"sha256:203a48d1fb583fc7d78a4c6655692963b860a417c0528492a6bc21f1aaefab25",
|
||||
"sha256:2081580ebb843f759b9f617314a24ed5738c51d2aee65d31e02f6f7a2b97707a",
|
||||
"sha256:21d1152871b019407d8ac3985f6775c079416c282e431a4da6afe7aefd2bccbe",
|
||||
"sha256:24b6f81f1983e6df8db3adc38562c83f7d4a0c36162885ec7f7b77c7dcbec97b",
|
||||
"sha256:256f80b80ca3853f90c21b23ee78cd008713787b1b1e93eae9f3d6a7134abd91",
|
||||
"sha256:28a3a209b96630bca57cce802da70c266eb08c6e97e5afd61a75611ee6c64592",
|
||||
"sha256:2c8f814d84194c9ea681642fd164267891702542f028a15fc97d4674b6206187",
|
||||
"sha256:2de9a304e27f7596cd03d16f1b7c72219bd944e99cc52b84d0145aefb07cbd3c",
|
||||
"sha256:38100abb9d1b1435bc4cc340bb4489635dc2f0da7456590877030c9b3d40b0c1",
|
||||
"sha256:3925dd22fa2b7699ed2617149842d2e6adde22b262fcbfada50e3d195e4b3a94",
|
||||
"sha256:3e17ed538242334bf70832644a32a7aae3d83b57567f9fd60a26257e992b79ba",
|
||||
"sha256:3e837e369566884707ddaf85fc1744b47575005c0a229de3327f8f9a20f4efeb",
|
||||
"sha256:3f4d46d8b35698056ec29bca21546e1551a205058ae1a181d871e278b0b28165",
|
||||
"sha256:44d1b5909021139fe36001ae048dbdde8214afa20200eda0f64c068cac5d5529",
|
||||
"sha256:45d5e886156860dc35862657e1494b9bae8dfa63bf56796f2fb56e1679fc0bca",
|
||||
"sha256:4647afc2f90d1ddd33441e5b0e85b16b12ddec4fca55f0d9671fef036ecca27c",
|
||||
"sha256:4671d9dd5ec934cb9a73e7ee9676f9362aba54f7f34910956b84d727b0d73fb6",
|
||||
"sha256:53f77cbe57044e88bbd5ed26ac1d0514d2acf0591dd6bb02a3ae37f76811b80c",
|
||||
"sha256:5eda85d6d1879e692d546a078b44251cdd08dd1cfb98dfb77b670c97cee49ea0",
|
||||
"sha256:5fed36fccc0612a53f1d4d9a816b50a36702c28a2aa880cb8a122b3466638743",
|
||||
"sha256:61d028e90346df14fedc3d1e5441df818d095f3b87d286825dfcbd6459b7ef63",
|
||||
"sha256:66f011380d0e49ed280c789fbd08ff0d40968ee7b665575489afa95c98196ab5",
|
||||
"sha256:6824f87845e3396029f3820c206e459ccc91760e8fa24422f8b0c3d1731cbec5",
|
||||
"sha256:6c6c373cfc5c83a975506110d17457138c8c63016b563cc9ed6e056a82f13ce4",
|
||||
"sha256:6d02d6655b0e54f54c4ef0b94eb6be0607b70853c45ce98bd278dc7de718be5d",
|
||||
"sha256:6d50360be4546678fc1b79ffe7a66265e28667840010348dd69a314145807a1b",
|
||||
"sha256:730cacb21e1bdff3ce90babf007d0a0917cc3e6492f336c2f0134101e0944f93",
|
||||
"sha256:737fe7d37e1a1bffe70bd5754ea763a62a066dc5913ca57e957824b72a85e205",
|
||||
"sha256:74a03b9698e198d47562765773b4a8309919089150a0bb17d829ad7b44b60d27",
|
||||
"sha256:7553fb2090d71822f02c629afe6042c299edf91ba1bf94951165613553984512",
|
||||
"sha256:7a66c7204d8869299919db4d5069a82f1561581af12b11b3c9f48c584eb8743d",
|
||||
"sha256:7cc09976e8b56f8cebd752f7113ad07752461f48a58cbba644139015ac24954c",
|
||||
"sha256:81afed14892743bbe14dacb9e36d9e0e504cd204e0b165062c488942b9718037",
|
||||
"sha256:8941aaadaf67246224cee8c3803777eed332a19d909b47e29c9842ef1e79ac26",
|
||||
"sha256:89472c9762729b5ae1ad974b777416bfda4ac5642423fa93bd57a09204712322",
|
||||
"sha256:8ea985900c5c95ce9db1745f7933eeef5d314f0565b27625d9a10ec9881e1bfb",
|
||||
"sha256:8eca2a813c1cb7ad4fb74d368c2ffbbb4789d377ee5bb8df98373c2cc0dee76c",
|
||||
"sha256:92b68146a71df78564e4ef48af17551a5ddd142e5190cdf2c5624d0c3ff5b2e8",
|
||||
"sha256:9332088d75dc3241c702d852d4671613136d90fa6881da7d770a483fd05248b4",
|
||||
"sha256:94698a9c5f91f9d138526b48fe26a199609544591f859c870d477351dc7b2414",
|
||||
"sha256:9a67fc9e8eb39039280526379fb3a70023d77caec1852002b4da7e8b270c4dd9",
|
||||
"sha256:9de40a7b0323d889cf8d23d1ef214f565ab154443c42737dfe52ff82cf857664",
|
||||
"sha256:a05d0c237b3349096d3981b727493e22147f934b20f6f125a3eba8f994bec4a9",
|
||||
"sha256:afb8db5439b81cf9c9d0c80404b60c3cc9c3add93e114dcae767f1477cb53775",
|
||||
"sha256:b18a3ed7d5b3bd8d9ef7a8cb226502c6bf8308df1525e1cc676c3680e7176739",
|
||||
"sha256:b1e74d11748e7e98e2f426ab176d4ed720a64412b6a15054378afdb71e0f37dc",
|
||||
"sha256:b21e08af67b8a103c71a250401c78d5e0893beff75e28c53c98f4de42f774062",
|
||||
"sha256:b4c854ef3adc177950a8dfc81a86f5115d2abd545751a304c5bcf2c2c7283cfe",
|
||||
"sha256:b882b3df248017dba09d6b16defe9b5c407fe32fc7c65a9c69798e6175601be9",
|
||||
"sha256:baf5215e0ab74c16e2dd324e8ec067ef59e41125d3eade2b863d294fd5035c92",
|
||||
"sha256:c649e3a33450ec82378822b3dad03cc228b8f5963c0c12fc3b1e0ab940f768a5",
|
||||
"sha256:c654de545946e0db659b3400168c9ad31b5d29593291482c43e3564effbcee13",
|
||||
"sha256:c6638687455baf640e37344fe26d37c404db8b80d037c3d29f58fe8d1c3b194d",
|
||||
"sha256:c8d3b5532fc71b7a77c09192b4a5a200ea992702734a2e9279a37f2478236f26",
|
||||
"sha256:cb527a79772e5ef98fb1d700678fe031e353e765d1ca2d409c92263c6d43e09f",
|
||||
"sha256:cf364028c016c03078a23b503f02058f1814320a56ad535686f90565636a9495",
|
||||
"sha256:d48a880098c96020b02d5a1f7d9251308510ce8858940e6fa99ece33f610838b",
|
||||
"sha256:d68b6cef7827e8641e8ef16f4494edda8b36104d79773a334beaa1e3521430f6",
|
||||
"sha256:d9b29c1f0ae438d5ee9acb31cadee00a58c46cc9c0b2f9038c6b0b3470877a8c",
|
||||
"sha256:d9b97165e8aed9272a6bb17c01e3cc5871a594a446ebedc996e2397a1c1ea8ef",
|
||||
"sha256:da68248800ad6320861f129cd9c1bf96ca849a2771a59e0344e88681905916f5",
|
||||
"sha256:da902562c3e9c550df360bfa53c035b2f241fed6d9aef119048073680ace4a18",
|
||||
"sha256:dbd5c7a25a7cb98f5ca55d258b103a2054f859a46ae11aaf23134f9cc0d356ad",
|
||||
"sha256:dd4f05f54a52fb558f1ba9f528228066954fee3ebe629fc1660d874d040ae5a3",
|
||||
"sha256:de8dad4425a6ca6e4e5e297b27b5c824ecc7581910bf9aee86cb6835e6812aa7",
|
||||
"sha256:e11e82b744887154b182fd3e7e8512418446501191994dbf9c9fc1f32cc8efd5",
|
||||
"sha256:e6e73b9e02893c764e7e8d5bb5ce277f1a009cd5243f8228f75f842bf937c534",
|
||||
"sha256:f73b96c41e3b2adedc34a7356e64c8eb96e03a3782b535e043a986276ce12a49",
|
||||
"sha256:f93fd8e5c8c0a4aa1f424d6173f14a892044054871c771f8566e4008eaa359d2",
|
||||
"sha256:fc33c5141b55ed366cfaad382df24fe7dcbc686de5be719b207bb248e3053dc5",
|
||||
"sha256:fc7de24befaeae77ba923797c7c87834c73648a05a4bde34b3b7e5588973a453",
|
||||
"sha256:fe562eb1a64e67dd297ccc4f5addea2501664954f2692b69a76449ec7913ecbf"
|
||||
],
|
||||
"markers": "python_full_version >= '3.9' and platform_python_implementation != 'PyPy'",
|
||||
"version": "==2.0.0"
|
||||
},
|
||||
"charset-normalizer": {
|
||||
"hashes": [
|
||||
"sha256:027f6de494925c0ab2a55eab46ae5129951638a49a34d87f4c3eda90f696b4ad",
|
||||
"sha256:077fbb858e903c73f6c9db43374fd213b0b6a778106bc7032446a8e8b5b38b93",
|
||||
"sha256:0a98e6759f854bd25a58a73fa88833fba3b7c491169f86ce1180c948ab3fd394",
|
||||
"sha256:0d3d8f15c07f86e9ff82319b3d9ef6f4bf907608f53fe9d92b28ea9ae3d1fd89",
|
||||
"sha256:0f04b14ffe5fdc8c4933862d8306109a2c51e0704acfa35d51598eb45a1e89fc",
|
||||
"sha256:11d694519d7f29d6cd09f6ac70028dba10f92f6cdd059096db198c283794ac86",
|
||||
"sha256:194f08cbb32dc406d6e1aea671a68be0823673db2832b38405deba2fb0d88f63",
|
||||
"sha256:1bee1e43c28aa63cb16e5c14e582580546b08e535299b8b6158a7c9c768a1f3d",
|
||||
"sha256:21d142cc6c0ec30d2efee5068ca36c128a30b0f2c53c1c07bd78cb6bc1d3be5f",
|
||||
"sha256:2437418e20515acec67d86e12bf70056a33abdacb5cb1655042f6538d6b085a8",
|
||||
"sha256:244bfb999c71b35de57821b8ea746b24e863398194a4014e4c76adc2bbdfeff0",
|
||||
"sha256:2677acec1a2f8ef614c6888b5b4ae4060cc184174a938ed4e8ef690e15d3e505",
|
||||
"sha256:277e970e750505ed74c832b4bf75dac7476262ee2a013f5574dd49075879e161",
|
||||
"sha256:2aaba3b0819274cc41757a1da876f810a3e4d7b6eb25699253a4effef9e8e4af",
|
||||
"sha256:2b7d8f6c26245217bd2ad053761201e9f9680f8ce52f0fcd8d0755aeae5b2152",
|
||||
"sha256:2c9d3c380143a1fedbff95a312aa798578371eb29da42106a29019368a475318",
|
||||
"sha256:3162d5d8ce1bb98dd51af660f2121c55d0fa541b46dff7bb9b9f86ea1d87de72",
|
||||
"sha256:31fd66405eaf47bb62e8cd575dc621c56c668f27d46a61d975a249930dd5e2a4",
|
||||
"sha256:362d61fd13843997c1c446760ef36f240cf81d3ebf74ac62652aebaf7838561e",
|
||||
"sha256:376bec83a63b8021bb5c8ea75e21c4ccb86e7e45ca4eb81146091b56599b80c3",
|
||||
"sha256:44c2a8734b333e0578090c4cd6b16f275e07aa6614ca8715e6c038e865e70576",
|
||||
"sha256:47cc91b2f4dd2833fddaedd2893006b0106129d4b94fdb6af1f4ce5a9965577c",
|
||||
"sha256:4902828217069c3c5c71094537a8e623f5d097858ac6ca8252f7b4d10b7560f1",
|
||||
"sha256:4bd5d4137d500351a30687c2d3971758aac9a19208fc110ccb9d7188fbe709e8",
|
||||
"sha256:4fe7859a4e3e8457458e2ff592f15ccb02f3da787fcd31e0183879c3ad4692a1",
|
||||
"sha256:542d2cee80be6f80247095cc36c418f7bddd14f4a6de45af91dfad36d817bba2",
|
||||
"sha256:554af85e960429cf30784dd47447d5125aaa3b99a6f0683589dbd27e2f45da44",
|
||||
"sha256:5833d2c39d8896e4e19b689ffc198f08ea58116bee26dea51e362ecc7cd3ed26",
|
||||
"sha256:5947809c8a2417be3267efc979c47d76a079758166f7d43ef5ae8e9f92751f88",
|
||||
"sha256:5ae497466c7901d54b639cf42d5b8c1b6a4fead55215500d2f486d34db48d016",
|
||||
"sha256:5bd2293095d766545ec1a8f612559f6b40abc0eb18bb2f5d1171872d34036ede",
|
||||
"sha256:5bfbb1b9acf3334612667b61bd3002196fe2a1eb4dd74d247e0f2a4d50ec9bbf",
|
||||
"sha256:5cb4d72eea50c8868f5288b7f7f33ed276118325c1dfd3957089f6b519e1382a",
|
||||
"sha256:5dbe56a36425d26d6cfb40ce79c314a2e4dd6211d51d6d2191c00bed34f354cc",
|
||||
"sha256:5f819d5fe9234f9f82d75bdfa9aef3a3d72c4d24a6e57aeaebba32a704553aa0",
|
||||
"sha256:64b55f9dce520635f018f907ff1b0df1fdc31f2795a922fb49dd14fbcdf48c84",
|
||||
"sha256:6515f3182dbe4ea06ced2d9e8666d97b46ef4c75e326b79bb624110f122551db",
|
||||
"sha256:65e2befcd84bc6f37095f5961e68a6f077bf44946771354a28ad434c2cce0ae1",
|
||||
"sha256:6aee717dcfead04c6eb1ce3bd29ac1e22663cdea57f943c87d1eab9a025438d7",
|
||||
"sha256:6b39f987ae8ccdf0d2642338faf2abb1862340facc796048b604ef14919e55ed",
|
||||
"sha256:6e1fcf0720908f200cd21aa4e6750a48ff6ce4afe7ff5a79a90d5ed8a08296f8",
|
||||
"sha256:74018750915ee7ad843a774364e13a3db91682f26142baddf775342c3f5b1133",
|
||||
"sha256:74664978bb272435107de04e36db5a9735e78232b85b77d45cfb38f758efd33e",
|
||||
"sha256:74bb723680f9f7a6234dcf67aea57e708ec1fbdf5699fb91dfd6f511b0a320ef",
|
||||
"sha256:752944c7ffbfdd10c074dc58ec2d5a8a4cd9493b314d367c14d24c17684ddd14",
|
||||
"sha256:778d2e08eda00f4256d7f672ca9fef386071c9202f5e4607920b86d7803387f2",
|
||||
"sha256:780236ac706e66881f3b7f2f32dfe90507a09e67d1d454c762cf642e6e1586e0",
|
||||
"sha256:798d75d81754988d2565bff1b97ba5a44411867c0cf32b77a7e8f8d84796b10d",
|
||||
"sha256:799a7a5e4fb2d5898c60b640fd4981d6a25f1c11790935a44ce38c54e985f828",
|
||||
"sha256:7a32c560861a02ff789ad905a2fe94e3f840803362c84fecf1851cb4cf3dc37f",
|
||||
"sha256:7c308f7e26e4363d79df40ca5b2be1c6ba9f02bdbccfed5abddb7859a6ce72cf",
|
||||
"sha256:7fa17817dc5625de8a027cb8b26d9fefa3ea28c8253929b8d6649e705d2835b6",
|
||||
"sha256:81d5eb2a312700f4ecaa977a8235b634ce853200e828fbadf3a9c50bab278328",
|
||||
"sha256:82004af6c302b5d3ab2cfc4cc5f29db16123b1a8417f2e25f9066f91d4411090",
|
||||
"sha256:837c2ce8c5a65a2035be9b3569c684358dfbf109fd3b6969630a87535495ceaa",
|
||||
"sha256:840c25fb618a231545cbab0564a799f101b63b9901f2569faecd6b222ac72381",
|
||||
"sha256:8a6562c3700cce886c5be75ade4a5db4214fda19fede41d9792d100288d8f94c",
|
||||
"sha256:8af65f14dc14a79b924524b1e7fffe304517b2bff5a58bf64f30b98bbc5079eb",
|
||||
"sha256:8ef3c867360f88ac904fd3f5e1f902f13307af9052646963ee08ff4f131adafc",
|
||||
"sha256:94537985111c35f28720e43603b8e7b43a6ecfb2ce1d3058bbe955b73404e21a",
|
||||
"sha256:99ae2cffebb06e6c22bdc25801d7b30f503cc87dbd283479e7b606f70aff57ec",
|
||||
"sha256:9a26f18905b8dd5d685d6d07b0cdf98a79f3c7a918906af7cc143ea2e164c8bc",
|
||||
"sha256:9b35f4c90079ff2e2edc5b26c0c77925e5d2d255c42c74fdb70fb49b172726ac",
|
||||
"sha256:9cd98cdc06614a2f768d2b7286d66805f94c48cde050acdbbb7db2600ab3197e",
|
||||
"sha256:9d1bb833febdff5c8927f922386db610b49db6e0d4f4ee29601d71e7c2694313",
|
||||
"sha256:9f7fcd74d410a36883701fafa2482a6af2ff5ba96b9a620e9e0721e28ead5569",
|
||||
"sha256:a59cb51917aa591b1c4e6a43c132f0cdc3c76dbad6155df4e28ee626cc77a0a3",
|
||||
"sha256:a61900df84c667873b292c3de315a786dd8dac506704dea57bc957bd31e22c7d",
|
||||
"sha256:a79cfe37875f822425b89a82333404539ae63dbdddf97f84dcbc3d339aae9525",
|
||||
"sha256:a8a8b89589086a25749f471e6a900d3f662d1d3b6e2e59dcecf787b1cc3a1894",
|
||||
"sha256:a8bf8d0f749c5757af2142fe7903a9df1d2e8aa3841559b2bad34b08d0e2bcf3",
|
||||
"sha256:a9768c477b9d7bd54bc0c86dbaebdec6f03306675526c9927c0e8a04e8f94af9",
|
||||
"sha256:ac1c4a689edcc530fc9d9aa11f5774b9e2f33f9a0c6a57864e90908f5208d30a",
|
||||
"sha256:af2d8c67d8e573d6de5bc30cdb27e9b95e49115cd9baad5ddbd1a6207aaa82a9",
|
||||
"sha256:b435cba5f4f750aa6c0a0d92c541fb79f69a387c91e61f1795227e4ed9cece14",
|
||||
"sha256:b5b290ccc2a263e8d185130284f8501e3e36c5e02750fc6b6bdeb2e9e96f1e25",
|
||||
"sha256:b5d84d37db046c5ca74ee7bb47dd6cbc13f80665fdde3e8040bdd3fb015ecb50",
|
||||
"sha256:b7cf1017d601aa35e6bb650b6ad28652c9cd78ee6caff19f3c28d03e1c80acbf",
|
||||
"sha256:bc7637e2f80d8530ee4a78e878bce464f70087ce73cf7c1caf142416923b98f1",
|
||||
"sha256:c0463276121fdee9c49b98908b3a89c39be45d86d1dbaa22957e38f6321d4ce3",
|
||||
"sha256:c4ef880e27901b6cc782f1b95f82da9313c0eb95c3af699103088fa0ac3ce9ac",
|
||||
"sha256:c8ae8a0f02f57a6e61203a31428fa1d677cbe50c93622b4149d5c0f319c1d19e",
|
||||
"sha256:ca5862d5b3928c4940729dacc329aa9102900382fea192fc5e52eb69d6093815",
|
||||
"sha256:cb01158d8b88ee68f15949894ccc6712278243d95f344770fa7593fa2d94410c",
|
||||
"sha256:cb6254dc36b47a990e59e1068afacdcd02958bdcce30bb50cc1700a8b9d624a6",
|
||||
"sha256:cc00f04ed596e9dc0da42ed17ac5e596c6ccba999ba6bd92b0e0aef2f170f2d6",
|
||||
"sha256:cd09d08005f958f370f539f186d10aec3377d55b9eeb0d796025d4886119d76e",
|
||||
"sha256:cd4b7ca9984e5e7985c12bc60a6f173f3c958eae74f3ef6624bb6b26e2abbae4",
|
||||
"sha256:ce8a0633f41a967713a59c4139d29110c07e826d131a316b50ce11b1d79b4f84",
|
||||
"sha256:cead0978fc57397645f12578bfd2d5ea9138ea0fac82b2f63f7f7c6877986a69",
|
||||
"sha256:d055ec1e26e441f6187acf818b73564e6e6282709e9bcb5b63f5b23068356a15",
|
||||
"sha256:d1f13550535ad8cff21b8d757a3257963e951d96e20ec82ab44bc64aeb62a191",
|
||||
"sha256:d9c7f57c3d666a53421049053eaacdd14bbd0a528e2186fcb2e672effd053bb0",
|
||||
"sha256:d9e45d7faa48ee908174d8fe84854479ef838fc6a705c9315372eacbc2f02897",
|
||||
"sha256:da3326d9e65ef63a817ecbcc0df6e94463713b754fe293eaa03da99befb9a5bd",
|
||||
"sha256:de00632ca48df9daf77a2c65a484531649261ec9f25489917f09e455cb09ddb2",
|
||||
"sha256:e1f185f86a6f3403aa2420e815904c67b2f9ebc443f045edd0de921108345794",
|
||||
"sha256:e824f1492727fa856dd6eda4f7cee25f8518a12f3c4a56a74e8095695089cf6d",
|
||||
"sha256:e912091979546adf63357d7e2ccff9b44f026c075aeaf25a52d0e95ad2281074",
|
||||
"sha256:eaabd426fe94daf8fd157c32e571c85cb12e66692f15516a83a03264b08d06c3",
|
||||
"sha256:ebf3e58c7ec8a8bed6d66a75d7fb37b55e5015b03ceae72a8e7c74495551e224",
|
||||
"sha256:ecaae4149d99b1c9e7b88bb03e3221956f68fd6d50be2ef061b2381b61d20838",
|
||||
"sha256:eecbc200c7fd5ddb9a7f16c7decb07b566c29fa2161a16cf67b8d068bd21690a",
|
||||
"sha256:f155a433c2ec037d4e8df17d18922c3a0d9b3232a396690f17175d2946f0218d",
|
||||
"sha256:f1e34719c6ed0b92f418c7c780480b26b5d9c50349e9a9af7d76bf757530350d",
|
||||
"sha256:f34be2938726fc13801220747472850852fe6b1ea75869a048d6f896838c896f",
|
||||
"sha256:f820802628d2694cb7e56db99213f930856014862f3fd943d290ea8438d07ca8",
|
||||
"sha256:f8bf04158c6b607d747e93949aa60618b61312fe647a6369f88ce2ff16043490",
|
||||
"sha256:f8e160feb2aed042cd657a72acc0b481212ed28b1b9a95c0cee1621b524e1966",
|
||||
"sha256:f9d332f8c2a2fcbffe1378594431458ddbef721c1769d78e2cbc06280d8155f9",
|
||||
"sha256:fa09f53c465e532f4d3db095e0c55b615f010ad81803d383195b6b5ca6cbf5f3",
|
||||
"sha256:faa3a41b2b66b6e50f84ae4a68c64fcd0c44355741c6374813a800cd6695db9e",
|
||||
"sha256:fd44c878ea55ba351104cb93cc85e74916eb8fa440ca7903e57575e97394f608"
|
||||
],
|
||||
"markers": "python_version >= '3.7'",
|
||||
"version": "==3.4.4"
|
||||
},
|
||||
"click": {
|
||||
"hashes": [
|
||||
"sha256:12ff4785d337a1bb490bb7e9c2b1ee5da3112e94a8622f26a6c77f5d2fc6842a",
|
||||
"sha256:981153a64e25f12d547d3426c367a4857371575ee7ad18df2a6183ab0545b2a6"
|
||||
],
|
||||
"markers": "python_version >= '3.10'",
|
||||
"version": "==8.3.1"
|
||||
},
|
||||
"cryptography": {
|
||||
"hashes": [
|
||||
"sha256:01df4f50f314fbe7009f54046e908d1754f19d0c6d3070df1e6268c5a4af09fa",
|
||||
"sha256:0563655cb3c6d05fb2afe693340bc050c30f9f34e15763361cf08e94749401fc",
|
||||
"sha256:078e5f06bd2fa5aea5a324f2a09f914b1484f1d0c2a4d6a8a28c74e72f65f2da",
|
||||
"sha256:0a9ad24359fee86f131836a9ac3bffc9329e956624a2d379b613f8f8abaf5255",
|
||||
"sha256:2067461c80271f422ee7bdbe79b9b4be54a5162e90345f86a23445a0cf3fd8a2",
|
||||
"sha256:281526e865ed4166009e235afadf3a4c4cba6056f99336a99efba65336fd5485",
|
||||
"sha256:2d08bc22efd73e8854b0b7caff402d735b354862f1145d7be3b9c0f740fef6a0",
|
||||
"sha256:3c268a3490df22270955966ba236d6bc4a8f9b6e4ffddb78aac535f1a5ea471d",
|
||||
"sha256:3d425eacbc9aceafd2cb429e42f4e5d5633c6f873f5e567077043ef1b9bbf616",
|
||||
"sha256:44cc0675b27cadb71bdbb96099cca1fa051cd11d2ade09e5cd3a2edb929ed947",
|
||||
"sha256:47bcd19517e6389132f76e2d5303ded6cf3f78903da2158a671be8de024f4cd0",
|
||||
"sha256:485e2b65d25ec0d901bca7bcae0f53b00133bf3173916d8e421f6fddde103908",
|
||||
"sha256:5aa3e463596b0087b3da0dbe2b2487e9fc261d25da85754e30e3b40637d61f81",
|
||||
"sha256:5f14fba5bf6f4390d7ff8f086c566454bff0411f6d8aa7af79c88b6f9267aecc",
|
||||
"sha256:62217ba44bf81b30abaeda1488686a04a702a261e26f87db51ff61d9d3510abd",
|
||||
"sha256:6225d3ebe26a55dbc8ead5ad1265c0403552a63336499564675b29eb3184c09b",
|
||||
"sha256:6bb5157bf6a350e5b28aee23beb2d84ae6f5be390b2f8ee7ea179cda077e1019",
|
||||
"sha256:728fedc529efc1439eb6107b677f7f7558adab4553ef8669f0d02d42d7b959a7",
|
||||
"sha256:766330cce7416c92b5e90c3bb71b1b79521760cdcfc3a6a1a182d4c9fab23d2b",
|
||||
"sha256:812815182f6a0c1d49a37893a303b44eaac827d7f0d582cecfc81b6427f22973",
|
||||
"sha256:829c2b12bbc5428ab02d6b7f7e9bbfd53e33efd6672d21341f2177470171ad8b",
|
||||
"sha256:82a62483daf20b8134f6e92898da70d04d0ef9a75829d732ea1018678185f4f5",
|
||||
"sha256:8a15fb869670efa8f83cbffbc8753c1abf236883225aed74cd179b720ac9ec80",
|
||||
"sha256:8bf75b0259e87fa70bddc0b8b4078b76e7fd512fd9afae6c1193bcf440a4dbef",
|
||||
"sha256:91627ebf691d1ea3976a031b61fb7bac1ccd745afa03602275dda443e11c8de0",
|
||||
"sha256:93d8291da8d71024379ab2cb0b5c57915300155ad42e07f76bea6ad838d7e59b",
|
||||
"sha256:9b34d8ba84454641a6bf4d6762d15847ecbd85c1316c0a7984e6e4e9f748ec2e",
|
||||
"sha256:9b4d17bc7bd7cdd98e3af40b441feaea4c68225e2eb2341026c84511ad246c0c",
|
||||
"sha256:9c2da296c8d3415b93e6053f5a728649a87a48ce084a9aaf51d6e46c87c7f2d2",
|
||||
"sha256:a05177ff6296644ef2876fce50518dffb5bcdf903c85250974fc8bc85d54c0af",
|
||||
"sha256:a90e43e3ef65e6dcf969dfe3bb40cbf5aef0d523dff95bfa24256be172a845f4",
|
||||
"sha256:a9556ba711f7c23f77b151d5798f3ac44a13455cc68db7697a1096e6d0563cab",
|
||||
"sha256:b1de0ebf7587f28f9190b9cb526e901bf448c9e6a99655d2b07fff60e8212a82",
|
||||
"sha256:be8c01a7d5a55f9a47d1888162b76c8f49d62b234d88f0ff91a9fbebe32ffbc3",
|
||||
"sha256:bfd019f60f8abc2ed1b9be4ddc21cfef059c841d86d710bb69909a688cbb8f59",
|
||||
"sha256:c236a44acfb610e70f6b3e1c3ca20ff24459659231ef2f8c48e879e2d32b73da",
|
||||
"sha256:c411f16275b0dea722d76544a61d6421e2cc829ad76eec79280dbdc9ddf50061",
|
||||
"sha256:c92010b58a51196a5f41c3795190203ac52edfd5dc3ff99149b4659eba9d2085",
|
||||
"sha256:d5a45ddc256f492ce42a4e35879c5e5528c09cd9ad12420828c972951d8e016b",
|
||||
"sha256:daa392191f626d50f1b136c9b4cf08af69ca8279d110ea24f5c2700054d2e263",
|
||||
"sha256:dc1272e25ef673efe72f2096e92ae39dea1a1a450dd44918b15351f72c5a168e",
|
||||
"sha256:dce1e4f068f03008da7fa51cc7abc6ddc5e5de3e3d1550334eaf8393982a5829",
|
||||
"sha256:dd5aba870a2c40f87a3af043e0dee7d9eb02d4aff88a797b48f2b43eff8c3ab4",
|
||||
"sha256:de0f5f4ec8711ebc555f54735d4c673fc34b65c44283895f1a08c2b49d2fd99c",
|
||||
"sha256:df4a817fa7138dd0c96c8c8c20f04b8aaa1fac3bbf610913dcad8ea82e1bfd3f",
|
||||
"sha256:e07ea39c5b048e085f15923511d8121e4a9dc45cee4e3b970ca4f0d338f23095",
|
||||
"sha256:eeeb2e33d8dbcccc34d64651f00a98cb41b2dc69cef866771a5717e6734dfa32",
|
||||
"sha256:fa0900b9ef9c49728887d1576fd8d9e7e3ea872fa9b25ef9b64888adc434e976",
|
||||
"sha256:fdc3daab53b212472f1524d070735b2f0c214239df131903bae1d598016fa822"
|
||||
],
|
||||
"markers": "python_version >= '3.8' and python_full_version not in '3.9.0, 3.9.1'",
|
||||
"version": "==46.0.4"
|
||||
},
|
||||
"esptool": {
|
||||
"hashes": [
|
||||
"sha256:2ea9bcd7eb263d380a4fe0170856a10e4c65e3f38c757ebdc73584c8dd8322da"
|
||||
],
|
||||
"index": "pypi",
|
||||
"markers": "python_version >= '3.10'",
|
||||
"version": "==5.1.0"
|
||||
},
|
||||
"h11": {
|
||||
"hashes": [
|
||||
"sha256:4e35b956cf45792e4caa5885e69fba00bdbc6ffafbfa020300e549b208ee5ff1",
|
||||
"sha256:63cf8bbe7522de3bf65932fda1d9c2772064ffb3dae62d55932da54b31cb6c86"
|
||||
],
|
||||
"markers": "python_version >= '3.8'",
|
||||
"version": "==0.16.0"
|
||||
},
|
||||
"idna": {
|
||||
"hashes": [
|
||||
"sha256:771a87f49d9defaf64091e6e6fe9c18d4833f140bd19464795bc32d966ca37ea",
|
||||
"sha256:795dafcc9c04ed0c1fb032c2aa73654d8e8c5023a7df64a53f39190ada629902"
|
||||
],
|
||||
"markers": "python_version >= '3.8'",
|
||||
"version": "==3.11"
|
||||
},
|
||||
"importlib-metadata": {
|
||||
"hashes": [
|
||||
"sha256:49fef1ae6440c182052f407c8d34a68f72efc36db9ca90dc0113398f2fdde8bb",
|
||||
"sha256:5a1f80bf1daa489495071efbb095d75a634cf28a8bc299581244063b53176151"
|
||||
],
|
||||
"markers": "python_version >= '3.9'",
|
||||
"version": "==8.7.1"
|
||||
},
|
||||
"intelhex": {
|
||||
"hashes": [
|
||||
"sha256:87cc5225657524ec6361354be928adfd56bcf2a3dcc646c40f8f094c39c07db4",
|
||||
"sha256:892b7361a719f4945237da8ccf754e9513db32f5628852785aea108dcd250093"
|
||||
],
|
||||
"version": "==2.3.0"
|
||||
},
|
||||
"markdown-it-py": {
|
||||
"hashes": [
|
||||
"sha256:87327c59b172c5011896038353a81343b6754500a08cd7a4973bb48c6d578147",
|
||||
"sha256:cb0a2b4aa34f932c007117b194e945bd74e0ec24133ceb5bac59009cda1cb9f3"
|
||||
],
|
||||
"markers": "python_version >= '3.10'",
|
||||
"version": "==4.0.0"
|
||||
},
|
||||
"mdurl": {
|
||||
"hashes": [
|
||||
"sha256:84008a41e51615a49fc9966191ff91509e3c40b939176e643fd50a5c2196b8f8",
|
||||
"sha256:bb413d29f5eea38f31dd4754dd7377d4465116fb207585f97bf925588687c1ba"
|
||||
],
|
||||
"markers": "python_version >= '3.7'",
|
||||
"version": "==0.1.2"
|
||||
},
|
||||
"mpremote": {
|
||||
"hashes": [
|
||||
"sha256:11d134c69b21b487dae3d03eed54c8ccbf84c916c8732a3e069a97cae47be3d4",
|
||||
"sha256:6bb75774648091dad6833af4f86c5bf6505f8d7aec211380f9e6996c01d23cb5"
|
||||
],
|
||||
"index": "pypi",
|
||||
"markers": "python_version >= '3.4'",
|
||||
"version": "==1.27.0"
|
||||
},
|
||||
"mypy-extensions": {
|
||||
"hashes": [
|
||||
"sha256:1be4cccdb0f2482337c4743e60421de3a356cd97508abadd57d47403e94f5505",
|
||||
"sha256:52e68efc3284861e772bbcd66823fde5ae21fd2fdb51c62a211403730b916558"
|
||||
],
|
||||
"markers": "python_version >= '3.8'",
|
||||
"version": "==1.1.0"
|
||||
},
|
||||
"outcome": {
|
||||
"hashes": [
|
||||
"sha256:9dcf02e65f2971b80047b377468e72a268e15c0af3cf1238e6ff14f7f91143b8",
|
||||
"sha256:e771c5ce06d1415e356078d3bdd68523f284b4ce5419828922b6871e65eda82b"
|
||||
],
|
||||
"markers": "python_version >= '3.7'",
|
||||
"version": "==1.3.0.post0"
|
||||
},
|
||||
"packaging": {
|
||||
"hashes": [
|
||||
"sha256:00243ae351a257117b6a241061796684b084ed1c516a08c48a3f7e147a9d80b4",
|
||||
"sha256:b36f1fef9334a5588b4166f8bcd26a14e521f2b55e6b9de3aaa80d3ff7a37529"
|
||||
],
|
||||
"markers": "python_version >= '3.8'",
|
||||
"version": "==26.0"
|
||||
},
|
||||
"platformdirs": {
|
||||
"hashes": [
|
||||
"sha256:61d5cdcc6065745cdd94f0f878977f8de9437be93de97c1c12f853c9c0cdcbda",
|
||||
"sha256:d03afa3963c806a9bed9d5125c8f4cb2fdaf74a55ab60e5d59b3fde758104d31"
|
||||
],
|
||||
"markers": "python_version >= '3.10'",
|
||||
"version": "==4.5.1"
|
||||
},
|
||||
"pycparser": {
|
||||
"hashes": [
|
||||
"sha256:600f49d217304a5902ac3c37e1281c9fe94e4d0489de643a9504c5cdfdfc6b29",
|
||||
"sha256:b727414169a36b7d524c1c3e31839a521725078d7b2ff038656844266160a992"
|
||||
],
|
||||
"markers": "implementation_name != 'PyPy'",
|
||||
"version": "==3.0"
|
||||
},
|
||||
"pygments": {
|
||||
"hashes": [
|
||||
"sha256:636cb2477cec7f8952536970bc533bc43743542f70392ae026374600add5b887",
|
||||
"sha256:86540386c03d588bb81d44bc3928634ff26449851e99741617ecb9037ee5ec0b"
|
||||
],
|
||||
"markers": "python_version >= '3.8'",
|
||||
"version": "==2.19.2"
|
||||
},
|
||||
"pyjwt": {
|
||||
"hashes": [
|
||||
"sha256:35f95c1f0fbe5d5ba6e43f00271c275f7a1a4db1dab27bf708073b75318ea623",
|
||||
"sha256:94a6bde30eb5c8e04fee991062b534071fd1439ef58d2adc9ccb823e7bcd0469"
|
||||
],
|
||||
"index": "pypi",
|
||||
"markers": "python_version >= '3.9'",
|
||||
"version": "==2.11.0"
|
||||
},
|
||||
"pyserial": {
|
||||
"hashes": [
|
||||
"sha256:3c77e014170dfffbd816e6ffc205e9842efb10be9f58ec16d3e8675b4925cddb",
|
||||
"sha256:c4451db6ba391ca6ca299fb3ec7bae67a5c55dde170964c7a14ceefec02f2cf0"
|
||||
],
|
||||
"index": "pypi",
|
||||
"version": "==3.5"
|
||||
},
|
||||
"pysocks": {
|
||||
"hashes": [
|
||||
"sha256:08e69f092cc6dbe92a0fdd16eeb9b9ffbc13cadfe5ca4c7bd92ffb078b293299",
|
||||
"sha256:2725bd0a9925919b9b51739eea5f9e2bae91e83288108a9ad338b2e3a4435ee5",
|
||||
"sha256:3f8804571ebe159c380ac6de37643bb4685970655d3bba243530d6558b799aa0"
|
||||
],
|
||||
"version": "==1.7.1"
|
||||
},
|
||||
"python-dotenv": {
|
||||
"hashes": [
|
||||
"sha256:42667e897e16ab0d66954af0e60a9caa94f0fd4ecf3aaf6d2d260eec1aa36ad6",
|
||||
"sha256:b81ee9561e9ca4004139c6cbba3a238c32b03e4894671e181b671e8cb8425d61"
|
||||
],
|
||||
"markers": "python_version >= '3.9'",
|
||||
"version": "==1.2.1"
|
||||
},
|
||||
"pyyaml": {
|
||||
"hashes": [
|
||||
"sha256:00c4bdeba853cc34e7dd471f16b4114f4162dc03e6b7afcc2128711f0eca823c",
|
||||
"sha256:0150219816b6a1fa26fb4699fb7daa9caf09eb1999f3b70fb6e786805e80375a",
|
||||
"sha256:02893d100e99e03eda1c8fd5c441d8c60103fd175728e23e431db1b589cf5ab3",
|
||||
"sha256:02ea2dfa234451bbb8772601d7b8e426c2bfa197136796224e50e35a78777956",
|
||||
"sha256:0f29edc409a6392443abf94b9cf89ce99889a1dd5376d94316ae5145dfedd5d6",
|
||||
"sha256:10892704fc220243f5305762e276552a0395f7beb4dbf9b14ec8fd43b57f126c",
|
||||
"sha256:16249ee61e95f858e83976573de0f5b2893b3677ba71c9dd36b9cf8be9ac6d65",
|
||||
"sha256:1d37d57ad971609cf3c53ba6a7e365e40660e3be0e5175fa9f2365a379d6095a",
|
||||
"sha256:1ebe39cb5fc479422b83de611d14e2c0d3bb2a18bbcb01f229ab3cfbd8fee7a0",
|
||||
"sha256:214ed4befebe12df36bcc8bc2b64b396ca31be9304b8f59e25c11cf94a4c033b",
|
||||
"sha256:2283a07e2c21a2aa78d9c4442724ec1eb15f5e42a723b99cb3d822d48f5f7ad1",
|
||||
"sha256:22ba7cfcad58ef3ecddc7ed1db3409af68d023b7f940da23c6c2a1890976eda6",
|
||||
"sha256:27c0abcb4a5dac13684a37f76e701e054692a9b2d3064b70f5e4eb54810553d7",
|
||||
"sha256:28c8d926f98f432f88adc23edf2e6d4921ac26fb084b028c733d01868d19007e",
|
||||
"sha256:2e71d11abed7344e42a8849600193d15b6def118602c4c176f748e4583246007",
|
||||
"sha256:34d5fcd24b8445fadc33f9cf348c1047101756fd760b4dacb5c3e99755703310",
|
||||
"sha256:37503bfbfc9d2c40b344d06b2199cf0e96e97957ab1c1b546fd4f87e53e5d3e4",
|
||||
"sha256:3c5677e12444c15717b902a5798264fa7909e41153cdf9ef7ad571b704a63dd9",
|
||||
"sha256:3ff07ec89bae51176c0549bc4c63aa6202991da2d9a6129d7aef7f1407d3f295",
|
||||
"sha256:41715c910c881bc081f1e8872880d3c650acf13dfa8214bad49ed4cede7c34ea",
|
||||
"sha256:418cf3f2111bc80e0933b2cd8cd04f286338bb88bdc7bc8e6dd775ebde60b5e0",
|
||||
"sha256:44edc647873928551a01e7a563d7452ccdebee747728c1080d881d68af7b997e",
|
||||
"sha256:4a2e8cebe2ff6ab7d1050ecd59c25d4c8bd7e6f400f5f82b96557ac0abafd0ac",
|
||||
"sha256:4ad1906908f2f5ae4e5a8ddfce73c320c2a1429ec52eafd27138b7f1cbe341c9",
|
||||
"sha256:501a031947e3a9025ed4405a168e6ef5ae3126c59f90ce0cd6f2bfc477be31b7",
|
||||
"sha256:5190d403f121660ce8d1d2c1bb2ef1bd05b5f68533fc5c2ea899bd15f4399b35",
|
||||
"sha256:5498cd1645aa724a7c71c8f378eb29ebe23da2fc0d7a08071d89469bf1d2defb",
|
||||
"sha256:5cf4e27da7e3fbed4d6c3d8e797387aaad68102272f8f9752883bc32d61cb87b",
|
||||
"sha256:5e0b74767e5f8c593e8c9b5912019159ed0533c70051e9cce3e8b6aa699fcd69",
|
||||
"sha256:5ed875a24292240029e4483f9d4a4b8a1ae08843b9c54f43fcc11e404532a8a5",
|
||||
"sha256:5fcd34e47f6e0b794d17de1b4ff496c00986e1c83f7ab2fb8fcfe9616ff7477b",
|
||||
"sha256:5fdec68f91a0c6739b380c83b951e2c72ac0197ace422360e6d5a959d8d97b2c",
|
||||
"sha256:6344df0d5755a2c9a276d4473ae6b90647e216ab4757f8426893b5dd2ac3f369",
|
||||
"sha256:64386e5e707d03a7e172c0701abfb7e10f0fb753ee1d773128192742712a98fd",
|
||||
"sha256:652cb6edd41e718550aad172851962662ff2681490a8a711af6a4d288dd96824",
|
||||
"sha256:66291b10affd76d76f54fad28e22e51719ef9ba22b29e1d7d03d6777a9174198",
|
||||
"sha256:66e1674c3ef6f541c35191caae2d429b967b99e02040f5ba928632d9a7f0f065",
|
||||
"sha256:6adc77889b628398debc7b65c073bcb99c4a0237b248cacaf3fe8a557563ef6c",
|
||||
"sha256:79005a0d97d5ddabfeeea4cf676af11e647e41d81c9a7722a193022accdb6b7c",
|
||||
"sha256:7c6610def4f163542a622a73fb39f534f8c101d690126992300bf3207eab9764",
|
||||
"sha256:7f047e29dcae44602496db43be01ad42fc6f1cc0d8cd6c83d342306c32270196",
|
||||
"sha256:8098f252adfa6c80ab48096053f512f2321f0b998f98150cea9bd23d83e1467b",
|
||||
"sha256:850774a7879607d3a6f50d36d04f00ee69e7fc816450e5f7e58d7f17f1ae5c00",
|
||||
"sha256:8d1fab6bb153a416f9aeb4b8763bc0f22a5586065f86f7664fc23339fc1c1fac",
|
||||
"sha256:8da9669d359f02c0b91ccc01cac4a67f16afec0dac22c2ad09f46bee0697eba8",
|
||||
"sha256:8dc52c23056b9ddd46818a57b78404882310fb473d63f17b07d5c40421e47f8e",
|
||||
"sha256:9149cad251584d5fb4981be1ecde53a1ca46c891a79788c0df828d2f166bda28",
|
||||
"sha256:93dda82c9c22deb0a405ea4dc5f2d0cda384168e466364dec6255b293923b2f3",
|
||||
"sha256:96b533f0e99f6579b3d4d4995707cf36df9100d67e0c8303a0c55b27b5f99bc5",
|
||||
"sha256:9c57bb8c96f6d1808c030b1687b9b5fb476abaa47f0db9c0101f5e9f394e97f4",
|
||||
"sha256:9c7708761fccb9397fe64bbc0395abcae8c4bf7b0eac081e12b809bf47700d0b",
|
||||
"sha256:9f3bfb4965eb874431221a3ff3fdcddc7e74e3b07799e0e84ca4a0f867d449bf",
|
||||
"sha256:a33284e20b78bd4a18c8c2282d549d10bc8408a2a7ff57653c0cf0b9be0afce5",
|
||||
"sha256:a80cb027f6b349846a3bf6d73b5e95e782175e52f22108cfa17876aaeff93702",
|
||||
"sha256:b30236e45cf30d2b8e7b3e85881719e98507abed1011bf463a8fa23e9c3e98a8",
|
||||
"sha256:b3bc83488de33889877a0f2543ade9f70c67d66d9ebb4ac959502e12de895788",
|
||||
"sha256:b865addae83924361678b652338317d1bd7e79b1f4596f96b96c77a5a34b34da",
|
||||
"sha256:b8bb0864c5a28024fac8a632c443c87c5aa6f215c0b126c449ae1a150412f31d",
|
||||
"sha256:ba1cc08a7ccde2d2ec775841541641e4548226580ab850948cbfda66a1befcdc",
|
||||
"sha256:bdb2c67c6c1390b63c6ff89f210c8fd09d9a1217a465701eac7316313c915e4c",
|
||||
"sha256:c1ff362665ae507275af2853520967820d9124984e0f7466736aea23d8611fba",
|
||||
"sha256:c2514fceb77bc5e7a2f7adfaa1feb2fb311607c9cb518dbc378688ec73d8292f",
|
||||
"sha256:c3355370a2c156cffb25e876646f149d5d68f5e0a3ce86a5084dd0b64a994917",
|
||||
"sha256:c458b6d084f9b935061bc36216e8a69a7e293a2f1e68bf956dcd9e6cbcd143f5",
|
||||
"sha256:d0eae10f8159e8fdad514efdc92d74fd8d682c933a6dd088030f3834bc8e6b26",
|
||||
"sha256:d76623373421df22fb4cf8817020cbb7ef15c725b9d5e45f17e189bfc384190f",
|
||||
"sha256:ebc55a14a21cb14062aa4162f906cd962b28e2e9ea38f9b4391244cd8de4ae0b",
|
||||
"sha256:eda16858a3cab07b80edaf74336ece1f986ba330fdb8ee0d6c0d68fe82bc96be",
|
||||
"sha256:ee2922902c45ae8ccada2c5b501ab86c36525b883eff4255313a253a3160861c",
|
||||
"sha256:efd7b85f94a6f21e4932043973a7ba2613b059c4a000551892ac9f1d11f5baf3",
|
||||
"sha256:f7057c9a337546edc7973c0d3ba84ddcdf0daa14533c2065749c9075001090e6",
|
||||
"sha256:fa160448684b4e94d80416c0fa4aac48967a969efe22931448d853ada8baf926",
|
||||
"sha256:fc09d0aa354569bc501d4e787133afc08552722d3ab34836a80547331bb5d4a0"
|
||||
],
|
||||
"markers": "python_version >= '3.8'",
|
||||
"version": "==6.0.3"
|
||||
},
|
||||
"reedsolo": {
|
||||
"hashes": [
|
||||
"sha256:2b6a3e402a1ee3e1eea3f932f81e6c0b7bbc615588074dca1dbbcdeb055002bd",
|
||||
"sha256:c1359f02742751afe0f1c0de9f0772cc113835aa2855d2db420ea24393c87732"
|
||||
],
|
||||
"version": "==1.7.0"
|
||||
},
|
||||
"requests": {
|
||||
"hashes": [
|
||||
"sha256:2462f94637a34fd532264295e186976db0f5d453d1cdd31473c85a6a161affb6",
|
||||
"sha256:dbba0bac56e100853db0ea71b82b4dfd5fe2bf6d3754a8893c3af500cec7d7cf"
|
||||
],
|
||||
"index": "pypi",
|
||||
"markers": "python_version >= '3.9'",
|
||||
"version": "==2.32.5"
|
||||
},
|
||||
"rich": {
|
||||
"hashes": [
|
||||
"sha256:08e67c3e90884651da3239ea668222d19bea7b589149d8014a21c633420dbb69",
|
||||
"sha256:e712f11c1a562a11843306f5ed999475f09ac31ffb64281f73ab29ffdda8b3b8"
|
||||
],
|
||||
"markers": "python_full_version >= '3.8.0'",
|
||||
"version": "==14.3.2"
|
||||
},
|
||||
"rich-click": {
|
||||
"hashes": [
|
||||
"sha256:022997c1e30731995bdbc8ec2f82819340d42543237f033a003c7b1f843fc5dc",
|
||||
"sha256:2f99120fca78f536e07b114d3b60333bc4bb2a0969053b1250869bcdc1b5351b"
|
||||
],
|
||||
"markers": "python_version >= '3.8'",
|
||||
"version": "==1.9.7"
|
||||
},
|
||||
"selenium": {
|
||||
"hashes": [
|
||||
"sha256:a88f5905d88ad0b84991c2386ea39e2bbde6d6c334be38df5842318ba98eaa8c",
|
||||
"sha256:c8823fc02e2c771d9ad9a0cf899cee7de1a57a6697e3d0b91f67566129f2b729"
|
||||
],
|
||||
"index": "pypi",
|
||||
"markers": "python_version >= '3.10'",
|
||||
"version": "==4.40.0"
|
||||
},
|
||||
"sniffio": {
|
||||
"hashes": [
|
||||
"sha256:2f6da418d1f1e0fddd844478f41680e794e6051915791a034ff65e5f100525a2",
|
||||
"sha256:f4324edc670a0f49750a81b895f35c3adb843cca46f0530f79fc1babb23789dc"
|
||||
],
|
||||
"markers": "python_version >= '3.7'",
|
||||
"version": "==1.3.1"
|
||||
},
|
||||
"sortedcontainers": {
|
||||
"hashes": [
|
||||
"sha256:25caa5a06cc30b6b83d11423433f65d1f9d76c4c6a0c90e3379eaa43b9bfdb88",
|
||||
"sha256:a163dcaede0f1c021485e957a39245190e74249897e2ae4b2aa38595db237ee0"
|
||||
],
|
||||
"version": "==2.4.0"
|
||||
},
|
||||
"trio": {
|
||||
"hashes": [
|
||||
"sha256:150f29ec923bcd51231e1d4c71c7006e65247d68759dd1c19af4ea815a25806b",
|
||||
"sha256:4ab65984ef8370b79a76659ec87aa3a30c5c7c83ff250b4de88c29a8ab6123c5"
|
||||
],
|
||||
"markers": "python_version >= '3.10'",
|
||||
"version": "==0.32.0"
|
||||
},
|
||||
"trio-typing": {
|
||||
"hashes": [
|
||||
"sha256:065ee684296d52a8ab0e2374666301aec36ee5747ac0e7a61f230250f8907ac3",
|
||||
"sha256:6d0e7ec9d837a2fe03591031a172533fbf4a1a95baf369edebfc51d5a49f0264"
|
||||
],
|
||||
"version": "==0.10.0"
|
||||
},
|
||||
"trio-websocket": {
|
||||
"hashes": [
|
||||
"sha256:22c72c436f3d1e264d0910a3951934798dcc5b00ae56fc4ee079d46c7cf20fae",
|
||||
"sha256:df605665f1db533f4a386c94525870851096a223adcb97f72a07e8b4beba45b6"
|
||||
],
|
||||
"markers": "python_version >= '3.8'",
|
||||
"version": "==0.12.2"
|
||||
},
|
||||
"types-certifi": {
|
||||
"hashes": [
|
||||
"sha256:72cf7798d165bc0b76e1c10dd1ea3097c7063c42c21d664523b928e88b554a4f",
|
||||
"sha256:b2d1e325e69f71f7c78e5943d410e650b4707bb0ef32e4ddf3da37f54176e88a"
|
||||
],
|
||||
"version": "==2021.10.8.3"
|
||||
},
|
||||
"types-urllib3": {
|
||||
"hashes": [
|
||||
"sha256:229b7f577c951b8c1b92c1bc2b2fdb0b49847bd2af6d1cc2a2e3dd340f3bda8f",
|
||||
"sha256:9683bbb7fb72e32bfe9d2be6e04875fbe1b3eeec3cbb4ea231435aa7fd6b4f0e"
|
||||
],
|
||||
"version": "==1.26.25.14"
|
||||
},
|
||||
"typing-extensions": {
|
||||
"hashes": [
|
||||
"sha256:0cea48d173cc12fa28ecabc3b837ea3cf6f38c6d1136f85cbaaf598984861466",
|
||||
"sha256:f0fa19c6845758ab08074a0cfa8b7aecb71c999ca73d62883bc25cc018c4e548"
|
||||
],
|
||||
"markers": "python_version >= '3.9'",
|
||||
"version": "==4.15.0"
|
||||
},
|
||||
"urllib3": {
|
||||
"extras": [
|
||||
"socks"
|
||||
],
|
||||
"hashes": [
|
||||
"sha256:1b62b6884944a57dbe321509ab94fd4d3b307075e0c2eae991ac71ee15ad38ed",
|
||||
"sha256:bf272323e553dfb2e87d9bfd225ca7b0f467b919d7bbd355436d3fd37cb0acd4"
|
||||
],
|
||||
"markers": "python_version >= '3.9'",
|
||||
"version": "==2.6.3"
|
||||
},
|
||||
"watchfiles": {
|
||||
"hashes": [
|
||||
"sha256:00485f441d183717038ed2e887a7c868154f216877653121068107b227a2f64c",
|
||||
"sha256:03fa0f5237118a0c5e496185cafa92878568b652a2e9a9382a5151b1a0380a43",
|
||||
"sha256:04e78dd0b6352db95507fd8cb46f39d185cf8c74e4cf1e4fbad1d3df96faf510",
|
||||
"sha256:059098c3a429f62fc98e8ec62b982230ef2c8df68c79e826e37b895bc359a9c0",
|
||||
"sha256:08af70fd77eee58549cd69c25055dc344f918d992ff626068242259f98d598a2",
|
||||
"sha256:0b495de0bb386df6a12b18335a0285dda90260f51bdb505503c02bcd1ce27a8b",
|
||||
"sha256:130e4876309e8686a5e37dba7d5e9bc77e6ed908266996ca26572437a5271e18",
|
||||
"sha256:14e0b1fe858430fc0251737ef3824c54027bedb8c37c38114488b8e131cf8219",
|
||||
"sha256:17ef139237dfced9da49fb7f2232c86ca9421f666d78c264c7ffca6601d154c3",
|
||||
"sha256:1a0bb430adb19ef49389e1ad368450193a90038b5b752f4ac089ec6942c4dff4",
|
||||
"sha256:1db5d7ae38ff20153d542460752ff397fcf5c96090c1230803713cf3147a6803",
|
||||
"sha256:28475ddbde92df1874b6c5c8aaeb24ad5be47a11f87cde5a28ef3835932e3e94",
|
||||
"sha256:2edc3553362b1c38d9f06242416a5d8e9fe235c204a4072e988ce2e5bb1f69f6",
|
||||
"sha256:30f7da3fb3f2844259cba4720c3fc7138eb0f7b659c38f3bfa65084c7fc7abce",
|
||||
"sha256:311ff15a0bae3714ffb603e6ba6dbfba4065ab60865d15a6ec544133bdb21099",
|
||||
"sha256:319b27255aacd9923b8a276bb14d21a5f7ff82564c744235fc5eae58d95422ae",
|
||||
"sha256:35c53bd62a0b885bf653ebf6b700d1bf05debb78ad9292cf2a942b23513dc4c4",
|
||||
"sha256:36193ed342f5b9842edd3532729a2ad55c4160ffcfa3700e0d54be496b70dd43",
|
||||
"sha256:39574d6370c4579d7f5d0ad940ce5b20db0e4117444e39b6d8f99db5676c52fd",
|
||||
"sha256:399600947b170270e80134ac854e21b3ccdefa11a9529a3decc1327088180f10",
|
||||
"sha256:3a476189be23c3686bc2f4321dd501cb329c0a0469e77b7b534ee10129ae6374",
|
||||
"sha256:3ad9fe1dae4ab4212d8c91e80b832425e24f421703b5a42ef2e4a1e215aff051",
|
||||
"sha256:3bc570d6c01c206c46deb6e935a260be44f186a2f05179f52f7fcd2be086a94d",
|
||||
"sha256:3dbd8cbadd46984f802f6d479b7e3afa86c42d13e8f0f322d669d79722c8ec34",
|
||||
"sha256:3e6f39af2eab0118338902798b5aa6664f46ff66bc0280de76fca67a7f262a49",
|
||||
"sha256:3f53fa183d53a1d7a8852277c92b967ae99c2d4dcee2bfacff8868e6e30b15f7",
|
||||
"sha256:3f6d37644155fb5beca5378feb8c1708d5783145f2a0f1c4d5a061a210254844",
|
||||
"sha256:3f7eb7da0eb23aa2ba036d4f616d46906013a68caf61b7fdbe42fc8b25132e77",
|
||||
"sha256:3fa0b59c92278b5a7800d3ee7733da9d096d4aabcfabb9a928918bd276ef9b9b",
|
||||
"sha256:421e29339983e1bebc281fab40d812742268ad057db4aee8c4d2bce0af43b741",
|
||||
"sha256:4b943d3668d61cfa528eb949577479d3b077fd25fb83c641235437bc0b5bc60e",
|
||||
"sha256:526e86aced14a65a5b0ec50827c745597c782ff46b571dbfe46192ab9e0b3c33",
|
||||
"sha256:52e06553899e11e8074503c8e716d574adeeb7e68913115c4b3653c53f9bae42",
|
||||
"sha256:544364b2b51a9b0c7000a4b4b02f90e9423d97fbbf7e06689236443ebcad81ab",
|
||||
"sha256:5524298e3827105b61951a29c3512deb9578586abf3a7c5da4a8069df247cccc",
|
||||
"sha256:55c7475190662e202c08c6c0f4d9e345a29367438cf8e8037f3155e10a88d5a5",
|
||||
"sha256:563b116874a9a7ce6f96f87cd0b94f7faf92d08d0021e837796f0a14318ef8da",
|
||||
"sha256:57ca5281a8b5e27593cb7d82c2ac927ad88a96ed406aa446f6344e4328208e9e",
|
||||
"sha256:5c85794a4cfa094714fb9c08d4a218375b2b95b8ed1666e8677c349906246c05",
|
||||
"sha256:5f3bde70f157f84ece3765b42b4a52c6ac1a50334903c6eaf765362f6ccca88a",
|
||||
"sha256:5f3f58818dc0b07f7d9aa7fe9eb1037aecb9700e63e1f6acfed13e9fef648f5d",
|
||||
"sha256:5fac835b4ab3c6487b5dbad78c4b3724e26bcc468e886f8ba8cc4306f68f6701",
|
||||
"sha256:620bae625f4cb18427b1bb1a2d9426dc0dd5a5ba74c7c2cdb9de405f7b129863",
|
||||
"sha256:672b8adf25b1a0d35c96b5888b7b18699d27d4194bac8beeae75be4b7a3fc9b2",
|
||||
"sha256:6aae418a8b323732fa89721d86f39ec8f092fc2af67f4217a2b07fd3e93c6101",
|
||||
"sha256:6c3631058c37e4a0ec440bf583bc53cdbd13e5661bb6f465bc1d88ee9a0a4d02",
|
||||
"sha256:6c9c9262f454d1c4d8aaa7050121eb4f3aea197360553699520767daebf2180b",
|
||||
"sha256:6e43d39a741e972bab5d8100b5cdacf69db64e34eb19b6e9af162bccf63c5cc6",
|
||||
"sha256:7365b92c2e69ee952902e8f70f3ba6360d0d596d9299d55d7d386df84b6941fb",
|
||||
"sha256:743185e7372b7bc7c389e1badcc606931a827112fbbd37f14c537320fca08620",
|
||||
"sha256:74472234c8370669850e1c312490f6026d132ca2d396abfad8830b4f1c096957",
|
||||
"sha256:74d5012b7630714b66be7b7b7a78855ef7ad58e8650c73afc4c076a1f480a8d6",
|
||||
"sha256:77a13aea58bc2b90173bc69f2a90de8e282648939a00a602e1dc4ee23e26b66d",
|
||||
"sha256:79ff6c6eadf2e3fc0d7786331362e6ef1e51125892c75f1004bd6b52155fb956",
|
||||
"sha256:831a62658609f0e5c64178211c942ace999517f5770fe9436be4c2faeba0c0ef",
|
||||
"sha256:836398932192dae4146c8f6f737d74baeac8b70ce14831a239bdb1ca882fc261",
|
||||
"sha256:842178b126593addc05acf6fce960d28bc5fae7afbaa2c6c1b3a7b9460e5be02",
|
||||
"sha256:8526e8f916bb5b9a0a777c8317c23ce65de259422bba5b31325a6fa6029d33af",
|
||||
"sha256:859e43a1951717cc8de7f4c77674a6d389b106361585951d9e69572823f311d9",
|
||||
"sha256:88863fbbc1a7312972f1c511f202eb30866370ebb8493aef2812b9ff28156a21",
|
||||
"sha256:89eef07eee5e9d1fda06e38822ad167a044153457e6fd997f8a858ab7564a336",
|
||||
"sha256:8c89f9f2f740a6b7dcc753140dd5e1ab9215966f7a3530d0c0705c83b401bd7d",
|
||||
"sha256:8c91ed27800188c2ae96d16e3149f199d62f86c7af5f5f4d2c61a3ed8cd3666c",
|
||||
"sha256:8ca65483439f9c791897f7db49202301deb6e15fe9f8fe2fed555bf986d10c31",
|
||||
"sha256:8fbe85cb3201c7d380d3d0b90e63d520f15d6afe217165d7f98c9c649654db81",
|
||||
"sha256:91d4c9a823a8c987cce8fa2690923b069966dabb196dd8d137ea2cede885fde9",
|
||||
"sha256:9bb9f66367023ae783551042d31b1d7fd422e8289eedd91f26754a66f44d5cff",
|
||||
"sha256:a173cb5c16c4f40ab19cecf48a534c409f7ea983ab8fed0741304a1c0a31b3f2",
|
||||
"sha256:a36d8efe0f290835fd0f33da35042a1bb5dc0e83cbc092dcf69bce442579e88e",
|
||||
"sha256:a55f3e9e493158d7bfdb60a1165035f1cf7d320914e7b7ea83fe22c6023b58fc",
|
||||
"sha256:a625815d4a2bdca61953dbba5a39d60164451ef34c88d751f6c368c3ea73d404",
|
||||
"sha256:a916a2932da8f8ab582f242c065f5c81bed3462849ca79ee357dd9551b0e9b01",
|
||||
"sha256:ac3cc5759570cd02662b15fbcd9d917f7ecd47efe0d6b40474eafd246f91ea18",
|
||||
"sha256:acb08650863767cbc58bca4813b92df4d6c648459dcaa3d4155681962b2aa2d3",
|
||||
"sha256:aebfd0861a83e6c3d1110b78ad54704486555246e542be3e2bb94195eabb2606",
|
||||
"sha256:afaeff7696e0ad9f02cbb8f56365ff4686ab205fcf9c4c5b6fdfaaa16549dd04",
|
||||
"sha256:b27cf2eb1dda37b2089e3907d8ea92922b673c0c427886d4edc6b94d8dfe5db3",
|
||||
"sha256:b2cd9e04277e756a2e2d2543d65d1e2166d6fd4c9b183f8808634fda23f17b14",
|
||||
"sha256:b9c4702f29ca48e023ffd9b7ff6b822acdf47cb1ff44cb490a3f1d5ec8987e9c",
|
||||
"sha256:bbe1ef33d45bc71cf21364df962af171f96ecaeca06bd9e3d0b583efb12aec82",
|
||||
"sha256:bd404be08018c37350f0d6e34676bd1e2889990117a2b90070b3007f172d0610",
|
||||
"sha256:bf0a91bfb5574a2f7fc223cf95eeea79abfefa404bf1ea5e339c0c1560ae99a0",
|
||||
"sha256:bfb5862016acc9b869bb57284e6cb35fdf8e22fe59f7548858e2f971d045f150",
|
||||
"sha256:bfff9740c69c0e4ed32416f013f3c45e2ae42ccedd1167ef2d805c000b6c71a5",
|
||||
"sha256:c1f5210f1b8fc91ead1283c6fd89f70e76fb07283ec738056cf34d51e9c1d62c",
|
||||
"sha256:c2047d0b6cea13b3316bdbafbfa0c4228ae593d995030fda39089d36e64fc03a",
|
||||
"sha256:c22c776292a23bfc7237a98f791b9ad3144b02116ff10d820829ce62dff46d0b",
|
||||
"sha256:c755367e51db90e75b19454b680903631d41f9e3607fbd941d296a020c2d752d",
|
||||
"sha256:c882d69f6903ef6092bedfb7be973d9319940d56b8427ab9187d1ecd73438a70",
|
||||
"sha256:cb467c999c2eff23a6417e58d75e5828716f42ed8289fe6b77a7e5a91036ca70",
|
||||
"sha256:cdab464fee731e0884c35ae3588514a9bcf718d0e2c82169c1c4a85cc19c3c7f",
|
||||
"sha256:ce19e06cbda693e9e7686358af9cd6f5d61312ab8b00488bc36f5aabbaf77e24",
|
||||
"sha256:ce70f96a46b894b36eba678f153f052967a0d06d5b5a19b336ab0dbbd029f73e",
|
||||
"sha256:cf57a27fb986c6243d2ee78392c503826056ffe0287e8794503b10fb51b881be",
|
||||
"sha256:d1715143123baeeaeadec0528bb7441103979a1d5f6fd0e1f915383fea7ea6d5",
|
||||
"sha256:d6ff426a7cb54f310d51bfe83fe9f2bbe40d540c741dc974ebc30e6aa238f52e",
|
||||
"sha256:d7e7067c98040d646982daa1f37a33d3544138ea155536c2e0e63e07ff8a7e0f",
|
||||
"sha256:db476ab59b6765134de1d4fe96a1a9c96ddf091683599be0f26147ea1b2e4b88",
|
||||
"sha256:dcc5c24523771db3a294c77d94771abcfcb82a0e0ee8efd910c37c59ec1b31bb",
|
||||
"sha256:de6da501c883f58ad50db3a32ad397b09ad29865b5f26f64c24d3e3281685849",
|
||||
"sha256:e84087b432b6ac94778de547e08611266f1f8ffad28c0ee4c82e028b0fc5966d",
|
||||
"sha256:eef58232d32daf2ac67f42dea51a2c80f0d03379075d44a587051e63cc2e368c",
|
||||
"sha256:f096076119da54a6080e8920cbdaac3dbee667eb91dcc5e5b78840b87415bd44",
|
||||
"sha256:f0ab1c1af0cb38e3f598244c17919fb1a84d1629cc08355b0074b6d7f53138ac",
|
||||
"sha256:f27db948078f3823a6bb3b465180db8ebecf26dd5dae6f6180bd87383b6b4428",
|
||||
"sha256:f537afb3276d12814082a2e9b242bdcf416c2e8fd9f799a737990a1dbe906e5b",
|
||||
"sha256:f57b396167a2565a4e8b5e56a5a1c537571733992b226f4f1197d79e94cf0ae5",
|
||||
"sha256:f8979280bdafff686ba5e4d8f97840f929a87ed9cdf133cbbd42f7766774d2aa",
|
||||
"sha256:f9a2ae5c91cecc9edd47e041a930490c31c3afb1f5e6d71de3dc671bfaca02bf"
|
||||
],
|
||||
"index": "pypi",
|
||||
"markers": "python_version >= '3.9'",
|
||||
"version": "==1.1.1"
|
||||
},
|
||||
"websocket-client": {
|
||||
"hashes": [
|
||||
"sha256:9e813624b6eb619999a97dc7958469217c3176312b3a16a4bd1bc7e08a46ec98",
|
||||
"sha256:af248a825037ef591efbf6ed20cc5faa03d3b47b9e5a2230a529eeee1c1fc3ef"
|
||||
],
|
||||
"markers": "python_version >= '3.9'",
|
||||
"version": "==1.9.0"
|
||||
},
|
||||
"wsproto": {
|
||||
"hashes": [
|
||||
"sha256:61eea322cdf56e8cc904bd3ad7573359a242ba65688716b0710a5eb12beab584",
|
||||
"sha256:b86885dcf294e15204919950f666e06ffc6c7c114ca900b060d6e16293528294"
|
||||
],
|
||||
"markers": "python_version >= '3.10'",
|
||||
"version": "==1.3.2"
|
||||
},
|
||||
"zipp": {
|
||||
"hashes": [
|
||||
"sha256:071652d6115ed432f5ce1d34c336c0adfd6a884660d1e9712a256d3d3bd4b14e",
|
||||
"sha256:a07157588a12518c9d4034df3fbbee09c814741a33ff63c05fa29d26a2404166"
|
||||
],
|
||||
"markers": "python_version >= '3.9'",
|
||||
"version": "==3.23.0"
|
||||
}
|
||||
},
|
||||
"develop": {}
|
||||
}
|
||||
BIN
build_static/app.js.gz
Normal file
BIN
build_static/app.js.gz
Normal file
Binary file not shown.
BIN
build_static/styles.css.gz
Normal file
BIN
build_static/styles.css.gz
Normal file
Binary file not shown.
2
clear-debug-log.sh
Executable file
2
clear-debug-log.sh
Executable file
@@ -0,0 +1,2 @@
|
||||
#!/usr/bin/env sh
|
||||
rm -f /home/pi/led-controller/.cursor/debug.log
|
||||
17
db/group.json
Normal file
17
db/group.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"1": {
|
||||
"name": "Main Group",
|
||||
"devices": [
|
||||
"1",
|
||||
"2",
|
||||
"3"
|
||||
]
|
||||
},
|
||||
"2": {
|
||||
"name": "Accent Group",
|
||||
"devices": [
|
||||
"4",
|
||||
"5"
|
||||
]
|
||||
}
|
||||
}
|
||||
12
db/palette.json
Normal file
12
db/palette.json
Normal file
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"1": [
|
||||
"#FF0000",
|
||||
"#00FF00",
|
||||
"#0000FF",
|
||||
"#FFFF00",
|
||||
"#FF00FF",
|
||||
"#00FFFF",
|
||||
"#FFFFFF",
|
||||
"#000000"
|
||||
]
|
||||
}
|
||||
54
db/pattern.json
Normal file
54
db/pattern.json
Normal file
@@ -0,0 +1,54 @@
|
||||
{
|
||||
"on": {
|
||||
"min_delay": 10,
|
||||
"max_delay": 10000,
|
||||
"max_colors": 1
|
||||
},
|
||||
"off": {
|
||||
"min_delay": 10,
|
||||
"max_delay": 10000,
|
||||
"max_colors": 0
|
||||
},
|
||||
"rainbow": {
|
||||
"n1": "Step Rate",
|
||||
"min_delay": 10,
|
||||
"max_delay": 10000,
|
||||
"max_colors": 0
|
||||
},
|
||||
"transition": {
|
||||
"min_delay": 10,
|
||||
"max_delay": 10000,
|
||||
"max_colors": 10
|
||||
},
|
||||
"chase": {
|
||||
"n1": "Colour 1 Length",
|
||||
"n2": "Colour 2 Length",
|
||||
"n3": "Step 1",
|
||||
"n4": "Step 2",
|
||||
"min_delay": 10,
|
||||
"max_delay": 10000,
|
||||
"max_colors": 2
|
||||
},
|
||||
"pulse": {
|
||||
"n1": "Attack",
|
||||
"n2": "Hold",
|
||||
"n3": "Decay",
|
||||
"min_delay": 10,
|
||||
"max_delay": 10000,
|
||||
"max_colors": 10
|
||||
},
|
||||
"circle": {
|
||||
"n1": "Head Rate",
|
||||
"n2": "Max Length",
|
||||
"n3": "Tail Rate",
|
||||
"n4": "Min Length",
|
||||
"min_delay": 10,
|
||||
"max_delay": 10000,
|
||||
"max_colors": 2
|
||||
},
|
||||
"blink": {
|
||||
"min_delay": 10,
|
||||
"max_delay": 10000,
|
||||
"max_colors": 10
|
||||
}
|
||||
}
|
||||
276
db/preset.json
Normal file
276
db/preset.json
Normal file
@@ -0,0 +1,276 @@
|
||||
{
|
||||
"1": {
|
||||
"name": "on",
|
||||
"pattern": "on",
|
||||
"colors": [
|
||||
"#FFFFFF"
|
||||
],
|
||||
"brightness": 255,
|
||||
"delay": 100,
|
||||
"auto": true,
|
||||
"n1": 0,
|
||||
"n2": 0,
|
||||
"n3": 0,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0,
|
||||
"n7": 0,
|
||||
"n8": 0,
|
||||
"profile_id": "1"
|
||||
},
|
||||
"2": {
|
||||
"name": "off",
|
||||
"pattern": "off",
|
||||
"colors": [],
|
||||
"brightness": 0,
|
||||
"delay": 100,
|
||||
"auto": true,
|
||||
"n1": 0,
|
||||
"n2": 0,
|
||||
"n3": 0,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0,
|
||||
"n7": 0,
|
||||
"n8": 0,
|
||||
"profile_id": "1"
|
||||
},
|
||||
"3": {
|
||||
"name": "rainbow",
|
||||
"pattern": "rainbow",
|
||||
"colors": [],
|
||||
"brightness": 255,
|
||||
"delay": 100,
|
||||
"auto": true,
|
||||
"n1": 2,
|
||||
"n2": 0,
|
||||
"n3": 0,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0,
|
||||
"n7": 0,
|
||||
"n8": 0,
|
||||
"profile_id": "1"
|
||||
},
|
||||
"4": {
|
||||
"name": "transition",
|
||||
"pattern": "transition",
|
||||
"colors": [
|
||||
"#FF0000",
|
||||
"#00FF00",
|
||||
"#0000FF"
|
||||
],
|
||||
"brightness": 255,
|
||||
"delay": 500,
|
||||
"auto": true,
|
||||
"n1": 0,
|
||||
"n2": 0,
|
||||
"n3": 0,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0,
|
||||
"n7": 0,
|
||||
"n8": 0,
|
||||
"profile_id": "1"
|
||||
},
|
||||
"5": {
|
||||
"name": "chase",
|
||||
"pattern": "chase",
|
||||
"colors": [
|
||||
"#FF0000",
|
||||
"#0000FF"
|
||||
],
|
||||
"brightness": 255,
|
||||
"delay": 200,
|
||||
"auto": true,
|
||||
"n1": 5,
|
||||
"n2": 5,
|
||||
"n3": 1,
|
||||
"n4": 1,
|
||||
"n5": 0,
|
||||
"n6": 0,
|
||||
"n7": 0,
|
||||
"n8": 0,
|
||||
"profile_id": "1"
|
||||
},
|
||||
"6": {
|
||||
"name": "pulse",
|
||||
"pattern": "pulse",
|
||||
"colors": [
|
||||
"#00FF00"
|
||||
],
|
||||
"brightness": 255,
|
||||
"delay": 500,
|
||||
"auto": true,
|
||||
"n1": 1000,
|
||||
"n2": 500,
|
||||
"n3": 1000,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0,
|
||||
"n7": 0,
|
||||
"n8": 0,
|
||||
"profile_id": "1"
|
||||
},
|
||||
"7": {
|
||||
"name": "circle",
|
||||
"pattern": "circle",
|
||||
"colors": [
|
||||
"#FFA500",
|
||||
"#800080"
|
||||
],
|
||||
"brightness": 255,
|
||||
"delay": 200,
|
||||
"auto": true,
|
||||
"n1": 2,
|
||||
"n2": 10,
|
||||
"n3": 2,
|
||||
"n4": 5,
|
||||
"n5": 0,
|
||||
"n6": 0,
|
||||
"n7": 0,
|
||||
"n8": 0,
|
||||
"profile_id": "1"
|
||||
},
|
||||
"8": {
|
||||
"name": "blink",
|
||||
"pattern": "blink",
|
||||
"colors": [
|
||||
"#FF0000",
|
||||
"#00FF00",
|
||||
"#0000FF",
|
||||
"#FFFF00"
|
||||
],
|
||||
"brightness": 255,
|
||||
"delay": 1000,
|
||||
"auto": true,
|
||||
"n1": 0,
|
||||
"n2": 0,
|
||||
"n3": 0,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0,
|
||||
"n7": 0,
|
||||
"n8": 0,
|
||||
"profile_id": "1"
|
||||
},
|
||||
"9": {
|
||||
"name": "warm white",
|
||||
"pattern": "on",
|
||||
"colors": ["#FFF5E6"],
|
||||
"brightness": 200,
|
||||
"delay": 100,
|
||||
"auto": true,
|
||||
"n1": 0,
|
||||
"n2": 0,
|
||||
"n3": 0,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0,
|
||||
"n7": 0,
|
||||
"n8": 0,
|
||||
"profile_id": "1"
|
||||
},
|
||||
"10": {
|
||||
"name": "cool white",
|
||||
"pattern": "on",
|
||||
"colors": ["#E6F2FF"],
|
||||
"brightness": 200,
|
||||
"delay": 100,
|
||||
"auto": true,
|
||||
"n1": 0,
|
||||
"n2": 0,
|
||||
"n3": 0,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0,
|
||||
"n7": 0,
|
||||
"n8": 0,
|
||||
"profile_id": "1"
|
||||
},
|
||||
"11": {
|
||||
"name": "red",
|
||||
"pattern": "on",
|
||||
"colors": ["#FF0000"],
|
||||
"brightness": 255,
|
||||
"delay": 100,
|
||||
"auto": true,
|
||||
"n1": 0,
|
||||
"n2": 0,
|
||||
"n3": 0,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0,
|
||||
"n7": 0,
|
||||
"n8": 0,
|
||||
"profile_id": "1"
|
||||
},
|
||||
"12": {
|
||||
"name": "blue",
|
||||
"pattern": "on",
|
||||
"colors": ["#0000FF"],
|
||||
"brightness": 255,
|
||||
"delay": 100,
|
||||
"auto": true,
|
||||
"n1": 0,
|
||||
"n2": 0,
|
||||
"n3": 0,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0,
|
||||
"n7": 0,
|
||||
"n8": 0,
|
||||
"profile_id": "1"
|
||||
},
|
||||
"13": {
|
||||
"name": "rainbow slow",
|
||||
"pattern": "rainbow",
|
||||
"colors": [],
|
||||
"brightness": 255,
|
||||
"delay": 150,
|
||||
"auto": true,
|
||||
"n1": 1,
|
||||
"n2": 0,
|
||||
"n3": 0,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0,
|
||||
"n7": 0,
|
||||
"n8": 0,
|
||||
"profile_id": "1"
|
||||
},
|
||||
"14": {
|
||||
"name": "pulse slow",
|
||||
"pattern": "pulse",
|
||||
"colors": ["#FF6600"],
|
||||
"brightness": 255,
|
||||
"delay": 800,
|
||||
"auto": true,
|
||||
"n1": 2000,
|
||||
"n2": 1000,
|
||||
"n3": 2000,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0,
|
||||
"n7": 0,
|
||||
"n8": 0,
|
||||
"profile_id": "1"
|
||||
},
|
||||
"15": {
|
||||
"name": "blink red green",
|
||||
"pattern": "blink",
|
||||
"colors": ["#FF0000", "#00FF00"],
|
||||
"brightness": 255,
|
||||
"delay": 500,
|
||||
"auto": true,
|
||||
"n1": 0,
|
||||
"n2": 0,
|
||||
"n3": 0,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0,
|
||||
"n7": 0,
|
||||
"n8": 0,
|
||||
"profile_id": "1"
|
||||
}
|
||||
}
|
||||
11
db/profile.json
Normal file
11
db/profile.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"1": {
|
||||
"name": "default",
|
||||
"type": "tabs",
|
||||
"tabs": [
|
||||
"1"
|
||||
],
|
||||
"scenes": [],
|
||||
"palette_id": "1"
|
||||
}
|
||||
}
|
||||
22
db/scene.json
Normal file
22
db/scene.json
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"1": {
|
||||
"name": "Default Scene",
|
||||
"sequences": [
|
||||
"1"
|
||||
],
|
||||
"groups": [
|
||||
"1"
|
||||
]
|
||||
},
|
||||
"2": {
|
||||
"name": "Party Mode",
|
||||
"sequences": [
|
||||
"1",
|
||||
"2"
|
||||
],
|
||||
"groups": [
|
||||
"1",
|
||||
"2"
|
||||
]
|
||||
}
|
||||
}
|
||||
30
db/sequence.json
Normal file
30
db/sequence.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"1": {
|
||||
"group_name": "Main Group",
|
||||
"presets": [
|
||||
"1",
|
||||
"2"
|
||||
],
|
||||
"sequence_duration": 3000,
|
||||
"sequence_transition": 500,
|
||||
"sequence_loop": true,
|
||||
"sequence_repeat_count": 0,
|
||||
"sequence_active": false,
|
||||
"sequence_index": 0,
|
||||
"sequence_start_time": 0
|
||||
},
|
||||
"2": {
|
||||
"group_name": "Accent Group",
|
||||
"presets": [
|
||||
"2",
|
||||
"3"
|
||||
],
|
||||
"sequence_duration": 2000,
|
||||
"sequence_transition": 300,
|
||||
"sequence_loop": true,
|
||||
"sequence_repeat_count": 0,
|
||||
"sequence_active": false,
|
||||
"sequence_index": 0,
|
||||
"sequence_start_time": 0
|
||||
}
|
||||
}
|
||||
27
db/tab.json
Normal file
27
db/tab.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"1": {
|
||||
"name": "default",
|
||||
"names": [
|
||||
"a","b","c","d","e","f","g","h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
|
||||
],
|
||||
"presets": [
|
||||
[
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"10",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"14",
|
||||
"15"
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
30
dev.py
30
dev.py
@@ -6,28 +6,48 @@ import sys
|
||||
|
||||
print(sys.argv)
|
||||
|
||||
port = sys.argv[1]
|
||||
# Extract port (first arg if it's not a command)
|
||||
commands = ["src", "lib", "ls", "reset", "follow", "db"]
|
||||
port = None
|
||||
if len(sys.argv) > 1 and sys.argv[1] not in commands:
|
||||
port = sys.argv[1]
|
||||
|
||||
cmd = sys.argv[1]
|
||||
|
||||
for cmd in sys.argv[1:]:
|
||||
print(cmd)
|
||||
match cmd:
|
||||
case "src":
|
||||
if port:
|
||||
subprocess.call(["mpremote", "connect", port, "fs", "cp", "-r", ".", ":" ], cwd="src")
|
||||
else:
|
||||
print("Error: Port required for 'src' command")
|
||||
case "lib":
|
||||
if port:
|
||||
subprocess.call(["mpremote", "connect", port, "fs", "cp", "-r", "lib", ":" ])
|
||||
else:
|
||||
print("Error: Port required for 'lib' command")
|
||||
case "ls":
|
||||
if port:
|
||||
subprocess.call(["mpremote", "connect", port, "fs", "ls", ":" ])
|
||||
else:
|
||||
print("Error: Port required for 'ls' command")
|
||||
case "reset":
|
||||
if port:
|
||||
with serial.Serial(port, baudrate=115200) as ser:
|
||||
ser.write(b'\x03\x03\x04')
|
||||
else:
|
||||
print("Error: Port required for 'reset' command")
|
||||
case "follow":
|
||||
if port:
|
||||
with serial.Serial(port, baudrate=115200) as ser:
|
||||
while True:
|
||||
if ser.in_waiting > 0: # Check if there is data in the buffer
|
||||
data = ser.readline().decode('utf-8').strip() # Read and decode the data
|
||||
print(data)
|
||||
|
||||
|
||||
|
||||
else:
|
||||
print("Error: Port required for 'follow' command")
|
||||
case "db":
|
||||
if port:
|
||||
subprocess.call(["mpremote", "connect", port, "fs", "cp", "-r", "db", ":" ])
|
||||
else:
|
||||
print("Error: Port required for 'db' command")
|
||||
|
||||
263
docs/API.md
Normal file
263
docs/API.md
Normal file
@@ -0,0 +1,263 @@
|
||||
# LED Driver ESPNow API Documentation
|
||||
|
||||
This document describes the ESPNow message format for controlling LED driver devices.
|
||||
|
||||
## Message Format
|
||||
|
||||
All messages are JSON objects sent via ESPNow with the following structure:
|
||||
|
||||
```json
|
||||
{
|
||||
"v": "1",
|
||||
"presets": { ... },
|
||||
"select": { ... }
|
||||
}
|
||||
```
|
||||
|
||||
### Version Field
|
||||
|
||||
- **`v`** (required): Message version, must be `"1"`. Messages with other versions are ignored.
|
||||
|
||||
## Presets
|
||||
|
||||
Presets define LED patterns with their configuration. Each preset has a name and contains pattern-specific settings.
|
||||
|
||||
### Preset Structure
|
||||
|
||||
```json
|
||||
{
|
||||
"presets": {
|
||||
"preset_name": {
|
||||
"pattern": "pattern_type",
|
||||
"colors": ["#RRGGBB", ...],
|
||||
"delay": 100,
|
||||
"brightness": 127,
|
||||
"auto": true,
|
||||
"n1": 0,
|
||||
"n2": 0,
|
||||
"n3": 0,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Preset Fields
|
||||
|
||||
- **`pattern`** (required): Pattern type. Options:
|
||||
- `"off"` - Turn off all LEDs
|
||||
- `"on"` - Solid color
|
||||
- `"blink"` - Blinking pattern
|
||||
- `"rainbow"` - Rainbow color cycle
|
||||
- `"pulse"` - Pulse/fade pattern
|
||||
- `"transition"` - Color transition
|
||||
- `"chase"` - Chasing pattern
|
||||
- `"circle"` - Circle loading pattern
|
||||
|
||||
- **`colors`** (optional): Array of hex color strings (e.g., `"#FF0000"` for red). Default: `["#FFFFFF"]`
|
||||
- Colors are automatically converted from hex to RGB and reordered based on device color order setting
|
||||
- Supports multiple colors for patterns that use them
|
||||
|
||||
- **`delay`** (optional): Delay in milliseconds between pattern updates. Default: `100`
|
||||
|
||||
- **`brightness`** (optional): Brightness level (0-255). Default: `127`
|
||||
|
||||
- **`auto`** (optional): Auto mode flag. Default: `true`
|
||||
- `true`: Pattern runs continuously
|
||||
- `false`: Pattern advances one step per beat (manual mode)
|
||||
|
||||
- **`n1` through `n6`** (optional): Pattern-specific numeric parameters. Default: `0`
|
||||
- See pattern-specific documentation below
|
||||
|
||||
### Pattern-Specific Parameters
|
||||
|
||||
#### Rainbow
|
||||
- **`n1`**: Step increment (how many color wheel positions to advance per update). Default: `1`
|
||||
|
||||
#### Pulse
|
||||
- **`n1`**: Attack time in milliseconds (fade in)
|
||||
- **`n2`**: Hold time in milliseconds (full brightness)
|
||||
- **`n3`**: Decay time in milliseconds (fade out)
|
||||
- **`delay`**: Delay time in milliseconds (off between pulses)
|
||||
|
||||
#### Transition
|
||||
- **`delay`**: Transition duration in milliseconds
|
||||
|
||||
#### Chase
|
||||
- **`n1`**: Number of LEDs with first color
|
||||
- **`n2`**: Number of LEDs with second color
|
||||
- **`n3`**: Movement amount on even steps (can be negative)
|
||||
- **`n4`**: Movement amount on odd steps (can be negative)
|
||||
|
||||
#### Circle
|
||||
- **`n1`**: Head movement rate (LEDs per second)
|
||||
- **`n2`**: Maximum length
|
||||
- **`n3`**: Tail movement rate (LEDs per second)
|
||||
- **`n4`**: Minimum length
|
||||
|
||||
## Select Messages
|
||||
|
||||
Select messages control which preset is active on which device. The format uses a list to support step synchronization.
|
||||
|
||||
### Select Format
|
||||
|
||||
```json
|
||||
{
|
||||
"select": {
|
||||
"device_name": ["preset_name"],
|
||||
"device_name2": ["preset_name2", step_value]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Select Fields
|
||||
|
||||
- **`select`**: Object mapping device names to selection lists
|
||||
- **Key**: Device name (as configured in device settings)
|
||||
- **Value**: List with one or two elements:
|
||||
- `["preset_name"]` - Select preset (uses default step behavior)
|
||||
- `["preset_name", step]` - Select preset with explicit step value (for synchronization)
|
||||
|
||||
### Step Synchronization
|
||||
|
||||
The step value allows precise synchronization across multiple devices:
|
||||
|
||||
- **Without step**: `["preset_name"]`
|
||||
- If switching to different preset: step resets to 0
|
||||
- If selecting "off" pattern: step resets to 0
|
||||
- If selecting same preset (beat): step is preserved, pattern restarts
|
||||
|
||||
- **With step**: `["preset_name", 10]`
|
||||
- Explicitly sets step to the specified value
|
||||
- Useful for synchronizing multiple devices to the same step
|
||||
|
||||
### Beat Functionality
|
||||
|
||||
Calling `select()` again with the same preset name acts as a "beat" - it restarts the pattern generator:
|
||||
|
||||
- **Single-tick patterns** (rainbow, chase in manual mode): Advance one step per beat
|
||||
- **Multi-tick patterns** (pulse in manual mode): Run through full cycle per beat
|
||||
|
||||
Example beat sequence:
|
||||
```json
|
||||
// Beat 1
|
||||
{"select": {"device1": ["rainbow_preset"]}}
|
||||
|
||||
// Beat 2 (same preset = beat)
|
||||
{"select": {"device1": ["rainbow_preset"]}}
|
||||
|
||||
// Beat 3
|
||||
{"select": {"device1": ["rainbow_preset"]}}
|
||||
```
|
||||
|
||||
## Synchronization
|
||||
|
||||
### Using "off" Pattern
|
||||
|
||||
Selecting the "off" pattern resets the step counter to 0, providing a synchronization point:
|
||||
|
||||
```json
|
||||
{
|
||||
"select": {
|
||||
"device1": ["off"],
|
||||
"device2": ["off"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
After all devices are "off", switching to a pattern ensures they all start from step 0:
|
||||
|
||||
```json
|
||||
{
|
||||
"select": {
|
||||
"device1": ["rainbow_preset"],
|
||||
"device2": ["rainbow_preset"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Using Step Parameter
|
||||
|
||||
For precise synchronization, use the step parameter:
|
||||
|
||||
```json
|
||||
{
|
||||
"select": {
|
||||
"device1": ["rainbow_preset", 10],
|
||||
"device2": ["rainbow_preset", 10],
|
||||
"device3": ["rainbow_preset", 10]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
All devices will start at step 10 and advance together on subsequent beats.
|
||||
|
||||
## Complete Example
|
||||
|
||||
```json
|
||||
{
|
||||
"v": "1",
|
||||
"presets": {
|
||||
"red_blink": {
|
||||
"pattern": "blink",
|
||||
"colors": ["#FF0000"],
|
||||
"delay": 200,
|
||||
"brightness": 255,
|
||||
"auto": true
|
||||
},
|
||||
"rainbow_manual": {
|
||||
"pattern": "rainbow",
|
||||
"delay": 100,
|
||||
"n1": 2,
|
||||
"auto": false
|
||||
},
|
||||
"pulse_slow": {
|
||||
"pattern": "pulse",
|
||||
"colors": ["#00FF00"],
|
||||
"delay": 500,
|
||||
"n1": 1000,
|
||||
"n2": 500,
|
||||
"n3": 1000,
|
||||
"auto": false
|
||||
}
|
||||
},
|
||||
"select": {
|
||||
"device1": ["red_blink"],
|
||||
"device2": ["rainbow_manual", 0],
|
||||
"device3": ["pulse_slow"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Message Processing
|
||||
|
||||
1. **Version Check**: Messages with `v != "1"` are rejected
|
||||
2. **Preset Processing**: Presets are created or updated (upsert behavior)
|
||||
3. **Color Conversion**: Hex colors are converted to RGB tuples and reordered based on device color order
|
||||
4. **Selection**: Devices select their assigned preset, optionally with step value
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Always include version**: Set `"v": "1"` in all messages
|
||||
2. **Use "off" for sync**: Select "off" pattern to synchronize devices before starting patterns
|
||||
3. **Beats for manual mode**: Send select messages repeatedly with same preset name to advance manual patterns
|
||||
4. **Step for precision**: Use step parameter when exact synchronization is required
|
||||
5. **Color format**: Always use hex strings (`"#RRGGBB"`), conversion is automatic
|
||||
|
||||
## Error Handling
|
||||
|
||||
- Invalid version: Message is ignored
|
||||
- Missing preset: Selection fails, device keeps current preset
|
||||
- Invalid pattern: Selection fails, device keeps current preset
|
||||
- Missing colors: Pattern uses default white color
|
||||
- Invalid step: Step value is used as-is (may cause unexpected behavior)
|
||||
|
||||
## Notes
|
||||
|
||||
- Colors are automatically converted from hex strings to RGB tuples
|
||||
- Color order reordering happens automatically based on device settings
|
||||
- Step counter wraps around (0-255 for rainbow, unbounded for others)
|
||||
- Manual mode patterns stop after one step/cycle, waiting for next beat
|
||||
- Auto mode patterns run continuously until changed
|
||||
1846
docs/SPECIFICATION.md
Normal file
1846
docs/SPECIFICATION.md
Normal file
File diff suppressed because it is too large
Load Diff
239
docs/mockups/COLOR_PICKER_README.md
Normal file
239
docs/mockups/COLOR_PICKER_README.md
Normal file
@@ -0,0 +1,239 @@
|
||||
# Custom Color Picker Component
|
||||
|
||||
A cross-platform, cross-browser color picker component that provides a consistent user experience across all operating systems and browsers.
|
||||
|
||||
## Features
|
||||
|
||||
✅ **Consistent UI** - Same appearance and behavior on Windows, macOS, Linux, iOS, and Android
|
||||
✅ **Browser Support** - Works in Chrome, Firefox, Safari, Edge, Opera, and mobile browsers
|
||||
✅ **Touch Support** - Full touch/gesture support for mobile devices
|
||||
✅ **HSB Color Model** - Uses Hue, Saturation, Brightness for intuitive color selection
|
||||
✅ **Multiple Input Methods** - Hex input, RGB inputs, and visual picker
|
||||
✅ **Accessible** - Keyboard accessible and screen reader friendly
|
||||
✅ **Customizable** - Easy to style and integrate
|
||||
|
||||
## Files
|
||||
|
||||
- `color-picker.js` - Main JavaScript component (14KB)
|
||||
- `color-picker.css` - Stylesheet (4KB)
|
||||
- `color-picker-demo.html` - Demo page showing usage examples
|
||||
|
||||
## Quick Start
|
||||
|
||||
### 1. Include the files
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="color-picker.css">
|
||||
<script src="color-picker.js"></script>
|
||||
```
|
||||
|
||||
### 2. Create a container element
|
||||
|
||||
```html
|
||||
<div id="my-color-picker"></div>
|
||||
```
|
||||
|
||||
### 3. Initialize the color picker
|
||||
|
||||
```javascript
|
||||
const picker = new ColorPicker('#my-color-picker', {
|
||||
initialColor: '#FF0000',
|
||||
onColorChange: (color) => {
|
||||
console.log('Color changed to:', color);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Constructor
|
||||
|
||||
```javascript
|
||||
new ColorPicker(container, options)
|
||||
```
|
||||
|
||||
**Parameters:**
|
||||
- `container` (string|HTMLElement) - CSS selector or DOM element
|
||||
- `options` (object) - Configuration options
|
||||
|
||||
**Options:**
|
||||
- `initialColor` (string) - Initial color in hex format (default: '#FF0000')
|
||||
- `onColorChange` (function) - Callback when color changes (receives hex color string)
|
||||
- `showHexInput` (boolean) - Show hex input field (default: true)
|
||||
|
||||
### Methods
|
||||
|
||||
```javascript
|
||||
// Get current color
|
||||
const color = picker.getColor(); // Returns hex string like '#FF0000'
|
||||
|
||||
// Set color programmatically
|
||||
picker.setColor('#00FF00');
|
||||
|
||||
// Open the picker panel
|
||||
picker.open();
|
||||
|
||||
// Close the picker panel
|
||||
picker.close();
|
||||
|
||||
// Toggle the picker panel
|
||||
picker.toggle();
|
||||
```
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```javascript
|
||||
const picker = new ColorPicker('#picker1', {
|
||||
initialColor: '#FF0000'
|
||||
});
|
||||
```
|
||||
|
||||
### With Callback
|
||||
|
||||
```javascript
|
||||
const picker = new ColorPicker('#picker1', {
|
||||
initialColor: '#FF0000',
|
||||
onColorChange: (color) => {
|
||||
document.body.style.backgroundColor = color;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Multiple Color Pickers
|
||||
|
||||
```javascript
|
||||
const colors = ['#FF0000', '#00FF00', '#0000FF'];
|
||||
const pickers = colors.map((color, index) => {
|
||||
return new ColorPicker(`#picker-${index}`, {
|
||||
initialColor: color,
|
||||
onColorChange: (newColor) => {
|
||||
colors[index] = newColor;
|
||||
updateLEDColors(colors);
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### Dynamic Color Picker Creation
|
||||
|
||||
```javascript
|
||||
function addColorPicker(containerId, initialColor = '#000000') {
|
||||
const container = document.createElement('div');
|
||||
container.id = containerId;
|
||||
document.getElementById('color-list').appendChild(container);
|
||||
|
||||
return new ColorPicker(container, {
|
||||
initialColor: initialColor,
|
||||
onColorChange: (color) => {
|
||||
console.log(`Color ${containerId} changed to ${color}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add multiple pickers
|
||||
addColorPicker('color-1', '#FF0000');
|
||||
addColorPicker('color-2', '#00FF00');
|
||||
```
|
||||
|
||||
## Styling
|
||||
|
||||
The color picker uses CSS classes that can be customized:
|
||||
|
||||
- `.color-picker-container` - Main container
|
||||
- `.color-picker-preview` - Color preview button
|
||||
- `.color-picker-panel` - Dropdown panel
|
||||
- `.color-picker-main` - Main color area
|
||||
- `.color-picker-hue` - Hue slider
|
||||
- `.color-picker-controls` - Controls section
|
||||
|
||||
### Custom Styling Example
|
||||
|
||||
```css
|
||||
.color-picker-preview {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.color-picker-panel {
|
||||
background: #2d3748;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
```
|
||||
|
||||
## Browser Compatibility
|
||||
|
||||
| Browser | Version | Status |
|
||||
|---------|---------|--------|
|
||||
| Chrome | 60+ | ✅ Full support |
|
||||
| Firefox | 55+ | ✅ Full support |
|
||||
| Safari | 12+ | ✅ Full support |
|
||||
| Edge | 79+ | ✅ Full support |
|
||||
| Opera | 47+ | ✅ Full support |
|
||||
| Mobile Safari | iOS 12+ | ✅ Full support |
|
||||
| Chrome Mobile | Android 7+ | ✅ Full support |
|
||||
|
||||
## Operating System Compatibility
|
||||
|
||||
- ✅ Windows 10/11
|
||||
- ✅ macOS 10.14+
|
||||
- ✅ Linux (all major distributions)
|
||||
- ✅ iOS 12+
|
||||
- ✅ Android 7+
|
||||
|
||||
## Color Format
|
||||
|
||||
The color picker uses **hex color format** (`#RRGGBB`):
|
||||
- Always returns uppercase hex strings (e.g., `#FF0000`)
|
||||
- Accepts both uppercase and lowercase input
|
||||
- Automatically validates hex format
|
||||
|
||||
## Integration with LED Driver Mockups
|
||||
|
||||
The color picker is integrated into:
|
||||
- `dashboard.html` - Color selection for patterns
|
||||
- `presets.html` - Color selection when creating/editing presets
|
||||
|
||||
### Example: Getting Colors from Multiple Pickers
|
||||
|
||||
```javascript
|
||||
const colorPickers = [];
|
||||
|
||||
function getSelectedColors() {
|
||||
return colorPickers.map(picker => picker.getColor());
|
||||
}
|
||||
|
||||
function sendColorsToDevice() {
|
||||
const colors = getSelectedColors();
|
||||
// Send to LED device via API
|
||||
fetch('/api/colors', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ colors: colors })
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## Performance
|
||||
|
||||
- Lightweight: ~14KB JavaScript, ~4KB CSS
|
||||
- Fast rendering: Uses Canvas API for color gradients
|
||||
- Smooth interactions: Optimized event handling
|
||||
- Memory efficient: No external dependencies
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Keyboard navigation support
|
||||
- ARIA labels on interactive elements
|
||||
- High contrast cursor indicators
|
||||
- Screen reader compatible
|
||||
|
||||
## License
|
||||
|
||||
Part of the LED Driver project. Use freely in your projects.
|
||||
|
||||
## Demo
|
||||
|
||||
See `color-picker-demo.html` for a live demonstration of the color picker component.
|
||||
|
||||
56
docs/mockups/README.md
Normal file
56
docs/mockups/README.md
Normal file
@@ -0,0 +1,56 @@
|
||||
# UI Mockups
|
||||
|
||||
This directory contains HTML mockups and generated images for the LED Driver user interface.
|
||||
|
||||
## Files
|
||||
|
||||
### HTML Mockups
|
||||
- **index.html** - Navigation page linking to all mockups
|
||||
- **dashboard.html** - Main control panel for managing LED patterns and devices
|
||||
- **pattern-selector.html** - Visual pattern selection interface
|
||||
- **device-management.html** - Device and group management interface
|
||||
- **settings.html** - Comprehensive settings configuration panel
|
||||
|
||||
### Generated Images
|
||||
Images are automatically generated in the `images/` directory:
|
||||
- `dashboard.png`
|
||||
- `pattern-selector.png`
|
||||
- `device-management.png`
|
||||
- `settings.png`
|
||||
- `index.png`
|
||||
|
||||
## Generating Images
|
||||
|
||||
To generate images from the HTML files, use the provided script:
|
||||
|
||||
```bash
|
||||
# Install dependencies (if not already installed)
|
||||
pipenv install playwright
|
||||
pipenv run playwright install chromium
|
||||
|
||||
# Generate images
|
||||
pipenv run python generate_images.py
|
||||
```
|
||||
|
||||
The script will:
|
||||
1. Check for available screenshot libraries (Playwright, Selenium, or html2image)
|
||||
2. Generate PNG images from all HTML files
|
||||
3. Save images to the `images/` directory
|
||||
|
||||
### Requirements
|
||||
|
||||
The script supports multiple screenshot libraries (in order of preference):
|
||||
1. **Playwright** (recommended) - `pip install playwright && playwright install chromium`
|
||||
2. **Selenium** - `pip install selenium` (requires ChromeDriver)
|
||||
3. **html2image** - `pip install html2image`
|
||||
|
||||
## Viewing Mockups
|
||||
|
||||
Simply open any HTML file in a web browser to view the mockup. Start with `index.html` for navigation to all mockups.
|
||||
|
||||
## Notes
|
||||
|
||||
- All mockups are responsive and work on desktop and mobile devices
|
||||
- The mockups use modern CSS with gradients and smooth animations
|
||||
- Interactive elements (buttons, sliders, etc.) are functional in the HTML but are mockups (no backend connection)
|
||||
|
||||
210
docs/mockups/color-picker-chromium-demo.html
Normal file
210
docs/mockups/color-picker-chromium-demo.html
Normal file
@@ -0,0 +1,210 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Chromium Color Picker Demo</title>
|
||||
<link rel="stylesheet" href="color-picker-chromium.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Roboto+Mono&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #202124;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #5f6368;
|
||||
margin-bottom: 32px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: 40px;
|
||||
padding: 24px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e8eaed;
|
||||
}
|
||||
|
||||
.demo-section h2 {
|
||||
color: #202124;
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.color-pickers {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.color-display {
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
font-family: 'Roboto Mono', 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
border: 1px solid #e8eaed;
|
||||
}
|
||||
|
||||
.color-display strong {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
.comparison {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.comparison-item {
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e8eaed;
|
||||
}
|
||||
|
||||
.comparison-item h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #202124;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Chromium-style Color Picker</h1>
|
||||
<p>Color picker that matches the native Chromium browser color picker design</p>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2>Single Color Picker</h2>
|
||||
<div class="color-pickers">
|
||||
<div id="picker1"></div>
|
||||
</div>
|
||||
<div class="color-display">
|
||||
Selected color: <strong id="color1-display">#FF0000</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2>Multiple Color Pickers</h2>
|
||||
<p style="margin-bottom: 16px; color: #5f6368; font-size: 14px;">Example: Multiple colors for LED patterns</p>
|
||||
<div class="color-pickers">
|
||||
<div id="picker2"></div>
|
||||
<div id="picker3"></div>
|
||||
<div id="picker4"></div>
|
||||
</div>
|
||||
<div class="color-display">
|
||||
Colors: <strong id="colors-display">#FF0000, #00FF00, #0000FF</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2>Features</h2>
|
||||
<ul style="color: #5f6368; line-height: 1.8; font-size: 14px;">
|
||||
<li>✅ Matches native Chromium browser color picker design</li>
|
||||
<li>✅ Clean, minimal interface with native system fonts</li>
|
||||
<li>✅ RGB number inputs (no sliders) - Chromium style</li>
|
||||
<li>✅ Hex input with uppercase formatting</li>
|
||||
<li>✅ HSB (Hue, Saturation, Brightness) color model</li>
|
||||
<li>✅ Touch support for mobile devices</li>
|
||||
<li>✅ Keyboard accessible</li>
|
||||
<li>✅ Dark mode support</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2>Design Notes</h2>
|
||||
<div class="comparison">
|
||||
<div class="comparison-item">
|
||||
<h3>Chromium Style</h3>
|
||||
<ul style="color: #5f6368; line-height: 1.8; font-size: 13px; list-style: none; padding-left: 0;">
|
||||
<li>• RGB number inputs only</li>
|
||||
<li>• Compact preview button</li>
|
||||
<li>• Native system fonts</li>
|
||||
<li>• Minimal borders and shadows</li>
|
||||
<li>• Chromium color scheme</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="comparison-item">
|
||||
<h3>Standard Style</h3>
|
||||
<ul style="color: #5f6368; line-height: 1.8; font-size: 13px; list-style: none; padding-left: 0;">
|
||||
<li>• RGB sliders + inputs</li>
|
||||
<li>• Larger preview button</li>
|
||||
<li>• Custom styling</li>
|
||||
<li>• Enhanced shadows</li>
|
||||
<li>• Custom color scheme</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="color-picker-chromium.js"></script>
|
||||
<script>
|
||||
// Initialize Chromium-style color pickers
|
||||
const picker1 = new ColorPickerChromium('#picker1', {
|
||||
initialColor: '#FF0000',
|
||||
onColorChange: (color) => {
|
||||
document.getElementById('color1-display').textContent = color;
|
||||
}
|
||||
});
|
||||
|
||||
const picker2 = new ColorPickerChromium('#picker2', {
|
||||
initialColor: '#FF0000',
|
||||
onColorChange: updateColors
|
||||
});
|
||||
|
||||
const picker3 = new ColorPickerChromium('#picker3', {
|
||||
initialColor: '#00FF00',
|
||||
onColorChange: updateColors
|
||||
});
|
||||
|
||||
const picker4 = new ColorPickerChromium('#picker4', {
|
||||
initialColor: '#0000FF',
|
||||
onColorChange: updateColors
|
||||
});
|
||||
|
||||
function updateColors() {
|
||||
const colors = [
|
||||
picker2.getColor(),
|
||||
picker3.getColor(),
|
||||
picker4.getColor()
|
||||
];
|
||||
document.getElementById('colors-display').textContent = colors.join(', ');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
253
docs/mockups/color-picker-chromium.css
Normal file
253
docs/mockups/color-picker-chromium.css
Normal file
@@ -0,0 +1,253 @@
|
||||
/* Chromium-style Color Picker - Matches native browser color picker dialog */
|
||||
|
||||
.color-picker-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Preview button - opens the picker */
|
||||
.color-picker-preview {
|
||||
width: 40px;
|
||||
height: 32px;
|
||||
border: 1px solid #d0d0d0;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
background: none;
|
||||
transition: border-color 0.15s;
|
||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.color-picker-preview:hover {
|
||||
border-color: #8ab4f8;
|
||||
}
|
||||
|
||||
.color-picker-preview:active {
|
||||
border-color: #4285f4;
|
||||
}
|
||||
|
||||
/* Main picker panel - always visible when open, styled like Chromium dialog */
|
||||
.color-picker-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
padding: 16px;
|
||||
min-width: 260px;
|
||||
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Color area - main saturation/brightness square + hue slider */
|
||||
.color-picker-area {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Main color square - saturation (left-right) and brightness (top-bottom) */
|
||||
.color-picker-main {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
cursor: crosshair;
|
||||
touch-action: none;
|
||||
background: #ffffff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.color-picker-canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
/* Cursor for main color area */
|
||||
.color-picker-cursor {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid #ffffff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Hue slider - vertical strip on the right */
|
||||
.color-picker-hue {
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 200px;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
touch-action: none;
|
||||
background: #ffffff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Hue slider cursor/indicator */
|
||||
.color-picker-hue-cursor {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
border: 2px solid #ffffff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
pointer-events: none;
|
||||
transform: translateY(-50%);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Controls section - hex and RGB inputs */
|
||||
.color-picker-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Hex input field */
|
||||
.color-picker-hex {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 4px;
|
||||
font-family: 'Roboto Mono', 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.color-picker-hex:focus {
|
||||
outline: none;
|
||||
border-color: #4285f4;
|
||||
box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
|
||||
}
|
||||
|
||||
/* RGB inputs container */
|
||||
.color-picker-rgb {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.color-picker-rgb-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.color-picker-rgb-item label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #5f6368;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* RGB number input fields */
|
||||
.color-picker-rgb-input {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid #dadce0;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
background: #ffffff;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.color-picker-rgb-input::-webkit-outer-spin-button,
|
||||
.color-picker-rgb-input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.color-picker-rgb-input:focus {
|
||||
outline: none;
|
||||
border-color: #4285f4;
|
||||
box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
|
||||
}
|
||||
|
||||
/* Hide RGB sliders - Chromium uses only number inputs */
|
||||
.color-picker-rgb-slider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 480px) {
|
||||
.color-picker-panel {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.color-picker-main {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.color-picker-hue {
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.color-picker-panel {
|
||||
background: #202124;
|
||||
border-color: #5f6368;
|
||||
}
|
||||
|
||||
.color-picker-preview {
|
||||
border-color: #5f6368;
|
||||
}
|
||||
|
||||
.color-picker-main,
|
||||
.color-picker-hue {
|
||||
border-color: #5f6368;
|
||||
background: #202124;
|
||||
}
|
||||
|
||||
.color-picker-hex,
|
||||
.color-picker-rgb-input {
|
||||
background: #303134;
|
||||
border-color: #5f6368;
|
||||
color: #e8eaed;
|
||||
}
|
||||
|
||||
.color-picker-rgb-item label {
|
||||
color: #9aa0a6;
|
||||
}
|
||||
|
||||
.color-picker-hex:focus,
|
||||
.color-picker-rgb-input:focus {
|
||||
border-color: #8ab4f8;
|
||||
box-shadow: 0 0 0 2px rgba(138, 180, 248, 0.2);
|
||||
}
|
||||
|
||||
.color-picker-preview:hover {
|
||||
border-color: #8ab4f8;
|
||||
}
|
||||
}
|
||||
452
docs/mockups/color-picker-chromium.js
Normal file
452
docs/mockups/color-picker-chromium.js
Normal file
@@ -0,0 +1,452 @@
|
||||
/**
|
||||
* Chromium-style Color Picker Component
|
||||
* Matches native Chromium browser color picker design
|
||||
*/
|
||||
|
||||
class ColorPickerChromium {
|
||||
constructor(container, options = {}) {
|
||||
this.container = typeof container === 'string' ? document.querySelector(container) : container;
|
||||
this.options = {
|
||||
initialColor: options.initialColor || '#FF0000',
|
||||
onColorChange: options.onColorChange || null,
|
||||
showHexInput: options.showHexInput !== false,
|
||||
...options
|
||||
};
|
||||
this.currentColor = this.options.initialColor;
|
||||
this.isOpen = false;
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.createPicker();
|
||||
this.setupEventListeners();
|
||||
this.updateColor(this.options.initialColor);
|
||||
}
|
||||
|
||||
createPicker() {
|
||||
this.container.innerHTML = '';
|
||||
this.container.className = 'color-picker-container';
|
||||
|
||||
// Color preview button
|
||||
this.previewBtn = document.createElement('button');
|
||||
this.previewBtn.className = 'color-picker-preview';
|
||||
this.previewBtn.type = 'button';
|
||||
this.previewBtn.style.backgroundColor = this.currentColor;
|
||||
this.previewBtn.setAttribute('aria-label', 'Open color picker');
|
||||
|
||||
// Dropdown panel
|
||||
this.panel = document.createElement('div');
|
||||
this.panel.className = 'color-picker-panel';
|
||||
this.panel.style.display = 'none';
|
||||
|
||||
// Main color area (hue/saturation)
|
||||
this.mainArea = document.createElement('div');
|
||||
this.mainArea.className = 'color-picker-main';
|
||||
this.mainCanvas = document.createElement('canvas');
|
||||
this.mainCanvas.width = 200;
|
||||
this.mainCanvas.height = 200;
|
||||
this.mainCanvas.className = 'color-picker-canvas';
|
||||
this.mainArea.appendChild(this.mainCanvas);
|
||||
|
||||
// Main area cursor
|
||||
this.mainCursor = document.createElement('div');
|
||||
this.mainCursor.className = 'color-picker-cursor';
|
||||
this.mainArea.appendChild(this.mainCursor);
|
||||
|
||||
// Hue slider
|
||||
this.hueArea = document.createElement('div');
|
||||
this.hueArea.className = 'color-picker-hue';
|
||||
this.hueCanvas = document.createElement('canvas');
|
||||
this.hueCanvas.width = 24;
|
||||
this.hueCanvas.height = 200;
|
||||
this.hueCanvas.className = 'color-picker-canvas';
|
||||
this.hueArea.appendChild(this.hueCanvas);
|
||||
|
||||
// Hue slider cursor
|
||||
this.hueCursor = document.createElement('div');
|
||||
this.hueCursor.className = 'color-picker-hue-cursor';
|
||||
this.hueArea.appendChild(this.hueCursor);
|
||||
|
||||
// Controls section
|
||||
this.controls = document.createElement('div');
|
||||
this.controls.className = 'color-picker-controls';
|
||||
|
||||
// Hex input
|
||||
if (this.options.showHexInput) {
|
||||
this.hexInput = document.createElement('input');
|
||||
this.hexInput.type = 'text';
|
||||
this.hexInput.className = 'color-picker-hex';
|
||||
this.hexInput.placeholder = '#000000';
|
||||
this.hexInput.maxLength = 7;
|
||||
this.controls.appendChild(this.hexInput);
|
||||
}
|
||||
|
||||
// RGB inputs (Chromium style - no sliders, just number inputs)
|
||||
this.rgbContainer = document.createElement('div');
|
||||
this.rgbContainer.className = 'color-picker-rgb';
|
||||
|
||||
['R', 'G', 'B'].forEach((label) => {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'color-picker-rgb-item';
|
||||
wrapper.dataset.channel = label.toLowerCase();
|
||||
|
||||
const labelEl = document.createElement('label');
|
||||
labelEl.textContent = label;
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = 'number';
|
||||
input.className = 'color-picker-rgb-input';
|
||||
input.min = 0;
|
||||
input.max = 255;
|
||||
input.value = 0;
|
||||
input.dataset.channel = label.toLowerCase();
|
||||
|
||||
wrapper.appendChild(labelEl);
|
||||
wrapper.appendChild(input);
|
||||
this.rgbContainer.appendChild(wrapper);
|
||||
|
||||
this[`rgb${label}`] = input;
|
||||
});
|
||||
|
||||
this.controls.appendChild(this.rgbContainer);
|
||||
|
||||
// Assemble panel
|
||||
const pickerArea = document.createElement('div');
|
||||
pickerArea.className = 'color-picker-area';
|
||||
pickerArea.appendChild(this.mainArea);
|
||||
pickerArea.appendChild(this.hueArea);
|
||||
|
||||
this.panel.appendChild(pickerArea);
|
||||
this.panel.appendChild(this.controls);
|
||||
|
||||
// Assemble container
|
||||
this.container.appendChild(this.previewBtn);
|
||||
this.container.appendChild(this.panel);
|
||||
|
||||
// Draw canvases
|
||||
this.drawHueCanvas();
|
||||
this.drawMainCanvas(1.0); // Start with full saturation
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Toggle panel
|
||||
this.previewBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
this.toggle();
|
||||
});
|
||||
|
||||
// Close on outside click
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!this.container.contains(e.target) && this.isOpen) {
|
||||
this.close();
|
||||
}
|
||||
});
|
||||
|
||||
// Main area interaction
|
||||
let isMainDragging = false;
|
||||
this.mainCanvas.addEventListener('mousedown', (e) => {
|
||||
isMainDragging = true;
|
||||
this.handleMainAreaClick(e);
|
||||
});
|
||||
this.mainCanvas.addEventListener('mousemove', (e) => {
|
||||
if (isMainDragging) {
|
||||
this.handleMainAreaClick(e);
|
||||
}
|
||||
});
|
||||
document.addEventListener('mouseup', () => {
|
||||
isMainDragging = false;
|
||||
});
|
||||
|
||||
// Touch support for main area
|
||||
this.mainCanvas.addEventListener('touchstart', (e) => {
|
||||
e.preventDefault();
|
||||
isMainDragging = true;
|
||||
this.handleMainAreaClick(e.touches[0]);
|
||||
});
|
||||
this.mainCanvas.addEventListener('touchmove', (e) => {
|
||||
e.preventDefault();
|
||||
if (isMainDragging) {
|
||||
this.handleMainAreaClick(e.touches[0]);
|
||||
}
|
||||
});
|
||||
this.mainCanvas.addEventListener('touchend', () => {
|
||||
isMainDragging = false;
|
||||
});
|
||||
|
||||
// Hue slider interaction
|
||||
let isHueDragging = false;
|
||||
this.hueCanvas.addEventListener('mousedown', (e) => {
|
||||
isHueDragging = true;
|
||||
this.handleHueClick(e);
|
||||
});
|
||||
this.hueCanvas.addEventListener('mousemove', (e) => {
|
||||
if (isHueDragging) {
|
||||
this.handleHueClick(e);
|
||||
}
|
||||
});
|
||||
document.addEventListener('mouseup', () => {
|
||||
isHueDragging = false;
|
||||
});
|
||||
|
||||
// Touch support for hue slider
|
||||
this.hueCanvas.addEventListener('touchstart', (e) => {
|
||||
e.preventDefault();
|
||||
isHueDragging = true;
|
||||
this.handleHueClick(e.touches[0]);
|
||||
});
|
||||
this.hueCanvas.addEventListener('touchmove', (e) => {
|
||||
e.preventDefault();
|
||||
if (isHueDragging) {
|
||||
this.handleHueClick(e.touches[0]);
|
||||
}
|
||||
});
|
||||
this.hueCanvas.addEventListener('touchend', () => {
|
||||
isHueDragging = false;
|
||||
});
|
||||
|
||||
// Hex input
|
||||
if (this.hexInput) {
|
||||
this.hexInput.addEventListener('input', (e) => {
|
||||
const value = e.target.value;
|
||||
if (/^#[0-9A-Fa-f]{6}$/.test(value)) {
|
||||
this.updateColor(value);
|
||||
}
|
||||
});
|
||||
this.hexInput.addEventListener('blur', (e) => {
|
||||
const value = e.target.value;
|
||||
if (!/^#[0-9A-Fa-f]{6}$/.test(value) && value.length > 0) {
|
||||
e.target.value = this.currentColor;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// RGB inputs (Chromium style - only number inputs)
|
||||
['R', 'G', 'B'].forEach(label => {
|
||||
this[`rgb${label}`].addEventListener('input', (e) => {
|
||||
let value = parseInt(e.target.value) || 0;
|
||||
value = Math.max(0, Math.min(255, value)); // Clamp to 0-255
|
||||
e.target.value = value;
|
||||
const r = parseInt(this.rgbR.value) || 0;
|
||||
const g = parseInt(this.rgbG.value) || 0;
|
||||
const b = parseInt(this.rgbB.value) || 0;
|
||||
const hex = this.rgbToHex(r, g, b);
|
||||
this.updateColor(hex, false); // Don't update RGB inputs to avoid loop
|
||||
});
|
||||
|
||||
this[`rgb${label}`].addEventListener('blur', (e) => {
|
||||
let value = parseInt(e.target.value) || 0;
|
||||
value = Math.max(0, Math.min(255, value));
|
||||
e.target.value = value;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
drawHueCanvas() {
|
||||
const ctx = this.hueCanvas.getContext('2d');
|
||||
const gradient = ctx.createLinearGradient(0, 0, 0, 200);
|
||||
|
||||
for (let i = 0; i <= 6; i++) {
|
||||
const hue = i * 60;
|
||||
gradient.addColorStop(i / 6, `hsl(${hue}, 100%, 50%)`);
|
||||
}
|
||||
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillRect(0, 0, 24, 200);
|
||||
}
|
||||
|
||||
drawMainCanvas(hue) {
|
||||
const ctx = this.mainCanvas.getContext('2d');
|
||||
|
||||
// Saturation gradient (left to right)
|
||||
const satGradient = ctx.createLinearGradient(0, 0, 200, 0);
|
||||
satGradient.addColorStop(0, `hsl(${hue}, 0%, 50%)`);
|
||||
satGradient.addColorStop(1, `hsl(${hue}, 100%, 50%)`);
|
||||
ctx.fillStyle = satGradient;
|
||||
ctx.fillRect(0, 0, 200, 200);
|
||||
|
||||
// Brightness gradient (top to bottom)
|
||||
const brightGradient = ctx.createLinearGradient(0, 0, 0, 200);
|
||||
brightGradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
|
||||
brightGradient.addColorStop(1, 'rgba(0, 0, 0, 1)');
|
||||
ctx.fillStyle = brightGradient;
|
||||
ctx.fillRect(0, 0, 200, 200);
|
||||
}
|
||||
|
||||
handleMainAreaClick(e) {
|
||||
const rect = this.mainCanvas.getBoundingClientRect();
|
||||
const x = Math.max(0, Math.min(200, e.clientX - rect.left));
|
||||
const y = Math.max(0, Math.min(200, e.clientY - rect.top));
|
||||
|
||||
const saturation = x / 200;
|
||||
const brightness = 1 - (y / 200);
|
||||
|
||||
this.updateColorFromHSB(this.hue, saturation, brightness);
|
||||
this.updateCursor(x, y);
|
||||
}
|
||||
|
||||
handleHueClick(e) {
|
||||
const rect = this.hueCanvas.getBoundingClientRect();
|
||||
const y = Math.max(0, Math.min(200, e.clientY - rect.top));
|
||||
const hue = (y / 200) * 360;
|
||||
|
||||
this.hue = hue;
|
||||
this.drawMainCanvas(hue);
|
||||
this.updateHueCursor(y);
|
||||
|
||||
// Recalculate color with new hue
|
||||
const rect2 = this.mainCanvas.getBoundingClientRect();
|
||||
const x = parseFloat(this.mainCursor.style.left) || 0;
|
||||
const y2 = parseFloat(this.mainCursor.style.top) || 0;
|
||||
const saturation = x / 200;
|
||||
const brightness = 1 - (y2 / 200);
|
||||
this.updateColorFromHSB(hue, saturation, brightness);
|
||||
}
|
||||
|
||||
updateColorFromHSB(h, s, v) {
|
||||
const rgb = this.hsbToRgb(h, s, v);
|
||||
const hex = this.rgbToHex(rgb.r, rgb.g, rgb.b);
|
||||
this.updateColor(hex);
|
||||
}
|
||||
|
||||
hsbToRgb(h, s, v) {
|
||||
h = h / 360;
|
||||
const i = Math.floor(h * 6);
|
||||
const f = h * 6 - i;
|
||||
const p = v * (1 - s);
|
||||
const q = v * (1 - f * s);
|
||||
const t = v * (1 - (1 - f) * s);
|
||||
|
||||
let r, g, b;
|
||||
switch (i % 6) {
|
||||
case 0: r = v; g = t; b = p; break;
|
||||
case 1: r = q; g = v; b = p; break;
|
||||
case 2: r = p; g = v; b = t; break;
|
||||
case 3: r = p; g = q; b = v; break;
|
||||
case 4: r = t; g = p; b = v; break;
|
||||
case 5: r = v; g = p; b = q; break;
|
||||
}
|
||||
|
||||
return {
|
||||
r: Math.round(r * 255),
|
||||
g: Math.round(g * 255),
|
||||
b: Math.round(b * 255)
|
||||
};
|
||||
}
|
||||
|
||||
rgbToHex(r, g, b) {
|
||||
return '#' + [r, g, b].map(x => {
|
||||
const hex = x.toString(16);
|
||||
return hex.length === 1 ? '0' + hex : hex;
|
||||
}).join('').toUpperCase();
|
||||
}
|
||||
|
||||
hexToRgb(hex) {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
||||
rgbToHsb(r, g, b) {
|
||||
r /= 255;
|
||||
g /= 255;
|
||||
b /= 255;
|
||||
|
||||
const max = Math.max(r, g, b);
|
||||
const min = Math.min(r, g, b);
|
||||
const diff = max - min;
|
||||
|
||||
let h = 0;
|
||||
if (diff !== 0) {
|
||||
if (max === r) {
|
||||
h = ((g - b) / diff) % 6) * 60;
|
||||
} else if (max === g) {
|
||||
h = ((b - r) / diff + 2) * 60;
|
||||
} else {
|
||||
h = ((r - g) / diff + 4) * 60;
|
||||
}
|
||||
}
|
||||
if (h < 0) h += 360;
|
||||
|
||||
const s = max === 0 ? 0 : diff / max;
|
||||
const v = max;
|
||||
|
||||
return { h, s, v };
|
||||
}
|
||||
|
||||
updateColor(hex, updateInputs = true) {
|
||||
this.currentColor = hex.toUpperCase();
|
||||
this.previewBtn.style.backgroundColor = this.currentColor;
|
||||
|
||||
const rgb = this.hexToRgb(this.currentColor);
|
||||
if (!rgb) return;
|
||||
|
||||
const hsb = this.rgbToHsb(rgb.r, rgb.g, rgb.b);
|
||||
this.hue = hsb.h;
|
||||
|
||||
// Update main canvas
|
||||
this.drawMainCanvas(this.hue);
|
||||
|
||||
// Update cursors
|
||||
const x = hsb.s * 200;
|
||||
const y = (1 - hsb.v) * 200;
|
||||
this.updateCursor(x, y);
|
||||
this.updateHueCursor((this.hue / 360) * 200);
|
||||
|
||||
// Update inputs
|
||||
if (updateInputs) {
|
||||
if (this.hexInput) {
|
||||
this.hexInput.value = this.currentColor;
|
||||
}
|
||||
if (this.rgbR) {
|
||||
this.rgbR.value = rgb.r;
|
||||
this.rgbG.value = rgb.g;
|
||||
this.rgbB.value = rgb.b;
|
||||
}
|
||||
}
|
||||
|
||||
// Callback
|
||||
if (this.options.onColorChange) {
|
||||
this.options.onColorChange(this.currentColor);
|
||||
}
|
||||
}
|
||||
|
||||
updateCursor(x, y) {
|
||||
this.mainCursor.style.left = `${x}px`;
|
||||
this.mainCursor.style.top = `${y}px`;
|
||||
}
|
||||
|
||||
updateHueCursor(y) {
|
||||
this.hueCursor.style.top = `${y}px`;
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.isOpen ? this.close() : this.open();
|
||||
}
|
||||
|
||||
open() {
|
||||
this.panel.style.display = 'block';
|
||||
this.isOpen = true;
|
||||
}
|
||||
|
||||
close() {
|
||||
this.panel.style.display = 'none';
|
||||
this.isOpen = false;
|
||||
}
|
||||
|
||||
getColor() {
|
||||
return this.currentColor;
|
||||
}
|
||||
|
||||
setColor(color) {
|
||||
this.updateColor(color);
|
||||
}
|
||||
}
|
||||
|
||||
// Export for use in other scripts
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = ColorPickerChromium;
|
||||
}
|
||||
|
||||
153
docs/mockups/color-picker-demo.html
Normal file
153
docs/mockups/color-picker-demo.html
Normal file
@@ -0,0 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Color Picker Demo - Cross-Platform</title>
|
||||
<link rel="stylesheet" href="color-picker.css">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #667eea;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: 40px;
|
||||
padding: 24px;
|
||||
background: #f7fafc;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.demo-section h2 {
|
||||
color: #333;
|
||||
margin-bottom: 16px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.color-pickers {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.color-display {
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.color-display strong {
|
||||
color: #667eea;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Custom Color Picker</h1>
|
||||
<p>Consistent color picker that works the same across all operating systems and browsers</p>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2>Single Color Picker</h2>
|
||||
<div class="color-pickers">
|
||||
<div id="picker1"></div>
|
||||
</div>
|
||||
<div class="color-display">
|
||||
Selected color: <strong id="color1-display">#FF0000</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2>Multiple Color Pickers</h2>
|
||||
<p style="margin-bottom: 16px;">Example: Multiple colors for LED patterns</p>
|
||||
<div class="color-pickers">
|
||||
<div id="picker2"></div>
|
||||
<div id="picker3"></div>
|
||||
<div id="picker4"></div>
|
||||
</div>
|
||||
<div class="color-display">
|
||||
Colors: <strong id="colors-display">#FF0000, #00FF00, #0000FF</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h2>Features</h2>
|
||||
<ul style="color: #666; line-height: 1.8;">
|
||||
<li>✅ Consistent UI across Windows, macOS, Linux, iOS, Android</li>
|
||||
<li>✅ Works in Chrome, Firefox, Safari, Edge, Opera</li>
|
||||
<li>✅ Touch support for mobile devices</li>
|
||||
<li>✅ HSB (Hue, Saturation, Brightness) color model</li>
|
||||
<li>✅ Hex and RGB input support</li>
|
||||
<li>✅ Keyboard accessible</li>
|
||||
<li>✅ Customizable styling</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="color-picker.js"></script>
|
||||
<script>
|
||||
// Initialize color pickers
|
||||
const picker1 = new ColorPicker('#picker1', {
|
||||
initialColor: '#FF0000',
|
||||
onColorChange: (color) => {
|
||||
document.getElementById('color1-display').textContent = color;
|
||||
}
|
||||
});
|
||||
|
||||
const picker2 = new ColorPicker('#picker2', {
|
||||
initialColor: '#FF0000',
|
||||
onColorChange: updateColors
|
||||
});
|
||||
|
||||
const picker3 = new ColorPicker('#picker3', {
|
||||
initialColor: '#00FF00',
|
||||
onColorChange: updateColors
|
||||
});
|
||||
|
||||
const picker4 = new ColorPicker('#picker4', {
|
||||
initialColor: '#0000FF',
|
||||
onColorChange: updateColors
|
||||
});
|
||||
|
||||
function updateColors() {
|
||||
const colors = [
|
||||
picker2.getColor(),
|
||||
picker3.getColor(),
|
||||
picker4.getColor()
|
||||
];
|
||||
document.getElementById('colors-display').textContent = colors.join(', ');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
282
docs/mockups/color-picker.css
Normal file
282
docs/mockups/color-picker.css
Normal file
@@ -0,0 +1,282 @@
|
||||
/* Color Picker Styles - Consistent across all browsers and OS */
|
||||
|
||||
.color-picker-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.color-picker-preview {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
background: none;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.color-picker-preview:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.color-picker-preview:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.color-picker-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
background: white;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||
padding: 16px;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.color-picker-area {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.color-picker-main {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: crosshair;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.color-picker-canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
.color-picker-cursor {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.color-picker-hue {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 200px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.color-picker-hue-cursor {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
border: 2px solid white;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
|
||||
pointer-events: none;
|
||||
transform: translateY(-50%);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.color-picker-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.color-picker-hex {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.color-picker-hex:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.color-picker-rgb {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.color-picker-rgb-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.color-picker-rgb-item label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.color-picker-rgb-slider {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: #e0e0e0;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color-picker-rgb-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #667eea;
|
||||
cursor: pointer;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.color-picker-rgb-slider::-webkit-slider-thumb:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.color-picker-rgb-slider::-moz-range-thumb {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #667eea;
|
||||
cursor: pointer;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.color-picker-rgb-slider::-moz-range-thumb:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
/* Color-specific slider backgrounds */
|
||||
.color-picker-rgb-item[data-channel="r"] .color-picker-rgb-slider {
|
||||
background: linear-gradient(to right, #000000, #ff0000);
|
||||
}
|
||||
|
||||
.color-picker-rgb-item[data-channel="g"] .color-picker-rgb-slider {
|
||||
background: linear-gradient(to right, #000000, #00ff00);
|
||||
}
|
||||
|
||||
.color-picker-rgb-item[data-channel="b"] .color-picker-rgb-slider {
|
||||
background: linear-gradient(to right, #000000, #0000ff);
|
||||
}
|
||||
|
||||
.color-picker-rgb-input {
|
||||
width: 100%;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
transition: border-color 0.2s;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.color-picker-rgb-input::-webkit-outer-spin-button,
|
||||
.color-picker-rgb-input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.color-picker-rgb-input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 480px) {
|
||||
.color-picker-panel {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.color-picker-main {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.color-picker-hue {
|
||||
height: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode support (optional) */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.color-picker-panel {
|
||||
background: #2d3748;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
.color-picker-preview {
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
.color-picker-main,
|
||||
.color-picker-hue {
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
.color-picker-hex,
|
||||
.color-picker-rgb-input {
|
||||
background: #1a202c;
|
||||
border-color: #4a5568;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.color-picker-rgb-item label {
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
.color-picker-rgb-slider {
|
||||
background: #4a5568 !important;
|
||||
}
|
||||
|
||||
.color-picker-rgb-slider::-webkit-slider-thumb,
|
||||
.color-picker-rgb-slider::-moz-range-thumb {
|
||||
background: #667eea;
|
||||
border-color: #2d3748;
|
||||
}
|
||||
}
|
||||
|
||||
474
docs/mockups/color-picker.js
Normal file
474
docs/mockups/color-picker.js
Normal file
@@ -0,0 +1,474 @@
|
||||
/**
|
||||
* Custom Color Picker Component
|
||||
* Consistent across all operating systems and browsers
|
||||
*/
|
||||
|
||||
class ColorPicker {
|
||||
constructor(container, options = {}) {
|
||||
this.container = typeof container === 'string' ? document.querySelector(container) : container;
|
||||
this.options = {
|
||||
initialColor: options.initialColor || '#FF0000',
|
||||
onColorChange: options.onColorChange || null,
|
||||
showHexInput: options.showHexInput !== false,
|
||||
...options
|
||||
};
|
||||
this.currentColor = this.options.initialColor;
|
||||
this.isOpen = false;
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.createPicker();
|
||||
this.setupEventListeners();
|
||||
this.updateColor(this.options.initialColor);
|
||||
}
|
||||
|
||||
createPicker() {
|
||||
this.container.innerHTML = '';
|
||||
this.container.className = 'color-picker-container';
|
||||
|
||||
// Color preview button
|
||||
this.previewBtn = document.createElement('button');
|
||||
this.previewBtn.className = 'color-picker-preview';
|
||||
this.previewBtn.type = 'button';
|
||||
this.previewBtn.style.backgroundColor = this.currentColor;
|
||||
this.previewBtn.setAttribute('aria-label', 'Open color picker');
|
||||
|
||||
// Dropdown panel
|
||||
this.panel = document.createElement('div');
|
||||
this.panel.className = 'color-picker-panel';
|
||||
this.panel.style.display = 'none';
|
||||
|
||||
// Main color area (hue/saturation)
|
||||
this.mainArea = document.createElement('div');
|
||||
this.mainArea.className = 'color-picker-main';
|
||||
this.mainCanvas = document.createElement('canvas');
|
||||
this.mainCanvas.width = 200;
|
||||
this.mainCanvas.height = 200;
|
||||
this.mainCanvas.className = 'color-picker-canvas';
|
||||
this.mainArea.appendChild(this.mainCanvas);
|
||||
|
||||
// Main area cursor
|
||||
this.mainCursor = document.createElement('div');
|
||||
this.mainCursor.className = 'color-picker-cursor';
|
||||
this.mainArea.appendChild(this.mainCursor);
|
||||
|
||||
// Hue slider
|
||||
this.hueArea = document.createElement('div');
|
||||
this.hueArea.className = 'color-picker-hue';
|
||||
this.hueCanvas = document.createElement('canvas');
|
||||
this.hueCanvas.width = 20;
|
||||
this.hueCanvas.height = 200;
|
||||
this.hueCanvas.className = 'color-picker-canvas';
|
||||
this.hueArea.appendChild(this.hueCanvas);
|
||||
|
||||
// Hue slider cursor
|
||||
this.hueCursor = document.createElement('div');
|
||||
this.hueCursor.className = 'color-picker-hue-cursor';
|
||||
this.hueArea.appendChild(this.hueCursor);
|
||||
|
||||
// Controls section
|
||||
this.controls = document.createElement('div');
|
||||
this.controls.className = 'color-picker-controls';
|
||||
|
||||
// Hex input
|
||||
if (this.options.showHexInput) {
|
||||
this.hexInput = document.createElement('input');
|
||||
this.hexInput.type = 'text';
|
||||
this.hexInput.className = 'color-picker-hex';
|
||||
this.hexInput.placeholder = '#000000';
|
||||
this.hexInput.maxLength = 7;
|
||||
this.controls.appendChild(this.hexInput);
|
||||
}
|
||||
|
||||
// RGB inputs and sliders
|
||||
this.rgbContainer = document.createElement('div');
|
||||
this.rgbContainer.className = 'color-picker-rgb';
|
||||
|
||||
['R', 'G', 'B'].forEach((label, index) => {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'color-picker-rgb-item';
|
||||
wrapper.dataset.channel = label.toLowerCase();
|
||||
|
||||
const labelEl = document.createElement('label');
|
||||
labelEl.textContent = label;
|
||||
|
||||
const slider = document.createElement('input');
|
||||
slider.type = 'range';
|
||||
slider.className = 'color-picker-rgb-slider';
|
||||
slider.min = 0;
|
||||
slider.max = 255;
|
||||
slider.value = 0;
|
||||
slider.dataset.channel = label.toLowerCase();
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = 'number';
|
||||
input.className = 'color-picker-rgb-input';
|
||||
input.min = 0;
|
||||
input.max = 255;
|
||||
input.value = 0;
|
||||
input.dataset.channel = label.toLowerCase();
|
||||
|
||||
wrapper.appendChild(labelEl);
|
||||
wrapper.appendChild(slider);
|
||||
wrapper.appendChild(input);
|
||||
this.rgbContainer.appendChild(wrapper);
|
||||
|
||||
this[`rgb${label}Slider`] = slider;
|
||||
this[`rgb${label}`] = input;
|
||||
});
|
||||
|
||||
this.controls.appendChild(this.rgbContainer);
|
||||
|
||||
// Assemble panel
|
||||
const pickerArea = document.createElement('div');
|
||||
pickerArea.className = 'color-picker-area';
|
||||
pickerArea.appendChild(this.mainArea);
|
||||
pickerArea.appendChild(this.hueArea);
|
||||
|
||||
this.panel.appendChild(pickerArea);
|
||||
this.panel.appendChild(this.controls);
|
||||
|
||||
// Assemble container
|
||||
this.container.appendChild(this.previewBtn);
|
||||
this.container.appendChild(this.panel);
|
||||
|
||||
// Draw canvases
|
||||
this.drawHueCanvas();
|
||||
this.drawMainCanvas(1.0); // Start with full saturation
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Toggle panel
|
||||
this.previewBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
this.toggle();
|
||||
});
|
||||
|
||||
// Close on outside click
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!this.container.contains(e.target) && this.isOpen) {
|
||||
this.close();
|
||||
}
|
||||
});
|
||||
|
||||
// Main area interaction
|
||||
let isMainDragging = false;
|
||||
this.mainCanvas.addEventListener('mousedown', (e) => {
|
||||
isMainDragging = true;
|
||||
this.handleMainAreaClick(e);
|
||||
});
|
||||
this.mainCanvas.addEventListener('mousemove', (e) => {
|
||||
if (isMainDragging) {
|
||||
this.handleMainAreaClick(e);
|
||||
}
|
||||
});
|
||||
document.addEventListener('mouseup', () => {
|
||||
isMainDragging = false;
|
||||
});
|
||||
|
||||
// Touch support for main area
|
||||
this.mainCanvas.addEventListener('touchstart', (e) => {
|
||||
e.preventDefault();
|
||||
isMainDragging = true;
|
||||
this.handleMainAreaClick(e.touches[0]);
|
||||
});
|
||||
this.mainCanvas.addEventListener('touchmove', (e) => {
|
||||
e.preventDefault();
|
||||
if (isMainDragging) {
|
||||
this.handleMainAreaClick(e.touches[0]);
|
||||
}
|
||||
});
|
||||
this.mainCanvas.addEventListener('touchend', () => {
|
||||
isMainDragging = false;
|
||||
});
|
||||
|
||||
// Hue slider interaction
|
||||
let isHueDragging = false;
|
||||
this.hueCanvas.addEventListener('mousedown', (e) => {
|
||||
isHueDragging = true;
|
||||
this.handleHueClick(e);
|
||||
});
|
||||
this.hueCanvas.addEventListener('mousemove', (e) => {
|
||||
if (isHueDragging) {
|
||||
this.handleHueClick(e);
|
||||
}
|
||||
});
|
||||
document.addEventListener('mouseup', () => {
|
||||
isHueDragging = false;
|
||||
});
|
||||
|
||||
// Touch support for hue slider
|
||||
this.hueCanvas.addEventListener('touchstart', (e) => {
|
||||
e.preventDefault();
|
||||
isHueDragging = true;
|
||||
this.handleHueClick(e.touches[0]);
|
||||
});
|
||||
this.hueCanvas.addEventListener('touchmove', (e) => {
|
||||
e.preventDefault();
|
||||
if (isHueDragging) {
|
||||
this.handleHueClick(e.touches[0]);
|
||||
}
|
||||
});
|
||||
this.hueCanvas.addEventListener('touchend', () => {
|
||||
isHueDragging = false;
|
||||
});
|
||||
|
||||
// Hex input
|
||||
if (this.hexInput) {
|
||||
this.hexInput.addEventListener('input', (e) => {
|
||||
const value = e.target.value;
|
||||
if (/^#[0-9A-Fa-f]{6}$/.test(value)) {
|
||||
this.updateColor(value);
|
||||
}
|
||||
});
|
||||
this.hexInput.addEventListener('blur', (e) => {
|
||||
const value = e.target.value;
|
||||
if (!/^#[0-9A-Fa-f]{6}$/.test(value) && value.length > 0) {
|
||||
e.target.value = this.currentColor;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// RGB inputs and sliders
|
||||
['R', 'G', 'B'].forEach(label => {
|
||||
// Slider change
|
||||
this[`rgb${label}Slider`].addEventListener('input', (e) => {
|
||||
const value = parseInt(e.target.value) || 0;
|
||||
this[`rgb${label}`].value = value;
|
||||
const r = parseInt(this.rgbR.value) || 0;
|
||||
const g = parseInt(this.rgbG.value) || 0;
|
||||
const b = parseInt(this.rgbB.value) || 0;
|
||||
const hex = this.rgbToHex(r, g, b);
|
||||
this.updateColor(hex, false); // Don't update RGB inputs/sliders to avoid loop
|
||||
});
|
||||
|
||||
// Input change
|
||||
this[`rgb${label}`].addEventListener('input', (e) => {
|
||||
let value = parseInt(e.target.value) || 0;
|
||||
value = Math.max(0, Math.min(255, value)); // Clamp to 0-255
|
||||
e.target.value = value;
|
||||
this[`rgb${label}Slider`].value = value;
|
||||
const r = parseInt(this.rgbR.value) || 0;
|
||||
const g = parseInt(this.rgbG.value) || 0;
|
||||
const b = parseInt(this.rgbB.value) || 0;
|
||||
const hex = this.rgbToHex(r, g, b);
|
||||
this.updateColor(hex, false); // Don't update RGB inputs/sliders to avoid loop
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
drawHueCanvas() {
|
||||
const ctx = this.hueCanvas.getContext('2d');
|
||||
const gradient = ctx.createLinearGradient(0, 0, 0, 200);
|
||||
|
||||
for (let i = 0; i <= 6; i++) {
|
||||
const hue = i * 60;
|
||||
gradient.addColorStop(i / 6, `hsl(${hue}, 100%, 50%)`);
|
||||
}
|
||||
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillRect(0, 0, 20, 200);
|
||||
}
|
||||
|
||||
drawMainCanvas(hue) {
|
||||
const ctx = this.mainCanvas.getContext('2d');
|
||||
|
||||
// Saturation gradient (left to right)
|
||||
const satGradient = ctx.createLinearGradient(0, 0, 200, 0);
|
||||
satGradient.addColorStop(0, `hsl(${hue}, 0%, 50%)`);
|
||||
satGradient.addColorStop(1, `hsl(${hue}, 100%, 50%)`);
|
||||
ctx.fillStyle = satGradient;
|
||||
ctx.fillRect(0, 0, 200, 200);
|
||||
|
||||
// Brightness gradient (top to bottom)
|
||||
const brightGradient = ctx.createLinearGradient(0, 0, 0, 200);
|
||||
brightGradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
|
||||
brightGradient.addColorStop(1, 'rgba(0, 0, 0, 1)');
|
||||
ctx.fillStyle = brightGradient;
|
||||
ctx.fillRect(0, 0, 200, 200);
|
||||
}
|
||||
|
||||
handleMainAreaClick(e) {
|
||||
const rect = this.mainCanvas.getBoundingClientRect();
|
||||
const x = Math.max(0, Math.min(200, e.clientX - rect.left));
|
||||
const y = Math.max(0, Math.min(200, e.clientY - rect.top));
|
||||
|
||||
const saturation = x / 200;
|
||||
const brightness = 1 - (y / 200);
|
||||
|
||||
this.updateColorFromHSB(this.hue, saturation, brightness);
|
||||
this.updateCursor(x, y);
|
||||
}
|
||||
|
||||
handleHueClick(e) {
|
||||
const rect = this.hueCanvas.getBoundingClientRect();
|
||||
const y = Math.max(0, Math.min(200, e.clientY - rect.top));
|
||||
const hue = (y / 200) * 360;
|
||||
|
||||
this.hue = hue;
|
||||
this.drawMainCanvas(hue);
|
||||
this.updateHueCursor(y);
|
||||
|
||||
// Recalculate color with new hue
|
||||
const rect2 = this.mainCanvas.getBoundingClientRect();
|
||||
const x = parseFloat(this.mainCursor.style.left) || 0;
|
||||
const y2 = parseFloat(this.mainCursor.style.top) || 0;
|
||||
const saturation = x / 200;
|
||||
const brightness = 1 - (y2 / 200);
|
||||
this.updateColorFromHSB(hue, saturation, brightness);
|
||||
}
|
||||
|
||||
updateColorFromHSB(h, s, v) {
|
||||
const rgb = this.hsbToRgb(h, s, v);
|
||||
const hex = this.rgbToHex(rgb.r, rgb.g, rgb.b);
|
||||
this.updateColor(hex);
|
||||
}
|
||||
|
||||
hsbToRgb(h, s, v) {
|
||||
h = h / 360;
|
||||
const i = Math.floor(h * 6);
|
||||
const f = h * 6 - i;
|
||||
const p = v * (1 - s);
|
||||
const q = v * (1 - f * s);
|
||||
const t = v * (1 - (1 - f) * s);
|
||||
|
||||
let r, g, b;
|
||||
switch (i % 6) {
|
||||
case 0: r = v; g = t; b = p; break;
|
||||
case 1: r = q; g = v; b = p; break;
|
||||
case 2: r = p; g = v; b = t; break;
|
||||
case 3: r = p; g = q; b = v; break;
|
||||
case 4: r = t; g = p; b = v; break;
|
||||
case 5: r = v; g = p; b = q; break;
|
||||
}
|
||||
|
||||
return {
|
||||
r: Math.round(r * 255),
|
||||
g: Math.round(g * 255),
|
||||
b: Math.round(b * 255)
|
||||
};
|
||||
}
|
||||
|
||||
rgbToHex(r, g, b) {
|
||||
return '#' + [r, g, b].map(x => {
|
||||
const hex = x.toString(16);
|
||||
return hex.length === 1 ? '0' + hex : hex;
|
||||
}).join('').toUpperCase();
|
||||
}
|
||||
|
||||
hexToRgb(hex) {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
||||
rgbToHsb(r, g, b) {
|
||||
r /= 255;
|
||||
g /= 255;
|
||||
b /= 255;
|
||||
|
||||
const max = Math.max(r, g, b);
|
||||
const min = Math.min(r, g, b);
|
||||
const diff = max - min;
|
||||
|
||||
let h = 0;
|
||||
if (diff !== 0) {
|
||||
if (max === r) {
|
||||
h = ((g - b) / diff) % 6) * 60;
|
||||
} else if (max === g) {
|
||||
h = ((b - r) / diff + 2) * 60;
|
||||
} else {
|
||||
h = ((r - g) / diff + 4) * 60;
|
||||
}
|
||||
}
|
||||
if (h < 0) h += 360;
|
||||
|
||||
const s = max === 0 ? 0 : diff / max;
|
||||
const v = max;
|
||||
|
||||
return { h, s, v };
|
||||
}
|
||||
|
||||
updateColor(hex, updateInputs = true) {
|
||||
this.currentColor = hex.toUpperCase();
|
||||
this.previewBtn.style.backgroundColor = this.currentColor;
|
||||
|
||||
const rgb = this.hexToRgb(this.currentColor);
|
||||
if (!rgb) return;
|
||||
|
||||
const hsb = this.rgbToHsb(rgb.r, rgb.g, rgb.b);
|
||||
this.hue = hsb.h;
|
||||
|
||||
// Update main canvas
|
||||
this.drawMainCanvas(this.hue);
|
||||
|
||||
// Update cursors
|
||||
const x = hsb.s * 200;
|
||||
const y = (1 - hsb.v) * 200;
|
||||
this.updateCursor(x, y);
|
||||
this.updateHueCursor((this.hue / 360) * 200);
|
||||
|
||||
// Update inputs
|
||||
if (updateInputs) {
|
||||
if (this.hexInput) {
|
||||
this.hexInput.value = this.currentColor;
|
||||
}
|
||||
if (this.rgbR) {
|
||||
this.rgbR.value = rgb.r;
|
||||
this.rgbG.value = rgb.g;
|
||||
this.rgbB.value = rgb.b;
|
||||
}
|
||||
if (this.rgbRSlider) {
|
||||
this.rgbRSlider.value = rgb.r;
|
||||
this.rgbGSlider.value = rgb.g;
|
||||
this.rgbBSlider.value = rgb.b;
|
||||
}
|
||||
}
|
||||
|
||||
// Callback
|
||||
if (this.options.onColorChange) {
|
||||
this.options.onColorChange(this.currentColor);
|
||||
}
|
||||
}
|
||||
|
||||
updateCursor(x, y) {
|
||||
this.mainCursor.style.left = `${x}px`;
|
||||
this.mainCursor.style.top = `${y}px`;
|
||||
}
|
||||
|
||||
updateHueCursor(y) {
|
||||
this.hueCursor.style.top = `${y}px`;
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.isOpen ? this.close() : this.open();
|
||||
}
|
||||
|
||||
open() {
|
||||
this.panel.style.display = 'block';
|
||||
this.isOpen = true;
|
||||
}
|
||||
|
||||
close() {
|
||||
this.panel.style.display = 'none';
|
||||
this.isOpen = false;
|
||||
}
|
||||
|
||||
getColor() {
|
||||
return this.currentColor;
|
||||
}
|
||||
|
||||
setColor(color) {
|
||||
this.updateColor(color);
|
||||
}
|
||||
}
|
||||
|
||||
// Export for use in other scripts
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = ColorPicker;
|
||||
}
|
||||
|
||||
359
docs/mockups/dashboard.html
Normal file
359
docs/mockups/dashboard.html
Normal file
@@ -0,0 +1,359 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LED Driver - Dashboard</title>
|
||||
<link rel="stylesheet" href="color-picker.css">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
color: #667eea;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
color: #667eea;
|
||||
margin-bottom: 16px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.pattern-selector {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.pattern-btn {
|
||||
padding: 16px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pattern-btn:hover {
|
||||
border-color: #667eea;
|
||||
background: #f0f0ff;
|
||||
}
|
||||
|
||||
.pattern-btn.active {
|
||||
border-color: #667eea;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.slider-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.slider-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: #e0e0e0;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #667eea;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #667eea;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.value-display {
|
||||
display: inline-block;
|
||||
margin-left: 12px;
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.color-picker-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.color-picker-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5568d3;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #e0e0e0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
.device-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.device-item {
|
||||
padding: 12px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.device-status {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #4caf50;
|
||||
}
|
||||
|
||||
.device-status.offline {
|
||||
background: #f44336;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn-full {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>LED Driver Control Panel</h1>
|
||||
<p>Manage your LED devices and patterns</p>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<!-- Pattern Selection -->
|
||||
<div class="card">
|
||||
<h2>Pattern Selection</h2>
|
||||
<div class="pattern-selector">
|
||||
<div class="pattern-btn active">On</div>
|
||||
<div class="pattern-btn">Off</div>
|
||||
<div class="pattern-btn">Blink</div>
|
||||
<div class="pattern-btn">Chase</div>
|
||||
<div class="pattern-btn">Circle</div>
|
||||
<div class="pattern-btn">Pulse</div>
|
||||
<div class="pattern-btn">Rainbow</div>
|
||||
<div class="pattern-btn">Transition</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Brightness & Speed -->
|
||||
<div class="card">
|
||||
<h2>Brightness & Speed</h2>
|
||||
<div class="slider-group">
|
||||
<label>
|
||||
Brightness
|
||||
<span class="value-display" id="brightness-value">100</span>%
|
||||
</label>
|
||||
<input type="range" class="slider" id="brightness" min="0" max="100" value="100">
|
||||
</div>
|
||||
<div class="slider-group">
|
||||
<label>
|
||||
Delay
|
||||
<span class="value-display" id="delay-value">100</span>ms
|
||||
</label>
|
||||
<input type="range" class="slider" id="delay" min="10" max="1000" value="100" step="10">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Color Selection -->
|
||||
<div class="card">
|
||||
<h2>Colors</h2>
|
||||
<div class="color-picker-group">
|
||||
<input type="color" class="color-input" value="#000000">
|
||||
<input type="color" class="color-input" value="#FF0000">
|
||||
<input type="color" class="color-input" value="#00FF00">
|
||||
<input type="color" class="color-input" value="#0000FF">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn btn-secondary btn-full">Add Color</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Device Status -->
|
||||
<div class="card">
|
||||
<h2>Connected Devices</h2>
|
||||
<ul class="device-list">
|
||||
<li class="device-item">
|
||||
<div>
|
||||
<strong>led-device1</strong>
|
||||
<div style="font-size: 0.875rem; color: #666;">Group: group1</div>
|
||||
</div>
|
||||
<div class="device-status"></div>
|
||||
</li>
|
||||
<li class="device-item">
|
||||
<div>
|
||||
<strong>led-device2</strong>
|
||||
<div style="font-size: 0.875rem; color: #666;">Group: group2</div>
|
||||
</div>
|
||||
<div class="device-status"></div>
|
||||
</li>
|
||||
<li class="device-item">
|
||||
<div>
|
||||
<strong>led-device3</strong>
|
||||
<div style="font-size: 0.875rem; color: #666;">No group</div>
|
||||
</div>
|
||||
<div class="device-status offline"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="card">
|
||||
<div class="actions">
|
||||
<button class="btn btn-primary btn-full">Apply Settings</button>
|
||||
<button class="btn btn-secondary btn-full">Save to Device</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Brightness slider
|
||||
document.getElementById('brightness').addEventListener('input', function(e) {
|
||||
document.getElementById('brightness-value').textContent = e.target.value;
|
||||
});
|
||||
|
||||
// Delay slider
|
||||
document.getElementById('delay').addEventListener('input', function(e) {
|
||||
document.getElementById('delay-value').textContent = e.target.value;
|
||||
});
|
||||
|
||||
// Pattern selection
|
||||
document.querySelectorAll('.pattern-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
document.querySelectorAll('.pattern-btn').forEach(b => b.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize color pickers
|
||||
const colorPickers = [];
|
||||
const initialColors = ['#000000', '#FF0000'];
|
||||
|
||||
function addColorPicker(color = '#000000') {
|
||||
const container = document.createElement('div');
|
||||
container.className = 'color-picker-wrapper';
|
||||
document.getElementById('color-pickers').appendChild(container);
|
||||
|
||||
const picker = new ColorPicker(container, {
|
||||
initialColor: color,
|
||||
onColorChange: (newColor) => {
|
||||
console.log('Color changed:', newColor);
|
||||
// Update device colors
|
||||
}
|
||||
});
|
||||
|
||||
colorPickers.push(picker);
|
||||
return picker;
|
||||
}
|
||||
|
||||
// Add initial color pickers
|
||||
initialColors.forEach(color => addColorPicker(color));
|
||||
</script>
|
||||
<script src="color-picker.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
418
docs/mockups/device-management.html
Normal file
418
docs/mockups/device-management.html
Normal file
@@ -0,0 +1,418 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LED Driver - Device Management</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5568d3;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
background: white;
|
||||
padding: 8px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
color: #667eea;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.device-item, .group-item {
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.device-item:hover, .group-item:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.device-info, .group-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.device-name, .group-name {
|
||||
font-weight: 600;
|
||||
font-size: 1.125rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.device-details, .group-details {
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.status-online {
|
||||
background: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.status-offline {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #4caf50;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.status-indicator.offline {
|
||||
background: #f44336;
|
||||
}
|
||||
|
||||
.device-actions, .group-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #e0e0e0;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
border-color: #667eea;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-group input, .form-group select {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-group input:focus, .form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #e0e0e0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
.group-devices {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.group-device-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
margin-right: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Device & Group Management</h1>
|
||||
<button class="btn btn-primary" onclick="showAddDeviceModal()">+ Add Device</button>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab active" onclick="switchTab('devices')">Devices</button>
|
||||
<button class="tab" onclick="switchTab('groups')">Groups</button>
|
||||
</div>
|
||||
|
||||
<!-- Devices Tab -->
|
||||
<div id="devices-tab" class="tab-content active">
|
||||
<div class="card">
|
||||
<h2>Connected Devices</h2>
|
||||
<div class="device-item">
|
||||
<div class="device-info">
|
||||
<div class="device-name">
|
||||
<span class="status-indicator"></span>
|
||||
led-device1
|
||||
</div>
|
||||
<div class="device-details">
|
||||
<span class="status-badge status-online">Online</span>
|
||||
MAC: AA:BB:CC:DD:EE:01 | Group: group1 | Pattern: Rainbow
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-actions">
|
||||
<button class="btn-icon" title="Edit">✏️</button>
|
||||
<button class="btn-icon" title="Settings">⚙️</button>
|
||||
<button class="btn-icon" title="Remove">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device-item">
|
||||
<div class="device-info">
|
||||
<div class="device-name">
|
||||
<span class="status-indicator"></span>
|
||||
led-device2
|
||||
</div>
|
||||
<div class="device-details">
|
||||
<span class="status-badge status-online">Online</span>
|
||||
MAC: AA:BB:CC:DD:EE:02 | Group: group2 | Pattern: Chase
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-actions">
|
||||
<button class="btn-icon" title="Edit">✏️</button>
|
||||
<button class="btn-icon" title="Settings">⚙️</button>
|
||||
<button class="btn-icon" title="Remove">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device-item">
|
||||
<div class="device-info">
|
||||
<div class="device-name">
|
||||
<span class="status-indicator offline"></span>
|
||||
led-device3
|
||||
</div>
|
||||
<div class="device-details">
|
||||
<span class="status-badge status-offline">Offline</span>
|
||||
MAC: AA:BB:CC:DD:EE:03 | No group | Pattern: On
|
||||
</div>
|
||||
</div>
|
||||
<div class="device-actions">
|
||||
<button class="btn-icon" title="Edit">✏️</button>
|
||||
<button class="btn-icon" title="Settings">⚙️</button>
|
||||
<button class="btn-icon" title="Remove">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Groups Tab -->
|
||||
<div id="groups-tab" class="tab-content">
|
||||
<div class="card">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
||||
<h2>Groups</h2>
|
||||
<button class="btn btn-primary" onclick="showAddGroupModal()">+ Create Group</button>
|
||||
</div>
|
||||
|
||||
<div class="group-item">
|
||||
<div class="group-info">
|
||||
<div class="group-name">group1</div>
|
||||
<div class="group-details">
|
||||
Pattern: On | Brightness: 100% | Delay: 100ms
|
||||
</div>
|
||||
<div class="group-devices">
|
||||
<span class="group-device-tag">led-device1</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group-actions">
|
||||
<button class="btn-icon" title="Edit">✏️</button>
|
||||
<button class="btn-icon" title="Apply">▶️</button>
|
||||
<button class="btn-icon" title="Delete">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group-item">
|
||||
<div class="group-info">
|
||||
<div class="group-name">group2</div>
|
||||
<div class="group-details">
|
||||
Pattern: Chase | Brightness: 75% | Delay: 200ms
|
||||
</div>
|
||||
<div class="group-devices">
|
||||
<span class="group-device-tag">led-device2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group-actions">
|
||||
<button class="btn-icon" title="Edit">✏️</button>
|
||||
<button class="btn-icon" title="Apply">▶️</button>
|
||||
<button class="btn-icon" title="Delete">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal (simplified) -->
|
||||
<div id="modal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
|
||||
<div class="card" style="max-width: 500px; margin: 20px;">
|
||||
<h2 id="modal-title">Add Device</h2>
|
||||
<div class="form-group">
|
||||
<label>Device Name</label>
|
||||
<input type="text" id="device-name" placeholder="led-device4">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>MAC Address</label>
|
||||
<input type="text" id="device-mac" placeholder="AA:BB:CC:DD:EE:04">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Group</label>
|
||||
<select id="device-group">
|
||||
<option value="">No group</option>
|
||||
<option value="group1">group1</option>
|
||||
<option value="group2">group2</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
|
||||
<button class="btn btn-primary" onclick="saveDevice()">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchTab(tab) {
|
||||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
||||
|
||||
event.target.classList.add('active');
|
||||
document.getElementById(tab + '-tab').classList.add('active');
|
||||
}
|
||||
|
||||
function showAddDeviceModal() {
|
||||
document.getElementById('modal').style.display = 'flex';
|
||||
document.getElementById('modal-title').textContent = 'Add Device';
|
||||
}
|
||||
|
||||
function showAddGroupModal() {
|
||||
document.getElementById('modal').style.display = 'flex';
|
||||
document.getElementById('modal-title').textContent = 'Create Group';
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('modal').style.display = 'none';
|
||||
}
|
||||
|
||||
function saveDevice() {
|
||||
alert('Device saved! (This is a mockup)');
|
||||
closeModal();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
155
docs/mockups/generate_images.py
Executable file
155
docs/mockups/generate_images.py
Executable file
@@ -0,0 +1,155 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Generate images from HTML mockup files
|
||||
Uses Playwright to render HTML and take screenshots
|
||||
"""
|
||||
|
||||
import os
|
||||
import sys
|
||||
from pathlib import Path
|
||||
|
||||
try:
|
||||
from playwright.sync_api import sync_playwright
|
||||
PLAYWRIGHT_AVAILABLE = True
|
||||
except ImportError:
|
||||
PLAYWRIGHT_AVAILABLE = False
|
||||
|
||||
try:
|
||||
from selenium import webdriver
|
||||
from selenium.webdriver.chrome.options import Options
|
||||
from selenium.webdriver.chrome.service import Service
|
||||
SELENIUM_AVAILABLE = True
|
||||
except ImportError:
|
||||
SELENIUM_AVAILABLE = False
|
||||
|
||||
try:
|
||||
from html2image import Html2Image
|
||||
HTML2IMAGE_AVAILABLE = True
|
||||
except ImportError:
|
||||
HTML2IMAGE_AVAILABLE = False
|
||||
|
||||
|
||||
def generate_with_playwright(html_file, output_file, width=1920, height=1080):
|
||||
"""Generate image using Playwright"""
|
||||
with sync_playwright() as p:
|
||||
browser = p.chromium.launch(headless=True)
|
||||
page = browser.new_page(viewport={'width': width, 'height': height})
|
||||
page.goto(f'file://{html_file.absolute()}')
|
||||
# Wait for page to load
|
||||
page.wait_for_timeout(1000)
|
||||
page.screenshot(path=str(output_file), full_page=True)
|
||||
browser.close()
|
||||
print(f"✓ Generated {output_file.name} using Playwright")
|
||||
|
||||
|
||||
def generate_with_selenium(html_file, output_file, width=1920, height=1080):
|
||||
"""Generate image using Selenium"""
|
||||
chrome_options = Options()
|
||||
chrome_options.add_argument('--headless')
|
||||
chrome_options.add_argument('--no-sandbox')
|
||||
chrome_options.add_argument('--disable-dev-shm-usage')
|
||||
chrome_options.add_argument(f'--window-size={width},{height}')
|
||||
|
||||
driver = webdriver.Chrome(options=chrome_options)
|
||||
try:
|
||||
driver.get(f'file://{html_file.absolute()}')
|
||||
# Wait for page to load
|
||||
import time
|
||||
time.sleep(2)
|
||||
driver.save_screenshot(str(output_file))
|
||||
print(f"✓ Generated {output_file.name} using Selenium")
|
||||
finally:
|
||||
driver.quit()
|
||||
|
||||
|
||||
def generate_with_html2image(html_file, output_file, width=1920, height=1080):
|
||||
"""Generate image using html2image"""
|
||||
hti = Html2Image(size=(width, height))
|
||||
hti.screenshot(
|
||||
html_file=str(html_file),
|
||||
save_as=output_file.name,
|
||||
size=(width, height)
|
||||
)
|
||||
print(f"✓ Generated {output_file.name} using html2image")
|
||||
|
||||
|
||||
def generate_image(html_file, output_dir, width=1920, height=1080):
|
||||
"""Generate image from HTML file using available method"""
|
||||
html_path = Path(html_file)
|
||||
output_path = output_dir / f"{html_path.stem}.png"
|
||||
|
||||
if PLAYWRIGHT_AVAILABLE:
|
||||
try:
|
||||
generate_with_playwright(html_path, output_path, width, height)
|
||||
return True
|
||||
except Exception as e:
|
||||
print(f"Playwright failed: {e}, trying alternatives...")
|
||||
|
||||
if SELENIUM_AVAILABLE:
|
||||
try:
|
||||
generate_with_selenium(html_path, output_path, width, height)
|
||||
return True
|
||||
except Exception as e:
|
||||
print(f"Selenium failed: {e}, trying alternatives...")
|
||||
|
||||
if HTML2IMAGE_AVAILABLE:
|
||||
try:
|
||||
generate_with_html2image(html_path, output_path, width, height)
|
||||
return True
|
||||
except Exception as e:
|
||||
print(f"html2image failed: {e}")
|
||||
|
||||
return False
|
||||
|
||||
|
||||
def main():
|
||||
"""Main function to generate images from all HTML files"""
|
||||
script_dir = Path(__file__).parent
|
||||
output_dir = script_dir / "images"
|
||||
output_dir.mkdir(exist_ok=True)
|
||||
|
||||
html_files = list(script_dir.glob("*.html"))
|
||||
|
||||
if not html_files:
|
||||
print("No HTML files found in mockups directory")
|
||||
return
|
||||
|
||||
print(f"Found {len(html_files)} HTML file(s)")
|
||||
print(f"Output directory: {output_dir}")
|
||||
print()
|
||||
|
||||
# Check available libraries
|
||||
if not any([PLAYWRIGHT_AVAILABLE, SELENIUM_AVAILABLE, HTML2IMAGE_AVAILABLE]):
|
||||
print("ERROR: No screenshot library available!")
|
||||
print("\nPlease install one of the following:")
|
||||
print(" pip install playwright && playwright install chromium")
|
||||
print(" pip install selenium")
|
||||
print(" pip install html2image")
|
||||
sys.exit(1)
|
||||
|
||||
print("Available screenshot libraries:")
|
||||
if PLAYWRIGHT_AVAILABLE:
|
||||
print(" ✓ Playwright")
|
||||
if SELENIUM_AVAILABLE:
|
||||
print(" ✓ Selenium")
|
||||
if HTML2IMAGE_AVAILABLE:
|
||||
print(" ✓ html2image")
|
||||
print()
|
||||
|
||||
# Generate images
|
||||
success_count = 0
|
||||
for html_file in html_files:
|
||||
print(f"Generating image from {html_file.name}...")
|
||||
if generate_image(html_file, output_dir):
|
||||
success_count += 1
|
||||
else:
|
||||
print(f"✗ Failed to generate image from {html_file.name}")
|
||||
print()
|
||||
|
||||
print(f"Successfully generated {success_count}/{len(html_files)} images")
|
||||
print(f"Images saved to: {output_dir}")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
|
||||
BIN
docs/mockups/images/color-picker-demo.png
Normal file
BIN
docs/mockups/images/color-picker-demo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 625 KiB |
BIN
docs/mockups/images/dashboard.png
Normal file
BIN
docs/mockups/images/dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 600 KiB |
BIN
docs/mockups/images/device-management.png
Normal file
BIN
docs/mockups/images/device-management.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 585 KiB |
BIN
docs/mockups/images/index.png
Normal file
BIN
docs/mockups/images/index.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 714 KiB |
BIN
docs/mockups/images/pattern-selector.png
Normal file
BIN
docs/mockups/images/pattern-selector.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 508 KiB |
BIN
docs/mockups/images/presets.png
Normal file
BIN
docs/mockups/images/presets.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 562 KiB |
BIN
docs/mockups/images/settings.png
Normal file
BIN
docs/mockups/images/settings.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 904 KiB |
136
docs/mockups/index.html
Normal file
136
docs/mockups/index.html
Normal file
@@ -0,0 +1,136 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LED Driver - UI Mockups</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 40px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 1.25rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.mockups-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.mockup-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mockup-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.mockup-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mockup-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mockup-description {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>LED Driver UI Mockups</h1>
|
||||
<p>Example user interfaces for the LED driver system</p>
|
||||
</div>
|
||||
|
||||
<div class="mockups-grid">
|
||||
<a href="dashboard.html" class="mockup-card">
|
||||
<div class="mockup-icon">📊</div>
|
||||
<div class="mockup-title">Dashboard</div>
|
||||
<div class="mockup-description">
|
||||
Main control panel for managing LED patterns, brightness, colors, and device status.
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="pattern-selector.html" class="mockup-card">
|
||||
<div class="mockup-icon">🎨</div>
|
||||
<div class="mockup-title">Pattern Selector</div>
|
||||
<div class="mockup-description">
|
||||
Visual interface for selecting from available LED patterns: On, Off, Blink, Chase, Circle, Pulse, Rainbow, and Transition.
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="device-management.html" class="mockup-card">
|
||||
<div class="mockup-icon">🔧</div>
|
||||
<div class="mockup-title">Device Management</div>
|
||||
<div class="mockup-description">
|
||||
Manage connected LED devices and groups. View device status, assign groups, and configure device settings.
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="settings.html" class="mockup-card">
|
||||
<div class="mockup-icon">⚙️</div>
|
||||
<div class="mockup-title">Settings</div>
|
||||
<div class="mockup-description">
|
||||
Comprehensive settings panel for configuring LED pin, color order, pattern parameters, and network settings.
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="presets.html" class="mockup-card">
|
||||
<div class="mockup-icon">💾</div>
|
||||
<div class="mockup-title">Presets</div>
|
||||
<div class="mockup-description">
|
||||
Save, load, and manage preset configurations with pattern, colors, delay, and all N1-N8 parameters for quick pattern switching.
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
310
docs/mockups/pattern-selector.html
Normal file
310
docs/mockups/pattern-selector.html
Normal file
@@ -0,0 +1,310 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LED Driver - Pattern Selector</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
color: #2d3748;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 1.125rem;
|
||||
color: #718096;
|
||||
}
|
||||
|
||||
.patterns-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.pattern-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
border: 3px solid transparent;
|
||||
}
|
||||
|
||||
.pattern-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.pattern-card.selected {
|
||||
border-color: #667eea;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pattern-icon {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 3rem;
|
||||
background: #f7fafc;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pattern-card.selected .pattern-icon {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.pattern-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.pattern-description {
|
||||
font-size: 0.875rem;
|
||||
color: #718096;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.pattern-card.selected .pattern-description {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.pattern-preview {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.preview-dot {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: #e2e8f0;
|
||||
}
|
||||
|
||||
.pattern-card.selected .preview-dot {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 16px 48px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5568d3;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 16px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border: 2px solid #667eea;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #f0f0ff;
|
||||
}
|
||||
|
||||
/* Pattern-specific icons */
|
||||
.icon-on { background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%); }
|
||||
.icon-off { background: #2d3748; }
|
||||
.icon-blink { background: linear-gradient(90deg, #ffd700 25%, #2d3748 25%, #2d3748 50%, #ffd700 50%); }
|
||||
.icon-chase { background: linear-gradient(90deg, #ff0000 0%, #ff6666 50%, #ff0000 100%); }
|
||||
.icon-circle { background: radial-gradient(circle, #00ff00 0%, #66ff66 50%, #00ff00 100%); }
|
||||
.icon-pulse { background: radial-gradient(circle, #0000ff 0%, #6666ff 50%, #0000ff 100%); }
|
||||
.icon-rainbow { background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); }
|
||||
.icon-transition { background: linear-gradient(135deg, #ff0000 0%, #0000ff 100%); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Select LED Pattern</h1>
|
||||
<p>Choose a pattern to display on your LED devices</p>
|
||||
</div>
|
||||
|
||||
<div class="patterns-grid">
|
||||
<div class="pattern-card" data-pattern="on">
|
||||
<div class="pattern-icon icon-on">💡</div>
|
||||
<div class="pattern-name">On</div>
|
||||
<div class="pattern-description">Solid color display - LEDs stay on with selected color</div>
|
||||
<div class="pattern-preview">
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pattern-card" data-pattern="off">
|
||||
<div class="pattern-icon icon-off">⚫</div>
|
||||
<div class="pattern-name">Off</div>
|
||||
<div class="pattern-description">Turn all LEDs off</div>
|
||||
<div class="pattern-preview">
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pattern-card" data-pattern="blink">
|
||||
<div class="pattern-icon icon-blink">✨</div>
|
||||
<div class="pattern-name">Blink</div>
|
||||
<div class="pattern-description">All LEDs blink on and off together</div>
|
||||
<div class="pattern-preview">
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pattern-card" data-pattern="chase">
|
||||
<div class="pattern-icon icon-chase">🏃</div>
|
||||
<div class="pattern-name">Chase</div>
|
||||
<div class="pattern-description">Light chases along the LED strip</div>
|
||||
<div class="pattern-preview">
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pattern-card" data-pattern="circle">
|
||||
<div class="pattern-icon icon-circle">⭕</div>
|
||||
<div class="pattern-name">Circle</div>
|
||||
<div class="pattern-description">Circular pattern that rotates around the strip</div>
|
||||
<div class="pattern-preview">
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pattern-card" data-pattern="pulse">
|
||||
<div class="pattern-icon icon-pulse">💓</div>
|
||||
<div class="pattern-name">Pulse</div>
|
||||
<div class="pattern-description">Pulsing effect that fades in and out</div>
|
||||
<div class="pattern-preview">
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pattern-card" data-pattern="rainbow">
|
||||
<div class="pattern-icon icon-rainbow">🌈</div>
|
||||
<div class="pattern-name">Rainbow</div>
|
||||
<div class="pattern-description">Smooth rainbow color transition across LEDs</div>
|
||||
<div class="pattern-preview">
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pattern-card" data-pattern="transition">
|
||||
<div class="pattern-icon icon-transition">🔄</div>
|
||||
<div class="pattern-name">Transition</div>
|
||||
<div class="pattern-description">Smooth color transition between selected colors</div>
|
||||
<div class="pattern-preview">
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
<div class="preview-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button class="btn btn-secondary" onclick="window.history.back()">Cancel</button>
|
||||
<button class="btn btn-primary" id="apply-btn">Apply Pattern</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let selectedPattern = null;
|
||||
|
||||
document.querySelectorAll('.pattern-card').forEach(card => {
|
||||
card.addEventListener('click', function() {
|
||||
document.querySelectorAll('.pattern-card').forEach(c => c.classList.remove('selected'));
|
||||
this.classList.add('selected');
|
||||
selectedPattern = this.dataset.pattern;
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('apply-btn').addEventListener('click', function() {
|
||||
if (selectedPattern) {
|
||||
alert(`Applying pattern: ${selectedPattern}`);
|
||||
// In real implementation, this would send the pattern to the device
|
||||
} else {
|
||||
alert('Please select a pattern first');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
968
docs/mockups/presets.html
Normal file
968
docs/mockups/presets.html
Normal file
@@ -0,0 +1,968 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LED Driver - Presets</title>
|
||||
<link rel="stylesheet" href="color-picker.css">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
color: #667eea;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.controls {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
padding: 12px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.search-box:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: 12px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.view-btn.active {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.presets-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.preset-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
border: 3px solid transparent;
|
||||
}
|
||||
|
||||
.preset-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.preset-card.selected {
|
||||
border-color: #667eea;
|
||||
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
|
||||
}
|
||||
|
||||
.preset-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.preset-name {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.pattern-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.pattern-badge.on { background: #4caf50; }
|
||||
.pattern-badge.off { background: #757575; }
|
||||
.pattern-badge.blink { background: #ff9800; }
|
||||
.pattern-badge.chase { background: #f44336; }
|
||||
.pattern-badge.circle { background: #00bcd4; }
|
||||
.pattern-badge.pulse { background: #e91e63; }
|
||||
.pattern-badge.rainbow { background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3); }
|
||||
.pattern-badge.transition { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
|
||||
|
||||
.color-preview {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
border: 2px solid #e0e0e0;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.preset-info {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #667eea;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.preset-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5568d3;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #e0e0e0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #f44336;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #d32f2f;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
padding: 8px;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
padding: 16px 32px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
color: #667eea;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.form-group small {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: #666;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.color-inputs {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.color-input-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.color-input-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.params-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.n-value-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.n-value-input:focus {
|
||||
border-color: #667eea;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.param-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.param-input label {
|
||||
font-size: 0.75rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.param-input input {
|
||||
padding: 8px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 60px 40px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-state h2 {
|
||||
color: #667eea;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
color: #666;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h1>Preset Management</h1>
|
||||
<p>Save and manage your favorite LED pattern configurations</p>
|
||||
</div>
|
||||
<div style="display: flex; gap: 12px; align-items: center;">
|
||||
<button class="btn btn-secondary btn-large" onclick="syncPresets()" title="Sync all presets to all devices">🔄 Sync Presets to All Devices</button>
|
||||
<button class="btn btn-primary btn-large" onclick="showCreateModal()">+ Create Preset</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<input type="text" class="search-box" placeholder="Search presets..." id="search-input">
|
||||
<div class="filter-group">
|
||||
<select class="filter-select" id="pattern-filter">
|
||||
<option value="">All Patterns</option>
|
||||
<option value="on">On</option>
|
||||
<option value="off">Off</option>
|
||||
<option value="blink">Blink</option>
|
||||
<option value="chase">Chase</option>
|
||||
<option value="circle">Circle</option>
|
||||
<option value="pulse">Pulse</option>
|
||||
<option value="rainbow">Rainbow</option>
|
||||
<option value="transition">Transition</option>
|
||||
</select>
|
||||
<select class="filter-select" id="sort-select">
|
||||
<option value="name">Sort by Name</option>
|
||||
<option value="recent">Recently Used</option>
|
||||
<option value="created">Recently Created</option>
|
||||
</select>
|
||||
<div class="view-toggle">
|
||||
<button class="view-btn active" onclick="setView('grid')" id="view-grid">Grid</button>
|
||||
<button class="view-btn" onclick="setView('list')" id="view-list">List</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="presets-grid" id="presets-container">
|
||||
<!-- Preset Card 1 -->
|
||||
<div class="preset-card" data-pattern="rainbow" data-name="Fast Rainbow">
|
||||
<div class="preset-header">
|
||||
<div>
|
||||
<div class="preset-name">Fast Rainbow</div>
|
||||
<span class="pattern-badge rainbow">Rainbow</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-preview">
|
||||
<div class="color-swatch" style="background: #FF0000;"></div>
|
||||
<div class="color-swatch" style="background: #00FF00;"></div>
|
||||
<div class="color-swatch" style="background: #0000FF;"></div>
|
||||
</div>
|
||||
<div class="preset-info">
|
||||
<div class="info-item">
|
||||
<span class="info-label">Delay:</span>
|
||||
<span class="info-value">30ms</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">N1:</span>
|
||||
<span class="info-value">10</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preset-actions">
|
||||
<button class="btn btn-primary" onclick="applyPreset('Fast Rainbow')">Apply</button>
|
||||
<button class="btn btn-secondary btn-icon" onclick="editPreset('Fast Rainbow')" title="Edit">✏️</button>
|
||||
<button class="btn btn-danger btn-icon" onclick="deletePreset('Fast Rainbow')" title="Delete">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preset Card 2 -->
|
||||
<div class="preset-card" data-pattern="pulse" data-name="Slow Pulse">
|
||||
<div class="preset-header">
|
||||
<div>
|
||||
<div class="preset-name">Slow Pulse</div>
|
||||
<span class="pattern-badge pulse">Pulse</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-preview">
|
||||
<div class="color-swatch" style="background: #FF0000;"></div>
|
||||
<div class="color-swatch" style="background: #0000FF;"></div>
|
||||
</div>
|
||||
<div class="preset-info">
|
||||
<div class="info-item">
|
||||
<span class="info-label">Delay:</span>
|
||||
<span class="info-value">200ms</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">N1:</span>
|
||||
<span class="info-value">500</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preset-actions">
|
||||
<button class="btn btn-primary" onclick="applyPreset('Slow Pulse')">Apply</button>
|
||||
<button class="btn btn-secondary btn-icon" onclick="editPreset('Slow Pulse')" title="Edit">✏️</button>
|
||||
<button class="btn btn-danger btn-icon" onclick="deletePreset('Slow Pulse')" title="Delete">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preset Card 3 -->
|
||||
<div class="preset-card" data-pattern="chase" data-name="Red Blue Chase">
|
||||
<div class="preset-header">
|
||||
<div>
|
||||
<div class="preset-name">Red Blue Chase</div>
|
||||
<span class="pattern-badge chase">Chase</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-preview">
|
||||
<div class="color-swatch" style="background: #FF0000;"></div>
|
||||
<div class="color-swatch" style="background: #0000FF;"></div>
|
||||
</div>
|
||||
<div class="preset-info">
|
||||
<div class="info-item">
|
||||
<span class="info-label">Delay:</span>
|
||||
<span class="info-value">100ms</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">N1:</span>
|
||||
<span class="info-value">5</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preset-actions">
|
||||
<button class="btn btn-primary" onclick="applyPreset('Red Blue Chase')">Apply</button>
|
||||
<button class="btn btn-secondary btn-icon" onclick="editPreset('Red Blue Chase')" title="Edit">✏️</button>
|
||||
<button class="btn btn-danger btn-icon" onclick="deletePreset('Red Blue Chase')" title="Delete">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preset Card 4 -->
|
||||
<div class="preset-card" data-pattern="circle" data-name="Loading Circle">
|
||||
<div class="preset-header">
|
||||
<div>
|
||||
<div class="preset-name">Loading Circle</div>
|
||||
<span class="pattern-badge circle">Circle</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-preview">
|
||||
<div class="color-swatch" style="background: #00FF00;"></div>
|
||||
</div>
|
||||
<div class="preset-info">
|
||||
<div class="info-item">
|
||||
<span class="info-label">Delay:</span>
|
||||
<span class="info-value">50ms</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">N1:</span>
|
||||
<span class="info-value">50</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preset-actions">
|
||||
<button class="btn btn-primary" onclick="applyPreset('Loading Circle')">Apply</button>
|
||||
<button class="btn btn-secondary btn-icon" onclick="editPreset('Loading Circle')" title="Edit">✏️</button>
|
||||
<button class="btn btn-danger btn-icon" onclick="deletePreset('Loading Circle')" title="Delete">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preset Card 5 -->
|
||||
<div class="preset-card" data-pattern="blink" data-name="Party Blink">
|
||||
<div class="preset-header">
|
||||
<div>
|
||||
<div class="preset-name">Party Blink</div>
|
||||
<span class="pattern-badge blink">Blink</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-preview">
|
||||
<div class="color-swatch" style="background: #FF00FF;"></div>
|
||||
<div class="color-swatch" style="background: #00FFFF;"></div>
|
||||
<div class="color-swatch" style="background: #FFFF00;"></div>
|
||||
</div>
|
||||
<div class="preset-info">
|
||||
<div class="info-item">
|
||||
<span class="info-label">Delay:</span>
|
||||
<span class="info-value">150ms</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">N1:</span>
|
||||
<span class="info-value">0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preset-actions">
|
||||
<button class="btn btn-primary" onclick="applyPreset('Party Blink')">Apply</button>
|
||||
<button class="btn btn-secondary btn-icon" onclick="editPreset('Party Blink')" title="Edit">✏️</button>
|
||||
<button class="btn btn-danger btn-icon" onclick="deletePreset('Party Blink')" title="Delete">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preset Card 6 -->
|
||||
<div class="preset-card" data-pattern="transition" data-name="Smooth Transition">
|
||||
<div class="preset-header">
|
||||
<div>
|
||||
<div class="preset-name">Smooth Transition</div>
|
||||
<span class="pattern-badge transition">Transition</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-preview">
|
||||
<div class="color-swatch" style="background: #FF0000;"></div>
|
||||
<div class="color-swatch" style="background: #00FF00;"></div>
|
||||
<div class="color-swatch" style="background: #0000FF;"></div>
|
||||
<div class="color-swatch" style="background: #FFFF00;"></div>
|
||||
</div>
|
||||
<div class="preset-info">
|
||||
<div class="info-item">
|
||||
<span class="info-label">Delay:</span>
|
||||
<span class="info-value">100ms</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">N1:</span>
|
||||
<span class="info-value">0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preset-actions">
|
||||
<button class="btn btn-primary" onclick="applyPreset('Smooth Transition')">Apply</button>
|
||||
<button class="btn btn-secondary btn-icon" onclick="editPreset('Smooth Transition')" title="Edit">✏️</button>
|
||||
<button class="btn btn-danger btn-icon" onclick="deletePreset('Smooth Transition')" title="Delete">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create/Edit Preset Modal -->
|
||||
<div class="modal" id="preset-modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 id="modal-title">Create Preset</h2>
|
||||
<p>Configure your preset settings</p>
|
||||
</div>
|
||||
<form id="preset-form">
|
||||
<div class="form-group">
|
||||
<label for="preset-name">Preset Name *</label>
|
||||
<input type="text" id="preset-name" required placeholder="Enter preset name">
|
||||
<small>Unique identifier for this preset</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="preset-pattern">Pattern *</label>
|
||||
<select id="preset-pattern" required>
|
||||
<option value="on">On</option>
|
||||
<option value="off">Off</option>
|
||||
<option value="blink">Blink</option>
|
||||
<option value="chase">Chase</option>
|
||||
<option value="circle">Circle</option>
|
||||
<option value="pulse">Pulse</option>
|
||||
<option value="rainbow">Rainbow</option>
|
||||
<option value="transition">Transition</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Colors *</label>
|
||||
<div class="color-inputs" id="color-inputs">
|
||||
<!-- Color pickers will be added here -->
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary" onclick="addColorPicker()" style="margin-top: 8px;">+ Add Color</button>
|
||||
<small>Minimum 2 colors required</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="preset-delay">
|
||||
Delay (ms) *
|
||||
<span id="delay-value-display" style="margin-left: 12px; color: #667eea; font-weight: 600;">100</span>
|
||||
</label>
|
||||
<input type="range" id="preset-delay" min="10" max="1000" value="100" step="10" required>
|
||||
<small>Animation speed (10-1000 milliseconds)</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="step-offset">Step Offset</label>
|
||||
<input type="number" id="step-offset" value="0" min="-1000" max="1000">
|
||||
<small>Step offset for group synchronization. Applied per device when preset is used in a group.</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="step-increment">Step Increment</label>
|
||||
<input type="number" id="step-increment" value="1" min="1" max="255">
|
||||
<small>Amount step counter increments per cycle. Controls pattern advancement speed.</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Pattern Parameters (N1-N8)</label>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
|
||||
<small style="margin: 0;">Pattern-specific parameters (0-255, varies by pattern)</small>
|
||||
<button type="button" class="btn btn-secondary" onclick="setAllNValues(0)" style="padding: 6px 12px; font-size: 0.75rem;">Reset All to 0</button>
|
||||
</div>
|
||||
<div class="params-grid">
|
||||
<div class="param-input">
|
||||
<label>N1</label>
|
||||
<input type="number" id="n1" min="0" max="255" value="0" class="n-value-input">
|
||||
</div>
|
||||
<div class="param-input">
|
||||
<label>N2</label>
|
||||
<input type="number" id="n2" min="0" max="255" value="0" class="n-value-input">
|
||||
</div>
|
||||
<div class="param-input">
|
||||
<label>N3</label>
|
||||
<input type="number" id="n3" min="0" max="255" value="0" class="n-value-input">
|
||||
</div>
|
||||
<div class="param-input">
|
||||
<label>N4</label>
|
||||
<input type="number" id="n4" min="0" max="255" value="0" class="n-value-input">
|
||||
</div>
|
||||
<div class="param-input">
|
||||
<label>N5</label>
|
||||
<input type="number" id="n5" min="0" max="255" value="0" class="n-value-input">
|
||||
</div>
|
||||
<div class="param-input">
|
||||
<label>N6</label>
|
||||
<input type="number" id="n6" min="0" max="255" value="0" class="n-value-input">
|
||||
</div>
|
||||
<div class="param-input">
|
||||
<label>N7</label>
|
||||
<input type="number" id="n7" min="0" max="255" value="0" class="n-value-input">
|
||||
</div>
|
||||
<div class="param-input">
|
||||
<label>N8</label>
|
||||
<input type="number" id="n8" min="0" max="255" value="0" class="n-value-input">
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap;">
|
||||
<button type="button" class="btn btn-secondary" onclick="setAllNValues(0)" style="padding: 8px 16px; font-size: 0.875rem;">Set All to 0</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="copyNValuesFromCurrent()" style="padding: 8px 16px; font-size: 0.875rem;">Copy from Current Settings</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="showNValueHelp()" style="padding: 8px 16px; font-size: 0.875rem;">ℹ️ Parameter Help</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Save Preset</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentView = 'grid';
|
||||
let editingPreset = null;
|
||||
|
||||
// Delay slider update
|
||||
document.getElementById('preset-delay').addEventListener('input', function(e) {
|
||||
document.getElementById('delay-value-display').textContent = e.target.value;
|
||||
});
|
||||
|
||||
// Search functionality
|
||||
document.getElementById('search-input').addEventListener('input', function(e) {
|
||||
filterPresets();
|
||||
});
|
||||
|
||||
// Filter functionality
|
||||
document.getElementById('pattern-filter').addEventListener('change', function(e) {
|
||||
filterPresets();
|
||||
});
|
||||
|
||||
// Sort functionality
|
||||
document.getElementById('sort-select').addEventListener('change', function(e) {
|
||||
sortPresets(e.target.value);
|
||||
});
|
||||
|
||||
function filterPresets() {
|
||||
const search = document.getElementById('search-input').value.toLowerCase();
|
||||
const patternFilter = document.getElementById('pattern-filter').value;
|
||||
const cards = document.querySelectorAll('.preset-card');
|
||||
|
||||
cards.forEach(card => {
|
||||
const name = card.dataset.name.toLowerCase();
|
||||
const pattern = card.dataset.pattern;
|
||||
const matchesSearch = name.includes(search);
|
||||
const matchesPattern = !patternFilter || pattern === patternFilter;
|
||||
|
||||
if (matchesSearch && matchesPattern) {
|
||||
card.style.display = '';
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function sortPresets(sortBy) {
|
||||
const container = document.getElementById('presets-container');
|
||||
const cards = Array.from(container.querySelectorAll('.preset-card'));
|
||||
|
||||
cards.sort((a, b) => {
|
||||
if (sortBy === 'name') {
|
||||
return a.dataset.name.localeCompare(b.dataset.name);
|
||||
} else if (sortBy === 'recent') {
|
||||
// In real implementation, would use actual usage data
|
||||
return 0;
|
||||
} else if (sortBy === 'created') {
|
||||
// In real implementation, would use creation timestamps
|
||||
return 0;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
cards.forEach(card => container.appendChild(card));
|
||||
}
|
||||
|
||||
function setView(view) {
|
||||
currentView = view;
|
||||
const container = document.getElementById('presets-container');
|
||||
const gridBtn = document.getElementById('view-grid');
|
||||
const listBtn = document.getElementById('view-list');
|
||||
|
||||
if (view === 'grid') {
|
||||
container.style.gridTemplateColumns = 'repeat(auto-fill, minmax(300px, 1fr))';
|
||||
gridBtn.classList.add('active');
|
||||
listBtn.classList.remove('active');
|
||||
} else {
|
||||
container.style.gridTemplateColumns = '1fr';
|
||||
gridBtn.classList.remove('active');
|
||||
listBtn.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
function showCreateModal() {
|
||||
editingPreset = null;
|
||||
document.getElementById('modal-title').textContent = 'Create Preset';
|
||||
document.getElementById('preset-form').reset();
|
||||
document.getElementById('preset-delay').value = 100;
|
||||
document.getElementById('delay-value-display').textContent = '100';
|
||||
// Reset to 2 colors
|
||||
initializeColorPickers();
|
||||
document.getElementById('preset-modal').classList.add('active');
|
||||
}
|
||||
|
||||
// Initialize color pickers function (defined before showCreateModal)
|
||||
const presetColorPickers = [];
|
||||
|
||||
function initializeColorPickers() {
|
||||
const colorInputs = document.getElementById('color-inputs');
|
||||
colorInputs.innerHTML = '';
|
||||
presetColorPickers.length = 0;
|
||||
addColorPicker('#FF0000');
|
||||
addColorPicker('#0000FF');
|
||||
}
|
||||
|
||||
function addColorPicker(color = '#00FF00') {
|
||||
const colorInputs = document.getElementById('color-inputs');
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'color-input-wrapper';
|
||||
colorInputs.appendChild(wrapper);
|
||||
|
||||
const picker = new ColorPicker(wrapper, {
|
||||
initialColor: color,
|
||||
onColorChange: (newColor) => {
|
||||
console.log('Preset color changed:', newColor);
|
||||
}
|
||||
});
|
||||
|
||||
presetColorPickers.push(picker);
|
||||
return picker;
|
||||
}
|
||||
|
||||
function editPreset(name) {
|
||||
editingPreset = name;
|
||||
document.getElementById('modal-title').textContent = 'Edit Preset';
|
||||
// In real implementation, would load preset data
|
||||
document.getElementById('preset-name').value = name;
|
||||
document.getElementById('preset-modal').classList.add('active');
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById('preset-modal').classList.remove('active');
|
||||
editingPreset = null;
|
||||
}
|
||||
|
||||
|
||||
function applyPreset(name) {
|
||||
alert(`Applying preset: ${name}\n(In real implementation, this would send preset configuration to device(s))`);
|
||||
}
|
||||
|
||||
function deletePreset(name) {
|
||||
if (confirm(`Delete preset "${name}"?`)) {
|
||||
alert(`Preset "${name}" deleted\n(In real implementation, this would remove the preset from storage)`);
|
||||
}
|
||||
}
|
||||
|
||||
function syncPresets() {
|
||||
if (confirm('Sync all presets to all devices?\nThis will send all presets from master to all devices via ESPNow.')) {
|
||||
alert('Syncing presets to all devices...\n(In real implementation, this would send all presets via ESPNow to all devices)');
|
||||
}
|
||||
}
|
||||
|
||||
function setAllNValues(value) {
|
||||
for (let i = 1; i <= 8; i++) {
|
||||
document.getElementById(`n${i}`).value = value;
|
||||
}
|
||||
}
|
||||
|
||||
function copyNValuesFromCurrent() {
|
||||
// In real implementation, this would copy from current device settings
|
||||
alert('Copying N values from current device settings...\n(In real implementation, this would load current N1-N8 values from the active device)');
|
||||
// Example: would set values like this:
|
||||
// document.getElementById('n1').value = currentSettings.n1;
|
||||
// ... etc
|
||||
}
|
||||
|
||||
function showNValueHelp() {
|
||||
const helpText = `
|
||||
Pattern Parameter Guide:
|
||||
|
||||
Rainbow:
|
||||
N1: Step increment (1-255, default: 1)
|
||||
|
||||
Pulse:
|
||||
N1: Attack time in ms (0-255)
|
||||
N2: Hold time in ms (0-255)
|
||||
N3: Decay time in ms (0-255)
|
||||
|
||||
Chase:
|
||||
N1: LEDs of color 0 (1-255)
|
||||
N2: LEDs of color 1 (1-255)
|
||||
N3: Step movement on odd steps (can be negative)
|
||||
N4: Step movement on even steps (can be negative)
|
||||
|
||||
Circle:
|
||||
N1: Head moves per second (1-255)
|
||||
N2: Max length in LEDs (1-255)
|
||||
N3: Tail moves per second (1-255)
|
||||
N4: Min length in LEDs (0-255)
|
||||
|
||||
Other patterns:
|
||||
N1-N8: Reserved for future pattern enhancements
|
||||
|
||||
All values range from 0-255 unless otherwise specified.
|
||||
`;
|
||||
alert(helpText);
|
||||
}
|
||||
|
||||
// Form submission
|
||||
document.getElementById('preset-form').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const name = document.getElementById('preset-name').value;
|
||||
const action = editingPreset ? 'updated' : 'created';
|
||||
alert(`Preset "${name}" ${action}!\n(In real implementation, this would save the preset to storage)`);
|
||||
closeModal();
|
||||
});
|
||||
|
||||
// Close modal on outside click
|
||||
document.getElementById('preset-modal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script src="color-picker.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
491
docs/mockups/settings.html
Normal file
491
docs/mockups/settings.html
Normal file
@@ -0,0 +1,491 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LED Driver - Settings</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
color: #667eea;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
color: #667eea;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.5rem;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-group input[type="text"],
|
||||
.form-group input[type="number"],
|
||||
.form-group input[type="password"],
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.form-group input[type="range"] {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: #e0e0e0;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.form-group input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #667eea;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-group input[type="range"]::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #667eea;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.value-display {
|
||||
display: inline-block;
|
||||
margin-left: 12px;
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.form-group small {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: #666;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.color-order {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.color-order-option {
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
padding: 12px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.color-order-option:hover {
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.color-order-option.selected {
|
||||
border-color: #667eea;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.color-order-option .color-boxes {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.color-box {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.color-box.r { background: #ff0000; }
|
||||
.color-box.g { background: #00ff00; }
|
||||
.color-box.b { background: #0000ff; }
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 32px;
|
||||
padding-top: 24px;
|
||||
border-top: 2px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5568d3;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #e0e0e0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #d0d0d0;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #f44336;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #d32f2f;
|
||||
}
|
||||
|
||||
.btn-full {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
height: 1px;
|
||||
background: #e0e0e0;
|
||||
margin: 24px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Device Settings</h1>
|
||||
<p>Configure your LED driver device settings</p>
|
||||
</div>
|
||||
|
||||
<!-- Basic Settings -->
|
||||
<div class="card">
|
||||
<h2>Basic Settings</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Device Name</label>
|
||||
<input type="text" id="device-name" value="led-device1" placeholder="led-device1">
|
||||
<small>Unique identifier for this device</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>LED Pin</label>
|
||||
<input type="number" id="led-pin" value="10" min="0" max="40">
|
||||
<small>GPIO pin number connected to LED data line</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Number of LEDs</label>
|
||||
<input type="number" id="num-leds" value="50" min="1" max="1000">
|
||||
<small>Total number of LEDs in your strip</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Color Order</label>
|
||||
<div class="color-order">
|
||||
<div class="color-order-option selected" data-order="rgb">
|
||||
RGB
|
||||
<div class="color-boxes">
|
||||
<div class="color-box r"></div>
|
||||
<div class="color-box g"></div>
|
||||
<div class="color-box b"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-order-option" data-order="rbg">
|
||||
RBG
|
||||
<div class="color-boxes">
|
||||
<div class="color-box r"></div>
|
||||
<div class="color-box b"></div>
|
||||
<div class="color-box g"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-order-option" data-order="grb">
|
||||
GRB
|
||||
<div class="color-boxes">
|
||||
<div class="color-box g"></div>
|
||||
<div class="color-box r"></div>
|
||||
<div class="color-box b"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-order-option" data-order="gbr">
|
||||
GBR
|
||||
<div class="color-boxes">
|
||||
<div class="color-box g"></div>
|
||||
<div class="color-box b"></div>
|
||||
<div class="color-box r"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-order-option" data-order="brg">
|
||||
BRG
|
||||
<div class="color-boxes">
|
||||
<div class="color-box b"></div>
|
||||
<div class="color-box r"></div>
|
||||
<div class="color-box g"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-order-option" data-order="bgr">
|
||||
BGR
|
||||
<div class="color-boxes">
|
||||
<div class="color-box b"></div>
|
||||
<div class="color-box g"></div>
|
||||
<div class="color-box r"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pattern Settings -->
|
||||
<div class="card">
|
||||
<h2>Pattern Settings</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Pattern</label>
|
||||
<select id="pattern">
|
||||
<option value="on">On</option>
|
||||
<option value="off">Off</option>
|
||||
<option value="blink">Blink</option>
|
||||
<option value="chase">Chase</option>
|
||||
<option value="circle">Circle</option>
|
||||
<option value="pulse">Pulse</option>
|
||||
<option value="rainbow">Rainbow</option>
|
||||
<option value="transition">Transition</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>
|
||||
Brightness
|
||||
<span class="value-display" id="brightness-value">100</span>%
|
||||
</label>
|
||||
<input type="range" id="brightness" min="0" max="100" value="100">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>
|
||||
Delay
|
||||
<span class="value-display" id="delay-value">100</span>ms
|
||||
</label>
|
||||
<input type="range" id="delay" min="10" max="1000" value="100" step="10">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advanced Settings -->
|
||||
<div class="card">
|
||||
<h2>Advanced Settings</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Step Counter</label>
|
||||
<input type="text" id="step-counter" value="0" readonly style="background: #f5f5f5; cursor: not-allowed;">
|
||||
<small>Current step position in pattern (read-only)</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="step-increment">
|
||||
Step Increment
|
||||
</label>
|
||||
<input type="number" id="step-increment" value="1" min="1" max="255">
|
||||
<small>Amount step counter increments per cycle. Controls pattern advancement speed.</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Pattern Parameters</label>
|
||||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;">
|
||||
<div>
|
||||
<label style="font-size: 0.875rem;">N1</label>
|
||||
<input type="number" id="n1" value="0" min="0" max="255">
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-size: 0.875rem;">N2</label>
|
||||
<input type="number" id="n2" value="0" min="0" max="255">
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-size: 0.875rem;">N3</label>
|
||||
<input type="number" id="n3" value="0" min="0" max="255">
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-size: 0.875rem;">N4</label>
|
||||
<input type="number" id="n4" value="0" min="0" max="255">
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-size: 0.875rem;">N5</label>
|
||||
<input type="number" id="n5" value="0" min="0" max="255">
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-size: 0.875rem;">N6</label>
|
||||
<input type="number" id="n6" value="0" min="0" max="255">
|
||||
</div>
|
||||
</div>
|
||||
<small>Pattern-specific parameters (varies by pattern)</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Device ID</label>
|
||||
<input type="number" id="device-id" value="1" min="0">
|
||||
<small>Unique numeric identifier</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="debug" checked>
|
||||
<label for="debug" style="margin: 0;">Debug Mode</label>
|
||||
</div>
|
||||
<small>Enable debug logging</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Network Settings -->
|
||||
<div class="card">
|
||||
<h2>Network Settings</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Access Point Name</label>
|
||||
<input type="text" id="ap-name" value="led-AA:BB:CC:DD:EE:01" placeholder="led-device">
|
||||
<small>WiFi access point name for device configuration</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Access Point Password</label>
|
||||
<input type="password" id="ap-password" placeholder="Leave empty for open network">
|
||||
<small>Password for the access point (optional)</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="ap-enabled" checked>
|
||||
<label for="ap-enabled" style="margin: 0;">Enable Access Point</label>
|
||||
</div>
|
||||
<small>Allow device to create its own WiFi network</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="card">
|
||||
<div class="actions">
|
||||
<button class="btn btn-secondary btn-full" onclick="resetSettings()">Reset to Defaults</button>
|
||||
<button class="btn btn-primary btn-full" onclick="saveSettings()">Save Settings</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Brightness slider
|
||||
document.getElementById('brightness').addEventListener('input', function(e) {
|
||||
document.getElementById('brightness-value').textContent = e.target.value;
|
||||
});
|
||||
|
||||
// Delay slider
|
||||
document.getElementById('delay').addEventListener('input', function(e) {
|
||||
document.getElementById('delay-value').textContent = e.target.value;
|
||||
});
|
||||
|
||||
// Color order selection
|
||||
document.querySelectorAll('.color-order-option').forEach(option => {
|
||||
option.addEventListener('click', function() {
|
||||
document.querySelectorAll('.color-order-option').forEach(o => o.classList.remove('selected'));
|
||||
this.classList.add('selected');
|
||||
});
|
||||
});
|
||||
|
||||
function saveSettings() {
|
||||
alert('Settings saved! (This is a mockup)');
|
||||
}
|
||||
|
||||
function resetSettings() {
|
||||
if (confirm('Reset all settings to defaults?')) {
|
||||
alert('Settings reset! (This is a mockup)');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
30
docs/msg.json
Normal file
30
docs/msg.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"grps": [
|
||||
{
|
||||
"n": "group1",
|
||||
"pt": "on",
|
||||
"cl": [
|
||||
"000000",
|
||||
"000000"
|
||||
],
|
||||
"br": 100,
|
||||
"dl": 100,
|
||||
"n1": 0,
|
||||
"n2": 0,
|
||||
"n3": 0,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0
|
||||
},
|
||||
{
|
||||
"n": "group2",
|
||||
"pt": "on",
|
||||
"cl": [
|
||||
"000000",
|
||||
"000000"
|
||||
],
|
||||
"br": 100,
|
||||
"dl": 100
|
||||
}
|
||||
]
|
||||
}
|
||||
244
flash.sh
Executable file
244
flash.sh
Executable file
@@ -0,0 +1,244 @@
|
||||
#!/usr/bin/env sh
|
||||
set -eu
|
||||
|
||||
# Environment variables:
|
||||
# PORT - serial port (default: /dev/ttyUSB0)
|
||||
# BAUD - baud rate (default: 460800)
|
||||
# FIRMWARE - local path to firmware .bin
|
||||
# FW_URL - URL to download firmware if FIRMWARE not provided or missing
|
||||
|
||||
PORT=${PORT:-}
|
||||
BAUD=${BAUD:-460800}
|
||||
CHIP=${CHIP:-esp32} # esp32 | esp32c3
|
||||
|
||||
# Map chip-specific settings
|
||||
ESPT_CHIP="$CHIP"
|
||||
FLASH_OFFSET=0x1000
|
||||
DEFAULT_DOWNLOAD_PAGE="https://micropython.org/download/ESP32/"
|
||||
BOARD_ID="ESP32_GENERIC"
|
||||
BOARD_PAGE="https://micropython.org/download/${BOARD_ID}/"
|
||||
case "$CHIP" in
|
||||
esp32c3)
|
||||
ESPT_CHIP="esp32c3"
|
||||
FLASH_OFFSET=0x0
|
||||
DEFAULT_DOWNLOAD_PAGE="https://micropython.org/download/ESP32C3/"
|
||||
BOARD_ID="ESP32_GENERIC_C3"
|
||||
BOARD_PAGE="https://micropython.org/download/${BOARD_ID}/"
|
||||
;;
|
||||
esp32)
|
||||
ESPT_CHIP="esp32"
|
||||
FLASH_OFFSET=0x1000
|
||||
DEFAULT_DOWNLOAD_PAGE="https://micropython.org/download/ESP32/"
|
||||
BOARD_ID="ESP32_GENERIC"
|
||||
BOARD_PAGE="https://micropython.org/download/${BOARD_ID}/"
|
||||
;;
|
||||
*)
|
||||
echo "Unsupported CHIP: $CHIP (supported: esp32, esp32c3)" >&2
|
||||
exit 1
|
||||
;;
|
||||
esac
|
||||
|
||||
# Download-only mode: fetch the appropriate firmware and exit
|
||||
if [ -n "${DOWNLOAD_ONLY:-}" ]; then
|
||||
# Prefer resolving latest if nothing provided
|
||||
if [ -z "${FIRMWARE:-}" ] && [ -z "${FW_URL:-}" ]; then
|
||||
LATEST=1
|
||||
fi
|
||||
if ! resolve_firmware; then
|
||||
echo "Failed to resolve firmware for CHIP=$CHIP" >&2
|
||||
exit 1
|
||||
fi
|
||||
echo "$FIRMWARE"
|
||||
exit 0
|
||||
fi
|
||||
|
||||
# Helper: resolve the latest firmware URL for a given board pattern with multiple fallbacks
|
||||
resolve_latest_url() {
|
||||
board_pattern="$1" # e.g., ESP32_GENERIC_C3-.*\.bin
|
||||
# Candidate pages to try in order
|
||||
pages="${BOARD_PAGE} ${DOWNLOAD_PAGE:-$DEFAULT_DOWNLOAD_PAGE} https://micropython.org/download/ https://micropython.org/resources/firmware/"
|
||||
for page in $pages; do
|
||||
echo "Trying to resolve latest from $page" >&2
|
||||
html=$(curl -fsSL -H 'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36' -e 'https://micropython.org/download/' "$page" || true)
|
||||
[ -z "$html" ] && continue
|
||||
# Prefer matching the board pattern
|
||||
url=$(printf "%s" "$html" \
|
||||
| sed -n 's/.*href=\"\([^\"]*\.bin\)\".*/\1/p' \
|
||||
| grep -E "$board_pattern" \
|
||||
| head -n1)
|
||||
if [ -n "$url" ]; then
|
||||
case "$url" in
|
||||
http*) echo "$url"; return 0 ;;
|
||||
/*) echo "https://micropython.org$url"; return 0 ;;
|
||||
*) echo "$page$url"; return 0 ;;
|
||||
esac
|
||||
fi
|
||||
done
|
||||
return 1
|
||||
}
|
||||
|
||||
# If LATEST is set and neither FIRMWARE nor FW_URL are provided, auto-detect latest URL
|
||||
if [ -n "${LATEST:-}" ] && [ -z "${FIRMWARE:-}" ] && [ -z "${FW_URL:-}" ]; then
|
||||
# Default board identifiers for each chip
|
||||
case "$CHIP" in
|
||||
esp32c3) BOARD_ID="ESP32_GENERIC_C3" ;;
|
||||
esp32) BOARD_ID="ESP32_GENERIC" ;;
|
||||
*) BOARD_ID="ESP32_GENERIC" ;;
|
||||
esac
|
||||
pattern="${BOARD_ID}-.*\\.bin"
|
||||
echo "Resolving latest firmware for $BOARD_ID"
|
||||
if FW_URL=$(resolve_latest_url "$pattern"); then
|
||||
export FW_URL
|
||||
echo "Latest firmware resolved to: $FW_URL"
|
||||
else
|
||||
echo "Failed to resolve latest firmware for pattern $pattern" >&2
|
||||
exit 1
|
||||
fi
|
||||
fi
|
||||
|
||||
# Resolve firmware path, downloading if needed
|
||||
resolve_firmware() {
|
||||
if [ -z "${FIRMWARE:-}" ]; then
|
||||
if [ -n "${FW_URL:-}" ] || [ -n "${LATEST:-}" ]; then
|
||||
# If FW_URL still unset, resolve latest using board-specific pattern
|
||||
if [ -z "${FW_URL:-}" ]; then
|
||||
case "$CHIP" in
|
||||
esp32c3) BOARD_ID="ESP32_GENERIC_C3" ;;
|
||||
esp32) BOARD_ID="ESP32_GENERIC" ;;
|
||||
*) BOARD_ID="ESP32_GENERIC" ;;
|
||||
esac
|
||||
pattern="${BOARD_ID}-.*\\.bin"
|
||||
echo "Resolving latest firmware for $BOARD_ID"
|
||||
if ! FW_URL=$(resolve_latest_url "$pattern"); then
|
||||
echo "Failed to resolve latest firmware for pattern $pattern" >&2
|
||||
exit 1
|
||||
fi
|
||||
fi
|
||||
mkdir -p .cache
|
||||
FIRMWARE=".cache/$(basename "$FW_URL")"
|
||||
if [ ! -f "$FIRMWARE" ]; then
|
||||
echo "Downloading firmware from $FW_URL to $FIRMWARE"
|
||||
curl -L --fail -o "$FIRMWARE" "$FW_URL"
|
||||
else
|
||||
echo "Firmware already downloaded at $FIRMWARE"
|
||||
fi
|
||||
else
|
||||
# Default fallback: fetch latest using board-specific pattern
|
||||
case "$CHIP" in
|
||||
esp32c3) BOARD_ID="ESP32_GENERIC_C3" ;;
|
||||
esp32) BOARD_ID="ESP32_GENERIC" ;;
|
||||
*) BOARD_ID="ESP32_GENERIC" ;;
|
||||
esac
|
||||
pattern="${BOARD_ID}-.*\\.bin"
|
||||
echo "No FIRMWARE or FW_URL specified. Auto-fetching latest for $BOARD_ID"
|
||||
if ! FW_URL=$(resolve_latest_url "$pattern"); then
|
||||
echo "Failed to resolve latest firmware for pattern $pattern" >&2
|
||||
exit 1
|
||||
fi
|
||||
mkdir -p .cache
|
||||
FIRMWARE=".cache/$(basename "$FW_URL")"
|
||||
if [ ! -f "$FIRMWARE" ]; then
|
||||
echo "Downloading firmware from $FW_URL to $FIRMWARE"
|
||||
curl -L --fail -o "$FIRMWARE" "$FW_URL"
|
||||
else
|
||||
echo "Firmware already downloaded at $FIRMWARE"
|
||||
fi
|
||||
fi
|
||||
else
|
||||
if [ ! -f "$FIRMWARE" ]; then
|
||||
if [ -n "${FW_URL:-}" ]; then
|
||||
mkdir -p "$(dirname "$FIRMWARE")"
|
||||
echo "Firmware not found at $FIRMWARE. Downloading from $FW_URL"
|
||||
curl -L --fail -o "$FIRMWARE" "$FW_URL"
|
||||
else
|
||||
echo "Firmware file not found: $FIRMWARE. Provide FW_URL to download automatically." >&2
|
||||
exit 1
|
||||
fi
|
||||
fi
|
||||
fi
|
||||
}
|
||||
|
||||
# Auto-detect PORT if not specified
|
||||
if [ -z "$PORT" ]; then
|
||||
candidates="$(ls /dev/tty/ACM* /dev/tty/USB* 2>/dev/null || true)"
|
||||
# Some systems expose without /dev/tty/ prefix patterns; try common Linux paths
|
||||
[ -z "$candidates" ] && candidates="$(ls /dev/ttyACM* /dev/ttyUSB* 2>/dev/null || true)"
|
||||
# Prefer ACM (often for C3) then USB
|
||||
PORT=$(printf "%s\n" $candidates | grep -E "/dev/ttyACM[0-9]+" | head -n1 || true)
|
||||
[ -z "$PORT" ] && PORT=$(printf "%s\n" $candidates | grep -E "/dev/ttyUSB[0-9]+" | head -n1 || true)
|
||||
if [ -z "$PORT" ]; then
|
||||
echo "No serial port detected. Connect the board and set PORT=/dev/ttyACM0 (or /dev/ttyUSB0)." >&2
|
||||
exit 1
|
||||
fi
|
||||
echo "Auto-detected PORT=$PORT"
|
||||
fi
|
||||
|
||||
# Preflight: ensure port exists
|
||||
if [ ! -e "$PORT" ]; then
|
||||
echo "Port $PORT does not exist. Detected candidates:" >&2
|
||||
ls /dev/ttyACM* /dev/ttyUSB* 2>/dev/null || true
|
||||
exit 1
|
||||
fi
|
||||
|
||||
ESPL="python -m esptool"
|
||||
|
||||
detect_chip() {
|
||||
# Try to detect actual connected chip using esptool and override if needed
|
||||
out=$($ESPL --port "$PORT" --baud "$BAUD" chip_id 2>&1 || true)
|
||||
case "$out" in
|
||||
*"ESP32-C3"*) DETECTED_CHIP=esp32c3 ;;
|
||||
*"ESP32"*) DETECTED_CHIP=esp32 ;;
|
||||
*) DETECTED_CHIP="" ;;
|
||||
esac
|
||||
if [ -n "$DETECTED_CHIP" ] && [ "$DETECTED_CHIP" != "$ESPT_CHIP" ]; then
|
||||
echo "Detected chip $DETECTED_CHIP differs from requested $ESPT_CHIP. Using detected chip."
|
||||
ESPT_CHIP="$DETECTED_CHIP"
|
||||
case "$ESPT_CHIP" in
|
||||
esp32c3) FLASH_OFFSET=0x0 ;;
|
||||
esp32) FLASH_OFFSET=0x1000 ;;
|
||||
esac
|
||||
fi
|
||||
}
|
||||
|
||||
detect_chip
|
||||
|
||||
# Now that we know the actual chip, resolve the correct firmware for it
|
||||
resolve_firmware
|
||||
|
||||
# Validate firmware matches detected chip; if not, auto-correct by fetching the right image
|
||||
EXPECTED_BOARD_ID="ESP32_GENERIC"
|
||||
case "$ESPT_CHIP" in
|
||||
esp32c3) EXPECTED_BOARD_ID="ESP32_GENERIC_C3" ;;
|
||||
esp32) EXPECTED_BOARD_ID="ESP32_GENERIC" ;;
|
||||
|
||||
esac
|
||||
|
||||
FW_BASENAME="$(basename "$FIRMWARE")"
|
||||
case "$FW_BASENAME" in
|
||||
${EXPECTED_BOARD_ID}-*.bin) : ;; # ok
|
||||
*)
|
||||
echo "Firmware $FW_BASENAME does not match detected chip ($ESPT_CHIP). Fetching correct image for $EXPECTED_BOARD_ID..."
|
||||
pattern="${EXPECTED_BOARD_ID}-.*\\.bin"
|
||||
if ! FW_URL=$(resolve_latest_url "$pattern"); then
|
||||
echo "Failed to resolve a firmware matching $EXPECTED_BOARD_ID" >&2
|
||||
exit 1
|
||||
fi
|
||||
mkdir -p .cache
|
||||
FIRMWARE=".cache/$(basename "$FW_URL")"
|
||||
if [ ! -f "$FIRMWARE" ]; then
|
||||
echo "Downloading firmware from $FW_URL to $FIRMWARE"
|
||||
curl -L --fail -o "$FIRMWARE" "$FW_URL"
|
||||
else
|
||||
echo "Firmware already downloaded at $FIRMWARE"
|
||||
fi
|
||||
;;
|
||||
esac
|
||||
|
||||
$ESPL --chip "$ESPT_CHIP" --port "$PORT" --baud "$BAUD" erase_flash
|
||||
|
||||
echo "Writing firmware $FIRMWARE to $FLASH_OFFSET..."
|
||||
$ESPL --chip "$ESPT_CHIP" --port "$PORT" --baud "$BAUD" write_flash -z "$FLASH_OFFSET" "$FIRMWARE"
|
||||
|
||||
echo "Done."
|
||||
|
||||
|
||||
4
install.sh
Executable file
4
install.sh
Executable file
@@ -0,0 +1,4 @@
|
||||
#!/usr/bin/env bash
|
||||
# Install script - runs pipenv install
|
||||
|
||||
pipenv install "$@"
|
||||
225
lib/microdot/session.py
Normal file
225
lib/microdot/session.py
Normal file
@@ -0,0 +1,225 @@
|
||||
try:
|
||||
import jwt
|
||||
HAS_JWT = True
|
||||
except ImportError:
|
||||
HAS_JWT = False
|
||||
try:
|
||||
import ubinascii
|
||||
except ImportError:
|
||||
import binascii as ubinascii
|
||||
try:
|
||||
import uhashlib as hashlib
|
||||
except ImportError:
|
||||
import hashlib
|
||||
try:
|
||||
import uhmac as hmac
|
||||
except ImportError:
|
||||
try:
|
||||
import hmac
|
||||
except ImportError:
|
||||
hmac = None
|
||||
import json
|
||||
|
||||
from microdot.microdot import invoke_handler
|
||||
from microdot.helpers import wraps
|
||||
|
||||
|
||||
class SessionDict(dict):
|
||||
"""A session dictionary.
|
||||
|
||||
The session dictionary is a standard Python dictionary that has been
|
||||
extended with convenience ``save()`` and ``delete()`` methods.
|
||||
"""
|
||||
def __init__(self, request, session_dict):
|
||||
super().__init__(session_dict)
|
||||
self.request = request
|
||||
|
||||
def save(self):
|
||||
"""Update the session cookie."""
|
||||
self.request.app._session.update(self.request, self)
|
||||
|
||||
def delete(self):
|
||||
"""Delete the session cookie."""
|
||||
self.request.app._session.delete(self.request)
|
||||
|
||||
|
||||
class Session:
|
||||
"""Session handling
|
||||
|
||||
:param app: The application instance.
|
||||
:param secret_key: The secret key, as a string or bytes object.
|
||||
:param cookie_options: A dictionary with cookie options to pass as
|
||||
arguments to :meth:`Response.set_cookie()
|
||||
<microdot.Response.set_cookie>`.
|
||||
"""
|
||||
secret_key = None
|
||||
|
||||
def __init__(self, app=None, secret_key=None, cookie_options=None):
|
||||
self.secret_key = secret_key
|
||||
self.cookie_options = cookie_options or {}
|
||||
if app is not None:
|
||||
self.initialize(app)
|
||||
|
||||
def initialize(self, app, secret_key=None, cookie_options=None):
|
||||
if secret_key is not None:
|
||||
self.secret_key = secret_key
|
||||
if cookie_options is not None:
|
||||
self.cookie_options = cookie_options
|
||||
if 'path' not in self.cookie_options:
|
||||
self.cookie_options['path'] = '/'
|
||||
if 'http_only' not in self.cookie_options:
|
||||
self.cookie_options['http_only'] = True
|
||||
app._session = self
|
||||
|
||||
def get(self, request):
|
||||
"""Retrieve the user session.
|
||||
|
||||
:param request: The client request.
|
||||
|
||||
The return value is a session dictionary with the data stored in the
|
||||
user's session, or ``{}`` if the session data is not available or
|
||||
invalid.
|
||||
"""
|
||||
if not self.secret_key:
|
||||
raise ValueError('The session secret key is not configured')
|
||||
if hasattr(request.g, '_session'):
|
||||
return request.g._session
|
||||
session = request.cookies.get('session')
|
||||
if session is None:
|
||||
request.g._session = SessionDict(request, {})
|
||||
return request.g._session
|
||||
request.g._session = SessionDict(request, self.decode(session))
|
||||
return request.g._session
|
||||
|
||||
def update(self, request, session):
|
||||
"""Update the user session.
|
||||
|
||||
:param request: The client request.
|
||||
:param session: A dictionary with the update session data for the user.
|
||||
|
||||
Applications would normally not call this method directly, instead they
|
||||
would use the :meth:`SessionDict.save` method on the session
|
||||
dictionary, which calls this method. For example::
|
||||
|
||||
@app.route('/')
|
||||
@with_session
|
||||
def index(request, session):
|
||||
session['foo'] = 'bar'
|
||||
session.save()
|
||||
return 'Hello, World!'
|
||||
|
||||
Calling this method adds a cookie with the updated session to the
|
||||
request currently being processed.
|
||||
"""
|
||||
if not self.secret_key:
|
||||
raise ValueError('The session secret key is not configured')
|
||||
|
||||
encoded_session = self.encode(session)
|
||||
|
||||
@request.after_request
|
||||
def _update_session(request, response):
|
||||
response.set_cookie('session', encoded_session,
|
||||
**self.cookie_options)
|
||||
return response
|
||||
|
||||
def delete(self, request):
|
||||
"""Remove the user session.
|
||||
|
||||
:param request: The client request.
|
||||
|
||||
Applications would normally not call this method directly, instead they
|
||||
would use the :meth:`SessionDict.delete` method on the session
|
||||
dictionary, which calls this method. For example::
|
||||
|
||||
@app.route('/')
|
||||
@with_session
|
||||
def index(request, session):
|
||||
session.delete()
|
||||
return 'Hello, World!'
|
||||
|
||||
Calling this method adds a cookie removal header to the request
|
||||
currently being processed.
|
||||
"""
|
||||
@request.after_request
|
||||
def _delete_session(request, response):
|
||||
response.delete_cookie('session', **self.cookie_options)
|
||||
return response
|
||||
|
||||
def encode(self, payload, secret_key=None):
|
||||
"""Encode session data using JWT if available, otherwise use simple HMAC."""
|
||||
if HAS_JWT:
|
||||
return jwt.encode(payload, secret_key or self.secret_key,
|
||||
algorithm='HS256')
|
||||
else:
|
||||
# Simple encoding for MicroPython: base64(json) + HMAC signature
|
||||
key = (secret_key or self.secret_key).encode() if isinstance(secret_key or self.secret_key, str) else (secret_key or self.secret_key)
|
||||
payload_json = json.dumps(payload)
|
||||
payload_b64 = ubinascii.b2a_base64(payload_json.encode()).decode().strip()
|
||||
|
||||
# Create HMAC signature
|
||||
if hmac:
|
||||
# Use hmac module if available
|
||||
h = hmac.new(key, payload_json.encode(), hashlib.sha256)
|
||||
else:
|
||||
# Fallback: simple SHA256(key + message)
|
||||
h = hashlib.sha256(key + payload_json.encode())
|
||||
signature = ubinascii.b2a_base64(h.digest()).decode().strip()
|
||||
|
||||
return f"{payload_b64}.{signature}"
|
||||
|
||||
def decode(self, session, secret_key=None):
|
||||
"""Decode session data using JWT if available, otherwise use simple HMAC."""
|
||||
if HAS_JWT:
|
||||
try:
|
||||
payload = jwt.decode(session, secret_key or self.secret_key,
|
||||
algorithms=['HS256'])
|
||||
except jwt.exceptions.PyJWTError: # pragma: no cover
|
||||
return {}
|
||||
return payload
|
||||
else:
|
||||
try:
|
||||
# Simple decoding for MicroPython
|
||||
if '.' not in session:
|
||||
return {}
|
||||
|
||||
payload_b64, signature = session.rsplit('.', 1)
|
||||
payload_json = ubinascii.a2b_base64(payload_b64).decode()
|
||||
|
||||
# Verify HMAC signature
|
||||
key = (secret_key or self.secret_key).encode() if isinstance(secret_key or self.secret_key, str) else (secret_key or self.secret_key)
|
||||
if hmac:
|
||||
# Use hmac module if available
|
||||
h = hmac.new(key, payload_json.encode(), hashlib.sha256)
|
||||
else:
|
||||
# Fallback: simple SHA256(key + message)
|
||||
h = hashlib.sha256(key + payload_json.encode())
|
||||
expected_signature = ubinascii.b2a_base64(h.digest()).decode().strip()
|
||||
|
||||
if signature != expected_signature:
|
||||
return {}
|
||||
|
||||
return json.loads(payload_json)
|
||||
except Exception:
|
||||
return {}
|
||||
|
||||
|
||||
def with_session(f):
|
||||
"""Decorator that passes the user session to the route handler.
|
||||
|
||||
The session dictionary is passed to the decorated function as an argument
|
||||
after the request object. Example::
|
||||
|
||||
@app.route('/')
|
||||
@with_session
|
||||
def index(request, session):
|
||||
return 'Hello, World!'
|
||||
|
||||
Note that the decorator does not save the session. To update the session,
|
||||
call the :func:`session.save() <microdot.session.SessionDict.save>` method.
|
||||
"""
|
||||
@wraps(f)
|
||||
async def wrapper(request, *args, **kwargs):
|
||||
return await invoke_handler(
|
||||
f, request, request.app._session.get(request), *args, **kwargs)
|
||||
|
||||
return wrapper
|
||||
23
msg.json
Normal file
23
msg.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"g":{
|
||||
"df": {
|
||||
"pt": "on",
|
||||
"cl": ["#ff0000"],
|
||||
"br": 200,
|
||||
"n1": 10,
|
||||
"n2": 10,
|
||||
"n3": 10,
|
||||
"n4": 10,
|
||||
"n5": 10,
|
||||
"n6": 10,
|
||||
"dl": 100
|
||||
},
|
||||
"dj": {
|
||||
"pt": "blink",
|
||||
"cl": ["#00ff00"],
|
||||
"dl": 500
|
||||
}
|
||||
},
|
||||
"sv": true,
|
||||
"st": 0
|
||||
}
|
||||
173
run_web.py
Normal file
173
run_web.py
Normal file
@@ -0,0 +1,173 @@
|
||||
#!/usr/bin/env python3
|
||||
"""
|
||||
Local development web server - imports and runs main.py with port 5000
|
||||
"""
|
||||
|
||||
import sys
|
||||
import os
|
||||
import asyncio
|
||||
|
||||
# Add src and lib to path
|
||||
sys.path.insert(0, os.path.join(os.path.dirname(__file__), 'src'))
|
||||
sys.path.insert(0, os.path.join(os.path.dirname(__file__), 'lib'))
|
||||
|
||||
# Import the main module
|
||||
from src import main as main_module
|
||||
|
||||
# Override the port in the main function
|
||||
async def run_local():
|
||||
"""Run main with port 5000 for local development."""
|
||||
from settings import Settings
|
||||
import gc
|
||||
|
||||
# Mock MicroPython modules for local development
|
||||
class MockMachine:
|
||||
class WDT:
|
||||
def __init__(self, timeout):
|
||||
pass
|
||||
def feed(self):
|
||||
pass
|
||||
import sys as sys_module
|
||||
sys_module.modules['machine'] = MockMachine()
|
||||
|
||||
class MockESPNow:
|
||||
def __init__(self):
|
||||
self.active_value = False
|
||||
self.peers = []
|
||||
def active(self, value):
|
||||
self.active_value = value
|
||||
print(f"[MOCK] ESPNow active: {value}")
|
||||
def add_peer(self, peer):
|
||||
self.peers.append(peer)
|
||||
print(f"[MOCK] Added peer: {peer.hex() if hasattr(peer, 'hex') else peer}")
|
||||
async def asend(self, peer, data):
|
||||
print(f"[MOCK] Would send to {peer.hex() if hasattr(peer, 'hex') else peer}: {data}")
|
||||
|
||||
class MockAIOESPNow:
|
||||
def __init__(self):
|
||||
pass
|
||||
def active(self, value):
|
||||
return MockESPNow()
|
||||
def add_peer(self, peer):
|
||||
pass
|
||||
|
||||
class MockNetwork:
|
||||
class WLAN:
|
||||
def __init__(self, interface):
|
||||
self.interface = interface
|
||||
def active(self, value):
|
||||
print(f"[MOCK] WLAN({self.interface}) active: {value}")
|
||||
STA_IF = 0
|
||||
|
||||
# Replace MicroPython modules with mocks
|
||||
sys_module.modules['aioespnow'] = type('module', (), {'AIOESPNow': MockESPNow})()
|
||||
sys_module.modules['network'] = MockNetwork()
|
||||
|
||||
# Mock gc if needed
|
||||
if not hasattr(gc, 'collect'):
|
||||
class MockGC:
|
||||
def collect(self):
|
||||
pass
|
||||
gc = MockGC()
|
||||
|
||||
settings = Settings()
|
||||
print("Starting LED Controller Web Server (Local Development)")
|
||||
print("=" * 60)
|
||||
|
||||
# Mock network
|
||||
import network
|
||||
network.WLAN(network.STA_IF).active(True)
|
||||
|
||||
# Mock ESPNow
|
||||
import aioespnow
|
||||
e = aioespnow.AIOESPNow()
|
||||
e.active(True)
|
||||
e.add_peer(b"\xbb\xbb\xbb\xbb\xbb\xbb")
|
||||
|
||||
from microdot import Microdot, send_file
|
||||
from microdot.websocket import with_websocket
|
||||
|
||||
from microdot.session import Session
|
||||
|
||||
import controllers.preset as preset
|
||||
import controllers.profile as profile
|
||||
import controllers.group as group
|
||||
import controllers.sequence as sequence
|
||||
import controllers.tab as tab
|
||||
import controllers.palette as palette
|
||||
import controllers.scene as scene
|
||||
import controllers.pattern as pattern
|
||||
import controllers.settings as settings_controller
|
||||
|
||||
app = Microdot()
|
||||
|
||||
# Initialize sessions with a secret key from settings
|
||||
secret_key = settings.get('session_secret_key', 'led-controller-secret-key-change-in-production')
|
||||
Session(app, secret_key=secret_key)
|
||||
|
||||
# Mount model controllers as subroutes
|
||||
app.mount(preset.controller, '/presets')
|
||||
app.mount(profile.controller, '/profiles')
|
||||
app.mount(group.controller, '/groups')
|
||||
app.mount(sequence.controller, '/sequences')
|
||||
app.mount(tab.controller, '/tabs')
|
||||
app.mount(palette.controller, '/palettes')
|
||||
app.mount(scene.controller, '/scenes')
|
||||
app.mount(pattern.controller, '/patterns')
|
||||
app.mount(settings_controller.controller, '/settings')
|
||||
|
||||
# Serve index.html at root
|
||||
@app.route('/')
|
||||
def index(request):
|
||||
"""Serve the main web UI."""
|
||||
return send_file('src/templates/index.html')
|
||||
|
||||
# Serve settings page
|
||||
@app.route('/settings')
|
||||
def settings_page(request):
|
||||
"""Serve the settings page."""
|
||||
return send_file('src/templates/settings.html')
|
||||
|
||||
# Favicon: avoid 404 in browser console (no file needed)
|
||||
@app.route('/favicon.ico')
|
||||
def favicon(request):
|
||||
return '', 204
|
||||
|
||||
# Static file route
|
||||
@app.route("/static/<path:path>")
|
||||
def static_handler(request, path):
|
||||
"""Serve static files."""
|
||||
if '..' in path:
|
||||
return 'Not found', 404
|
||||
return send_file('src/static/' + path)
|
||||
|
||||
@app.route('/ws')
|
||||
@with_websocket
|
||||
async def ws(request, ws):
|
||||
while True:
|
||||
data = await ws.receive()
|
||||
if data:
|
||||
await e.asend(b"\xbb\xbb\xbb\xbb\xbb\xbb", data)
|
||||
print(data)
|
||||
else:
|
||||
break
|
||||
|
||||
# Use port 5000 for local development
|
||||
port = 5000
|
||||
print(f"Starting server on http://0.0.0.0:{port}")
|
||||
print(f"Open http://localhost:{port} in your browser")
|
||||
print("=" * 60)
|
||||
|
||||
try:
|
||||
await app.start_server(host="0.0.0.0", port=port, debug=True)
|
||||
except KeyboardInterrupt:
|
||||
print("\nShutting down server...")
|
||||
|
||||
if __name__ == '__main__':
|
||||
# Change to project root
|
||||
os.chdir(os.path.dirname(os.path.abspath(__file__)))
|
||||
# Override settings path for local development
|
||||
import settings as settings_module
|
||||
settings_module.Settings.SETTINGS_FILE = os.path.join(os.getcwd(), 'settings.json')
|
||||
|
||||
asyncio.run(run_local())
|
||||
44
send_empty_json.py
Normal file
44
send_empty_json.py
Normal file
@@ -0,0 +1,44 @@
|
||||
#!/usr/bin/env python3
|
||||
import socket
|
||||
import struct
|
||||
import base64
|
||||
import hashlib
|
||||
|
||||
# Connect to the WebSocket
|
||||
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
|
||||
s.connect(('192.168.4.1', 80))
|
||||
|
||||
# Send HTTP WebSocket upgrade request
|
||||
key = base64.b64encode(b'test-nonce').decode('utf-8')
|
||||
request = f'''GET /ws HTTP/1.1\r
|
||||
Host: 192.168.4.1\r
|
||||
Upgrade: websocket\r
|
||||
Connection: Upgrade\r
|
||||
Sec-WebSocket-Key: {key}\r
|
||||
Sec-WebSocket-Version: 13\r
|
||||
\r
|
||||
'''
|
||||
s.send(request.encode())
|
||||
|
||||
# Read upgrade response
|
||||
response = s.recv(4096)
|
||||
print(response.decode())
|
||||
|
||||
# Send WebSocket TEXT frame with empty JSON '{}'
|
||||
payload = b'{}'
|
||||
mask = b'\x12\x34\x56\x78'
|
||||
payload_masked = bytes(p ^ mask[i % 4] for i, p in enumerate(payload))
|
||||
|
||||
frame = struct.pack('BB', 0x81, 0x80 | len(payload))
|
||||
frame += mask
|
||||
frame += payload_masked
|
||||
|
||||
s.send(frame)
|
||||
print("Sent empty JSON to WebSocket")
|
||||
s.close()
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
1
settings.json
Normal file
1
settings.json
Normal file
@@ -0,0 +1 @@
|
||||
{"session_secret_key": "06a2a6ac631cc8db0658373b37f7fe922a8a3ed3a27229e1adb5448cb368f2b7"}
|
||||
21
src/boot.py
21
src/boot.py
@@ -1,19 +1,8 @@
|
||||
import wifi
|
||||
import time
|
||||
import settings
|
||||
import util.wifi as wifi
|
||||
from settings import Settings
|
||||
|
||||
print(wifi.ap('qwerty'))
|
||||
s = Settings()
|
||||
|
||||
|
||||
settings = Settings()
|
||||
ssid = settings.get('wifi', {}).get('ssid', None)
|
||||
password = settings.get('wifi', {}).get('password', None)
|
||||
ip = settings.get('wifi', {}).get('ip', None)
|
||||
gateway = settings.get('wifi', {}).get('gateway', None)
|
||||
|
||||
for i in range(10):
|
||||
config = wifi.connect(ssid, password, ip, gateway)
|
||||
if config:
|
||||
print(config)
|
||||
break
|
||||
time.sleep(0.1)
|
||||
name = s.get('name', 'led-controller')
|
||||
wifi.ap(name, '')
|
||||
|
||||
1
src/controllers/__init__.py
Normal file
1
src/controllers/__init__.py
Normal file
@@ -0,0 +1 @@
|
||||
# Controllers package
|
||||
50
src/controllers/group.py
Normal file
50
src/controllers/group.py
Normal file
@@ -0,0 +1,50 @@
|
||||
from microdot import Microdot
|
||||
from models.group import Group
|
||||
import json
|
||||
|
||||
controller = Microdot()
|
||||
groups = Group()
|
||||
|
||||
@controller.get('')
|
||||
async def list_groups(request):
|
||||
"""List all groups."""
|
||||
return json.dumps(groups), 200, {'Content-Type': 'application/json'}
|
||||
|
||||
@controller.get('/<id>')
|
||||
async def get_group(request, id):
|
||||
"""Get a specific group by ID."""
|
||||
group = groups.read(id)
|
||||
if group:
|
||||
return json.dumps(group), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Group not found"}), 404
|
||||
|
||||
@controller.post('')
|
||||
async def create_group(request):
|
||||
"""Create a new group."""
|
||||
try:
|
||||
data = request.json or {}
|
||||
name = data.get("name", "")
|
||||
group_id = groups.create(name)
|
||||
if data:
|
||||
groups.update(group_id, data)
|
||||
return json.dumps(groups.read(group_id)), 201, {'Content-Type': 'application/json'}
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
@controller.put('/<id>')
|
||||
async def update_group(request, id):
|
||||
"""Update an existing group."""
|
||||
try:
|
||||
data = request.json
|
||||
if groups.update(id, data):
|
||||
return json.dumps(groups.read(id)), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Group not found"}), 404
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
@controller.delete('/<id>')
|
||||
async def delete_group(request, id):
|
||||
"""Delete a group."""
|
||||
if groups.delete(id):
|
||||
return json.dumps({"message": "Group deleted successfully"}), 200
|
||||
return json.dumps({"error": "Group not found"}), 404
|
||||
63
src/controllers/palette.py
Normal file
63
src/controllers/palette.py
Normal file
@@ -0,0 +1,63 @@
|
||||
from microdot import Microdot
|
||||
from models.pallet import Palette
|
||||
import json
|
||||
|
||||
controller = Microdot()
|
||||
palettes = Palette()
|
||||
|
||||
@controller.get('')
|
||||
async def list_palettes(request):
|
||||
"""List all palettes."""
|
||||
data = {}
|
||||
for pid in palettes.list():
|
||||
colors = palettes.read(pid)
|
||||
data[pid] = colors
|
||||
return json.dumps(data), 200, {'Content-Type': 'application/json'}
|
||||
|
||||
@controller.get('/<id>')
|
||||
async def get_palette(request, id):
|
||||
"""Get a specific palette by ID."""
|
||||
palette = palettes.read(id)
|
||||
if palette:
|
||||
return json.dumps({"colors": palette, "id": str(id)}), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Palette not found"}), 404
|
||||
|
||||
@controller.post('')
|
||||
async def create_palette(request):
|
||||
"""Create a new palette."""
|
||||
try:
|
||||
data = request.json or {}
|
||||
colors = data.get("colors", None)
|
||||
# Palette no longer needs a name; only colors are stored.
|
||||
palette_id = palettes.create("", colors)
|
||||
palette = palettes.read(palette_id) or {}
|
||||
# Include the ID in the response payload so clients can link it.
|
||||
palette_with_id = {"id": str(palette_id)}
|
||||
palette_with_id.update(palette)
|
||||
return json.dumps(palette_with_id), 201, {'Content-Type': 'application/json'}
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
@controller.put('/<id>')
|
||||
async def update_palette(request, id):
|
||||
"""Update an existing palette."""
|
||||
try:
|
||||
data = request.json or {}
|
||||
# Ignore any name field; only colors are relevant.
|
||||
if "name" in data:
|
||||
data.pop("name", None)
|
||||
if palettes.update(id, data):
|
||||
palette = palettes.read(id) or {}
|
||||
palette_with_id = {"id": str(id)}
|
||||
palette_with_id.update(palette)
|
||||
return json.dumps(palette_with_id), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Palette not found"}), 404
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
@controller.delete('/<id>')
|
||||
async def delete_palette(request, id):
|
||||
"""Delete a palette."""
|
||||
if palettes.delete(id):
|
||||
return json.dumps({"message": "Palette deleted successfully"}), 200
|
||||
return json.dumps({"error": "Palette not found"}), 404
|
||||
77
src/controllers/pattern.py
Normal file
77
src/controllers/pattern.py
Normal file
@@ -0,0 +1,77 @@
|
||||
from microdot import Microdot
|
||||
from models.pattern import Pattern
|
||||
import json
|
||||
import sys
|
||||
|
||||
controller = Microdot()
|
||||
patterns = Pattern()
|
||||
|
||||
def load_pattern_definitions():
|
||||
"""Load pattern definitions from pattern.json file."""
|
||||
try:
|
||||
# Try different paths for local development vs MicroPython
|
||||
paths = ['db/pattern.json', 'pattern.json', '/db/pattern.json']
|
||||
for path in paths:
|
||||
try:
|
||||
with open(path, 'r') as f:
|
||||
return json.load(f)
|
||||
except OSError:
|
||||
continue
|
||||
return {}
|
||||
except Exception as e:
|
||||
print(f"Error loading pattern.json: {e}")
|
||||
return {}
|
||||
|
||||
@controller.get('/definitions')
|
||||
async def get_pattern_definitions(request):
|
||||
"""Get pattern definitions from pattern.json."""
|
||||
definitions = load_pattern_definitions()
|
||||
return json.dumps(definitions), 200, {'Content-Type': 'application/json'}
|
||||
|
||||
@controller.get('')
|
||||
async def list_patterns(request):
|
||||
"""List all patterns."""
|
||||
return json.dumps(patterns), 200, {'Content-Type': 'application/json'}
|
||||
|
||||
|
||||
@controller.get('/<id>')
|
||||
async def get_pattern(request, id):
|
||||
"""Get a specific pattern by ID."""
|
||||
pattern = patterns.read(id)
|
||||
if pattern is not None:
|
||||
return json.dumps(pattern), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Pattern not found"}), 404
|
||||
|
||||
|
||||
@controller.post('')
|
||||
async def create_pattern(request):
|
||||
"""Create a new pattern."""
|
||||
try:
|
||||
data = request.json or {}
|
||||
name = data.get("name", "")
|
||||
pattern_id = patterns.create(name, data.get("data", {}))
|
||||
if data:
|
||||
patterns.update(pattern_id, data)
|
||||
return json.dumps(patterns.read(pattern_id)), 201, {'Content-Type': 'application/json'}
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
|
||||
@controller.put('/<id>')
|
||||
async def update_pattern(request, id):
|
||||
"""Update an existing pattern."""
|
||||
try:
|
||||
data = request.json
|
||||
if patterns.update(id, data):
|
||||
return json.dumps(patterns.read(id)), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Pattern not found"}), 404
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
|
||||
@controller.delete('/<id>')
|
||||
async def delete_pattern(request, id):
|
||||
"""Delete a pattern."""
|
||||
if patterns.delete(id):
|
||||
return json.dumps({"message": "Pattern deleted successfully"}), 200
|
||||
return json.dumps({"error": "Pattern not found"}), 404
|
||||
204
src/controllers/preset.py
Normal file
204
src/controllers/preset.py
Normal file
@@ -0,0 +1,204 @@
|
||||
from microdot import Microdot
|
||||
from microdot.session import with_session
|
||||
from models.preset import Preset
|
||||
from models.profile import Profile
|
||||
from models.espnow import ESPNow
|
||||
from util.espnow_message import build_message, build_preset_dict, ESPNOW_MAX_PAYLOAD_BYTES
|
||||
import asyncio
|
||||
import json
|
||||
|
||||
controller = Microdot()
|
||||
presets = Preset()
|
||||
profiles = Profile()
|
||||
|
||||
def get_current_profile_id(session=None):
|
||||
"""Get the current active profile ID from session or fallback to first."""
|
||||
profile_list = profiles.list()
|
||||
session_profile = None
|
||||
if session is not None:
|
||||
session_profile = session.get('current_profile')
|
||||
if session_profile and session_profile in profile_list:
|
||||
return session_profile
|
||||
if profile_list:
|
||||
return profile_list[0]
|
||||
return None
|
||||
|
||||
@controller.get('')
|
||||
@with_session
|
||||
async def list_presets(request, session):
|
||||
"""List presets for the current profile."""
|
||||
current_profile_id = get_current_profile_id(session)
|
||||
if not current_profile_id:
|
||||
return json.dumps({}), 200, {'Content-Type': 'application/json'}
|
||||
scoped = {
|
||||
pid: pdata for pid, pdata in presets.items()
|
||||
if isinstance(pdata, dict) and str(pdata.get("profile_id")) == str(current_profile_id)
|
||||
}
|
||||
return json.dumps(scoped), 200, {'Content-Type': 'application/json'}
|
||||
|
||||
@controller.get('/<id>')
|
||||
@with_session
|
||||
async def get_preset(request, id, session):
|
||||
"""Get a specific preset by ID (current profile only)."""
|
||||
preset = presets.read(id)
|
||||
current_profile_id = get_current_profile_id(session)
|
||||
if preset and str(preset.get("profile_id")) == str(current_profile_id):
|
||||
return json.dumps(preset), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Preset not found"}), 404
|
||||
|
||||
@controller.post('')
|
||||
@with_session
|
||||
async def create_preset(request, session):
|
||||
"""Create a new preset for the current profile."""
|
||||
try:
|
||||
try:
|
||||
data = request.json or {}
|
||||
except Exception:
|
||||
return json.dumps({"error": "Invalid JSON"}), 400, {'Content-Type': 'application/json'}
|
||||
current_profile_id = get_current_profile_id(session)
|
||||
if not current_profile_id:
|
||||
return json.dumps({"error": "No profile available"}), 404
|
||||
preset_id = presets.create(current_profile_id)
|
||||
if not isinstance(data, dict):
|
||||
data = {}
|
||||
data = dict(data)
|
||||
data["profile_id"] = str(current_profile_id)
|
||||
if presets.update(preset_id, data):
|
||||
preset_data = presets.read(preset_id)
|
||||
return json.dumps({preset_id: preset_data}), 201, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Failed to create preset"}), 400
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
@controller.put('/<id>')
|
||||
@with_session
|
||||
async def update_preset(request, id, session):
|
||||
"""Update an existing preset (current profile only)."""
|
||||
try:
|
||||
preset = presets.read(id)
|
||||
current_profile_id = get_current_profile_id(session)
|
||||
if not preset or str(preset.get("profile_id")) != str(current_profile_id):
|
||||
return json.dumps({"error": "Preset not found"}), 404
|
||||
try:
|
||||
data = request.json or {}
|
||||
except Exception:
|
||||
return json.dumps({"error": "Invalid JSON"}), 400, {'Content-Type': 'application/json'}
|
||||
if not isinstance(data, dict):
|
||||
data = {}
|
||||
data = dict(data)
|
||||
data["profile_id"] = str(current_profile_id)
|
||||
if presets.update(id, data):
|
||||
return json.dumps(presets.read(id)), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Preset not found"}), 404
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
@controller.delete('/<id>')
|
||||
@with_session
|
||||
async def delete_preset(request, id, session):
|
||||
"""Delete a preset (current profile only)."""
|
||||
preset = presets.read(id)
|
||||
current_profile_id = get_current_profile_id(session)
|
||||
if not preset or str(preset.get("profile_id")) != str(current_profile_id):
|
||||
return json.dumps({"error": "Preset not found"}), 404
|
||||
if presets.delete(id):
|
||||
return json.dumps({"message": "Preset deleted successfully"}), 200
|
||||
return json.dumps({"error": "Preset not found"}), 404
|
||||
|
||||
|
||||
@controller.post('/send')
|
||||
@with_session
|
||||
async def send_presets(request, session):
|
||||
"""
|
||||
Send one or more presets over ESPNow.
|
||||
|
||||
Body JSON:
|
||||
{"preset_ids": ["1", "2", ...]} or {"ids": ["1", "2", ...]}
|
||||
|
||||
The controller:
|
||||
- looks up each preset in the Preset model
|
||||
- converts them to API-compliant format
|
||||
- splits into <= 240-byte ESPNow messages
|
||||
- sends each message to all configured ESPNow peers.
|
||||
"""
|
||||
try:
|
||||
data = request.json or {}
|
||||
except Exception:
|
||||
return json.dumps({"error": "Invalid JSON"}), 400, {'Content-Type': 'application/json'}
|
||||
|
||||
preset_ids = data.get('preset_ids') or data.get('ids')
|
||||
if not isinstance(preset_ids, list) or not preset_ids:
|
||||
return json.dumps({"error": "preset_ids must be a non-empty list"}), 400, {'Content-Type': 'application/json'}
|
||||
save_flag = data.get('save', True)
|
||||
save_flag = bool(save_flag)
|
||||
default_id = data.get('default')
|
||||
|
||||
# Build API-compliant preset map keyed by preset ID, include name
|
||||
current_profile_id = get_current_profile_id(session)
|
||||
presets_by_name = {}
|
||||
for pid in preset_ids:
|
||||
preset_data = presets.read(str(pid))
|
||||
if not preset_data:
|
||||
continue
|
||||
if str(preset_data.get("profile_id")) != str(current_profile_id):
|
||||
continue
|
||||
preset_key = str(pid)
|
||||
preset_payload = build_preset_dict(preset_data)
|
||||
preset_payload["name"] = preset_data.get("name", "")
|
||||
presets_by_name[preset_key] = preset_payload
|
||||
|
||||
if not presets_by_name:
|
||||
return json.dumps({"error": "No matching presets found"}), 404, {'Content-Type': 'application/json'}
|
||||
|
||||
if default_id is not None and str(default_id) not in presets_by_name:
|
||||
default_id = None
|
||||
|
||||
# Use shared ESPNow singleton
|
||||
esp = ESPNow()
|
||||
|
||||
async def send_chunk(chunk_presets):
|
||||
# Include save flag so the led-driver can persist when desired.
|
||||
msg = build_message(presets=chunk_presets, save=save_flag, default=default_id)
|
||||
await esp.send(msg)
|
||||
|
||||
MAX_BYTES = ESPNOW_MAX_PAYLOAD_BYTES
|
||||
SEND_DELAY_MS = 100
|
||||
entries = list(presets_by_name.items())
|
||||
total_presets = len(entries)
|
||||
messages_sent = 0
|
||||
|
||||
batch = {}
|
||||
last_msg = None
|
||||
for name, preset_obj in entries:
|
||||
test_batch = dict(batch)
|
||||
test_batch[name] = preset_obj
|
||||
test_msg = build_message(presets=test_batch, save=save_flag, default=default_id)
|
||||
size = len(test_msg)
|
||||
|
||||
if size <= MAX_BYTES or not batch:
|
||||
batch = test_batch
|
||||
last_msg = test_msg
|
||||
else:
|
||||
try:
|
||||
await send_chunk(batch)
|
||||
except Exception:
|
||||
return json.dumps({"error": "ESP-NOW send failed"}), 503, {'Content-Type': 'application/json'}
|
||||
await asyncio.sleep_ms(SEND_DELAY_MS)
|
||||
messages_sent += 1
|
||||
batch = {name: preset_obj}
|
||||
last_msg = build_message(presets=batch, save=save_flag, default=default_id)
|
||||
|
||||
if batch:
|
||||
try:
|
||||
await send_chunk(batch)
|
||||
except Exception:
|
||||
return json.dumps({"error": "ESP-NOW send failed"}), 503, {'Content-Type': 'application/json'}
|
||||
await asyncio.sleep_ms(SEND_DELAY_MS)
|
||||
messages_sent += 1
|
||||
|
||||
return json.dumps({
|
||||
"message": "Presets sent via ESPNow",
|
||||
"presets_sent": total_presets,
|
||||
"messages_sent": messages_sent
|
||||
}), 200, {'Content-Type': 'application/json'}
|
||||
|
||||
242
src/controllers/profile.py
Normal file
242
src/controllers/profile.py
Normal file
@@ -0,0 +1,242 @@
|
||||
from microdot import Microdot
|
||||
from microdot.session import with_session
|
||||
from models.profile import Profile
|
||||
from models.tab import Tab
|
||||
from models.preset import Preset
|
||||
import json
|
||||
|
||||
controller = Microdot()
|
||||
profiles = Profile()
|
||||
tabs = Tab()
|
||||
presets = Preset()
|
||||
|
||||
@controller.get('')
|
||||
@with_session
|
||||
async def list_profiles(request, session):
|
||||
"""List all profiles with current profile info."""
|
||||
profile_list = profiles.list()
|
||||
current_id = session.get('current_profile')
|
||||
if current_id and current_id not in profile_list:
|
||||
current_id = None
|
||||
|
||||
# If no current profile in session, use first one
|
||||
if not current_id and profile_list:
|
||||
current_id = profile_list[0]
|
||||
session['current_profile'] = str(current_id)
|
||||
session.save()
|
||||
|
||||
# Build profiles object
|
||||
profiles_data = {}
|
||||
for profile_id in profile_list:
|
||||
profile_data = profiles.read(profile_id)
|
||||
if profile_data:
|
||||
profiles_data[profile_id] = profile_data
|
||||
|
||||
return json.dumps({
|
||||
"profiles": profiles_data,
|
||||
"current_profile_id": current_id
|
||||
}), 200, {'Content-Type': 'application/json'}
|
||||
|
||||
@controller.get('/current')
|
||||
@with_session
|
||||
async def get_current_profile(request, session):
|
||||
"""Get the current profile ID from session (or fallback)."""
|
||||
profile_list = profiles.list()
|
||||
current_id = session.get('current_profile')
|
||||
if current_id and current_id not in profile_list:
|
||||
current_id = None
|
||||
if not current_id and profile_list:
|
||||
current_id = profile_list[0]
|
||||
session['current_profile'] = str(current_id)
|
||||
session.save()
|
||||
if current_id:
|
||||
profile = profiles.read(current_id)
|
||||
return json.dumps({"id": current_id, "profile": profile}), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "No profile available"}), 404
|
||||
|
||||
@controller.get('/<id>')
|
||||
@with_session
|
||||
async def get_profile(request, id, session):
|
||||
"""Get a specific profile by ID."""
|
||||
# Handle 'current' as a special case
|
||||
if id == 'current':
|
||||
return await get_current_profile(request, session)
|
||||
|
||||
profile = profiles.read(id)
|
||||
if profile:
|
||||
return json.dumps(profile), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Profile not found"}), 404
|
||||
|
||||
@controller.post('/<id>/apply')
|
||||
@with_session
|
||||
async def apply_profile(request, session, id):
|
||||
"""Apply a profile by saving it to session."""
|
||||
if not profiles.read(id):
|
||||
return json.dumps({"error": "Profile not found"}), 404
|
||||
session['current_profile'] = str(id)
|
||||
session.save()
|
||||
return json.dumps({"message": "Profile applied", "id": str(id)}), 200, {'Content-Type': 'application/json'}
|
||||
|
||||
@controller.post('')
|
||||
async def create_profile(request):
|
||||
"""Create a new profile."""
|
||||
try:
|
||||
data = request.json or {}
|
||||
name = data.get("name", "")
|
||||
profile_id = profiles.create(name)
|
||||
if data:
|
||||
profiles.update(profile_id, data)
|
||||
profile_data = profiles.read(profile_id)
|
||||
return json.dumps({profile_id: profile_data}), 201, {'Content-Type': 'application/json'}
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
@controller.post('/<id>/clone')
|
||||
async def clone_profile(request, id):
|
||||
"""Clone an existing profile along with its tabs and palette."""
|
||||
try:
|
||||
source = profiles.read(id)
|
||||
if not source:
|
||||
return json.dumps({"error": "Profile not found"}), 404
|
||||
|
||||
data = request.json or {}
|
||||
source_name = source.get("name") or f"Profile {id}"
|
||||
new_name = data.get("name") or source_name
|
||||
profile_type = source.get("type", "tabs")
|
||||
|
||||
def allocate_id(model, cache):
|
||||
if "next" not in cache:
|
||||
max_id = max((int(k) for k in model.keys() if str(k).isdigit()), default=0)
|
||||
cache["next"] = max_id + 1
|
||||
next_id = str(cache["next"])
|
||||
cache["next"] += 1
|
||||
return next_id
|
||||
|
||||
def map_preset_container(value, id_map, preset_cache, new_profile_id, new_presets):
|
||||
if isinstance(value, list):
|
||||
return [map_preset_container(v, id_map, preset_cache, new_profile_id, new_presets) for v in value]
|
||||
if value is None:
|
||||
return None
|
||||
preset_id = str(value)
|
||||
if preset_id in id_map:
|
||||
return id_map[preset_id]
|
||||
preset_data = presets.read(preset_id)
|
||||
if not preset_data:
|
||||
return None
|
||||
new_preset_id = allocate_id(presets, preset_cache)
|
||||
clone_data = dict(preset_data)
|
||||
clone_data["profile_id"] = str(new_profile_id)
|
||||
new_presets[new_preset_id] = clone_data
|
||||
id_map[preset_id] = new_preset_id
|
||||
return new_preset_id
|
||||
|
||||
# Prepare new IDs without writing until everything is ready.
|
||||
profile_cache = {}
|
||||
palette_cache = {}
|
||||
tab_cache = {}
|
||||
preset_cache = {}
|
||||
|
||||
new_profile_id = allocate_id(profiles, profile_cache)
|
||||
new_palette_id = allocate_id(profiles._palette_model, palette_cache)
|
||||
|
||||
# Clone palette colors into the new profile's palette
|
||||
src_palette_id = source.get("palette_id")
|
||||
palette_colors = []
|
||||
if src_palette_id:
|
||||
try:
|
||||
palette_colors = profiles._palette_model.read(src_palette_id)
|
||||
except Exception:
|
||||
palette_colors = []
|
||||
|
||||
# Clone tabs and presets used by those tabs
|
||||
source_tabs = source.get("tabs")
|
||||
if not isinstance(source_tabs, list) or len(source_tabs) == 0:
|
||||
source_tabs = source.get("tab_order", [])
|
||||
source_tabs = source_tabs or []
|
||||
cloned_tab_ids = []
|
||||
preset_id_map = {}
|
||||
new_tabs = {}
|
||||
new_presets = {}
|
||||
for tab_id in source_tabs:
|
||||
tab = tabs.read(tab_id)
|
||||
if not tab:
|
||||
continue
|
||||
tab_name = tab.get("name") or f"Tab {tab_id}"
|
||||
clone_name = tab_name
|
||||
mapped_presets = map_preset_container(tab.get("presets"), preset_id_map, preset_cache, new_profile_id, new_presets)
|
||||
clone_id = allocate_id(tabs, tab_cache)
|
||||
clone_data = {
|
||||
"name": clone_name,
|
||||
"names": tab.get("names") or [],
|
||||
"presets": mapped_presets if mapped_presets is not None else []
|
||||
}
|
||||
extra = {k: v for k, v in tab.items() if k not in ("name", "names", "presets")}
|
||||
if "presets_flat" in extra:
|
||||
extra["presets_flat"] = map_preset_container(extra.get("presets_flat"), preset_id_map, preset_cache, new_profile_id, new_presets)
|
||||
if extra:
|
||||
clone_data.update(extra)
|
||||
new_tabs[clone_id] = clone_data
|
||||
cloned_tab_ids.append(clone_id)
|
||||
|
||||
new_profile_data = {
|
||||
"name": new_name,
|
||||
"type": profile_type,
|
||||
"tabs": cloned_tab_ids,
|
||||
"scenes": list(source.get("scenes", [])) if isinstance(source.get("scenes", []), list) else [],
|
||||
"palette_id": str(new_palette_id),
|
||||
}
|
||||
|
||||
# Commit all changes and save once per model.
|
||||
profiles._palette_model[str(new_palette_id)] = list(palette_colors) if palette_colors else []
|
||||
for pid, pdata in new_presets.items():
|
||||
presets[pid] = pdata
|
||||
for tid, tdata in new_tabs.items():
|
||||
tabs[tid] = tdata
|
||||
profiles[str(new_profile_id)] = new_profile_data
|
||||
|
||||
profiles._palette_model.save()
|
||||
presets.save()
|
||||
tabs.save()
|
||||
profiles.save()
|
||||
|
||||
return json.dumps({new_profile_id: new_profile_data}), 201, {'Content-Type': 'application/json'}
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
@controller.put('/current')
|
||||
@with_session
|
||||
async def update_current_profile(request, session):
|
||||
"""Update the current profile using session (or fallback)."""
|
||||
try:
|
||||
data = request.json or {}
|
||||
profile_list = profiles.list()
|
||||
current_id = session.get('current_profile')
|
||||
if not current_id and profile_list:
|
||||
current_id = profile_list[0]
|
||||
session['current_profile'] = str(current_id)
|
||||
session.save()
|
||||
if not current_id:
|
||||
return json.dumps({"error": "No profile available"}), 404
|
||||
if profiles.update(current_id, data):
|
||||
return json.dumps(profiles.read(current_id)), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Profile not found"}), 404
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
@controller.put('/<id>')
|
||||
async def update_profile(request, id):
|
||||
"""Update an existing profile."""
|
||||
try:
|
||||
data = request.json
|
||||
if profiles.update(id, data):
|
||||
return json.dumps(profiles.read(id)), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Profile not found"}), 404
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
@controller.delete('/<id>')
|
||||
async def delete_profile(request, id):
|
||||
"""Delete a profile."""
|
||||
if profiles.delete(id):
|
||||
return json.dumps({"message": "Profile deleted successfully"}), 200
|
||||
return json.dumps({"error": "Profile not found"}), 404
|
||||
49
src/controllers/scene.py
Normal file
49
src/controllers/scene.py
Normal file
@@ -0,0 +1,49 @@
|
||||
from microdot import Microdot
|
||||
from models.scene import Scene
|
||||
import json
|
||||
|
||||
controller = Microdot()
|
||||
scenes = Scene()
|
||||
|
||||
@controller.get('')
|
||||
async def list_scenes(request):
|
||||
"""List all scenes."""
|
||||
return json.dumps(scenes), 200, {'Content-Type': 'application/json'}
|
||||
|
||||
@controller.get('/<id>')
|
||||
async def get_scene(request, id):
|
||||
"""Get a specific scene by ID."""
|
||||
scene = scenes.read(id)
|
||||
if scene:
|
||||
return json.dumps(scene), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Scene not found"}), 404
|
||||
|
||||
@controller.post('')
|
||||
async def create_scene(request):
|
||||
"""Create a new scene."""
|
||||
try:
|
||||
data = request.json
|
||||
scene_id = scenes.create()
|
||||
if scenes.update(scene_id, data):
|
||||
return json.dumps(scenes.read(scene_id)), 201, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Failed to create scene"}), 400
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
@controller.put('/<id>')
|
||||
async def update_scene(request, id):
|
||||
"""Update an existing scene."""
|
||||
try:
|
||||
data = request.json
|
||||
if scenes.update(id, data):
|
||||
return json.dumps(scenes.read(id)), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Scene not found"}), 404
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
@controller.delete('/<id>')
|
||||
async def delete_scene(request, id):
|
||||
"""Delete a scene."""
|
||||
if scenes.delete(id):
|
||||
return json.dumps({"message": "Scene deleted successfully"}), 200
|
||||
return json.dumps({"error": "Scene not found"}), 404
|
||||
51
src/controllers/sequence.py
Normal file
51
src/controllers/sequence.py
Normal file
@@ -0,0 +1,51 @@
|
||||
from microdot import Microdot
|
||||
from models.squence import Sequence
|
||||
import json
|
||||
|
||||
controller = Microdot()
|
||||
sequences = Sequence()
|
||||
|
||||
@controller.get('')
|
||||
async def list_sequences(request):
|
||||
"""List all sequences."""
|
||||
return json.dumps(sequences), 200, {'Content-Type': 'application/json'}
|
||||
|
||||
@controller.get('/<id>')
|
||||
async def get_sequence(request, id):
|
||||
"""Get a specific sequence by ID."""
|
||||
sequence = sequences.read(id)
|
||||
if sequence:
|
||||
return json.dumps(sequence), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Sequence not found"}), 404
|
||||
|
||||
@controller.post('')
|
||||
async def create_sequence(request):
|
||||
"""Create a new sequence."""
|
||||
try:
|
||||
data = request.json or {}
|
||||
group_name = data.get("group_name", "")
|
||||
preset_names = data.get("presets", None)
|
||||
sequence_id = sequences.create(group_name, preset_names)
|
||||
if data:
|
||||
sequences.update(sequence_id, data)
|
||||
return json.dumps(sequences.read(sequence_id)), 201, {'Content-Type': 'application/json'}
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
@controller.put('/<id>')
|
||||
async def update_sequence(request, id):
|
||||
"""Update an existing sequence."""
|
||||
try:
|
||||
data = request.json
|
||||
if sequences.update(id, data):
|
||||
return json.dumps(sequences.read(id)), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Sequence not found"}), 404
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
@controller.delete('/<id>')
|
||||
async def delete_sequence(request, id):
|
||||
"""Delete a sequence."""
|
||||
if sequences.delete(id):
|
||||
return json.dumps({"message": "Sequence deleted successfully"}), 200
|
||||
return json.dumps({"error": "Sequence not found"}), 404
|
||||
80
src/controllers/settings.py
Normal file
80
src/controllers/settings.py
Normal file
@@ -0,0 +1,80 @@
|
||||
from microdot import Microdot, send_file
|
||||
from settings import Settings
|
||||
import util.wifi as wifi
|
||||
import json
|
||||
|
||||
controller = Microdot()
|
||||
settings = Settings()
|
||||
|
||||
@controller.get('')
|
||||
async def get_settings(request):
|
||||
"""Get all settings."""
|
||||
# Settings is already a dict subclass; avoid dict() wrapper which can
|
||||
# trigger MicroPython's "dict update sequence has wrong length" quirk.
|
||||
return json.dumps(settings), 200, {'Content-Type': 'application/json'}
|
||||
|
||||
@controller.get('/wifi/ap')
|
||||
async def get_ap_config(request):
|
||||
"""Get Access Point configuration."""
|
||||
config = wifi.get_ap_config()
|
||||
if config:
|
||||
# Also get saved settings
|
||||
config['saved_ssid'] = settings.get('wifi_ap_ssid')
|
||||
config['saved_password'] = settings.get('wifi_ap_password')
|
||||
config['saved_channel'] = settings.get('wifi_ap_channel')
|
||||
return json.dumps(config), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Failed to get AP config"}), 500
|
||||
|
||||
@controller.post('/wifi/ap')
|
||||
async def configure_ap(request):
|
||||
"""Configure Access Point."""
|
||||
try:
|
||||
data = request.json
|
||||
ssid = data.get('ssid')
|
||||
password = data.get('password', '')
|
||||
channel = data.get('channel')
|
||||
|
||||
if not ssid:
|
||||
return json.dumps({"error": "SSID is required"}), 400
|
||||
|
||||
# Validate channel (1-11 for 2.4GHz)
|
||||
if channel is not None:
|
||||
channel = int(channel)
|
||||
if channel < 1 or channel > 11:
|
||||
return json.dumps({"error": "Channel must be between 1 and 11"}), 400
|
||||
|
||||
# Save to settings
|
||||
settings['wifi_ap_ssid'] = ssid
|
||||
settings['wifi_ap_password'] = password
|
||||
if channel is not None:
|
||||
settings['wifi_ap_channel'] = channel
|
||||
settings.save()
|
||||
|
||||
# Configure AP
|
||||
wifi.ap(ssid, password, channel)
|
||||
|
||||
return json.dumps({
|
||||
"message": "AP configured successfully",
|
||||
"ssid": ssid,
|
||||
"channel": channel
|
||||
}), 200, {'Content-Type': 'application/json'}
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 500
|
||||
|
||||
@controller.put('/settings')
|
||||
async def update_settings(request):
|
||||
"""Update general settings."""
|
||||
try:
|
||||
data = request.json
|
||||
for key, value in data.items():
|
||||
settings[key] = value
|
||||
settings.save()
|
||||
return json.dumps({"message": "Settings updated successfully"}), 200, {'Content-Type': 'application/json'}
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 500
|
||||
|
||||
@controller.get('/page')
|
||||
async def settings_page(request):
|
||||
"""Serve the settings page."""
|
||||
return send_file('templates/settings.html')
|
||||
|
||||
346
src/controllers/tab.py
Normal file
346
src/controllers/tab.py
Normal file
@@ -0,0 +1,346 @@
|
||||
from microdot import Microdot, send_file
|
||||
from microdot.session import with_session
|
||||
from models.tab import Tab
|
||||
from models.profile import Profile
|
||||
import json
|
||||
import os
|
||||
import time
|
||||
|
||||
controller = Microdot()
|
||||
tabs = Tab()
|
||||
profiles = Profile()
|
||||
|
||||
def get_current_profile_id(session=None):
|
||||
"""Get the current active profile ID from session or fallback to first."""
|
||||
profile_list = profiles.list()
|
||||
session_profile = None
|
||||
if session is not None:
|
||||
session_profile = session.get('current_profile')
|
||||
if session_profile and session_profile in profile_list:
|
||||
return session_profile
|
||||
if profile_list:
|
||||
return profile_list[0]
|
||||
return None
|
||||
|
||||
def get_profile_tab_order(profile_id):
|
||||
"""Get the tab order for a profile."""
|
||||
if not profile_id:
|
||||
return []
|
||||
profile = profiles.read(profile_id)
|
||||
if profile:
|
||||
# Support both "tab_order" (old) and "tabs" (new) format
|
||||
return profile.get("tabs", profile.get("tab_order", []))
|
||||
return []
|
||||
|
||||
def get_current_tab_id(request, session=None):
|
||||
"""Get the current tab ID from cookie."""
|
||||
# Read from cookie first
|
||||
current_tab = request.cookies.get('current_tab')
|
||||
if current_tab:
|
||||
return current_tab
|
||||
|
||||
# Fallback to first tab in current profile
|
||||
profile_id = get_current_profile_id(session)
|
||||
if profile_id:
|
||||
profile = profiles.read(profile_id)
|
||||
if profile:
|
||||
# Support both "tabs" (new) and "tab_order" (old) format
|
||||
tabs_list = profile.get("tabs", profile.get("tab_order", []))
|
||||
if tabs_list:
|
||||
return tabs_list[0]
|
||||
return None
|
||||
|
||||
def _render_tabs_list_fragment(request, session):
|
||||
"""Helper function to render tabs list HTML fragment."""
|
||||
profile_id = get_current_profile_id(session)
|
||||
# #region agent log
|
||||
try:
|
||||
os.makedirs('/home/pi/led-controller/.cursor', exist_ok=True)
|
||||
with open('/home/pi/led-controller/.cursor/debug.log', 'a') as _log:
|
||||
_log.write(json.dumps({
|
||||
"sessionId": "debug-session",
|
||||
"runId": "tabs-pre-fix",
|
||||
"hypothesisId": "H1",
|
||||
"location": "src/controllers/tab.py:_render_tabs_list_fragment",
|
||||
"message": "tabs list fragment",
|
||||
"data": {
|
||||
"profile_id": profile_id,
|
||||
"profile_count": len(profiles.list())
|
||||
},
|
||||
"timestamp": int(time.time() * 1000)
|
||||
}) + "\n")
|
||||
except Exception:
|
||||
pass
|
||||
# #endregion
|
||||
if not profile_id:
|
||||
return '<div class="tabs-list">No profile selected</div>', 200, {'Content-Type': 'text/html'}
|
||||
|
||||
tab_order = get_profile_tab_order(profile_id)
|
||||
current_tab_id = get_current_tab_id(request, session)
|
||||
|
||||
html = '<div class="tabs-list">'
|
||||
for tab_id in tab_order:
|
||||
tab_data = tabs.read(tab_id)
|
||||
if tab_data:
|
||||
active_class = 'active' if str(tab_id) == str(current_tab_id) else ''
|
||||
tab_name = tab_data.get('name', 'Tab ' + str(tab_id))
|
||||
html += (
|
||||
'<button class="tab-button ' + active_class + '" '
|
||||
'hx-get="/tabs/' + str(tab_id) + '/content-fragment" '
|
||||
'hx-target="#tab-content" '
|
||||
'hx-swap="innerHTML" '
|
||||
'hx-push-url="true" '
|
||||
'hx-trigger="click" '
|
||||
'onclick="document.querySelectorAll(\'.tab-button\').forEach(b => b.classList.remove(\'active\')); this.classList.add(\'active\');">'
|
||||
+ tab_name +
|
||||
'</button>'
|
||||
)
|
||||
html += '</div>'
|
||||
return html, 200, {'Content-Type': 'text/html'}
|
||||
|
||||
def _render_tab_content_fragment(request, session, id):
|
||||
"""Helper function to render tab content HTML fragment."""
|
||||
# Handle 'current' as a special case
|
||||
if id == 'current':
|
||||
current_tab_id = get_current_tab_id(request, session)
|
||||
if not current_tab_id:
|
||||
accept_header = request.headers.get('Accept', '')
|
||||
wants_html = 'text/html' in accept_header
|
||||
if wants_html:
|
||||
return '<div class="error">No current tab set</div>', 404, {'Content-Type': 'text/html'}
|
||||
return json.dumps({"error": "No current tab set"}), 404
|
||||
id = current_tab_id
|
||||
|
||||
tab = tabs.read(id)
|
||||
if not tab:
|
||||
return '<div>Tab not found</div>', 404, {'Content-Type': 'text/html'}
|
||||
|
||||
# Set this tab as the current tab in session
|
||||
session['current_tab'] = str(id)
|
||||
session.save()
|
||||
|
||||
# If this is a direct page load (not HTMX), return full UI so CSS loads.
|
||||
if not request.headers.get('HX-Request'):
|
||||
return send_file('templates/index.html')
|
||||
|
||||
tab_name = tab.get('name', 'Tab ' + str(id))
|
||||
|
||||
html = (
|
||||
'<div class="presets-section" data-tab-id="' + str(id) + '">'
|
||||
'<h3>Presets</h3>'
|
||||
'<div class="profiles-actions" style="margin-bottom: 1rem;"></div>'
|
||||
'<div id="presets-list-tab" class="presets-list">'
|
||||
'<!-- Presets will be loaded here -->'
|
||||
'</div>'
|
||||
'</div>'
|
||||
)
|
||||
return html, 200, {'Content-Type': 'text/html'}
|
||||
|
||||
@controller.get('')
|
||||
@with_session
|
||||
async def list_tabs(request, session):
|
||||
"""List all tabs with current tab info."""
|
||||
profile_id = get_current_profile_id(session)
|
||||
current_tab_id = get_current_tab_id(request, session)
|
||||
|
||||
# Get tab order for current profile
|
||||
tab_order = get_profile_tab_order(profile_id) if profile_id else []
|
||||
|
||||
# Build tabs list with metadata
|
||||
tabs_data = {}
|
||||
for tab_id in tabs.list():
|
||||
tab_data = tabs.read(tab_id)
|
||||
if tab_data:
|
||||
tabs_data[tab_id] = tab_data
|
||||
|
||||
return json.dumps({
|
||||
"tabs": tabs_data,
|
||||
"tab_order": tab_order,
|
||||
"current_tab_id": current_tab_id,
|
||||
"profile_id": profile_id
|
||||
}), 200, {'Content-Type': 'application/json'}
|
||||
|
||||
# Get current tab - returns JSON with tab data and content info
|
||||
@controller.get('/current')
|
||||
@with_session
|
||||
async def get_current_tab(request, session):
|
||||
"""Get the current tab from session."""
|
||||
current_tab_id = get_current_tab_id(request, session)
|
||||
if not current_tab_id:
|
||||
return json.dumps({"error": "No current tab set", "tab": None, "tab_id": None}), 404
|
||||
|
||||
tab = tabs.read(current_tab_id)
|
||||
if tab:
|
||||
return json.dumps({
|
||||
"tab": tab,
|
||||
"tab_id": current_tab_id
|
||||
}), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Tab not found", "tab": None, "tab_id": None}), 404
|
||||
|
||||
@controller.post('/<id>/set-current')
|
||||
async def set_current_tab(request, id):
|
||||
"""Set a tab as the current tab in cookie."""
|
||||
tab = tabs.read(id)
|
||||
if not tab:
|
||||
return json.dumps({"error": "Tab not found"}), 404
|
||||
|
||||
# Set cookie with current tab
|
||||
response_data = json.dumps({"message": "Current tab set", "tab_id": id})
|
||||
response = response_data, 200, {
|
||||
'Content-Type': 'application/json',
|
||||
'Set-Cookie': f'current_tab={id}; Path=/; Max-Age=31536000' # 1 year expiry
|
||||
}
|
||||
return response
|
||||
|
||||
@controller.get('/<id>')
|
||||
async def get_tab(request, id):
|
||||
"""Get a specific tab by ID."""
|
||||
tab = tabs.read(id)
|
||||
if tab:
|
||||
return json.dumps(tab), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Tab not found"}), 404
|
||||
|
||||
@controller.put('/<id>')
|
||||
async def update_tab(request, id):
|
||||
"""Update an existing tab."""
|
||||
try:
|
||||
data = request.json
|
||||
if tabs.update(id, data):
|
||||
return json.dumps(tabs.read(id)), 200, {'Content-Type': 'application/json'}
|
||||
return json.dumps({"error": "Tab not found"}), 404
|
||||
except Exception as e:
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
@controller.delete('/<id>')
|
||||
@with_session
|
||||
async def delete_tab(request, session, id):
|
||||
"""Delete a tab."""
|
||||
try:
|
||||
# Handle 'current' tab ID
|
||||
if id == 'current':
|
||||
current_tab_id = get_current_tab_id(request, session)
|
||||
if current_tab_id:
|
||||
id = current_tab_id
|
||||
else:
|
||||
return json.dumps({"error": "No current tab to delete"}), 404
|
||||
|
||||
if tabs.delete(id):
|
||||
# Remove from profile's tabs
|
||||
profile_id = get_current_profile_id(session)
|
||||
if profile_id:
|
||||
profile = profiles.read(profile_id)
|
||||
if profile:
|
||||
# Support both "tabs" (new) and "tab_order" (old) format
|
||||
tabs_list = profile.get('tabs', profile.get('tab_order', []))
|
||||
if id in tabs_list:
|
||||
tabs_list.remove(id)
|
||||
profile['tabs'] = tabs_list
|
||||
# Remove old tab_order if it exists
|
||||
if 'tab_order' in profile:
|
||||
del profile['tab_order']
|
||||
profiles.update(profile_id, profile)
|
||||
|
||||
# Clear cookie if the deleted tab was the current tab
|
||||
current_tab_id = get_current_tab_id(request, session)
|
||||
if current_tab_id == id:
|
||||
response_data = json.dumps({"message": "Tab deleted successfully"})
|
||||
response = response_data, 200, {
|
||||
'Content-Type': 'application/json',
|
||||
'Set-Cookie': 'current_tab=; Path=/; Max-Age=0' # Clear cookie
|
||||
}
|
||||
return response
|
||||
|
||||
return json.dumps({"message": "Tab deleted successfully"}), 200, {'Content-Type': 'application/json'}
|
||||
|
||||
return json.dumps({"error": "Tab not found"}), 404
|
||||
except Exception as e:
|
||||
import sys
|
||||
try:
|
||||
sys.print_exception(e)
|
||||
except:
|
||||
pass
|
||||
return json.dumps({"error": str(e)}), 500, {'Content-Type': 'application/json'}
|
||||
|
||||
@controller.post('')
|
||||
@with_session
|
||||
async def create_tab(request, session):
|
||||
"""Create a new tab."""
|
||||
try:
|
||||
# Handle form data or JSON
|
||||
if request.form:
|
||||
name = request.form.get('name', '').strip()
|
||||
ids_str = request.form.get('ids', '1').strip()
|
||||
names = [id.strip() for id in ids_str.split(',') if id.strip()]
|
||||
preset_ids = None
|
||||
else:
|
||||
data = request.json or {}
|
||||
name = data.get("name", "")
|
||||
names = data.get("names", None)
|
||||
preset_ids = data.get("presets", None)
|
||||
|
||||
if not name:
|
||||
return json.dumps({"error": "Tab name cannot be empty"}), 400
|
||||
|
||||
tab_id = tabs.create(name, names, preset_ids)
|
||||
|
||||
# Add to current profile's tabs
|
||||
profile_id = get_current_profile_id(session)
|
||||
if profile_id:
|
||||
profile = profiles.read(profile_id)
|
||||
if profile:
|
||||
# Support both "tabs" (new) and "tab_order" (old) format
|
||||
tabs_list = profile.get('tabs', profile.get('tab_order', []))
|
||||
if tab_id not in tabs_list:
|
||||
tabs_list.append(tab_id)
|
||||
profile['tabs'] = tabs_list
|
||||
# Remove old tab_order if it exists
|
||||
if 'tab_order' in profile:
|
||||
del profile['tab_order']
|
||||
profiles.update(profile_id, profile)
|
||||
|
||||
# Return JSON response with tab ID
|
||||
tab_data = tabs.read(tab_id)
|
||||
return json.dumps({tab_id: tab_data}), 201, {'Content-Type': 'application/json'}
|
||||
except Exception as e:
|
||||
import sys
|
||||
sys.print_exception(e)
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
|
||||
@controller.post('/<id>/clone')
|
||||
@with_session
|
||||
async def clone_tab(request, session, id):
|
||||
"""Clone an existing tab and add it to the current profile."""
|
||||
try:
|
||||
source = tabs.read(id)
|
||||
if not source:
|
||||
return json.dumps({"error": "Tab not found"}), 404
|
||||
|
||||
data = request.json or {}
|
||||
source_name = source.get("name") or f"Tab {id}"
|
||||
new_name = data.get("name") or f"{source_name} Copy"
|
||||
clone_id = tabs.create(new_name, source.get("names"), source.get("presets"))
|
||||
extra = {k: v for k, v in source.items() if k not in ("name", "names", "presets")}
|
||||
if extra:
|
||||
tabs.update(clone_id, extra)
|
||||
|
||||
profile_id = get_current_profile_id(session)
|
||||
if profile_id:
|
||||
profile = profiles.read(profile_id)
|
||||
if profile:
|
||||
tabs_list = profile.get('tabs', profile.get('tab_order', []))
|
||||
if clone_id not in tabs_list:
|
||||
tabs_list.append(clone_id)
|
||||
profile['tabs'] = tabs_list
|
||||
if 'tab_order' in profile:
|
||||
del profile['tab_order']
|
||||
profiles.update(profile_id, profile)
|
||||
|
||||
tab_data = tabs.read(clone_id)
|
||||
return json.dumps({clone_id: tab_data}), 201, {'Content-Type': 'application/json'}
|
||||
except Exception as e:
|
||||
import sys
|
||||
try:
|
||||
sys.print_exception(e)
|
||||
except:
|
||||
pass
|
||||
return json.dumps({"error": str(e)}), 400
|
||||
165
src/main.py
165
src/main.py
@@ -1,55 +1,146 @@
|
||||
import asyncio
|
||||
from settings import Settings
|
||||
from web import web
|
||||
from patterns import Patterns
|
||||
import gc
|
||||
import utime
|
||||
import json
|
||||
import machine
|
||||
import ntptime
|
||||
import time
|
||||
import wifi
|
||||
|
||||
|
||||
async def main():
|
||||
|
||||
from machine import Pin
|
||||
from microdot import Microdot, send_file
|
||||
from microdot.websocket import with_websocket
|
||||
from microdot.session import Session
|
||||
from settings import Settings
|
||||
|
||||
import aioespnow
|
||||
import controllers.preset as preset
|
||||
import controllers.profile as profile
|
||||
import controllers.group as group
|
||||
import controllers.sequence as sequence
|
||||
import controllers.tab as tab
|
||||
import controllers.palette as palette
|
||||
import controllers.scene as scene
|
||||
import controllers.pattern as pattern
|
||||
import controllers.settings as settings_controller
|
||||
from models.espnow import ESPNow
|
||||
from util.espnow_message import split_espnow_message
|
||||
|
||||
|
||||
async def main(port=80):
|
||||
settings = Settings()
|
||||
|
||||
patterns = Patterns(4, settings["num_leds"], selected=settings["selected_pattern"])
|
||||
patterns.set_color1(tuple(int(settings["color1"][i:i+2], 16) for i in (1, 5, 3)))
|
||||
patterns.set_color2(tuple(int(settings["color2"][i:i+2], 16) for i in (1, 5, 3)))
|
||||
patterns.set_brightness(int(settings["brightness"]))
|
||||
patterns.set_delay(int(settings["delay"]))
|
||||
|
||||
w = web(settings, patterns)
|
||||
print(settings)
|
||||
# start the server in a bacakground task
|
||||
print("Starting")
|
||||
server = asyncio.create_task(w.start_server(host="0.0.0.0", port=80))
|
||||
wdt = machine.WDT(timeout=10000)
|
||||
wdt.feed()
|
||||
|
||||
async def tick():
|
||||
# Initialize ESPNow singleton (config + peers)
|
||||
esp = ESPNow()
|
||||
|
||||
app = Microdot()
|
||||
|
||||
# Initialize sessions with a secret key from settings
|
||||
secret_key = settings.get('session_secret_key', 'led-controller-secret-key-change-in-production')
|
||||
Session(app, secret_key=secret_key)
|
||||
|
||||
# Mount model controllers as subroutes
|
||||
# Verify controllers are Microdot instances before mounting
|
||||
controllers_to_mount = [
|
||||
('/presets', preset, 'preset'),
|
||||
('/profiles', profile, 'profile'),
|
||||
('/groups', group, 'group'),
|
||||
('/sequences', sequence, 'sequence'),
|
||||
('/tabs', tab, 'tab'),
|
||||
('/palettes', palette, 'palette'),
|
||||
('/scenes', scene, 'scene'),
|
||||
]
|
||||
|
||||
# Mount model controllers as subroutes
|
||||
app.mount(preset.controller, '/presets')
|
||||
app.mount(profile.controller, '/profiles')
|
||||
app.mount(group.controller, '/groups')
|
||||
app.mount(sequence.controller, '/sequences')
|
||||
app.mount(tab.controller, '/tabs')
|
||||
app.mount(palette.controller, '/palettes')
|
||||
app.mount(scene.controller, '/scenes')
|
||||
app.mount(pattern.controller, '/patterns')
|
||||
app.mount(settings_controller.controller, '/settings')
|
||||
|
||||
# Serve index.html at root
|
||||
@app.route('/')
|
||||
def index(request):
|
||||
"""Serve the main web UI."""
|
||||
return send_file('templates/index.html')
|
||||
|
||||
# Serve settings page
|
||||
@app.route('/settings')
|
||||
def settings_page(request):
|
||||
"""Serve the settings page."""
|
||||
return send_file('templates/settings.html')
|
||||
|
||||
# Favicon: avoid 404 in browser console (no file needed)
|
||||
@app.route('/favicon.ico')
|
||||
def favicon(request):
|
||||
return '', 204
|
||||
|
||||
# Static file route
|
||||
@app.route("/static/<path:path>")
|
||||
def static_handler(request, path):
|
||||
"""Serve static files."""
|
||||
if '..' in path:
|
||||
# Directory traversal is not allowed
|
||||
return 'Not found', 404
|
||||
return send_file('static/' + path)
|
||||
|
||||
@app.route('/ws')
|
||||
@with_websocket
|
||||
async def ws(request, ws):
|
||||
while True:
|
||||
patterns.tick()
|
||||
await asyncio.sleep_ms(1)
|
||||
data = await ws.receive()
|
||||
print(data)
|
||||
if data:
|
||||
# Debug: log incoming WebSocket data
|
||||
try:
|
||||
parsed = json.loads(data)
|
||||
print("WS received JSON:", parsed)
|
||||
except Exception:
|
||||
print("WS received raw:", data)
|
||||
|
||||
asyncio.create_task(tick())
|
||||
# Forward JSON over ESPNow; split into multiple frames if > 250 bytes
|
||||
try:
|
||||
try:
|
||||
parsed = json.loads(data)
|
||||
chunks = split_espnow_message(parsed)
|
||||
except (json.JSONDecodeError, ValueError):
|
||||
chunks = [data]
|
||||
for i, chunk in enumerate(chunks):
|
||||
if i > 0:
|
||||
await asyncio.sleep_ms(100)
|
||||
await esp.send(chunk)
|
||||
except Exception:
|
||||
try:
|
||||
await ws.send(json.dumps({"error": "ESP-NOW send failed"}))
|
||||
except Exception:
|
||||
pass
|
||||
else:
|
||||
break
|
||||
|
||||
first = True
|
||||
|
||||
|
||||
server = asyncio.create_task(app.start_server(host="0.0.0.0", port=port))
|
||||
|
||||
#wdt = machine.WDT(timeout=10000)
|
||||
#wdt.feed()
|
||||
|
||||
# Initialize heartbeat LED (XIAO ESP32S3 built-in LED on GPIO 21)
|
||||
|
||||
led = Pin(15, Pin.OUT)
|
||||
|
||||
|
||||
led_state = False
|
||||
|
||||
while True:
|
||||
#print(time.localtime())
|
||||
|
||||
# gc.collect()
|
||||
gc.collect()
|
||||
for i in range(60):
|
||||
wdt.feed()
|
||||
#wdt.feed()
|
||||
# Heartbeat: toggle LED every 500 ms
|
||||
|
||||
led.value(not led.value())
|
||||
await asyncio.sleep_ms(500)
|
||||
|
||||
# cleanup before ending the application
|
||||
await server
|
||||
|
||||
asyncio.run(main())
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
asyncio.run(main())
|
||||
|
||||
1
src/models/__init__.py
Normal file
1
src/models/__init__.py
Normal file
@@ -0,0 +1 @@
|
||||
# Models package
|
||||
69
src/models/espnow.py
Normal file
69
src/models/espnow.py
Normal file
@@ -0,0 +1,69 @@
|
||||
import network
|
||||
|
||||
import aioespnow
|
||||
|
||||
|
||||
class ESPNow:
|
||||
"""
|
||||
Singleton ESPNow helper:
|
||||
- Manages a single AIOESPNow instance
|
||||
- Adds a single broadcast-like peer
|
||||
- Exposes async send(data) to send to that peer.
|
||||
"""
|
||||
|
||||
_instance = None
|
||||
|
||||
def __new__(cls, *args, **kwargs):
|
||||
if cls._instance is None:
|
||||
cls._instance = super().__new__(cls)
|
||||
return cls._instance
|
||||
|
||||
def __init__(self):
|
||||
if getattr(self, "_initialized", False):
|
||||
return
|
||||
|
||||
# ESP-NOW requires a WiFi interface to be active (STA or AP). Activate STA
|
||||
# so ESP-NOW has an interface to use; we don't need to connect to an AP.
|
||||
try:
|
||||
sta = network.WLAN(network.STA_IF)
|
||||
sta.active(True)
|
||||
except Exception as e:
|
||||
print("ESPNow: STA active failed:", e)
|
||||
|
||||
self._esp = aioespnow.AIOESPNow()
|
||||
self._esp.active(True)
|
||||
|
||||
try:
|
||||
self._esp.add_peer(b"\xff\xff\xff\xff\xff\xff")
|
||||
except Exception:
|
||||
# Ignore add_peer failures (e.g. duplicate)
|
||||
pass
|
||||
|
||||
self._initialized = True
|
||||
|
||||
|
||||
async def send(self, data):
|
||||
"""
|
||||
Async send to the broadcast peer.
|
||||
- data: bytes or str (JSON)
|
||||
"""
|
||||
if isinstance(data, str):
|
||||
payload = data.encode()
|
||||
else:
|
||||
payload = data
|
||||
|
||||
# Debug: show what we're sending and its size
|
||||
try:
|
||||
preview = payload.decode('utf-8')
|
||||
except Exception:
|
||||
preview = str(payload)
|
||||
if len(preview) > 200:
|
||||
preview = preview[:200] + "...(truncated)"
|
||||
print("ESPNow.send len=", len(payload), "payload=", preview)
|
||||
|
||||
try:
|
||||
await self._esp.asend(b"\xff\xff\xff\xff\xff\xff", payload)
|
||||
except Exception as e:
|
||||
print("ESPNow.send error:", e)
|
||||
raise
|
||||
|
||||
51
src/models/group.py
Normal file
51
src/models/group.py
Normal file
@@ -0,0 +1,51 @@
|
||||
from models.model import Model
|
||||
|
||||
class Group(Model):
|
||||
def __init__(self):
|
||||
super().__init__()
|
||||
|
||||
def create(self, name=""):
|
||||
next_id = self.get_next_id()
|
||||
self[next_id] = {
|
||||
"name": name,
|
||||
"devices": [],
|
||||
"pattern": "on",
|
||||
"colors": ["000000", "FF0000"],
|
||||
"brightness": 100,
|
||||
"delay": 100,
|
||||
"step_offset": 0,
|
||||
"step_increment": 1,
|
||||
"n1": 0,
|
||||
"n2": 0,
|
||||
"n3": 0,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0,
|
||||
"n7": 0,
|
||||
"n8": 0
|
||||
}
|
||||
self.save()
|
||||
return next_id
|
||||
|
||||
def read(self, id):
|
||||
id_str = str(id)
|
||||
return self.get(id_str, None)
|
||||
|
||||
def update(self, id, data):
|
||||
id_str = str(id)
|
||||
if id_str not in self:
|
||||
return False
|
||||
self[id_str].update(data)
|
||||
self.save()
|
||||
return True
|
||||
|
||||
def delete(self, id):
|
||||
id_str = str(id)
|
||||
if id_str not in self:
|
||||
return False
|
||||
self.pop(id_str)
|
||||
self.save()
|
||||
return True
|
||||
|
||||
def list(self):
|
||||
return list(self.keys())
|
||||
104
src/models/model.py
Normal file
104
src/models/model.py
Normal file
@@ -0,0 +1,104 @@
|
||||
import json
|
||||
import os
|
||||
|
||||
class Model(dict):
|
||||
def __new__(cls, *args, **kwargs):
|
||||
# Singleton pattern: return existing instance if it exists
|
||||
if not hasattr(cls, '_instance'):
|
||||
cls._instance = super().__new__(cls)
|
||||
return cls._instance
|
||||
|
||||
def __init__(self):
|
||||
# Only initialize once (check if already initialized)
|
||||
if hasattr(self, '_initialized'):
|
||||
return
|
||||
|
||||
# Create /db directory if it doesn't exist (MicroPython compatible)
|
||||
try:
|
||||
os.mkdir("/db")
|
||||
except OSError:
|
||||
pass # Directory already exists, which is fine
|
||||
self.class_name = self.__class__.__name__
|
||||
self.file = f"/db/{self.class_name.lower()}.json"
|
||||
super().__init__()
|
||||
|
||||
self.load() # Load settings from file during initialization
|
||||
self._initialized = True
|
||||
|
||||
def set_defaults(self):
|
||||
self.clear()
|
||||
|
||||
def get_next_id(self):
|
||||
"""Get the next available ID for creating a new record."""
|
||||
if not self:
|
||||
return "1"
|
||||
max_id = max((int(k) for k in self.keys() if k.isdigit()), default=0)
|
||||
return str(max_id + 1)
|
||||
|
||||
def save(self):
|
||||
try:
|
||||
# Ensure directory exists
|
||||
try:
|
||||
os.mkdir("/db")
|
||||
except OSError:
|
||||
pass # Directory already exists
|
||||
j = json.dumps(self)
|
||||
with open(self.file, 'w') as file:
|
||||
file.write(j)
|
||||
file.flush() # Ensure data is written to buffer
|
||||
# Try to sync filesystem if available (MicroPython)
|
||||
try:
|
||||
os.sync()
|
||||
except (AttributeError, OSError):
|
||||
pass # os.sync() not available on all platforms
|
||||
print(f"{self.class_name} saved successfully to {self.file}")
|
||||
except Exception as e:
|
||||
print(f"Error saving {self.class_name} to {self.file}: {e}")
|
||||
import sys
|
||||
sys.print_exception(e)
|
||||
|
||||
def load(self):
|
||||
try:
|
||||
# Check if file exists first
|
||||
try:
|
||||
with open(self.file, 'r') as file:
|
||||
content = file.read().strip()
|
||||
except OSError:
|
||||
# File doesn't exist
|
||||
raise
|
||||
|
||||
if not content:
|
||||
# Empty file
|
||||
loaded_settings = {}
|
||||
else:
|
||||
# Parse JSON content
|
||||
loaded_settings = json.loads(content)
|
||||
|
||||
# Verify it's a dictionary
|
||||
if not isinstance(loaded_settings, dict):
|
||||
raise ValueError(f"File does not contain a dictionary, got {type(loaded_settings)}")
|
||||
|
||||
# Clear and update with loaded data
|
||||
# Clear first
|
||||
self.clear()
|
||||
# Manually copy items to avoid any update() method issues
|
||||
for key, value in loaded_settings.items():
|
||||
self[key] = value
|
||||
print(f"{self.class_name} loaded successfully.")
|
||||
except OSError as e:
|
||||
# File doesn't exist yet - this is normal on first run
|
||||
# Create an empty file with defaults
|
||||
self.set_defaults()
|
||||
self.save()
|
||||
print(f"{self.class_name} initialized (new file created).")
|
||||
except ValueError:
|
||||
# JSON parsing error - file exists but is corrupted
|
||||
# Note: MicroPython uses ValueError for JSON errors, not JSONDecodeError
|
||||
print(f"Error loading {self.class_name}: Invalid JSON format. Resetting to defaults.")
|
||||
self.set_defaults()
|
||||
self.save()
|
||||
except Exception:
|
||||
# Other unexpected errors - avoid trying to format exception to prevent further errors
|
||||
print(f"Error loading {self.class_name}. Resetting to defaults.")
|
||||
self.set_defaults()
|
||||
self.save()
|
||||
45
src/models/pallet.py
Normal file
45
src/models/pallet.py
Normal file
@@ -0,0 +1,45 @@
|
||||
from models.model import Model
|
||||
|
||||
class Palette(Model):
|
||||
def __init__(self):
|
||||
super().__init__()
|
||||
|
||||
def create(self, name="", colors=None):
|
||||
next_id = self.get_next_id()
|
||||
# Store palette as a simple list of colors; name is ignored.
|
||||
self[next_id] = list(colors) if colors else []
|
||||
self.save()
|
||||
return next_id
|
||||
|
||||
def read(self, id):
|
||||
id_str = str(id)
|
||||
value = self.get(id_str, None)
|
||||
# Backwards compatibility: if stored as {"colors": [...]}, unwrap.
|
||||
if isinstance(value, dict) and "colors" in value:
|
||||
return value.get("colors") or []
|
||||
# Otherwise, expect a list of colors.
|
||||
return value or []
|
||||
|
||||
def update(self, id, data):
|
||||
id_str = str(id)
|
||||
if id_str not in self:
|
||||
return False
|
||||
# Accept either {"colors": [...]} or a raw list.
|
||||
if isinstance(data, dict):
|
||||
colors = data.get("colors", [])
|
||||
else:
|
||||
colors = data
|
||||
self[id_str] = list(colors) if colors else []
|
||||
self.save()
|
||||
return True
|
||||
|
||||
def delete(self, id):
|
||||
id_str = str(id)
|
||||
if id_str not in self:
|
||||
return False
|
||||
self.pop(id_str)
|
||||
self.save()
|
||||
return True
|
||||
|
||||
def list(self):
|
||||
return list(self.keys())
|
||||
38
src/models/pattern.py
Normal file
38
src/models/pattern.py
Normal file
@@ -0,0 +1,38 @@
|
||||
from models.model import Model
|
||||
|
||||
|
||||
class Pattern(Model):
|
||||
def __init__(self):
|
||||
super().__init__()
|
||||
|
||||
def create(self, name="", data=None):
|
||||
pattern_name = str(name).strip()
|
||||
if not pattern_name:
|
||||
pattern_name = self.get_next_id()
|
||||
self[pattern_name] = data if isinstance(data, dict) else {}
|
||||
self.save()
|
||||
return pattern_name
|
||||
|
||||
def read(self, id):
|
||||
id_str = str(id)
|
||||
return self.get(id_str, None)
|
||||
|
||||
def update(self, id, data):
|
||||
id_str = str(id)
|
||||
if id_str not in self:
|
||||
return False
|
||||
if isinstance(data, dict):
|
||||
self[id_str].update(data)
|
||||
self.save()
|
||||
return True
|
||||
|
||||
def delete(self, id):
|
||||
id_str = str(id)
|
||||
if id_str not in self:
|
||||
return False
|
||||
self.pop(id_str)
|
||||
self.save()
|
||||
return True
|
||||
|
||||
def list(self):
|
||||
return list(self.keys())
|
||||
69
src/models/preset.py
Normal file
69
src/models/preset.py
Normal file
@@ -0,0 +1,69 @@
|
||||
from models.model import Model
|
||||
from models.profile import Profile
|
||||
|
||||
class Preset(Model):
|
||||
def __init__(self):
|
||||
super().__init__()
|
||||
# Backfill profile ownership for existing presets.
|
||||
try:
|
||||
profiles = Profile()
|
||||
profile_list = profiles.list()
|
||||
default_profile_id = profile_list[0] if profile_list else None
|
||||
changed = False
|
||||
for preset_id, preset_data in list(self.items()):
|
||||
if isinstance(preset_data, dict) and "profile_id" not in preset_data:
|
||||
if default_profile_id is not None:
|
||||
preset_data["profile_id"] = str(default_profile_id)
|
||||
changed = True
|
||||
if changed:
|
||||
self.save()
|
||||
except Exception:
|
||||
pass
|
||||
|
||||
def create(self, profile_id=None):
|
||||
next_id = self.get_next_id()
|
||||
self[next_id] = {
|
||||
"name": "",
|
||||
"pattern": "",
|
||||
"colors": [],
|
||||
"brightness": 0,
|
||||
"delay": 0,
|
||||
"n1": 0,
|
||||
"n2": 0,
|
||||
"n3": 0,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0,
|
||||
"n7": 0,
|
||||
"n8": 0,
|
||||
"profile_id": str(profile_id) if profile_id is not None else None,
|
||||
}
|
||||
self.save()
|
||||
return next_id
|
||||
|
||||
|
||||
def read(self, id):
|
||||
id_str = str(id)
|
||||
if id_str not in self:
|
||||
return None
|
||||
return self[id_str]
|
||||
|
||||
def update(self, id, data):
|
||||
id_str = str(id)
|
||||
if id_str not in self:
|
||||
return False
|
||||
self[id_str].update(data)
|
||||
self.save()
|
||||
return True
|
||||
|
||||
def delete(self, id):
|
||||
id_str = str(id)
|
||||
if id_str not in self:
|
||||
return False
|
||||
self.pop(id_str)
|
||||
self.save()
|
||||
return True
|
||||
|
||||
def list(self):
|
||||
return list(self.keys())
|
||||
|
||||
69
src/models/profile.py
Normal file
69
src/models/profile.py
Normal file
@@ -0,0 +1,69 @@
|
||||
from models.model import Model
|
||||
from models.pallet import Palette
|
||||
|
||||
|
||||
class Profile(Model):
|
||||
def __init__(self):
|
||||
"""Profile model.
|
||||
|
||||
Each profile owns a single, unique palette stored in the Palette model.
|
||||
The profile stores a `palette_id` that points to its palette; any legacy
|
||||
inline `palette` arrays are migrated to a dedicated Palette entry.
|
||||
"""
|
||||
super().__init__()
|
||||
self._palette_model = Palette()
|
||||
|
||||
# Migrate legacy inline palettes to separate Palette entries.
|
||||
changed = False
|
||||
for pid, pdata in list(self.items()):
|
||||
if isinstance(pdata, dict):
|
||||
if "palette" in pdata and "palette_id" not in pdata:
|
||||
colors = pdata.get("palette") or []
|
||||
palette_id = self._palette_model.create(colors=colors)
|
||||
pdata.pop("palette", None)
|
||||
pdata["palette_id"] = str(palette_id)
|
||||
changed = True
|
||||
if changed:
|
||||
self.save()
|
||||
|
||||
def create(self, name="", profile_type="tabs"):
|
||||
"""Create a new profile and its own empty palette.
|
||||
|
||||
profile_type: "tabs" or "scenes" (ignoring scenes for now)
|
||||
"""
|
||||
next_id = self.get_next_id()
|
||||
# Create a unique palette for this profile.
|
||||
palette_id = self._palette_model.create(colors=[])
|
||||
self[next_id] = {
|
||||
"name": name,
|
||||
"type": profile_type, # "tabs" or "scenes"
|
||||
"tabs": [], # Array of tab IDs
|
||||
"scenes": [], # Array of scene IDs (for future use)
|
||||
"palette_id": str(palette_id),
|
||||
}
|
||||
self.save()
|
||||
return next_id
|
||||
|
||||
def read(self, id):
|
||||
id_str = str(id)
|
||||
return self.get(id_str, None)
|
||||
|
||||
def update(self, id, data):
|
||||
id_str = str(id)
|
||||
if id_str not in self:
|
||||
return False
|
||||
self[id_str].update(data)
|
||||
self.save()
|
||||
return True
|
||||
|
||||
def delete(self, id):
|
||||
id_str = str(id)
|
||||
if id_str not in self:
|
||||
return False
|
||||
self.pop(id_str)
|
||||
self.save()
|
||||
return True
|
||||
|
||||
def list(self):
|
||||
return list(self.keys())
|
||||
|
||||
38
src/models/scene.py
Normal file
38
src/models/scene.py
Normal file
@@ -0,0 +1,38 @@
|
||||
from models.model import Model
|
||||
|
||||
class Scene(Model):
|
||||
def __init__(self):
|
||||
super().__init__()
|
||||
|
||||
def create(self, name="", sequences=None, groups=None):
|
||||
next_id = self.get_next_id()
|
||||
self[next_id] = {
|
||||
"name": name,
|
||||
"sequences": sequences if sequences else [],
|
||||
"groups": groups if groups else []
|
||||
}
|
||||
self.save()
|
||||
return next_id
|
||||
|
||||
def read(self, id):
|
||||
id_str = str(id)
|
||||
return self.get(id_str, None)
|
||||
|
||||
def update(self, id, data):
|
||||
id_str = str(id)
|
||||
if id_str not in self:
|
||||
return False
|
||||
self[id_str].update(data)
|
||||
self.save()
|
||||
return True
|
||||
|
||||
def delete(self, id):
|
||||
id_str = str(id)
|
||||
if id_str not in self:
|
||||
return False
|
||||
self.pop(id_str)
|
||||
self.save()
|
||||
return True
|
||||
|
||||
def list(self):
|
||||
return list(self.keys())
|
||||
44
src/models/squence.py
Normal file
44
src/models/squence.py
Normal file
@@ -0,0 +1,44 @@
|
||||
from models.model import Model
|
||||
|
||||
class Sequence(Model):
|
||||
def __init__(self):
|
||||
super().__init__()
|
||||
|
||||
def create(self, group_name="", preset_names=None):
|
||||
next_id = self.get_next_id()
|
||||
self[next_id] = {
|
||||
"group_name": group_name,
|
||||
"presets": preset_names if preset_names else [],
|
||||
"sequence_duration": 3000, # Duration per preset in ms
|
||||
"sequence_transition": 500, # Transition time in ms
|
||||
"sequence_loop": False,
|
||||
"sequence_repeat_count": 0, # 0 = infinite
|
||||
"sequence_active": False,
|
||||
"sequence_index": 0,
|
||||
"sequence_start_time": 0
|
||||
}
|
||||
self.save()
|
||||
return next_id
|
||||
|
||||
def read(self, id):
|
||||
id_str = str(id)
|
||||
return self.get(id_str, None)
|
||||
|
||||
def update(self, id, data):
|
||||
id_str = str(id)
|
||||
if id_str not in self:
|
||||
return False
|
||||
self[id_str].update(data)
|
||||
self.save()
|
||||
return True
|
||||
|
||||
def delete(self, id):
|
||||
id_str = str(id)
|
||||
if id_str not in self:
|
||||
return False
|
||||
self.pop(id_str)
|
||||
self.save()
|
||||
return True
|
||||
|
||||
def list(self):
|
||||
return list(self.keys())
|
||||
39
src/models/tab.py
Normal file
39
src/models/tab.py
Normal file
@@ -0,0 +1,39 @@
|
||||
from models.model import Model
|
||||
|
||||
class Tab(Model):
|
||||
def __init__(self):
|
||||
super().__init__()
|
||||
|
||||
def create(self, name="", names=None, presets=None):
|
||||
next_id = self.get_next_id()
|
||||
self[next_id] = {
|
||||
"name": name,
|
||||
"names": names if names else [],
|
||||
"presets": presets if presets else [],
|
||||
"default_preset": None
|
||||
}
|
||||
self.save()
|
||||
return next_id
|
||||
|
||||
def read(self, id):
|
||||
id_str = str(id)
|
||||
return self.get(id_str, None)
|
||||
|
||||
def update(self, id, data):
|
||||
id_str = str(id)
|
||||
if id_str not in self:
|
||||
return False
|
||||
self[id_str].update(data)
|
||||
self.save()
|
||||
return True
|
||||
|
||||
def delete(self, id):
|
||||
id_str = str(id)
|
||||
if id_str not in self:
|
||||
return False
|
||||
self.pop(id_str)
|
||||
self.save()
|
||||
return True
|
||||
|
||||
def list(self):
|
||||
return list(self.keys())
|
||||
39
src/p2p.py
Normal file
39
src/p2p.py
Normal file
@@ -0,0 +1,39 @@
|
||||
import network
|
||||
import aioespnow
|
||||
import asyncio
|
||||
import json
|
||||
from time import sleep
|
||||
|
||||
|
||||
class P2P:
|
||||
def __init__(self):
|
||||
network.WLAN(network.STA_IF).active(True)
|
||||
self.broadcast = bytes.fromhex("ffffffffffff")
|
||||
self.e = aioespnow.AIOESPNow()
|
||||
self.e.active(True)
|
||||
try:
|
||||
self.e.add_peer(self.broadcast)
|
||||
except:
|
||||
pass
|
||||
|
||||
async def send(self, data):
|
||||
# Convert data to bytes if it's a string or dict
|
||||
if isinstance(data, str):
|
||||
payload = data.encode()
|
||||
elif isinstance(data, dict):
|
||||
payload = json.dumps(data).encode()
|
||||
else:
|
||||
payload = data # Assume it's already bytes
|
||||
|
||||
# Use asend for async sending - returns boolean indicating success
|
||||
result = await self.e.asend(self.broadcast, payload)
|
||||
return result
|
||||
|
||||
|
||||
|
||||
async def main():
|
||||
p = P2P()
|
||||
await p.send(json.dumps({"dj": {"p": "on", "colors": ["#ff0000"]}}))
|
||||
|
||||
if __name__ == "__main__":
|
||||
asyncio.run(main())
|
||||
0
src/profile.py
Normal file
0
src/profile.py
Normal file
@@ -1,4 +1,6 @@
|
||||
import json
|
||||
import os
|
||||
import binascii
|
||||
|
||||
class Settings(dict):
|
||||
SETTINGS_FILE = "/settings.json"
|
||||
@@ -7,14 +9,30 @@ class Settings(dict):
|
||||
super().__init__()
|
||||
self.load() # Load settings from file during initialization
|
||||
|
||||
def generate_secret_key(self):
|
||||
"""Generate a random secret key for session signing."""
|
||||
try:
|
||||
# Try to use os.urandom for secure random bytes
|
||||
random_bytes = os.urandom(32)
|
||||
return binascii.hexlify(random_bytes).decode('utf-8')
|
||||
except (AttributeError, NotImplementedError):
|
||||
# Fallback for MicroPython or systems without os.urandom
|
||||
try:
|
||||
import secrets
|
||||
return secrets.token_hex(32)
|
||||
except ImportError:
|
||||
# Last resort: use a combination of time and random
|
||||
import time
|
||||
import random
|
||||
random.seed(time.time())
|
||||
return binascii.hexlify(bytes([random.randint(0, 255) for _ in range(32)])).decode('utf-8')
|
||||
|
||||
def set_defaults(self):
|
||||
self["num_leds"] = 50
|
||||
self["selected_pattern"] = "blink"
|
||||
self["color1"] = "#000f00"
|
||||
self["color2"] = "#0f0000"
|
||||
self["delay"] = 100
|
||||
self["brightness"] = 100
|
||||
self["wifi"] = {"ssid": "", "password": ""}
|
||||
"""Set default settings if they don't exist."""
|
||||
if 'session_secret_key' not in self:
|
||||
self['session_secret_key'] = self.generate_secret_key()
|
||||
# Save immediately when generating a new key
|
||||
self.save()
|
||||
|
||||
def save(self):
|
||||
try:
|
||||
@@ -26,28 +44,19 @@ class Settings(dict):
|
||||
print(f"Error saving settings: {e}")
|
||||
|
||||
def load(self):
|
||||
loaded_from_file = False
|
||||
try:
|
||||
with open(self.SETTINGS_FILE, 'r') as file:
|
||||
loaded_settings = json.load(file)
|
||||
self.update(loaded_settings)
|
||||
loaded_from_file = True
|
||||
print("Settings loaded successfully.")
|
||||
except Exception as e:
|
||||
print(f"Error loading settings")
|
||||
self.clear()
|
||||
finally:
|
||||
# Ensure defaults are set even if file exists but is missing keys
|
||||
self.set_defaults()
|
||||
|
||||
# Example usage
|
||||
def main():
|
||||
settings = Settings()
|
||||
print(f"Number of LEDs: {settings['num_leds']}")
|
||||
settings['num_leds'] = 100
|
||||
print(f"Updated number of LEDs: {settings['num_leds']}")
|
||||
settings.save()
|
||||
|
||||
# Create a new Settings object to test loading
|
||||
new_settings = Settings()
|
||||
print(f"Loaded number of LEDs: {new_settings['num_leds']}")
|
||||
print(settings)
|
||||
|
||||
# Run the example
|
||||
if __name__ == "__main__":
|
||||
main()
|
||||
# Only save if file didn't exist or was invalid
|
||||
if not loaded_from_file:
|
||||
self.save()
|
||||
|
||||
1750
src/static/app.js
Normal file
1750
src/static/app.js
Normal file
File diff suppressed because it is too large
Load Diff
198
src/static/color_palette.js
Normal file
198
src/static/color_palette.js
Normal file
@@ -0,0 +1,198 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const paletteButton = document.getElementById('color-palette-btn');
|
||||
const paletteModal = document.getElementById('color-palette-modal');
|
||||
const closeButton = document.getElementById('color-palette-close-btn');
|
||||
const paletteContainer = document.getElementById('palette-container');
|
||||
const paletteNewColor = document.getElementById('palette-new-color');
|
||||
const paletteAddButton = document.getElementById('palette-add-color-btn');
|
||||
const profileNameDisplay = document.getElementById('palette-current-profile-name');
|
||||
|
||||
if (!paletteButton || !paletteModal || !paletteContainer) {
|
||||
return;
|
||||
}
|
||||
|
||||
let currentProfileId = null;
|
||||
let currentPaletteId = null;
|
||||
let currentPalette = [];
|
||||
let currentProfileName = null;
|
||||
|
||||
const renderPalette = () => {
|
||||
paletteContainer.innerHTML = '';
|
||||
if (!currentPalette.length) {
|
||||
const empty = document.createElement('p');
|
||||
empty.className = 'muted-text';
|
||||
empty.textContent = 'No colors in palette.';
|
||||
paletteContainer.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
currentPalette.forEach((color, index) => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'profiles-row';
|
||||
row.dataset.color = color;
|
||||
row.style.cssText = 'display: flex; align-items: center; gap: 1rem;';
|
||||
// Ensure no text content
|
||||
row.textContent = '';
|
||||
|
||||
const swatch = document.createElement('div');
|
||||
swatch.style.cssText = `
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 8px;
|
||||
background-color: ${color};
|
||||
border: 2px solid #4a4a4a;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
||||
`;
|
||||
swatch.title = color; // Show hex code on hover only
|
||||
swatch.setAttribute('aria-label', `Color ${color}`);
|
||||
|
||||
const removeButton = document.createElement('button');
|
||||
removeButton.className = 'btn btn-danger btn-small';
|
||||
removeButton.textContent = 'Remove';
|
||||
removeButton.style.fontSize = '0.8rem'; // Restore font size for button
|
||||
removeButton.addEventListener('click', async (e) => {
|
||||
e.stopPropagation();
|
||||
const updated = currentPalette.filter((_, i) => i !== index);
|
||||
await savePalette(updated);
|
||||
});
|
||||
|
||||
row.appendChild(swatch);
|
||||
row.appendChild(removeButton);
|
||||
paletteContainer.appendChild(row);
|
||||
});
|
||||
};
|
||||
|
||||
const loadPalette = async () => {
|
||||
try {
|
||||
const currentResponse = await fetch('/profiles/current', {
|
||||
headers: { Accept: 'application/json' },
|
||||
});
|
||||
if (!currentResponse.ok) {
|
||||
throw new Error('Failed to load current profile');
|
||||
}
|
||||
const currentData = await currentResponse.json();
|
||||
currentProfileId = currentData.id || null;
|
||||
const profile = currentData.profile || null;
|
||||
currentProfileName = profile ? profile.name : null;
|
||||
if (profileNameDisplay) {
|
||||
profileNameDisplay.textContent = currentProfileName || currentProfileId || 'None';
|
||||
}
|
||||
|
||||
if (!currentProfileId || !profile) {
|
||||
currentPalette = [];
|
||||
renderPalette();
|
||||
return;
|
||||
}
|
||||
|
||||
// Prefer palette_id-based storage; fall back to legacy inline palette.
|
||||
currentPaletteId = profile.palette_id || profile.paletteId || null;
|
||||
if (currentPaletteId) {
|
||||
try {
|
||||
const palResponse = await fetch(`/palettes/${currentPaletteId}`, {
|
||||
headers: { Accept: 'application/json' },
|
||||
});
|
||||
if (palResponse.ok) {
|
||||
const palData = await palResponse.json();
|
||||
currentPalette = (palData.colors) || [];
|
||||
} else {
|
||||
currentPalette = [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load palette by id:', e);
|
||||
currentPalette = [];
|
||||
}
|
||||
} else {
|
||||
// Legacy: palette stored directly on profile
|
||||
currentPalette = profile.palette || profile.color_palette || [];
|
||||
}
|
||||
renderPalette();
|
||||
} catch (error) {
|
||||
console.error('Failed to load palette:', error);
|
||||
currentPalette = [];
|
||||
renderPalette();
|
||||
}
|
||||
};
|
||||
|
||||
const savePalette = async (newPalette) => {
|
||||
if (!currentProfileId) {
|
||||
alert('No profile selected.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// Ensure we have a palette ID for this profile.
|
||||
if (!currentPaletteId) {
|
||||
const createResponse = await fetch('/palettes', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ colors: newPalette }),
|
||||
});
|
||||
if (!createResponse.ok) {
|
||||
throw new Error('Failed to create palette');
|
||||
}
|
||||
const pal = await createResponse.json();
|
||||
currentPaletteId = pal.id || Object.keys(pal)[0];
|
||||
|
||||
// Link the new palette to the current profile.
|
||||
const linkResponse = await fetch('/profiles/current', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
palette_id: currentPaletteId,
|
||||
}),
|
||||
});
|
||||
if (!linkResponse.ok) {
|
||||
throw new Error('Failed to link palette to profile');
|
||||
}
|
||||
} else {
|
||||
// Update existing palette colors
|
||||
const updateResponse = await fetch(`/palettes/${currentPaletteId}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ colors: newPalette }),
|
||||
});
|
||||
if (!updateResponse.ok) {
|
||||
throw new Error('Failed to save palette');
|
||||
}
|
||||
}
|
||||
|
||||
currentPalette = newPalette;
|
||||
renderPalette();
|
||||
} catch (error) {
|
||||
console.error('Failed to save palette:', error);
|
||||
alert('Failed to save palette.');
|
||||
}
|
||||
};
|
||||
|
||||
const openModal = () => {
|
||||
paletteModal.classList.add('active');
|
||||
loadPalette();
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
paletteModal.classList.remove('active');
|
||||
};
|
||||
|
||||
paletteButton.addEventListener('click', openModal);
|
||||
if (closeButton) {
|
||||
closeButton.addEventListener('click', closeModal);
|
||||
}
|
||||
if (paletteAddButton && paletteNewColor) {
|
||||
paletteAddButton.addEventListener('click', async () => {
|
||||
const color = paletteNewColor.value;
|
||||
if (!color) {
|
||||
return;
|
||||
}
|
||||
if (currentPalette.includes(color)) {
|
||||
alert('Color already in palette.');
|
||||
return;
|
||||
}
|
||||
await savePalette([...currentPalette, color]);
|
||||
});
|
||||
}
|
||||
paletteModal.addEventListener('click', (event) => {
|
||||
if (event.target === paletteModal) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
});
|
||||
200
src/static/help.js
Normal file
200
src/static/help.js
Normal file
@@ -0,0 +1,200 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Help modal
|
||||
const helpBtn = document.getElementById('help-btn');
|
||||
const helpModal = document.getElementById('help-modal');
|
||||
const helpCloseBtn = document.getElementById('help-close-btn');
|
||||
const mainMenuBtn = document.getElementById('main-menu-btn');
|
||||
const mainMenuDropdown = document.getElementById('main-menu-dropdown');
|
||||
|
||||
if (helpBtn && helpModal) {
|
||||
helpBtn.addEventListener('click', () => {
|
||||
helpModal.classList.add('active');
|
||||
});
|
||||
}
|
||||
|
||||
if (helpCloseBtn && helpModal) {
|
||||
helpCloseBtn.addEventListener('click', () => {
|
||||
helpModal.classList.remove('active');
|
||||
});
|
||||
}
|
||||
|
||||
if (helpModal) {
|
||||
helpModal.addEventListener('click', (event) => {
|
||||
if (event.target === helpModal) {
|
||||
helpModal.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Mobile main menu: forward clicks to existing header buttons
|
||||
if (mainMenuBtn && mainMenuDropdown) {
|
||||
mainMenuBtn.addEventListener('click', () => {
|
||||
mainMenuDropdown.classList.toggle('open');
|
||||
});
|
||||
|
||||
mainMenuDropdown.addEventListener('click', (event) => {
|
||||
const target = event.target;
|
||||
if (target && target.matches('button[data-target]')) {
|
||||
const id = target.getAttribute('data-target');
|
||||
const realBtn = document.getElementById(id);
|
||||
if (realBtn) {
|
||||
realBtn.click();
|
||||
}
|
||||
mainMenuDropdown.classList.remove('open');
|
||||
}
|
||||
});
|
||||
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener('click', (event) => {
|
||||
if (!mainMenuDropdown.contains(event.target) && event.target !== mainMenuBtn) {
|
||||
mainMenuDropdown.classList.remove('open');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Settings modal wiring (reusing existing settings endpoints).
|
||||
const settingsButton = document.getElementById('settings-btn');
|
||||
const settingsModal = document.getElementById('settings-modal');
|
||||
const settingsCloseButton = document.getElementById('settings-close-btn');
|
||||
|
||||
const showSettingsMessage = (text, type = 'success') => {
|
||||
const messageEl = document.getElementById('settings-message');
|
||||
if (!messageEl) return;
|
||||
messageEl.textContent = text;
|
||||
messageEl.className = `message ${type} show`;
|
||||
setTimeout(() => {
|
||||
messageEl.classList.remove('show');
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
async function loadDeviceSettings() {
|
||||
try {
|
||||
const response = await fetch('/settings');
|
||||
const data = await response.json();
|
||||
const nameInput = document.getElementById('device-name-input');
|
||||
if (nameInput && data && typeof data === 'object') {
|
||||
nameInput.value = data.device_name || 'led-controller';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading device settings:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAPStatus() {
|
||||
try {
|
||||
const response = await fetch('/settings/wifi/ap');
|
||||
const config = await response.json();
|
||||
const statusEl = document.getElementById('ap-status');
|
||||
if (!statusEl) return;
|
||||
if (config.active) {
|
||||
statusEl.innerHTML = `
|
||||
<h4>AP Status: <span class="status-connected">Active</span></h4>
|
||||
<p><strong>SSID:</strong> ${config.ssid || 'N/A'}</p>
|
||||
<p><strong>Channel:</strong> ${config.channel || 'Auto'}</p>
|
||||
<p><strong>IP Address:</strong> ${config.ip || 'N/A'}</p>
|
||||
`;
|
||||
} else {
|
||||
statusEl.innerHTML = `
|
||||
<h4>AP Status: <span class="status-disconnected">Inactive</span></h4>
|
||||
<p>Access Point is not currently active</p>
|
||||
`;
|
||||
}
|
||||
if (config.saved_ssid) document.getElementById('ap-ssid').value = config.saved_ssid;
|
||||
if (config.saved_channel) document.getElementById('ap-channel').value = config.saved_channel;
|
||||
} catch (error) {
|
||||
console.error('Error loading AP status:', error);
|
||||
}
|
||||
}
|
||||
|
||||
if (settingsButton && settingsModal) {
|
||||
settingsButton.addEventListener('click', () => {
|
||||
settingsModal.classList.add('active');
|
||||
// Load current WiFi status/config when opening
|
||||
loadDeviceSettings();
|
||||
loadAPStatus();
|
||||
});
|
||||
}
|
||||
|
||||
if (settingsCloseButton && settingsModal) {
|
||||
settingsCloseButton.addEventListener('click', () => {
|
||||
settingsModal.classList.remove('active');
|
||||
});
|
||||
}
|
||||
|
||||
if (settingsModal) {
|
||||
settingsModal.addEventListener('click', (event) => {
|
||||
if (event.target === settingsModal) {
|
||||
settingsModal.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const deviceForm = document.getElementById('device-form');
|
||||
if (deviceForm) {
|
||||
deviceForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const nameInput = document.getElementById('device-name-input');
|
||||
const deviceName = nameInput ? nameInput.value.trim() : '';
|
||||
if (!deviceName) {
|
||||
showSettingsMessage('Device name is required', 'error');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch('/settings/settings', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ device_name: deviceName }),
|
||||
});
|
||||
const result = await response.json();
|
||||
if (response.ok) {
|
||||
showSettingsMessage('Device name saved. It will be used on next restart.', 'success');
|
||||
} else {
|
||||
showSettingsMessage(`Error: ${result.error || 'Failed to save device name'}`, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showSettingsMessage(`Error: ${error.message}`, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
const apForm = document.getElementById('ap-form');
|
||||
if (apForm) {
|
||||
apForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const formData = {
|
||||
ssid: document.getElementById('ap-ssid').value,
|
||||
password: document.getElementById('ap-password').value,
|
||||
channel: document.getElementById('ap-channel').value || null,
|
||||
};
|
||||
|
||||
if (formData.password && formData.password.length > 0 && formData.password.length < 8) {
|
||||
showSettingsMessage('AP password must be at least 8 characters', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (formData.channel) {
|
||||
formData.channel = parseInt(formData.channel, 10);
|
||||
if (formData.channel < 1 || formData.channel > 11) {
|
||||
showSettingsMessage('Channel must be between 1 and 11', 'error');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/settings/wifi/ap', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
const result = await response.json();
|
||||
if (response.ok) {
|
||||
showSettingsMessage('Access Point configured successfully!', 'success');
|
||||
setTimeout(loadAPStatus, 1000);
|
||||
} else {
|
||||
showSettingsMessage(`Error: ${result.error || 'Failed to configure AP'}`, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showSettingsMessage(`Error: ${error.message}`, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
1
src/static/htmx.min.js
vendored
Normal file
1
src/static/htmx.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -1,75 +0,0 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
input[type="text"], input[type="submit"], input[type="range"], input[type="color"] {
|
||||
width: 100%;
|
||||
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 25px;
|
||||
background: #d3d3d3;
|
||||
outline: none;
|
||||
opacity: 0.7;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
input[type="range"]:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background: #4CAF50;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
}
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background: #4CAF50;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#pattern_buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#pattern_buttons button {
|
||||
flex: 1 0 calc(33.333% - 10px);
|
||||
padding: 10px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
#pattern_buttons button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
#pattern_buttons button {
|
||||
flex: 1 0 calc(50% - 10px);
|
||||
}
|
||||
}
|
||||
@@ -1,156 +1,81 @@
|
||||
let delayTimeout;
|
||||
let brightnessTimeout;
|
||||
let colorTimeout;
|
||||
let color2Timeout;
|
||||
let socket;
|
||||
import "./rgb-slider.js";
|
||||
|
||||
const host = window.location.host;
|
||||
const ws = new WebSocket("ws://localhost:8000/ws");
|
||||
|
||||
async function post(path, data) {
|
||||
console.log(`POST to ${path}`, data);
|
||||
try {
|
||||
const response = await fetch(path, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data) // Convert data to JSON string
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
ws.onopen = () => {
|
||||
console.log("WebSocket connection established");
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
console.log("WebSocket connection closed");
|
||||
};
|
||||
|
||||
ws.onerror = (error) => {
|
||||
console.error("WebSocket error:", error);
|
||||
};
|
||||
|
||||
// Number of sliders (tabs) you want to create
|
||||
const numTabs = 3;
|
||||
|
||||
// Select the container for tabs and content
|
||||
const tabsContainer = document.querySelector(".tabs");
|
||||
const tabContentContainer = document.querySelector(".tab-content");
|
||||
|
||||
// Create tabs dynamically
|
||||
for (let i = 1; i <= numTabs; i++) {
|
||||
// Create the tab button
|
||||
const tabButton = document.createElement("button");
|
||||
tabButton.classList.add("tab");
|
||||
tabButton.id = `tab${i}`;
|
||||
tabButton.textContent = `Tab ${i}`;
|
||||
|
||||
// Add the tab button to the container
|
||||
tabsContainer.appendChild(tabButton);
|
||||
|
||||
// Create the corresponding tab content (RGB slider)
|
||||
const tabContent = document.createElement("div");
|
||||
tabContent.classList.add("tab-pane");
|
||||
tabContent.id = `content${i}`;
|
||||
const slider = document.createElement("rgb-slider");
|
||||
slider.id = i;
|
||||
tabContent.appendChild(slider);
|
||||
|
||||
// Add the tab content to the container
|
||||
tabContentContainer.appendChild(tabContent);
|
||||
|
||||
// Listen for color change on each RGB slider
|
||||
slider.addEventListener("color-change", (e) => {
|
||||
const { r, g, b } = e.detail;
|
||||
console.log(`Color changed in tab ${i}:`, e.detail);
|
||||
// Send RGB data to WebSocket server
|
||||
if (ws.readyState === WebSocket.OPEN) {
|
||||
const colorData = { r, g, b };
|
||||
ws.send(JSON.stringify(colorData));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error during POST request:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function get(path) {
|
||||
try {
|
||||
const response = await fetch(path);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
return await response.json(); // Assuming you are expecting JSON response
|
||||
} catch (error) {
|
||||
console.error('Error during GET request:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function updateColor(event) {
|
||||
event.preventDefault();
|
||||
clearTimeout(colorTimeout);
|
||||
colorTimeout = setTimeout(async function() {
|
||||
const color = document.getElementById('color').value;
|
||||
await post("/color", { color }); // Send as JSON
|
||||
}, 500);
|
||||
}
|
||||
|
||||
async function updateColor2(event) {
|
||||
event.preventDefault();
|
||||
clearTimeout(color2Timeout);
|
||||
color2Timeout = setTimeout(async function() {
|
||||
const color = document.getElementById('color2').value;
|
||||
await post("/color2", { color }); // Send as JSON
|
||||
}, 500);
|
||||
}
|
||||
|
||||
async function updatePattern(pattern) {
|
||||
await post("/pattern", { pattern }); // Send as JSON
|
||||
//socket.send(JSON.stringify({"selected_pattern":pattern}))
|
||||
|
||||
}
|
||||
|
||||
async function updateBrightness(event) {
|
||||
event.preventDefault();
|
||||
clearTimeout(brightnessTimeout);
|
||||
brightnessTimeout = setTimeout(async function() {
|
||||
const brightness = document.getElementById('brightness').value;
|
||||
//await post('/brightness', { brightness }); // Send as JSON
|
||||
}, 500);
|
||||
}
|
||||
|
||||
async function updateDelay(event) {
|
||||
event.preventDefault();
|
||||
clearTimeout(delayTimeout);
|
||||
delayTimeout = setTimeout(async function() {
|
||||
const delay = document.getElementById('delay').value;
|
||||
await post('/delay', { delay }); // Send as JSON
|
||||
}, 500);
|
||||
}
|
||||
|
||||
async function updateNumLeds(event) {
|
||||
event.preventDefault();
|
||||
const numLeds = document.getElementById('num_leds').value;
|
||||
await post('/num_leds', { num_leds: numLeds }); // Send as JSON
|
||||
}
|
||||
|
||||
async function updateWifi(event) {
|
||||
event.preventDefault();
|
||||
const ssid = document.getElementById('ssid').value;
|
||||
const password = document.getElementById('password').value;
|
||||
const ip = document.getElementById('ip').value;
|
||||
const gateway = document.getElementById('gateway').value;
|
||||
|
||||
const wifiSettings = { ssid, password, ip, gateway }; // Create JSON object
|
||||
console.log(wifiSettings);
|
||||
const response = await post('/wifi_settings', wifiSettings); // Send as JSON
|
||||
if (response === 500) {
|
||||
alert("Failed to connect to Wi-Fi");
|
||||
}
|
||||
}
|
||||
|
||||
function createPatternButtons(patterns) {
|
||||
const container = document.getElementById('pattern_buttons');
|
||||
container.innerHTML = ''; // Clear previous buttons
|
||||
|
||||
patterns.forEach(pattern => {
|
||||
const button = document.createElement('button');
|
||||
button.type = 'button'; // Use 'button' instead of 'submit'
|
||||
button.textContent = pattern;
|
||||
button.value = pattern;
|
||||
button.addEventListener('click', async function(event) {
|
||||
event.preventDefault();
|
||||
await updatePattern(pattern);
|
||||
});
|
||||
container.appendChild(button);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async function() {
|
||||
document.getElementById('color').addEventListener('input', updateColor);
|
||||
document.getElementById('color2').addEventListener('input', updateColor2);
|
||||
document.getElementById('delay').addEventListener('input', updateDelay);
|
||||
document.getElementById('brightness').addEventListener('input', updateBrightness);
|
||||
document.getElementById('num_leds_form').addEventListener('submit', updateNumLeds);
|
||||
document.getElementById('wifi_form').addEventListener('submit', updateWifi);
|
||||
document.getElementById('delay').addEventListener('touchend', updateDelay);
|
||||
document.getElementById('brightness').addEventListener('touchend', updateBrightness);
|
||||
|
||||
document.querySelectorAll(".pattern_button").forEach(button => {
|
||||
console.log(button.value);
|
||||
button.addEventListener('click', async event => {
|
||||
event.preventDefault();
|
||||
await updatePattern(button.value);
|
||||
});
|
||||
});
|
||||
|
||||
socket = new WebSocket(`ws://${host}/settings`)
|
||||
// Function to switch tabs
|
||||
function switchTab(tabId) {
|
||||
const tabs = document.querySelectorAll(".tab");
|
||||
const tabContents = document.querySelectorAll(".tab-pane");
|
||||
|
||||
tabs.forEach((tab) => tab.classList.remove("active"));
|
||||
tabContents.forEach((content) => content.classList.remove("active"));
|
||||
|
||||
// Activate the clicked tab and corresponding content
|
||||
document.getElementById(tabId).classList.add("active");
|
||||
document
|
||||
.getElementById("content" + tabId.replace("tab", ""))
|
||||
.classList.add("active");
|
||||
}
|
||||
|
||||
// Add event listeners to tabs
|
||||
tabsContainer.addEventListener("click", (e) => {
|
||||
if (e.target.classList.contains("tab")) {
|
||||
switchTab(e.target.id);
|
||||
}
|
||||
});
|
||||
|
||||
// Function to toggle the display of the settings menu
|
||||
function selectSettings() {
|
||||
const settingsMenu = document.getElementById('settings_menu');
|
||||
controls = document.getElementById('controls');
|
||||
settingsMenu.style.display = 'block';
|
||||
controls.style.display = 'none';
|
||||
}
|
||||
|
||||
function selectControls() {
|
||||
const settingsMenu = document.getElementById('settings_menu');
|
||||
controls = document.getElementById('controls');
|
||||
settingsMenu.style.display = 'none';
|
||||
controls.style.display = 'block';
|
||||
}
|
||||
// Initially set the first tab as active
|
||||
switchTab("tab1");
|
||||
|
||||
86
src/static/patterns.js
Normal file
86
src/static/patterns.js
Normal file
@@ -0,0 +1,86 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const patternsButton = document.getElementById('patterns-btn');
|
||||
const patternsModal = document.getElementById('patterns-modal');
|
||||
const patternsCloseButton = document.getElementById('patterns-close-btn');
|
||||
const patternsList = document.getElementById('patterns-list');
|
||||
|
||||
if (!patternsButton || !patternsModal || !patternsList) {
|
||||
return;
|
||||
}
|
||||
|
||||
const renderPatterns = (patterns) => {
|
||||
patternsList.innerHTML = '';
|
||||
const entries = Object.entries(patterns || {});
|
||||
if (!entries.length) {
|
||||
const empty = document.createElement('p');
|
||||
empty.className = 'muted-text';
|
||||
empty.textContent = 'No patterns found.';
|
||||
patternsList.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
entries.forEach(([patternName, data]) => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'profiles-row';
|
||||
|
||||
const label = document.createElement('span');
|
||||
label.textContent = patternName;
|
||||
|
||||
const details = document.createElement('span');
|
||||
const minDelay = data && data.min_delay !== undefined ? data.min_delay : '-';
|
||||
const maxDelay = data && data.max_delay !== undefined ? data.max_delay : '-';
|
||||
details.textContent = `${minDelay}–${maxDelay} ms`;
|
||||
details.style.color = '#aaa';
|
||||
details.style.fontSize = '0.85em';
|
||||
|
||||
row.appendChild(label);
|
||||
row.appendChild(details);
|
||||
patternsList.appendChild(row);
|
||||
});
|
||||
};
|
||||
|
||||
const loadPatterns = async () => {
|
||||
patternsList.innerHTML = '';
|
||||
const loading = document.createElement('p');
|
||||
loading.className = 'muted-text';
|
||||
loading.textContent = 'Loading patterns...';
|
||||
patternsList.appendChild(loading);
|
||||
|
||||
try {
|
||||
const response = await fetch('/patterns', {
|
||||
headers: { Accept: 'application/json' },
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to load patterns');
|
||||
}
|
||||
const patterns = await response.json();
|
||||
renderPatterns(patterns);
|
||||
} catch (error) {
|
||||
console.error('Load patterns failed:', error);
|
||||
patternsList.innerHTML = '';
|
||||
const errorMessage = document.createElement('p');
|
||||
errorMessage.className = 'muted-text';
|
||||
errorMessage.textContent = 'Failed to load patterns.';
|
||||
patternsList.appendChild(errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
const openModal = () => {
|
||||
patternsModal.classList.add('active');
|
||||
loadPatterns();
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
patternsModal.classList.remove('active');
|
||||
};
|
||||
|
||||
patternsButton.addEventListener('click', openModal);
|
||||
if (patternsCloseButton) {
|
||||
patternsCloseButton.addEventListener('click', closeModal);
|
||||
}
|
||||
|
||||
patternsModal.addEventListener('click', (event) => {
|
||||
if (event.target === patternsModal) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
});
|
||||
1733
src/static/presets.js
Normal file
1733
src/static/presets.js
Normal file
File diff suppressed because it is too large
Load Diff
282
src/static/profiles.js
Normal file
282
src/static/profiles.js
Normal file
@@ -0,0 +1,282 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const profilesButton = document.getElementById("profiles-btn");
|
||||
const profilesModal = document.getElementById("profiles-modal");
|
||||
const profilesCloseButton = document.getElementById("profiles-close-btn");
|
||||
const profilesList = document.getElementById("profiles-list");
|
||||
const newProfileInput = document.getElementById("new-profile-name");
|
||||
const createProfileButton = document.getElementById("create-profile-btn");
|
||||
|
||||
if (!profilesButton || !profilesModal || !profilesList) {
|
||||
return;
|
||||
}
|
||||
|
||||
const openModal = () => {
|
||||
profilesModal.classList.add("active");
|
||||
loadProfiles();
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
profilesModal.classList.remove("active");
|
||||
};
|
||||
|
||||
const renderProfiles = (profiles, currentProfileId) => {
|
||||
profilesList.innerHTML = "";
|
||||
let entries = [];
|
||||
|
||||
if (Array.isArray(profiles)) {
|
||||
entries = profiles.map((profileId) => [profileId, {}]);
|
||||
} else if (profiles && typeof profiles === "object") {
|
||||
// Make sure we're iterating over profile entries, not metadata
|
||||
entries = Object.entries(profiles).filter(([key]) => {
|
||||
// Skip metadata keys like 'current_profile_id' if they exist
|
||||
return key !== 'current_profile_id' && key !== 'profiles';
|
||||
});
|
||||
}
|
||||
|
||||
if (entries.length === 0) {
|
||||
const empty = document.createElement("p");
|
||||
empty.className = "muted-text";
|
||||
empty.textContent = "No profiles found.";
|
||||
profilesList.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
entries.forEach(([profileId, profile]) => {
|
||||
const row = document.createElement("div");
|
||||
row.className = "profiles-row";
|
||||
|
||||
const label = document.createElement("span");
|
||||
label.textContent = (profile && profile.name) || profileId;
|
||||
if (String(profileId) === String(currentProfileId)) {
|
||||
label.textContent = `✓ ${label.textContent}`;
|
||||
label.style.fontWeight = "bold";
|
||||
label.style.color = "#FFD700";
|
||||
}
|
||||
|
||||
const applyButton = document.createElement("button");
|
||||
applyButton.className = "btn btn-secondary btn-small profiles-apply-btn";
|
||||
applyButton.textContent = "Apply";
|
||||
applyButton.addEventListener("click", async () => {
|
||||
try {
|
||||
const response = await fetch(`/profiles/${profileId}/apply`, {
|
||||
method: "POST",
|
||||
headers: { Accept: "application/json" },
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to apply profile");
|
||||
}
|
||||
await loadProfiles();
|
||||
document.body.dispatchEvent(new Event("tabs-updated"));
|
||||
} catch (error) {
|
||||
console.error("Apply profile failed:", error);
|
||||
alert("Failed to apply profile.");
|
||||
}
|
||||
});
|
||||
|
||||
const cloneButton = document.createElement("button");
|
||||
cloneButton.className = "btn btn-secondary btn-small";
|
||||
cloneButton.textContent = "Clone";
|
||||
cloneButton.addEventListener("click", async () => {
|
||||
const baseName = (profile && profile.name) || profileId;
|
||||
const suggested = `${baseName}`;
|
||||
const name = prompt("New profile name:", suggested);
|
||||
if (name === null) {
|
||||
return;
|
||||
}
|
||||
const trimmed = String(name).trim();
|
||||
if (!trimmed) {
|
||||
alert("Profile name cannot be empty.");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch(`/profiles/${profileId}/clone`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json", Accept: "application/json" },
|
||||
body: JSON.stringify({ name: trimmed }),
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to clone profile");
|
||||
}
|
||||
const data = await response.json().catch(() => null);
|
||||
let newProfileId = null;
|
||||
if (data && typeof data === "object") {
|
||||
if (data.id) {
|
||||
newProfileId = String(data.id);
|
||||
} else {
|
||||
const ids = Object.keys(data);
|
||||
if (ids.length > 0) {
|
||||
newProfileId = String(ids[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (newProfileId) {
|
||||
await fetch(`/profiles/${newProfileId}/apply`, {
|
||||
method: "POST",
|
||||
headers: { Accept: "application/json" },
|
||||
});
|
||||
}
|
||||
document.cookie = "current_tab=; path=/; max-age=0";
|
||||
await loadProfiles();
|
||||
if (typeof window.loadTabs === "function") {
|
||||
await window.loadTabs();
|
||||
}
|
||||
if (typeof window.loadTabsModal === "function") {
|
||||
await window.loadTabsModal();
|
||||
}
|
||||
const tabContent = document.getElementById("tab-content");
|
||||
if (tabContent) {
|
||||
tabContent.innerHTML = `
|
||||
<div class="tab-content-placeholder">
|
||||
Select a tab to get started
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Clone profile failed:", error);
|
||||
alert("Failed to clone profile.");
|
||||
}
|
||||
});
|
||||
|
||||
const deleteButton = document.createElement("button");
|
||||
deleteButton.className = "btn btn-danger btn-small";
|
||||
deleteButton.textContent = "Delete";
|
||||
deleteButton.addEventListener("click", async () => {
|
||||
const confirmed = confirm(`Delete profile "${label.textContent}"?`);
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch(`/profiles/${profileId}`, {
|
||||
method: "DELETE",
|
||||
headers: { Accept: "application/json" },
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to delete profile");
|
||||
}
|
||||
await loadProfiles();
|
||||
} catch (error) {
|
||||
console.error("Delete profile failed:", error);
|
||||
alert("Failed to delete profile.");
|
||||
}
|
||||
});
|
||||
|
||||
row.appendChild(label);
|
||||
row.appendChild(applyButton);
|
||||
row.appendChild(cloneButton);
|
||||
row.appendChild(deleteButton);
|
||||
profilesList.appendChild(row);
|
||||
});
|
||||
};
|
||||
|
||||
const loadProfiles = async () => {
|
||||
profilesList.innerHTML = "";
|
||||
const loading = document.createElement("p");
|
||||
loading.className = "muted-text";
|
||||
loading.textContent = "Loading profiles...";
|
||||
profilesList.appendChild(loading);
|
||||
|
||||
try {
|
||||
const response = await fetch("/profiles", {
|
||||
headers: { Accept: "application/json" },
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to load profiles");
|
||||
}
|
||||
const data = await response.json();
|
||||
// Handle both old format (just profiles object) and new format (with current_profile_id)
|
||||
const profiles = data.profiles || data;
|
||||
const currentProfileId = data.current_profile_id || null;
|
||||
renderProfiles(profiles, currentProfileId);
|
||||
} catch (error) {
|
||||
console.error("Load profiles failed:", error);
|
||||
profilesList.innerHTML = "";
|
||||
const errorMessage = document.createElement("p");
|
||||
errorMessage.className = "muted-text";
|
||||
errorMessage.textContent = "Failed to load profiles.";
|
||||
profilesList.appendChild(errorMessage);
|
||||
}
|
||||
};
|
||||
|
||||
const createProfile = async () => {
|
||||
if (!newProfileInput) {
|
||||
return;
|
||||
}
|
||||
const name = newProfileInput.value.trim();
|
||||
if (!name) {
|
||||
alert("Profile name cannot be empty.");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch("/profiles", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ name }),
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to create profile");
|
||||
}
|
||||
const data = await response.json().catch(() => null);
|
||||
let newProfileId = null;
|
||||
if (data && typeof data === "object") {
|
||||
if (data.id) {
|
||||
newProfileId = String(data.id);
|
||||
} else {
|
||||
const ids = Object.keys(data);
|
||||
if (ids.length > 0) {
|
||||
newProfileId = String(ids[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (newProfileId) {
|
||||
await fetch(`/profiles/${newProfileId}/apply`, {
|
||||
method: "POST",
|
||||
headers: { Accept: "application/json" },
|
||||
});
|
||||
}
|
||||
|
||||
newProfileInput.value = "";
|
||||
// Clear current tab and refresh the UI so the new profile starts empty.
|
||||
document.cookie = "current_tab=; path=/; max-age=0";
|
||||
await loadProfiles();
|
||||
if (typeof window.loadTabs === "function") {
|
||||
await window.loadTabs();
|
||||
}
|
||||
if (typeof window.loadTabsModal === "function") {
|
||||
await window.loadTabsModal();
|
||||
}
|
||||
const tabContent = document.getElementById("tab-content");
|
||||
if (tabContent) {
|
||||
tabContent.innerHTML = `
|
||||
<div class="tab-content-placeholder">
|
||||
Select a tab to get started
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Create profile failed:", error);
|
||||
alert("Failed to create profile.");
|
||||
}
|
||||
};
|
||||
|
||||
profilesButton.addEventListener("click", openModal);
|
||||
if (profilesCloseButton) {
|
||||
profilesCloseButton.addEventListener("click", closeModal);
|
||||
}
|
||||
if (createProfileButton) {
|
||||
createProfileButton.addEventListener("click", createProfile);
|
||||
}
|
||||
if (newProfileInput) {
|
||||
newProfileInput.addEventListener("keypress", (event) => {
|
||||
if (event.key === "Enter") {
|
||||
createProfile();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
profilesModal.addEventListener("click", (event) => {
|
||||
if (event.target === profilesModal) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
});
|
||||
1052
src/static/style.css
Normal file
1052
src/static/style.css
Normal file
File diff suppressed because it is too large
Load Diff
37
src/static/styles.css
Normal file
37
src/static/styles.css
Normal file
@@ -0,0 +1,37 @@
|
||||
/* General tab styles */
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px 20px;
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
background-color: #f1f1f1;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-pane.active {
|
||||
display: block;
|
||||
}
|
||||
262
src/static/tab_palette.js
Normal file
262
src/static/tab_palette.js
Normal file
@@ -0,0 +1,262 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
let selectedIndex = null;
|
||||
|
||||
const getTab = async (tabId) => {
|
||||
const response = await fetch(`/tabs/${tabId}`, {
|
||||
headers: { Accept: 'application/json' },
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error('No tab found');
|
||||
}
|
||||
return response.json();
|
||||
};
|
||||
|
||||
const saveTabColors = async (tabId, colors) => {
|
||||
const response = await fetch(`/tabs/${tabId}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ colors }),
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to save tab colors');
|
||||
}
|
||||
return response.json();
|
||||
};
|
||||
|
||||
const renderPalette = (paletteContainer, colors, onColorChange, onRemoveColor, onReorder) => {
|
||||
paletteContainer.innerHTML = '';
|
||||
if (!colors.length) {
|
||||
const empty = document.createElement('div');
|
||||
empty.className = 'muted-text';
|
||||
empty.textContent = 'No colors in palette.';
|
||||
paletteContainer.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
colors.forEach((color, index) => {
|
||||
const swatch = document.createElement('div');
|
||||
swatch.className = 'color-swatch';
|
||||
swatch.draggable = true;
|
||||
swatch.dataset.index = String(index);
|
||||
if (index === selectedIndex) {
|
||||
swatch.classList.add('selected');
|
||||
}
|
||||
|
||||
const preview = document.createElement('div');
|
||||
preview.className = 'color-swatch-preview';
|
||||
preview.style.backgroundColor = color;
|
||||
|
||||
const label = document.createElement('span');
|
||||
label.className = 'color-swatch-label';
|
||||
label.textContent = color;
|
||||
|
||||
const colorPicker = document.createElement('input');
|
||||
colorPicker.type = 'color';
|
||||
colorPicker.className = 'color-picker-input';
|
||||
colorPicker.value = color;
|
||||
colorPicker.addEventListener('change', async (event) => {
|
||||
const newColor = event.target.value;
|
||||
await onColorChange(index, newColor);
|
||||
});
|
||||
|
||||
const removeButton = document.createElement('button');
|
||||
removeButton.className = 'btn btn-danger btn-small';
|
||||
removeButton.textContent = 'Remove';
|
||||
removeButton.addEventListener('click', async (event) => {
|
||||
event.stopPropagation();
|
||||
await onRemoveColor(index);
|
||||
});
|
||||
|
||||
swatch.addEventListener('dragstart', (event) => {
|
||||
event.dataTransfer.setData('text/plain', String(index));
|
||||
event.dataTransfer.effectAllowed = 'move';
|
||||
});
|
||||
swatch.addEventListener('dragover', (event) => {
|
||||
event.preventDefault();
|
||||
event.dataTransfer.dropEffect = 'move';
|
||||
});
|
||||
swatch.addEventListener('drop', async (event) => {
|
||||
event.preventDefault();
|
||||
const fromIndex = parseInt(event.dataTransfer.getData('text/plain'), 10);
|
||||
const toIndex = parseInt(swatch.dataset.index || '-1', 10);
|
||||
if (Number.isNaN(fromIndex) || Number.isNaN(toIndex) || fromIndex === toIndex) {
|
||||
return;
|
||||
}
|
||||
await onReorder(fromIndex, toIndex);
|
||||
});
|
||||
|
||||
swatch.appendChild(preview);
|
||||
swatch.appendChild(label);
|
||||
swatch.appendChild(colorPicker);
|
||||
swatch.appendChild(removeButton);
|
||||
swatch.addEventListener('click', () => {
|
||||
selectedIndex = index;
|
||||
renderPalette(paletteContainer, colors, onColorChange, onRemoveColor, onReorder);
|
||||
colorPicker.click();
|
||||
});
|
||||
|
||||
paletteContainer.appendChild(swatch);
|
||||
});
|
||||
};
|
||||
|
||||
const initTabPalette = async () => {
|
||||
const paletteContainer = document.getElementById('color-palette');
|
||||
const addButton = document.getElementById('tab-color-add-btn');
|
||||
const addFromPaletteButton = document.getElementById('tab-color-add-from-palette-btn');
|
||||
const colorInput = document.getElementById('tab-color-input');
|
||||
|
||||
if (!paletteContainer || !addButton || !colorInput) {
|
||||
return;
|
||||
}
|
||||
|
||||
const tabId = paletteContainer.dataset.tabId;
|
||||
if (!tabId) {
|
||||
renderPalette(paletteContainer, []);
|
||||
return;
|
||||
}
|
||||
|
||||
let tabData;
|
||||
try {
|
||||
tabData = await getTab(tabId);
|
||||
} catch (error) {
|
||||
renderPalette(paletteContainer, []);
|
||||
return;
|
||||
}
|
||||
|
||||
let colors = tabData.colors || [];
|
||||
if (!Array.isArray(colors)) {
|
||||
colors = [];
|
||||
}
|
||||
const onRemoveColor = async (index) => {
|
||||
if (index === null || index < 0 || index >= colors.length) {
|
||||
alert('Select a color to remove.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const updated = colors.filter((_, i) => i !== index);
|
||||
const saved = await saveTabColors(tabId, updated);
|
||||
colors = saved.colors || updated;
|
||||
selectedIndex = null;
|
||||
renderPalette(paletteContainer, colors, onColorChange, onRemoveColor, onReorder);
|
||||
} catch (error) {
|
||||
console.error('Failed to remove color:', error);
|
||||
alert('Failed to remove color.');
|
||||
}
|
||||
};
|
||||
|
||||
const onReorder = async (fromIndex, toIndex) => {
|
||||
if (fromIndex < 0 || fromIndex >= colors.length || toIndex < 0 || toIndex >= colors.length) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const updated = [...colors];
|
||||
const [moved] = updated.splice(fromIndex, 1);
|
||||
updated.splice(toIndex, 0, moved);
|
||||
const saved = await saveTabColors(tabId, updated);
|
||||
colors = saved.colors || updated;
|
||||
selectedIndex = toIndex;
|
||||
renderPalette(paletteContainer, colors, onColorChange, onRemoveColor, onReorder);
|
||||
} catch (error) {
|
||||
console.error('Failed to reorder colors:', error);
|
||||
alert('Failed to reorder colors.');
|
||||
}
|
||||
};
|
||||
|
||||
const onColorChange = async (index, newColor) => {
|
||||
if (!newColor || index < 0 || index >= colors.length) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const updated = [...colors];
|
||||
updated[index] = newColor;
|
||||
const saved = await saveTabColors(tabId, updated);
|
||||
colors = saved.colors || updated;
|
||||
selectedIndex = index;
|
||||
renderPalette(paletteContainer, colors, onColorChange, onRemoveColor, onReorder);
|
||||
} catch (error) {
|
||||
console.error('Failed to update color:', error);
|
||||
alert('Failed to update color.');
|
||||
}
|
||||
};
|
||||
|
||||
renderPalette(paletteContainer, colors, onColorChange, onRemoveColor, onReorder);
|
||||
|
||||
addButton.onclick = async () => {
|
||||
const newColor = colorInput.value;
|
||||
if (!newColor) {
|
||||
return;
|
||||
}
|
||||
if (colors.includes(newColor)) {
|
||||
alert('Color already in palette.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const updated = [...colors, newColor];
|
||||
const saved = await saveTabColors(tabId, updated);
|
||||
colors = saved.colors || updated;
|
||||
selectedIndex = colors.length - 1;
|
||||
renderPalette(paletteContainer, colors, onColorChange, onRemoveColor, onReorder);
|
||||
} catch (error) {
|
||||
console.error('Failed to add color:', error);
|
||||
alert('Failed to add color.');
|
||||
}
|
||||
};
|
||||
|
||||
if (addFromPaletteButton) {
|
||||
addFromPaletteButton.onclick = () => {
|
||||
const openButton = document.getElementById('color-palette-btn');
|
||||
if (openButton) {
|
||||
openButton.click();
|
||||
}
|
||||
const modal = document.getElementById('color-palette-modal');
|
||||
const modalList = document.getElementById('palette-container');
|
||||
if (modal) {
|
||||
modal.classList.add('active');
|
||||
}
|
||||
if (!modalList) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handlePick = async (event) => {
|
||||
const row = event.target.closest('[data-color]');
|
||||
if (!row) {
|
||||
return;
|
||||
}
|
||||
const picked = row.dataset.color;
|
||||
if (!picked) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
if (!colors.includes(picked)) {
|
||||
const updated = [...colors, picked];
|
||||
const saved = await saveTabColors(tabId, updated);
|
||||
colors = saved.colors || updated;
|
||||
selectedIndex = colors.indexOf(picked);
|
||||
renderPalette(paletteContainer, colors, onColorChange, onRemoveColor, onReorder);
|
||||
}
|
||||
if (modal) {
|
||||
modal.classList.remove('active');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to add palette color:', error);
|
||||
alert('Failed to add palette color.');
|
||||
} finally {
|
||||
modalList.removeEventListener('click', handlePick);
|
||||
}
|
||||
};
|
||||
|
||||
modalList.addEventListener('click', handlePick);
|
||||
};
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
document.body.addEventListener('htmx:afterSwap', (event) => {
|
||||
if (event.target && event.target.id === 'tab-content') {
|
||||
selectedIndex = null;
|
||||
initTabPalette();
|
||||
}
|
||||
});
|
||||
|
||||
initTabPalette();
|
||||
});
|
||||
809
src/static/tabs.js
Normal file
809
src/static/tabs.js
Normal file
@@ -0,0 +1,809 @@
|
||||
// Tab management JavaScript
|
||||
let currentTabId = null;
|
||||
|
||||
// Get current tab from cookie
|
||||
function getCurrentTabFromCookie() {
|
||||
const cookies = document.cookie.split(';');
|
||||
for (let cookie of cookies) {
|
||||
const [name, value] = cookie.trim().split('=');
|
||||
if (name === 'current_tab') {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// Load tabs list
|
||||
async function loadTabs() {
|
||||
try {
|
||||
const response = await fetch('/tabs');
|
||||
const data = await response.json();
|
||||
|
||||
// Get current tab from cookie first, then from server response
|
||||
const cookieTabId = getCurrentTabFromCookie();
|
||||
const serverCurrent = data.current_tab_id;
|
||||
const tabs = data.tabs || {};
|
||||
const tabIds = Object.keys(tabs);
|
||||
|
||||
let candidateId = cookieTabId || serverCurrent || null;
|
||||
// If the candidate doesn't exist anymore (e.g. after DB reset), fall back to first tab.
|
||||
if (candidateId && !tabIds.includes(String(candidateId))) {
|
||||
candidateId = tabIds.length > 0 ? tabIds[0] : null;
|
||||
// Clear stale cookie
|
||||
document.cookie = 'current_tab=; path=/; max-age=0';
|
||||
}
|
||||
|
||||
currentTabId = candidateId;
|
||||
renderTabsList(data.tabs, data.tab_order, currentTabId);
|
||||
|
||||
// Load current tab content if available
|
||||
if (currentTabId) {
|
||||
loadTabContent(currentTabId);
|
||||
} else if (data.tab_order && data.tab_order.length > 0) {
|
||||
// Set first tab as current if none is set
|
||||
await setCurrentTab(data.tab_order[0]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load tabs:', error);
|
||||
const container = document.getElementById('tabs-list');
|
||||
if (container) {
|
||||
container.innerHTML = '<div class="error">Failed to load tabs</div>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Render tabs list in the main UI
|
||||
function renderTabsList(tabs, tabOrder, currentTabId) {
|
||||
const container = document.getElementById('tabs-list');
|
||||
if (!container) return;
|
||||
|
||||
if (!tabOrder || tabOrder.length === 0) {
|
||||
container.innerHTML = '<div class="muted-text">No tabs available</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '<div class="tabs-list">';
|
||||
for (const tabId of tabOrder) {
|
||||
const tab = tabs[tabId];
|
||||
if (tab) {
|
||||
const activeClass = tabId === currentTabId ? 'active' : '';
|
||||
const tabName = tab.name || `Tab ${tabId}`;
|
||||
html += `
|
||||
<button class="tab-button ${activeClass}"
|
||||
data-tab-id="${tabId}"
|
||||
title="Click to select, right-click to edit"
|
||||
onclick="selectTab('${tabId}')">
|
||||
${tabName}
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
html += '</div>';
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
// Render tabs list in modal (like profiles)
|
||||
function renderTabsListModal(tabs, tabOrder, currentTabId) {
|
||||
const container = document.getElementById('tabs-list-modal');
|
||||
if (!container) return;
|
||||
|
||||
container.innerHTML = "";
|
||||
let entries = [];
|
||||
|
||||
if (Array.isArray(tabOrder)) {
|
||||
entries = tabOrder.map((tabId) => [tabId, tabs[tabId] || {}]);
|
||||
} else if (tabs && typeof tabs === "object") {
|
||||
entries = Object.entries(tabs).filter(([key]) => {
|
||||
return key !== 'current_tab_id' && key !== 'tabs' && key !== 'tab_order';
|
||||
});
|
||||
}
|
||||
|
||||
if (entries.length === 0) {
|
||||
const empty = document.createElement("p");
|
||||
empty.className = "muted-text";
|
||||
empty.textContent = "No tabs found.";
|
||||
container.appendChild(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
entries.forEach(([tabId, tab]) => {
|
||||
const row = document.createElement("div");
|
||||
row.className = "profiles-row";
|
||||
|
||||
const label = document.createElement("span");
|
||||
label.textContent = (tab && tab.name) || tabId;
|
||||
if (String(tabId) === String(currentTabId)) {
|
||||
label.textContent = `✓ ${label.textContent}`;
|
||||
label.style.fontWeight = "bold";
|
||||
label.style.color = "#FFD700";
|
||||
}
|
||||
|
||||
const applyButton = document.createElement("button");
|
||||
applyButton.className = "btn btn-secondary btn-small";
|
||||
applyButton.textContent = "Select";
|
||||
applyButton.addEventListener("click", async () => {
|
||||
await selectTab(tabId);
|
||||
document.getElementById('tabs-modal').classList.remove('active');
|
||||
});
|
||||
|
||||
const editButton = document.createElement("button");
|
||||
editButton.className = "btn btn-secondary btn-small";
|
||||
editButton.textContent = "Edit";
|
||||
editButton.addEventListener("click", () => {
|
||||
openEditTabModal(tabId, tab);
|
||||
});
|
||||
|
||||
const sendPresetsButton = document.createElement("button");
|
||||
sendPresetsButton.className = "btn btn-secondary btn-small";
|
||||
sendPresetsButton.textContent = "Send Presets";
|
||||
sendPresetsButton.addEventListener("click", async () => {
|
||||
await sendTabPresets(tabId);
|
||||
});
|
||||
|
||||
const cloneButton = document.createElement("button");
|
||||
cloneButton.className = "btn btn-secondary btn-small";
|
||||
cloneButton.textContent = "Clone";
|
||||
cloneButton.addEventListener("click", async () => {
|
||||
const baseName = (tab && tab.name) || tabId;
|
||||
const suggested = `${baseName} Copy`;
|
||||
const name = prompt("New tab name:", suggested);
|
||||
if (name === null) {
|
||||
return;
|
||||
}
|
||||
const trimmed = String(name).trim();
|
||||
if (!trimmed) {
|
||||
alert("Tab name cannot be empty.");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch(`/tabs/${tabId}/clone`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Accept": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ name: trimmed }),
|
||||
});
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({ error: "Failed to clone tab" }));
|
||||
throw new Error(errorData.error || "Failed to clone tab");
|
||||
}
|
||||
const data = await response.json().catch(() => null);
|
||||
let newTabId = null;
|
||||
if (data && typeof data === "object") {
|
||||
if (data.id) {
|
||||
newTabId = String(data.id);
|
||||
} else {
|
||||
const ids = Object.keys(data);
|
||||
if (ids.length > 0) {
|
||||
newTabId = String(ids[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
await loadTabsModal();
|
||||
if (newTabId) {
|
||||
await selectTab(newTabId);
|
||||
} else {
|
||||
await loadTabs();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Clone tab failed:", error);
|
||||
alert("Failed to clone tab: " + error.message);
|
||||
}
|
||||
});
|
||||
|
||||
const deleteButton = document.createElement("button");
|
||||
deleteButton.className = "btn btn-danger btn-small";
|
||||
deleteButton.textContent = "Delete";
|
||||
deleteButton.addEventListener("click", async () => {
|
||||
const confirmed = confirm(`Delete tab "${label.textContent}"?`);
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch(`/tabs/${tabId}`, {
|
||||
method: "DELETE",
|
||||
headers: { Accept: "application/json" },
|
||||
});
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({ error: "Failed to delete tab" }));
|
||||
throw new Error(errorData.error || "Failed to delete tab");
|
||||
}
|
||||
// Clear cookie if deleted tab was current
|
||||
if (tabId === currentTabId) {
|
||||
document.cookie = 'current_tab=; path=/; max-age=0';
|
||||
currentTabId = null;
|
||||
}
|
||||
await loadTabsModal();
|
||||
await loadTabs(); // Reload main tabs list
|
||||
} catch (error) {
|
||||
console.error("Delete tab failed:", error);
|
||||
alert("Failed to delete tab: " + error.message);
|
||||
}
|
||||
});
|
||||
|
||||
row.appendChild(label);
|
||||
row.appendChild(applyButton);
|
||||
row.appendChild(editButton);
|
||||
row.appendChild(sendPresetsButton);
|
||||
row.appendChild(cloneButton);
|
||||
row.appendChild(deleteButton);
|
||||
container.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
// Load tabs in modal
|
||||
async function loadTabsModal() {
|
||||
const container = document.getElementById('tabs-list-modal');
|
||||
if (!container) return;
|
||||
|
||||
container.innerHTML = "";
|
||||
const loading = document.createElement("p");
|
||||
loading.className = "muted-text";
|
||||
loading.textContent = "Loading tabs...";
|
||||
container.appendChild(loading);
|
||||
|
||||
try {
|
||||
const response = await fetch("/tabs", {
|
||||
headers: { Accept: "application/json" },
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to load tabs");
|
||||
}
|
||||
const data = await response.json();
|
||||
const tabs = data.tabs || data;
|
||||
const currentTabId = getCurrentTabFromCookie() || data.current_tab_id || null;
|
||||
renderTabsListModal(tabs, data.tab_order || [], currentTabId);
|
||||
} catch (error) {
|
||||
console.error("Load tabs failed:", error);
|
||||
container.innerHTML = "";
|
||||
const errorMessage = document.createElement("p");
|
||||
errorMessage.className = "muted-text";
|
||||
errorMessage.textContent = "Failed to load tabs.";
|
||||
container.appendChild(errorMessage);
|
||||
}
|
||||
}
|
||||
|
||||
// Select a tab
|
||||
async function selectTab(tabId) {
|
||||
// Update active state
|
||||
document.querySelectorAll('.tab-button').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
const btn = document.querySelector(`[data-tab-id="${tabId}"]`);
|
||||
if (btn) {
|
||||
btn.classList.add('active');
|
||||
}
|
||||
|
||||
// Set as current tab
|
||||
await setCurrentTab(tabId);
|
||||
// Load tab content
|
||||
loadTabContent(tabId);
|
||||
}
|
||||
|
||||
// Set current tab in cookie
|
||||
async function setCurrentTab(tabId) {
|
||||
try {
|
||||
const response = await fetch(`/tabs/${tabId}/set-current`, {
|
||||
method: 'POST'
|
||||
});
|
||||
const data = await response.json();
|
||||
if (response.ok) {
|
||||
currentTabId = tabId;
|
||||
// Also set cookie on client side
|
||||
document.cookie = `current_tab=${tabId}; path=/; max-age=31536000`;
|
||||
} else {
|
||||
console.error('Failed to set current tab:', data.error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error setting current tab:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Load tab content
|
||||
async function loadTabContent(tabId) {
|
||||
const container = document.getElementById('tab-content');
|
||||
if (!container) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/tabs/${tabId}`);
|
||||
const tab = await response.json();
|
||||
|
||||
if (tab.error) {
|
||||
container.innerHTML = `<div class="error">${tab.error}</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Render tab content (presets section)
|
||||
const tabName = tab.name || `Tab ${tabId}`;
|
||||
const deviceNames = Array.isArray(tab.names) ? tab.names.join(',') : '';
|
||||
container.innerHTML = `
|
||||
<div class="presets-section" data-tab-id="${tabId}" data-device-names="${deviceNames}">
|
||||
<div class="profiles-actions presets-toolbar" style="margin-bottom: 1rem;">
|
||||
<div class="tab-brightness-group">
|
||||
<label for="tab-brightness-slider">Brightness</label>
|
||||
<input type="range" id="tab-brightness-slider" min="0" max="255" value="255">
|
||||
</div>
|
||||
</div>
|
||||
<div id="presets-list-tab" class="presets-list">
|
||||
<!-- Presets will be loaded here by presets.js -->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Wire up per-tab brightness slider to send global brightness via ESPNow.
|
||||
const brightnessSlider = container.querySelector('#tab-brightness-slider');
|
||||
let brightnessSendTimeout = null;
|
||||
if (brightnessSlider) {
|
||||
brightnessSlider.addEventListener('input', (e) => {
|
||||
const val = parseInt(e.target.value, 10) || 0;
|
||||
if (brightnessSendTimeout) {
|
||||
clearTimeout(brightnessSendTimeout);
|
||||
}
|
||||
brightnessSendTimeout = setTimeout(() => {
|
||||
if (typeof window.sendEspnowRaw === 'function') {
|
||||
try {
|
||||
window.sendEspnowRaw({ v: '1', b: val });
|
||||
} catch (err) {
|
||||
console.error('Failed to send brightness via ESPNow:', err);
|
||||
}
|
||||
}
|
||||
}, 150);
|
||||
});
|
||||
}
|
||||
|
||||
// Trigger presets loading if the function exists
|
||||
if (typeof renderTabPresets === 'function') {
|
||||
renderTabPresets(tabId);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load tab content:', error);
|
||||
container.innerHTML = '<div class="error">Failed to load tab content</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// Send all presets used by a tab via the /presets/send HTTP endpoint.
|
||||
async function sendTabPresets(tabId) {
|
||||
try {
|
||||
// Load tab data to determine which presets are used
|
||||
const tabResponse = await fetch(`/tabs/${tabId}`, {
|
||||
headers: { Accept: 'application/json' },
|
||||
});
|
||||
if (!tabResponse.ok) {
|
||||
alert('Failed to load tab to send presets.');
|
||||
return;
|
||||
}
|
||||
const tabData = await tabResponse.json();
|
||||
|
||||
// Extract preset IDs from tab (supports grid, flat, and legacy formats)
|
||||
let presetIds = [];
|
||||
if (Array.isArray(tabData.presets_flat)) {
|
||||
presetIds = tabData.presets_flat;
|
||||
} else if (Array.isArray(tabData.presets)) {
|
||||
if (tabData.presets.length && typeof tabData.presets[0] === 'string') {
|
||||
// Flat array of IDs
|
||||
presetIds = tabData.presets;
|
||||
} else if (tabData.presets.length && Array.isArray(tabData.presets[0])) {
|
||||
// 2D grid
|
||||
presetIds = tabData.presets.flat();
|
||||
}
|
||||
}
|
||||
presetIds = (presetIds || []).filter(Boolean);
|
||||
|
||||
if (!presetIds.length) {
|
||||
alert('This tab has no presets to send.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Call server-side ESPNow sender with just the IDs; it handles chunking.
|
||||
const payload = { preset_ids: presetIds };
|
||||
if (tabData.default_preset) {
|
||||
payload.default = tabData.default_preset;
|
||||
}
|
||||
const response = await fetch('/presets/send', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
const data = await response.json().catch(() => ({}));
|
||||
if (!response.ok) {
|
||||
const msg = (data && data.error) || 'Failed to send presets.';
|
||||
alert(msg);
|
||||
return;
|
||||
}
|
||||
|
||||
const sent = typeof data.presets_sent === 'number' ? data.presets_sent : presetIds.length;
|
||||
const messages = typeof data.messages_sent === 'number' ? data.messages_sent : '?';
|
||||
alert(`Sent ${sent} preset(s) in ${messages} ESPNow message(s).`);
|
||||
} catch (error) {
|
||||
console.error('Failed to send tab presets:', error);
|
||||
alert('Failed to send tab presets.');
|
||||
}
|
||||
}
|
||||
|
||||
// Send all presets used by all tabs in the current profile via /presets/send.
|
||||
async function sendProfilePresets() {
|
||||
try {
|
||||
// Load current profile to get its tabs
|
||||
const profileRes = await fetch('/profiles/current', {
|
||||
headers: { Accept: 'application/json' },
|
||||
});
|
||||
if (!profileRes.ok) {
|
||||
alert('Failed to load current profile.');
|
||||
return;
|
||||
}
|
||||
const profileData = await profileRes.json();
|
||||
const profile = profileData.profile || {};
|
||||
let tabList = null;
|
||||
if (Array.isArray(profile.tabs)) {
|
||||
tabList = profile.tabs;
|
||||
} else if (profile.tabs) {
|
||||
tabList = [profile.tabs];
|
||||
}
|
||||
if (!tabList || tabList.length === 0) {
|
||||
if (Array.isArray(profile.tab_order)) {
|
||||
tabList = profile.tab_order;
|
||||
} else if (profile.tab_order) {
|
||||
tabList = [profile.tab_order];
|
||||
} else {
|
||||
tabList = [];
|
||||
}
|
||||
}
|
||||
if (!tabList || tabList.length === 0) {
|
||||
console.warn('sendProfilePresets: no tabs found', {
|
||||
profileData,
|
||||
profile,
|
||||
});
|
||||
}
|
||||
|
||||
if (!tabList.length) {
|
||||
alert('Current profile has no tabs to send presets for.');
|
||||
return;
|
||||
}
|
||||
|
||||
let totalSent = 0;
|
||||
let totalMessages = 0;
|
||||
let tabsWithPresets = 0;
|
||||
|
||||
for (const tabId of tabList) {
|
||||
try {
|
||||
const tabResp = await fetch(`/tabs/${tabId}`, {
|
||||
headers: { Accept: 'application/json' },
|
||||
});
|
||||
if (!tabResp.ok) {
|
||||
continue;
|
||||
}
|
||||
const tabData = await tabResp.json();
|
||||
let presetIds = [];
|
||||
if (Array.isArray(tabData.presets_flat)) {
|
||||
presetIds = tabData.presets_flat;
|
||||
} else if (Array.isArray(tabData.presets)) {
|
||||
if (tabData.presets.length && typeof tabData.presets[0] === 'string') {
|
||||
presetIds = tabData.presets;
|
||||
} else if (tabData.presets.length && Array.isArray(tabData.presets[0])) {
|
||||
presetIds = tabData.presets.flat();
|
||||
}
|
||||
}
|
||||
presetIds = (presetIds || []).filter(Boolean);
|
||||
if (!presetIds.length) {
|
||||
continue;
|
||||
}
|
||||
tabsWithPresets += 1;
|
||||
const payload = { preset_ids: presetIds };
|
||||
if (tabData.default_preset) {
|
||||
payload.default = tabData.default_preset;
|
||||
}
|
||||
const response = await fetch('/presets/send', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
const data = await response.json().catch(() => ({}));
|
||||
if (!response.ok) {
|
||||
const msg = (data && data.error) || `Failed to send presets for tab ${tabId}.`;
|
||||
console.warn(msg);
|
||||
continue;
|
||||
}
|
||||
totalSent += typeof data.presets_sent === 'number' ? data.presets_sent : presetIds.length;
|
||||
totalMessages += typeof data.messages_sent === 'number' ? data.messages_sent : 0;
|
||||
} catch (e) {
|
||||
console.error('Failed to send profile presets for tab:', tabId, e);
|
||||
}
|
||||
}
|
||||
|
||||
if (!tabsWithPresets) {
|
||||
alert('No presets to send for the current profile.');
|
||||
return;
|
||||
}
|
||||
|
||||
const messagesLabel = totalMessages ? totalMessages : '?';
|
||||
alert(`Sent ${totalSent} preset(s) across ${tabsWithPresets} tab(s) in ${messagesLabel} ESPNow message(s).`);
|
||||
} catch (error) {
|
||||
console.error('Failed to send profile presets:', error);
|
||||
alert('Failed to send profile presets.');
|
||||
}
|
||||
}
|
||||
|
||||
// Populate the "Add presets to this tab" list: only presets NOT already in the tab, each with a Select button.
|
||||
async function populateEditTabPresetsList(tabId) {
|
||||
const listEl = document.getElementById('edit-tab-presets-list');
|
||||
if (!listEl) return;
|
||||
listEl.innerHTML = '<span class="muted-text">Loading…</span>';
|
||||
try {
|
||||
const tabRes = await fetch(`/tabs/${tabId}`, { headers: { Accept: 'application/json' } });
|
||||
if (!tabRes.ok) {
|
||||
listEl.innerHTML = '<span class="muted-text">Failed to load presets.</span>';
|
||||
return;
|
||||
}
|
||||
const tabData = await tabRes.json();
|
||||
let inTabIds = [];
|
||||
if (Array.isArray(tabData.presets_flat)) {
|
||||
inTabIds = tabData.presets_flat;
|
||||
} else if (Array.isArray(tabData.presets)) {
|
||||
if (tabData.presets.length && typeof tabData.presets[0] === 'string') {
|
||||
inTabIds = tabData.presets;
|
||||
} else if (tabData.presets.length && Array.isArray(tabData.presets[0])) {
|
||||
inTabIds = tabData.presets.flat();
|
||||
}
|
||||
}
|
||||
const presetsRes = await fetch('/presets', { headers: { Accept: 'application/json' } });
|
||||
const allPresets = presetsRes.ok ? await presetsRes.json() : {};
|
||||
const allIds = Object.keys(allPresets);
|
||||
const availableToAdd = allIds.filter(id => !inTabIds.includes(id));
|
||||
listEl.innerHTML = '';
|
||||
if (availableToAdd.length === 0) {
|
||||
listEl.innerHTML = '<span class="muted-text">No presets to add. All presets are already in this tab.</span>';
|
||||
return;
|
||||
}
|
||||
for (const presetId of availableToAdd) {
|
||||
const preset = allPresets[presetId] || {};
|
||||
const name = preset.name || presetId;
|
||||
const row = document.createElement('div');
|
||||
row.className = 'profiles-row';
|
||||
row.style.display = 'flex';
|
||||
row.style.alignItems = 'center';
|
||||
row.style.justifyContent = 'space-between';
|
||||
row.style.gap = '0.5rem';
|
||||
const label = document.createElement('span');
|
||||
label.textContent = name;
|
||||
const selectBtn = document.createElement('button');
|
||||
selectBtn.type = 'button';
|
||||
selectBtn.className = 'btn btn-primary btn-small';
|
||||
selectBtn.textContent = 'Select';
|
||||
selectBtn.addEventListener('click', async () => {
|
||||
if (typeof window.addPresetToTab === 'function') {
|
||||
await window.addPresetToTab(presetId, tabId);
|
||||
await populateEditTabPresetsList(tabId);
|
||||
}
|
||||
});
|
||||
row.appendChild(label);
|
||||
row.appendChild(selectBtn);
|
||||
listEl.appendChild(row);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('populateEditTabPresetsList:', e);
|
||||
listEl.innerHTML = '<span class="muted-text">Failed to load presets.</span>';
|
||||
}
|
||||
}
|
||||
|
||||
// Open edit tab modal
|
||||
function openEditTabModal(tabId, tab) {
|
||||
const modal = document.getElementById('edit-tab-modal');
|
||||
const idInput = document.getElementById('edit-tab-id');
|
||||
const nameInput = document.getElementById('edit-tab-name');
|
||||
const idsInput = document.getElementById('edit-tab-ids');
|
||||
|
||||
if (idInput) idInput.value = tabId;
|
||||
if (nameInput) nameInput.value = tab ? (tab.name || '') : '';
|
||||
if (idsInput) idsInput.value = tab && tab.names ? tab.names.join(', ') : '1';
|
||||
|
||||
if (modal) modal.classList.add('active');
|
||||
populateEditTabPresetsList(tabId);
|
||||
}
|
||||
|
||||
// Update an existing tab
|
||||
async function updateTab(tabId, name, ids) {
|
||||
try {
|
||||
const names = ids ? ids.split(',').map(id => id.trim()) : ['1'];
|
||||
const response = await fetch(`/tabs/${tabId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: name,
|
||||
names: names
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (response.ok) {
|
||||
// Reload tabs list
|
||||
await loadTabsModal();
|
||||
await loadTabs();
|
||||
// Close modal
|
||||
document.getElementById('edit-tab-modal').classList.remove('active');
|
||||
return true;
|
||||
} else {
|
||||
alert(`Error: ${data.error || 'Failed to update tab'}`);
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to update tab:', error);
|
||||
alert('Failed to update tab');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Create a new tab
|
||||
async function createTab(name, ids) {
|
||||
try {
|
||||
const names = ids ? ids.split(',').map(id => id.trim()) : ['1'];
|
||||
const response = await fetch('/tabs', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: name,
|
||||
names: names
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (response.ok) {
|
||||
// Reload tabs list
|
||||
await loadTabsModal();
|
||||
await loadTabs();
|
||||
// Select the new tab
|
||||
if (data && Object.keys(data).length > 0) {
|
||||
const newTabId = Object.keys(data)[0];
|
||||
await selectTab(newTabId);
|
||||
}
|
||||
return true;
|
||||
} else {
|
||||
alert(`Error: ${data.error || 'Failed to create tab'}`);
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to create tab:', error);
|
||||
alert('Failed to create tab');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize on page load
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadTabs();
|
||||
|
||||
// Set up tabs modal
|
||||
const tabsButton = document.getElementById('tabs-btn');
|
||||
const tabsModal = document.getElementById('tabs-modal');
|
||||
const tabsCloseButton = document.getElementById('tabs-close-btn');
|
||||
const newTabNameInput = document.getElementById('new-tab-name');
|
||||
const newTabIdsInput = document.getElementById('new-tab-ids');
|
||||
const createTabButton = document.getElementById('create-tab-btn');
|
||||
|
||||
if (tabsButton && tabsModal) {
|
||||
tabsButton.addEventListener('click', () => {
|
||||
tabsModal.classList.add('active');
|
||||
loadTabsModal();
|
||||
});
|
||||
}
|
||||
|
||||
if (tabsCloseButton) {
|
||||
tabsCloseButton.addEventListener('click', () => {
|
||||
tabsModal.classList.remove('active');
|
||||
});
|
||||
}
|
||||
|
||||
if (tabsModal) {
|
||||
tabsModal.addEventListener('click', (event) => {
|
||||
if (event.target === tabsModal) {
|
||||
tabsModal.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Right-click on a tab button in the main header bar to edit that tab
|
||||
document.addEventListener('contextmenu', async (event) => {
|
||||
const btn = event.target.closest('.tab-button');
|
||||
if (!btn || !btn.dataset.tabId) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
const tabId = btn.dataset.tabId;
|
||||
try {
|
||||
const response = await fetch(`/tabs/${tabId}`);
|
||||
if (response.ok) {
|
||||
const tab = await response.json();
|
||||
openEditTabModal(tabId, tab);
|
||||
} else {
|
||||
alert('Failed to load tab for editing');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load tab:', error);
|
||||
alert('Failed to load tab for editing');
|
||||
}
|
||||
});
|
||||
|
||||
// Set up create tab
|
||||
const createTabHandler = async () => {
|
||||
if (!newTabNameInput) return;
|
||||
const name = newTabNameInput.value.trim();
|
||||
const ids = (newTabIdsInput && newTabIdsInput.value.trim()) || '1';
|
||||
|
||||
if (name) {
|
||||
await createTab(name, ids);
|
||||
if (newTabNameInput) newTabNameInput.value = '';
|
||||
if (newTabIdsInput) newTabIdsInput.value = '1';
|
||||
}
|
||||
};
|
||||
|
||||
if (createTabButton) {
|
||||
createTabButton.addEventListener('click', createTabHandler);
|
||||
}
|
||||
|
||||
if (newTabNameInput) {
|
||||
newTabNameInput.addEventListener('keypress', (event) => {
|
||||
if (event.key === 'Enter') {
|
||||
createTabHandler();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Set up edit tab form
|
||||
const editTabForm = document.getElementById('edit-tab-form');
|
||||
if (editTabForm) {
|
||||
editTabForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const idInput = document.getElementById('edit-tab-id');
|
||||
const nameInput = document.getElementById('edit-tab-name');
|
||||
const idsInput = document.getElementById('edit-tab-ids');
|
||||
|
||||
const tabId = idInput ? idInput.value : null;
|
||||
const name = nameInput ? nameInput.value.trim() : '';
|
||||
const ids = idsInput ? idsInput.value.trim() : '1';
|
||||
|
||||
if (tabId && name) {
|
||||
await updateTab(tabId, name, ids);
|
||||
editTabForm.reset();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Close edit modal when clicking outside
|
||||
const editTabModal = document.getElementById('edit-tab-modal');
|
||||
if (editTabModal) {
|
||||
editTabModal.addEventListener('click', (event) => {
|
||||
if (event.target === editTabModal) {
|
||||
editTabModal.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Profile-wide "Send Presets" button in header
|
||||
const sendProfilePresetsBtn = document.getElementById('send-profile-presets-btn');
|
||||
if (sendProfilePresetsBtn) {
|
||||
sendProfilePresetsBtn.addEventListener('click', async () => {
|
||||
await sendProfilePresets();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Export for use in other scripts
|
||||
window.tabsManager = {
|
||||
loadTabs,
|
||||
selectTab,
|
||||
createTab,
|
||||
updateTab,
|
||||
openEditTabModal,
|
||||
getCurrentTabId: () => currentTabId
|
||||
};
|
||||
@@ -1,71 +1,321 @@
|
||||
{% args settings, patterns %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LED Control</title>
|
||||
<script src="static/main.js"></script>
|
||||
<link rel="stylesheet" href="static/main.css">
|
||||
<title>LED Controller - Tab Mode</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Control LEDs</h1>
|
||||
<button onclick="selectControls()">Controls</button>
|
||||
<button onclick="selectSettings()">Settings</button>
|
||||
|
||||
<!-- Main LED Controls -->
|
||||
<div id="controls">
|
||||
<div id="pattern_buttons">
|
||||
{% for p in patterns %}
|
||||
<button class="pattern_button" value="{{p}}">{{p}}</button>
|
||||
{% endfor %}
|
||||
|
||||
<!-- Pattern buttons will be inserted here -->
|
||||
<div class="app-container">
|
||||
<header>
|
||||
<div class="tabs-container">
|
||||
<div id="tabs-list">
|
||||
Loading tabs...
|
||||
</div>
|
||||
<form id="delay_form" method="post" action="/delay">
|
||||
<label for="delay">Delay:</label>
|
||||
<input type="range" id="delay" name="delay" min="1" max="1000" value="{{settings['delay']}}" step="10">
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="btn btn-secondary" id="tabs-btn">Tabs</button>
|
||||
<button class="btn btn-secondary" id="color-palette-btn">Color Palette</button>
|
||||
<button class="btn btn-secondary" id="presets-btn">Presets</button>
|
||||
<button class="btn btn-secondary" id="send-profile-presets-btn">Send Presets</button>
|
||||
<button class="btn btn-secondary" id="patterns-btn">Patterns</button>
|
||||
<button class="btn btn-secondary" id="profiles-btn">Profiles</button>
|
||||
<button class="btn btn-secondary" id="settings-btn">Settings</button>
|
||||
<button class="btn btn-secondary" id="help-btn">Help</button>
|
||||
</div>
|
||||
<div class="header-menu-mobile">
|
||||
<button class="btn btn-secondary" id="main-menu-btn">Menu</button>
|
||||
<div id="main-menu-dropdown" class="main-menu-dropdown">
|
||||
<button type="button" data-target="tabs-btn">Tabs</button>
|
||||
<button type="button" data-target="color-palette-btn">Color Palette</button>
|
||||
<button type="button" data-target="presets-btn">Presets</button>
|
||||
<button type="button" data-target="send-profile-presets-btn">Send Presets</button>
|
||||
<button type="button" data-target="patterns-btn">Patterns</button>
|
||||
<button type="button" data-target="profiles-btn">Profiles</button>
|
||||
<button type="button" data-target="settings-btn">Settings</button>
|
||||
<button type="button" data-target="help-btn">Help</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="main-content">
|
||||
<div id="tab-content" class="tab-content">
|
||||
<div class="tab-content-placeholder">
|
||||
Select a tab to get started
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs Modal -->
|
||||
<div id="tabs-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h2>Tabs</h2>
|
||||
<div class="profiles-actions">
|
||||
<input type="text" id="new-tab-name" placeholder="Tab name">
|
||||
<input type="text" id="new-tab-ids" placeholder="Device IDs (1,2,3)" value="1">
|
||||
<button class="btn btn-primary" id="create-tab-btn">Create</button>
|
||||
</div>
|
||||
<div id="tabs-list-modal" class="profiles-list"></div>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-secondary" id="tabs-close-btn">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Tab Modal -->
|
||||
<div id="edit-tab-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h2>Edit Tab</h2>
|
||||
<form id="edit-tab-form">
|
||||
<input type="hidden" id="edit-tab-id">
|
||||
<div class="modal-actions" style="margin-bottom: 1rem;">
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="document.getElementById('edit-tab-modal').classList.remove('active')">Close</button>
|
||||
</div>
|
||||
<label>Tab Name:</label>
|
||||
<input type="text" id="edit-tab-name" placeholder="Enter tab name" required>
|
||||
<label>Device IDs (comma-separated):</label>
|
||||
<input type="text" id="edit-tab-ids" placeholder="1,2,3" required>
|
||||
<label style="margin-top: 1rem;">Add presets to this tab</label>
|
||||
<div id="edit-tab-presets-list" class="profiles-list" style="max-height: 200px; overflow-y: auto; margin-bottom: 1rem;"></div>
|
||||
</form>
|
||||
<form id="brightness_form" method="post" action="/brightness">
|
||||
<label for="brightness">Brightness:</label>
|
||||
<input type="range" id="brightness" name="brightness" min="0" max="100" value="{{settings['brightness']}}" step="1">
|
||||
</form>
|
||||
<form id="color_form" method="post" action="/color">
|
||||
<input type="color" id="color" name="color" value="{{settings['color1']}}">
|
||||
</form>
|
||||
<form id="color2_form" method="post" action="/color2">
|
||||
<input type="color" id="color2" name="color2" value="{{settings['color2']}}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Profiles Modal -->
|
||||
<div id="profiles-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h2>Profiles</h2>
|
||||
<div class="profiles-actions">
|
||||
<input type="text" id="new-profile-name" placeholder="Profile name">
|
||||
<button class="btn btn-primary" id="create-profile-btn">Create</button>
|
||||
</div>
|
||||
<div id="profiles-list" class="profiles-list"></div>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-secondary" id="profiles-close-btn">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Presets Modal -->
|
||||
<div id="presets-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h2>Presets</h2>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-primary" id="preset-add-btn">Add</button>
|
||||
</div>
|
||||
<div id="presets-list" class="profiles-list"></div>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-secondary" id="presets-close-btn">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preset Editor Modal -->
|
||||
<div id="preset-editor-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h2>Preset</h2>
|
||||
<div class="profiles-actions">
|
||||
<input type="text" id="preset-name-input" placeholder="Preset name">
|
||||
<select id="preset-pattern-input">
|
||||
<option value="">Pattern</option>
|
||||
</select>
|
||||
</div>
|
||||
<label>Colors</label>
|
||||
<div id="preset-colors-container" class="preset-colors-container"></div>
|
||||
<div class="profiles-actions">
|
||||
<input type="color" id="preset-new-color" value="#ffffff">
|
||||
<button class="btn btn-secondary btn-small" id="preset-add-color-btn">Add Color</button>
|
||||
<button class="btn btn-secondary btn-small" id="preset-add-from-palette-btn">Add from Palette</button>
|
||||
</div>
|
||||
<div class="profiles-actions">
|
||||
<div class="preset-editor-field">
|
||||
<label for="preset-brightness-input">Brightness (0–255)</label>
|
||||
<input type="number" id="preset-brightness-input" placeholder="Brightness" min="0" max="255" value="0">
|
||||
</div>
|
||||
<div class="preset-editor-field">
|
||||
<label for="preset-delay-input">Delay (ms)</label>
|
||||
<input type="number" id="preset-delay-input" placeholder="Delay" min="0" max="10000" value="0">
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-params-grid">
|
||||
<div class="n-param-group">
|
||||
<label for="preset-n1-input" id="preset-n1-label">n1:</label>
|
||||
<input type="number" id="preset-n1-input" min="0" max="255" value="0" class="n-input">
|
||||
</div>
|
||||
<div class="n-param-group">
|
||||
<label for="preset-n2-input" id="preset-n2-label">n2:</label>
|
||||
<input type="number" id="preset-n2-input" min="0" max="255" value="0" class="n-input">
|
||||
</div>
|
||||
<div class="n-param-group">
|
||||
<label for="preset-n3-input" id="preset-n3-label">n3:</label>
|
||||
<input type="number" id="preset-n3-input" min="0" max="255" value="0" class="n-input">
|
||||
</div>
|
||||
<div class="n-param-group">
|
||||
<label for="preset-n4-input" id="preset-n4-label">n4:</label>
|
||||
<input type="number" id="preset-n4-input" min="0" max="255" value="0" class="n-input">
|
||||
</div>
|
||||
<div class="n-param-group">
|
||||
<label for="preset-n5-input" id="preset-n5-label">n5:</label>
|
||||
<input type="number" id="preset-n5-input" min="0" max="255" value="0" class="n-input">
|
||||
</div>
|
||||
<div class="n-param-group">
|
||||
<label for="preset-n6-input" id="preset-n6-label">n6:</label>
|
||||
<input type="number" id="preset-n6-input" min="0" max="255" value="0" class="n-input">
|
||||
</div>
|
||||
<div class="n-param-group">
|
||||
<label for="preset-n7-input" id="preset-n7-label">n7:</label>
|
||||
<input type="number" id="preset-n7-input" min="0" max="255" value="0" class="n-input">
|
||||
</div>
|
||||
<div class="n-param-group">
|
||||
<label for="preset-n8-input" id="preset-n8-label">n8:</label>
|
||||
<input type="number" id="preset-n8-input" min="0" max="255" value="0" class="n-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-secondary" id="preset-send-btn">Try</button>
|
||||
<button class="btn btn-secondary" id="preset-default-btn">Default</button>
|
||||
<button class="btn btn-primary" id="preset-save-btn">Save & Send</button>
|
||||
<button class="btn btn-danger" id="preset-remove-from-tab-btn">Remove from Tab</button>
|
||||
<button class="btn btn-secondary" id="preset-clear-btn">Clear</button>
|
||||
<button class="btn btn-secondary" id="preset-editor-close-btn">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Patterns Modal -->
|
||||
<div id="patterns-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h2>Patterns</h2>
|
||||
<div id="patterns-list" class="profiles-list"></div>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-secondary" id="patterns-close-btn">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Color Palette Modal -->
|
||||
<div id="color-palette-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h2>Color Palette</h2>
|
||||
<p class="muted-text">Profile: <span id="palette-current-profile-name">None</span></p>
|
||||
<div id="palette-container" class="profiles-list"></div>
|
||||
<div class="profiles-actions">
|
||||
<input type="color" id="palette-new-color" value="#ffffff">
|
||||
<button class="btn btn-primary" id="palette-add-color-btn">Add Color</button>
|
||||
</div>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-secondary" id="color-palette-close-btn">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Help Modal -->
|
||||
<div id="help-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h2>Help</h2>
|
||||
<p class="muted-text">How to use the LED controller UI.</p>
|
||||
|
||||
<h3>Tabs & devices</h3>
|
||||
<ul>
|
||||
<li><strong>Select tab</strong>: left-click a tab button in the top bar.</li>
|
||||
<li><strong>Edit tab</strong>: right-click a tab button, or click <strong>Edit</strong> in the Tabs modal.</li>
|
||||
<li><strong>Send all presets</strong>: open the <strong>Tabs</strong> menu and click <strong>Send Presets</strong> next to the tab to push every preset used in that tab to all devices.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Presets in a tab</h3>
|
||||
<ul>
|
||||
<li><strong>Select preset</strong>: left-click a preset tile to select it and send a <code>select</code> message to all devices in the tab.</li>
|
||||
<li><strong>Edit preset</strong>: right-click a preset tile and choose <strong>Edit preset…</strong>.</li>
|
||||
<li><strong>Remove from tab</strong>: right-click a preset tile and choose <strong>Remove from this tab</strong> (the preset itself is not deleted, only its link from this tab).</li>
|
||||
<li><strong>Reorder presets</strong>: drag preset tiles to change their order; the new layout is saved automatically.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Presets, profiles & colors</h3>
|
||||
<ul>
|
||||
<li><strong>Presets</strong>: use the <strong>Presets</strong> button in the header to create and manage reusable presets.</li>
|
||||
<li><strong>Profiles</strong>: use <strong>Profiles</strong> to save and recall groups of settings.</li>
|
||||
<li><strong>Color Palette</strong>: use <strong>Color Palette</strong> to build a reusable set of colors you can pull into presets.</li>
|
||||
</ul>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-secondary" id="help-close-btn">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings Modal -->
|
||||
<div id="settings-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h2>Device Settings</h2>
|
||||
<p class="muted-text">Configure WiFi Access Point and device settings.</p>
|
||||
|
||||
<div id="settings-message" class="message"></div>
|
||||
|
||||
<!-- Device Name -->
|
||||
<div class="settings-section">
|
||||
<h3>Device</h3>
|
||||
<form id="device-form">
|
||||
<div class="form-group">
|
||||
<label for="device-name-input">Device Name</label>
|
||||
<input type="text" id="device-name-input" name="device_name" placeholder="e.g. led-controller" required>
|
||||
<small>This name may be used for mDNS (e.g. <code>name.local</code>) and UI display.</small>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="submit" class="btn btn-primary btn-full">Save Name</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Settings Menu for num_leds, Wi-Fi SSID, and Password -->
|
||||
<!-- WiFi Access Point Settings -->
|
||||
<div class="settings-section ap-settings-section">
|
||||
<h3>WiFi Access Point</h3>
|
||||
|
||||
<div id="settings_menu" style="display: none;">
|
||||
<h2>Settings</h2>
|
||||
<div id="ap-status" class="status-info">
|
||||
<h4>AP Status</h4>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
|
||||
<!-- Separate form for submitting num_leds -->
|
||||
<form id="num_leds_form" method="post" action="/num_leds">
|
||||
<label for="num_leds">Number of LEDs:</label>
|
||||
<input type="text" id="num_leds" name="num_leds" value="{{settings['num_leds']}}">
|
||||
<input type="submit" value="Update Number of LEDs">
|
||||
</form>
|
||||
<form id="ap-form">
|
||||
<div class="form-group">
|
||||
<label for="ap-ssid">AP SSID (Network Name)</label>
|
||||
<input type="text" id="ap-ssid" name="ssid" placeholder="Enter AP name" required>
|
||||
<small>The name of the WiFi access point this device creates</small>
|
||||
</div>
|
||||
|
||||
<!-- Form for Wi-Fi SSID and password -->
|
||||
<form id="wifi_form" method="post" action="/wifi_settings">
|
||||
<label for="ssid">Wi-Fi SSID:</label>
|
||||
<input type="text" id="ssid" name="ssid" value="{{settings['wifi']['ssid']}}">
|
||||
<br>
|
||||
<label for="password">Wi-Fi Password:</label>
|
||||
<input type="password" id="password" name="password">
|
||||
<br>
|
||||
<label for="ip">Wi-Fi IP:</label>
|
||||
<input type="ip" id="ip" name="ip" value="{{settings.get('wifi', {}).get('ip', '')}}">
|
||||
<br>
|
||||
<label for="gateway">Wi-Fi Gateway:</label>
|
||||
<input type="gateway" id="gateway" name="gateway" value="{{settings.get('wifi', {}).get('gateway', '')}}">
|
||||
<br>
|
||||
<input type="submit" value="Save Wi-Fi Settings">
|
||||
<div class="form-group">
|
||||
<label for="ap-password">AP Password</label>
|
||||
<input type="password" id="ap-password" name="password" placeholder="Enter AP password (min 8 chars)">
|
||||
<small>Leave empty for open network (min 8 characters if set)</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="ap-channel">Channel (1-11)</label>
|
||||
<input type="number" id="ap-channel" name="channel" min="1" max="11" placeholder="Auto">
|
||||
<small>WiFi channel (1-11 for 2.4GHz). Leave empty for auto.</small>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="submit" class="btn btn-primary btn-full">Configure AP</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-secondary" id="settings-close-btn">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Styles moved to /static/style.css -->
|
||||
<script src="/static/tabs.js"></script>
|
||||
<script src="/static/help.js"></script>
|
||||
<script src="/static/color_palette.js"></script>
|
||||
<script src="/static/profiles.js"></script>
|
||||
<script src="/static/tab_palette.js"></script>
|
||||
<script src="/static/patterns.js"></script>
|
||||
<script src="/static/presets.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,94 +0,0 @@
|
||||
# Autogenerated file
|
||||
def render(settings, patterns):
|
||||
yield """<!DOCTYPE html>
|
||||
<html lang=\"en\">
|
||||
<head>
|
||||
<meta charset=\"UTF-8\">
|
||||
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
|
||||
<title>LED Control</title>
|
||||
<script src=\"static/main.js\"></script>
|
||||
<link rel=\"stylesheet\" href=\"static/main.css\">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Control LEDs</h1>
|
||||
<button onclick=\"selectControls()\">Controls</button>
|
||||
<button onclick=\"selectSettings()\">Settings</button>
|
||||
|
||||
<!-- Main LED Controls -->
|
||||
<div id=\"controls\">
|
||||
<div id=\"pattern_buttons\">
|
||||
"""
|
||||
for p in patterns:
|
||||
yield """ <button class=\"pattern_button\" value=\""""
|
||||
yield str(p)
|
||||
yield """\">"""
|
||||
yield str(p)
|
||||
yield """</button>
|
||||
"""
|
||||
yield """
|
||||
<!-- Pattern buttons will be inserted here -->
|
||||
</div>
|
||||
<form id=\"delay_form\" method=\"post\" action=\"/delay\">
|
||||
<label for=\"delay\">Delay:</label>
|
||||
<input type=\"range\" id=\"delay\" name=\"delay\" min=\"1\" max=\"1000\" value=\""""
|
||||
yield str(settings['delay'])
|
||||
yield """\" step=\"10\">
|
||||
</form>
|
||||
<form id=\"brightness_form\" method=\"post\" action=\"/brightness\">
|
||||
<label for=\"brightness\">Brightness:</label>
|
||||
<input type=\"range\" id=\"brightness\" name=\"brightness\" min=\"0\" max=\"100\" value=\""""
|
||||
yield str(settings['brightness'])
|
||||
yield """\" step=\"1\">
|
||||
</form>
|
||||
<form id=\"color_form\" method=\"post\" action=\"/color\">
|
||||
<input type=\"color\" id=\"color\" name=\"color\" value=\""""
|
||||
yield str(settings['color1'])
|
||||
yield """\">
|
||||
</form>
|
||||
<form id=\"color2_form\" method=\"post\" action=\"/color2\">
|
||||
<input type=\"color\" id=\"color2\" name=\"color2\" value=\""""
|
||||
yield str(settings['color2'])
|
||||
yield """\">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Settings Menu for num_leds, Wi-Fi SSID, and Password -->
|
||||
|
||||
<div id=\"settings_menu\" style=\"display: none;\">
|
||||
<h2>Settings</h2>
|
||||
|
||||
<!-- Separate form for submitting num_leds -->
|
||||
<form id=\"num_leds_form\" method=\"post\" action=\"/num_leds\">
|
||||
<label for=\"num_leds\">Number of LEDs:</label>
|
||||
<input type=\"text\" id=\"num_leds\" name=\"num_leds\" value=\""""
|
||||
yield str(settings['num_leds'])
|
||||
yield """\">
|
||||
<input type=\"submit\" value=\"Update Number of LEDs\">
|
||||
</form>
|
||||
|
||||
<!-- Form for Wi-Fi SSID and password -->
|
||||
<form id=\"wifi_form\" method=\"post\" action=\"/wifi_settings\">
|
||||
<label for=\"ssid\">Wi-Fi SSID:</label>
|
||||
<input type=\"text\" id=\"ssid\" name=\"ssid\" value=\""""
|
||||
yield str(settings['wifi']['ssid'])
|
||||
yield """\">
|
||||
<br>
|
||||
<label for=\"password\">Wi-Fi Password:</label>
|
||||
<input type=\"password\" id=\"password\" name=\"password\">
|
||||
<br>
|
||||
<label for=\"ip\">Wi-Fi IP:</label>
|
||||
<input type=\"ip\" id=\"ip\" name=\"ip\" value=\""""
|
||||
yield str(settings.get('wifi', {}).get('ip', ''))
|
||||
yield """\">
|
||||
<br>
|
||||
<label for=\"gateway\">Wi-Fi Gateway:</label>
|
||||
<input type=\"gateway\" id=\"gateway\" name=\"gateway\" value=\""""
|
||||
yield str(settings.get('wifi', {}).get('gateway', ''))
|
||||
yield """\">
|
||||
<br>
|
||||
<input type=\"submit\" value=\"Save Wi-Fi Settings\">
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
"""
|
||||
309
src/templates/settings.html
Normal file
309
src/templates/settings.html
Normal file
@@ -0,0 +1,309 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LED Controller - Settings</title>
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<style>
|
||||
.settings-container {
|
||||
padding: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.settings-header h1 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.settings-header p {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
background-color: #1a1a1a;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid #4a4a4a;
|
||||
}
|
||||
|
||||
.settings-section h2 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #fff;
|
||||
border-bottom: 2px solid #4a4a4a;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #ccc;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input[type="text"],
|
||||
.form-group input[type="password"],
|
||||
.form-group input[type="number"],
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
background-color: #2e2e2e;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #5a5a5a;
|
||||
}
|
||||
|
||||
.form-group small {
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
color: #888;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.status-info {
|
||||
background-color: #2e2e2e;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.status-info h3 {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.status-info p {
|
||||
color: #aaa;
|
||||
margin: 0.25rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.status-connected {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.status-disconnected {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn-full {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 1rem;
|
||||
color: #aaa;
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
background-color: #2e2e2e;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.message.success {
|
||||
background-color: #1b5e20;
|
||||
color: #4caf50;
|
||||
border: 1px solid #4caf50;
|
||||
}
|
||||
|
||||
.message.error {
|
||||
background-color: #5e1b1b;
|
||||
color: #f44336;
|
||||
border: 1px solid #f44336;
|
||||
}
|
||||
|
||||
.message.show {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<div class="settings-container">
|
||||
<a href="/" class="back-link">← Back to Dashboard</a>
|
||||
|
||||
<div class="settings-header">
|
||||
<h1>Device Settings</h1>
|
||||
<p>Configure WiFi Access Point settings</p>
|
||||
</div>
|
||||
|
||||
<div id="message" class="message"></div>
|
||||
|
||||
<!-- WiFi Access Point Settings -->
|
||||
<div class="settings-section">
|
||||
<h2>WiFi Access Point Settings</h2>
|
||||
|
||||
<div id="ap-status" class="status-info">
|
||||
<h3>AP Status</h3>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
|
||||
<form id="ap-form">
|
||||
<div class="form-group">
|
||||
<label for="ap-ssid">AP SSID (Network Name)</label>
|
||||
<input type="text" id="ap-ssid" name="ssid" placeholder="Enter AP name" required>
|
||||
<small>The name of the WiFi access point this device creates</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="ap-password">AP Password</label>
|
||||
<input type="password" id="ap-password" name="password" placeholder="Enter AP password (min 8 chars)">
|
||||
<small>Leave empty for open network (min 8 characters if set)</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="ap-channel">Channel (1-11)</label>
|
||||
<input type="number" id="ap-channel" name="channel" min="1" max="11" placeholder="Auto">
|
||||
<small>WiFi channel (1-11 for 2.4GHz). Leave empty for auto.</small>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="submit" class="btn btn-primary btn-full">Configure AP</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Show message helper
|
||||
function showMessage(text, type = 'success') {
|
||||
const messageEl = document.getElementById('message');
|
||||
messageEl.textContent = text;
|
||||
messageEl.className = `message ${type} show`;
|
||||
setTimeout(() => {
|
||||
messageEl.classList.remove('show');
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Load AP status and config
|
||||
async function loadAPStatus() {
|
||||
try {
|
||||
const response = await fetch('/settings/wifi/ap');
|
||||
const config = await response.json();
|
||||
|
||||
const statusEl = document.getElementById('ap-status');
|
||||
if (config.active) {
|
||||
statusEl.innerHTML = `
|
||||
<h3>AP Status: <span class="status-connected">Active</span></h3>
|
||||
<p><strong>SSID:</strong> ${config.ssid || 'N/A'}</p>
|
||||
<p><strong>Channel:</strong> ${config.channel || 'Auto'}</p>
|
||||
<p><strong>IP Address:</strong> ${config.ip || 'N/A'}</p>
|
||||
`;
|
||||
} else {
|
||||
statusEl.innerHTML = `
|
||||
<h3>AP Status: <span class="status-disconnected">Inactive</span></h3>
|
||||
<p>Access Point is not currently active</p>
|
||||
`;
|
||||
}
|
||||
|
||||
// Load saved values
|
||||
if (config.saved_ssid) document.getElementById('ap-ssid').value = config.saved_ssid;
|
||||
if (config.saved_channel) document.getElementById('ap-channel').value = config.saved_channel;
|
||||
} catch (error) {
|
||||
console.error('Error loading AP status:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// AP form submission
|
||||
document.getElementById('ap-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = {
|
||||
ssid: document.getElementById('ap-ssid').value,
|
||||
password: document.getElementById('ap-password').value,
|
||||
channel: document.getElementById('ap-channel').value || null
|
||||
};
|
||||
|
||||
// Validate password length if provided
|
||||
if (formData.password && formData.password.length > 0 && formData.password.length < 8) {
|
||||
showMessage('AP password must be at least 8 characters', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert channel to number if provided
|
||||
if (formData.channel) {
|
||||
formData.channel = parseInt(formData.channel);
|
||||
if (formData.channel < 1 || formData.channel > 11) {
|
||||
showMessage('Channel must be between 1 and 11', 'error');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch('/settings/wifi/ap', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
showMessage('Access Point configured successfully!', 'success');
|
||||
setTimeout(loadAPStatus, 1000);
|
||||
} else {
|
||||
showMessage(`Error: ${result.error || 'Failed to configure AP'}`, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showMessage(`Error: ${error.message}`, 'error');
|
||||
}
|
||||
});
|
||||
|
||||
// Load all data on page load
|
||||
loadAPStatus();
|
||||
|
||||
// Refresh status every 10 seconds
|
||||
setInterval(loadAPStatus, 10000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
80
src/util/README.md
Normal file
80
src/util/README.md
Normal file
@@ -0,0 +1,80 @@
|
||||
# ESPNow Message Builder
|
||||
|
||||
This utility module provides functions to build ESPNow messages according to the LED Driver API specification.
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Message Building
|
||||
|
||||
```python
|
||||
from util.espnow_message import build_message, build_preset_dict, build_select_dict
|
||||
|
||||
# Build a message with presets and select
|
||||
presets = {
|
||||
"red_blink": build_preset_dict({
|
||||
"pattern": "blink",
|
||||
"colors": ["#FF0000"],
|
||||
"delay": 200,
|
||||
"brightness": 255,
|
||||
"auto": True
|
||||
})
|
||||
}
|
||||
|
||||
select = build_select_dict({
|
||||
"device1": "red_blink"
|
||||
})
|
||||
|
||||
message = build_message(presets=presets, select=select)
|
||||
# Result: {"v": "1", "presets": {...}, "select": {...}}
|
||||
```
|
||||
|
||||
### Building Select Messages with Step Synchronization
|
||||
|
||||
```python
|
||||
from util.espnow_message import build_message, build_select_dict
|
||||
|
||||
# Select with step for synchronization
|
||||
select = build_select_dict(
|
||||
{"device1": "rainbow_preset", "device2": "rainbow_preset"},
|
||||
step_mapping={"device1": 10, "device2": 10}
|
||||
)
|
||||
|
||||
message = build_message(select=select)
|
||||
# Result: {"v": "1", "select": {"device1": ["rainbow_preset", 10], "device2": ["rainbow_preset", 10]}}
|
||||
```
|
||||
|
||||
### Converting Presets
|
||||
|
||||
```python
|
||||
from util.espnow_message import build_preset_dict, build_presets_dict
|
||||
|
||||
# Single preset
|
||||
preset = build_preset_dict({
|
||||
"name": "my_preset",
|
||||
"pattern": "rainbow",
|
||||
"colors": ["#FF0000", "#00FF00"], # Can be hex strings or RGB tuples
|
||||
"delay": 100,
|
||||
"brightness": 127,
|
||||
"auto": False,
|
||||
"n1": 2
|
||||
})
|
||||
|
||||
# Multiple presets
|
||||
presets_data = {
|
||||
"preset1": {"pattern": "on", "colors": ["#FF0000"]},
|
||||
"preset2": {"pattern": "blink", "colors": ["#00FF00"]}
|
||||
}
|
||||
presets = build_presets_dict(presets_data)
|
||||
```
|
||||
|
||||
## API Specification
|
||||
|
||||
See `docs/API.md` for the complete ESPNow API specification.
|
||||
|
||||
## Key Features
|
||||
|
||||
- **Version Field**: All messages include `"v": "1"` for version tracking
|
||||
- **Preset Format**: Presets use hex color strings (`#RRGGBB`), not RGB tuples
|
||||
- **Select Format**: Select values are always lists: `["preset_name"]` or `["preset_name", step]`
|
||||
- **Color Conversion**: Automatically converts RGB tuples to hex strings
|
||||
- **Default Values**: Provides sensible defaults for missing fields
|
||||
274
src/util/espnow_message.py
Normal file
274
src/util/espnow_message.py
Normal file
@@ -0,0 +1,274 @@
|
||||
"""
|
||||
ESPNow message builder utility for LED driver communication.
|
||||
|
||||
This module provides utilities to build ESPNow messages according to the API specification.
|
||||
ESPNow has a 250-byte payload limit; messages larger than that must be split into multiple
|
||||
frames.
|
||||
"""
|
||||
|
||||
import json
|
||||
|
||||
# ESPNow payload limit (bytes). Messages larger than this must be split.
|
||||
ESPNOW_MAX_PAYLOAD_BYTES = 240
|
||||
|
||||
|
||||
def build_message(presets=None, select=None, save=False, default=None):
|
||||
"""
|
||||
Build an ESPNow message according to the API specification.
|
||||
|
||||
Args:
|
||||
presets: Dictionary mapping preset names to preset objects, or None
|
||||
select: Dictionary mapping device names to select lists, or None
|
||||
|
||||
Returns:
|
||||
JSON string ready to send via ESPNow
|
||||
|
||||
Example:
|
||||
message = build_message(
|
||||
presets={
|
||||
"red_blink": {
|
||||
"pattern": "blink",
|
||||
"colors": ["#FF0000"],
|
||||
"delay": 200,
|
||||
"brightness": 255,
|
||||
"auto": True
|
||||
}
|
||||
},
|
||||
select={
|
||||
"device1": ["red_blink"]
|
||||
}
|
||||
)
|
||||
"""
|
||||
message = {
|
||||
"v": "1"
|
||||
}
|
||||
|
||||
if presets:
|
||||
message["presets"] = presets
|
||||
# When sending presets, optionally include a save flag so the
|
||||
# led-driver can persist them.
|
||||
if save:
|
||||
message["save"] = True
|
||||
|
||||
if select:
|
||||
message["select"] = select
|
||||
|
||||
if default is not None:
|
||||
message["default"] = default
|
||||
|
||||
return json.dumps(message)
|
||||
|
||||
|
||||
def split_espnow_message(msg_dict, max_bytes=None):
|
||||
"""
|
||||
Split a message dict into one or more JSON strings each within ESPNow payload limit.
|
||||
If the message fits in max_bytes, returns a single-element list. Otherwise splits
|
||||
"select" and/or "presets" into multiple messages (other keys like v, b, default, save
|
||||
are included only in the first message).
|
||||
|
||||
Args:
|
||||
msg_dict: Full message as a dict (e.g. from json.loads).
|
||||
max_bytes: Max payload size in bytes (default ESPNOW_MAX_PAYLOAD_BYTES).
|
||||
|
||||
Returns:
|
||||
List of JSON strings, each <= max_bytes, to send in order.
|
||||
"""
|
||||
if max_bytes is None:
|
||||
max_bytes = ESPNOW_MAX_PAYLOAD_BYTES
|
||||
|
||||
single = json.dumps(msg_dict)
|
||||
if len(single) <= max_bytes:
|
||||
return [single]
|
||||
|
||||
# Keys to attach only to the first message we emit
|
||||
first_only = {k: msg_dict[k] for k in ("b", "default", "save") if k in msg_dict}
|
||||
out = []
|
||||
|
||||
def emit(chunk_dict, is_first):
|
||||
m = {"v": msg_dict.get("v", "1")}
|
||||
if is_first and first_only:
|
||||
m.update(first_only)
|
||||
m.update(chunk_dict)
|
||||
s = json.dumps(m)
|
||||
if len(s) > max_bytes:
|
||||
raise ValueError(f"Chunk still too large ({len(s)} > {max_bytes})")
|
||||
out.append(s)
|
||||
|
||||
def chunk_dict(key, items_dict):
|
||||
if not items_dict:
|
||||
return
|
||||
items = list(items_dict.items())
|
||||
i = 0
|
||||
first = True
|
||||
while i < len(items):
|
||||
chunk = {}
|
||||
while i < len(items):
|
||||
k, v = items[i]
|
||||
trial = dict(chunk)
|
||||
trial[k] = v
|
||||
trial_msg = {"v": msg_dict.get("v", "1"), key: trial}
|
||||
if first_only and first:
|
||||
trial_msg.update(first_only)
|
||||
if len(json.dumps(trial_msg)) <= max_bytes:
|
||||
chunk[k] = v
|
||||
i += 1
|
||||
else:
|
||||
if not chunk:
|
||||
# Single entry too large; send as-is and hope receiver accepts
|
||||
chunk[k] = v
|
||||
i += 1
|
||||
break
|
||||
if chunk:
|
||||
emit({key: chunk}, first)
|
||||
first = False
|
||||
if not chunk:
|
||||
break
|
||||
|
||||
if "select" in msg_dict:
|
||||
chunk_dict("select", msg_dict["select"])
|
||||
if "presets" in msg_dict:
|
||||
chunk_dict("presets", msg_dict["presets"])
|
||||
|
||||
if not out:
|
||||
# Fallback: emit one message even if over limit (receiver may reject)
|
||||
out = [single]
|
||||
return out
|
||||
|
||||
|
||||
def build_select_message(device_name, preset_name, step=None):
|
||||
"""
|
||||
Build a select message for a single device.
|
||||
|
||||
Args:
|
||||
device_name: Name of the device
|
||||
preset_name: Name of the preset to select
|
||||
step: Optional step value for synchronization
|
||||
|
||||
Returns:
|
||||
Dictionary with select field ready to use in build_message
|
||||
|
||||
Example:
|
||||
select = build_select_message("device1", "rainbow_preset", step=10)
|
||||
message = build_message(select=select)
|
||||
"""
|
||||
select_list = [preset_name]
|
||||
if step is not None:
|
||||
select_list.append(step)
|
||||
|
||||
return {device_name: select_list}
|
||||
|
||||
|
||||
def build_preset_dict(preset_data):
|
||||
"""
|
||||
Convert preset data to API-compliant format.
|
||||
|
||||
Args:
|
||||
preset_data: Dictionary with preset fields (may include name, pattern, colors, etc.)
|
||||
|
||||
Returns:
|
||||
Dictionary with preset in API-compliant format (without name field)
|
||||
|
||||
Example:
|
||||
preset = build_preset_dict({
|
||||
"name": "red_blink",
|
||||
"pattern": "blink",
|
||||
"colors": ["#FF0000"],
|
||||
"delay": 200,
|
||||
"brightness": 255,
|
||||
"auto": True,
|
||||
"n1": 0,
|
||||
"n2": 0,
|
||||
"n3": 0,
|
||||
"n4": 0,
|
||||
"n5": 0,
|
||||
"n6": 0
|
||||
})
|
||||
"""
|
||||
# Ensure colors are in hex format
|
||||
colors = preset_data.get("colors", preset_data.get("c", ["#FFFFFF"]))
|
||||
if colors:
|
||||
# Convert RGB tuples to hex strings if needed
|
||||
if isinstance(colors[0], list) and len(colors[0]) == 3:
|
||||
# RGB tuple format [r, g, b]
|
||||
colors = [f"#{r:02x}{g:02x}{b:02x}" for r, g, b in colors]
|
||||
elif not isinstance(colors[0], str):
|
||||
# Handle other formats - convert to hex
|
||||
colors = ["#FFFFFF"]
|
||||
# Ensure all colors start with #
|
||||
colors = [c if c.startswith("#") else f"#{c}" for c in colors]
|
||||
else:
|
||||
colors = ["#FFFFFF"]
|
||||
|
||||
# Build payload using the short keys expected by led-driver
|
||||
preset = {
|
||||
"p": preset_data.get("pattern", preset_data.get("p", "off")),
|
||||
"c": colors,
|
||||
"d": preset_data.get("delay", preset_data.get("d", 100)),
|
||||
"b": preset_data.get("brightness", preset_data.get("b", preset_data.get("br", 127))),
|
||||
"a": preset_data.get("auto", preset_data.get("a", True)),
|
||||
"n1": preset_data.get("n1", 0),
|
||||
"n2": preset_data.get("n2", 0),
|
||||
"n3": preset_data.get("n3", 0),
|
||||
"n4": preset_data.get("n4", 0),
|
||||
"n5": preset_data.get("n5", 0),
|
||||
"n6": preset_data.get("n6", 0)
|
||||
}
|
||||
|
||||
return preset
|
||||
|
||||
|
||||
def build_presets_dict(presets_data):
|
||||
"""
|
||||
Convert multiple presets to API-compliant format.
|
||||
|
||||
Args:
|
||||
presets_data: Dictionary mapping preset names to preset data
|
||||
|
||||
Returns:
|
||||
Dictionary mapping preset names to API-compliant preset objects
|
||||
|
||||
Example:
|
||||
presets = build_presets_dict({
|
||||
"red_blink": {
|
||||
"pattern": "blink",
|
||||
"colors": ["#FF0000"],
|
||||
"delay": 200
|
||||
},
|
||||
"blue_pulse": {
|
||||
"pattern": "pulse",
|
||||
"colors": ["#0000FF"],
|
||||
"delay": 100
|
||||
}
|
||||
})
|
||||
"""
|
||||
result = {}
|
||||
for preset_name, preset_data in presets_data.items():
|
||||
result[preset_name] = build_preset_dict(preset_data)
|
||||
return result
|
||||
|
||||
|
||||
def build_select_dict(device_preset_mapping, step_mapping=None):
|
||||
"""
|
||||
Build a select dictionary mapping device names to select lists.
|
||||
|
||||
Args:
|
||||
device_preset_mapping: Dictionary mapping device names to preset names
|
||||
step_mapping: Optional dictionary mapping device names to step values
|
||||
|
||||
Returns:
|
||||
Dictionary with select field ready to use in build_message
|
||||
|
||||
Example:
|
||||
select = build_select_dict(
|
||||
{"device1": "rainbow_preset", "device2": "pulse_preset"},
|
||||
step_mapping={"device1": 10}
|
||||
)
|
||||
message = build_message(select=select)
|
||||
"""
|
||||
select = {}
|
||||
for device_name, preset_name in device_preset_mapping.items():
|
||||
select_list = [preset_name]
|
||||
if step_mapping and device_name in step_mapping:
|
||||
select_list.append(step_mapping[device_name])
|
||||
select[device_name] = select_list
|
||||
return select
|
||||
42
src/util/wifi.py
Normal file
42
src/util/wifi.py
Normal file
@@ -0,0 +1,42 @@
|
||||
import network
|
||||
|
||||
|
||||
def ap(ssid, password, channel=None):
|
||||
ap_if = network.WLAN(network.AP_IF)
|
||||
ap_mac = ap_if.config('mac')
|
||||
print(ssid)
|
||||
ap_if.active(True)
|
||||
if channel is not None:
|
||||
ap_if.config(essid=ssid, password=password, channel=channel)
|
||||
else:
|
||||
ap_if.config(essid=ssid, password=password)
|
||||
ap_if.active(False)
|
||||
ap_if.active(True)
|
||||
print(ap_if.ifconfig())
|
||||
|
||||
def get_mac():
|
||||
ap_if = network.WLAN(network.AP_IF)
|
||||
return ap_if.config('mac')
|
||||
|
||||
|
||||
def get_ap_config():
|
||||
"""Get current AP configuration."""
|
||||
try:
|
||||
ap_if = network.WLAN(network.AP_IF)
|
||||
if ap_if.active():
|
||||
config = ap_if.ifconfig()
|
||||
return {
|
||||
'ssid': ap_if.config('essid'),
|
||||
'channel': ap_if.config('channel'),
|
||||
'ip': config[0] if config else None,
|
||||
'active': True
|
||||
}
|
||||
return {
|
||||
'ssid': None,
|
||||
'channel': None,
|
||||
'ip': None,
|
||||
'active': False
|
||||
}
|
||||
except Exception as e:
|
||||
print(f"Error getting AP config: {e}")
|
||||
return None
|
||||
22
src/web.py
22
src/web.py
@@ -1,22 +0,0 @@
|
||||
from microdot import Microdot, send_file, Response
|
||||
from microdot.utemplate import Template
|
||||
from microdot.websocket import with_websocket
|
||||
|
||||
import json
|
||||
import wifi
|
||||
|
||||
def web(settings):
|
||||
app = Microdot()
|
||||
Response.default_content_type = 'text/html'
|
||||
|
||||
@app.route('/')
|
||||
async def index(request):
|
||||
return Template('/index.html').render(settings=settings, patterns=patterns.patterns.keys())
|
||||
|
||||
@app.route("/static/<path:path>")
|
||||
def static(request, path):
|
||||
if '..' in path:
|
||||
# Directory traversal is not allowed
|
||||
return 'Not found', 404
|
||||
return send_file('static/' + path)
|
||||
return app
|
||||
46
src/wifi.py
46
src/wifi.py
@@ -1,46 +0,0 @@
|
||||
import network
|
||||
from machine import Pin
|
||||
from time import sleep
|
||||
import ubinascii
|
||||
from settings import Settings
|
||||
|
||||
def connect(ssid, password, ip, gateway):
|
||||
if ssid is None or password is None:
|
||||
print("Missing ssid or password")
|
||||
return None
|
||||
try:
|
||||
sta_if = network.WLAN(network.STA_IF)
|
||||
if ip is not None and gateway is not None:
|
||||
sta_if.ifconfig((ip, '255.255.255.0', gateway, '1.1.1.1'))
|
||||
if not sta_if.isconnected():
|
||||
print('connecting to network...')
|
||||
sta_if.active(True)
|
||||
sta_if.connect(ssid, password)
|
||||
sleep(0.1)
|
||||
if sta_if.isconnected():
|
||||
return sta_if.ifconfig()
|
||||
return None
|
||||
return sta_if.ifconfig()
|
||||
except Exception as e:
|
||||
print(f"Failed to connect to wifi {e}")
|
||||
return None
|
||||
|
||||
|
||||
def ap(password):
|
||||
ap_if = network.WLAN(network.AP_IF)
|
||||
ap_mac = ap_if.config('mac')
|
||||
ssid = f"led-{ubinascii.hexlify(ap_mac).decode()}"
|
||||
print(ssid)
|
||||
ap_if.active(True)
|
||||
ap_if.config(essid=ssid, password="qwerty1234")
|
||||
ap_if.active(False)
|
||||
ap_if.active(True)
|
||||
print(ap_if.ifconfig())
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>RGB Slider Tabs</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="tabs"></div>
|
||||
<div class="tab-content"></div>
|
||||
|
||||
<script type="module" src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,81 +0,0 @@
|
||||
import "./rgb-slider.js";
|
||||
|
||||
const ws = new WebSocket("ws://localhost:8000/ws");
|
||||
|
||||
ws.onopen = () => {
|
||||
console.log("WebSocket connection established");
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
console.log("WebSocket connection closed");
|
||||
};
|
||||
|
||||
ws.onerror = (error) => {
|
||||
console.error("WebSocket error:", error);
|
||||
};
|
||||
|
||||
// Number of sliders (tabs) you want to create
|
||||
const numTabs = 3;
|
||||
|
||||
// Select the container for tabs and content
|
||||
const tabsContainer = document.querySelector(".tabs");
|
||||
const tabContentContainer = document.querySelector(".tab-content");
|
||||
|
||||
// Create tabs dynamically
|
||||
for (let i = 1; i <= numTabs; i++) {
|
||||
// Create the tab button
|
||||
const tabButton = document.createElement("button");
|
||||
tabButton.classList.add("tab");
|
||||
tabButton.id = `tab${i}`;
|
||||
tabButton.textContent = `Tab ${i}`;
|
||||
|
||||
// Add the tab button to the container
|
||||
tabsContainer.appendChild(tabButton);
|
||||
|
||||
// Create the corresponding tab content (RGB slider)
|
||||
const tabContent = document.createElement("div");
|
||||
tabContent.classList.add("tab-pane");
|
||||
tabContent.id = `content${i}`;
|
||||
const slider = document.createElement("rgb-slider");
|
||||
slider.id = i;
|
||||
tabContent.appendChild(slider);
|
||||
|
||||
// Add the tab content to the container
|
||||
tabContentContainer.appendChild(tabContent);
|
||||
|
||||
// Listen for color change on each RGB slider
|
||||
slider.addEventListener("color-change", (e) => {
|
||||
const { r, g, b } = e.detail;
|
||||
console.log(`Color changed in tab ${i}:`, e.detail);
|
||||
// Send RGB data to WebSocket server
|
||||
if (ws.readyState === WebSocket.OPEN) {
|
||||
const colorData = { r, g, b };
|
||||
ws.send(JSON.stringify(colorData));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Function to switch tabs
|
||||
function switchTab(tabId) {
|
||||
const tabs = document.querySelectorAll(".tab");
|
||||
const tabContents = document.querySelectorAll(".tab-pane");
|
||||
|
||||
tabs.forEach((tab) => tab.classList.remove("active"));
|
||||
tabContents.forEach((content) => content.classList.remove("active"));
|
||||
|
||||
// Activate the clicked tab and corresponding content
|
||||
document.getElementById(tabId).classList.add("active");
|
||||
document
|
||||
.getElementById("content" + tabId.replace("tab", ""))
|
||||
.classList.add("active");
|
||||
}
|
||||
|
||||
// Add event listeners to tabs
|
||||
tabsContainer.addEventListener("click", (e) => {
|
||||
if (e.target.classList.contains("tab")) {
|
||||
switchTab(e.target.id);
|
||||
}
|
||||
});
|
||||
|
||||
// Initially set the first tab as active
|
||||
switchTab("tab1");
|
||||
@@ -1,195 +0,0 @@
|
||||
// rgb-slider.js
|
||||
|
||||
export class RGBSlider extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
const shadow = this.attachShadow({ mode: "open" });
|
||||
|
||||
shadow.innerHTML = `
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 1em;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
width: 50%;
|
||||
|
||||
font-family: sans-serif;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.preview {
|
||||
width: 50%;
|
||||
height: 60px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #000;
|
||||
background-color: rgb(0, 0, 0);
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.sliders {
|
||||
display: flex;
|
||||
gap: 50px;
|
||||
justify-content: center;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.slider-group {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slider-group input[type="range"] {
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
|
||||
width: 10px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.slider-group label {
|
||||
margin-top: 8px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.rgb-inputs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rgb-inputs input {
|
||||
width: 6ch;
|
||||
padding: 2px;
|
||||
font-family: monospace;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.rgb-inputs label {
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rgb-input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Mobile styles */
|
||||
@media (max-width: 600px) {
|
||||
.preview {
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.slider-group input[type="range"] {
|
||||
height: 180px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.rgb-inputs input {
|
||||
font-size: 1em;
|
||||
padding: 4px;
|
||||
width: 7ch;
|
||||
}
|
||||
|
||||
.slider-group label,
|
||||
.rgb-inputs label {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 1.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div class="preview" id="preview"></div>
|
||||
|
||||
<div class="sliders">
|
||||
<div class="slider-group">
|
||||
<input type="range" min="0" max="255" value="0" id="r">
|
||||
<label>R</label>
|
||||
</div>
|
||||
<div class="slider-group">
|
||||
<input type="range" min="0" max="255" value="0" id="g">
|
||||
<label>G</label>
|
||||
</div>
|
||||
<div class="slider-group">
|
||||
<input type="range" min="0" max="255" value="0" id="b">
|
||||
<label>B</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rgb-inputs">
|
||||
<div class="rgb-input-group">
|
||||
<label for="rInput">R</label>
|
||||
<input type="number" min="0" max="255" id="rInput" value="0">
|
||||
</div>
|
||||
<div class="rgb-input-group">
|
||||
<label for="gInput">G</label>
|
||||
<input type="number" min="0" max="255" id="gInput" value="0">
|
||||
</div>
|
||||
<div class="rgb-input-group">
|
||||
<label for="bInput">B</label>
|
||||
<input type="number" min="0" max="255" id="bInput" value="0">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const get = (id) => shadow.querySelector(id);
|
||||
this.r = get("#r");
|
||||
this.g = get("#g");
|
||||
this.b = get("#b");
|
||||
this.rInput = get("#rInput");
|
||||
this.gInput = get("#gInput");
|
||||
this.bInput = get("#bInput");
|
||||
this.preview = get("#preview");
|
||||
|
||||
const updateColor = (r, g, b) => {
|
||||
this.preview.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
|
||||
this.rInput.value = r;
|
||||
this.gInput.value = g;
|
||||
this.bInput.value = b;
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("color-change", {
|
||||
detail: { r, g, b },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
const syncFromSliders = () => {
|
||||
const r = +this.r.value;
|
||||
const g = +this.g.value;
|
||||
const b = +this.b.value;
|
||||
updateColor(r, g, b);
|
||||
};
|
||||
|
||||
const syncFromInputs = () => {
|
||||
const r = Math.min(255, Math.max(0, +this.rInput.value));
|
||||
const g = Math.min(255, Math.max(0, +this.gInput.value));
|
||||
const b = Math.min(255, Math.max(0, +this.bInput.value));
|
||||
this.r.value = r;
|
||||
this.g.value = g;
|
||||
this.b.value = b;
|
||||
updateColor(r, g, b);
|
||||
};
|
||||
|
||||
this.r.addEventListener("input", syncFromSliders);
|
||||
this.g.addEventListener("input", syncFromSliders);
|
||||
this.b.addEventListener("input", syncFromSliders);
|
||||
|
||||
this.rInput.addEventListener("change", syncFromInputs);
|
||||
this.gInput.addEventListener("change", syncFromInputs);
|
||||
this.bInput.addEventListener("change", syncFromInputs);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("rgb-slider", RGBSlider);
|
||||
79
tests/README.md
Normal file
79
tests/README.md
Normal file
@@ -0,0 +1,79 @@
|
||||
# Tests
|
||||
|
||||
This directory contains tests for the LED Controller project.
|
||||
|
||||
## Directory Structure
|
||||
|
||||
- `test_endpoints.py` - HTTP endpoint tests that mimic web browser requests (runs against 192.168.4.1)
|
||||
- `test_ws.py` - WebSocket tests
|
||||
- `test_p2p.py` - ESP-NOW P2P tests
|
||||
- `models/` - Model unit tests
|
||||
- `web.py` - Local development web server
|
||||
|
||||
## Running Tests
|
||||
|
||||
### Browser Tests (Real Browser Automation)
|
||||
|
||||
Tests the web interface in an actual browser using Selenium:
|
||||
|
||||
```bash
|
||||
python tests/test_browser.py
|
||||
```
|
||||
|
||||
These tests:
|
||||
- Open a real Chrome browser
|
||||
- Navigate to the device at 192.168.4.1
|
||||
- Interact with UI elements (buttons, forms, modals)
|
||||
- Test complete user workflows
|
||||
- Verify visual elements and interactions
|
||||
|
||||
**Requirements:**
|
||||
```bash
|
||||
pip install selenium
|
||||
# Also need ChromeDriver installed and in PATH
|
||||
# Download from: https://chromedriver.chromium.org/
|
||||
```
|
||||
|
||||
### Endpoint Tests (Browser-like HTTP)
|
||||
|
||||
Tests HTTP endpoints by making requests to the device at 192.168.4.1:
|
||||
|
||||
```bash
|
||||
python tests/test_endpoints.py
|
||||
```
|
||||
|
||||
These tests:
|
||||
- Mimic web browser requests with proper headers
|
||||
- Handle cookies for session management
|
||||
- Test all CRUD operations (GET, POST, PUT, DELETE)
|
||||
- Verify responses and status codes
|
||||
|
||||
**Requirements:**
|
||||
```bash
|
||||
pip install requests
|
||||
```
|
||||
|
||||
### WebSocket Tests
|
||||
|
||||
```bash
|
||||
python tests/test_ws.py
|
||||
```
|
||||
|
||||
**Requirements:**
|
||||
```bash
|
||||
pip install websockets
|
||||
```
|
||||
|
||||
### Model Tests
|
||||
|
||||
```bash
|
||||
python tests/models/run_all.py
|
||||
```
|
||||
|
||||
### Local Development Server
|
||||
|
||||
Run the local development server (port 5000):
|
||||
|
||||
```bash
|
||||
python tests/web.py
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user