Subversion Repositories HomeAutomation

Rev

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

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