ale/tplink-bulb-web
0
Fork 0
Código Incidencias Pull Requests Acciones Paquetes Proyectos Lanzamientos Wiki Actividad

initial commit

Explorar el Código
Este commit está contenido en:
manalejandro
2018-07-01 13:57:22 +02:00
commit 011ab550cf
Se han modificado 9 ficheros con 230 adiciones y 0 borrados
Descargar archivo de parche Descargar archivo de diferencias Expandir todos los archivos Contraer todos los archivos

0
public/assets/css/.gitignore vendido Archivo normal
Ver fichero

BIN
public/assets/images/lb130-off.jpg Archivo normal
Ver fichero

Archivo binario no mostrado.
Lado a lado

Después

Anchura:  |  Altura:  |  Tamaño: 3.8 KiB

BIN
public/assets/images/lb130.jpg Archivo normal
Ver fichero

Archivo binario no mostrado.
Lado a lado

Después

Anchura:  |  Altura:  |  Tamaño: 5.2 KiB

41
public/assets/js/main.js Archivo normal
Ver fichero

@@ -0,0 +1,41 @@
$(document).ready(function () {
function setData(data) {
if (data.on_off)
$('.bulb').attr('src', 'assets/images/lb130.jpg')
else
$('.bulb').attr('src', 'assets/images/lb130-off.jpg')
$('.brightness').text(data.brightness || 0)
$('.hue').text(data.hue || 0)
$('.saturation').text(data.saturation || 0)
$('.colortemp').text(data.color_temp || 0)
$('#brightness').val(data.brightness || 0)
$('#hue').val(data.hue || 0)
$('#saturation').val(data.saturation || 0)
$('#colortemp').val(data.color_temp || 0)
}
function setCHSB() {
$.getJSON('/api/color/chsb/' + $('#colortemp').val() + '/' + $('#hue').val() + '/' + $('#saturation').val() + '/' + $('#brightness').val(), setData)
}
function setColor() {
$.getJSON('/api/color/hex/' + $('#color').val().replace('#', ''))
}
$('.on').on('click', function () {
if (parseInt($('.brightness').text()) > 0)
url = '/api/on/' + $('.brightness').text()
else
url = '/api/on'
$.getJSON(url, setData)
})
$('.off').on('click', function () {
$.getJSON('/api/off', setData)
})
$('form#chsb').on('submit', function (event) {
event.preventDefault()
setCHSB()
})
$('form#colorform').on('submit', function (event) {
event.preventDefault()
setColor()
})
$.getJSON('/api/info', setData)
})

79
public/index.html Archivo normal
Ver fichero

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<title>TP-Link Bulb Web</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/main.js"></script>
</head>
<body class="text-center col-md-12">
<h2>TP-Link Bulb Web</h2>
<div class="col-md-8 col-md-offset-2 container">
<p>
<img class="bulb img-responsive center-block">
</p>
<p class="lead">
<button class="on btn btn-success">ON</button>
<button class="off btn btn-warning">OFF</button>
</p>
<p>
<span class="text-primary">Brightness:
<span class="brightness"></span>
</span>
<br>
<span class="text-success">Hue:
<span class="hue"></span>
</span>
<br>
<span class="text-warning">Saturation:
<span class="saturation"></span>
</span>
<br>
<span class="text-info">Color Temp:
<span class="colortemp"></span>
</span>
</p>
<form class="form-horizontal" id="chsb">
<div class="form-group">
<label class="control-label col-md-2 col-md-offset-4" for="brightness">Brightness (0-100)</label>
<div class="col-md-1">
<input class="form-control" id="brightness" type="number" min="0" max="100">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2 col-md-offset-4" for="hue">Hue (0-360)</label>
<div class="col-md-1">
<input class="form-control" id="hue" type="number" min="0" max="360">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2 col-md-offset-4" for="saturation">Saturation (0-100)</label>
<div class="col-md-1">
<input class="form-control" id="saturation" type="number" min="0" max="100">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2 col-md-offset-4" for="colortemp">Color Temp (0-7000)</label>
<div class="col-md-1">
<input class="form-control" id="colortemp" type="number" min="0" max="7000">
</div>
</div>
<button class="setCHSB btn btn-primary">Set</button>
</form>
<p>&nbsp;</p>
<form class="form-horizontal" id="colorform">
<div class="form-group">
<label class="control-label col-md-2 col-md-offset-4" for="brightness">Color Hex</label>
<div class="col-md-1">
<input class="form-control" id="color" type="color" value="#FFFFFF">
</div>
</div>
<button class="setColor btn btn-success">Set Color</button>
</form>
</div>
</body>
</html>