+- LogicMachine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Application Store (https://forum.logicmachine.net/forumdisplay.php?fid=11)
+--- Thread: App to display object info (/showthread.php?tid=1033)
App to display object info - gjniewenhuijse - 09.10.2017
Hello my goal is to make a app to display battery info for all my battery powered devices.
Tags used in the object: battery_chk1 (20 devices) and battery_chk2 (10 devices).
How to make a app that displays the object name, object value, last updated time (order by tag, object name)?
RE: App to display object info - admin - 09.10.2017
Code:
<?
require('apps')
d1 = grp.tag('battery_chk1')
d2 = grp.tag('battery_chk2')
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Objects</title>
<link rel="stylesheet" href="/apps/css/bootstrap.css">
<link rel="stylesheet" href="/apps/css/font-awesome.css">
<link rel="stylesheet" href="/apps/css/style.css">
<script src="/apps/js/jquery.js.gz"></script>
<style>
body { padding: 20px; background-color: #fff; }
.navbar { background-color: #eee; }
</style>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid text-center">
<span class="btn btn-default navbar-btn pull-right back"><span class="fa fa-lg fa-times"></span></span>
<span class="btn btn-default navbar-btn pull-left refresh"><span class="fa fa-lg fa-refresh"></span></span>
<span class="navbar-brand">Objects</span>
</div>
</div>
<div class="wrap">
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Date</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<script>
$(function() {
function render(data) {
// sort data by name
data.sort(function(a, b) {
var na = a.name.toLowerCase()
, nb = b.name.toLowerCase();
if (na > nb) {
return 1;
}
else if (na < nb) {
return -1;
}
else {
return 0;
}
});
// show each object name/value/update time
$.each(data, function(index, item) {
var trs = $('<tr><td></td><td></td><td></td></tr>').appendTo('tbody')
, tds = trs.find('td')
, d = new Date(item.updatetime * 1000);
$(tds[ 0 ]).text(item.name);
$(tds[ 1 ]).text(item.value);
$(tds[ 2 ]).text(d.toString().split(' GMT')[0]);
});
}
render(<?=json.encode(d1)?>);
render(<?=json.encode(d2)?>);
$('.refresh').click(function() {
window.location.reload();
});
$('.back').click(function() {
$(this).find('.fa')
.removeClass('fa-times')
.addClass('fa-refresh fa-spin')
window.location = '/apps/';
});
});
</script>
</body>
</html>RE: App to display object info - gjniewenhuijse - 09.10.2017
(09.10.2017, 12:02)admin Wrote:Code:<? require('apps') d1 = grp.tag('battery_chk1') d2 = grp.tag('battery_chk2') ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Objects</title> <link rel="stylesheet" href="/apps/css/bootstrap.css"> <link rel="stylesheet" href="/apps/css/font-awesome.css"> <link rel="stylesheet" href="/apps/css/style.css"> <script src="/apps/js/jquery.js.gz"></script> <style> body { padding: 20px; background-color: #fff; } .navbar { background-color: #eee; } </style> </head> <body> <div class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid text-center"> <span class="btn btn-default navbar-btn pull-right back"><span class="fa fa-lg fa-times"></span></span> <span class="btn btn-default navbar-btn pull-left refresh"><span class="fa fa-lg fa-refresh"></span></span> <span class="navbar-brand">Objects</span> </div> </div> <div class="wrap"> <div class="container"> <table class="table table-hover"> <thead> <tr> <th>Name</th> <th>Value</th> <th>Date</th> </tr> </thead> <tbody></tbody> </table> </div> </div> <script> $(function() { function render(data) { // sort data by name data.sort(function(a, b) { var na = a.name.toLowerCase() , nb = b.name.toLowerCase(); if (na > nb) { return 1; } else if (na < nb) { return -1; } else { return 0; } }); // show each object name/value/update time $.each(data, function(index, item) { var trs = $('<tr><td></td><td></td><td></td></tr>').appendTo('tbody') , tds = trs.find('td') , d = new Date(item.updatetime * 1000); $(tds[ 0 ]).text(item.name); $(tds[ 1 ]).text(item.value); $(tds[ 2 ]).text(d.toString().split(' GMT')[0]); }); } render(<?=json.encode(d1)?>); render(<?=json.encode(d2)?>); $('.refresh').click(function() { window.location.reload(); }); $('.back').click(function() { $(this).find('.fa') .removeClass('fa-times') .addClass('fa-refresh fa-spin') window.location = '/apps/'; }); }); </script> </body> </html>
thnks....
RE: App to display object info - gjniewenhuijse - 10.10.2017
It gives: Uncaught SyntaxError: Unexpected token < at:
render(<?=json.encode(d1)?>);
RE: App to display object info - admin - 10.10.2017
Which firmware version are you running?
Try this:
Code:
render(<? write(json.encode(d1)) ?>);
render(<? write(json.encode(d2)) ?>);RE: App to display object info - gjniewenhuijse - 10.10.2017
(10.10.2017, 06:11)admin Wrote: Which firmware version are you running?
Try this:
Code:render(<? write(json.encode(d1)) ?>); render(<? write(json.encode(d2)) ?>);
Versie: 20170620
same error:
Uncaught SyntaxError: Unexpected token <
RE: App to display object info - admin - 10.10.2017
Are you putting this into .lp file? It must be .lp, .html will not work.
RE: App to display object info - gjniewenhuijse - 10.10.2017
(10.10.2017, 06:26)admin Wrote: Are you putting this into .lp file? It must be .lp, .html will not work.
yes, that works.. Thanks