node-gotapi
Version:
The node-gotapi is a Node.js implementation of the Generic Open Terminal API Framework (GotAPI) developed by the Open Mobile Alliance (OMA).
191 lines (177 loc) • 5.73 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Light Emulator - node-gotapi</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- jsrender -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/0.9.83/jsrender.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- style -->
<link href="style.css" rel="stylesheet">
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<h1><a class="navbar-brand" href="https://github.com/futomi/node-gotapi" target="_blank">Light Emulator - node-gotapi</a></h1>
</div>
</div>
</nav>
<div class="container theme-showcase" role="main" id="main-wrapper">
<div class="row">
<div class="col-md-4">
<section class="panel panel-default">
<div class="panel-heading">
<h2>Light #1</h2>
</div>
<div class="panel-body">
<form id="light-1" class="form-horizontal">
<input type="hidden" name="lightId" value="1">
<input type="hidden" name="name" value="Light #1">
<div class="form-group">
<label for="power-1" class="col-sm-2 control-label">Power</label>
<div class="col-sm-10">
<button type="button" id="power-1" name="power">ON</button>
</div>
</div>
<div class="form-group">
<label for="color-1" class="col-sm-2 control-label">Color</label>
<div class="col-sm-10">
<input type="color" id="color-1" name="color" value="#ffffff">
</div>
</div>
</form>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel panel-default">
<div class="panel-heading">
<h2>Light #2</h2>
</div>
<div class="panel-body">
<form id="light-2" class="form-horizontal">
<input type="hidden" name="lightId" value="2">
<input type="hidden" name="name" value="Light #2">
<div class="form-group">
<label for="power-2" class="col-sm-2 control-label">Power</label>
<div class="col-sm-10">
<button type="button" id="power-2" name="power">ON</button>
</div>
</div>
<div class="form-group">
<label for="color-2" class="col-sm-2 control-label">Color</label>
<div class="col-sm-10">
<input type="color" id="color-2" name="color" value="#ffffff">
</div>
</div>
</form>
</div>
</section>
</div>
<div class="col-md-4">
<section class="panel panel-default">
<div class="panel-heading">
<h2>Light #3</h2>
</div>
<div class="panel-body">
<form id="light-3" class="form-horizontal">
<input type="hidden" name="lightId" value="3">
<input type="hidden" name="name" value="Light #3">
<div class="form-group">
<label for="power-3" class="col-sm-2 control-label">Power</label>
<div class="col-sm-10">
<button type="button" id="power-2" name="power">ON</button>
</div>
</div>
<div class="form-group">
<label for="color-3" class="col-sm-2 control-label">Color</label>
<div class="col-sm-10">
<input type="color" id="color-3" name="color" value="#ffffff">
</div>
</div>
</form>
</div>
</section>
</div>
</div>
<section class="panel panel-primary" id="comm-monitor-box">
<div class="panel-heading">
<h2 class="panel-title">Communication monitor</h2>
</div>
<div class="panel-body">
<dl id="comm-monitor"></dl>
</div>
</section>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Copyright © 2017 Futomi Hatano, Code licensed MIT</p>
</div>
</footer>
<script id="comm-tmpl" type="text/x-jsrender">
<dt>{{:dir}} GotAPI-{{:if}} Interface</dt>
<dd>
{{if url}}<pre>{{:method}} {{:url}}</pre>{{/if}}
{{if body}}<pre>{{:body}}</pre>{{/if}}
</dd>
</script>
<!-- gotapi-client.js -->
<script src="/gotapi-client.js"></script>
<script src="/gotapi-monitor.js"></script>
<script>;
let gotapi = new GotapiClient();
let monitor = (new GotapiMonitor(gotapi)).init();
gotapi.connect().then((services) => {
prepareForms();
}).catch((error) => {
document.querySelector('#res').textContent = error.message;
});
function prepareForms() {
$('button[name="power"]').on('click', (event) => {
let btn_el = $(event.target);
if(btn_el.text() === 'ON') {
btn_el.text('OFF');
} else {
btn_el.text('ON');
}
requestTurnPowerStatus($(event.target.form));
});
$('input[name="color"]').on('change', (event) => {
requestForm($(event.target.form), 'put');
});
}
function requestTurnPowerStatus(form_el) {
let power_btn_el = form_el.find('button[name="power"]')
let power = (power_btn_el.text() === 'ON') ? false : true;
let method = (power === true) ? 'post' : 'delete';
requestForm(form_el, method);
}
function requestForm(form_el, method) {
let lightId = form_el.find('input[name="lightId"]').val();
let color = form_el.find('input[name="color"]').val();
gotapi.request({
method : method,
serviceId : 'com.github.futomi.lightemulator.light',
profile : 'light',
attribute : '',
lightId : lightId,
color : color,
brightness: "1.0",
flashing : "300"
}).catch((error) => {
window.alert(error.message);
});
}
</script>
</body>
</html>