diff --git a/package.json b/package.json index d559c2a..c3553a8 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "dependencies": { "@solidjs/router": "^0.8.2", "@tauri-apps/api": "^1.2.0", + "solid-icons": "^1.0.4", "solid-js": "^1.4.7", "solid-tippy": "^0.2.1", "tippy.js": "^6.3.7" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8acd81e..d7d8120 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,6 +7,9 @@ dependencies: '@tauri-apps/api': specifier: ^1.2.0 version: 1.2.0 + solid-icons: + specifier: ^1.0.4 + version: 1.0.4(solid-js@1.6.14) solid-js: specifier: ^1.4.7 version: 1.6.14 @@ -1342,6 +1345,15 @@ packages: hasBin: true dev: true + /solid-icons@1.0.4(solid-js@1.6.14): + resolution: {integrity: sha512-gJTp4in3+OYCs9WvDkSLt4Los2unR3Uoder8wjh15GsfP20xiNOLfPTJllXmn+fI8+k3x7bRYtLGIgWd9fUQug==} + engines: {node: '>= 16'} + peerDependencies: + solid-js: '*' + dependencies: + solid-js: 1.6.14 + dev: false + /solid-js@1.6.14: resolution: {integrity: sha512-9SSpGWZqzq8n/JhIt2PsYzLreG4PySmAexLnRM386oMeG5oSWa9QIRoiok45rLNJg148USEfI9wlkJkMrA2qGg==} dependencies: diff --git a/src/components/white-balance/test-colors-bg.tsx b/src/components/white-balance/test-colors-bg.tsx index 440aad1..1e40ac5 100644 --- a/src/components/white-balance/test-colors-bg.tsx +++ b/src/components/white-balance/test-colors-bg.tsx @@ -19,6 +19,7 @@ const ColorItem: Component<{ onClick={() => { props.onClick?.(props.color); }} + title={props.color} /> ); }; diff --git a/src/components/white-balance/white-balance.tsx b/src/components/white-balance/white-balance.tsx index 0983656..d3a8200 100644 --- a/src/components/white-balance/white-balance.tsx +++ b/src/components/white-balance/white-balance.tsx @@ -1,10 +1,22 @@ import { listen } from '@tauri-apps/api/event'; -import { createEffect, onCleanup } from 'solid-js'; +import { Component, createEffect, onCleanup } from 'solid-js'; import { ColorCalibration, LedStripConfigContainer } from '../../models/led-strip-config'; import { ledStripStore, setLedStripStore } from '../../stores/led-strip.store'; import { ColorSlider } from './color-slider'; import { TestColorsBg } from './test-colors-bg'; import { invoke } from '@tauri-apps/api'; +import { VsClose } from 'solid-icons/vs'; +import { BiRegularReset } from 'solid-icons/bi'; +import transparentBg from '../../assets/transparent-grid-background.svg?url'; + +const Value: Component<{ value: number }> = (props) => { + return ( + + {(props.value * 100).toFixed(0)} + % + + ); +}; export const WhiteBalance = () => { // listen to config_changed event @@ -27,7 +39,6 @@ export const WhiteBalance = () => { const updateColorCalibration = (field: keyof ColorCalibration, value: number) => { const calibration = { ...ledStripStore.colorCalibration, [field]: value }; - console.log(field, calibration); invoke('set_color_calibration', { calibration, }).catch((error) => console.log(error)); @@ -37,12 +48,23 @@ export const WhiteBalance = () => { window.history.back(); }; + const reset = () => { + invoke('set_color_calibration', { + calibration: new ColorCalibration(), + }).catch((error) => console.log(error)); + }; + return ( - - + + - + R: { ) } /> + G: @@ -68,6 +91,7 @@ export const WhiteBalance = () => { ) } /> + B: @@ -81,19 +105,25 @@ export const WhiteBalance = () => { ) } /> + W: - X + - - R + +