updated instructions and added videos

This commit is contained in:
Rick Companje 2017-04-13 12:08:08 +02:00
parent 1aeee5bdd2
commit acee284fb6
2 changed files with 79 additions and 32 deletions

View File

@ -1,6 +1,7 @@
body.ui-mobile-viewport {
margin: 0 auto;
max-width: 1024px;
/*font-family: 'Abel', sans-serif;*/
}
#logo {

View File

@ -3,25 +3,26 @@
<head>
<title>Doodle3D Connect</title>
<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">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="./img/apple-touch-icon-144x144-precomposed.png">
<link rel="shortcut" sizes="144x144" href="./img/apple-touch-icon-144x144-precomposed.png">
<link rel="icon" type="image/ico" href="./img/favicon.ico">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!-- <link rel="stylesheet" href="js/libs/jquery.mobile/jquery.mobile-1.4.2.min.css" /> -->
<link rel="stylesheet" href="css/doodle3d-server.min.css"/>
<link rel="icon" type="image/ico" href="./img/favicon.ico">
<!-- scripts -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<!-- <script src="jquery/jquery-1.11.0.min.js"></script>-->
<!-- <script src="jquery.mobile/jquery.mobile-1.4.2.min.js"></script>-->
<script src="js/doodle3d-server.min.js" type="text/javascript"></script>
<!-- stylesheets -->
<!-- <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet"> -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<link rel="stylesheet" href="css/doodle3d-server.min.css"/>
</head>
@ -29,16 +30,24 @@
<div data-role="page" id="boxes" data-title="Doodle3D Connect">
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
<p id="slogan">makes 3D printing very easy</p>
<div role="main" class="ui-content">
<h3>Let's connect to your Doodle3D WiFi-Box</h3>
<p>This webpage helps you to find your Doodle3D WiFi-Box on your local network.</p>
<p>1) If your WiFi-Box is already connected to your home network it should be listed below.</p>
<p>2) If not it might be running it's own WiFi network (for example Doodle3D-123456) you can now connect to by changing your WiFi-settings.</p>
</div>
<div data-role="header">
<h1>WiFi-Boxes</h1>
</div><!-- /header -->
<!-- <p>Please select your Doodle3D WiFi-Box to connect or press search to add your box to this list.</p> -->
</div>
<div role="main" class="ui-content">
<ul data-role="listview" id="boxeslist">
<li id="findItem"><a href="#find">Find...</a></li>
<li id="findItem"><a href="#find">Help me find my WiFi-Box...</a></li>
</ul>
</div><!-- /content -->
</div>
</div><!-- /page -->
@ -67,18 +76,40 @@
<h1>Find WiFi-Box</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<h3>Find your box's WiFi network</h3>
<p>The Doodle3D WiFi-Box you're looking for is probably running it's own WiFi network. Please open your network settings and connect to a network like <strong>Doodle3D-...</strong> and return to the <a href="#boxes">WiFi-boxes</a> page (<a href="#help_connect_ap">More info</a>).</p>
<h3>Connect to the same WiFi network</h3>
<p>Please make sure that you're connected to the same WiFi network the WiFi-Box is connected to.</p>
<h3>Can't find your WiFi-Box?</h3>
<p>Please make sure that:</p>
<ul>
<li>The box gets power (the big green light should be on).</li>
<li>The box has fully started (the big green light stopped blinking)</li>
</ul>
<p>You can always connect to it using an ethernet cable (<a href="#help_connect_cable">more info</a>).</p>
<p>If the problems remains, please E-mail us at <a href="mailto:help@doodle3d.com">help@doodle3d.com</a></p>
<h3>Connect to your WiFi-Box for the first time...</h3>
<p>This video shows you how to connect to your Doodle3D WiFi-Box step by step.</p>
<iframe width="500" height="281" src="https://www.youtube.com/embed/8p2QGWlhR4E" frameborder="0" allowfullscreen></iframe>
<h3>How does it work?</h3>
<p>The WiFi-Box can run in two different modes:<br>
<ol><li> It can connect to an existing WiFi network, that's called <u>Client mode</u>.</li>
<li>It can also create it's own network which is called <u>AccessPoint mode</u>.</li>
</ol>
A new WiFi-Box always starts in AccessPoint mode because it doesn't know your network yet, right?<br>
Also when the WiFi-Box can't find or can't connect to your home network it should fall back to AccessPoint mode.<br>
If the WiFi-Box is in AccessPoint mode you should be able to see it's WiFi network in your computer/tablet's WiFi-settings.</p>
<h3>How to let the WiFi-Box join your local network?</h3>
Once you are connected to the WiFi-Box in AccessPoint mode you can help your WiFi-Box join your local network as a 'Client'. This has two advantages:
<ol>
<li>The WiFi-Box can download updates and security updates from doodle3d.com</li>
<li>You don't have to switch between your home network and the AccessPoint all the time.</li>
</ol>
<p>This movie shows how to have the WiFi-Box join your home network and download an update.</p>
<iframe width="500" height="281" src="https://www.youtube.com/embed/dT6PmWDnUxM" frameborder="0" allowfullscreen></iframe>
<h3>What's the network cable for?</h3>
<p>If you really can't or don't want to connect to the WiFi-Box using WiFi you can use the network cable. Connect the WiFi-Box directly to your computer (not to your router) and go back to the connect.doodle3d.com page.</p>
<h3>Need more help?</h3>
<p>Please read our <a href="http://faq.doodle3d.com/">FAQ</a> for more frequently asked questions. <br>If you're really stuck feel free to contact us at <a href="mailto:help@doodle3d.com">help@doodle3d.com</a>. <br>You can also live <a href="javascript:talkus.open()">chat</a> with us during European office hours.</p>
<p><a href="#boxes">Go back to connect.doodle3d.com</a></p>
<!-- <p><br></p> -->
</div>
</div><!-- /content -->
</div><!-- /page -->
@ -232,11 +263,26 @@
</div><!-- /content -->
</div><!-- /page -->
<script>
$(function(){
$( "[data-role='header'], [data-role='footer']" ).toolbar();
});
</script>
<script>
$(function(){
$( "[data-role='header'], [data-role='footer']" ).toolbar();
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2176425-7', 'auto');
ga('send', 'pageview');
</script>
<script>
(function(t,a,l,k,u,s,e){if(!t[u]){t[u]=function(){(t[u].q=t[u].q||[]).push(arguments)},t[u].l=1*new Date();s=a.createElement(l),e=a.getElementsByTagName(l)[0];s.async=1;s.src=k;e.parentNode.insertBefore(s,e)}})(window,document,'script','//www.talkus.io/plugin.beta.js','talkus');
talkus('init', 'bCwR4NgCDFFcYtgg8');
</script>
</body>
</html>