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

Add knob to project

Browse source
This commit is contained in:
GHOSCHT 2021-07-09 12:34:21 +02:00
parent 07e37d8f26
commit 71d3a816ab
2 changed files with 39 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
Dashboard/assets/Knob.svg Normal file
View file

@ -0,0 +1,36 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.73 141.73">
<defs>
<style>
.cls-1 {
fill: #545353;
}
.cls-2 {
fill: #2f6087;
}
.cls-3 {
font-size: 20px;
fill: #fff;
font-family: SegoeUI-Bold, Segoe UI;
font-weight: 700;
}
</style>
</defs>
<title>Knob2</title>
<g id="Base">
<path class="cls-1" d="M352.12,273A70.87,70.87,0,1,0,423,343.84,70.86,70.86,0,0,0,352.12,273Zm0,120.48a49.61,49.61,0,1,1,49.61-49.61A49.61,49.61,0,0,1,352.12,393.45Z" transform="translate(-281.26 -272.97)"/>
</g>
<g id="Overlay">
<g>
<path class="cls-2" d="M363.54,295.57" transform="translate(-281.26 -272.97)"/>
<path class="cls-2" d="M363.54,295.57a49.44,49.44,0,0,0-11.42-1.34" transform="translate(-281.26 -272.97)"/>
<path class="cls-2" d="M352.12,294.23" transform="translate(-281.26 -272.97)"/>
<path class="cls-2" d="M368.76,275l-.33-.1v0Z" transform="translate(-281.26 -272.97)"/>
<polygon class="cls-2" points="87.18 1.89 87.18 1.89 87.17 1.91 87.17 1.91 87.18 1.89"/>
<polygon class="cls-2" points="82.28 22.58 87.17 1.91 87.17 1.91 82.28 22.58 82.28 22.58"/>
<path class="cls-2" d="M368.76,275l-.33-.08A71.24,71.24,0,0,0,352.12,273a10.71,10.71,0,0,0-10.53,10.73,10.53,10.53,0,0,0,10.53,10.53,49.44,49.44,0,0,1,11.42,1.34v0a10.33,10.33,0,0,0,12.56-7.68A10.79,10.79,0,0,0,368.76,275Z" transform="translate(-281.26 -272.97)"/>
</g>
<text class="cls-3" transform="translate(53.61 77.41)">255</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

4
Dashboard/src/App.tsx
View file

@ -1,5 +1,6 @@
import React from "react";
import SerialPort from "serialport";
import Knob from "../assets/Knob.svg";
const App = () => {
const port = new SerialPort("COM5", {
@ -18,7 +19,8 @@ const App = () => {
return (
<div>
<h3>Hello World</h3>
<img src={Knob} alt="Knob" height="180px" />
<button
type="button"
onClick={() => {