penguintutor · emgeebee · Aug 7, 2016 · Aug 7, 2016 · Aug 7, 2016
diff --git a/index.html b/index.html
diff --git a/public/android-icon-144x144.png b/public/android-icon-144x144.png
diff --git a/public/android-icon-192x192.png b/public/android-icon-192x192.png
diff --git a/public/android-icon-36x36.png b/public/android-icon-36x36.png
diff --git a/public/android-icon-48x48.png b/public/android-icon-48x48.png
diff --git a/public/android-icon-72x72.png b/public/android-icon-72x72.png
diff --git a/public/android-icon-96x96.png b/public/android-icon-96x96.png
diff --git a/public/apple-icon-114x114.png b/public/apple-icon-114x114.png
diff --git a/public/apple-icon-120x120.png b/public/apple-icon-120x120.png
diff --git a/public/apple-icon-144x144.png b/public/apple-icon-144x144.png
diff --git a/public/apple-icon-152x152.png b/public/apple-icon-152x152.png
diff --git a/public/apple-icon-180x180.png b/public/apple-icon-180x180.png
diff --git a/public/apple-icon-57x57.png b/public/apple-icon-57x57.png
diff --git a/public/apple-icon-60x60.png b/public/apple-icon-60x60.png
diff --git a/public/apple-icon-72x72.png b/public/apple-icon-72x72.png
diff --git a/public/apple-icon-76x76.png b/public/apple-icon-76x76.png
diff --git a/public/apple-icon-precomposed.png b/public/apple-icon-precomposed.png
diff --git a/public/apple-icon.png b/public/apple-icon.png
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
diff --git a/public/css/pipower.css b/public/css/pipower.css
@@ -0,0 +1,29 @@
+#centre {
+    position:relative;
+    margin: 20px auto;
+    width: 90vw;
+    padding: 20px;
+    border-radius: 5px;
+}
+
+.buttons {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    margin-top: 20px;
+    align-items: center;
+    background-color: aliceblue;
+    padding: 10px;
+    border-radius: 10px;
+    box-shadow: 2px 2px 1px grey;
+}
+
+button {
+    min-width: 100px;
+    cursor: pointer;
+    padding: 10px 20px;
+}
+
+.buttonname {
+    min-width: 100px;
+}
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon-96x96.png b/public/favicon-96x96.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Pi-power - socket control</title>
+<link href="css/pipower.css" rel="stylesheet" type="text/css">
+
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
+<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="manifest" href="/manifest.json">
+<meta name="msapplication-TileColor" content="#ffffff">
+<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+<meta name="theme-color" content="#ffffff">
+
+</head>
+<body>
+
+<h1>Pi power web control</h1>
+
+<div id="centre">
+
+    <div>
+        <div class="buttons">
+            <span class="buttonname">Socket 1</span>
+            <span class="onbutton" data-cmd='[["on", 1]]'><button>On</button></span>
+            <span class="offbutton" data-cmd='[["off", 1]]'><button>Off</button></span>
+        </div>
+        <div class="buttons">
+            <span class="buttonname">Socket 2</span>
+            <span class="onbutton" data-cmd='[["on", 2]]'><button>On</button></span>
+            <span class="offbutton" data-cmd='[["off", 2]]'><button>Off</button></span>
+        </div>
+        <div class="buttons">
+            <span class="buttonname">Socket 3</span>
+            <span class="onbutton" data-cmd='[["on", 3]]'><button>On</button></span>
+            <span class="offbutton" data-cmd='[["off", 3]]'><button>Off</button></span>
+        </div>
+        <div class="buttons">
+            <span class="buttonname">Socket 4</span>
+            <span class="onbutton" data-cmd='[["on", 4]]'><button>On</button></span>
+            <span class="offbutton" data-cmd='[["off", 4]]'><button>Off</button></span>
+        </div>
+        <div class="buttons">
+            <span class="buttonname">All sockets</span>
+            <span class="onbutton" data-cmd='[["on", 0]]'><button>On</button></span>
+            <span class="offbutton" data-cmd='[["off", 0]]'><button>Off</button></span>
+        </div>
+    </div>
+
+
+    <p>Cmd status : <span id="status">...</span></p>
+
+</div>
+
+
+<!-- Add Jquery -->
+<script type="text/javascript" src="js/jquery.min.js"></script>
+<script type="text/javascript" src="js/pipower.js"></script>
+
+</body>
+</html>
diff --git a/public/jquery.min.js → public/js/jquery.min.js b/public/jquery.min.js → public/js/jquery.min.js
diff --git a/public/js/pipower.js b/public/js/pipower.js
@@ -0,0 +1,18 @@
+$(document).ready(function() {
+    // define handlers
+    $('span[data-cmd]').click(function(){
+        var commands = $(this).data().cmd;
+        console.log(commands, typeof commands);
+        for (var i = 0; i < commands.length; i++) {
+            buttonClicked(commands[i][0], commands[i][1]);
+        }
+    });
+}); // end ready
+
+function buttonClicked (type, button) {
+    $.get ('/switch'+type, 'socket='+button, displayResponse);
+}
+
+function displayResponse (data) {
+    $('#status').html(data);
+}
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}
diff --git a/public/ms-icon-144x144.png b/public/ms-icon-144x144.png
diff --git a/public/ms-icon-150x150.png b/public/ms-icon-150x150.png
diff --git a/public/ms-icon-310x310.png b/public/ms-icon-310x310.png
diff --git a/public/ms-icon-70x70.png b/public/ms-icon-70x70.png
diff --git a/public/offbutton.png b/public/offbutton.png
diff --git a/public/onbutton.png b/public/onbutton.png
diff --git a/public/pipower.css b/public/pipower.css
diff --git a/public/pipower.js b/public/pipower.js
diff --git a/web-power.py b/web-power.py
@@ -20,6 +20,7 @@
 from gpiozero import Energenie
 import bottle
 from bottle import route, request, response, template, static_file
