This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.
Logic Machine Forum › LogicMachine eco-system › Application Store v
App to display object info

Threaded Mode
App to display object info
gjniewenhuijse Offline
Senior Member
Posts: 448
Threads: 93
Joined: Jun 2015
Reputation: 6
#1
09.10.2017, 07:03
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)?
Find
Reply
admin Offline
Administrator
Posts: 7733
Threads: 42
Joined: Jun 2015
Reputation: 446
#2
09.10.2017, 12:02
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>
Find
Reply
gjniewenhuijse Offline
Senior Member
Posts: 448
Threads: 93
Joined: Jun 2015
Reputation: 6
#3
09.10.2017, 14:27
(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....
Find
Reply
gjniewenhuijse Offline
Senior Member
Posts: 448
Threads: 93
Joined: Jun 2015
Reputation: 6
#4
10.10.2017, 06:09
It gives: Uncaught SyntaxError: Unexpected token < at:
render(<?=json.encode(d1)?>);
Find
Reply
admin Offline
Administrator
Posts: 7733
Threads: 42
Joined: Jun 2015
Reputation: 446
#5
10.10.2017, 06:11
Which firmware version are you running?
Try this:
Code:
render(<? write(json.encode(d1)) ?>);
render(<? write(json.encode(d2)) ?>);
Find
Reply
gjniewenhuijse Offline
Senior Member
Posts: 448
Threads: 93
Joined: Jun 2015
Reputation: 6
#6
10.10.2017, 06:13 (This post was last modified: 10.10.2017, 06:15 by gjniewenhuijse.)
(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 <
Find
Reply
admin Offline
Administrator
Posts: 7733
Threads: 42
Joined: Jun 2015
Reputation: 446
#7
10.10.2017, 06:26
Are you putting this into .lp file? It must be .lp, .html will not work.
Find
Reply
gjniewenhuijse Offline
Senior Member
Posts: 448
Threads: 93
Joined: Jun 2015
Reputation: 6
#8
10.10.2017, 06:34
(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
Find
Reply


Forum Jump: