heliox/old-monorepo
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add functionality to all knobs

Browse source
This commit is contained in:
GHOSCHT 2021-10-28 13:42:06 +02:00
parent dc4f8e88a9
commit 04931c70a7
3 changed files with 58 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
Dashboard/src/App.tsx
View file

@ -1,10 +1,8 @@
import React, { useEffect, useState } from "react";
import React, { useState } from "react";
import { createGlobalStyle } from "styled-components";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "typesafe-actions";
import { useDispatch } from "react-redux";
import Select from "react-select";
import SerialPort from "serialport";
import Knob from "./Components/Knob";
import { connect, disconnect } from "./redux/actions/asyncSerialConnectionActions";
import { setSerialPort } from "./redux/actions/serialConnectionActions";
import KnobSection from "./Components/KnobSection";
@ -30,14 +28,7 @@ const fetchPorts = async () => {
};
const App = () => {
const [status, setStatus] = useState(0);
const dispatch = useDispatch();
const serialConnection = useSelector<RootState, RootState["serialConnection"]>((state) => state.serialConnection);
const SerialDataListener = (data: string) => {
const parsedData = data.split(",");
console.log(parsedData);
setStatus(parseInt(parsedData[2], 10));
};
fetchPorts();
@ -47,46 +38,9 @@ const App = () => {
dispatch(setSerialPort(selectedOption.value));
};
useEffect(() => {
if (serialConnection.portController !== null) {
serialConnection.portController.parser.on("data", SerialDataListener);
}
return () => {
if (serialConnection.portController !== null) {
serialConnection.portController.parser.removeListener("data", SerialDataListener);
}
};
}, [serialConnection]);
const sendIncreaseHandler = () => {
if (serialConnection.portController !== null && serialConnection.portController.port !== null) {
setStatus(status + 1);
serialConnection.portController.port.write("2i");
}
};
const sendDecreaseHandler = () => {
if (serialConnection.portController !== null && serialConnection.portController.port !== null) {
setStatus(status - 1);
serialConnection.portController.port.write("2d");
}
};
const sendToggleHandler = () => {
if (serialConnection.portController !== null && serialConnection.portController.port !== null) {
setStatus(status - 1);
serialConnection.portController.port.write("2t");
}
};
return (
<div>
<GlobalStyle />
<Knob
increase={sendIncreaseHandler}
decrease={sendDecreaseHandler}
toggle={sendToggleHandler}
status={Math.floor((status / 255) * 100)}
/>
<KnobSection />
<button
type="button"

83
Dashboard/src/Components/KnobSection.tsx
View file

@ -1,39 +1,64 @@
import React from "react";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import styled from "styled-components";
import { RootState } from "typesafe-actions";
import Knob from "./Knob";
const KnobContainer = styled.div`
display: flex;
justify-content: space-between;
margin: 1rem;
`;
const KnobSection = () => {
const KnobContainer = styled.div`
display: flex;
`;
const [status, setStatus] = useState([{ id: 0, value: 0 }, { id: 1, value: 0 }, { id: 2, value: 0 }, { id: 3, value: 0 }]);
const serialConnection = useSelector<RootState, RootState["serialConnection"]>((state) => state.serialConnection);
const SerialDataListener = (data: string) => {
const parsedData = data.split(",");
console.log(parsedData);
setStatus(status.map((element) => ({ ...element, value: parseInt(parsedData[element.id], 10) })));
};
useEffect(() => {
if (serialConnection.portController !== null) {
serialConnection.portController.parser.on("data", SerialDataListener);
}
return () => {
if (serialConnection.portController !== null) {
serialConnection.portController.parser.removeListener("data", SerialDataListener);
}
};
}, [serialConnection]);
const sendIncreaseHandler = (index: number) => {
if (serialConnection.portController !== null && serialConnection.portController.port !== null) {
serialConnection.portController.port.write(`${index}i`);
}
};
const sendDecreaseHandler = (index: number) => {
if (serialConnection.portController !== null && serialConnection.portController.port !== null) {
serialConnection.portController.port.write(`${index}d`);
}
};
const sendToggleHandler = (index: number) => {
if (serialConnection.portController !== null && serialConnection.portController.port !== null) {
serialConnection.portController.port.write(`${index}t`);
}
};
return (
<KnobContainer>
<Knob
increase={() => {}}
decrease={() => {}}
toggle={() => {}}
status={255}
/>
<Knob
increase={() => {}}
decrease={() => {}}
toggle={() => {}}
status={255}
/>
<Knob
increase={() => {}}
decrease={() => {}}
toggle={() => {}}
status={255}
/>
<Knob
increase={() => {}}
decrease={() => {}}
toggle={() => {}}
status={255}
/>
{status.map((element) => (
<Knob
key={element.id}
increase={() => { sendIncreaseHandler(element.id); }}
decrease={() => { sendDecreaseHandler(element.id); }}
toggle={() => { sendToggleHandler(element.id); }}
status={Math.floor((element.value / 255) * 100)}
/>
))}
</KnobContainer>
);

4
Dashboard/src/electron.js
View file

@ -9,8 +9,8 @@ const els = require("electron-localshortcut");
const devTools = require("electron-devtools-installer");
const chalk = require("chalk");
const windowWidth = 1000;
const windowHeight = 350;
const windowWidth = 900;
const windowHeight = 300;
let tray = null;
let mainWindow = null;