Subversion Repositories HomeAutomation

Rev

Rev 2111 | Rev 2142 | Go to most recent revision | Only display areas with differences | Regard whitespace | Details | Blame | Last modification | View Log | SVN | RSS feed

Rev 2111 Rev 2133
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">
 38 
        <div data-role="header">
39 
          <a href="#home" data-icon="home" data-direction="reverse">Start</a>
 39 
          <a href="#home" data-icon="home" data-direction="reverse">Start</a>
40 
          <h1>${title} - Home Automation Control Center</h1>
 40 
          <h1>${title} - Home Automation Control Center</h1>
41 
        </div>
 41 
        </div>
42 
        <div data-role="content"></div>
 42 
        <div data-role="content"></div>
43 
      </div>
 43 
      </div>
44 
    </script>
 44 
    </script>
45 
 
 45 
 
46 
    <script id="pagelink-template" type="text/x-jquery-tmpl" data-enhance="false">
 46 
    <script id="pagelink-template" type="text/x-jquery-tmpl" data-enhance="false">
47 
      <span>
 47 
      <span>
48 
        <a href="#" data-role="button">${title}</a>
 48 
        <a href="#" data-role="button">${title}</a>
49 
      </span>
 49 
      </span>
50 
    </script>
 50 
    </script>
51 
 
 51 
 
52 
    <script>
 52 
    <script>
53 
      $.mobile.ignoreContentEnabled = true;
 53 
      $.mobile.ignoreContentEnabled = true;
54 
      $.mobile.transitionFallbacks.pop = "none";
 54 
      $.mobile.transitionFallbacks.pop = "none";
55 
      $.mobile.transitionFallbacks.flip = "none";
 55 
      $.mobile.transitionFallbacks.flip = "none";
56 
      $.mobile.transitionFallbacks.turn = "none";
 56 
      $.mobile.transitionFallbacks.turn = "none";
57 
      $.mobile.transitionFallbacks.flow = "none";
 57 
      $.mobile.transitionFallbacks.flow = "none";
58 
      $.mobile.transitionFallbacks.slidefade = "none";
 58 
      $.mobile.transitionFallbacks.slidefade = "none";
59 
      $.mobile.transitionFallbacks.slide = "none";
 59 
      $.mobile.transitionFallbacks.slide = "none";
60 
      $.mobile.transitionFallbacks.slideup = "none";
 60 
      $.mobile.transitionFallbacks.slideup = "none";
61 
      $.mobile.transitionFallbacks.slidedown = "none";
 61 
      $.mobile.transitionFallbacks.slidedown = "none";
62 
      $.mobile.defaultPageTransition = "none";
 62 
      $.mobile.defaultPageTransition = "none";
63 
      $.mobile.ajaxEnabled = false;
 63 
      $.mobile.ajaxEnabled = false;
64 
 
 64 
 
65 
      var commandActive = false;
 65 
      var commandActive = false;
66 
      var commandQueue = [];
 66 
      var commandQueue = [];
67 
 
 67 
 
68 
      function sendCommand(command, callback)
 68 
      function sendCommand(command, callback)
69 
      {
 69 
      {
70 
        if (commandActive)
 70 
        if (commandActive)
71 
        {
 71 
        {
72 
          commandQueue.push({ command: command, callback: callback });
 72 
          commandQueue.push({ command: command, callback: callback });
73 
        }
 73 
        }
74 
        else
 74 
        else
75 
        {
 75 
        {
76 
          commandActive = true;
 76 
          commandActive = true;
77 
 
 77 
 
78 
          jQuery.getJSON("backend.php?ajax", { command: command }, function(jsonData)
 78 
          jQuery.getJSON("backend.php?ajax", { command: command }, function(jsonData)
79 
          {
 79 
          {
80 
            handleCommandResponse(true, jsonData, callback);
 80 
            handleCommandResponse(true, jsonData, callback);
81 
          }).error(function()
 81 
          }).error(function()
82 
          {
 82 
          {
83 
            handleCommandResponse(false, {}, callback);
 83 
            handleCommandResponse(false, {}, callback);
84 
          });
 84 
          });
85 
        }
 85 
        }
86 
      }
 86 
      }
87 
 
 87 
 
88 
      function handleCommandResponse(success, jsonData, callback)
 88 
      function handleCommandResponse(success, jsonData, callback)
