mirror of
https://github.com/Doodle3D/doodle3d-connect.git
synced 2024-12-25 18:13:48 +01:00
197 lines
9.8 KiB
HTML
197 lines
9.8 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<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="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="js/libs/jquery.mobile/jquery.mobile-1.4.2.min.css" /> -->
|
|
<link rel="stylesheet" href="css/doodle3d-server.min.css"/>
|
|
|
|
<!-- <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.js" type="text/javascript"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div data-role="page" id="boxes">
|
|
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
|
|
<p id="slogan">makes 3D printing very easy</p>
|
|
<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 role="main" class="ui-content">
|
|
<ul data-role="listview" id="boxeslist">
|
|
<li id="findItem"><a href="#find">Find...</a></li>
|
|
</ul>
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
|
|
<div data-role="page" id="box">
|
|
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
|
|
<div data-role="header">
|
|
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
|
|
<h1></h1>
|
|
</div><!-- /header -->
|
|
<div role="main" class="ui-content">
|
|
<p class="intro"></p>
|
|
<ul data-role="listview">
|
|
<li id="drawItem"><a href="#draw">Draw</a></li>
|
|
<li id="updateItem"><a href="#update">Update</a></li>
|
|
<li id="joinNetworkItem"><a href="#join_network">Join network</a></li>
|
|
</ul>
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
|
|
<div data-role="page" id="find">
|
|
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
|
|
<div data-role="header">
|
|
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
|
|
<h1>Find WiFi-Box</h1>
|
|
</div><!-- /header -->
|
|
<div role="main" class="ui-content">
|
|
<h3>Find 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> (<a href="#help_connect_ap">More info</a>).</p>
|
|
<h3>Connect to 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 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>
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
|
|
<div data-role="page" id="help_connect_ap">
|
|
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
|
|
<div data-role="header">
|
|
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
|
|
<h1>Connecting</h1>
|
|
</div><!-- /header -->
|
|
<div role="main" class="ui-content">
|
|
<p>If you're using the WiFi-Box for the first time it creates its own WiFi network. This means its in Access point mode, this is usefull to use the WiFi-Box standalone where internet isn't available. <br/>
|
|
To access it you need to connect to its WiFi network. By default its name is "Doodle3D-" followed by the last 6 characters of the MAC code that is printed on the side of the WiFi-Box. How you can switch to this network depends on the device you are using.</p>
|
|
<h3>Smartphone / tablet</h3>
|
|
<p>Smartphones or tablets usually have a settings section. There you should be able to find WiFi settings where you can switch between different WiFi networks. There should be a WiFi-spot called "Doodle3D-" followed by the last 6 characters of the MAC code that is printed on the side of the WiFi-Box. Connect to this WiFi-spot and return to the <a href="#boxes">boxes page</a>.</p>
|
|
<h3>Windows computer</h3>
|
|
<p>Windows computers usually have a small icon in the right lower corner of the screen which displays if you are currently connected to the internet (and if your connection is wireless or not). If you click on this icon a list will display with the network you are currently using and the networks that your computer is able to connect to. There should be a WiFi-spot called "Doodle3D-" followed by the last 6 characters of the MAC code that is printed on the side of the WiFi-Box. Connect to this WiFi-spot and return to the <a href="#boxes">boxes page</a>.</p>
|
|
<h3>OS X computer</h3>
|
|
<p>For most MAC computers there is a small WiFi icon in the upper right corner of their screen. If WiFi is turned on, you can click on the icon and a list with possible networks would appear. There should be a WiFi network called "Doodle3D-" followed by the last 6 characters of the MAC code that is printed on the side of the WiFi-Box. Connect to this WiFi-spot and return to the <a href="#boxes">boxes page</a>.</p>
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
|
|
<div data-role="page" id="help_connect_cable">
|
|
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
|
|
<div data-role="header">
|
|
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
|
|
<h1>Cable connect</h1>
|
|
</div><!-- /header -->
|
|
<div role="main" class="ui-content">
|
|
<p>If your computer has an Ethernet port you are able to connect to the WiFi-Box through a Ethernet cable. Plug one end of the cable in the WiFi-Box and the other in your computer, then return to the <a href="#boxes">boxes page</a>.</p>
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
|
|
<div data-role="page" id="join_network">
|
|
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
|
|
<div data-role="header">
|
|
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
|
|
<h1>Join network</h1>
|
|
</div><!-- /header -->
|
|
<div role="main" class="ui-content">
|
|
<!-- <p>Select your own network from the following list:</p>
|
|
<br/> -->
|
|
<ul data-role="listview"
|
|
data-connecting-target="#connecting_to_network"
|
|
data-secured-target="#join_secured_network">
|
|
<li data-icon="edit" id="joinOther"><a href="#join_other_network">Other...</a></li>
|
|
</ul>
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
|
|
<div data-role="page" id="join_secured_network">
|
|
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
|
|
<div data-role="header">
|
|
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
|
|
<h1>Connect</h1>
|
|
</div><!-- /header -->
|
|
<div role="main" class="ui-content">
|
|
<h3>Join a secured network</h3>
|
|
<form data-ajax="false" data-target="#connecting_to_network">
|
|
<input type="password" name="password" placeholder="Password" data-clear-btn="true" data-typetoggle='#showPassword' autocomplete="off">
|
|
<input id="showPassword" type="checkbox" value="showPassword">
|
|
<label for="showPassword" class="inline">show password</label>
|
|
<input type=submit value="Connect">
|
|
</form>
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
|
|
<div data-role="page" id="join_other_network">
|
|
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
|
|
<div data-role="header">
|
|
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
|
|
<h1>Connect</h1>
|
|
</div><!-- /header -->
|
|
<div role="main" class="ui-content">
|
|
<h3>Join a hidden network</h3>
|
|
<input type="text" name="textinput-s" id="ssid" placeholder="Network name" value="" data-clear-btn="true">
|
|
<input type="password" name="textinput-s" id="textinput-s" placeholder="Password" value="" data-clear-btn="true">
|
|
<button class="ui-shadow ui-btn ui-corner-all">Connect</button>
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
|
|
<div data-role="page" id="connecting_to_network">
|
|
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
|
|
<div data-role="header">
|
|
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
|
|
<h1>Connecting...</h1>
|
|
</div><!-- /header -->
|
|
<div role="main" class="ui-content">
|
|
<img src="img/Connect to home.png">
|
|
<h3 id="status"></h3>
|
|
<p id="action"></p>
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
|
|
<div data-role="page" id="update">
|
|
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
|
|
<div data-role="header">
|
|
<a href="../toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
|
|
<h1>Update</h1>
|
|
</div><!-- /header -->
|
|
<div role="main" class="ui-content">
|
|
</div><!-- /content -->
|
|
</div><!-- /page -->
|
|
|
|
|
|
<script>
|
|
$(function(){
|
|
$( "[data-role='header'], [data-role='footer']" ).toolbar();
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |