Skip to content

Commit 31cdba0

Browse files
ThingEngineerThingEngineer
committed
user interface enhancements
1 parent c6ad459 commit 31cdba0

File tree

2 files changed

+128
-55
lines changed

2 files changed

+128
-55
lines changed

‎Controller.php

+44-25
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<?php
22

33
class Projects extends CI_Controller {
4-
5-
function index()
4+
5+
function __construct()
66
{
7-
7+
parent::__construct();
88
}
9-
10-
function gate()
9+
10+
function index()
1111
{
1212
$this->load->helper(array('file', 'date'));
13-
13+
1414
$data = json_decode(read_file('../app/logs/gatestate.data'), TRUE);
15-
15+
1616
switch ($data['gatestate'])
1717
{
1818
case 0:
@@ -28,44 +28,63 @@ function gate()
2828
$view_data['gatestate'] = 'Closing...';
2929
break;
3030
}
31-
32-
$last_opened = json_decode(read_file('../app/logs/projects/gateopened.data'), TRUE);
31+
32+
$last_opened = json_decode(read_file('../app/logs/gateopened.data'), TRUE);
3333
$view_data['last_opened'] = timespan($last_opened['last_opened'], time()) . ' ago';
34-
34+
3535
//Load View
3636
$t['data'] = $view_data;
3737
$this->load->view('gate_view', $t);
3838
}
39-
39+
4040
function save_gate_state()
4141
{
4242
$this->load->helper('file');
43-
43+
4444
$data = file_get_contents('php://input');
45-
write_file('../app/logs/projects/gatestate.data', $data);
46-
45+
write_file('../app/logs/gatestate.data', $data);
46+
4747
$data = json_decode($data, TRUE);
4848
if ($data['gatestate'] == 1)
4949
{
5050
$last_opened = array('last_opened' => time());
51-
write_file('../app/logs/projects/gateopened.data', json_encode($last_opened));
51+
write_file('../app/logs/gateopened.data', json_encode($last_opened));
5252
}
5353
}
54-
54+
5555
function get_gate_state()
5656
{
5757
$this->load->helper(array('file', 'date'));
5858
$this->load->library('ajax');
59-
60-
$data = json_decode(read_file('../app/logs/projects/gatestate.data'), TRUE);
61-
62-
$last_opened = json_decode(read_file('../app/logs/projects/gateopened.data'), TRUE);
59+
60+
$data = json_decode(read_file('../app/logs/gatestate.data'), TRUE);
61+
62+
$last_opened = json_decode(read_file('../app/logs/gateopened.data'), TRUE);
6363
$data['last_opened'] = timespan($last_opened['last_opened'], time()) . ' ago';
64-
65-
$this->ajax->output_ajax($data, 'json', FALSE); // send json data, don't enforce ajax request
64+
65+
$data['device_state'] = json_decode(read_file('../app/logs/devicestate.data'), TRUE);
66+
$device_offline_timestamp = json_decode(read_file('../app/logs/device_offline_timestamp.data'), TRUE);
67+
$data['device_offline_timestamp'] = ' for ' . timespan($device_offline_timestamp['timestamp'], time());
68+
69+
$this->ajax->output_ajax($data, 'json', TRUE); // send json data, enforce ajax request
6670
}
67-
71+
72+
function save_device_state()
73+
{
74+
$this->load->helper('file');
75+
76+
$data = file_get_contents('php://input');
77+
write_file('../app/logs/devicestate.data', $data);
78+
79+
$data = json_decode($data, TRUE);
80+
if ($data['devicestate'] == 0)
81+
{
82+
$device_offline_timestamp = array('timestamp' => time());
83+
write_file('../app/logs/device_offline_timestamp.data', json_encode($device_offline_timestamp));
84+
}
85+
}
86+
6887
}
6988

70-
/* End of file projects.php */
71-
/* Location: ./application/controllers/projects.php */
89+
/* End of file Projects.php */
90+
/* Location: ./application/controllers/projects.php */

‎gate_view.php

