首页 发现 帮助
登录
emil
/
LED-web
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

Start custom color

jediemil 3 年之前
父节点
e7cceae77b
当前提交
da1ca6da34
共有 7 个文件被更改，包括 87 次插入 和 6 次删除
合并视图 显示文件统计
  1. 8 1
      LED.html
  2. 29 0
      css/LEDs.css
  3. 27 0
      gallery.html
  4. 1 1
      index.html
  5. 19 3
      js/LED.js
  6. 2 1
      res/settings.json
  7. 1 0
      sidebar.html

+ 8 - 1
LED.html
查看文件 

@@ -26,7 +26,7 @@
 
 
 
         <div class="topBar">
 
         <div class="topBar">
 
             <button onclick="topBarClick('animationsContainer')">Animations</button>
 
             <button onclick="topBarClick('animationsContainer')">Animations</button>
 
-            <button>Custom</button>
 
+            <button onclick="topBarClick('customContainer')">Custom</button>
 
             <button onclick="topBarClick('settingsContainer')">Settings</button>
 
             <button onclick="topBarClick('settingsContainer')">Settings</button>
 
         </div>
 
         </div>
 
 
 
@@ -43,6 +43,13 @@
 
             </div>
 
             </div>
 
         </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="hide" id="settingsContainer">
 
             <div class="settingsContainer">
 
             <div class="settingsContainer">
 
                 <h2>Settings</h2>
 
                 <h2>Settings</h2>

+ 29 - 0
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 {
 
 .settingsContainer {
 
     margin: 10px;
 
     margin: 10px;

+ 27 - 0
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>

+ 1 - 1
index.html
查看文件 

@@ -2,7 +2,7 @@
 
 <html lang="se">
 
 <html lang="se">
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <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/nav.css">
 
     <link rel="stylesheet" type="text/css" href="css/index.css">
 
     <link rel="stylesheet" type="text/css" href="css/index.css">

+ 19 - 3
js/LED.js
查看文件 

@@ -2,6 +2,7 @@ let lastPushId = ""
 
 let arduionoURL
 
 let arduionoURL
 
 let openSlide = "animationsContainer"
 
 let openSlide = "animationsContainer"
 
 let data
 
 let data
 
+let numberOfLEDS
 
 
 
 let var_1 = 0
 
 let var_1 = 0
 
 let speed = 100
 
 let speed = 100
 
@@ -13,9 +14,12 @@ fetch("./res/settings.json")
 
         //data = JSON.parse(json)
 
         //data = JSON.parse(json)
 
         data = json
 
         data = json
 
         arduionoURL = data.settings.ip
 
         arduionoURL = data.settings.ip
 
+        numberOfLEDS = data.settings.num_lights
 
         console.log(data)
 
         console.log(data)
 
     })
 
     })
 
 
 
+updateCanvas()
 
+
 
 function buttonPushAnimation(id) {
 
 function buttonPushAnimation(id) {
 
     if (id !== lastPushId) {
 
     if (id !== lastPushId) {
 
         document.getElementById(id).style.backgroundColor = "#2c2c36"
 
         document.getElementById(id).style.backgroundColor = "#2c2c36"
 
@@ -38,6 +42,7 @@ function topBarClick(id) {
 
         document.getElementById(id).classList.toggle("hide")
 
         document.getElementById(id).classList.toggle("hide")
 
         document.getElementById(openSlide).classList.toggle("hide")
 
         document.getElementById(openSlide).classList.toggle("hide")
 
         openSlide = id
 
         openSlide = id
 
+        updateCanvas()
 
     }
 
     }
 
 }
 
 }
 
 
 
@@ -62,15 +67,26 @@ function setVar_1(value) {
 
     }
 
     }
 
 }
 
 }
 
 
 
-
 
 function setSettings() {
 
 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)
 
     setSpeed(nSpeed)
 
     setVar_1(nVar_1)
 
     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) {
 
 function httpGet(theUrl, callback) {
 
     fetch(theUrl, {
 
     fetch(theUrl, {
 
         method: "POST"
 
         method: "POST"

+ 2 - 1
res/settings.json
查看文件 

@@ -30,6 +30,7 @@
 
     }
 
     }
 
   },
 
   },
 
   "settings": {
 
   "settings": {
 
-    "ip": "http://192.168.1.160"
 
+    "ip": "http://192.168.1.160",
 
+    "num_lights": "50"
 
   }
 
   }
 
 }
 
 }

+ 1 - 0
sidebar.html
查看文件 

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