diff --git a/src/components/forms/Slider.tsx b/src/components/forms/Slider.tsx new file mode 100644 index 0000000..5f8d6ad --- /dev/null +++ b/src/components/forms/Slider.tsx @@ -0,0 +1,28 @@ +import { ChangeEventHandler } from "react"; + +interface SliderProps { + className?: string; + name?: string; + value?: number; + onChange?: ChangeEventHandler +} + +export function Slider ({ className, name, value, onChange }: SliderProps) { + const percent = value ? value/10 : 0 + + return ( + + ) +} \ No newline at end of file diff --git a/src/components/landing/ControlPhotoresistor.tsx b/src/components/landing/ControlPhotoresistor.tsx index fcc451b..fd7c5dc 100644 --- a/src/components/landing/ControlPhotoresistor.tsx +++ b/src/components/landing/ControlPhotoresistor.tsx @@ -10,10 +10,10 @@ import Button from "../forms/Button"; function Card ({ index, resistor }: { index: number, resistor: DynamicPinState }) { const { setResistorPin, removeResistor } = usePhotoresistor(); - const [isListen, setListen] = useState(false); + const [isListen, setListen] = useState(false); - const resistance = resistor.state; - const intensity = `${resistor.state / 1023 * 100}%`; + const resistance: number = Math.floor(resistor.state); + const intensity: number = Math.floor(100 - (resistor.state / 1023 * 100)); const toggleListen = () => { setListen(!isListen); @@ -46,7 +46,7 @@ function Card ({ index, resistor }: { index: number, resistor: DynamicPinState } /> { + const deg = Math.floor((percentage / 1000) * 180); + setDegree(servo.pin, deg); + }, [percentage]); + + const toggleListen = () => { + setListen(!isListen); + } + + const handleChange = (e: ChangeEvent) => { + const percent = Number.parseInt(e.target.value); + if (!Number.isNaN(percent)) setPercent(percent); + } + + const handleChangePin = (e: ChangeEvent) => { + setServoPin(index, e.target.value); + } + + const handleDelete = () => { + removeServo(index); + } + + return ( +
+ +
+
+ + {!isListen ? ( + Start Listening + ) : ( + Stop Listening + )} +
+
{servo.state+"°"}
+
+
+ +
+
+ ) +} + +function BarPlus ({ onClick }: { onClick?: MouseEventHandler }) { + return ( + + ) +} + +function ControlServo ({ refto }: { refto?: Ref }) { + const { motoServo, addServo } = useServo(); + + const handleAdd = (): void => { + let anopin = 5; + for (let i = 0; i < motoServo.length; i++) { + if (motoServo.filter(servo => (servo.pin == `A${anopin}` || servo.pin == anopin)).length > 0) { + anopin--; + } + else break; + } + addServo(`A${anopin}`, 0); + } + + return ( +
+
+
+

+ Servo +

+
+

Servo motors is a type of electric motor designed to provide precise motion and accurate control. Servo motors use a feedback mechanism to control their shaft position and rotational speed.

+
+
+ {motoServo.map((servo, i) => ( + + ))} + {motoServo.length < 6 && } +
+
+
+
+ ) +} + +export default ControlServo; \ No newline at end of file diff --git a/src/contexts/BoardController.tsx b/src/contexts/BoardController.tsx index 4734263..3b41ac3 100644 --- a/src/contexts/BoardController.tsx +++ b/src/contexts/BoardController.tsx @@ -46,7 +46,12 @@ const INIT_VALUES: ControllerContextProps = { state: 127 } ], - motoServo: [], + motoServo: [ + { + pin: "A0", + state: 0 + } + ], photoresistor: [ { pin: "A0", diff --git a/src/css/index.css b/src/css/index.css index a78affe..6cd5128 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -58,30 +58,56 @@ @apply grid grid-cols-8 gap-6; } - -.switch { - @apply rounded-lg transition; -} -.switch > .handler { - @apply rounded-md p-[6px] transition-[margin]; -} +@layer components { + .slider { + -webkit-appearance: none; + -webkit-transition: .15s; + color: #3a3affcc; + color: #3a3aff4d; + @apply appearance-none rounded-full w-full h-3 bg-primary bg-opacity-30 transition; + } + .slider::-webkit-slider-thumb { + -webkit-appearance: none; + @apply appearance-none transition-all rounded-full w-5 h-5 bg-primary cursor-pointer; + } + .slider::-webkit-slider-thumb:hover { + -webkit-appearance: none; + box-shadow: 0 0 0 8px #3838ff66; + } + .slider::-webkit-slider-thumb:active { + -webkit-appearance: none; + box-shadow: 0 0 0 12px #3838ff66; + @apply w-6 h-6; + } + .slider::-moz-range-thumb { + @apply w-5 h-5 bg-primary cursor-pointer; + } -.btn { - @apply px-5 py-4 transition font-roboto-mono rounded-lg -} - -.switch-on { - @apply border-primary bg-primary bg-opacity-40; -} -.switch-on > .handler { - @apply bg-primary ms-[50%]; -} - -.switch-off { - @apply border-disabled bg-transparent; -} -.switch-off > .handler { - @apply bg-disabled ms-0; + .btn { + @apply px-5 py-4 transition font-roboto-mono rounded-lg + } + + + .switch { + @apply rounded-lg transition; + } + .switch > .handler { + @apply rounded-md p-[6px] transition-[margin]; + } + + .switch-on { + @apply border-primary bg-primary bg-opacity-40; + } + .switch-on > .handler { + @apply bg-primary ms-[50%]; + } + + .switch-off { + @apply border-disabled bg-transparent; + } + .switch-off > .handler { + @apply bg-disabled ms-0; + } } \ No newline at end of file diff --git a/src/hooks/index.tsx b/src/hooks/index.tsx index d356680..753f812 100644 --- a/src/hooks/index.tsx +++ b/src/hooks/index.tsx @@ -121,6 +121,43 @@ export function usePiezo () { +export function useServo () { + const { motoServo, setMotoServo } = useContext(BoardControllerContext); + + const getServo = (pin: number | string) => { + return motoServo.find(val => val.pin == pin); + } + + const addServo = (pin: number | string, state: number) => { + const newPesistor = [...motoServo, { pin, state }]; + setMotoServo!(newPesistor); + } + + const removeServo = (index: number) => { + const newPesistor = motoServo.filter((_servo, i) => i != index); + setMotoServo!(newPesistor); + } + + const setDegree = (pin: number | string, state: number) => { + const newPiezo = motoServo.map(servo => { + if (servo.pin == pin) return { pin, state }; + return servo; + }) + setMotoServo!(newPiezo); + } + + const setServoPin = (index: number, newPin: number | string) => { + const newPesistor = motoServo.map((servo, i) => { + if (i == index) return { pin: newPin, state: servo.state }; + return servo; + }) + setMotoServo!(newPesistor); + } + + return { motoServo, getServo, addServo, removeServo, setDegree, setServoPin }; +} + + export function usePhotoresistor () { const { photoresistor, setPhotoresistor } = useContext(BoardControllerContext); @@ -147,4 +184,4 @@ export function usePhotoresistor () { } return { photoresistor, getResistor, addResistor, removeResistor, setResistorPin }; -} \ No newline at end of file +} diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 830f2e2..bcaf203 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -11,6 +11,7 @@ import ControlNav from "../data/control-navigation.json"; import ControlRgbLed from "../components/landing/ControlRgbLed"; import ControlPiezo from "../components/landing/ControlPiezo"; import ControlPhotoresistor from "../components/landing/ControlPhotoresistor"; +import ControlServo from "../components/landing/ControlServo"; function MainPage () { const led = useRef(null); @@ -27,6 +28,7 @@ function MainPage () { + )