schmidtsi76327
/
ESP8266_Treppenlicht
Watch 2
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 12 Wiki Activity
Browse Source

puu

tags/v1.0.0
Pupsmuckel 2 years ago
parent
37380cbebc
commit
a5ac7d358b
3 changed files with 85 additions and 86 deletions
Unified View Show Diff Stats
  1. 66
    46
      data/index.html
  2. 1
    1
      data/input.js
  3. 18
    39
      data/style.css

+ 66
- 46
data/index.html View File

<div class="kopfzeile" style="text-align: center;"> <div class="kopfzeile" style="text-align: center;">
<b>Treppenlicht</b> <b>Treppenlicht</b>
</div> </div>
<!--
<div class="ueberschrift"> <div class="ueberschrift">
Helligkeit Helligkeit
<!--<label id="label_pwm">
</label>-->
<div class="slider">
<input type="range" class="regler" id="helligkeit" name="rangeInput" min="0" max="100" value="50"
oninput="amount1.value=helligkeit.value">
<br>
<output name="amount1" id="amount1" for="helligkeit">50</output>
</div>
</div>
<div class="ueberschrift">
Helligkeit bei Dunkelheit
<!--<label id="label_pwm_dark">
</label>-->
<div class="slider">
<input type="range" class="regler" id="helligkeit_dunkel" name="rangeInput" min="0" max="100" value="50"
oninput="amount2.value=helligkeit_dunkel.value">
<br>
<output name="amount2" id="amount2" for="helligkeit_dunkel">50</output>
</div>
</div>
label id="label_pwm">
</label>
<div class="slider">
<input type="range" class="regler" id="helligkeit" name="rangeInput" min="0" max="100" value="50"
oninput="amount1.value=helligkeit.value">
<br>
<output name="amount1" id="amount1" for="helligkeit">50</output>
</div>
</div>-->
<form class="ueberschrift">
<div class="BridhgtnessInputGroup">
<label for="brightness"> Helligkeitswert in %:</label>
<input id="brightness" type="number" name="brightness" step="1" min="0" max="100" placeholder="zB. 50" required>
<span class="validity"></span>
<button type="button" onclick="getInputValue()">Speichern</button>
<script>
function getInputValue(){
var helligkeit= document.getElementById("brightness").value;
if (helligkeit > 100 | helligkeit < 0)
alert("Helligkeit darf nicht groesser 100 oder kleiner 0 sein")
else alert(helligkeit);
}
</script>
</div>
</form>


<div class="ueberschrift">
Laufgeschwindigkeit
<!--<label id="label_geschwindigkeit">
</label>-->
<div class="slider">
<input type="range" class="regler" id="geschwindigkeit" name="rangeInput" min="0" max="100" value="50"
oninput="amount3.value=geschwindigkeit.value">

<!--
< div class="ueberschrift" >
Helligkeit bei Dunkelheit
< !--< label id = "label_pwm_dark" >
</label >
<div class="slider">
<input type="range" class="regler" id="helligkeit_dunkel" name="rangeInput" min="0" max="100" value="50"
oninput="amount2.value=helligkeit_dunkel.value">
<br> <br>
<output name="amount3" id="amount3" for="geschwindigkeit">50</output>
</div>
<output name="amount2" id="amount2" for="helligkeit_dunkel">50</output>
</div>
</div> </div>


<div class="ueberschrift">
Licht-An-Zeit
<!-- <label id="label_time">
</label>-->
<div class="slider">
<input type="range" class="regler" id="time" name="rangeInput" min="0" max="100" value="50"
oninput="amount4.value=time.value">
<br>
<output name="amount4" id="amount4" for="time">50</output>
</div>
<div class="ueberschrift">
Laufgeschwindigkeit
<!--<label id="label_geschwindigkeit">
</label>
<div class="slider">
<input type="range" class="regler" id="geschwindigkeit" name="rangeInput" min="0" max="100" value="50"
oninput="amount3.value=geschwindigkeit.value">
<br>
<output name="amount3" id="amount3" for="geschwindigkeit">50</output>
</div>
</div> </div>


<div class="terminal">
<input type="button" id="clear_term" value="clear" onclick="clearTerminal();">
<input type="checkbox" id="scroll" name="scroll" value="scroll" checked>
<label for="scroll"> autoscroll </label>
<textarea id="term">waiting for log messages ...&#10;</textarea>
<div class="ueberschrift">
Licht-An-Zeit
<!-- <label id="label_time">
</label>
<div class="slider">
<input type="range" class="regler" id="time" name="rangeInput" min="0" max="100" value="50"
oninput="amount4.value=time.value">
<br>
<output name="amount4" id="amount4" for="time">50</output>
</div>
</div>-->

<div class="terminal">
<input type="button" id="clear_term" value="clear" onclick="clearTerminal();">
<input type="checkbox" id="scroll" name="scroll" value="scroll" checked>
<label for="scroll"> autoscroll </label>
<textarea id="term">waiting for log messages ...&#10;</textarea>
</div> </div>


</body> </body>


<script src="/input.js"></script>
<script src="/input.js"></script>


</html> </html>

+ 1
- 1
data/input.js View File



function clearTerminal() { function clearTerminal() {
document.getElementById("term").innerHTML = ''; document.getElementById("term").innerHTML = '';
}
}

+ 18
- 39
data/style.css View File

} }


.regler{ .regler{

-webkit-appearance: none; -webkit-appearance: none;
height: 30px; height: 30px;
width: 100%; width: 100%;
background-color: #8d8a8a; background-color: #8d8a8a;
} }



/*-------------------------------------------------------*/


/*Switch:
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

Hide default HTML checkbox
.switch input {
opacity: 0;
width: 0;
height: 0;
}
*/
/* The slider */


/*input:checked + .slider {
background-color: #04AA6D;
}

input:focus + .slider {
box-shadow: 0 0 1px #04AA6D;
}*/
/*
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
*/

.terminal { .terminal {
margin:5%; margin:5%;
padding: 1%; padding: 1%;


#clear_term { #clear_term {
margin: 2px; margin: 2px;
}
}



input[type="number"] {
width: 100px;
}

input:invalid+span:after {
content: '✖';
padding-left: 5px;
}

input:valid+span:after {
content: '✓';
padding-left: 5px;
}


Write Preview
Loading…
Cancel
Save