blob: 606d527ab0530525d77ce05ab3b0e8316076bae8 (
plain) (
blame)
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<!DOCTYPE html>
<html class="general">
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
<link rel="stylesheet" href="./css/luxcena.css" type="text/css" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<header>
<nav>
<div class="nav-wrapper">
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<a href="#" class="brand-logo">Luxcena Neo</a>
</div>
</nav>
<ul id="slide-out" class="sidenav sidenav-fixed">
<li>
<div class="user-view">
<div class="background">
<img src="./logo/150h/Icon.png">
</div>
<!--<a href="#!user"><img class="circle" src="https://picsum.photos/200/300/?random"></a>
<a href="#!name"><span class="white-text name">John Doe</span></a>
<a href="#!email"><span class="white-text email">Guest</span></a>-->
</div>
</li>
<li><div class="divider"></div></li>
<li><a class="waves-effect" href="/"><i class="material-icons">dashboard</i> Dashboard</a></li>
<li><a class="waves-effect" href="/profiles"><i class="material-icons">cloud</i> Profiles</a></li>
<li><a class="waves-effect" href="/neo_ide"><i class="material-icons">code</i> Neo IDE</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Settings</a></li>
<li><a class="waves-effect" href="strip_setup"><i class="material-icons">straighten</i> Strip setup</a></li>
<li><a class="waves-effect" href="/settings"><i class="material-icons">settings</i> Settings</a></li>
</ul>
</header>
<main>
<div class="row">
<div class="col s12 m5">
<div class="card">
<div class="card-content">
<div class="input-field">
<select>
<option value="" disabled selected>How are the LEDs configured?</option>
<option value="1">Basic, straight?</option>
<option value="2">Adventorous, snake?</option>
<option value="3">Crazy, just something random?</option>
</select>
<label>Led configuration</label>
</div>
<div class="input-field">
<input type="number" name="" value="">
<label>Number of LEDs</label>
</div>
<div class="input-field">
<input type="number" name="" value="">
<label>Number of Segments</label>
</div>
</div>
</div>
</div>
<div class="col s12 m7">
<div class="card">
<div class="card-content">
Segment config...
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m12">
<div class="card">
<div class="card-content">
<p>Explanation of them different configuration modes. "⮽" is the symbol used for LEDs, everything else is just wire.</p>
<h5>Straight:</h5>
Everything is in a stright line, or the cable is looped around.
<pre style="line-height:0.9em;">
└⮽─⮽─⮽─⮽─⮽─⮽─⮽─⮽┐
└⮽─⮽─⮽─⮽┐
┌────────┘
└⮽─⮽─⮽─⮽┐
</pre>
<h5>Snake:</h5>
The diodes are in a "snake"-pattern.
<pre style="line-height:0.9em;">
└⮽─⮽─⮽─⮽┐
┌⮽─⮽─⮽─⮽┘
└⮽─⮽─⮽─⮽┐
</pre>
<h5>Crazy:</h5>
<br />This will just assume you have no idea what you are doing, and make a random configuration for you. based purely on the number of LEDs you have.
<pre style="line-height:0.9em;">
└⮽─⮽x⮽─⮽
└─┐
┌⮽─⮽x⮽─⮽┐
└⮽─⮽─⮽─⮽┘
</pre>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/js/materialize.min.js"></script>
<script type="text/javascript">
var elem = document.querySelector('.sidenav');
var instance = M.Sidenav.init(elem);
var instance = M.FormSelect.init(document.querySelector('select'));
</script>
</body>
</html>
|
