Subversion Repositories HomeAutomation

Rev

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

Rev 2104 Rev 2105
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);
- 
 
 81 
          }).error(function()
- 
 
 82 
          {
- 
 
 83 
            handleCommandResponse(false, {}, callback);
- 
 
 84 
          });
- 
 
 85 
        }
- 
 
 86 
      }
- 
 
 87 
 
- 
 
 88 
      function handleCommandResponse(success, jsonData, callback)
- 
 
 89 
      {
80 
            commandActive = false;
 90 
        commandActive = false;
81 
 
 91 
 
82 
            if (commandQueue.length > 0)
 92 
        if (commandQueue.length > 0)
83 
            {
 93 
        {
84 
              var commandItem = commandQueue.shift();
 94 
          var commandItem = commandQueue.shift();
85 
 
 95 
 
86 
              sendCommand(commandItem.command, commandItem.callback);
 96 
          sendCommand(commandItem.command, commandItem.callback);
87 
            }
 97 
        }
88 
 
 98 
 
- 
 
 99 
        if (success)
- 
 
 100 
        {
- 
 
 101 
          if (callback)
- 
 
 102 
          {
89 
            callback(jsonData);
 103 
            callback(jsonData);
90 
          });
 104 
          }
- 
 
 105 
        }
- 
 
 106 
        else
- 
 
 107 
        {
- 
 
 108 
          console.log("command failed!");
91 
        }
 109 
        }
92 
      }
 110 
      }
93 
    </script>
 111 
    </script>
94 
 
 112 
 
95 
    <script>
 113 
    <script>
96 
      var pages = {};
 114 
      var pages = {};
97 
 
 115 
 
98 
    <?php
 116 
    <?php
99 
      foreach ($pages as $page)
 117 
      foreach ($pages as $page)
100 
      {
 118 
      {
101 
        include("pages/" . $page . "/script.js");
 119 
        include("pages/" . $page . "/script.js");
102 
      }
 120 
      }
103 
    ?>
 121 
    ?>
104 
    </script>
 122 
    </script>
105 
 
 123 
 
106 
    <script>
 124 
    <script>
107 
 
 125 
 
108 
      var aliasNames = <?php echo json_encode($aliasNames); ?>;
 126 
      var aliasNames = <?php echo json_encode($aliasNames); ?>;
109 
      var pageConfigurations = <?php echo json_encode($pageConfiguration); ?>;
 127 
      var pageConfigurations = <?php echo json_encode($pageConfiguration); ?>;
110 
      var pageInstances = {};
 128 
      var pageInstances = {};
111 
      var serverTimeOffset = 0;
 129 
      var serverTimeOffset = 0;
112 
 
 130 
 
113 
      function getServerTimestamp()
 131 
      function getServerTimestamp()
114 
      {
 132 
      {
115 
        return ((new Date()).getTime()) - serverTimeOffset
 133 
        return ((new Date()).getTime()) - serverTimeOffset
116 
      }
 134 
      }
117 
 
 135 
 
