vmario/doodle3d-connect
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-connect.git synced 2024-12-24 17:43:48 +01:00
Code Issues Releases Wiki Activity

Better styling and including box found through access point mode

Browse Source
This commit is contained in:
peteruithoven 2014-02-14 15:49:12 +01:00
parent d3c41091dd
commit 9ecee8b074
6 changed files with 200 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
css/bg.css
View File

@ -1,93 +1,80 @@
/* Portrait */
@media screen and (orientation:portrait) {
#landscape {
display: none;
}
#portrait {
display: block;
}
}
/* Landscape */
@media screen and (orientation:landscape) {
#landscape {
display: block;
}
#portrait {
display: none;
}
}
.uiButtonsContainer {
position: fixed;
top: 0px;
left: 0px;
width: 1024px;
min-height: 500px;
max-height: 768px;
position: absolute;
max-width: 1024px;
/*min-width: 800px;*/
width: 100%;
height: 100%;
/*max-height: 768px;*/
/*min-height: 300px;*/
top: 0; left: 0; right: 0; bottom: 0;
/*overflow: hidden;*/
margin: 0 auto;
outline: 2px solid #5e8c71;
box-shadow: 0 0 8px rgba(8, 8, 8, 0.25);
/* height: 768px;*/
}
.uiButtonsContainer:before {
content:' ';
display:block;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
border: 2px solid #333;
}
#d3dlogo {
position: absolute;
top: 15px;
left: 31%;
width: 399px;
top: 2.5%;
/*left: 31%;*/
width: 100%;
margin: 0 auto;
height: 139px;
background-image: url('../img/logo_full.png');
background: url('../img/logo_full.png') no-repeat center center;
cursor: pointer;
}
.bgContainer {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.bgTop, .bgMiddle, .bgBottom {
opacity: 1.0;
transition: opacity .35s linear;
position: absolute;
left: 0;
z-index: -5;
}
.bgTop {
position: absolute;
top: 0px;
left: 0px;
z-index: -5;
top: 0;
}
.bgMiddle {
display: block;
position: absolute;
top: 30%;
left: 0px;
z-index: -5;
top: 30%;
}
.bgBottom {
position: absolute;
bottom: 0px;
left: 0px;
z-index: -5;
bottom: 0;
}
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
@media screen and (max-height: 655px) {
.bgMiddle { opacity: 0; }
}
@media screen and (max-height: 675px) {
.bgMiddle {
display: none;
}
#d3dlogo {
width: 399px;
/*width: 399px;*/
height: 74px;
background-image: url('../img/logo_small.png');
margin-top: 9px;
top: 6%;
}
}
@media screen and (max-height: 560px) {
#d3dlogo {
width: 399px;
/*width: 399px;*/
height: 57px;
background-image: url('../img/logo_smaller_wide.png');
margin-top: 14px;
top: 6%;
}
}
@media screen and (max-height: 420px) {
#d3dlogo {
top: 3%;
}
}

28
css/main.css
View File

@ -1,7 +1,24 @@
#container {
position:absolute;
width: 100%;
max-width: 1024px;
/*max-height: 768px;*/
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
margin: 0 auto;
box-shadow: 0 0 0 2px #5e8c71, 0 0 8px 4px rgba(8, 8, 8, 0.25);
}
a {
color: #5491D2;
text-decoration: none;
}
#preloader {
position: absolute;
top: 50%;
@ -47,4 +64,13 @@ a {
display:none;
position: absolute;
bottom: 1em;
}
}
/*.vertImage {*/
/*margin: 0;*/
/*padding: 0;*/
/*border: 2px solid #f0f;*/
/*max-width: 100%;*/
/*height: auto;*/
/*width: auto; *//* for ie9 */
/*}*/

72
css/mobile.css Normal file
View File

@ -0,0 +1,72 @@
/* MOBILE */
@media only screen and (max-width: 480px),
only screen and (max-width: 720px) and (min-device-pixel-ratio : 1.5),
only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio : 1.5) {
body {
/*background-color: #f0f;*/
}
#d3dlogo {
/*width: 399px;*/
height: 57px;
background-image: url('../img/logo_smaller_wide.png');
top: 7px;
}
.popup {
/*background-color: rgba(255, 255, 255, 0.6);*/
background-color: rgba(245, 245, 245, 0.65);
position: absolute;
bottom: 0;
left: 0;
top: 75px;
width: 100%;
height: auto;
margin: 0;
/*-moz-box-shadow: 0 0 0 3px rgba(16, 16, 16, 1.0), 0 2px 6px 0 rgba(16, 16, 16, 0.65), 0 6px 6px -2px rgba(16, 16, 16, 0.2) inset;*/
/*-webkit-box-shadow: 0 0 0 3px rgba(16, 16, 16, 1.0), 0 2px 6px 0 rgba(16, 16, 16, 0.65), 0 6px 6px -2px rgba(16, 16, 16, 0.2) inset;*/
box-shadow: 0 0 0 2px rgba(16, 16, 16, 0.8), 0 2px 6px 0 rgba(16, 16, 16, 0.65), 0 6px 6px -2px rgba(16, 16, 16, 0.2) inset;
border: 0;
border-radius: 0;
/*-moz-border-radius: 15px;*/
/*-webkit-border-radius: 15px;*/
overflow-x: hidden;
overflow-y: scroll;
}
.bgContainer {
/*display: none;*/
}
#list {
padding: 0;
}
#list li {
list-style-type: none;
float: none;
}
#list a {
background-color: #fff;
margin: 0 0 1em 0;
padding: 2em 0 0 0;
width: 100%;
height: 3.0em;
border: 1px solid #333;
border-radius: 15px;
-moz-box-shadow: 0 2px 7px 0 rgba(16, 16, 16, 0.60);
-webkit-box-shadow: 0 2px 7px 0 rgba(16, 16, 16, 0.60);
box-shadow: 0 2px 7px 0 rgba(16, 16, 16, 0.60);
text-align: center;
vertical-align: middle;
cursor: pointer;
transition:background-color 0.1s, color 0.1s;
}
}

