-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·109 lines (90 loc) · 5.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<html>
<head>
<title>HA Dashboard</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!--
This viewport specification makes touch events a little more responsive in Chrome for Android
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.atmosphere.js"></script>
<script src="js/dashboard.js"></script>
<link rel="stylesheet" href="css/style.css" />
<!--
The "manifest.json" file enables the "Add to homescreen" functionality in Chrome for Android
see https://developer.chrome.com/multidevice/android/installtohomescreen
House icon made by <a href="http://fontawesome.io" title="Dave Gandy">Dave Gandy</a>
from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed under
<a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC BY 3.0</a></div>
-->
<link rel="manifest" href="manifest.json">
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="config.local.js"></script>
<script type="text/javascript">
$(document).ready(function() {
Log("Document ready", 2);
Start();
});
</script>
</head>
<body>
<div class="topbar">
<div class="date">2015-01-01</div>
<div class="refresh fa fa-refresh fa-fw" onclick="history.go(0)"></div>
<div class="clock">12:00</div>
</div>
<div style="margin-top: 40px;">
<!--
Each "widget" element below defines a single widget.
Each widget needs 3 data attributes: type, item & title.
The other attributes only apply to certain types.
TODO:
This is just an example setup - replace it with the widgets you want to show!
The different data attributes:
- type: switch, sensor, openclose, trash
- item: exact same item name as in OpenHAB items file
- title: text to display in bottom part of widget
- history: add this for items that use persistence (logging)
- icon: [optional] [type=switch only]
see https://fortawesome.github.io/Font-Awesome/icons/ for possible values
when omitted defaults to a lightbulb
- format: [optional] [type=sensor only]
can be used to add characters around the value returned
- trashday/recycleday: [type=trash only]
Trash days; values range from 0 (Sunday) to 6 (Saturday)
-->
<widget data-type="switch" data-item="KanKun" data-title="Living Room"></widget>
<widget data-type="switch" data-item="CamSwitch" data-title="Camera" data-icon="video-camera"></widget>
<widget data-type="openclose" data-item="Door_Motion" data-title="Front Door" data-history="true"></widget>
<widget data-type="sensor" data-item="Door_Temperature" data-title="Front Door" data-format="{0}°" data-history="true"></widget>
<widget data-type="trash" data-title="Trash" data-trashday="3" data-recycleday="4"></widget>
</div>
<!-- If you don't want to use the weather bar, remove the whole section below -->
<div class="weatherbar">
<div class="weather_observation">
<div style="position: absolute; font-size: 3em; font-weight: bold; color: #333333; right: 10px; bottom: 15px;">NOW</div>
<img src="weather/clear.png" id="observation_icon" style="position: absolute; bottom: 30px; left: 10px; -webkit-filter: invert(100%)" />
<div id="observation_weather" style="position: absolute; bottom: 36px; left: 80px; font-size: 1.8em;">?</div>
<div id="observation_temperature" style="position: absolute; bottom: 46px; right: 10px; font-size: 1.5em;">?</div>
<div id="observation_feelslike" style="position: absolute; bottom: 15px; right: 10px; font-size: 0.75em; font-style: italic;">?</div>
</div>
<div class="weather_forecast" id="weather_today">
<div id="forecast_title" style="position: absolute; font-size: 3em; font-weight: bold; color: #333333; right: 5px; bottom: 15px;">?</div>
<img src="weather/nt_clear.png" id="forecast_icon" style="position: absolute; bottom: 30px; left: 10px; -webkit-filter: invert(100%)" />
<div id="forecast_conditions" style="position: absolute; bottom: 36px; left: 80px; font-size: 1.8em;">?</div>
<div id="forecast_high" style="position: absolute; bottom: 46px; right: 10px; font-size: 1.5em;">?</div>
<div id="forecast_low" style="position: absolute; bottom: 15px; right: 10px; font-size: 0.75em; font-style: italic;">?</div>
</div>
<div class="weather_forecast" id="weather_tomorrow" style="display: none;">
<div id="forecast_title" style="position: absolute; font-size: 3em; font-weight: bold; color: #333333; right: 5px; bottom: 15px;">?</div>
<img src="weather/nt_clear.png" id="forecast_icon" style="position: absolute; bottom: 30px; left: 10px; -webkit-filter: invert(100%)" />
<div id="forecast_conditions" style="position: absolute; bottom: 36px; left: 80px; font-size: 1.8em;">?</div>
<div id="forecast_high" style="position: absolute; bottom: 46px; right: 10px; font-size: 1.5em;">?</div>
<div id="forecast_low" style="position: absolute; bottom: 15px; right: 10px; font-size: 0.75em; font-style: italic;">?</div>
</div>
<div id="observation_time" style="position: absolute; bottom: 95px; left: 5px; font-size: 0.5em; font-style: italic; color: #888888;">?</div>
<div id="forecast_time" style="position: absolute; bottom: 95px; right: 15px; font-size: 0.5em; font-style: italic; color: #888888;">?</div>
</div>
<!-- End of weather section -->
</body>
</html>