89 
      {
 89 
      {
90 
        commandActive = false;
 90 
        commandActive = false;
91 
 
 91 
 
92 
        if (commandQueue.length > 0)
 92 
        if (commandQueue.length > 0)
93 
        {
 93 
        {
94 
          var commandItem = commandQueue.shift();
 94 
          var commandItem = commandQueue.shift();
95 
 
 95 
 
96 
          sendCommand(commandItem.command, commandItem.callback);
 96 
          sendCommand(commandItem.command, commandItem.callback);
97 
        }
 97 
        }
98 
 
 98 
 
99 
        if (success)
 99 
        if (success)
100 
        {
 100 
        {
101 
          if (callback)
 101 
          if (callback)
102 
          {
 102 
          {
103 
            callback(jsonData);
 103 
            callback(jsonData);
104 
          }
 104 
          }
105 
        }
 105 
        }
106 
        else
 106 
        else
107 
        {
 107 
        {
108 
          console.log("command failed!");
 108 
          console.log("command failed!");
109 
        }
 109 
        }
110 
      }
 110 
      }
111 
    </script>
 111 
    </script>
112 
 
 112 
 
113 
    <script>
 113 
    <script>
114 
      var pages = {};
 114 
      var pages = {};
115 
 
 115 
 
116 
    <?php
 116 
    <?php
117 
      foreach ($pages as $page)
 117 
      foreach ($pages as $page)
118 
      {
 118 
      {
119 
        include("pages/" . $page . "/script.js");
 119 
        include("pages/" . $page . "/script.js");
120 
      }
 120 
      }
121 
    ?>
 121 
    ?>
122 
    </script>
 122 
    </script>
123 
 
 123 
 
124 
    <script>
 124 
    <script>
125 
 
 125 
 
126 
      var aliasNames = <?php echo json_encode($aliasNames); ?>;
 126 
      var aliasNames = <?php echo json_encode($aliasNames); ?>;
127 
      var pageConfigurations = <?php echo json_encode($pageConfiguration); ?>;
 127 
      var pageConfigurations = <?php echo json_encode($pageConfiguration); ?>;
128 
      var pageInstances = {};
 128 
      var pageInstances = {};
129 
      var serverTimeOffset = 0;
 129 
      var serverTimeOffset = 0;
130 
 
 130 
 
131 
      function getServerTimestamp()
 131 
      function getServerTimestamp()
132 
      {
 132 
      {
133 
        return ((new Date()).getTime()) - serverTimeOffset
 133 
        return ((new Date()).getTime()) - serverTimeOffset
134 
      }
 134 
      }
135 
 
 135 
 
