ale/tplink-bulb-web
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
manalejandro 2018-07-03 19:09:18 +02:00
parent 011ab550cf
commit 9b08f458aa
5 changed files with 60 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
index.js
View File

@ -9,6 +9,7 @@ const TPLSmartDevice = require('tplink-lightbulb'),
accessLogStream = rfs('access.log', { interval: '1d', path: __dirname + '/logs' }), accessLogStream = rfs('access.log', { interval: '1d', path: __dirname + '/logs' }),
router = express.Router(), router = express.Router(),
ip = process.argv[3] || '10.0.0.130', ip = process.argv[3] || '10.0.0.130',
transition = 0,
bulb = new TPLSmartDevice(ip) bulb = new TPLSmartDevice(ip)
app.use(morgan('combined', { stream: accessLogStream })) app.use(morgan('combined', { stream: accessLogStream }))
@ -17,43 +18,43 @@ app.use(morgan('combined', { stream: accessLogStream }))
.listen(process.argv[2] || 3000) .listen(process.argv[2] || 3000)
router.use('/on/:brightness', (req, res, next) => { router.use('/on/:brightness', (req, res, next) => {
bulb.power(true, 0, { brightness: parseInt(req.params.brightness) }) bulb.power(true, transition, { brightness: parseInt(req.params.brightness) })
.then(r => res.json(r)) .then(r => res.json(r))
.catch(console.error) .catch(next)
}) })
.use('/on', (req, res, next) => { .use('/on', (req, res, next) => {
bulb.power(true, 0, { brightness: 100 }) bulb.power(true, transition, { brightness: 100 })
.then(r => res.json(r)) .then(r => res.json(r))
.catch(console.error) .catch(next)
}) })
.use('/off', (req, res, next) => { .use('/off', (req, res, next) => {
bulb.power(false, 0) bulb.power(false, 0)
.then(r => res.json(r)) .then(r => res.json(r))
.catch(console.error) .catch(next)
}) })
.use('/color/hex/:color', (req, res, next) => { .use('/color/hex/:color', (req, res, next) => {
let color = colorsys.hexToHsl(req.params.color) let color = colorsys.hexToHsl(req.params.color)
bulb.power(true, 0, { bulb.power(true, transition, {
hue: color.h, hue: color.h,
saturation: color.s, saturation: color.s,
brightness: color.l, brightness: color.l,
color_temp: 0 color_temp: 0
}) })
.then(r => res.json(r)) .then(r => res.json(r))
.catch(console.error) .catch(next)
}) })
.use('/color/chsb/:colortemp/:hue/:saturation/:brightness', (req, res, next) => { .use('/color/chsb/:colortemp/:hue/:saturation/:brightness', (req, res, next) => {
bulb.power(true, 0, { bulb.power(true, transition, {
color_temp: parseInt(req.params.colortemp), color_temp: parseInt(req.params.colortemp),
hue: parseInt(req.params.hue), hue: parseInt(req.params.hue),
saturation: parseInt(req.params.saturation), saturation: parseInt(req.params.saturation),
brightness: parseInt(req.params.brightness) brightness: parseInt(req.params.brightness)
}) })
.then(r => res.json(r)) .then(r => res.json(r))
.catch(console.error) .catch(next)
}) })
.use('/info', (req, res, next) => { .use('/info', (req, res, next) => {
bulb.info() bulb.info()
.then(r => res.json(r.light_state)) .then(r => res.json(r.light_state))
.catch(console.error) .catch(next)
}) })

0
public/assets/css/.gitignore vendored
View File

3
public/assets/css/main.css Normal file
View File

@ -0,0 +1,3 @@
body form, body > div > div {
margin: 2rem 0rem;
}

18
public/assets/js/main.js
View File

@ -13,29 +13,21 @@ $(document).ready(function () {
$('#saturation').val(data.saturation || 0) $('#saturation').val(data.saturation || 0)
$('#colortemp').val(data.color_temp || 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 () { $('.on').on('click', function () {
if (parseInt($('.brightness').text()) > 0) $.getJSON(parseInt($('.brightness').text()) > 0 ? '/api/on/' + $('.brightness').text() : '/api/on', setData)
url = '/api/on/' + $('.brightness').text()
else
url = '/api/on'
$.getJSON(url, setData)
}) })
$('.off').on('click', function () { $('.off').on('click', function () {
$.getJSON('/api/off', setData) $.getJSON('/api/off', setData)
}) })
$('form#chsb').on('submit', function (event) { $('form#chsb').on('submit', function (event) {
event.preventDefault() event.preventDefault()
setCHSB() event.stopPropagation()
$.getJSON('/api/color/chsb/' + $('#colortemp').val() + '/' + $('#hue').val() + '/' + $('#saturation').val() + '/' + $('#brightness').val(), setData)
}) })
$('form#colorform').on('submit', function (event) { $('form#colorform').on('submit', function (event) {
event.preventDefault() event.preventDefault()
setColor() event.stopPropagation()
$.getJSON('/api/color/hex/' + $('#color').val().replace('#', ''), setData)
}) })
$.getJSON('/api/info', setData) $.getJSON('/api/info', setData)
}) })

80
public/index.html
View File

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