web page to control the web control
- Thread starter igor
- Start date
I use javascript and php to make a dynamically updating mobile app. You can write different functions like toggle buttons using php. I have two webcontrol boards and a wireless thermostat that are controlled on from one mobile app. You can also create different pages for different devices. I have one for my phone and another for my tablet and pc.
Php sends and receives the data, while javascript displays, refreshes and activates php commands. I found that jquery mobile works best as a mobile app base. Jquery also has a color creator so you can make any kind of theme you want. The layout and button styles are pretty standard, but work well in all mobile browsers.
Php sends and receives the data, while javascript displays, refreshes and activates php commands. I found that jquery mobile works best as a mobile app base. Jquery also has a color creator so you can make any kind of theme you want. The layout and button styles are pretty standard, but work well in all mobile browsers.
Keep in mind I'm using xampp on a netbook running XP, so some scripts might need changed if you run this on a linux system.
First part is pretty simple. I ping the board once and wait 50ms. If the board does not respond, no values will be returned. This prevents the page from not loading. If it does, it gets every value from the board and breaks it up into pieces($data[0],$data[1],etc.). Each piece corresponds with a value like $data[24] is IP6 on the board. At least on my board it is. Then you can assign values to them if you don't want to see the raw value. IP6 for example has my garage door sensor on it, so I wanted to see open or closed. If not, you can just add the value that will be encoded into a readable format.
A good trick is to just encode the $data variable, then open status.php in your browser. It will give you all of the variables in order so you can pick and choose with ones you want. It's also a good way to debug the script for errors.
It's very important to just encode($status) the values you want to display and only those values. Encoding more will only result in a browser error.
--status.php--
<?php
$webcontrol = exec("ping -n 1 -w 50 192.168.1.15");
$stripped = strip_tags($webcontrol);
$explode = explode(" ", $stripped);
if ( $explode[4] == 'Packets:' ) {
$status = "null";
}
else {
$webcontrolgetall = file_get_contents('http://admin
[email protected]/getall.cgi');
$strip = strip_tags($webcontrolgetall);
$data = explode("\n", $strip);
if ( $data[24] == 1 ) {
$garage = "OPEN";
}
if ( $data[24] == 0 ) {
$garage = "CLOSED";
}
$status['garage'] = $garage;
$status['temp'] = $data[27];
}
echo json_encode($status);
?>
--status.php--
First part is pretty simple. I ping the board once and wait 50ms. If the board does not respond, no values will be returned. This prevents the page from not loading. If it does, it gets every value from the board and breaks it up into pieces($data[0],$data[1],etc.). Each piece corresponds with a value like $data[24] is IP6 on the board. At least on my board it is. Then you can assign values to them if you don't want to see the raw value. IP6 for example has my garage door sensor on it, so I wanted to see open or closed. If not, you can just add the value that will be encoded into a readable format.
A good trick is to just encode the $data variable, then open status.php in your browser. It will give you all of the variables in order so you can pick and choose with ones you want. It's also a good way to debug the script for errors.
It's very important to just encode($status) the values you want to display and only those values. Encoding more will only result in a browser error.
--status.php--
<?php
$webcontrol = exec("ping -n 1 -w 50 192.168.1.15");
$stripped = strip_tags($webcontrol);
$explode = explode(" ", $stripped);
if ( $explode[4] == 'Packets:' ) {
$status = "null";
}
else {
$webcontrolgetall = file_get_contents('http://admin
[email protected]/getall.cgi');$strip = strip_tags($webcontrolgetall);
$data = explode("\n", $strip);
if ( $data[24] == 1 ) {
$garage = "OPEN";
}
if ( $data[24] == 0 ) {
$garage = "CLOSED";
}
$status['garage'] = $garage;
$status['temp'] = $data[27];
}
echo json_encode($status);
?>
--status.php--
Second part is running the php script and pass the values to the webpage. The encoded value is named and then formatted however you want.
The "setInterval" will make the script run in a loop. The values will be updated every 3 seconds until the page is closed. The value is in milliseconds if you want to change the update frequency.
--status.js--
$(function() {
getStatus();
});
function getStatus() {
$.getJSON('status.php', function(data) {
$('div#garage').html('Garage: ' + data.garage);
$('div#temp').html('Temp: ' + data.temp);
});
}
setInterval("getStatus()",3000);
--status.js--
The "setInterval" will make the script run in a loop. The values will be updated every 3 seconds until the page is closed. The value is in milliseconds if you want to change the update frequency.
--status.js--
$(function() {
getStatus();
});
function getStatus() {
$.getJSON('status.php', function(data) {
$('div#garage').html('Garage: ' + data.garage);
$('div#temp').html('Temp: ' + data.temp);
});
}
setInterval("getStatus()",3000);
--status.js--
Third is a control script. This script will be used by javascript to preform a function. In this case, my garage door opener. It sets output 1 to on, sleeps for 1 second, then sets output 1 to off. You can also use this script to cycle a var value from 1 to 0 or add/subtract a value from var too. Any thing you can do from a browser, you can do with a php script and much more.
I have my lights on a timer. Var 1 is set to the time on value and var 2 is the time off value in hours. The script gets the value of var 1, then adds or subtracts the value by 1. This value is then sent to the board.
Like I said, you can do pretty much anything you can think of.
--garagecontrol.php--
<?php
//Garage door opener
if (isset($_GET['garagedooropener'])){
$ipon = file_get_contents('http://admin[email protected]/api/setttloutput.cgi?output=1&state=1');
sleep(1);
$ipoff = file_get_contents('http://admin[email protected]/api/setttloutput.cgi?output=1&state=0');
echo (exit(0));
}
?>
--garagecontrol.php--
I have my lights on a timer. Var 1 is set to the time on value and var 2 is the time off value in hours. The script gets the value of var 1, then adds or subtracts the value by 1. This value is then sent to the board.
Like I said, you can do pretty much anything you can think of.
--garagecontrol.php--
<?php
//Garage door opener
if (isset($_GET['garagedooropener'])){
$ipon = file_get_contents('http://admin
[email protected]/api/setttloutput.cgi?output=1&state=1');sleep(1);
$ipoff = file_get_contents('http://admin
[email protected]/api/setttloutput.cgi?output=1&state=0');echo (exit(0));
}
?>
--garagecontrol.php--
Forth script gives the function a name so you can call it from a button that you create inside the app.
--functions.js--
function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) return new XMLHttpRequest();
else {
alert("Your browser does not support AJAX.");
return null;
}
}
function garagedooropener(){
httpObject = getHTTPObject();
if (httpObject !=null){
httpObject.open('GET', 'garagecontrol.php?garagedooropener')
httpObject.send(null);
}
}
var httpObject = null;
--functions.js--
--functions.js--
function getHTTPObject(){
if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest) return new XMLHttpRequest();
else {
alert("Your browser does not support AJAX.");
return null;
}
}
function garagedooropener(){
httpObject = getHTTPObject();
if (httpObject !=null){
httpObject.open('GET', 'garagecontrol.php?garagedooropener')
httpObject.send(null);
}
}
var httpObject = null;
--functions.js--
The actual webapp will vary depending on your style sheet and formatting. I'm using jquery mobile with a dark theme. The dark theme uses less battery for screen time and I just like the way it looks. This example is mine.
If you intend to use multiple boards, I recommend using different php and js files for each board. You can really get carried away depending on what you do with your board and get lost in the code. Also keep in mind the more you add to this webapp, the longer it takes to load. This code took me about a month of trial and error get it to even display in the browser. I had to learn jquery which was a treat. Php was easy, but JavaScript was more foreign to me.
I've tried different stylesheets and this one seems to be the quickest to load. There is most certainly room for improvement, but I just don't have the time to put into it anymore. If anyone has any ideas, please let me know. Of course you need to add your own way to log onto the app if your outside your local network. I use a simple php login script with ssl since I only have a few users. Security is a must especially if it controls something like a garage door.
Good Luck
--index.html--
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Webcontrol</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.2.0.min.css" />
<link rel="shortcut icon" href="favicon.ico">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/functions.js"></script>
<script src="js/status.js"></script>
</head>
<body>
<div data-role="page" id="one" data-content-theme="a" data-theme="a">
<div data-role="header">
<h1>Webcontrol</h1>
</div>
<div data-role="content">
<strong>
<div id="temp">Temp: --.- F</div>
</strong>
</div>
<div data-role="content">
<div id="garage">Garage: -------</div>
<div><button type="button" data-theme="b" data-mini="true"
onclick="garagedooropener()">Garage Door Opener</button>
</div>
</div>
</div>
</body>
</html>
--index.html--
If you intend to use multiple boards, I recommend using different php and js files for each board. You can really get carried away depending on what you do with your board and get lost in the code. Also keep in mind the more you add to this webapp, the longer it takes to load. This code took me about a month of trial and error get it to even display in the browser. I had to learn jquery which was a treat. Php was easy, but JavaScript was more foreign to me.
I've tried different stylesheets and this one seems to be the quickest to load. There is most certainly room for improvement, but I just don't have the time to put into it anymore. If anyone has any ideas, please let me know. Of course you need to add your own way to log onto the app if your outside your local network. I use a simple php login script with ssl since I only have a few users. Security is a must especially if it controls something like a garage door.
Good Luck
--index.html--
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Webcontrol</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.2.0.min.css" />
<link rel="shortcut icon" href="favicon.ico">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/functions.js"></script>
<script src="js/status.js"></script>
</head>
<body>
<div data-role="page" id="one" data-content-theme="a" data-theme="a">
<div data-role="header">
<h1>Webcontrol</h1>
</div>
<div data-role="content">
<strong>
<div id="temp">Temp: --.- F</div>
</strong>
</div>
<div data-role="content">
<div id="garage">Garage: -------</div>
<div><button type="button" data-theme="b" data-mini="true"
onclick="garagedooropener()">Garage Door Opener</button>
</div>
</div>
</div>
</body>
</html>
--index.html--
I used http://www.virtualmechanics.com/products/spinnerpro/ to make my web page this
[sharedmedia=gallery:images:535]
way it workes on pc or phone
[sharedmedia=gallery:images:535]
way it workes on pc or phone
CAI_Support
Senior Member
That is really nice!
Ketchup said:Thanks for this excellent code. It worked beautifully controlling my Webcontrol board from my Iphone
I know I'm not very good at documenting my code, so I'm glad it worked out for you. Now that this crazy summer is over, I have some time to work on coding again.
If you have any questions about how to code this webapp, I have some time now to help.
