Home Verkennen Help
Inloggen
emil
/
LED-web
1
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

Bug fixes and start site

Emil 4 jaren geleden
bovenliggende
fc14d0ab84
commit
fb12301e5a
10 gewijzigde bestanden met toevoegingen van 191 en 139 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 1 0
      .gitignore
  2. 76 0
      LED.html
  3. 0 41
      css/LEDs.css
  4. 7 0
      css/index.css
  5. 82 0
      css/nav.css
  6. 0 36
      css/sidebar.css
  7. 14 56
      index.html
  8. 8 6
      js/LED.js
  9. BIN
      res/img/emil.JPG
  10. 3 0
      sidebar.html

+ 1 - 0
.gitignore
Bestand weergeven 

@@ -0,0 +1 @@
 
+/.idea/

+ 76 - 0
LED.html
Bestand weergeven 

@@ -0,0 +1,76 @@
 
+<!DOCTYPE html>
 
+<html lang="se">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>RGB Hub</title>
 
+    <link rel="stylesheet" type="text/css" href="css/LEDs.css">
 
+    <link rel="stylesheet" type="text/css" href="css/nav.css">
 
+
 
+    <script src="js/LED.js"></script>
 
+
 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
 
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
+    <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
 
+    <link href="https://fonts.googleapis.com/css2?family=Raleway&family=Roboto&display=swap" rel="stylesheet">
 
+
 
+    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <div class="corner"><a href="index.html">Emil Hub</a></div>
 
+
 
+        <!--Navigation bar-->
 
+        <div class="sideBar" id="nav"></div>
 
+        <script>$(function(){$("#nav").load("sidebar.html");});</script>
 
+        <!--end of Navigation bar-->
 
+
 
+        <div class="topBar">
 
+            <button onclick="topBarClick('animationsContainer')">Animations</button>
 
+            <button>Custom</button>
 
+            <button onclick="topBarClick('settingsContainer')">Settings</button>
 
+        </div>
 
+
 
+        <div id="animationsContainer">
 
+            <div class="animationsContainer">
 
+                <h2>Animations</h2>
 
+
 
+                <button id="B" onclick="buttonPushAnimation('B')">Rainbow</button>
 
+                <button id="C" onclick="buttonPushAnimation('C')">Fill</button>
 
+                <button id="D" onclick="buttonPushAnimation('D')">Chasing</button>
 
+                <button id="E" onclick="buttonPushAnimation('E')">Random colors</button>
 
+                <button id="F" onclick="buttonPushAnimation('F')">Split RGB</button>
 
+                <button id="G" onclick="buttonPushAnimation('G')">Stardust</button>
 
+            </div>
 
+        </div>
 
+
 
+        <div class="hide" id="settingsContainer">
 
+            <div class="settingsContainer">
 
+                <h2>Settings</h2>
 
+                <button onclick="setSpeed(1)">Speed 1</button>
 
+                <button onclick="setSpeed(10)">Speed 10</button>
 
+                <button onclick="setSpeed(100)">Speed 100</button>
 
+                <button onclick="setSpeed(500)">Speed 500</button>
 
+                <button onclick="setSpeed(1000)">Speed 1000</button>
 
+
 
+                <button onclick="setVar_1(0)">Setting 1: 0</button>
 
+                <button onclick="setVar_1(1)">Setting 1: 1</button>
 
+                <button onclick="setVar_1(2)">Setting 1: 2</button>
 
+                <button onclick="setVar_1(5)">Setting 1: 5</button>
 
+                <button onclick="setVar_1(10)">Setting 1: 10</button>
 
+
 
+                <div class="settingUnit">
 
+                    <p>Speed (ms/tick)</p>
 
+                    <input type="number" id="speed">
 
+                </div>
 
+                <div class="settingUnit">
 
+                    <p>Setting 1</p>
 
+                    <input type="number" id="var_1">
 
+                </div>
 
+
 
+                <button id="set" onclick="setSettings()">Set</button>
 
+            </div>
 
+        </div>
 
+
 
+    </div>
 
+</body>
 
+</html>

+ 0 - 41
css/LEDs.css
Bestand weergeven 

@@ -1,44 +1,3 @@
 
-body, html {
 
-    margin: 0;
 
-    overflow: hidden;
 
-}
 
-
 
-body {
 
-    background-color: #2c2c36;
 
-}
 
-
 
-.topBar {
 
-    grid-column: 2/-1;
 
-    grid-row: 1/2;
 
-    background-color: #252531;
 
-}
 
-
 
-.topBar button {
 
-    border: none;
 
-    background: none;
 
-    color: white;
 
-    font-size: 20px;
 
-    height: 100%;
 
-    padding: 0 10px;
 
-    font-family: Helvetica, 'Raleway', sans-serif;
 
-}
 
-
 
-.topBar button:hover {
 
-    background-color: #2f2f3d;
 
-}
 
-
 
-.hide {
 
-    display: none;
 
-}
 
-
 