33
css/popups.css
View File

@ -2,10 +2,14 @@
background-color: rgba(255, 255, 255, 0.65);
z-index: 10;
position: absolute;
top: 0px;
left: 0px;
width: 1024px;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-width: 1024px;
height: 100%;
/*max-height: 768px;*/
}
.popup {
@ -13,22 +17,25 @@
z-index: 15;
position: absolute;
top: 50%;
bottom: 6%;
left: 50%;
width: 835px;
height: 500px;
margin: -250px 0 0 -417.5px;
width: 80%;
height: 70%;
margin: -35% 0 0 -40%;
-moz-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
-webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
/*-moz-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);*/
/*-webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);*/
box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
border: 2px solid #222;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
overflow: hidden;
/*-moz-border-radius: 15px;*/
/*-webkit-border-radius: 15px;*/
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.popup .content {
margin: 0 1em;
}
}

25
index.html
View File

@ -6,34 +6,40 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon-precomposed" href="img/icon.png"/>
<link rel="icon" type="image/ico" href="favicon.ico"/>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="./img/webpage_icons/apple-touch-icon-144x144-precomposed.png" />
<link rel="icon" type="image/ico" href="./img/favicon.ico"/>
<meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes">
<link href="css/normalize.css" rel="stylesheet" media="screen">
<link href="css/main.css" rel="stylesheet" media="screen">
<link href="css/bg.css" rel="stylesheet" media="screen">
<link href="css/popups.css" rel="stylesheet" media="screen">
<link href="css/mobile.css" rel="stylesheet" media="screen">
<script src="js/libs/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/libs/spin.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</head>
<body>
<div id="landscape">
<div class="uiButtonsContainer">
<img class="bgTop" src="img/bg_top.png" />
<div id="container">
<div class="bgContainer">
<img class="bgTop" src="img/bg_top.png" />
<img class="bgMiddle" src="img/bg_middle.png" />
<img class="bgBottom" src="img/bg_bottom.png" />
</div>
<div class="uiButtonsContainer">
<div id="d3dlogo" onclick="location.reload()"></div>
<div id="contentOverlay">
<div id="settings" class="popup">
<div class="content">
<p id="intro"></p>
<ul id="list"></ul>
<ul id="list" class="cf"></ul>
<small id="hint">
Can&#8217;t find your box? Make sure you&#8217;re on the same wifi network. <br/>
Can&#8217;t find your box? <br/>
Maybe the box isn&#8217;t connected to your network yet, try to connect to a Doodle3D-... WiFi network. <br/>
Otherwise, make sure you&#8217;re on the same WiFi network. <br/>
You can always connect your box to your computer using an ethernet cable.
</small>
<div id="preloader"></div>
@ -42,9 +48,6 @@
</div>
</div>
</div>
<div id="portrait">
<img class="vertImage" src="img/bg_vertical2.png"/>
</div>
</body>
</html>

28
js/main.js
View File

@ -6,7 +6,10 @@ var boxTimeoutTime = 500;
var numBoxesChecking = 0; // count how many boxes we are checking
var numBoxesFound = 0; // count how many boxes responded
var connectedBox = {localip:"192.168.5.1",wifiboxid:"Wired WiFi box"};
var connectedBox = {localip:"192.168.5.1",wifiboxid:"Wired WiFi-Box"};
var apBox = {localip:"draw.doodle3d.com",wifiboxid:"WiFi-Box"};
var connectAPI = "http://connect.doodle3d.com/api"
var boxAPI = "http://draw.doodle3d.com/d3dapi";
var $list;
var $intro;
@ -15,9 +18,9 @@ var $preloader;
var spinner;
$(function() {
//console.log("ready");
$intro = $("#intro");
// console.log("ready");
$intro = $("#intro");
$list = $("#list");
$hint = $("#hint");
$preloader = $("#preloader");
@ -44,13 +47,19 @@ $(function() {
spinner.spin($preloader[0]);
retrieveList();
})
// DEBUG
// numBoxesFound = 4;
// updateIntro();
});
function retrieveList() {
$preloader.show();
//spinner.spin($preloader[0]);
$.ajax({
url: "api/list.php",
timeout: 2000,
url: connectAPI+"/list.php",
dataType: 'json',
success: function(response){
//console.log("retrieveList response: ",response);
@ -61,15 +70,19 @@ function retrieveList() {
retrieveListDelay = setTimeout(retrieveList, retrieveListInterval);
}
}).fail(function() {
//console.log("retrieveList: failed");
console.log("retrieveList: failed");
updateList([apBox]); //if web is not accessible try to find the box as an accesspoint
clearTimeout(retrieveListDelay);
retrieveListDelay = setTimeout(retrieveList, retrieveListInterval); // retry after delay
});
}
function updateList(boxes) {
numBoxesChecking = 0;
numBoxesFound = 0;
if (boxes===undefined) boxes = [];
boxes.push(connectedBox);
// remove displayed, but unlisted boxes
@ -89,6 +102,7 @@ function updateList(boxes) {
//checkBox(connectedBox);
updateIntro();
}
function checkBox(box) {
numBoxesChecking++;
$.ajax({