Skip to content

Commit

Permalink
pytomation_web -> Added "Desktop" code to Home Control and made it th…
Browse files Browse the repository at this point in the history
…e default site

	Removed mobile only site
	Added "detail" layout to Home Control app (default for desktop)
	Added Voice Command for Chrome (only browser with Speech API)
	Fixed scrolling bug (scroll would stick until voice command used)
	Moved old site to contrib folder
	Device content now resizes to the smallest size
  • Loading branch information
king-dopey committed Jan 18, 2015
1 parent dfb1987 commit c1b4204
Show file tree
Hide file tree
Showing 120 changed files with 429 additions and 338 deletions.
2 changes: 1 addition & 1 deletion HomeControl/www
49 changes: 49 additions & 0 deletions contrib/web_example/index.html
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pytomation Web</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<script src="js/device_grid.js"></script>
<script>
$().ready(function(){
reload_device_grid();
});
</script>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='col-md-11 col-md-offset-1'>
<h1>Pytomation Web </h1>
<a href="http://www.pytomation.com">www.pytomation.com</a><br><br>
Devices
<select name='listDevice' onchange='reload_device_grid()'>
<option value='all'>All</option>
<option value='Door'>Door</option>
<option value='Generic'>Generic</option>
<option selected value='Light'>Light</option>
<option value='Location'>Location</option>
<option value='Motion'>Motion</option>
<option value='Photocell'>Photocell</option>
<option value='Room'>Room</option>
<option value='Thermostat'>Thermostat</option>
</select>
<table id='tableDevices' class='table table-striped table-bordered table-hover table-condensed'>
<thead><th>Type</th><th>Device name</th><th>State</th><th>Commands</th></thead>
</table>
</div>
</div>
</body>
</html>