-.container {
 
-    display: grid;
 
-    grid-template-columns: 150px 1fr;
 
-    grid-template-rows: 5vh 1fr;
 
-}
 
-
 
-
 
-
 
 .animationsContainer {
 
     display: grid;
 
     grid-row: 2/-1;

+ 7 - 0
css/index.css
Bestand weergeven 

@@ -0,0 +1,7 @@
 
+img {
 
+    grid-row: 2/3;
 
+    grid-column: 2/3;
 
+
 
+    height: 95vh;
 
+    margin: 0 auto;
 
+}

+ 82 - 0
css/nav.css
Bestand weergeven 

@@ -0,0 +1,82 @@
 
+body, html {
 
+    margin: 0;
 
+    overflow: hidden;
 
+}
 
+
 
+body {
 
+    background-color: #2c2c36;
 
+}
 
+
 
+.container {
 
+    display: grid;
 
+    grid-template-columns: 150px 1fr;
 
+    grid-template-rows: 5vh 1fr;
 
+}
 
+
 
+
 
+.topBar {
 
+    grid-column: 2/-1;
 
+    grid-row: 1/2;
 
+    background-color: #252531;
 
+}
 
+
 
+.topBar button {
 
+    border: none;
 
+    background: none;
 
+    color: white;
 
+    font-size: 20px;
 
+    height: 100%;
 
+    padding: 0 10px;
 
+    font-family: Helvetica, 'Raleway', sans-serif;
 
+}
 
+
 
+.topBar button:hover {
 
+    background-color: #2f2f3d;
 
+}
 
+
 
+.hide {
 
+    display: none;
 
+}
 
+
 
+
 
+.corner {
 
+    grid-row: 1/2;
 
+    grid-column: 1/2;
 
+
 
+    background-color: #13131e;
 
+    font-size: 3vh;
 
+    font-family: 'Raleway', sans-serif;
 
+
 
+    display: flex;
 
+}
 
+
 
+.corner a {
 
+    height: min-content;
 
+    margin: auto;
 
+    color: #a2ff99;
 
+    text-align: center;
 
+    text-decoration: none;
 
+}
 
+
 
+
 
+.sideBar {
 
+    grid-row: 2/-1;
 
+    grid-column: 1/2;
 
+
 
+    height: 100vh;
 
+    background-color: #1b1b26;
 
+}
 
+
 
+.sideBar a {
 
+    font-family: Helvetica, 'Raleway', sans-serif;
 
+    color: white;
 
+    text-decoration: none;
 
+    display: block;
 
+    height: min-content;
 
+    padding: 15px;
 
+    font-size: 20px;
 
+}
 
+
 
+.sideBar a:hover {
 
+    background-color: #252531;
 
+}

+ 0 - 36
css/sidebar.css
Bestand weergeven 

@@ -1,36 +0,0 @@
 
-.corner {
 
-    grid-row: 1/2;
 
-    grid-column: 1/2;
 
-
 
-    background-color: #13131e;
 
-    color: #a2ff99;
 
-    font-size: 30px;
 
-    font-family: 'Raleway', sans-serif;
 
-}
 
-
 
-.corner p {
 
-    margin: calc((5vh - 35px)/2) 0;
 
-    text-align: center;
 
-}
 
-
 
-.sideBar {
 
-    grid-row: 2/-1;
 
-    grid-column: 1/2;
 
-
 
-    height: 100vh;
 
-    background-color: #1b1b26;
 
-}
 
-
 
-.sideBar a {
 
-    font-family: Helvetica, 'Raleway', sans-serif;
 
-    color: white;
 
-    text-decoration: none;
 
-    display: block;
 
-    height: min-content;
 
-    padding: 15px;
 
-    font-size: 20px;
 
-}
 
-
 
-.sideBar a:hover {
 
-    background-color: #252531;
 
-}

+ 14 - 56
index.html
Bestand weergeven 

@@ -3,71 +3,29 @@
 
 <head>
 
     <meta charset="UTF-8">
 
     <title>RGB Hub</title>
 
-    <link rel="stylesheet" type="text/css" href="css/LEDs.css">
 
-    <link rel="stylesheet" type="text/css" href="css/sidebar.css">
 
-
 
-    <script src="js/LED.js"></script>
 
+    <link rel="stylesheet" type="text/css" href="css/nav.css">
 
+    <link rel="stylesheet" type="text/css" href="css/index.css">
 
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
 
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
     <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
 
-    <link href="https://fonts.googleapis.com/css2?family=Raleway&family=Roboto&display=swap" rel="stylesheet">
 
+
 
+    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 
 </head>
 
 <body>
 
-    <div class="container">
 
-        <div class="corner"><p>Cool Site</p></div>
 
-        <div class="sideBar">
 
-            <a href="index.html">LED</a>
 
-            <a>Git</a>
 
-        </div>
 
-
 
-        <div class="topBar">
 
-            <button onclick="topBarClick('animationsContainer')">Animations</button>
 
-            <button>Custom</button>
 
-            <button onclick="topBarClick('settingsContainer')">Settings</button>
 
-        </div>
 
-
 
-        <div id="animationsContainer">
 
-            <div class="animationsContainer">
 
-                <h2>Animations</h2>
 
+<div class="container">
 
+    <div class="corner"><a href="index.html">Emil Hub</a></div>
 
 
-                <button id="B" onclick="buttonPushAnimation('B')">Rainbow</button>
 
-                <button id="C" onclick="buttonPushAnimation('C')">Fill</button>
 
-                <button id="D" onclick="buttonPushAnimation('D')">Chasing</button>
 
-                <button id="E" onclick="buttonPushAnimation('E')">Random colors</button>
 
-                <button id="F" onclick="buttonPushAnimation('F')">Split RGB</button>
 
-                <button id="G" onclick="buttonPushAnimation('G')">Stardust</button>
 
-            </div>
 
-        </div>
 
+    <!--Navigation bar-->
 
+    <div class="sideBar" id="nav"></div>
 
+    <script>$(function(){$("#nav").load("sidebar.html");});</script>
 
+    <!--end of Navigation bar-->
 
 
-        <div class="hide" id="settingsContainer">
 
-            <div class="settingsContainer">
 
-                <h2>Settings</h2>
 
-                <button onclick="setSpeed(1)">Speed 1</button>
 
-                <button onclick="setSpeed(10)">Speed 10</button>
 
-                <button onclick="setSpeed(100)">Speed 100</button>
 
-                <button onclick="setSpeed(500)">Speed 500</button>
 
-                <button onclick="setSpeed(1000)">Speed 1000</button>
 
-
 
-                <button onclick="setVar_1(0)">Setting 1: 0</button>
 
-                <button onclick="setVar_1(1)">Setting 1: 1</button>
 
-                <button onclick="setVar_1(2)">Setting 1: 2</button>
 
-                <button onclick="setVar_1(5)">Setting 1: 5</button>
 
-                <button onclick="setVar_1(10)">Setting 1: 10</button>
 
-
 
-                <div class="settingUnit">
 
-                    <p>Speed (ms/tick)</p>
 
-                    <input type="number" id="speed">
 
-                </div>
 
-                <div class="settingUnit">
 
-                    <p>Setting 1</p>
 
-                    <input type="number" id="var_1">
 
-                </div>
 
-
 
-                <button id="set" onclick="setSettings()">Set</button>
 
-            </div>
 
-        </div>
 
+    <div class="topBar">
 
 
     </div>
 
+
 
+    <img src="res/img/emil.JPG" alt="EMil">
 
+</div>
 
 </body>
 
 </html>

+ 8 - 6
js/LED.js
Bestand weergeven 

@@ -1,4 +1,4 @@
 
-let lastPushId = "C"
 
+let lastPushId = ""
 
 let arduionoURL
 
 let openSlide = "animationsContainer"
 
 let data
 
@@ -6,7 +6,7 @@ let data
 
 let var_1 = 0
 
 let speed = 100
 
 
-readTextFile("./../res/settings.json", function(text){
 
+readTextFile("./res/settings.json", function(text){
 
     data = JSON.parse(text);
 
     arduionoURL = data.settings.ip
 
     console.log(data)
 
@@ -15,7 +15,9 @@ readTextFile("./../res/settings.json", function(text){
 
 function buttonPushAnimation(id) {
 
     if (id !== lastPushId) {
 
         document.getElementById(id).style.backgroundColor = "#2c2c36"
 
-        document.getElementById(lastPushId).style.backgroundColor = "#252531"
 
+        if (lastPushId !== "") {
 
+            document.getElementById(lastPushId).style.backgroundColor = "#252531"
 
+        }
 
         lastPushId = id
 
 
         speed = data.animations[id].speed
 
@@ -37,7 +39,7 @@ function topBarClick(id) {
 
 
 
 function setSpeed(value) {
 
-    if (value != speed) {
 
+    if (value !== speed) {
 
         speed = value
 
         document.getElementById("speed").value = value
 
         try {
 
@@ -49,7 +51,7 @@ function setSpeed(value) {
 
 
 
 function setVar_1(value) {
 
-    if (value != var_1) {
 
+    if (value !== var_1) {
 
         var_1 = value
 
         document.getElementById("var_1").value = value
 
         try {
 
@@ -88,7 +90,7 @@ function readTextFile(file, callback) {
 
     rawFile.overrideMimeType("application/json");
 
     rawFile.open("GET", file, true);
 
     rawFile.onreadystatechange = function() {
 
-        if (rawFile.readyState === 4 && rawFile.status == "200") {
 
+        if (rawFile.readyState === 4 && rawFile.status === "200") {
 
             callback(rawFile.responseText);
 
         }
 
     }

BIN
res/img/emil.JPG
Bestand weergeven


+ 3 - 0
sidebar.html
Bestand weergeven 

@@ -0,0 +1,3 @@
 
+<a href="LED.html">LED</a>
 
+<a href="https://git.andromeda.nu/emil" target="_blank">Git</a>
 
+<a href="https://github.com/" target="_blank">GitHub</a>