há 3 anos atrás · da1ca6da34
--- a/LED.html
+++ b/LED.html
@@ -26,7 +26,7 @@
 
				 
			
 
				         <div class="topBar">
			
 
				             <button onclick="topBarClick('animationsContainer')">Animations</button>
			
 
				-            <button>Custom</button>
			
 
				+            <button onclick="topBarClick('customContainer')">Custom</button>
			
 
				             <button onclick="topBarClick('settingsContainer')">Settings</button>
			
 
				         </div>
			
 
				 
			
@@ -43,6 +43,13 @@
 
				             </div>
			
 
				         </div>
			
 
				 
			
 
				+        <div class="hide" id="customContainer">
			
 
				+            <div class="customContainer">
			
 
				+                <h2>Custom color</h2>
			
 
				+                <canvas id="customCanvas"></canvas>
			
 
				+            </div>
			
 
				+        </div>
			
 
				+
			
 
				         <div class="hide" id="settingsContainer">
			
 
				             <div class="settingsContainer">
			
 
				                 <h2>Settings</h2>
			
--- a/css/LEDs.css
+++ b/css/LEDs.css
@@ -36,6 +36,35 @@
 
				 
			
 
				 
			
 
				 
			
 
				+.customContainer {
			
 
				+    margin: 10px;
			
 
				+    display: grid;
			
 
				+    grid-template-columns: repeat(5, 1fr);
			
 
				+    grid-template-rows: 10vh 10vh 10vh 20vh 20vh 10vh;
			
 
				+    grid-gap: 10px;
			
 
				+}
			
 
				+
			
 
				+.customContainer h2 {
			
 
				+    grid-column: 1/-1;
			
 
				+    grid-row: 1/2;
			
 
				+
			
 
				+    color: white;
			
 
				+    font-size: 50px;
			
 
				+    align-self: center;
			
 
				+    text-align: center;
			
 
				+    font-family: 'Raleway', sans-serif;
			
 
				+}
			
 
				+
			
 
				+.customContainer canvas {
			
 
				+    grid-column: 1/-1;
			
 
				+    grid-row: 2/3;
			
 
				+
			
 
				+    height: 100%;
			
 
				+    width: 100%;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				 
			
 
				 .settingsContainer {
			
 
				     margin: 10px;
			
--- a/gallery.html
+++ b/gallery.html
@@ -0,0 +1,27 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>Emils Galleri</title>
			
 
				+
			
 
				+    <link rel="stylesheet" type="text/css" href="css/nav.css">
			
 
				+
			
 
				+    <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">
			
 
				+
			
 
				+    </div>
			
 
				+
			
 
				+
			
 
				+</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 
				 <html lang="se">
			
 
				 <head>
			
 
				     <meta charset="UTF-8">
			
 
				-    <title>RGB Hub</title>
			
 
				+    <title>Emil Hub</title>
			
 
				     <link rel="stylesheet" type="text/css" href="css/nav.css">
			
 
				     <link rel="stylesheet" type="text/css" href="css/index.css">
			
 
				 
			
--- a/js/LED.js
+++ b/js/LED.js
@@ -2,6 +2,7 @@ let lastPushId = ""
 
				 let arduionoURL
			
 
				 let openSlide = "animationsContainer"
			
 
				 let data
			
 
				+let numberOfLEDS
			
 
				 
			
 
				 let var_1 = 0
			
 
				 let speed = 100
			
@@ -13,9 +14,12 @@ fetch("./res/settings.json")
 
				         //data = JSON.parse(json)
			
 
				         data = json
			
 
				         arduionoURL = data.settings.ip
			
 
				+        numberOfLEDS = data.settings.num_lights
			
 
				         console.log(data)
			
 
				     })
			
 
				 
			
 
				+updateCanvas()
			
 
				+
			
 
				 function buttonPushAnimation(id) {
			
 
				     if (id !== lastPushId) {
			
 
				         document.getElementById(id).style.backgroundColor = "#2c2c36"
			
@@ -38,6 +42,7 @@ function topBarClick(id) {
 
				         document.getElementById(id).classList.toggle("hide")
			
 
				         document.getElementById(openSlide).classList.toggle("hide")
			
 
				         openSlide = id
			
 
				+        updateCanvas()
			
 
				     }
			
 
				 }
			
 
				 
			
@@ -62,15 +67,26 @@ function setVar_1(value) {
 
				     }
			
 
				 }
			
 
				 
			
 
				-
			
 
				 function setSettings() {
			
 
				-    var nSpeed = document.getElementById("speed").value
			
 
				-    var nVar_1 = document.getElementById("var_1").value
			
 
				+    const nSpeed = document.getElementById("speed").value;
			
 
				+    const nVar_1 = document.getElementById("var_1").value;
			
 
				     setSpeed(nSpeed)
			
 
				     setVar_1(nVar_1)
			
 
				 }
			
 
				 
			
 
				 
			
 
				+function updateCanvas() {
			
 
				+    const canvas = document.getElementById("customCanvas")
			
 
				+    const context = canvas.getContext("2d")
			
 
				+    const numDivs = Math.floor(canvas.getBoundingClientRect().width / numberOfLEDS)
			
 
				+    for (let i = 0; i < numDivs; i++) {
			
 
				+        console.log(i)
			
 
				+        context.fillStyle = "#FFFFFF"
			
 
				+        context.fillRect(i*numberOfLEDS, 0, (i+1)*numberOfLEDS, canvas.getBoundingClientRect().height)
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+
			
 
				 function httpGet(theUrl, callback) {
			
 
				     fetch(theUrl, {
			
 
				         method: "POST"
			
--- a/res/settings.json
+++ b/res/settings.json
@@ -30,6 +30,7 @@
 
				     }
			
 
				   },
			
 
				   "settings": {
			
 
				-    "ip": "http://192.168.1.160"
			
 
				+    "ip": "http://192.168.1.160",
			
 
				+    "num_lights": "50"
			
 
				   }
			
 
				 }
			
--- a/sidebar.html
+++ b/sidebar.html
@@ -1,3 +1,4 @@
 
				 <a href="LED.html">LED</a>
			
 
				+<a href="gallery.html">Galleri</a>
			
 
				 <a href="https://git.andromeda.nu/emil" target="_blank">Git</a>
			
 
				 <a href="https://github.com/" target="_blank">GitHub</a>