-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.php
239 lines (219 loc) · 13.1 KB
/
index.php
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="expires" content="0">
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#3f51b5">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#3f51b5">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="blue-translucent">
<title>(beta) LED Steuerung @ Home</title>
<link rel="icon"
type="image/ico"
href="favicon.ico">
<!-- import OFFLINE google material design apis -->
<link rel="stylesheet" href="./mdl-files/material.indigo-blue.min.css">
<script src="./mdl-files/material.min.js"></script>
<link rel="stylesheet" href="./mdl-files/material-icons.css">
<!-- import custom stylesheet -->
<link rel="stylesheet" media="screen" href="newdesign.css">
<!-- add background -->
<style>
.led-layout {
bgcolor:#d6d6d6;
}
</style>
</head>
<body bgcolor="#d6d6d6">
<!-- Simple header with fixed tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header led-layout ">
<header class="mdl-layout__header mdl-layout__header--scroll">
<div class="mdl-layout-icon">favicon.ico</div>
<!-- add the drawer button and align it properly -->
<div class="mdl-layout__drawer-button" tabindex="0" role="button" aria-expanded="false">
<div style="margin-top:12px" >
<img src="./ic_menu_white_24dp_1x.png" alt="" />
</div>
</div>
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">LED Control Panel</span>
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="configurator.php">Konfiguration</a>
<a class="mdl-navigation__link" href="wecker.php">Wecker (beta)</a>
<a class="mdl-navigation__link" href="index-oldhtml.html">alte Fadeseite</a>
</nav>
</div>
</header>
<!-- drawer -->
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">LED Control Panel</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="configurator.php">Konfiguration</a>
<a class="mdl-navigation__link" href="wecker.php">Wecker (beta)</a>
<a class="mdl-navigation__link" href="index-oldhtml.html">alte Fadeseite</a>
</nav>
</div>
<main class="mdl-layout__content" >
<div class="page-content">
<!-- Steady lighting is the former index.html with the sliders -->
<div class="mdl-grid ">
<div class="mdl-cell mdl-cell--middle mdl-cell--stretch mdl-cell--6-col mdl-cell--4-col-phone mdl-cell--8-col-tablet ">
<div class="mdl-card mdl-shadow--4dp steady_lighting-card">
<?php
//read the config file and save results in array
//the configfiles layout is like that:
// colorCode; pin; font-color; background-color; colorName
//e.g. w 17 black whitesmoke weiß
$nColors = 0;
if (($handle = fopen("colors.csv", "r")) !== FALSE) {
while (($colorConfig = fgetcsv($handle, 1000, ";")) !== FALSE) {
$num = count($colorConfig);
for ($c=0; $c < $num; $c++) {
$globalConfig[$nColors][$c]=$colorConfig[$c];
}
$nColors++;
}
fclose($handle);
}
//read the current brightness file
//the brightness.csv and the colors.csv must have the same colors defined!
$ncurrentColors = 0;
if (($handle = fopen("brightness.csv", "r")) !== FALSE) {
while (($brightness = fgetcsv($handle, 1000, ";")) !== FALSE) {
$num = count($brightness);
for ($c=0; $c < $num; $c++) {
$colorBrightness[$ncurrentColors][$c]=$brightness[$c];
}
$ncurrentColors++;
}
fclose($handle);
}
?>
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Farben einstellen</h2>
</div>
<form action="fade.php" method="get">
<input type="hidden" name="url" value="<?php echo $_SERVER['PHP_SELF'] ?>" />
<?php
for ($color=0; $color < $nColors; $color++) {
//printing the card with background-color and font color from csv file.
echo "<div class=\"mdl-card__actions mdl-card--border\" style=\"color:" . $globalConfig[$color][2] . "; background-color:" . $globalConfig[$color][3] . "; \" > \n";
//printing the colorName string
echo $globalConfig[$color][4] . "\n";
echo "<input class=\"mdl-slider mdl-js-slider\" type=\"range\" name=\"" . $globalConfig[$color][0] . "\" min=\"0\" max=\"1000\" step=\"4\" value=\"";
//check for every color because we dont know how theyre ordered
$colorBrightnessKey = 0;
//we'll search for the right currentBrightness with the primary key colorCode
//i dont know why but we have to use strncmp otherwise it can't detect if the variables are the same or not.
//if its not the matching currentBrightness we'll look for the next one (therefore increase colorBrightnessKey)
while(strcmp($globalConfig[$color][0] , $colorBrightness[$colorBrightnessKey][0])!=0) {
$colorBrightnessKey++;
}
//then write current brightness as value
echo $colorBrightness[$colorBrightnessKey][1] . "\">\n";
//and close the div container
echo "</div>\n";
}
//end of table row and data
?>
<div class="mdl-card__actions ">
<div class="mdl-grid ">
<div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--3-col-phone">
<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
LEDs schalten
</button>
</div>
</form>
<div class="mdl-cell mdl-cell--5-col-desktop mdl-cell--3-col-tablet mdl-cell--3-col-phone">
<form action="fade.php" method="get">
<input type="hidden" name="url" value="<?php echo $_SERVER['PHP_SELF'] ?>" />
<?php
//set every color to 0
for ($color=0; $color < $nColors; $color++)
{
echo "<input type=\"hidden\" name=\"" . $globalConfig[$color][0] . "\" value=\"0\"> \n";
} ?>
<!-- and mode also to 0-->
<input type="hidden" name="mode" value="0">
<!-- Accent-colored raised button with ripple -->
<button onclick="showFadingInfo()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
ALLES AUS
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--col mdl-cell--3-col-desktop mdl-cell--4-col-tablet mdl-cell--top">
<!-- mdl-cell--3-col-desktop mdl-cell--2-col-tablet -->
<div class="mdl-card mdl-shadow--4dp steady_lighting-card">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Mode wählen</h2>
</div>
<form action="fade.php" method="get">
<input type="hidden" name="url" value="<?php echo $_SERVER['PHP_SELF'] ?>" />
<div class="mdl-card__actions mdl-card--border">
<b> zusätzliche Modi</b>: <br><br>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
<input type="radio" id="option-1" class="mdl-radio__button" name="mode" value="0" checked>
<span class="mdl-radio__label">Mode 0</span>
</label>
feste Farben, die unter "Farben einstellen" eingestellt werden <br>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
<input type="radio" id="option-2" class="mdl-radio__button" name="mode" value="1">
<span class="mdl-radio__label">Mode 1</span>
</label>
Fade zu zufällig generierten Farben
<br>
<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Mode wählen
</button>
</div>
</form>
</div>
</div>
<div class="mdl-cell mdl-cell--3col mdl-cell--3-col-desktop mdl-cell--4-col-tablet mdl-cell--top ">
<div class="mdl-card mdl-shadow--4dp steady_lighting-card">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Fadezeit einstellen</h2>
</div>
<div class="mdl-card__actions mdl-card--border">
<form action="fade.php" method="get">
<input type="hidden" name="url" value="<?php echo $_SERVER['PHP_SELF'] ?>" />
Dauer zum Anschalten der LEDs bestimmen: <br>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="number" pattern="-?[0-9]*(\.[0-9]+)?" id="timebox" size="10" name="a_time" min="200" max="1000000">
<label class="mdl-textfield__label" for="timebox">Fadezeit</label>
<span class="mdl-textfield__error">Zahl zwischen 200 und 1 Mio. eingeben!</span>
</div>
<br> oder mit dem Slider auswählen (200-5'000)
<input class="mdl-slider mdl-js-slider" type="range" name="time" min="200" max="5000" step="1" value="0">
<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Fadezeit ändern
</button>
</form>
</div>
</div>
<!-- empty cell so the design looks good on every screen (so the center card is centered -->
</div>
</div>
</div>
</main>
</div>
<script>
function showFadingInfo() {
window.alert("leds are fading");
}
</script>
</body>
</html>