diff --git a/package.json b/package.json index 477366c..edd8e5e 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,11 @@ "preview": "vite preview" }, "dependencies": { + "axios": "^1.6.7", "bootstrap-icons": "^1.11.3", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "socket.io-client": "^4.7.4" }, "devDependencies": { "@types/react": "^18.2.56", diff --git a/src/components/MainBody.tsx b/src/components/MainBody.tsx index 65add20..5963530 100644 --- a/src/components/MainBody.tsx +++ b/src/components/MainBody.tsx @@ -4,7 +4,7 @@ import BackroundImg from "../assets/img/background.png"; export default function MainBody({ children }: { children?: ReactNode }) { return (
) => { + const pin = e.target?.value; + setLedPin(index, pin); + } + + const toggleLed = () => { + setLed(led.pin, !led.state); + } + + const handleRemove = () => { + removeLed(index); + } + + useEffect(() => { + const pin: number = typeof led.pin == "string" ? Number.parseInt(led.pin) : led.pin; + PatchLed(pin, led.state); + }, [led.state]); + + return ( + + ) +} function ControlLED ({ refto }: { refto?: Ref }) { - const { addLed, leds, removeLed, setLed, setLedPin } = useLed(); + const { addLed, leds } = useLed(); const handleAdd = (): void => { let anopin = 13; @@ -28,23 +63,10 @@ function ControlLED ({ refto }: { refto?: Ref }) { refto={refto} stack={(<> {leds.map((led, i) => ( - { - const pin = e.target.value; - setLedPin(i, pin); - }} - onStateChange={() => { - const state = !led.state; - setLed(led.pin, state); - }} - onDelete={() => { - removeLed(i); - }} + ))} {leds.length < 14 && (false); @@ -27,6 +28,26 @@ function Card ({ index, resistor }: { index: number, resistor: DynamicPinState } removeResistor(index); } + useEffect(() => { + const pin = typeof resistor.pin == "string" && resistor.pin[0] == "A" ? + resistor.pin[1] : resistor.pin; + + if (isListen) { + io.emit("set-photoresistor", pin); + + const handler = (value: string) => { + const res: number = Number.parseInt(value); + setResistance(resistor.pin, res); + } + + io.on("photoresistor", handler); + + return () => { + io.off("photoresistor", handler); + } + } + }, [io, isListen]); + return (
@@ -36,7 +57,7 @@ function Card ({ index, resistor }: { index: number, resistor: DynamicPinState }
@@ -98,7 +119,7 @@ function ControlPhotoresistor ({ refto }: { refto?: Ref }) { Photoresistor
-

Also known as LDR (Light Dependent Resistor), it is an electronic component whose resistance changes based on the intensity of light it receives. The higher the light intensity, the lower the resistance, When exposed to intense light, a photoresistor experiences a decrease in resistance due to photoconduction. The molecules in the photoresistor material become more active and allow electric current to flow through the material more easily.

+

Also known as LDR {"("}Light Dependent Resistor{")"}, it is an electronic component whose resistance changes based on the intensity of light it receives. The higher the light intensity, the lower the resistance, When exposed to intense light, a photoresistor experiences a decrease in resistance due to photoconduction. The molecules in the photoresistor material become more active and allow electric current to flow through the material more easily.

{resistors.map((resistor, i) => ( diff --git a/src/components/landing/ControlPiezo.tsx b/src/components/landing/ControlPiezo.tsx index a75554f..e441f7a 100644 --- a/src/components/landing/ControlPiezo.tsx +++ b/src/components/landing/ControlPiezo.tsx @@ -1,6 +1,7 @@ import PinBox from "../forms/PinBox"; import ControlSection from "../ControlSection"; -import { Ref } from "react"; +import { PatchPiezo } from "../../controllers/BoardController"; +import { ChangeEvent, Ref, useEffect, useState } from "react"; import { usePiezo } from "../../hooks"; import { DynamicPinState } from "../../types/board"; import EvoInput from "../forms/EvoInput"; @@ -9,31 +10,48 @@ import Button from "../forms/Button"; function PiezoItem ({ piezo, index }: { piezo: DynamicPinState, index: number }) { const { setFrequency, setPiezoPin, removePiezo } = usePiezo(); + const [freq, setFreq] = useState(piezo.state); + + const handlePinChange = (e: ChangeEvent) => { + const pin = e.target?.value; + setPiezoPin(index, pin); + } + + const handleFreqChange = (e: ChangeEvent) => { + setFreq(e.target.value); + } + + const handleDelete = () => { + removePiezo(index); + } + + const handlePatch = () => { + const pin: number = typeof piezo.pin == "string" ? Number.parseInt(piezo.pin) : piezo.pin; + PatchPiezo(pin, piezo.state); + } + + useEffect(() => { + const f: number = typeof freq == "string" ? Number.parseInt(freq) : freq; + if (!Number.isNaN(freq)) setFrequency(index, f); + }, [freq]) + return (
{ - const pin = e.target.value; - setPiezoPin(index, pin); - }} - onDelete={() => { - removePiezo(index); - }} + onValueChange={handlePinChange} + onDelete={handleDelete} /> { - const freq: number = Number.parseInt(e.target.value); - if (!Number.isNaN(freq)) setFrequency(piezo.pin, freq); - }} + onChange={handleFreqChange} /> - Play + Play
) } diff --git a/src/components/landing/ControlRgbLed.tsx b/src/components/landing/ControlRgbLed.tsx index dd6a02d..eedfe00 100644 --- a/src/components/landing/ControlRgbLed.tsx +++ b/src/components/landing/ControlRgbLed.tsx @@ -1,3 +1,4 @@ +import { PatchRgbLed } from "../../controllers/BoardController"; import { useRgbLed } from "../../hooks"; import { ChannelPinState, PinState } from "../../types/board"; import EvoInput from "../forms/EvoInput"; @@ -5,34 +6,51 @@ import Switch from "../forms/Switch"; import { MouseEventHandler, Ref, useEffect, useState } from "react"; interface HorizontalBarProps { - pinState: ChannelPinState; - onUpdate?: (pin: ChannelPinState) => void; - onDelete?: () => void + rgbLed: ChannelPinState; + index: number; } -function HorizontalBar ({ pinState, onUpdate, onDelete }: HorizontalBarProps) { +function HorizontalBar ({ rgbLed, index }: HorizontalBarProps) { + const { removeLed, setLed } = useRgbLed(); + + const handleUpdate = (led: ChannelPinState) => { + setLed(index, led); + } + + const handleRemove = () => { + removeLed(index); + } + const [red, setRed] = useState({ - pin: pinState.red.pin.toString(), - state: pinState.red.state + pin: rgbLed.red.pin.toString(), + state: rgbLed.red.state }); const [green, setGreen] = useState({ - pin: pinState.green.pin.toString(), - state: pinState.green.state + pin: rgbLed.green.pin.toString(), + state: rgbLed.green.state }); const [blue, setBlue] = useState({ - pin: pinState.blue.pin.toString(), - state: pinState.blue.state + pin: rgbLed.blue.pin.toString(), + state: rgbLed.blue.state }); useEffect(() => { - if (onUpdate) onUpdate({red, green, blue}); - }, [red, green, blue]) + handleUpdate({red, green, blue}); + }, [red, green, blue]); + + useEffect(() => { + PatchRgbLed(rgbLed); + }, [ + rgbLed.red.state, + rgbLed.green.state, + rgbLed.blue.state + ]); return (
-
@@ -122,7 +140,7 @@ function HorizontalBarPlus ({ onClick }: { onClick?: MouseEventHandler }) { - const { addLed, rgbLed, removeLed, setLed } = useRgbLed(); + const { addLed, rgbLed } = useRgbLed(); const handleAdd = (): void => { addLed({ @@ -155,13 +173,8 @@ function ControlRgbLed ({ refto }: { refto?: Ref }) { {rgbLed.map((led, i) => ( { - setLed(i, newLed); - }} - onDelete={() => { - removeLed(i); - }} + index={i} + rgbLed={led} /> ))} {rgbLed.length < 5 && { + if (isListen) PatchServo(servo.pin, servo.state); + }, [isListen, servo.state]) + const toggleListen = () => { setListen(!isListen); } diff --git a/src/components/shapes/CircleResistance.tsx b/src/components/shapes/CircleResistance.tsx index f34b8ae..5957add 100644 --- a/src/components/shapes/CircleResistance.tsx +++ b/src/components/shapes/CircleResistance.tsx @@ -3,7 +3,7 @@ interface CircleResistanceProps { width?: number; height?: number; blur?: number; - resistance?: number; + intensity?: number; } export default function CircleResistance({ @@ -11,7 +11,7 @@ export default function CircleResistance({ width, height, blur, - resistance, + intensity, }: CircleResistanceProps) { return (
diff --git a/src/contexts/BoardController.tsx b/src/contexts/BoardController.tsx index 3b41ac3..a2007aa 100644 --- a/src/contexts/BoardController.tsx +++ b/src/contexts/BoardController.tsx @@ -43,12 +43,12 @@ const INIT_VALUES: ControllerContextProps = { piezo: [ { pin: 6, - state: 127 + state: 262 } ], motoServo: [ { - pin: "A0", + pin: "9", state: 0 } ], diff --git a/src/controllers/BoardController.tsx b/src/controllers/BoardController.tsx new file mode 100644 index 0000000..33a17ad --- /dev/null +++ b/src/controllers/BoardController.tsx @@ -0,0 +1,51 @@ +import axios from "axios"; +import { ChannelPinState } from "../types/board"; +import { io } from "../socket/socket.io"; + +const url = "http://localhost:3000/api-arduino"; + +export async function PatchLed (pin: number, state: boolean) { + const act = state == true ? 'on' : 'off'; + + const res = await axios.patch(`${url}/led/${pin}/${act}`); + const data = res.data; + + console.log("LED Response: ", data); +} + +export async function PatchRgbLed (state: ChannelPinState) { + const { red, green, blue } = state; + const body = { + r: { + pin: red.pin, + value: red.state + }, + g: { + pin: green.pin, + value: green.state + }, + b: { + pin: blue.pin, + value: blue.state + } + } + const res = await axios.patch(`${url}/rgb-led`, body, { + headers: { + 'Content-Type': 'application/json' + } + }); + const data = res.data; + + console.log("RGB LED Response: ", data); +} + +export async function PatchPiezo (pin: number, freq: number) { + const res = await axios.patch(`${url}/piezo/${pin}/${freq}`); + const data = res.data; + + console.log("Piezo Response: ", data); +} + +export async function PatchServo(pin: string | number, value: number) { + io.emit("servo", pin, value); +} \ No newline at end of file diff --git a/src/css/index.css b/src/css/index.css index 6cd5128..80ae653 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -86,7 +86,7 @@ .btn { - @apply px-5 py-4 transition font-roboto-mono rounded-lg + @apply px-5 py-4 transition font-roboto-mono rounded-lg transition-[transform] duration-75 scale-100 active:scale-90; } diff --git a/src/hooks/index.tsx b/src/hooks/index.tsx index 753f812..8a51249 100644 --- a/src/hooks/index.tsx +++ b/src/hooks/index.tsx @@ -15,8 +15,7 @@ export function useLed () { } const addLed = (pin: number | string, state?: boolean) => { - const newLed = [...leds, { pin, state: state || false }]; - setLeds!(newLed); + setLeds!(led => [...led, { pin, state: state || false }]); } const removeLed = (index: number) => { @@ -100,12 +99,11 @@ export function usePiezo () { setPiezo!(newPiezo); } - const setFrequency = (pin: number | string, state: number) => { - const newPiezo = piezo.map(piezo => { - if (piezo.pin == pin) return { pin, state }; + const setFrequency = (index: number, state: number) => { + setPiezo!(piezos => piezos.map((piezo, i) => { + if (i == index) return { pin: piezo.pin, state: state }; return piezo; - }) - setPiezo!(newPiezo); + })); } const setPiezoPin = (index: number | string, newPin: number | string) => { @@ -175,6 +173,14 @@ export function usePhotoresistor () { setPhotoresistor!(newPesistor); } + const setResistance = (pin: number | string, state: number) => { + const resistor = photoresistor.map(resist => { + if (resist.pin == pin) return { pin: resist.pin, state }; + return resist; + }) + setPhotoresistor!(resistor); + } + const setResistorPin = (index: number, newPin: number | string) => { const newPesistor = photoresistor.map((resist, i) => { if (i == index) return { pin: newPin, state: resist.state }; @@ -183,5 +189,5 @@ export function usePhotoresistor () { setPhotoresistor!(newPesistor); } - return { photoresistor, getResistor, addResistor, removeResistor, setResistorPin }; + return { photoresistor, getResistor, addResistor, removeResistor, setResistance, setResistorPin }; } diff --git a/src/socket/socket.io.ts b/src/socket/socket.io.ts new file mode 100644 index 0000000..08cb3b9 --- /dev/null +++ b/src/socket/socket.io.ts @@ -0,0 +1,3 @@ +import { connect } from "socket.io-client"; + +export const io = connect("http://localhost:3000"); \ No newline at end of file