Skip to content

Flexbox for a full screen remote and metadata for use as an android app #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
johnmccabe wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Flexbox for a full screen remote and metadata for use as an android app #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
56ffc00
use flexbox styling and enable full screen mobile web app
johnmccabe Jul 16, 2016
60c612d
add buttons 3 and 4 back
johnmccabe Jul 16, 2016
9c2ed05
delete button images
johnmccabe Jul 16, 2016
815769c
make app installable from chrome on android
johnmccabe Jul 16, 2016
a0271c4
override user agent margin
johnmccabe Jul 16, 2016
4dc79b6
set fake button border
johnmccabe Jul 16, 2016
757d696
switch to viewport sized typography
johnmccabe Jul 16, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 25 additions & 47 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,32 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pi-power - socket control</title>
<link href="public/pipower.css" rel="stylesheet" type="text/css">
<!-- Add Jquery -->
<script type="text/javascript" src="public/jquery.min.js"></script>
<script type="text/javascript" src="public/pipower.js"></script>
<meta charset="UTF-8">
<link rel="manifest" href="public/manifest.json">
<title>Pi-power - control</title>
<link href="public/pipower.css" rel="stylesheet" type="text/css">
<!-- Add Jquery -->
<script type="text/javascript" src="public/jquery.min.js"></script>
<script type="text/javascript" src="public/pipower.js"></script>
<!-- Add Google Font -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>

<h1>Pi power web control</h1>

<div id="centre">


<table cols="3" cellspacing="0">
<tr class="buttons">
<td class="buttonname" cellspacing="0">Socket 1</td>
<td class="onbutton" cellspacing="0"><img class="imgonbutton" id="sw_on_1" src="public/onbutton.png" alt="On"></td>
<td class="offbutton" cellspacing="0"><img class="imgoffbutton" id="sw_off_1" src="public/offbutton.png" alt="Off"></td>
</tr>
<tr class="buttons">
<td class="buttonname" cellspacing="0">Socket 2</td>
<td class="onbutton" cellspacing="0"><img class="imgonbutton" id="sw_on_2" src="public/onbutton.png" alt="On"></td>
<td class="offbutton" cellspacing="0"><img class="imgoffbutton" id="sw_off_2" src="public/offbutton.png" alt="Off"></td>
</tr>
<tr class="buttons">
<td class="buttonname" cellspacing="0">Socket 3</td>
<td class="onbutton" cellspacing="0"><img class="imgonbutton" id="sw_on_3" src="public/onbutton.png" alt="On"></td>
<td class="offbutton" cellspacing="0"><img class="imgoffbutton" id="sw_off_3" src="public/offbutton.png" alt="Off"></td>
</tr>
<tr class="buttons">
<td class="buttonname" cellspacing="0">Socket 4</td>
<td class="onbutton" cellspacing="0"><img class="imgonbutton" id="sw_on_4" src="public/onbutton.png" alt="On"></td>
<td class="offbutton" cellspacing="0"><img class="imgoffbutton" id="sw_off_4" src="public/offbutton.png" alt="Off"></td>
</tr>
<tr class="buttons">
<td class="buttonname" cellspacing="0">All sockets</td>
<td class="onbutton" cellspacing="0"><img class="imgonbutton" id="sw_on_all" src="public/onbutton.png" alt="On"></td>
<td class="offbutton" cellspacing="0"><img class="imgoffbutton" id="sw_off_all" src="public/offbutton.png" alt="Off"></td>
</tr>
</table>


<p>Cmd status : <span id="status">...</span></p>

</div>



<ul class="flex-container">
<li class="flex-item-header">
Socket Control
<span id="status">...</span>
</li>
<li id="sw_on_1" class="flex-item-on">One</li>
<li id="sw_off_1" class="flex-item-off">One</li>
<li id="sw_on_2" class="flex-item-on">Two</li>
<li id="sw_off_2" class="flex-item-off">Two</li>
<li id="sw_on_3" class="flex-item-on">Three</li>
<li id="sw_off_3" class="flex-item-off">Three</li>
<li id="sw_on_4" class="flex-item-on">Four</li>
<li id="sw_off_4" class="flex-item-off">Four</li>
<li id="sw_on_all" class="flex-item-on">All</li>
<li id="sw_off_all" class="flex-item-off">All</li>
</ul>
</body>
</html>
Binary file added public/icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions public/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"short_name": "pi-power",
"name": "Penguin Tutors Pi-power",
"icons": [
{
"src": "icon.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"orientation": "portrait"
}
Binary file removed public/offbutton.png
View file
Open in desktop
Binary file not shown.
Binary file removed public/onbutton.png
View file
Open in desktop
Binary file not shown.
88 changes: 79 additions & 9 deletions public/pipower.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,85 @@

html, body {
height: 100%;
margin: 0;
background-color: darkslategrey !important;
font-family: 'Open Sans', sans-serif;
}

.flex-container {
padding: 0;
margin: 0;
height: 100%;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
align-content: stretch;
align-items: stretch;
justify-content: space-around;
}

div#centre {
position:relative;
margin-left:auto;
margin-right:auto;
top: 20px;
width: 400px;
background-color: #CCCCCC;
.flex-item-on {
width: 50%;
box-sizing: border-box;
color: white;
font-size: 7vw;
font-weight: bold;
text-align: center;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
display: flex;
justify-content: center;
flex-direction: column;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
padding-left: 4px;
padding-right: 2px;
padding-bottom: 4px;
background-image: linear-gradient(mediumseagreen, mediumseagreen), linear-gradient(darkslategrey, darkslategrey);
background-clip: content-box, padding-box;
}

.imgonbutton, .imgoffbutton {
cursor: pointer;
.flex-item-off {
width: 50%;
box-sizing: border-box;
color: white;
font-size: 7vw;
font-weight: bold;
text-align: center;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
display: flex;
justify-content: center;
flex-direction: column;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
padding-left: 2px;
padding-right: 4px;
padding-bottom: 4px;
padding-top: 0px;
background-image: linear-gradient(tomato, tomato), linear-gradient(darkslategrey, darkslategrey);
background-clip: content-box, padding-box;
}
.flex-item-header {
background: darkslategrey;
width: 100%;
box-sizing: border-box;
color: white;
font-size: 7vw;
font-weight: bold;
text-align: center;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
display: flex;
justify-content: center;
flex-direction: column;
}