From 71d3a816abeea11ebc92a4e7a91bf24fa1ff8a40 Mon Sep 17 00:00:00 2001
From: GHOSCHT <31184695+GHOSCHT@users.noreply.github.com>
Date: Fri, 9 Jul 2021 12:34:21 +0200
Subject: [PATCH] Add knob to project

---
 Dashboard/assets/Knob.svg | 36 ++++++++++++++++++++++++++++++++++++
 Dashboard/src/App.tsx     |  4 +++-
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 Dashboard/assets/Knob.svg

diff --git a/Dashboard/assets/Knob.svg b/Dashboard/assets/Knob.svg
new file mode 100644
index 0000000..5270f79
--- /dev/null
+++ b/Dashboard/assets/Knob.svg
@@ -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>
diff --git a/Dashboard/src/App.tsx b/Dashboard/src/App.tsx
index b56e8ba..c618ac4 100644
--- a/Dashboard/src/App.tsx
+++ b/Dashboard/src/App.tsx
@@ -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={() => {