mirror of
https://github.com/Doodle3D/doodle3d-connect.git
synced 2024-12-26 10:33:48 +01:00
386 lines
18 KiB
HTML
386 lines
18 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">
|
||
|
||
<!-- scripts -->
|
||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
|
||
<!-- <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> -->
|
||
<!-- <script src="http://code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.js"></script> -->
|
||
|
||
<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="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="http://code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.css" /> -->
|
||
<link rel="stylesheet" href="css/doodle3d-server.min.css"/>
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div data-role="page" id="boxes" data-title="Doodle3D Connect">
|
||
<a href="#boxes" id="logo"><img src="img/logo_full.png"></a>
|
||
|
||
<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 its own WiFi network (for example Doodle3D-123456). You can connect to it by changing your WiFi-settings.</p>
|
||
</div>
|
||
|
||
<div data-role="header">
|
||
<h1>WiFi-Boxes</h1>
|
||
</div>
|
||
|
||
<div role="main" class="ui-content">
|
||
<ul data-role="listview" id="boxeslist">
|
||
<li id="findItem"><a href="#find">Help me find my WiFi-Box...</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
</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="transformItem"><a href="http://transform.doodle3d.com">Doodle3D Transform</a></li> -->
|
||
<li id="settingsItem" data-icon="gear"><a href="#settings">Settings</a></li>
|
||
<li id="updateItem"><a href="#update">Firmware Update<span class="ui-li-count"></span></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>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 -->
|
||
|
||
|
||
<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="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 -->
|
||
|
||
<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 id="divSettings" role="main" class="ui-content">
|
||
<p class="intro">Use this page to select which 3D-printer is connected to your Doodle3D WiFi-Box. You can change settings per printer. Your settings are saved automatically.</p>
|
||
|
||
<label for="name">3D-printer model:</label>
|
||
<select id="lstPrinters"></select>
|
||
|
||
<div data-role="collapsible">
|
||
|
||
<h3>Printer settings</h3>
|
||
|
||
<div data-role="fieldcontain">
|
||
<!-- <label for="name"></label>
|
||
<label>
|
||
<input type="checkbox" name="checkbox-0 ">Enable heated bed
|
||
</label> -->
|
||
<label for="chkBed">Heated bed:</label>
|
||
<input type="checkbox" data-role="flipswitch" name="chkBed" id="chkBed">
|
||
</div>
|
||
|
||
<div id="grpBedTemp" data-role="fieldcontain">
|
||
<label for="bedTemperature">Bed temperature (°C):</label>
|
||
<input type="range" name="bedTemperature" id="bedTemperature" value="70" min="20" max="120" data-highlight="true" />
|
||
</div>
|
||
|
||
<div id="grpDimensions" data-role="fieldcontain">
|
||
<label for="name">Dimensions XYZ (mm):</label>
|
||
<div class="ui-grid-b">
|
||
<div class="ui-block-a"><input placeholder="x" name="dimensionsX" id="dimensionsX" type="number" data-mini="true"/></div>
|
||
<div class="ui-block-b"><input placeholder="y" name="dimensionsY" id="dimensionsY" type="number" data-mini="true"/></div>
|
||
<div class="ui-block-c"><input placeholder="z" name="dimensionsZ" id="dimensionsZ" type="number" data-mini="true"/></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div data-role="collapsible">
|
||
<h3>GCODE settings</h3>
|
||
<div data-role="fieldcontain">
|
||
<label for="startgcode">Start gcode:</label>
|
||
<textarea name="startgcode" id="startgcode"></textarea>
|
||
</div>
|
||
|
||
<div data-role="fieldcontain">
|
||
<label for="endgcode">End gcode:</label>
|
||
<textarea name="endgcode" id="endgcode"></textarea>
|
||
</div>
|
||
|
||
<div data-role="collapsible" data-mini="true">
|
||
<h3>Help</h3>
|
||
<small>
|
||
The following texts are replaced:
|
||
<dl>
|
||
<dt>{printingTemp}</dt><dd>Printing temperature</dd>
|
||
<dt>{printingBedTemp}</dt><dd>Printing bed temperature</dd>
|
||
<dt>{preheatTemp}</dt><dd>Preheat temperature</dd>
|
||
<dt>{preheatBedTemp}</dt><dd>Preheat bed temperature</dd>
|
||
<dt>{printerType}</dt><dd>Printer type</dd>
|
||
<dt>{if heatedBed}</dt><dd>Enable line if printer has heated bed</dd>
|
||
</dl>
|
||
</small>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div data-role="collapsible">
|
||
<h3>Material settings</h3>
|
||
|
||
<div data-role="fieldcontain">
|
||
<label for="name">Filament thickness (mm):</label>
|
||
<input type="number" id="filamentThickness" name="filamentThickness" data-mini="true" step=".01" min="1.75" max="3.3"/>
|
||
</div>
|
||
|
||
<div data-role="fieldcontain">
|
||
<label for="nozzleTemperature">Nozzle temperature (°C):</label>
|
||
<input type="range" name="nozzleTemperature" id="nozzleTemperature" value="200" min="20" max="260" data-highlight="true" />
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<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> |