118 
      $(document).ready(function(event)
 136 
      $(document).ready(function(event)
119 
      {
 137 
      {
120 
        document.location.hash = "";
 138 
        document.location.hash = "";
121 
 
 139 
 
122 
        sendCommand("timestampRaw", function(jsonData)
 140 
        sendCommand("timestampRaw", function(jsonData)
123 
        {
 141 
        {
124 
          serverTimeOffset = ((new Date()).getTime()) - jsonData.timestamp;
 142 
          serverTimeOffset = ((new Date()).getTime()) - jsonData.timestamp;
125 
        });
 143 
        });
126 
 
 144 
 
127 
        jQuery.each(pageConfigurations, function(n, configuration)
 145 
        jQuery.each(pageConfigurations, function(n, configuration)
128 
        {
 146 
        {
129 
          var pageName = configuration.page + "_" + n;
 147 
          var pageName = configuration.page + "_" + n;
130 
 
 148 
 
131 
          pageInstances[pageName] = configuration;
 149 
          pageInstances[pageName] = configuration;
132 
 
 150 
 
133 
          pageInstances[pageName].name = pageName;
 151 
          pageInstances[pageName].name = pageName;
134 
 
 152 
 
135 
          pageInstances[pageName].pageElement = $("#page-template").tmpl(pageInstances[pageName]).appendTo($("body")).page();
 153 
          pageInstances[pageName].pageElement = $("#page-template").tmpl(pageInstances[pageName]).appendTo($("body")).page();
136 
          pageInstances[pageName].pageContentElement = pageInstances[pageName].pageElement.find(":jqmData(role=content)");
 154 
          pageInstances[pageName].pageContentElement = pageInstances[pageName].pageElement.find(":jqmData(role=content)");
137 
 
 155 
 
138 
          pageInstances[pageName].pageElement.find(":jqmData(rel=back)").on("click", function(event)
 156 
          pageInstances[pageName].pageElement.find(":jqmData(rel=back)").on("click", function(event)
139 
          {
 157 
          {
140 
            $.mobile.changePage("#home", { transition: "slide", reverse: true });
 158 
            $.mobile.changePage("#home", { transition: "slide", reverse: true });
141 
            event.preventDefault();
 159 
            event.preventDefault();
142 
          });
 160 
          });
143 
 
 161 
 
144 
          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)
145 
          {
 163 
          {
146 
            $.mobile.changePage("#" + pageInstances[pageName].pageElement.attr("id"), "slide");
 164 
            $.mobile.changePage("#" + pageInstances[pageName].pageElement.attr("id"), "slide");
147 
            event.preventDefault();
 165 
            event.preventDefault();
148 
          });
 166 
          });
149 
 
 167 
 
150 
 
 168 
 
151 
          if (pages[configuration.page] && pages[configuration.page].init)
 169 
          if (pages[configuration.page] && pages[configuration.page].init)
152 
          {
 170 
          {
153 
            pages[configuration.page].init(pageInstances[pageName]);
 171 
            pages[configuration.page].init(pageInstances[pageName]);
154 
          }
 172 
          }
155 
        });
 173 
        });
156 
 
 174 
 
157 
        $(".ui-page").on("swipeleft", function()
 175 
        $(".ui-page").on("swipeleft", function()
158 
        {
 176 
        {
159 
          var nextpage = $(this).nextAll(":jqmData(role=page)");
 177 
          var nextpage = $(this).nextAll(":jqmData(role=page)");
160 
 
 178 
 
161 
          if (nextpage.length > 0)
 179 
          if (nextpage.length > 0)
162 
          {
 180 
          {
163 
            $.mobile.changePage("#" + nextpage[0].id, { transition: "slide", changeHash: true });
 181 
            $.mobile.changePage("#" + nextpage[0].id, { transition: "slide", changeHash: true });
164 
          }
 182 
          }
165 
        });
 183 
        });
166 
       
 184 
       
167 
        $(".ui-page").on("swiperight", function()
 185 
        $(".ui-page").on("swiperight", function()
168 
        {
 186 
        {
169 
          var prevpage = $(this).prevAll(":jqmData(role=page)");
 187 
          var prevpage = $(this).prevAll(":jqmData(role=page)");
170 
 
 188 
 
171 
          if (prevpage.length > 0)
 189 
          if (prevpage.length > 0)
172 
          {
 190 
          {
173 
            $.mobile.changePage("#" + prevpage[0].id, { transition: "slide", reverse: true, changeHash: true });
 191 
            $.mobile.changePage("#" + prevpage[0].id, { transition: "slide", reverse: true, changeHash: true });
174 
          }
 192 
          }
175 
        });
 193 
        });
176 
      });
 194 
      });
177 
 
 195 
 
178 
      var dialogCloseTimer = null;
 196 
      var dialogCloseTimer = null;
179 
      var dialogCloseCallback = null;
 197 
      var dialogCloseCallback = null;
180 
 
 198 
 
181 
      function openDialog(titleText, contentsHtml, autoCloseTimeout, closeCallback)
 199 
      function openDialog(titleText, contentsHtml, autoCloseTimeout, closeCallback)
182 
      {
 200 
      {
183 
        closeDialog();
 201 
        closeDialog();
184 
 
 202 
 
185 
        $("#dialog .dialog-title").text(titleText);
 203 
        $("#dialog .dialog-title").text(titleText);
186 
        $("#dialog .dialog-contents").html(contentsHtml);
 204 
        $("#dialog .dialog-contents").html(contentsHtml);
187 
        $("#dialog a").on("click", function(event)
 205 
        $("#dialog a").on("click", function(event)
188 
        {
 206 
        {
189 
          closeDialog();
 207 
          closeDialog();
190 
          event.preventDefault();
 208 
          event.preventDefault();
191 
          return false;
 209 
          return false;
192 
        });
 210 
        });
193 
     
 211 
     
194 
        dialogCloseCallback = closeCallback;
 212 
        dialogCloseCallback = closeCallback;
195 
 
 213 
 
196 
        $.mobile.changePage($("#dialog"), { role: "dialog"});
 214 
        $.mobile.changePage($("#dialog"), { role: "dialog"});
197 
 
 215 
 
198 
        $("#dialog").dialog({ close: function(event)
 216 
        $("#dialog").dialog({ close: function(event)
199 
        {
 217 
        {
200 
          var callback = dialogCloseCallback;
 218 
          var callback = dialogCloseCallback;
201 
 
 219 
 
202 
          closeDialog();
 220 
          closeDialog();
203 
 
 221 
 
204 
          if (callback)
 222 
          if (callback)
205 
          {
 223 
          {
206 
            callback();
 224 
            callback();
207 
          }
 225 
          }
208 
        }});
 226 
        }});
209 
 
 227 
 
210 
 
 228 
 
211 
        if (autoCloseTimeout)
 229 
        if (autoCloseTimeout)
212 
        {
 230 
        {
213 
          dialogCloseTimer = setTimeout(closeDialog, autoCloseTimeout);
 231 
          dialogCloseTimer = setTimeout(closeDialog, autoCloseTimeout);
214 
        }
 232 
        }
215 
      }
 233 
      }
216 
 
 234 
 
217 
      function closeDialog()
 235 
      function closeDialog()
218 
      {
 236 
      {
219 
        if (dialogCloseTimer)
 237 
        if (dialogCloseTimer)
220 
        {
 238 
        {
221 
          clearTimeout(dialogCloseTimer);
 239 
          clearTimeout(dialogCloseTimer);
222 
          dialogCloseTimer = null;
 240 
          dialogCloseTimer = null;
223 
        }
 241 
        }
224 
 
 242 
 
225 
        if ($("#dialog").is(":visible"))
 243 
        if ($("#dialog").is(":visible"))
226 
        {
 244 
        {
227 
          $("#dialog").dialog("close");
 245 
          $("#dialog").dialog("close");
228 
 
 246 
 
229 
          if (dialogCloseCallback)
 247 
          if (dialogCloseCallback)
230 
          {
 248 
          {
231 
            dialogCloseCallback();
 249 
            dialogCloseCallback();
232 
          }
 250 
          }
233 
        }
 251 
        }
234 
 
 252 
 
235 
        dialogCloseCallback = null;
 253 
        dialogCloseCallback = null;
236 
      }
 254 
      }
237 
 
 255 
 
238 
 
 256 
 
239 
    </script>
 257 
    </script>
240 
  </head>
 258 
  </head>
241 
 
 259 
 
242 
  <body>
 260 
  <body>
243 
    <div id="home" data-role="page" data-theme="a">
 261 
    <div id="home" data-role="page" data-theme="a">
244 
      <div data-role="header"><h1>Home Automation Control Center</h1></div>
 262 
      <div data-role="header"><h1>Home Automation Control Center</h1></div>
245 
      <div data-role="content"></div>
 263 
      <div data-role="content"></div>
246 
    </div>
 264 
    </div>
247 
 
 265 
 
248 
    <div data-role="dialog" id="dialog">
 266 
    <div data-role="dialog" id="dialog">
249 
      <div data-role="content">
 267 
      <div data-role="content">
250 
        <h3 class="dialog-title"></h3>
 268 
        <h3 class="dialog-title"></h3>
251 
        <p class="dialog-contents"></p>
 269 
        <p class="dialog-contents"></p>
252 
        <a href="#" data-role="button" data-theme="c">Close</a>
 270 
        <a href="#" data-role="button" data-theme="c">Close</a>
253 
      </div>
 271 
      </div>
254 
    </div>
 272 
    </div>
255 
 
 273 
 
256 
  </body>
 274 
  </body>
257 
</html>
 275 
</html>
258 
 
 276