136 
      $(document).ready(function(event)
 136 
      $(document).ready(function(event)
137 
      {
 137 
      {
138 
        document.location.hash = "";
 138 
        document.location.hash = "";
139 
 
 139 
 
140 
        sendCommand("(new Date()).getTime();", function(timestamp)
 140 
        sendCommand("(new Date()).getTime();", function(timestamp)
141 
        {
 141 
        {
142 
          serverTimeOffset = ((new Date()).getTime()) - parseInt(timestamp, 10);
 142 
          serverTimeOffset = ((new Date()).getTime()) - parseInt(timestamp, 10);
143 
        });
 143 
        });
144 
 
 144 
 
145 
        jQuery.each(pageConfigurations, function(n, configuration)
 145 
        jQuery.each(pageConfigurations, function(n, configuration)
146 
        {
 146 
        {
147 
          var pageName = configuration.page + "_" + n;
 147 
          var pageName = configuration.page + "_" + n;
148 
 
 148 
 
149 
          pageInstances[pageName] = configuration;
 149 
          pageInstances[pageName] = configuration;
150 
 
 150 
 
151 
          pageInstances[pageName].name = pageName;
 151 
          pageInstances[pageName].name = pageName;
152 
 
 152 
 
153 
          pageInstances[pageName].pageElement = $("#page-template").tmpl(pageInstances[pageName]).appendTo($("body")).page();
 153 
          pageInstances[pageName].pageElement = $("#page-template").tmpl(pageInstances[pageName]).appendTo($("body")).page();
154 
          pageInstances[pageName].pageContentElement = pageInstances[pageName].pageElement.find(":jqmData(role=content)");
 154 
          pageInstances[pageName].pageContentElement = pageInstances[pageName].pageElement.find(":jqmData(role=content)");
155 
 
 155 
 
156 
          pageInstances[pageName].pageElement.find(":jqmData(rel=back)").on("click", function(event)
 156 
          pageInstances[pageName].pageElement.find(":jqmData(rel=back)").on("click", function(event)
157 
          {
 157 
          {
158 
            $.mobile.changePage("#home", { transition: "slide", reverse: true });
 158 
            $.mobile.changePage("#home", { transition: "none", reverse: true });
159 
            event.preventDefault();
 159 
            event.preventDefault();
160 
          });
 160 
          });
161 
 
 161 
 
162 
          pageInstances[pageName].pageLinkElement = $("#pagelink-template").tmpl(pageInstances[pageName]).appendTo($("#home").find(":jqmData(role=content)")).trigger("create").on("click", function(event)
 162 
          pageInstances[pageName].pageLinkElement = $("#pagelink-template").tmpl(pageInstances[pageName]).appendTo($("#home").find(":jqmData(role=content)")).trigger("create").on("click", function(event)
163 
          {
 163 
          {
164 
            $.mobile.changePage("#" + pageInstances[pageName].pageElement.attr("id"), "slide");
 164 
            $.mobile.changePage("#" + pageInstances[pageName].pageElement.attr("id"), "none");
165 
            event.preventDefault();
 165 
            event.preventDefault();
166 
          });
 166 
          });
167 
 
 167 
 
168 
 
 168 
 
169 
          if (pages[configuration.page] && pages[configuration.page].init)
 169 
          if (pages[configuration.page] && pages[configuration.page].init)
170 
          {
 170 
          {
171 
            pages[configuration.page].init(pageInstances[pageName]);
 171 
            pages[configuration.page].init(pageInstances[pageName]);
172 
          }
 172 
          }
173 
        });
 173 
        });
174 
 
 174 
 
175 
        $(".ui-page").on("swipeleft", function()
 175 
        $(".ui-page").on("swipeleft", function()
176 
        {
 176 
        {
177 
          var nextpage = $(this).nextAll(":jqmData(role=page)");
 177 
          var nextpage = $(this).nextAll(":jqmData(role=page)");
178 
 
 178 
 
179 
          if (nextpage.length > 0)
 179 
          if (nextpage.length > 0)
180 
          {
 180 
          {
181 
            $.mobile.changePage("#" + nextpage[0].id, { transition: "slide", changeHash: true });
 181 
            $.mobile.changePage("#" + nextpage[0].id, { transition: "none", changeHash: true });
- 
 
 182 
          }
- 
 
 183 
          else
- 
 
 184 
          {
- 
 
 185 
            nextpage = $(":jqmData(role=page)");
- 
 
 186 
 
- 
 
 187 
            $.mobile.changePage("#" + nextpage[0].id, { transition: "none", changeHash: true });
182 
          }
 188 
          }
183 
        });
 189 
        });
184 
       
 190 
       
185 
        $(".ui-page").on("swiperight", function()
 191 
        $(".ui-page").on("swiperight", function()
186 
        {
 192 
        {
187 
          var prevpage = $(this).prevAll(":jqmData(role=page)");
 193 
          var prevpage = $(this).prevAll(":jqmData(role=page)");
188 
 
 194 
 
189 
          if (prevpage.length > 0)
 195 
          if (prevpage.length > 0)
190 
          {
 196 
          {
191 
            $.mobile.changePage("#" + prevpage[0].id, { transition: "slide", reverse: true, changeHash: true });
 197 
            $.mobile.changePage("#" + prevpage[0].id, { transition: "none", reverse: true, changeHash: true });
- 
 
 198 
          }
- 
 
 199 
          else
- 
 
 200 
          {
- 
 
 201 
            prevpage = $(":jqmData(role=page)");
- 
 
 202 
 
- 
 
 203 
            $.mobile.changePage("#" + prevpage[prevpage.length - 1].id, { transition: "none", reverse: true, changeHash: true });
192 
          }
 204 
          }
193 
        });
 205 
        });
194 
      });
 206 
      });
195 
 
 207 
 
196 
      var dialogCloseTimer = null;
 208 
      var dialogCloseTimer = null;
197 
      var dialogCloseCallback = null;
 209 
      var dialogCloseCallback = null;
198 
 
 210 
 
199 
      function openDialog(titleText, contentsHtml, autoCloseTimeout, closeCallback)
 211 
      function openDialog(titleText, contentsHtml, autoCloseTimeout, closeCallback)
