From 428e9093a2d0f68c68dba6379bdbd5a0ffe68538 Mon Sep 17 00:00:00 2001
From: GHOSCHT <31184695+GHOSCHT@users.noreply.github.com>
Date: Sat, 10 Jul 2021 12:00:50 +0200
Subject: [PATCH] First rough implementation of knob
---
Dashboard/package.json | 2 +
Dashboard/src/App.tsx | 46 ++++++------
Dashboard/src/Components/Knob.tsx | 99 ++++++++++++++++++++++++++
Dashboard/styled.d.ts | 14 ++++
Dashboard/yarn.lock | 113 ++++++++++++++++++++++++++++--
5 files changed, 246 insertions(+), 28 deletions(-)
create mode 100644 Dashboard/src/Components/Knob.tsx
create mode 100644 Dashboard/styled.d.ts
diff --git a/Dashboard/package.json b/Dashboard/package.json
index 9d6be73..a2a14b5 100644
--- a/Dashboard/package.json
+++ b/Dashboard/package.json
@@ -54,6 +54,7 @@
"@types/node": "^15.12.5",
"@types/react": "^17.0.11",
"@types/react-dom": "^17.0.8",
+ "@types/styled-components": "^5.1.11",
"electron-acrylic-window": "^0.5.5",
"electron-devtools-installer": "^3.2.0",
"electron-is-dev": "^2.0.0",
@@ -63,6 +64,7 @@
"react-dom": "^16.13.1",
"screenz": "^1.0.0",
"serialport": "^9.2.0",
+ "styled-components": "^5.3.0",
"typescript": "^4.3.4"
},
"devDependencies": {
diff --git a/Dashboard/src/App.tsx b/Dashboard/src/App.tsx
index 574971c..63164b6 100644
--- a/Dashboard/src/App.tsx
+++ b/Dashboard/src/App.tsx
@@ -1,7 +1,7 @@
import React from "react";
-import SerialPort from "serialport";
+// import SerialPort from "serialport";
import { remote } from "electron";
-import Knob from "../assets/Knob.svg";
+import Knob from "./Components/Knob";
const App = () => {
// https://www.electronjs.org/docs/api/system-preferences#systempreferencesgetcolorcolor-windows-macos
@@ -9,25 +9,24 @@ const App = () => {
// https://www.electronjs.org/docs/api/system-preferences#systempreferencesgetaccentcolor-windows-macos
console.log(remote.systemPreferences.getAccentColor()); // accent color
- const port = new SerialPort("COM5", {
- baudRate: 9600,
- autoOpen: false,
- });
- const handler = () => {
- // eslint-disable-next-line
- port.write('off', (err) => {
- if (err) {
- return console.log("Error on write: ", err.message);
- }
- console.log("message written");
- });
- };
+ // const port = new SerialPort("COM5", {
+ // baudRate: 9600,
+ // autoOpen: false,
+ // });
+ // const handler = () => {
+ // // eslint-disable-next-line
+ // port.write("off", (err) => {
+ // if (err) {
+ // return console.log("Error on write: ", err.message);
+ // }
+ // console.log("message written");
+ // });
+ // };
return (
-
-
-
+ {/*
-
+
-
+ */}
+
{
+ if (overlayRef.current !== null) {
+ overlayRef.current.style.transformOrigin = "50% 50%";
+ overlayRef.current.style.transform = `rotate(${i}deg)`;
+ i += 20;
+ }
+ }}
+ onContextMenu={() => {
+ alert("off"); // absolute on/off
+ }}
+ >
+
+
+
+
+
+ 255
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+