Implement light status feedback

This commit is contained in:
GHOSCHT 2021-08-26 11:39:34 +02:00
parent 9cd11ed62f
commit 729f600e87
2 changed files with 27 additions and 25 deletions

View file

@ -1,8 +1,8 @@
import React, { useState } from "react"; import React, { useEffect, useState } from "react";
import { createGlobalStyle } from "styled-components"; import { createGlobalStyle } from "styled-components";
import SerialPort from "serialport"; import SerialPort from "serialport";
import Knob from "./Components/Knob"; import Knob from "./Components/Knob";
import SerialConnection from "./SerialConnection"; import { port, parser } from "./SerialConnection";
const GlobalStyle = createGlobalStyle` const GlobalStyle = createGlobalStyle`
html { html {
@ -16,17 +16,28 @@ const GlobalStyle = createGlobalStyle`
} }
`; `;
const port = SerialConnection();
const App = () => { const App = () => {
const [counter, setCounter] = useState(0); const [status, setStatus] = useState(0);
const SerialDataListener = (data: string) => {
const parsedData = data.split(",");
setStatus(parseInt(parsedData[2], 10));
};
useEffect(() => {
parser.on("data", SerialDataListener);
port.open();
return () => {
parser.removeListener("data", SerialDataListener);
port.close();
};
}, []);
const sendIncreaseHandler = () => { const sendIncreaseHandler = () => {
setCounter(counter + 1); setStatus(status + 1);
port.write("2i"); port.write("2i");
}; };
const sendDecreaseHandler = () => { const sendDecreaseHandler = () => {
setCounter(counter - 1); setStatus(status - 1);
port.write("2d"); port.write("2d");
}; };
const sendToggleHandler = () => { const sendToggleHandler = () => {
@ -40,7 +51,7 @@ const App = () => {
increase={sendIncreaseHandler} increase={sendIncreaseHandler}
decrease={sendDecreaseHandler} decrease={sendDecreaseHandler}
toggle={sendToggleHandler} toggle={sendToggleHandler}
status={counter} status={status}
/> />
<button <button
type="button" type="button"
@ -50,14 +61,6 @@ const App = () => {
> >
open open
</button> </button>
<button
type="button"
onClick={() => {
setCounter(counter + 1);
}}
>
increase
</button>
<button <button
type="button" type="button"
onClick={() => { onClick={() => {

View file

@ -1,11 +1,10 @@
import SerialPort from "serialport"; import SerialPort, { parsers } from "serialport";
const newPort = () => {
const port = new SerialPort("COM5", { const port = new SerialPort("COM5", {
baudRate: 9600, baudRate: 9600,
autoOpen: false, autoOpen: false,
}); });
return port;
};
export default newPort; const parser = port.pipe(new parsers.Readline({ delimiter: "\r\n" }));
export { port, parser };