Rev 2142 | Rev 2146 | Go to most recent revision | Only display areas with differences | Regard whitespace | Details | Blame | Last modification | View Log | SVN | RSS feed
| Rev 2142 | Rev 2145 | ||
|---|---|---|---|
| 1 | <?php |
1 | <?php |
| 2 | require_once("backend.php"); |
2 | require_once("backend.php"); |
| 3 | require_once("config.php"); |
3 | require_once("config.php"); |
| 4 | ?> |
4 | ?> |
| 5 | <!DOCTYPE HTML> |
5 | <!DOCTYPE HTML> |
| 6 | <html> |
6 | <html> |
| 7 | <head> |
7 | <head> |
| 8 | <meta charset="utf-8"> |
8 | <meta charset="utf-8"> |
| 9 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
9 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 10 | <title>Home Automation Control Center</title> |
10 | <title>Home Automation Control Center</title> |
| 11 | <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" /> |
11 | <link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" /> |
| 12 | <script src="jquery-1.7.2.min.js"></script> |
12 | <script src="jquery-1.7.2.min.js"></script> |
| 13 | <script src="jquery.mobile-1.1.1.min.js"></script> |
13 | <script src="jquery.mobile-1.1.1.min.js"></script> |
| 14 | <script src="jquery.tmpl.min.js"></script> |
14 | <script src="jquery.tmpl.min.js"></script> |
| 15 | 15 | ||
| 16 | <style> |
16 | <style> |
| 17 | <?php |
17 | <?php |
| 18 | foreach ($pages as $page) |
18 | foreach ($pages as $page) |
| 19 | { |
19 | { |
| 20 | include("pages/" . $page . "/style.css"); |
20 | include("pages/" . $page . "/style.css"); |
| 21 | } |
21 | } |
| 22 | ?> |
22 | ?> |
| 23 | 23 | ||
| 24 | .ui-li-heading { |
24 | .ui-li-heading { |
| 25 | white-space: normal; |
25 | white-space: normal; |
| 26 | } |
26 | } |
| 27 | </style> |
27 | </style> |
| 28 | 28 | ||
| 29 | <?php |
29 | <?php |
| 30 | foreach ($pages as $page) |
30 | foreach ($pages as $page) |
| 31 | { |
31 | { |
| 32 | include("pages/" . $page . "/template.html"); |
32 | include("pages/" . $page . "/template.html"); |
| 33 | } |
33 | } |
| 34 | ?> |
34 | ?> |
| 35 | 35 | ||
| 36 | <script id="page-template" type="text/x-jquery-tmpl" data-enhance="false"> |
36 | <script id="page-template" type="text/x-jquery-tmpl" data-enhance="false"> |
| 37 | <div id="page-${name}" data-role="page" data-theme="a" id="page-{name}"> |
37 | <div id="page-${name}" data-role="page" data-theme="a" id="page-{name}"> |
| 38 | <div data-role="header" data-position="fixed"> |
38 | <div data-id="PersistentFooter" data-role="header" data-position="fixed"> |
| 39 | < |
39 | <div data-role="navbar"> |
| 40 | < |
40 | <ul class="navbar-container"></ul> |
| - | 41 | </div> |
|
| 41 | </div> |
42 | </div> |
| 42 | <div data-role="content"></div> |
43 | <div data-role="content"></div> |
| 43 | </div> |
44 | </div> |
| 44 | </script> |
45 | </script> |
| 45 | 46 | ||
| 46 | <script id="pagelink-template" type="text/x-jquery-tmpl" data-enhance="false"> |
47 | <script id="pagelink-template" type="text/x-jquery-tmpl" data-enhance="false"> |
| 47 | <span> |
48 | <span> |
| 48 | <a href="#" data-role="button">${title}</a> |
49 | <a href="#" data-role="button">${title}</a> |
| 49 | </span> |
50 | </span> |
| 50 | </script> |
51 | </script> |
| 51 | 52 | ||
| 52 | <script> |
53 | <script> |
| 53 | $.mobile.ignoreContentEnabled = true; |
54 | $.mobile.ignoreContentEnabled = true; |
| 54 | $.mobile.transitionFallbacks.pop = "none"; |
55 | $.mobile.transitionFallbacks.pop = "none"; |
| 55 | $.mobile.transitionFallbacks.flip = "none"; |
56 | $.mobile.transitionFallbacks.flip = "none"; |
| 56 | $.mobile.transitionFallbacks.turn = "none"; |
57 | $.mobile.transitionFallbacks.turn = "none"; |
| 57 | $.mobile.transitionFallbacks.flow = "none"; |
58 | $.mobile.transitionFallbacks.flow = "none"; |
| 58 | $.mobile.transitionFallbacks.slidefade = "none"; |
59 | $.mobile.transitionFallbacks.slidefade = "none"; |
| 59 | $.mobile.transitionFallbacks.slide = "none"; |
60 | $.mobile.transitionFallbacks.slide = "none"; |
| 60 | $.mobile.transitionFallbacks.slideup = "none"; |
61 | $.mobile.transitionFallbacks.slideup = "none"; |
| 61 | $.mobile.transitionFallbacks.slidedown = "none"; |
62 | $.mobile.transitionFallbacks.slidedown = "none"; |
| 62 | $.mobile.defaultPageTransition = "none"; |
63 | $.mobile.defaultPageTransition = "none"; |
| 63 | $.mobile.ajaxEnabled = false; |
64 | $.mobile.ajaxEnabled = false; |
| 64 | 65 | ||
| 65 | var commandActive = false; |
66 | var commandActive = false; |
| 66 | var commandQueue = []; |
67 | var commandQueue = []; |
| 67 | 68 | ||
| 68 | function sendCommand(command, callback) |
69 | function sendCommand(command, callback) |
| 69 | { |
70 | { |
| 70 | if (commandActive) |
71 | if (commandActive) |
| 71 | { |
72 | { |
| 72 | commandQueue.push({ command: command, callback: callback }); |
73 | commandQueue.push({ command: command, callback: callback }); |
| 73 | } |
74 | } |
| 74 | else |
75 | else |
| 75 | { |
76 | { |
| 76 | commandActive = true; |
77 | commandActive = true; |
| 77 | 78 | ||
| 78 | jQuery.getJSON("backend.php?ajax", { command: command }, function(jsonData) |
79 | jQuery.getJSON("backend.php?ajax", { command: command }, function(jsonData) |
| 79 | { |
80 | { |
| 80 | handleCommandResponse(true, jsonData, callback); |
81 | handleCommandResponse(true, jsonData, callback); |
| 81 | }).error(function() |
82 | }).error(function() |
| 82 | { |
83 | { |
| 83 | handleCommandResponse(false, {}, callback); |
84 | handleCommandResponse(false, {}, callback); |
| 84 | }); |
85 | }); |
| 85 | } |
86 | } |
| 86 | } |
87 | } |
| 87 | 88 | ||
| 88 | function handleCommandResponse(success, jsonData, callback) |
89 | function handleCommandResponse(success, jsonData, callback) |
| 89 | { |
90 | { |
| 90 | commandActive = false; |
91 | commandActive = false; |
| 91 | 92 | ||
| 92 | if (commandQueue.length > 0) |
93 | if (commandQueue.length > 0) |
| 93 | { |
94 | { |
| 94 | var commandItem = commandQueue.shift(); |
95 | var commandItem = commandQueue.shift(); |
| 95 | 96 | ||
| 96 | sendCommand(commandItem.command, commandItem.callback); |
97 | sendCommand(commandItem.command, commandItem.callback); |
| 97 | } |
98 | } |
| 98 | 99 | ||
| 99 | if (success) |
100 | if (success) |
| 100 | { |
101 | { |
| 101 | if (callback) |
102 | if (callback) |
| 102 | { |
103 | { |
| 103 | callback(jsonData); |
104 | callback(jsonData); |
| 104 | } |
105 | } |
| 105 | } |
106 | } |
| 106 | else |
107 | else |
| 107 | { |
108 | { |
| 108 | console.log("command failed!"); |
109 | console.log("command failed!"); |
| 109 | } |
110 | } |
| 110 | } |
111 | } |
| 111 | </script> |
112 | </script> |
| 112 | 113 | ||
| 113 | <script> |
114 | <script> |
| 114 | var pages = {}; |
115 | var pages = {}; |
| 115 | 116 | ||
| 116 | <?php |
117 | <?php |
| 117 | foreach ($pages as $page) |
118 | foreach ($pages as $page) |
| 118 | { |
119 | { |
| 119 | include("pages/" . $page . "/script.js"); |
120 | include("pages/" . $page . "/script.js"); |
| 120 | } |
121 | } |
| 121 | ?> |
122 | ?> |
| 122 | </script> |
123 | </script> |
| 123 | 124 | ||
| 124 | <script> |
125 | <script> |
| 125 | 126 | ||
| 126 | var aliasNames = <?php echo json_encode($aliasNames); ?>; |
127 | var aliasNames = <?php echo json_encode($aliasNames); ?>; |
| 127 | var pageConfigurations = <?php echo json_encode($pageConfiguration); ?>; |
128 | var pageConfigurations = <?php echo json_encode($pageConfiguration); ?>; |
| 128 | var pageInstances = {}; |
129 | var pageInstances = {}; |
| 129 | var serverTimeOffset = 0; |
130 | var serverTimeOffset = 0; |
| 130 | 131 | ||
| 131 | function getServerTimestamp() |
132 | function getServerTimestamp() |
| 132 | { |
133 | { |
| 133 | return ((new Date()).getTime()) - serverTimeOffset |
134 | return ((new Date()).getTime()) - serverTimeOffset |
| 134 | } |
135 | } |
| 135 | 136 | ||
| 136 | $(document).ready(function(event) |
137 | $(document).ready(function(event) |
| 137 | { |
138 | { |
| 138 | document.location.hash = ""; |
139 | document.location.hash = ""; |
| 139 | 140 | ||
| 140 | sendCommand("(new Date()).getTime();", function(timestamp) |
141 | sendCommand("(new Date()).getTime();", function(timestamp) |
| 141 | { |
142 | { |
| 142 | serverTimeOffset = ((new Date()).getTime()) - parseInt(timestamp, 10); |
143 | serverTimeOffset = ((new Date()).getTime()) - parseInt(timestamp, 10); |
| 143 | }); |
144 | }); |
| 144 | 145 | ||
| 145 | jQuery.each(pageConfigurations, function(n, configuration) |
146 | jQuery.each(pageConfigurations, function(n, configuration) |
| 146 | { |
147 | { |
| 147 | var pageName = configuration.page + "_" + n; |
148 | var pageName = configuration.page + "_" + n; |
| 148 | 149 | ||
| 149 | pageInstances[pageName] = configuration; |
150 | pageInstances[pageName] = configuration; |
| 150 | 151 | ||
| 151 | pageInstances[pageName].name = pageName; |
152 | pageInstances[pageName].name = pageName; |
| 152 | 153 | ||
| 153 | pageInstances[pageName].pageElement = $("#page-template").tmpl(pageInstances[pageName]).appendTo($("body")).page(); |
154 | pageInstances[pageName].pageElement = $("#page-template").tmpl(pageInstances[pageName]).appendTo($("body")).page(); |
| 154 | pageInstances[pageName].pageContentElement = pageInstances[pageName].pageElement.find(":jqmData(role=content)"); |
155 | pageInstances[pageName].pageContentElement = pageInstances[pageName].pageElement.find(":jqmData(role=content)"); |
| - | 156 | ||
| - | 157 | ||
| 155 | 158 | ||
| 156 | pageInstances[pageName].pageElement.find(":jqmData(rel=back)").on("click", function(event) |
159 | pageInstances[pageName].pageElement.find(":jqmData(rel=back)").on("click", function(event) |
| 157 | { |
160 | { |
| 158 | $.mobile.changePage("#home", { transition: "none", reverse: true }); |
161 | $.mobile.changePage("#home", { transition: "none", reverse: true }); |
| 159 | event.preventDefault(); |
162 | event.preventDefault(); |
| 160 | }); |
163 | }); |
| 161 | 164 | ||
| 162 | pageInstances[pageName].pageLinkElement = $("#pagelink-template").tmpl(pageInstances[pageName]).appendTo($("#home").find(":jqmData(role=content)")).trigger("create").on("click", function(event) |
165 | pageInstances[pageName].pageLinkElement = $("#pagelink-template").tmpl(pageInstances[pageName]).appendTo($("#home").find(":jqmData(role=content)")).trigger("create").on("click", function(event) |
| 163 | { |
166 | { |
| 164 | $.mobile.changePage("#" + pageInstances[pageName].pageElement.attr("id"), "none"); |
167 | $.mobile.changePage("#" + pageInstances[pageName].pageElement.attr("id"), "none"); |
| 165 | event.preventDefault(); |
168 | event.preventDefault(); |
| 166 | }); |
169 | }); |
| 167 | 170 | ||
| 168 | 171 | ||
| 169 | if (pages[configuration.page] && pages[configuration.page].init) |
172 | if (pages[configuration.page] && pages[configuration.page].init) |
| 170 | { |
173 | { |
| 171 | pages[configuration.page].init(pageInstances[pageName]); |
174 | pages[configuration.page].init(pageInstances[pageName]); |
| 172 | } |
175 | } |
| - | 176 | }); |
|
| - | 177 | ||
| - | 178 | ||
| - | 179 | jQuery.each(pageInstances, function(pageName, pageInstance) |
|
| - | 180 | { |
|
| - | 181 | var navbarContainerElement = pageInstances[pageName].pageElement.find("ul.navbar-container"); |
|
| - | 182 | ||
| - | 183 | $("<li class=''><a href='#home'>Start</a></li>").appendTo(navbarContainerElement); |
|
| - | 184 | ||
| - | 185 | jQuery.each(pageInstances, function(pageName2, pageInstance2) |
|
| - | 186 | { |
|
| - | 187 | if (pageInstance === pageInstance2) |
|
| - | 188 | { |
|
| - | 189 | $("<li class=''><a href='#page-" + pageName2 + "' class='ui-btn-active ui-state-persist'>" + pageInstance2.title + "</a></li>").appendTo(navbarContainerElement); |
|
| - | 190 | } |
|
| - | 191 | else |
|
| - | 192 | { |
|
| - | 193 | $("<li class=''><a href='#page-" + pageName2 + "'>" + pageInstance2.title + "</a></li>").appendTo(navbarContainerElement); |
|
| - | 194 | } |
|
| - | 195 | }); |
|
| 173 | }); |
196 | }); |
| - | 197 | ||
| - | 198 | $(":jqmData(role=header)").navbar(); |
|
| 174 | 199 | ||
| - | 200 | ||
| 175 | $ |
201 | /*$(".ui-page").on("swipeleft", function() |
| 176 | { |
202 | { |
| 177 | var nextpage = $(this).nextAll(":jqmData(role=page)"); |
203 | var nextpage = $(this).nextAll(":jqmData(role=page)"); |
| 178 | 204 | ||
| 179 | if (nextpage.length > 0) |
205 | if (nextpage.length > 0) |
| 180 | { |
206 | { |
| 181 | $.mobile.changePage("#" + nextpage[0].id, { transition: "none", changeHash: true }); |
207 | $.mobile.changePage("#" + nextpage[0].id, { transition: "none", changeHash: true }); |
| 182 | } |
208 | } |
| 183 | else |
209 | else |
| 184 | { |
210 | { |
| 185 | nextpage = $(":jqmData(role=page)"); |
211 | nextpage = $(":jqmData(role=page)"); |
| 186 | 212 | ||
| 187 | $.mobile.changePage("#" + nextpage[0].id, { transition: "none", changeHash: true }); |
213 | $.mobile.changePage("#" + nextpage[0].id, { transition: "none", changeHash: true }); |
| 188 | } |
214 | } |
| 189 | }); |
215 | }); |
| 190 | 216 | |
|
| 191 | $(".ui-page").on("swiperight", function() |
217 | $(".ui-page").on("swiperight", function() |
| 192 | { |
218 | { |
| 193 | var prevpage = $(this).prevAll(":jqmData(role=page)"); |
219 | var prevpage = $(this).prevAll(":jqmData(role=page)"); |
| 194 | 220 | ||
| 195 | if (prevpage.length > 0) |
221 | if (prevpage.length > 0) |
| 196 | { |
222 | { |
| 197 | $.mobile.changePage("#" + prevpage[0].id, { transition: "none", reverse: true, changeHash: true }); |
223 | $.mobile.changePage("#" + prevpage[0].id, { transition: "none", reverse: true, changeHash: true }); |
| 198 | } |
224 | } |
| 199 | else |
225 | else |
| 200 | { |
226 | { |
| 201 | prevpage = $(":jqmData(role=page)"); |
227 | prevpage = $(":jqmData(role=page)"); |
| 202 | 228 | ||
| 203 | $.mobile.changePage("#" + prevpage[prevpage.length - 1].id, { transition: "none", reverse: true, changeHash: true }); |
229 | $.mobile.changePage("#" + prevpage[prevpage.length - 1].id, { transition: "none", reverse: true, changeHash: true }); |
| - | 230 | } |
|
| - | 231 | });*/ |
|
| - | 232 | ||
| - | 233 | $(":jqmData(role=navbar)").delegate("a", "vclick", function(event) |
|
| - | 234 | { |
|
| - | 235 | if(!$(event.target).hasClass("ui-disabled")) |
|
| - | 236 | { |
|
| - | 237 | $(":jqmData(role=navbar)").find("a").not(".ui-state-persist").removeClass($.mobile.activeBtnClass); |
|
| - | 238 | $(this).addClass($.mobile.activeBtnClass); |
|
| 204 | } |
239 | } |
| 205 | }); |
240 | }); |
| 206 | }); |
241 | }); |
| 207 | 242 | ||
| 208 | var dialogCloseTimer = null; |
243 | var dialogCloseTimer = null; |
| 209 | var dialogCloseCallback = null; |
244 | var dialogCloseCallback = null; |
| 210 | 245 | ||
| 211 | function openDialog(titleText, contentsHtml, autoCloseTimeout, closeCallback) |
246 | function openDialog(titleText, contentsHtml, autoCloseTimeout, closeCallback) |
| 212 | { |
247 | { |
| 213 | closeDialog(); |
248 | closeDialog(); |
| 214 | 249 | ||
| 215 | $("#dialog .dialog-title").text(titleText); |
250 | $("#dialog .dialog-title").text(titleText); |
| 216 | $("#dialog .dialog-contents").html(contentsHtml); |
251 | $("#dialog .dialog-contents").html(contentsHtml); |
| 217 | $("#dialog a").on("click", function(event) |
252 | $("#dialog a").on("click", function(event) |
| 218 | { |
253 | { |
| 219 | closeDialog(); |
254 | closeDialog(); |
| 220 | event.preventDefault(); |
255 | event.preventDefault(); |
| 221 | return false; |
256 | return false; |
| 222 | }); |
257 | }); |
| 223 | 258 | ||
| 224 | dialogCloseCallback = closeCallback; |
259 | dialogCloseCallback = closeCallback; |
| 225 | 260 | ||
| 226 | $.mobile.changePage($("#dialog"), { role: "dialog"}); |
261 | $.mobile.changePage($("#dialog"), { role: "dialog"}); |
| 227 | 262 | ||
| 228 | $("#dialog").dialog({ close: function(event) |
263 | $("#dialog").dialog({ close: function(event) |
| 229 | { |
264 | { |
| 230 | var callback = dialogCloseCallback; |
265 | var callback = dialogCloseCallback; |
| 231 | 266 | ||
| 232 | closeDialog(); |
267 | closeDialog(); |
| 233 | 268 | ||
| 234 | if (callback) |
269 | if (callback) |
| 235 | { |
270 | { |
| 236 | callback(); |
271 | callback(); |
| 237 | } |
272 | } |
| 238 | }}); |
273 | }}); |
| 239 | 274 | ||
| 240 | 275 | ||
| 241 | if (autoCloseTimeout) |
276 | if (autoCloseTimeout) |
| 242 | { |
277 | { |
| 243 | dialogCloseTimer = setTimeout(closeDialog, autoCloseTimeout); |
278 | dialogCloseTimer = setTimeout(closeDialog, autoCloseTimeout); |
| 244 | } |
279 | } |
| 245 | } |
280 | } |
| 246 | 281 | ||
| 247 | function closeDialog() |
282 | function closeDialog() |
| 248 | { |
283 | { |
| 249 | if (dialogCloseTimer) |
284 | if (dialogCloseTimer) |
| 250 | { |
285 | { |
| 251 | clearTimeout(dialogCloseTimer); |
286 | clearTimeout(dialogCloseTimer); |
| 252 | dialogCloseTimer = null; |
287 | dialogCloseTimer = null; |
| 253 | } |
288 | } |
| 254 | 289 | ||
| 255 | if ($("#dialog").is(":visible")) |
290 | if ($("#dialog").is(":visible")) |
| 256 | { |
291 | { |
| 257 | $("#dialog").dialog("close"); |
292 | $("#dialog").dialog("close"); |
| 258 | 293 | ||
| 259 | if (dialogCloseCallback) |
294 | if (dialogCloseCallback) |
| 260 | { |
295 | { |
| 261 | dialogCloseCallback(); |
296 | dialogCloseCallback(); |
| 262 | } |
297 | } |
| 263 | } |
298 | } |
| 264 | 299 | ||
| 265 | dialogCloseCallback = null; |
300 | dialogCloseCallback = null; |
| 266 | } |
301 | } |
| 267 | 302 | ||
| 268 | 303 | ||
| 269 | </script> |
304 | </script> |
| 270 | </head> |
305 | </head> |
| 271 | 306 | ||
| 272 | <body> |
307 | <body> |
| 273 | <div id="home" data-role="page" data-theme="a"> |
308 | <div id="home" data-role="page" data-theme="a"> |
| 274 | <div data-role="header"><h1>Home Automation Control Center</h1></div> |
309 | <div data-role="header"><h1>Home Automation Control Center</h1></div> |
| 275 | <div data-role="content"></div> |
310 | <div data-role="content"></div> |
| 276 | </div> |
311 | </div> |
| 277 | 312 | ||
| 278 | <div data-role="dialog" id="dialog"> |
313 | <div data-role="dialog" id="dialog"> |
| 279 | <div data-role="content"> |
314 | <div data-role="content"> |
| 280 | <h3 class="dialog-title"></h3> |
315 | <h3 class="dialog-title"></h3> |
| 281 | <p class="dialog-contents"></p> |
316 | <p class="dialog-contents"></p> |
| 282 | <a href="#" data-role="button" data-theme="c">Close</a> |
317 | <a href="#" data-role="button" data-theme="c">Close</a> |
| 283 | </div> |
318 | </div> |
| 284 | </div> |
319 | </div> |
| 285 | 320 | ||
| 286 | </body> |
321 | </body> |
| 287 | </html> |
322 | </html> |
| 288 | 323 | ||