+84-30
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="author" content="Josh Campbell">
88
<link rel="shortcut icon" href="/bootstrap/assets/ico/favicon.png">
99

10-
<title>IoT Gate Opperator Addon</title>
10+
<title>IoT Gate Operator Addon</title>
1111

1212
<!-- Bootstrap core CSS -->
1313
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
@@ -22,25 +22,59 @@
2222
<script src="/bootstrap/assets/js/respond.min.js"></script>
2323
<![endif]-->
2424

25+
<style>
26+
.button {
27+
position: relative;
28+
border: none;
29+
color: #FFFFFF;
30+
text-align: center;
31+
-webkit-transition-duration: 0.4s; /* Safari */
32+
transition-duration: 0.4s;
33+
text-decoration: none;
34+
overflow: hidden;
35+
cursor: pointer;
36+
}
37+
38+
.button:after {
39+
content: "";
40+
background: #90EE90;
41+
display: block;
42+
position: absolute;
43+
padding-top: 300%;
44+
padding-left: 350%;
45+
margin-left: -40px!important;
46+
margin-top: -120%;
47+
opacity: 0;
48+
transition: all 0.8s
49+
}
50+
51+
.button:active:after {
52+
padding: 0;
53+
margin: 0;
54+
opacity: 1;
55+
transition: 0s
56+
}
57+
</style>
58+
2559
</head>
2660

2761
<body>
2862

2963
<div class="navbar navbar-inverse navbar-fixed-top">
3064
<div class="container">
3165
<div class="navbar-header">
32-
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
66+
<!--<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">-->
3367
<span class="icon-bar"></span>
3468
<span class="icon-bar"></span>
3569
<span class="icon-bar"></span>
3670
</button>
37-
<a class="navbar-brand" href="#">IoT Gate Opperator Addon</a>
71+
<a class="navbar-brand" href="#">IoT Gate Operator Addon</a>
3872
</div>
3973
<div class="collapse navbar-collapse">
4074
<!--
4175
<ul class="nav navbar-nav">
42-
<li class="active"><a href="http://projects.ajillion.com/gate">Home</a></li>
43-
<li class="active"><a href="http://projects.ajillion.com/gate">Admin</a></li>
76+
<li class="active"><a href="http://ajillion.com/projects">Home</a></li>
77+
<li class="active"><a href="http://ajillion.com/projects">Admin</a></li>
4478
</ul>-->
4579

4680
</div>
@@ -49,15 +83,15 @@
4983

5084
<div class="container">
5185

52-
<div class="starter-template">
53-
<button type="button" class="btn btn-lg btn-success btn-block bigger-button" id="open_gate">Open Gate</button><br>
54-
<button type="button" class="btn btn-lg btn-primary btn-block" id="latch30m_gate">Latch Open for 30 min</button><br>
55-
<button type="button" class="btn btn-lg btn-primary btn-block" id="latch8h_gate">Latch Open for 8 hours</button><br>
56-
<button type="button" class="btn btn-lg btn-warning btn-block" id="close_gate">Close Now</button>
57-
<br><br>
86+
<div class="text-center" style="padding-top:5px; padding-left:15px; padding-right:15px; ">
87+
<button type="button" class="button btn btn-lg btn-success btn-block bigger-button" id="open_gate">Open Gate</button><br>
88+
<button type="button" class="button btn btn-lg btn-primary btn-block" id="latch30m_gate">Latch Open for 30 min</button><br>
89+
<button type="button" class="button btn btn-lg btn-primary btn-block" id="latch8h_gate">Latch Open for 8 hours</button><br>
90+
<button type="button" class="button btn btn-lg btn-warning btn-block" id="close_gate">Close Now</button><br>
5891
<div class="jumbotron alert alert-info" role="alert">
59-
<strong>Gate Status: </strong><span id="status"><?=$data['gatestate']?></span><br>
60-
Last opened <span id="last_opened"><?=$data['last_opened']?></span>
92+
<strong>The gate is:</strong> <span id="status"><?=$data['gatestate']?></span> <img class="m-0 p-0" id="status-img" src="/images/dual-ring-loader.gif" alt="..." height="32" width="32"><br>
93+
Last opened <span id="last_opened"><?=$data['last_opened']?></span><br>
94+
Controller Status: <span id="device_status" style="color:green"><?=$data['device_status']?></span>
6195
</div>
6296
</div>
6397

