updated code for the tour of the Doodle3D app
This commit is contained in:
Adriaan Wormgoor
parent
05f2c58aa9
commit
341fb637b8
|
|
@ -51,7 +51,7 @@ function GrandTour(_name) {
|
|||
// 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);
|
||||
} else {
|
||||
$(this).joyride('set_li', false);
|
||||
}
|
||||
|
|
@ -60,18 +60,14 @@ function GrandTour(_name) {
|
|||
// bring up thermometer and progressbar to explain them
|
||||
thermometer.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) {
|
||||
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;
|
||||
if (dataset.action != undefined) {
|
||||
|
|
@ -82,8 +78,8 @@ function GrandTour(_name) {
|
|||
break;
|
||||
case "showMessage":
|
||||
console.log(" action: showMessage");
|
||||
message.set("Just a notification...", Message.NOTICE);
|
||||
message.show();
|
||||
message.set("This is a status message...", Message.NOTICE);
|
||||
// message.show();
|
||||
break;
|
||||
case "showProgressBar":
|
||||
console.log(" action: showProgressBar");
|
||||
|
|
@ -104,18 +100,18 @@ function GrandTour(_name) {
|
|||
console.log(" THERE *WAS* AN ACTION!");
|
||||
switch (dataset.action) {
|
||||
case "sayHello":
|
||||
console.log(" action: sayHello");
|
||||
// console.log(" action: sayHello");
|
||||
break;
|
||||
case "showMessage":
|
||||
console.log(" action: showMessage");
|
||||
// console.log(" action: showMessage");
|
||||
// message.hide();
|
||||
break;
|
||||
case "showProgressBar":
|
||||
console.log(" action: showProgressBar");
|
||||
// console.log(" action: showProgressBar");
|
||||
// progressbar.hide();
|
||||
break;
|
||||
case "showThermometer":
|
||||
console.log(" action: showThermometer");
|
||||
// console.log(" action: showThermometer");
|
||||
// thermometer.hide();
|
||||
break;
|
||||
}
|
||||
|
|
@ -361,24 +357,13 @@ function HelpTours() {
|
|||
this.tourEnded = function(e, 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');
|
||||
self.currActiveTour = undefined;
|
||||
self.tourActive = false;
|
||||
|
||||
thermometer.hide();
|
||||
progressbar.hide();
|
||||
message.hide();
|
||||
printer.checkStatus();
|
||||
}
|
||||
}
|
||||
|
|
@ -370,19 +370,19 @@ function setState(newState,newHasControl) {
|
|||
|
||||
/* settings button */
|
||||
switch(newState) {
|
||||
case Printer.IDLE_STATE:
|
||||
enableButton(btnSettings, openSettingsWindow);
|
||||
break;
|
||||
case Printer.WIFIBOX_DISCONNECTED_STATE: /* fall-through */
|
||||
case Printer.BUFFERING_STATE: /* fall-through */
|
||||
case Printer.PRINTING_STATE: /* fall-through */
|
||||
case Printer.STOPPING_STATE:
|
||||
disableButton(btnSettings);
|
||||
break;
|
||||
default:
|
||||
enableButton(btnSettings, openSettingsWindow);
|
||||
break;
|
||||
}
|
||||
case Printer.IDLE_STATE:
|
||||
enableButton(btnSettings, openSettingsWindow);
|
||||
break;
|
||||
case Printer.WIFIBOX_DISCONNECTED_STATE: /* fall-through */
|
||||
case Printer.BUFFERING_STATE: /* fall-through */
|
||||
case Printer.PRINTING_STATE: /* fall-through */
|
||||
case Printer.STOPPING_STATE:
|
||||
disableButton(btnSettings);
|
||||
break;
|
||||
default:
|
||||
enableButton(btnSettings, openSettingsWindow);
|
||||
break;
|
||||
}
|
||||
|
||||
if(newState == Printer.WIFIBOX_DISCONNECTED_STATE) {
|
||||
message.set("Lost connection to WiFi box",Message.ERROR);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
margin-left: -33%;
|
||||
width: 66%;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
// z-index: 5;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
border: 4px solid #000;
|
||||
border-radius: 15px;
|
||||
box-sizing: border-box;
|
||||
z-index: 15;
|
||||
// z-index: 15;
|
||||
}
|
||||
|
||||
#canvasContainers {
|
||||
|
|
|
|||
|
|
@ -12,28 +12,28 @@
|
|||
width: 460px;
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
&.d3dDoodleCanvasPanel {
|
||||
width: 215px;
|
||||
// padding: 15px;
|
||||
}
|
||||
|
||||
/*
|
||||
.my-tour-overlay {
|
||||
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;
|
||||
}
|
||||
*/
|
||||
&.temperatureGauge {
|
||||
width: 400px !important;
|
||||
}
|
||||
|
||||
div.temperature {
|
||||
float:left;
|
||||
margin-left: 15px;
|
||||
width: 60px;
|
||||
|
||||
&.blue {
|
||||
color: blue;
|
||||
}
|
||||
&.orange{
|
||||
color: orange;
|
||||
}
|
||||
&.red {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -31,19 +31,19 @@
|
|||
padding: 10px 10px 15px 15px;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media only screen and (max-width: 767px) {
|
||||
.joyride-tip-guide {
|
||||
width: 95% !important;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
border-radius: 0;
|
||||
left: 2.5% !important;
|
||||
}
|
||||
.joyride-tip-guide-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
///* Mobile */
|
||||
//@media only screen and (max-width: 767px) {
|
||||
// .joyride-tip-guide {
|
||||
// width: 95% !important;
|
||||
// -moz-border-radius: 0;
|
||||
// -webkit-border-radius: 0;
|
||||
// border-radius: 0;
|
||||
// left: 2.5% !important;
|
||||
// }
|
||||
// .joyride-tip-guide-wrapper {
|
||||
// width: 100%;
|
||||
// }
|
||||
//}
|
||||
|
||||
|
||||
/* 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 h5 { font-size: 16px; }
|
||||
.joyride-tip-guide h6 { font-size: 14px; }
|
||||
.joyride-tip-guide p {
|
||||
margin: 0 0 18px 0;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.joyride-tip-guide a {
|
||||
// color: rgb(255,255,255);
|
||||
color: @helpFullBlue;
|
||||
text-decoration: none;
|
||||
// border-bottom: dotted 1px rgba(255,255,255,0.6);
|
||||
border-bottom: dotted 1px lighten(@helpFullBlue, 20%);
|
||||
}
|
||||
.joyride-tip-guide a:hover {
|
||||
// color: rgba(255,255,255,0.8);
|
||||
color: lighten(@helpFullBlue, 20%);
|
||||
border-bottom: none;
|
||||
|
||||
|
||||
.joyride-tip-guide {
|
||||
p {
|
||||
// margin: 0 0 18px 0;
|
||||
margin: 5px 0 25px;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
a {
|
||||
// color: rgb(255,255,255);
|
||||
color: @helpFullBlue;
|
||||
text-decoration: none;
|
||||
// border-bottom: dotted 1px rgba(255,255,255,0.6);
|
||||
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 */
|
||||
.joyride-tip-guide .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;
|
||||
}
|
||||
//.joyride-tip-guide .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;
|
||||
//}
|
||||
|
||||
.joyride-next-tip: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%);
|
||||
}
|
||||
//.joyride-next-tip: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%);
|
||||
//}
|
||||
|
||||
.joyride-timer-indicator-wrap {
|
||||
width: 50px;
|
||||
|
|
@ -239,12 +280,17 @@
|
|||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
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 {
|
||||
color: rgba(0, 0, 0, 0.9) !important;
|
||||
// color: rgba(255,255,255,0.9) !important;
|
||||
}
|
||||
//.joyride-close-tip:hover {
|
||||
// color: rgba(0, 0, 0, 0.9) !important;
|
||||
//// color: rgba(255,255,255,0.9) !important;
|
||||
//}
|
||||
|
||||
.joyride-modal-bg {
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -1,68 +1,106 @@
|
|||
<!-- Tip Content -->
|
||||
<ol id="help_d3dIntro">
|
||||
<li data-button="OK" class="d3dInfoWelcomePanel">
|
||||
<h1>Welcome to Doodle3D</h1>
|
||||
<h1>Welcome to Doodle3D!</h1>
|
||||
<p></p>
|
||||
<p>It looks like it's your first time here. How about we give you a quick tour?</p>
|
||||
<p> </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
|
||||
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 data-class="leftpanel" class="custom" data-button="OK" data-options="tipLocation:right">
|
||||
<h2>leftpanel</h2>
|
||||
<p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
|
||||
<p><a href="#">linkme beautiful</a>.</p>
|
||||
<h2>Left panel</h2>
|
||||
<p>Let's first look at the left panel. It's mainly geared towards creating, saving and retrieving doodles.</p>
|
||||
</li>
|
||||
<li data-class="btnNew" class="custom" data-text="Next" data-options="tipLocation:right">
|
||||
<h2>New</h2>
|
||||
<p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</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>
|
||||
<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>
|
||||
</li>
|
||||
<li data-class="btnSave" data-button="Next" data-options="tipLocation:right">
|
||||
<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 data-class="btnOops" data-button="Next" data-options="tipLocation:right">
|
||||
<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 data-button="Next">
|
||||
<h2>Now for the right panel</h2>
|
||||
<p>It works as a modal too!</p>
|
||||
<h2>Manipulating your doodle</h2>
|
||||
<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 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>
|
||||
<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 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>
|
||||
<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 data-class="btnStop" data-button="Next" data-options="tipLocation:left">
|
||||
<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 data-id="progressbarCanvasContainer" data-button="Next" data-options="tipLocation:left" data-action="showProgressBar">
|
||||
<h2>progressguage</h2>
|
||||
<p>It works with classes, and only on the first visible element with that class.</p>
|
||||
<li data-id="progressbarCanvasContainer" data-button="Next" data-options="tipLocation:left">
|
||||
<h2>Progress bar</h2>
|
||||
<p>Shows the progress of the current printjob. This panel appears automatically when a print job is sent.</p>
|
||||
</li>
|
||||
<li data-id="thermometerContainer" data-button="Next" data-options="tipLocation:left" data-action="showThermometer">
|
||||
<h2>Thermometer</h2>
|
||||
<p>It works with classes, and only on the first visible element with that class.</p>
|
||||
<li data-id="thermometerContainer" class="temperatureGauge" data-button="Next" data-options="tipLocation:left">
|
||||
<h2>Temperature gauge</h2>
|
||||
<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 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>
|
||||
<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 data-id="message" data-button="OK" data-options="tipLocation:bottom">
|
||||
<h2>Status messages</h2>
|
||||
<p>Status messages can inform you about the connection between Doodle3D and your 3D printer</p>
|
||||
</li>
|
||||
<li data-button="Finish">
|
||||
<h2>That was the tour</h2>
|
||||
<p>You're now ready to start using Doodle3d!</p>
|
||||
<li data-button="Finish" class="d3dInfoWelcomePanel">
|
||||
<h2>That was the grand tour!</h2>
|
||||
<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>
|
||||
<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>
|
||||
<!--<li data-class="btnInfo" data-button="Got it" data-options="tipLocation:top">-->
|
||||
<!--<h2>Reminder</h2>-->
|
||||
|
|
@ -73,14 +111,16 @@
|
|||
<ol id="help_InfoReminder">
|
||||
<li data-class="btnInfo" data-button="Got it" data-options="tipLocation:top">
|
||||
<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>
|
||||
</ol>
|
||||
|
||||
<ol id="help_grandTourFinishedInfoReminder">
|
||||
<li data-class="btnInfo" data-button="Got it" data-options="tipLocation:top">
|
||||
<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>
|
||||
</ol>
|
||||
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@
|
|||
<img class="vertImage" src="img/bg_vertical.png"/>
|
||||
</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/jquery.scrollTo-min.js"></script>-->
|
||||
<!--<script src="js/libs/imagesloaded-pkgd.min.js"></script>-->
|
||||
|
|
|
|||
Loading…
Reference in New Issue