-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·115 lines (86 loc) · 4.67 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-sport lys</title>
<link rel="icon" type="image/x-icon" href="/images/logo-elvebakken.png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.scss">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script>
/** This is a way to make sure that the lightIds array is empty. **/
const lightIds = [];
console.log(lightIds);
/** make variables for IP and user. This makes changing variables easier. **/
/** In the future put this on a server for added security **/
const IP = "10.58.177.121"
const user = "qMqjGkkf5rQBm8CDoKczf2GDVvwBX93U3ya0AKsI"
</script>
<!-- importing library for the color weel. -->
<script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
</head>
<body class="p-3 mb-2 bg-dark text-white" onload="lightIdNone(), setup();">
<!-- Calling the function `turnOnLight(true)` -->
<button class="btn btn-primary" onclick="turnOnLight(true)">On</button>
<button class="btn btn-primary" onclick="turnOnLight(false)">Off</button>
<button class="btn btn-primary" onclick="lightBlink()">Blink</button>
<button class="btn btn-primary" onclick="lightBlinkOnce(1)">BlinkOnce</button>
<button class="btn btn-primary" onclick="lightLoop(colorloop)">Color Loop</button>
<button class="btn btn-primary" onclick="lightPolice()">Police</button>
<button class="btn btn-primary" onclick="lightIdNone()">none</button>
<button class="btn btn-primary" onclick="lightIdAll()">all</button>
<!-- Calling the function `lightID1 - 5` clicking them all will enable all lights-->
<button class="btn btn-primary" onclick="lightId1()">Id 1</button>
<button class="btn btn-primary" onclick="lightId2()">Id 2</button>
<button class="btn btn-primary" onclick="lightId3()">Id 3</button>
<button class="btn btn-primary" onclick="lightId4()">Id 4</button>
<button class="btn btn-primary" onclick="lightId5()">Id 5</button>
<!--click to enable the colorweel-->
<button class="btn btn-primary" onclick="openNav()">farge</button>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
<!--Sliders for brightness and saturation, saturation is also a part of the colorweel-->
<input id="briSlider" onchange="lightBri()"type="range" min="0" max="254" value="254" class="slider">
<input id="satSlider" onchange="lightSat()"type="range" min="0" max="254" value="254" class="slider">
<input type="range" min="153" max="500" value="327" class="slider">
<div id="colorSpec" style="opacity: 0;">
<input id="hueSlider" onchange="lightHue()" type="range" min="0" max="65535" value="30000">
<input id="mySlider2" type="range" step="1" min="100" max="100" value="100" style="display: none;">
<input id="mySlider3" type="range" step="1" min="50" max="50" value="50" style="display: none;">
<div id="colorBox" style="width: 100px; height: 100px;"></div>
</div>
<!--importing the javascript files-->
<script src="/lys javascript/lightHandler.js"></script>
<script src="/lys javascript/lightBlink.js"></script>
<script src="/lys javascript/lightBri.js"></script>
<script src="/lys javascript/lightSat.js"></script>
<script src="/lys javascript/lightLoop.js"></script>
<script src="/lys javascript/lightCt.js"></script>
<script src="/lys javascript/lightPolice.js"></script>
<script src="/lys javascript/lightId.js"></script>
<script src="sidenav.js"></script>
<script src="script.js"></script>
<img id="layout" src="images/Untitled_Artwork.png">
<!--enables clicking the picture to enable and disable their respectable parts-->
<div id="bildeKnappId1" onclick="lightId1(); openNav();"></div>
<div id="bildeKnappId2" onclick="lightId2(); openNav();"></div>
<div id="bildeKnappId3" onclick="lightId3(); openNav();"></div>
<div id="bildeKnappId4" onclick="lightId4(); openNav();"></div>
<!--colorweel-->
<div id="box">
<div class="Wrap">
<div class="ColorPicker" id="wheelPicker">
<div class="range-wrap">
<input id="ctSlider" onchange="lightCt()" type="range" class="range" min="153" max="500">
<output class="bubble"></output>
</div>
</div>
</div>
</div>
</body>
</html>