Subversion Repositories HomeAutomation

Rev

Rev 2060 | Go to most recent revision | Blame | Last modification | View Log | SVN | RSS feed

  1. <?php
  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>
  15.  
  16.     <style>
  17.     <?php
  18.       foreach ($pages as $page)
  19.       {
  20.         include("pages/" . $page . "/style.css");
  21.       }
  22.     ?>
  23.     </style>
  24.  
  25.     <?php
  26.       foreach ($pages as $page)
  27.       {
  28.         include("pages/" . $page . "/template.html");
  29.       }
  30.     ?>
  31.  
  32.     <script id="page-template" type="text/x-jquery-tmpl" data-enhance="false">
  33.       <div id="page-${name}" data-role="page" data-add-back-btn="true" data-theme="a">
  34.         <div data-role="header"><h1>Home Automation Control Center - ${title}</h1></div>
  35.         <div data-role="content"></div>
  36.       </div>
  37.     </script>
  38.  
  39.     <script id="pagelink-template" type="text/x-jquery-tmpl" data-enhance="false">
  40.       <span>
  41.         <a href="#pagelink?page=${name}" data-role="button">${title}</a>
  42.       </span>
  43.     </script>
  44.  
  45.     <script>
  46.       $.mobile.ignoreContentEnabled = true;
  47.  
  48.       function sendCommand(command, callback)
  49.       {
  50.         jQuery.getJSON("backend.php?ajax", { command: command }, callback);
  51.       }
  52.     </script>
  53.  
  54.     <script>
  55.       var pages = {};
  56.  
  57.     <?php
  58.       foreach ($pages as $page)
  59.       {
  60.         include("pages/" . $page . "/script.js");
  61.       }
  62.     ?>
  63.     </script>
  64.  
  65.     <script>
  66.  
  67.       var pageConfigurations = <?php echo json_encode($pageConfiguration); ?>;
  68.       var pageInstances = {};
  69.  
  70.       $(document).ready(function(event)
  71.       {
  72.         jQuery.each(pageConfigurations, function(n, configuration)
  73.         {
  74.           var pageName = configuration.page + "_" + n;
  75.  
  76.           pageInstances[pageName] = configuration;
  77.  
  78.           pageInstances[pageName].name = pageName;
  79.  
  80.           pageInstances[pageName].pageLinkElement = $("#pagelink-template").tmpl(pageInstances[pageName]).appendTo($("#home").find(":jqmData(role=content)")).trigger("create");
  81.           pageInstances[pageName].pageElement = $("#page-template").tmpl(pageInstances[pageName]).appendTo($("body")).page();
  82.           pageInstances[pageName].pageContentElement = pageInstances[pageName].pageElement.find(":jqmData(role=content)");
  83.  
  84.           if (pages[configuration.page] && pages[configuration.page].init)
  85.           {
  86.             pages[configuration.page].init(pageInstances[pageName]);
  87.           }
  88.         });
  89.       });
  90.  
  91.       $(document).bind("pagebeforechange", function(e, data)
  92.       {
  93.         if (typeof data.toPage === "string")
  94.         {
  95.           var u = $.mobile.path.parseUrl(data.toPage);
  96.           var re = /^#pagelink/;
  97.  
  98.           if (u.hash.search(re) !== -1)
  99.           {
  100.             var pageName = u.hash.replace(/.*page=/, "");
  101.             var page = $("#page-" + pageName);
  102.  
  103.             if (page)
  104.             {
  105.               data.options.dataUrl = u.href;
  106.  
  107.               $.mobile.changePage(page, data.options);
  108.             }
  109.  
  110.             e.preventDefault();
  111.           }
  112.         }
  113.       });
  114.  
  115.     </script>
  116.   </head>
  117.  
  118.   <body>
  119.     <div id="home" data-role="page" data-theme="a">
  120.       <div data-role="header"><h1>Home Automation Control Center</h1></div>
  121.       <div data-role="content"></div>
  122.     </div>
  123.   </body>
  124. </html>
  125.