Subversion Repositories HomeAutomation

Rev

Rev 2111 | Rev 2142 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | SVN | RSS feed

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