vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-22 01:07:56 +01:00
Code Issues Releases Wiki Activity

updated code for the tour of the Doodle3D app

Browse Source
This commit is contained in:
Adriaan Wormgoor 2013-10-23 23:40:26 +02:00
parent 05f2c58aa9
commit 341fb637b8
8 changed files with 240 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
js_src/Help.js
View File

@ -51,7 +51,7 @@ function GrandTour(_name) {
// executing this 3 times because there doesn't seem to be a 'go to step X' method // executing this 3 times because there doesn't seem to be a 'go to step X' method
// $(this).joyride('set_li', false); // $(this).joyride('set_li', false);
$(this).joyride('set_li', false); $(this).joyride('set_li', false);
$(this).joyride('set_li', false); // $(this).joyride('set_li', false);
} else { } else {
$(this).joyride('set_li', false); $(this).joyride('set_li', false);
} }
@ -60,18 +60,14 @@ function GrandTour(_name) {
// bring up thermometer and progressbar to explain them // bring up thermometer and progressbar to explain them
thermometer.show(); thermometer.show();
progressbar.show(); progressbar.show();
message.hide();
// if ($.cookie("Doodle3DFirstTime") == 'ridden') {
// console.log("we've been here before...");
// $(this).joyride('set_li', false, 4);
// }
// if (index == 0) {
// console.log("...yeah");
// $(this).joyride('set_li', false, 1);
// }
}; };
this.preStepCallback = function(index, tip) { this.preStepCallback = function(index, tip) {
console.log("GrandTour >> f:preStepCallback() >> index: " + index); // console.log("GrandTour >> f:preStepCallback() >> index: " + index);
// console.log("GrandTour >> f:preStepCallback() >> tip: " , tip);
// console.log("GrandTour >> f:preStepCallback() >> $(this): " , $(this));
// console.log("GrandTour >> f:preStepCallback() >> tipsettings: " , $(this)[0].tipSettings);
var dataset = $(this)[0].$li[0].dataset; var dataset = $(this)[0].$li[0].dataset;
if (dataset.action != undefined) { if (dataset.action != undefined) {
@ -82,8 +78,8 @@ function GrandTour(_name) {
break; break;
case "showMessage": case "showMessage":
console.log(" action: showMessage"); console.log(" action: showMessage");
message.set("Just a notification...", Message.NOTICE); message.set("This is a status message...", Message.NOTICE);
message.show(); // message.show();
break; break;
case "showProgressBar": case "showProgressBar":
console.log(" action: showProgressBar"); console.log(" action: showProgressBar");
@ -104,18 +100,18 @@ function GrandTour(_name) {
console.log(" THERE *WAS* AN ACTION!"); console.log(" THERE *WAS* AN ACTION!");
switch (dataset.action) { switch (dataset.action) {
case "sayHello": case "sayHello":
console.log(" action: sayHello"); // console.log(" action: sayHello");
break; break;
case "showMessage": case "showMessage":
console.log(" action: showMessage"); // console.log(" action: showMessage");
// message.hide(); // message.hide();
break; break;
case "showProgressBar": case "showProgressBar":
console.log(" action: showProgressBar"); // console.log(" action: showProgressBar");
// progressbar.hide(); // progressbar.hide();
break; break;
case "showThermometer": case "showThermometer":
console.log(" action: showThermometer"); // console.log(" action: showThermometer");
// thermometer.hide(); // thermometer.hide();
break; break;
} }
@ -361,24 +357,13 @@ function HelpTours() {
this.tourEnded = function(e, n) { this.tourEnded = function(e, n) {
console.log("HelpTours >> f:tourEnded >> self.tourActive: " + self.tourActive + ", name: " + n); console.log("HelpTours >> f:tourEnded >> self.tourActive: " + self.tourActive + ", name: " + n);
// if (self.tourActive) {
// // console.log(" killing previous joyride... ");
// if (self.currActiveTour.active == true) {
// $(window).joyride('end');
// self.currActiveTour = undefined;
// }
// // console.log(" setting tourActive to false....");
// self.tourActive = false;
// // console.log(" scope.tourActive: " + scope.tourActive);
// }
// $(window).joyride('destroy');
$(window).joyride('destroy'); $(window).joyride('destroy');
self.currActiveTour = undefined; self.currActiveTour = undefined;
self.tourActive = false; self.tourActive = false;
thermometer.hide(); thermometer.hide();
progressbar.hide(); progressbar.hide();
message.hide();
printer.checkStatus(); printer.checkStatus();
} }
} }

26
js_src/buttonbehaviors.js
View File

@ -370,19 +370,19 @@ function setState(newState,newHasControl) {
/* settings button */ /* settings button */
switch(newState) { switch(newState) {
case Printer.IDLE_STATE: case Printer.IDLE_STATE:
enableButton(btnSettings, openSettingsWindow); enableButton(btnSettings, openSettingsWindow);
break; break;
case Printer.WIFIBOX_DISCONNECTED_STATE: /* fall-through */ case Printer.WIFIBOX_DISCONNECTED_STATE: /* fall-through */
case Printer.BUFFERING_STATE: /* fall-through */ case Printer.BUFFERING_STATE: /* fall-through */
case Printer.PRINTING_STATE: /* fall-through */ case Printer.PRINTING_STATE: /* fall-through */
case Printer.STOPPING_STATE: case Printer.STOPPING_STATE:
disableButton(btnSettings); disableButton(btnSettings);
break; break;
default: default:
enableButton(btnSettings, openSettingsWindow); enableButton(btnSettings, openSettingsWindow);
break; break;
} }
if(newState == Printer.WIFIBOX_DISCONNECTED_STATE) { if(newState == Printer.WIFIBOX_DISCONNECTED_STATE) {
message.set("Lost connection to WiFi box",Message.ERROR); message.set("Lost connection to WiFi box",Message.ERROR);

2
less/base_centerpanel.less
View File

@ -5,7 +5,7 @@
margin-left: -33%; margin-left: -33%;
width: 66%; width: 66%;
height: 100%; height: 100%;
z-index: 5; // z-index: 5;
} }

2
less/base_centerpanel_drawarea.less
View File

@ -10,7 +10,7 @@
border: 4px solid #000; border: 4px solid #000;
border-radius: 15px; border-radius: 15px;
box-sizing: border-box; box-sizing: border-box;
z-index: 15; // z-index: 15;
} }
#canvasContainers { #canvasContainers {

46
less/help.less
View File

@ -12,28 +12,28 @@
width: 460px; width: 460px;
padding: 25px; padding: 25px;
} }
} &.d3dDoodleCanvasPanel {
width: 215px;
// padding: 15px;
}
/* &.temperatureGauge {
.my-tour-overlay { width: 400px !important;
display: none; }
background: #666;
opacity: 0.6;
z-index: 9997;
min-height: 100%;
height: 100%;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
// outline: 4px solid #f80;
// box-shadow: 0 0 14px rgba( 255, 0, 255, 1.0 );
}
.my-tour-highlight {
background: #fff;
// position: relative;
border-radius: 4px;
// outline: 4px solid #08f;
// box-shadow: 0 0 14px rgba( 255, 0, 255, 1.0 );
z-index: 9998;
}
*/
div.temperature {
float:left;
margin-left: 15px;
width: 60px;
&.blue {
color: blue;
}
&.orange{
color: orange;
}
&.red {
color: red;
}
}
}

174
less/help_joyride-2.1.less
View File

@ -31,19 +31,19 @@
padding: 10px 10px 15px 15px; padding: 10px 10px 15px 15px;
} }
/* Mobile */ ///* Mobile */
@media only screen and (max-width: 767px) { //@media only screen and (max-width: 767px) {
.joyride-tip-guide { // .joyride-tip-guide {
width: 95% !important; // width: 95% !important;
-moz-border-radius: 0; // -moz-border-radius: 0;
-webkit-border-radius: 0; // -webkit-border-radius: 0;
border-radius: 0; // border-radius: 0;
left: 2.5% !important; // left: 2.5% !important;
} // }
.joyride-tip-guide-wrapper { // .joyride-tip-guide-wrapper {
width: 100%; // width: 100%;
} // }
} //}
/* Add a little css triangle pip, older browser just miss out on the fanciness of it */ /* Add a little css triangle pip, older browser just miss out on the fanciness of it */
@ -161,57 +161,98 @@
.joyride-tip-guide h4 { font-size: 18px; } .joyride-tip-guide h4 { font-size: 18px; }
.joyride-tip-guide h5 { font-size: 16px; } .joyride-tip-guide h5 { font-size: 16px; }
.joyride-tip-guide h6 { font-size: 14px; } .joyride-tip-guide h6 { font-size: 14px; }
.joyride-tip-guide p {
margin: 0 0 18px 0;
font-size: 14px; .joyride-tip-guide {
line-height: 18px; p {
} // margin: 0 0 18px 0;
.joyride-tip-guide a { margin: 5px 0 25px;
// color: rgb(255,255,255); font-size: 14px;
color: @helpFullBlue; line-height: 18px;
text-decoration: none; }
// border-bottom: dotted 1px rgba(255,255,255,0.6);
border-bottom: dotted 1px lighten(@helpFullBlue, 20%); a {
} // color: rgb(255,255,255);
.joyride-tip-guide a:hover { color: @helpFullBlue;
// color: rgba(255,255,255,0.8); text-decoration: none;
color: lighten(@helpFullBlue, 20%); // border-bottom: dotted 1px rgba(255,255,255,0.6);
border-bottom: none; border-bottom: dotted 1px lighten(@helpFullBlue, 20%);
&:hover {
// color: rgba(255,255,255,0.8);
color: lighten(@helpFullBlue, 20%);
border-bottom: none;
}
}
.joyride-next-tip {
width: auto;
padding: 6px 18px 4px;
font-size: 13px;
text-decoration: none;
color: rgb(255,255,255);
border: solid 1px rgb(0,60,180);
background: rgb(0,99,255);
// background: -moz-linear-gradient(top, rgb(0,99,255) 0%, rgb(0,85,214) 100%);
// background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,99,255)), color-stop(100%,rgb(0,85,214)));
// background: -webkit-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
// background: -o-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
// background: -ms-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0063ff', endColorstr='#0055d6',GradientType=0 );
background: linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
border-radius: 2px;
box-shadow: 0px 1px 0px rgba(255,255,255,0.3) inset;
&:hover {
color: rgb(255,255,255) !important;
border: solid 1px rgb(0,60,180) !important;
background: rgb(43,128,255);
// background: -moz-linear-gradient(top, rgb(43,128,255) 0%, rgb(29,102,211) 100%);
// background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(43,128,255)), color-stop(100%,rgb(29,102,211)));
// background: -webkit-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
// background: -o-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
// background: -ms-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b80ff', endColorstr='#1d66d3',GradientType=0 );
background: linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
}
}
} }
/* Button Style */ /* Button Style */
.joyride-tip-guide .joyride-next-tip { //.joyride-tip-guide .joyride-next-tip {
width: auto; // width: auto;
padding: 6px 18px 4px; // padding: 6px 18px 4px;
font-size: 13px; // font-size: 13px;
text-decoration: none; // text-decoration: none;
color: rgb(255,255,255); // color: rgb(255,255,255);
border: solid 1px rgb(0,60,180); // border: solid 1px rgb(0,60,180);
background: rgb(0,99,255); // background: rgb(0,99,255);
background: -moz-linear-gradient(top, rgb(0,99,255) 0%, rgb(0,85,214) 100%); // background: -moz-linear-gradient(top, rgb(0,99,255) 0%, rgb(0,85,214) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,99,255)), color-stop(100%,rgb(0,85,214))); // background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,99,255)), color-stop(100%,rgb(0,85,214)));
background: -webkit-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%); // background: -webkit-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
background: -o-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%); // background: -o-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
background: -ms-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%); // background: -ms-linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0063ff', endColorstr='#0055d6',GradientType=0 ); // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0063ff', endColorstr='#0055d6',GradientType=0 );
background: linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%); // background: linear-gradient(top, rgb(0,99,255) 0%,rgb(0,85,214) 100%);
text-shadow: 0 -1px 0 rgba(0,0,0,0.5); // text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
border-radius: 2px; // border-radius: 2px;
box-shadow: 0px 1px 0px rgba(255,255,255,0.3) inset; // box-shadow: 0px 1px 0px rgba(255,255,255,0.3) inset;
} //}
.joyride-next-tip:hover { //.joyride-next-tip:hover {
color: rgb(255,255,255) !important; // color: rgb(255,255,255) !important;
border: solid 1px rgb(0,60,180) !important; // border: solid 1px rgb(0,60,180) !important;
background: rgb(43,128,255); // background: rgb(43,128,255);
background: -moz-linear-gradient(top, rgb(43,128,255) 0%, rgb(29,102,211) 100%); // background: -moz-linear-gradient(top, rgb(43,128,255) 0%, rgb(29,102,211) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(43,128,255)), color-stop(100%,rgb(29,102,211))); // background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(43,128,255)), color-stop(100%,rgb(29,102,211)));
background: -webkit-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%); // background: -webkit-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
background: -o-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%); // background: -o-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
background: -ms-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%); // background: -ms-linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b80ff', endColorstr='#1d66d3',GradientType=0 ); // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b80ff', endColorstr='#1d66d3',GradientType=0 );
background: linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%); // background: linear-gradient(top, rgb(43,128,255) 0%,rgb(29,102,211) 100%);
} //}
.joyride-timer-indicator-wrap { .joyride-timer-indicator-wrap {
width: 50px; width: 50px;
@ -239,12 +280,17 @@
font-size: 10px; font-size: 10px;
font-weight: bold; font-weight: bold;
border-bottom: none !important; border-bottom: none !important;
&:hover {
color: rgba(0, 0, 0, 0.9) !important;
// color: rgba(255,255,255,0.9) !important;
}
} }
.joyride-close-tip:hover { //.joyride-close-tip:hover {
color: rgba(0, 0, 0, 0.9) !important; // color: rgba(0, 0, 0, 0.9) !important;
// color: rgba(255,255,255,0.9) !important; //// color: rgba(255,255,255,0.9) !important;
} //}
.joyride-modal-bg { .joyride-modal-bg {
position: fixed; position: fixed;

116
www/helpcontent.html
View File

@ -1,68 +1,106 @@
<!-- Tip Content --> <!-- Tip Content -->
<ol id="help_d3dIntro"> <ol id="help_d3dIntro">
<li data-button="OK" class="d3dInfoWelcomePanel"> <li data-button="OK" class="d3dInfoWelcomePanel">
<h1>Welcome to Doodle3D</h1> <h1>Welcome to Doodle3D!</h1>
<p></p> <p></p>
<p>It looks like it's your first time here. How about we give you a quick tour?</p> <p>It looks like it's your first time here. Why not take the time to let us quickly introduce you to the app? It only takes a minute and
<p> </p> it will help getting you acquainted with the interface. Just follow the steps and if you want to stop simply click the x
in the top-right corner, or press escape.</p>
<p>For more in-depth help you can visit <a href="http://www.doodle3d.com/help" target="_blank">doodle3d.com/help</a>.</p>
</li> </li>
<li data-class="leftpanel" class="custom" data-button="OK" data-options="tipLocation:right"> <li data-class="leftpanel" class="custom" data-button="OK" data-options="tipLocation:right">
<h2>leftpanel</h2> <h2>Left panel</h2>
<p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p> <p>Let's first look at the left panel. It's mainly geared towards creating, saving and retrieving doodles.</p>
<p><a href="#">linkme beautiful</a>.</p>
</li> </li>
<li data-class="btnNew" class="custom" data-text="Next" data-options="tipLocation:right"> <li data-class="btnNew" class="custom" data-text="Next" data-options="tipLocation:right">
<h2>New</h2> <h2>New</h2>
<p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p> <p>This button creates a new drawing. Pressing the button will clear the current screen and offers you a clean slate to doodle on.</p>
<p><a href="#">linkme beautiful</a>.</p>
</li>
<li data-class="btnsPrevNext" data-button="Next" data-options="tipLocation:right" data-action="sayHello">
<h2>previous and next</h2>
<p>Get the details right by styling Joyride with a custom stylesheet!</p>
</li> </li>
<li data-class="btnSave" data-button="Next" data-options="tipLocation:right"> <li data-class="btnSave" data-button="Next" data-options="tipLocation:right">
<h2>Save</h2> <h2>Save</h2>
<p>Get the details right by styling Joyride with a custom stylesheet!</p> <p>Saves your doodle to the local Doodle3D Wi-Fi box.</p>
</li>
<li data-class="btnsPrevNext" data-button="Next" data-options="tipLocation:right;tipAdjustmentY:-25" data-action="sayHello">
<h2>View saved doodles</h2>
<p>Use the buttons '<' and '>' to flip through all the saved doodles on your Wi-Fi box.</p>
</li> </li>
<li data-class="btnOops" data-button="Next" data-options="tipLocation:right"> <li data-class="btnOops" data-button="Next" data-options="tipLocation:right">
<h2>Oops</h2> <h2>Oops</h2>
<p>It works right aligned.</p> <p>The oops button discards your last steps in drawing your doodle. You can actually keep pressing the button to return to the first step if you want.</p>
</li>
<!--<li data-button="Next">-->
<!--<h2>doodle area</h2>-->
<!--<p>Some info on the doodle area</p>-->
<!--</li>-->
<li data-id="mycanvas" class="d3dDoodleCanvasPanel" data-button="Next" data-options="tipLocation:right;tipAdjustmentX:0">
<h2>Doodle area</h2>
<p>This is the drawing canvas. Unleash your inner artist!</p>
</li>
<li data-id="preview" data-button="Next" data-options="tipLocation:left">
<h2>Preview</h2>
<p>The preview field shows a preview of how your doodle will look in real life.</p>
</li> </li>
<li data-button="Next"> <li data-button="Next">
<h2>Now for the right panel</h2> <h2>Manipulating your doodle</h2>
<p>It works as a modal too!</p> <p>In the bottom-right corner of the doodle area are buttons to influence your doodle's visual appearance. Find out how they work!</p>
</li> </li>
<li data-class="rightpanel" data-button="Next" data-options="tipLocation:left"> <li data-id="btnsUpDown" data-button="Next" data-options="tipLocation:top">
<h2>Stretch up/down</h2>
<p>Using these buttons you can stretch your doodle vertically. This enables you to determine what height the doodle gets when printed.</p>
</li>
<li data-id="btnsTurnLeftRight" data-button="Next" data-options="tipLocation:top">
<h2>Rotate left/right</h2>
<p>These buttons enable you to rotate your doodle counterclockwise or clockwise.</p>
</li>
<li data-id="verticalShapes" data-button="Next" data-options="tipLocation:left">
<h2>vertical outlines</h2>
<p>select vertical outlines</p>
</li>
<!--<li data-button="Next">-->
<!--<h2>Now for the right panel</h2>-->
<!--<p>It works as a modal too!</p>-->
<!--</li>-->
<li data-class="rightpanel" data-button="Next" data-options="tipLocation:left;tipAdjustmentY:40">
<h2>Right Panel</h2> <h2>Right Panel</h2>
<p>It works with classes, and only on the first visible element with that class.</p> <p>The right panel is geared towards printing, feedback of printer status and controlling your Doodle3D settings.</p>
</li> </li>
<li data-class="btnPrint" data-button="Next" data-options="tipLocation:left"> <li data-class="btnPrint" data-button="Next" data-options="tipLocation:left;tipAdjustmentY:40">
<h2>Print</h2> <h2>Print</h2>
<p>It works with classes, and only on the first visible element with that class.</p> <p>Pressing the print button will print your doodle on the connected 3D printer. Make sure the design is exactly what you want it to be, the printer is connected and turned on, the startup temperature of your printer is reached and the right filament is installed.</p>
</li> </li>
<li data-class="btnStop" data-button="Next" data-options="tipLocation:left"> <li data-class="btnStop" data-button="Next" data-options="tipLocation:left">
<h2>Stop</h2> <h2>Stop</h2>
<p>It works with classes, and only on the first visible element with that class.</p> <p>If the print is in progress and you want it to stop printing, press the Stop button on the right hand side of the screen. This will make the printer stop printing the doodle. It can take up to a few seconds for the printer to react.</p>
</li> </li>
<li data-id="progressbarCanvasContainer" data-button="Next" data-options="tipLocation:left" data-action="showProgressBar"> <li data-id="progressbarCanvasContainer" data-button="Next" data-options="tipLocation:left">
<h2>progressguage</h2> <h2>Progress bar</h2>
<p>It works with classes, and only on the first visible element with that class.</p> <p>Shows the progress of the current printjob. This panel appears automatically when a print job is sent.</p>
</li> </li>
<li data-id="thermometerContainer" data-button="Next" data-options="tipLocation:left" data-action="showThermometer"> <li data-id="thermometerContainer" class="temperatureGauge" data-button="Next" data-options="tipLocation:left">
<h2>Thermometer</h2> <h2>Temperature gauge</h2>
<p>It works with classes, and only on the first visible element with that class.</p> <p>
The temperature gauge displays the printer's temperature. It indicates the current temperature and tells you when your printer is ready to print. If your Wi-Fi box is not connected to a printer (or it isn't detecting one) this gauge will disappear.
<br/>
The gauge shows three steps in the process:
<div class="temperature blue">blue</div><div>: Temperature is too low</div>
<div class="temperature orange">orange</div><div>: Temperature is low but rising</div>
<div class="temperature red">red</div><div>: Temperature is OK</div>
</p>
</li> </li>
<li data-button="Show me" data-action="showMessage"> <li data-class="btnSettings" data-button="OK" data-options="tipLocation:top;tipAdjustmentX:-15">
<h2>Settings</h2>
<p>All the technical nitty-gritty regarding the settings of your Wi-Fi box and your 3D printer.</p>
</li>
<li data-id="message" data-button="OK" data-options="tipLocation:bottom" data-action="showMessage">
<h2>Status messages</h2> <h2>Status messages</h2>
<p>Status messages can inform you about the connection between Doodle3D and your 3D printer</p> <p>This message panel keeps you up to date on the status of your Doodle3D Wi-Fi box and the connected 3d printer.
If something's wrong, this message panel will keep you informed.
</p>
</li> </li>
<li data-id="message" data-button="OK" data-options="tipLocation:bottom"> <li data-button="Finish" class="d3dInfoWelcomePanel">
<h2>Status messages</h2> <h2>That was the grand tour!</h2>
<p>Status messages can inform you about the connection between Doodle3D and your 3D printer</p> <p>You're now ready to start using Doodle3D. Enjoy doodling away and if you need some help just click on the ( i ) button in the right panel. Enjoy Doodle3D!</p>
</li> <p>For more in-depth support you can always visit <a href="http://www.doodle3d.com/help" target="_blank">doodle3d.com/help</a>.</p>
<li data-button="Finish">
<h2>That was the tour</h2>
<p>You're now ready to start using Doodle3d!</p>
</li> </li>
<!--<li data-class="btnInfo" data-button="Got it" data-options="tipLocation:top">--> <!--<li data-class="btnInfo" data-button="Got it" data-options="tipLocation:top">-->
<!--<h2>Reminder</h2>--> <!--<h2>Reminder</h2>-->
@ -73,14 +111,16 @@
<ol id="help_InfoReminder"> <ol id="help_InfoReminder">
<li data-class="btnInfo" data-button="Got it" data-options="tipLocation:top"> <li data-class="btnInfo" data-button="Got it" data-options="tipLocation:top">
<h2>Reminder</h2> <h2>Reminder</h2>
<p>You can always find this tour in the info window.</p> <p>You can always access the general tour of Doodle3D in the info window.</p>
<p>For more in-depth help you can always visit <a href="http://www.doodle3d.com/help" target="_blank">doodle3d.com/help</a>.</p>
</li> </li>
</ol> </ol>
<ol id="help_grandTourFinishedInfoReminder"> <ol id="help_grandTourFinishedInfoReminder">
<li data-class="btnInfo" data-button="Got it" data-options="tipLocation:top"> <li data-class="btnInfo" data-button="Got it" data-options="tipLocation:top">
<h2>Reminder</h2> <h2>Reminder</h2>
<p>You can always find this tour in the info window.</p> <p>You can always access the general tour of Doodle3D in the info window.</p>
<p>For more in-depth help you can always visit <a href="http://www.doodle3d.com/help" target="_blank">doodle3d.com/help</a>.</p>
</li> </li>
</ol> </ol>

2
www/index.html
View File

@ -123,7 +123,7 @@
<img class="vertImage" src="img/bg_vertical.png"/> <img class="vertImage" src="img/bg_vertical.png"/>
</div> </div>
<div id="helpContainer"></div> <div id="helpContainer"></div>
<script src="js/libs/jquery-1.9.1.min.js"></script> <script src="js/libs/jquery-1-9-1.min.js"></script>
<script src="js/libs/jquery-cookie.min.js"></script> <script src="js/libs/jquery-cookie.min.js"></script>
<!--<script src="js/jquery.scrollTo-min.js"></script>--> <!--<script src="js/jquery.scrollTo-min.js"></script>-->
<!--<script src="js/libs/imagesloaded-pkgd.min.js"></script>--> <!--<script src="js/libs/imagesloaded-pkgd.min.js"></script>-->