+import os
 
 sockets = [None]
 sockets.append(Energenie(1))
@@ -35,18 +36,11 @@
 
 # Folder where this is installed and the index.html file is located
 # The index.html file is exposed to the webserver as well as any files in a subdirectory called public (ie. /home/pi/pi-power/public) 
-DOCUMENT_ROOT = '/home/pi/pi-power'
+DOCUMENT_ROOT = os.path.dirname(os.path.realpath(__file__))
 
 # Create the bottle web server
 app = bottle.Bottle()
 
-
-# public files
-# *** WARNING ANYTHING STORED IN THE PUBLIC FOLDER WILL BE AVAILABLE TO DOWNLOAD BY ANYONE CONNECTED TO THE SAME NETWORK ***
-@app.route ('/public/<filename>')
-def server_public (filename):
-    return static_file (filename, root=DOCUMENT_ROOT+"/public")
-
 # Handle switch on request
 @app.route ('/switchon')
 def switchon():
@@ -63,8 +57,7 @@ def switchon():
         return 'Requested switch on ALL'
     else :
         return 'Invalid request'
-
-
+
 @app.route ('/switchoff')
 def switchoff():
     socket = int(request.query.socket)
@@ -80,11 +73,22 @@ def switchoff():
         return 'Requested switch off ALL'
     else:
         return 'Invalid request'
-
+
+# public files
+# *** WARNING ANYTHING STORED IN THE PUBLIC FOLDER WILL BE AVAILABLE TO DOWNLOAD BY ANYONE CONNECTED TO THE SAME NETWORK ***
+@app.route ('/<filename>')
+def server_public (filename):
+    return static_file (filename, root=DOCUMENT_ROOT+"/public")
+@app.route ('/css/<filename>')
+def server_public (filename):
+    return static_file (filename, root=DOCUMENT_ROOT+"/public/css")
+@app.route ('/js/<filename>')
+def server_public (filename):
+    return static_file (filename, root=DOCUMENT_ROOT+"/public/js")
 
 # Serve up the default index.html page
 @app.route ('/')
 def server_home ():
-    return static_file ('index.html', root=DOCUMENT_ROOT)
+    return static_file ('index.html', root=DOCUMENT_ROOT+"/public")
 
-app.run(host=HOST, port=PORT)
+bottle.run(app, host=HOST, port=PORT)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<?xml version="1.0" encoding="utf-8"?>
		<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>