@@ -70,47 +104,56 @@
70104
<script>
71105

72106
$(document).ready(function(){
107+
$("#status-img").hide();
73108
resetStatus();
74109
})
75-
110+
76111
function sendJSON(JSONout){
77-
var url = 'https://agent.electricimp.com/YOUR-AGENT-CODE';
112+
var url = 'https://agent.electricimp.com/-xWQ-bU_8bJ-';
78113
$.post(url, JSONout);
79114
}
80-
115+
81116
$("#open_gate").click(function() {
82117
var JSONout = '{"c":"btn","val":{"cmd":"open"}}';
83118
sendJSON(JSONout);
84-
$("#status").text("Opening...");
119+
//$("#status").text("Opening");
120+
//$("#status-img").show();
121+
resetStatus();
85122
});
86-
123+
87124
$("#latch30m_gate").click(function() {
88125
var JSONout = '{"c":"btn","val":{"cmd":"latch30m"}}';
89126
sendJSON(JSONout);
90-
$("#status").text("Opening...");
127+
//$("#status").text("Opening");
128+
//$("#status-img").show();
129+
resetStatus();
91130
});
92-
131+
93132
$("#latch8h_gate").click(function() {
94133
var JSONout = '{"c":"btn","val":{"cmd":"latch8h"}}';
95134
sendJSON(JSONout);
96-
$("#status").text("Opening...");
135+
//$("#status").text("Opening");
136+
//$("#status-img").show();
137+
resetStatus();
97138
});
98-
139+
99140
$("#close_gate").click(function() {
100141
var JSONout = '{"c":"btn","val":{"cmd":"close"}}';
101142
sendJSON(JSONout);
102-
$("#status").text("Closing...");
143+
//$("#status").text("Closing");
144+
//$("#status-img").show();
145+
resetStatus();
103146
});
104-
147+
105148
function resetStatus() {
106149
// Target url
107150
var target = 'http://projects.ajillion.com/get_gate_state';
108-
151+
109152
// Request
110153
var data = {
111154
agent : 'app'
112155
};
113-
156+
114157
// Send ajax post request
115158
$.ajax({
116159
url: target,
@@ -122,29 +165,40 @@ function resetStatus() {
122165
switch(data.gatestate) {
123166
case 0:
124167
$("#status").text('Closed');
168+
$("#status-img").hide();
125169
break;
126170
case 1:
127-
$("#status").text('Opening...');
171+
$("#status").text('Opening');
172+
$("#status-img").show();
128173
break;
129174
case 2:
130175
$("#status").text('Open');
176+
$("#status-img").hide();
131177
break;
132178
case 3:
133-
$("#status").text('Closing...');
179+
$("#status").text('Closing');
180+
$("#status-img").show();
134181
break;
135182
default:
136183
$("#status").text('Error');
184+
$("#status-img").hide();
137185
}
138-
186+
139187
$("#last_opened").text(data.last_opened);
188+
189+
var device_status = (data.device_state.devicestate ? "Online" : "Offline");
190+
if (data.device_state.devicestate == 0) device_status = device_status + data.device_offline_timestamp;
191+
var device_status_color = (data.device_state.devicestate ? "green" : "red");
192+
$("#device_status").text(device_status);
193+
$('#device_status').attr('style','color:' + device_status_color);
140194
},
141195
error: function(XMLHttpRequest, textStatus, errorThrown)
142196
{
143197
// Error message
144198
$("#status").text('Server Error');
145199
}
146200
});
147-
201+
148202
setTimeout(resetStatus, 3000);
149203
}
150204

0 commit comments

Comments
 (0)