File renamed without changes.
File renamed without changes.
File renamed without changes
Expand Up @@ -28,13 +28,18 @@ div.ui-slider {
left: -53px;
clear: both;
}
.singleDevice {
.singleDevice, .singleDevice2 {
border-style: groove;
border-width: thin;
padding-left: 1px;
padding-right: 0px;
width:100%;
}
.commandContent{
position: relative;
top: 50%;
transform: translateY(-50%);
}
#mainContent{
padding: 0 0 0 0;
}
Expand All @@ -47,4 +52,10 @@ div.ui-slider {
.ui-select {
margin-top: 0;
margin-bottom: 2px;
}
.command {
margin-top: 0;
margin-bottom: 3px;
margin-left: 2px;
margin-right: 0;
}
183 changes: 136 additions & 47 deletions pytomation_web/index.html 100644 → 100755
@@ -1,49 +1,138 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pytomation Web</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

<script src="js/device_grid.js"></script>
<script>
$().ready(function(){
reload_device_grid();
});
</script>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='col-md-11 col-md-offset-1'>
<h1>Pytomation Web </h1>
<a href="http://www.pytomation.com">www.pytomation.com</a><br><br>
Devices
<select name='listDevice' onchange='reload_device_grid()'>
<option value='all'>All</option>
<option value='Door'>Door</option>
<option value='Generic'>Generic</option>
<option selected value='Light'>Light</option>
<option value='Location'>Location</option>
<option value='Motion'>Motion</option>
<option value='Photocell'>Photocell</option>
<option value='Room'>Room</option>
<option value='Thermostat'>Thermostat</option>
</select>
<table id='tableDevices' class='table table-striped table-bordered table-hover table-condensed'>
<thead><th>Type</th><th>Device name</th><th>State</th><th>Commands</th></thead>
</table>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="stylesheet" href="css/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="css/jquery.mobile.iscrollview-pull.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css"/>
<link rel="stylesheet" href="css/HomeControl-theme.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.4.3.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
<script src="js/iscroll.js" type="text/javascript"></script>
<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>Pytomation - Home Control</title>
</head>
<body>

<!-- Start of main page: #main -->
<div data-role="page" id="main" data-theme="a">
<div data-role="header">
<div style="text-align: center;"><select id="listRoom" name='listRoom' onchange='reload_device_grid()'>
<option selected value='All'>All Rooms</option>
</select></div>
<div style="position:absolute;top:0px;left:5px">
<select id="listDevice" name='listDevice' onchange='reload_device_grid()'>
<option selected value='All'>All</option>
</select>
</div>
<div style="position:absolute;top:-6px;right:5px">
<a id="settingsButton" href="#settings" data-icon="gear" data-role="button" data-rel="dialog"
data-transition="pop">Settings</a>
</div>
</div><!-- /header -->

<div id="mainContent" data-iscroll data-role="content">
<div class="iscroll-pulldown">
<span class="iscroll-pull-icon"></span>
<span class="iscroll-pull-label" data-iscroll-loading-text='Listening...' data-iscroll-pulled-text='Let go for "Voice Command"'>Pull for &ldquo;Voice Command&rdquo;</span>
</div>
<!-- content -->
<table id='tableDevicesLong'>

</table>
<table id='tableDevices'>

</table>
<!-- end content -->
</div>
</div><!-- /page main -->

<!-- Start of commands popup: #commands -->
<div data-role="page" id="commands">
<div data-role="content" >
<!-- /content -->
<table id='tableCommands'>

</table>
<p>
<a href="#main" data-rel="back" data-role="button" data-inline="true"
data-icon="back">close</a>
</p>
</div>
</div><!-- /page commands -->

<!-- Start of settings popup: #settings -->
<div data-role="page" id="settings">
<div data-role="header" >
<h1>Settings</h1>
</div><!-- /header -->

<div data-role="content" >
<form id="settingsForm">
<p id='serverSettings'>
Main Server (http[s]://192.168.x.x:8080) <input type="text" name="serverName" id="serverName">
Away Server (http[s]://mydyndns.dyn.com:xxxx)<input type="text" name="serverName2" id="serverName2">
User Name <input type="text" name="userName" id="userName">
Password <input type="password" name="password" id="password">
</p>
<p>
Select a theme: <br />
<a href="#" onclick='theme_changed("a")' class="colorSelect" style="background-color: #38C;"></a> <!-- (default) Blue/White -->
<a href="#" onclick='theme_changed("a")' class="colorSelect" style="background-color: #ffffff;margin-right: 5px;"></a>

<a href="#" onclick='theme_changed("b")' class="colorSelect" style="background-color: #3CF;"></a> <!-- Light Blue/White -->
<a href="#" onclick='theme_changed("b")' class="colorSelect" style="background-color: #ffffff;margin-right: 5px;"></a>

<a href="#" onclick='theme_changed("c")' class="colorSelect" style="background-color: #009245;"></a> <!-- Dark Green/White -->
<a href="#" onclick='theme_changed("c")' class="colorSelect" style="background-color: #ffffff;margin-right: 5px;"></a>

<a href="#" onclick='theme_changed("d")' class="colorSelect" style="background-color: #8CC63F;"></a> <!-- Lime Green/White -->
<a href="#" onclick='theme_changed("d")' class="colorSelect" style="background-color: #ffffff;margin-right: 5px;"></a>

<a href="#" onclick='theme_changed("e")' class="colorSelect" style="background-color: #C1272D;"></a> <!-- Red/White -->
<a href="#" onclick='theme_changed("e")' class="colorSelect" style="background-color: #ffffff;margin-right: 5px;"></a>

<br />
<br />

<a href="#" onclick='theme_changed("f")' class="colorSelect" style="background-color: #38C;"></a> <!-- Blue/Black -->
<a href="#" onclick='theme_changed("f")' class="colorSelect" style="background-color: #000000;margin-right: 5px;"></a>

<a href="#" onclick='theme_changed("g")' class="colorSelect" style="background-color: #3CF;"></a> <!-- Light Blue/Black -->
<a href="#" onclick='theme_changed("g")' class="colorSelect" style="background-color: #000000;margin-right: 5px;"></a>

<a href="#" onclick='theme_changed("h")' class="colorSelect" style="background-color: #009245;"></a> <!-- Dark Green/Black -->
<a href="#" onclick='theme_changed("h")' class="colorSelect" style="background-color: #000000;margin-right: 5px;"></a>

<a href="#" onclick='theme_changed("i")' class="colorSelect" style="background-color: #8CC63F;"></a> <!-- Lime Green/Black -->
<a href="#" onclick='theme_changed("i")' class="colorSelect" style="background-color: #000000;margin-right: 5px;"></a>

<a href="#" onclick='theme_changed("j")' class="colorSelect" style="background-color: #C1272D;"></a> <!-- Red/Black -->
<a href="#" onclick='theme_changed("j")' class="colorSelect" style="background-color: #000000;margin-right: 5px;"></a>
<br />
</p>
<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="LayoutStyle" id="CompactStyle" value="compact">
<label for="CompactStyle">Compact</label>
<input type="radio" name="LayoutStyle" id="DetailStyle" value="detail">
<label for="DetailStyle">Detail</label>
</fieldset>
</div>
<p>
<a href="#main" onclick="save_settings()" data-rel="back" data-role="button" data-inline="true"
data-icon="back">Save Settings</a>
</p>
</form>
</div><!-- /content -->
</div><!-- /page settings -->
</body>
</html>

0 comments on commit c1b4204

Please sign in to comment.