200 
      {
 212 
      {
201 
        closeDialog();
 213 
        closeDialog();
202 
 
 214 
 
203 
        $("#dialog .dialog-title").text(titleText);
 215 
        $("#dialog .dialog-title").text(titleText);
204 
        $("#dialog .dialog-contents").html(contentsHtml);
 216 
        $("#dialog .dialog-contents").html(contentsHtml);
205 
        $("#dialog a").on("click", function(event)
 217 
        $("#dialog a").on("click", function(event)
206 
        {
 218 
        {
207 
          closeDialog();
 219 
          closeDialog();
208 
          event.preventDefault();
 220 
          event.preventDefault();
209 
          return false;
 221 
          return false;
210 
        });
 222 
        });
211 
     
 223 
     
212 
        dialogCloseCallback = closeCallback;
 224 
        dialogCloseCallback = closeCallback;
213 
 
 225 
 
214 
        $.mobile.changePage($("#dialog"), { role: "dialog"});
 226 
        $.mobile.changePage($("#dialog"), { role: "dialog"});
215 
 
 227 
 
216 
        $("#dialog").dialog({ close: function(event)
 228 
        $("#dialog").dialog({ close: function(event)
217 
        {
 229 
        {
218 
          var callback = dialogCloseCallback;
 230 
          var callback = dialogCloseCallback;
219 
 
 231 
 
220 
          closeDialog();
 232 
          closeDialog();
221 
 
 233 
 
222 
          if (callback)
 234 
          if (callback)
223 
          {
 235 
          {
224 
            callback();
 236 
            callback();
225 
          }
 237 
          }
226 
        }});
 238 
        }});
227 
 
 239 
 
228 
 
 240 
 
229 
        if (autoCloseTimeout)
 241 
        if (autoCloseTimeout)
230 
        {
 242 
        {
231 
          dialogCloseTimer = setTimeout(closeDialog, autoCloseTimeout);
 243 
          dialogCloseTimer = setTimeout(closeDialog, autoCloseTimeout);
232 
        }
 244 
        }
233 
      }
 245 
      }
234 
 
 246 
 
235 
      function closeDialog()
 247 
      function closeDialog()
236 
      {
 248 
      {
237 
        if (dialogCloseTimer)
 249 
        if (dialogCloseTimer)
238 
        {
 250 
        {
239 
          clearTimeout(dialogCloseTimer);
 251 
          clearTimeout(dialogCloseTimer);
240 
          dialogCloseTimer = null;
 252 
          dialogCloseTimer = null;
241 
        }
 253 
        }
242 
 
 254 
 
243 
        if ($("#dialog").is(":visible"))
 255 
        if ($("#dialog").is(":visible"))
244 
        {
 256 
        {
245 
          $("#dialog").dialog("close");
 257 
          $("#dialog").dialog("close");
246 
 
 258 
 
247 
          if (dialogCloseCallback)
 259 
          if (dialogCloseCallback)
248 
          {
 260 
          {
249 
            dialogCloseCallback();
 261 
            dialogCloseCallback();
250 
          }
 262 
          }
251 
        }
 263 
        }
252 
 
 264 
 
253 
        dialogCloseCallback = null;
 265 
        dialogCloseCallback = null;
254 
      }
 266 
      }
255 
 
 267 
 
256 
 
 268 
 
257 
    </script>
 269 
    </script>
258 
  </head>
 270 
  </head>
259 
 
 271 
 
260 
  <body>
 272 
  <body>
261 
    <div id="home" data-role="page" data-theme="a">
 273 
    <div id="home" data-role="page" data-theme="a">
262 
      <div data-role="header"><h1>Home Automation Control Center</h1></div>
 274 
      <div data-role="header"><h1>Home Automation Control Center</h1></div>
263 
      <div data-role="content"></div>
 275 
      <div data-role="content"></div>
264 
    </div>
 276 
    </div>
265 
 
 277 
 
266 
    <div data-role="dialog" id="dialog">
 278 
    <div data-role="dialog" id="dialog">
267 
      <div data-role="content">
 279 
      <div data-role="content">
268 
        <h3 class="dialog-title"></h3>
 280 
        <h3 class="dialog-title"></h3>
269 
        <p class="dialog-contents"></p>
 281 
        <p class="dialog-contents"></p>
270 
        <a href="#" data-role="button" data-theme="c">Close</a>
 282 
        <a href="#" data-role="button" data-theme="c">Close</a>
271 
      </div>
 283 
      </div>
272 
    </div>
 284 
    </div>
273 
 
 285 
 
274 
  </body>
 286 
  </body>
275 
</html>
 287 
</html>
276 
 
 288