300 lines
15 KiB
HTML
300 lines
15 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="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"/>
|
||
|
||
<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>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<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 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-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<span class="ui-li-count"></span></a></li>
|
||
<li id="settingsItem"><a href="#settings">Settings</a></li>
|
||
<li id="joinNetworkItem"><a href="#join_network">Join network</a></li>
|
||
<li><a href="#yourapp">Your app here?</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-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 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>
|
||
</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-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-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-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-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" autofocus required="required" autocapitalize="off" autocorrect="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-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-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-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">
|
||
<h3 id="status"></h3>
|
||
<form data-ajax="false" data-target="#updating">
|
||
<fieldset class="" data-role="collapsible">
|
||
<h3>Options</h3>
|
||
<input id="noRetainConfiguration" type="checkbox" name="no_retain" value="noRetainConfiguration" />
|
||
<label for="noRetainConfiguration">Remove sketches and settings<small class="warning">You're personal sketches and settings will be removed when you update, this will mean you’ll need to reconnect your WiFi-Box to your WiFi network. </small></label>
|
||
<input id="includeBetas" type="checkbox" name="doodle3d.update.includeBetas" value="includeBetas" />
|
||
<label for="includeBetas">Include beta releases <!--(<a href="#beta_info">more info</a>)-->
|
||
<small class="warning">You'll get the latest features that are still under development. <br/>
|
||
This allows you give us earlier feedback. The more people that test these versions the more stable the regular version will be. Only use this when you're prepared to deal with some issues.
|
||
</small>
|
||
</label>
|
||
</fieldset>
|
||
<input type=submit value="Update">
|
||
</form>
|
||
<small id="info"></small>
|
||
</div><!-- /content -->
|
||
</div><!-- /page -->
|
||
|
||
<div data-role="page" id="settings">
|
||
<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-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
|
||
<h1>Settings</h1>
|
||
|
||
</div><!-- /header -->
|
||
<div role="main" class="ui-content">
|
||
<!-- <p class="intro"></p>-->
|
||
<ul data-role="listview">
|
||
<li id="networkSettingsItem"><a href="#networksettings">Network</a></li>
|
||
<li id="printerSettingsItem"><a href="#printersettings">3D-Printer</a></li>
|
||
<li id="appSettingsItem"><a href="#applicationsettings">Applications</a></li>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div data-role="page" id="networksettings">
|
||
<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-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
|
||
<h1>Network Settings</h1>
|
||
</div><!-- /header -->
|
||
<div role="main" class="ui-content">
|
||
<p class="intro">Your WiFi-Box is currently connected to ....<br>You can connect to another network or use the Doodle3D WiFi-Box offline running it's own WiFi hotspot.</p>
|
||
<ul data-role="listview">
|
||
<li><a href="#joinAnotherNetwork">Join another network</a></li>
|
||
<li><a href="#createHotspot">Create hotspot</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div data-role="page" id="createHotspot">
|
||
<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-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
|
||
<h1>Create WiFi hotspot</h1>
|
||
</div><!-- /header -->
|
||
<div role="main" class="ui-content">
|
||
<p class="intro">Your WiFi-Box is about to create it's own WiFi Hotspot. It will disconnect from the internet in this mode.</p>
|
||
<form data-ajax="false" data-target="#connecting_to_network">
|
||
<input type="text" name="txtHotspotSSID" placeholder="Doodle3D-AB1234" value="Doodle3D-AB1234" data-clear-btn="true" autocomplete="off" autofocus required="required" autocapitalize="off" autocorrect="off">
|
||
<input type="text" name="txtHotspotSSID" placeholder="Password" value="" data-clear-btn="true" autocomplete="off" autofocus autocapitalize="off" autocorrect="off">
|
||
|
||
<!--
|
||
<input type="password" name="password" placeholder="Password" data-clear-btn="true" data-typetoggle='#showPassword' autocomplete="off" autofocus required="required" autocapitalize="off" autocorrect="off">
|
||
<input id="showPassword" type="checkbox" value="showPassword">
|
||
<label for="showPassword" class="inline">show password</label>
|
||
-->
|
||
<input type=submit value="Create WiFi hotspot" onclick="alert('not implemented yet')">
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div data-role="page" id="updating">
|
||
<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-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
|
||
<h1>Updating...</h1>
|
||
</div><!-- /header -->
|
||
<div role="main" class="ui-content">
|
||
<h3 id="status"></h3>
|
||
<p id=description></p>
|
||
</div><!-- /content -->
|
||
</div><!-- /page -->
|
||
|
||
|
||
<div data-role="page" id="yourapp">
|
||
<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-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
|
||
<h1>Your app here?</h1>
|
||
</div><!-- /header -->
|
||
<div role="main" class="ui-content">
|
||
<p>Did you create a (Web) App that uses the <a href="http://www.doodle3d.com/api" target="_blank">Doodle3D API</a>? Let us know and we'll add it to the box page.
|
||
</div><!-- /content -->
|
||
</div><!-- /page -->
|
||
|
||
<script>
|
||
$(function(){
|
||
$( "[data-role='header'], [data-role='footer']" ).toolbar();
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |