mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-11-22 09:17:56 +01:00
Merge branch 'develop'
This commit is contained in:
peteruithoven
commit
f2a3772b75
59
Gruntfile.js
59
Gruntfile.js
@ -16,28 +16,35 @@ module.exports = function(grunt) {
|
|||||||
},
|
},
|
||||||
js: {
|
js: {
|
||||||
src: [
|
src: [
|
||||||
'js_src/Shape.js',
|
'js/Events.js',
|
||||||
'js_src/Svg.js',
|
'js/Class.js',
|
||||||
'js_src/Keyboard.js',
|
'js/Button.js',
|
||||||
'js_src/SettingsWindow.js',
|
'js/Popup.js',
|
||||||
'js_src/UpdatePanel.js',
|
'js/btnMove.js',
|
||||||
'js_src/PrinterPanel.js',
|
'js/WordArt.js',
|
||||||
'js_src/Help.js',
|
'js/Shape.js',
|
||||||
'js_src/d3dServerInterfacing.js',
|
'js/AddShapeDialog.js',
|
||||||
'js_src/verticalShapes.js',
|
'js/Svg.js',
|
||||||
'js_src/buttonbehaviors.js',
|
'js/Keyboard.js',
|
||||||
'js_src/canvasDrawing.js',
|
'js/SettingsWindow.js',
|
||||||
'js_src/previewRendering.js',
|
'js/UpdatePanel.js',
|
||||||
'js_src/gcodeGenerating.js',
|
'js/PrinterPanel.js',
|
||||||
'js_src/init_layout.js',
|
'js/Help.js',
|
||||||
'js_src/Printer.js',
|
'js/d3dServerInterfacing.js',
|
||||||
'js_src/Progressbar.js',
|
'js/verticalShapes.js',
|
||||||
'js_src/Thermometer.js',
|
'js/buttonbehaviors.js',
|
||||||
'js_src/utils.js',
|
'js/canvasDrawing.js',
|
||||||
'js_src/sidebar.js',
|
'js/previewRendering.js',
|
||||||
'js_src/Message.js',
|
'js/gcodeGenerating.js',
|
||||||
'js_src/main.js',
|
'js/init_layout.js',
|
||||||
'js_src/sketches.js'
|
'js/Printer.js',
|
||||||
|
'js/Progressbar.js',
|
||||||
|
'js/Thermometer.js',
|
||||||
|
'js/utils.js',
|
||||||
|
'js/sidebar.js',
|
||||||
|
'js/Message.js',
|
||||||
|
'js/main.js',
|
||||||
|
'js/sketches.js'
|
||||||
],
|
],
|
||||||
dest: 'www/js/<%= pkg.name %>.js'
|
dest: 'www/js/<%= pkg.name %>.js'
|
||||||
}
|
}
|
||||||
@ -57,8 +64,8 @@ module.exports = function(grunt) {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
jslibs: {
|
jslibs: {
|
||||||
cwd: "js_src/libs/",
|
cwd: "js/libs/",
|
||||||
// src: ['js_src/libs/*.js', '!js_src/libs/*.min.js'], // source files mask
|
// src: ['js/libs/*.js', '!js/libs/*.min.js'], // source files mask
|
||||||
src: ['*.js', '!*.min.js'], // source files mask
|
src: ['*.js', '!*.min.js'], // source files mask
|
||||||
dest: 'www/js/libs/', // destination folder
|
dest: 'www/js/libs/', // destination folder
|
||||||
expand: true, // allow dynamic building
|
expand: true, // allow dynamic building
|
||||||
@ -106,12 +113,12 @@ module.exports = function(grunt) {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
javascript: {
|
javascript: {
|
||||||
files: ["js_src/*", '!www/js/<%= pkg.name %>.min.js', '!www/js/<%= pkg.name %>.js'],
|
files: ["js/*", '!www/js/<%= pkg.name %>.min.js', '!www/js/<%= pkg.name %>.js'],
|
||||||
tasks: ["concat:js", "uglify:js"]
|
tasks: ["concat:js", "uglify:js"]
|
||||||
// tasks: ["jshint", "concat", "uglify"]
|
// tasks: ["jshint", "concat", "uglify"]
|
||||||
},
|
},
|
||||||
javascriptLibs: {
|
javascriptLibs: {
|
||||||
files: ["js_src/libs/*"],
|
files: ["js/libs/*"],
|
||||||
tasks: ["uglify:jslibs"]
|
tasks: ["uglify:jslibs"]
|
||||||
// tasks: ["jshint", "concat", "uglify"]
|
// tasks: ["jshint", "concat", "uglify"]
|
||||||
},
|
},
|
||||||
|
|||||||
1
Makefile
1
Makefile
@ -38,7 +38,6 @@ define Build/Prepare
|
|||||||
$(CP) www $(PKG_BUILD_DIR)/
|
$(CP) www $(PKG_BUILD_DIR)/
|
||||||
$(CP) Gruntfile.js $(PKG_BUILD_DIR)/
|
$(CP) Gruntfile.js $(PKG_BUILD_DIR)/
|
||||||
$(CP) README.md $(PKG_BUILD_DIR)/
|
$(CP) README.md $(PKG_BUILD_DIR)/
|
||||||
$(CP) ___settings.html $(PKG_BUILD_DIR)/
|
|
||||||
$(CP) lesstocss.sh $(PKG_BUILD_DIR)/
|
$(CP) lesstocss.sh $(PKG_BUILD_DIR)/
|
||||||
$(CP) package.json $(PKG_BUILD_DIR)/
|
$(CP) package.json $(PKG_BUILD_DIR)/
|
||||||
endef
|
endef
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
Doodle3D uses the following external projects:
|
Doodle3D uses the following external projects:
|
||||||
|
|
||||||
Garden font - Copyright (c) 2012 So-ghislaine - "Garden is a free font for commercial and personal use."
|
Garden font - Copyright (c) 2012 So-ghislaine - "Garden is a free font for commercial and personal use."
|
||||||
|
Copse font - Copyright (c) 2010 Dan Rhatigan - SIL Open Font License v1.10
|
||||||
jQuery - Copyright (c) 2005, 2012 jQuery Foundation, Inc. and other contributors - MIT License
|
jQuery - Copyright (c) 2005, 2012 jQuery Foundation, Inc. and other contributors - MIT License
|
||||||
jQuery-cookie - Copyright (c) 2011, Klaus Hartl - MIT or GPLv2
|
jQuery-cookie - Copyright (c) 2011, Klaus Hartl - MIT or GPLv2
|
||||||
jQuery-coolfieldset - Copyright (c) 2010 Lucky <bogeyman2007@gmail.com> - GPL
|
jQuery-coolfieldset - Copyright (c) 2010 Lucky <bogeyman2007@gmail.com> - GPL
|
||||||
|
|||||||
@ -6,8 +6,8 @@ Doodle3D client app
|
|||||||
|
|
||||||
## Prerequisites
|
## Prerequisites
|
||||||
- get `npm`, the Node.js package manager, for instance using macports on OSX.
|
- get `npm`, the Node.js package manager, for instance using macports on OSX.
|
||||||
- (prerequisite) install Grunt: `npm install -g grunt-cli`.
|
- (prerequisite) install Grunt: `sudo pm install -g grunt-cli`.
|
||||||
- run npm install in the project root to install project dependencies
|
- run `npm install` in the project root to install project dependencies
|
||||||
|
|
||||||
Finally run grunt to build minified css and js files. By default, it will keep
|
Finally run grunt to build minified css and js files. By default, it will keep
|
||||||
running to automatically rebuild when source files are changed.
|
running to automatically rebuild when source files are changed.
|
||||||
|
|||||||
154
___settings.html
154
___settings.html
@ -1,154 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>settings</title>
|
|
||||||
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
|
||||||
|
|
||||||
<link href="css/settings.css" rel="stylesheet" media="screen">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="settingsContainer">
|
|
||||||
<form id="settingsForm">
|
|
||||||
<!--<fieldset>
|
|
||||||
<legend>3D printer</legend>
|
|
||||||
<label for="printerType">Type:</label>
|
|
||||||
<select id="printerType" name="printer.type">
|
|
||||||
<option value="rigidbot">Rigidbot</option>
|
|
||||||
<option value="ultimaker">Ultimaker</option>
|
|
||||||
<option value="makerbot_replicator2">MakerBot Replicator2</option>
|
|
||||||
<option value="makerbot_thingomatic">MakerBot Thing-o-matic</option>
|
|
||||||
<option value="printrbot">Printrbot</option>
|
|
||||||
<option value="bukobot">Bukobot</option>
|
|
||||||
<option value="cartesio">Cartesio</option>
|
|
||||||
<option value="cyrus">Cyrus</option>
|
|
||||||
<option value="delta_rostockmax">Delta RostockMax</option>
|
|
||||||
<option value="deltamaker">Deltamaker</option>
|
|
||||||
<option value="eventorbot">EventorBot</option>
|
|
||||||
<option value="felix">Felix</option>
|
|
||||||
<option value="gigabot">Gigabot</option>
|
|
||||||
<option value="kossel">Kossel</option>
|
|
||||||
<option value="leapfrog_creatr">LeapFrog Creatr</option>
|
|
||||||
<option value="lulzbot_aO_101">LulzBot AO-101</option>
|
|
||||||
<option value="makergear_m2">MakerGear M2</option>
|
|
||||||
<option value="makergear_prusa">MakerGear Prusa</option>
|
|
||||||
<option value="makibox">Makibox</option>
|
|
||||||
<option value="orca_0_3">Orca 0.3</option>
|
|
||||||
<option value="ord_bot_hadron">ORD Bot Hadron</option>
|
|
||||||
<option value="printxel_3d">Printxel 3D</option>
|
|
||||||
<option value="prusa_i3">Prusa I3</option>
|
|
||||||
<option value="prusa_iteration_2">Prusa Iteration 2</option>
|
|
||||||
<option value="rapman">RapMan</option>
|
|
||||||
<option value="reprappro_huxley">RepRapPro Huxley</option>
|
|
||||||
<option value="reprappro_mendel">RepRapPro Mendel</option>
|
|
||||||
<option value="robo_3d_printer">RoBo 3D Printer</option>
|
|
||||||
<option value="shapercube">ShaperCube</option>
|
|
||||||
<option value="tantillus">Tantillus</option>
|
|
||||||
<option value="vision_3d_printer">Vision 3D Printer</option>
|
|
||||||
</select>
|
|
||||||
<br>
|
|
||||||
<label for="printerBaudrate">Baud rate:</label>
|
|
||||||
<select id="printerBaudrate" name="printer.baudrate">
|
|
||||||
<option value="115200">115200 bps</option>
|
|
||||||
<option value="2500000">2500000 bps</option>
|
|
||||||
</select>
|
|
||||||
</fieldset>-->
|
|
||||||
|
|
||||||
<fieldset id="printersettings">
|
|
||||||
<legend>Print settings</legend>
|
|
||||||
<label for="layerHeight">Layer height:</label><input id="layerHeight" type="number" step="0.01" class="small" name="printer.layerHeight">mm<br>
|
|
||||||
<label for="wallThickness">Wall thickness:</label><input id="wallThickness" type="number" step="0.1" class="small" name="printer.wallThickness">mm<br>
|
|
||||||
<label for="filamentThickness">Filament thickness:</label><input id="filamentThickness" step="0.01" type="number" class="small" name="printer.filamentThickness">mm<br>
|
|
||||||
<label for="temperature">Temperature:</label><input id="temperature" type="number" class="small" name="printer.temperature">degrees C<br>
|
|
||||||
<br>
|
|
||||||
<label for="speed">Speed:</label><input id="speed" type="number" name="printer.speed" class="small">mm/s<br>
|
|
||||||
<label for="travelSpeed">Travel speed:</label><input id="travelSpeed" type="number" name="printer.travelSpeed" class="small">mm/s<br>
|
|
||||||
<label for="enableTraveling">Enable traveling:</label><input id="enableTraveling" type="checkbox" name="printer.enableTraveling" value="enableTraveling"><br>
|
|
||||||
<label for="firstLayerSlow">First layer slow:</label><input id="firstLayerSlow" type="checkbox" name="printer.firstLayerSlow" value="firstLayerSlow"><br>
|
|
||||||
<label for="useSubLayers">Use sub-layers*:</label><input id="useSubLayers" type="checkbox" name="printer.useSubLayers" value="firstLayerSlow"><br>
|
|
||||||
<small>* Continuously move platform while printing instead of once per layer</small>
|
|
||||||
<br>
|
|
||||||
<label for="useRetraction">Use retraction:</label><input id="useRetraction" type="checkbox" name="printer.retraction.enabled" value="useRetraction"><br>
|
|
||||||
<label for="retractionAmount">Retraction amount:</label><input id="retractionAmount" type="number" class="small" name="printer.retraction.amount">mm<br>
|
|
||||||
<label for="retractionMinDistance">Retraction min distance:</label><input id="retractionMinDistance" type="number" class="small" name="printer.retraction.minDistance">mm<br>
|
|
||||||
<label for="retractionSpeed">Retraction speed:</label><input id="retractionSpeed" type="number" class="small" name="printer.retraction.speed">mm/s<br>
|
|
||||||
<br>
|
|
||||||
<label for="autoWarmUp">Auto warm-up:</label><input id="autoWarmUp" type="checkbox" name="printer.autoWarmUp" value="autoWarmUp"><br>
|
|
||||||
<label for="autoWarmUpCommand">Auto Warm up command:</label><input id="autoWarmUpCommand" type="text" name="printer.autoWarmUpCommand"><br>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset id="doodlesettings">
|
|
||||||
<legend>Doodle3D settings</legend>
|
|
||||||
<label for="simplifyMinDistance">Minimal line distance:</label><input id="simplifyMinDistance" type="number" class="small" name="doodle3d.simplify.minDistance">px<br>
|
|
||||||
<label for="maxObjectHeight">Max object height:</label><input id="maxObjectHeight" type="number" class="small" name="printer.maxObjectHeight">mm<br>
|
|
||||||
<label for="screenToMillimeterScale">Pixels to mm scale:</label><input id="screenToMillimeterScale" type="number" step="0.1" class="small" name="printer.screenToMillimeterScale"><br>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<legend>Network settings</legend>
|
|
||||||
<label>Connection type:</label>
|
|
||||||
<div>
|
|
||||||
<label for="ap"><input type="radio" name="connectiontype" value="ap" id="ap">Access point mode</label>
|
|
||||||
<label for="client"><input type="radio" name="connectiontype" value="client" id="client">Client mode</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<fieldset id="apSettings">
|
|
||||||
<legend>Access point settings</legend>
|
|
||||||
<label for="ipaddress">Wi-Fi box IP address:</label><input type="text" name="network.ap.address" id="ipaddress"><br>
|
|
||||||
<label for="netmask">Wi-Fi box netmask:</label><input type="text" name="network.ap.netmask" id="netmask"><br>
|
|
||||||
<label for="ssid">Wi-Fi box ssid*:</label><input type="text" class="large" name="network.ap.ssid" id="ssid"> <br>
|
|
||||||
<small>* The text <em>%%MAC_ADDR_TAIL%%</em> will be replaced by the last 6 digits of your Doodle3D Wi-Fi box's MAC address.</small>
|
|
||||||
<input type="button" name="create" value="Create" class="button" id="createAP"/>
|
|
||||||
<span id="apModeState"></span>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset id="clientSettings">
|
|
||||||
<legend>Client mode settings</legend>
|
|
||||||
<label for="network">Network:</label>
|
|
||||||
<select id="network" name="network.client.network">
|
|
||||||
<option value="rigidbot">Fablab Amersfoort</option>
|
|
||||||
<option value="ultimaker">Globe4D</option>
|
|
||||||
</select>
|
|
||||||
<input type="button" name="refresh" value="Refresh" class="button" id="refreshNetworks"/><br>
|
|
||||||
<label for="password" id="passwordLabel">Password:</label><input type="password" name="network.client.password" id="password"><br>
|
|
||||||
<input type="button" name="connect" value="Connect" class="button" id="connectToNetwork"/>
|
|
||||||
<span id="clientModeState"></span>
|
|
||||||
</fieldset>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<legend>GCODE settings</legend>
|
|
||||||
<div class="startgcode_left">
|
|
||||||
<label for="startgcode">Start:</label><br/>
|
|
||||||
<textarea id="startgcode" class="gcode" name="printer.startgcode">
|
|
||||||
</textarea>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="endgcode">End:</label><br/>
|
|
||||||
<textarea id="endgcode" class="gcode" name="printer.endgcode">
|
|
||||||
</textarea>
|
|
||||||
</div>
|
|
||||||
<!-- 2013-10-09 replaced by DIV solution (but keeping here in comments temporarily as lookup...)
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<label for="startgcode">Start:</label><br>
|
|
||||||
<textarea id="startgcode" class="gcode" name="printer.startgcode">
|
|
||||||
</textarea>
|
|
||||||
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<label for="endgcode">End:</label><br>
|
|
||||||
<textarea id="endgcode" class="gcode" name="printer.endgcode">
|
|
||||||
</textarea>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
-->
|
|
||||||
</fieldset>
|
|
||||||
</form><br/>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,179 +0,0 @@
|
|||||||
/*.logo {
|
|
||||||
background: #f5f5f5 url('../img/logo_full.png') no-repeat left top;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 500px) {
|
|
||||||
.logo {
|
|
||||||
background: #f5f5f5 url('../img/logo_small.png') no-repeat left top;
|
|
||||||
}
|
|
||||||
}*/
|
|
||||||
|
|
||||||
/*body {*/
|
|
||||||
/*-moz-user-select: none; *//* disable cut copy paste */
|
|
||||||
/*-webkit-user-select: none; *//* disable cut copy paste */
|
|
||||||
/*overflow:hidden; *//* This chops off any overhanging divs */
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*img {*/
|
|
||||||
/*z-index: 5;*/
|
|
||||||
/*pointer-events:none;*/
|
|
||||||
/*-webkit-touch-callout: none; *//**//*disable callout, image save panel */
|
|
||||||
/*-webkit-tap-highlight-color: transparent; *//**//* "turn off" link highlight */
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/* http://stackoverflow.com/questions/5348092/prevent-default-press-but-not-default-drag-in-ios-mobilesafari */
|
|
||||||
/*.btn {*/
|
|
||||||
/*background-repeat: no-repeat;*/
|
|
||||||
/* -webkit-user-select: none;*/
|
|
||||||
/*cursor: pointer*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
INTERFACE BUTTONS
|
|
||||||
|
|
||||||
*/
|
|
||||||
/*
|
|
||||||
#btnNew {
|
|
||||||
left: 10px;
|
|
||||||
top: 10px;
|
|
||||||
width: 194px;
|
|
||||||
height: 170px;
|
|
||||||
background: url('../img/buttons/btnNew.png') no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrevious {
|
|
||||||
left: 20px;
|
|
||||||
top: 180px;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNext {
|
|
||||||
left: 126px;
|
|
||||||
top: 186px;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnSave {
|
|
||||||
left: 20px;
|
|
||||||
top: 240px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnOops {
|
|
||||||
left: 20px;
|
|
||||||
top: 450px;
|
|
||||||
width: 146px;
|
|
||||||
height: 144px;
|
|
||||||
background: url('../img/buttons/btnOops.png') no-repeat;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
#btnPrint {
|
|
||||||
right: 15px;
|
|
||||||
top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnStop {
|
|
||||||
right: 20px;
|
|
||||||
top: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnInfo {
|
|
||||||
right: 25px;
|
|
||||||
bottom: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnSettings {
|
|
||||||
right: 25px;
|
|
||||||
bottom: 20px;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
DRAW AREA
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
/*#drawAreaContainer > .manipulationBtns {*/
|
|
||||||
/*
|
|
||||||
.drawareacontainer > .manipulationBtns {
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.manipulationBtn {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown {
|
|
||||||
position: absolute;
|
|
||||||
right: 200px;
|
|
||||||
bottom: -75px;
|
|
||||||
}
|
|
||||||
#btnsUpDown > div {
|
|
||||||
float: left;
|
|
||||||
padding-right: 8px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsTurnLeftRight {
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
bottom: -75px;
|
|
||||||
}
|
|
||||||
#btnsTurnLeftRight >div {
|
|
||||||
float: left;
|
|
||||||
padding-right: 8px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnMoveUp {
|
|
||||||
width: 65px;
|
|
||||||
height: 61px;
|
|
||||||
background: url('../img/buttons/btnUp.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnMoveDown {
|
|
||||||
width: 64px;
|
|
||||||
height: 63px;
|
|
||||||
background: url('../img/buttons/btnDown.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnTwistLeft {
|
|
||||||
width: 59px;
|
|
||||||
height: 61px;
|
|
||||||
background: url('../img/buttons/btnTurnLeft.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnTwistRight {
|
|
||||||
width: 64px;
|
|
||||||
height: 56px;
|
|
||||||
background: url('../img/buttons/btnTurnRight.png');
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
#displayTemp {
|
|
||||||
position: absolute;
|
|
||||||
right: 55px;
|
|
||||||
top: 334px;
|
|
||||||
font-weight: bold;
|
|
||||||
background: white;
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
.disabled {
|
|
||||||
opacity: 0.3;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnStop.disabled {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
@ -1,93 +0,0 @@
|
|||||||
/*
|
|
||||||
#drawAreaContainer {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
background-color: #fff;
|
|
||||||
width: 65%;
|
|
||||||
min-width: 500px;
|
|
||||||
max-width: 650px;
|
|
||||||
height: 60%;
|
|
||||||
min-height: 150px;
|
|
||||||
max-height: 450px;
|
|
||||||
border: 4px solid #000;
|
|
||||||
border-radius: 15px;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 15;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#canvasContainers {
|
|
||||||
display:table;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvasContainer {
|
|
||||||
display:table-cell;
|
|
||||||
width: auto;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
#mycanvas {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border-right: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#previewContainer {
|
|
||||||
display:table-cell;
|
|
||||||
width: 150px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
#preview {
|
|
||||||
width: 150px;
|
|
||||||
height: 100%;
|
|
||||||
float: right;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* DEBUG THING */
|
|
||||||
/*
|
|
||||||
#preview_tmp {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 500;
|
|
||||||
border: 1px solid #f80;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
Buttons and logo's
|
|
||||||
|
|
||||||
*/
|
|
||||||
/*
|
|
||||||
.button {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*#d3dlogo {*/
|
|
||||||
/*position: absolute;*/
|
|
||||||
/*top: 15px;*/
|
|
||||||
/*left: 31%;*/
|
|
||||||
/*width: 399px;*/
|
|
||||||
/*height: 139px;*/
|
|
||||||
/*background-image: url('../img/logo_full.png');*/
|
|
||||||
/*cursor: pointer;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
#contentOverlay {
|
|
||||||
background-color: rgba(255, 255, 255, 0.65);
|
|
||||||
z-index: 20;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#settings {
|
|
||||||
background-color: #fff;
|
|
||||||
z-index: 15;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 835px;
|
|
||||||
height: 500px;
|
|
||||||
margin: -250px 0 0 -417.5px;
|
|
||||||
/*padding: 25px;*/
|
|
||||||
|
|
||||||
/*overflow: scroll;*/
|
|
||||||
/*overflow-y: hidden;*/
|
|
||||||
-moz-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
|
||||||
-webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
|
||||||
box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
|
||||||
border: 2px solid #222;
|
|
||||||
border-radius: 15px;
|
|
||||||
-moz-border-radius: 15px;
|
|
||||||
-webkit-border-radius: 15px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
#settings header {
|
|
||||||
margin: 25px 25px 0 25px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.content {
|
|
||||||
margin: 15px 25px 25px 25px;
|
|
||||||
height: 388px;
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.content > div {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.content > div.settings {
|
|
||||||
border: 1px solid rgb(187, 187, 187);
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
|
|
||||||
width: 660px;
|
|
||||||
overflow: scroll;
|
|
||||||
max-height: 368px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
padding: 10px 10px 10px 10px;
|
|
||||||
}
|
|
||||||
div.content > div.manipulationBtns {
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: bottom;
|
|
||||||
width: 125px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
div.content .btnOK {
|
|
||||||
width: 85px;
|
|
||||||
height: 86px;
|
|
||||||
background: url('../img/buttons/btnOk_settings.png') no-repeat;
|
|
||||||
margin: 0 0 0 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
@ -1,329 +0,0 @@
|
|||||||
body {
|
|
||||||
/* This chops off any overhanging divs */
|
|
||||||
overflow:hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*#landscape {*/
|
|
||||||
/*position:relative;*/
|
|
||||||
/*width: 1024px;*/
|
|
||||||
/*max-height: 768px;*/
|
|
||||||
/*background-color: #808;*/
|
|
||||||
/*border: 10px solid #ff0;*/
|
|
||||||
/*margin: 0px auto;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
|
|
||||||
#verticalShapes {
|
|
||||||
position:absolute;
|
|
||||||
right: -56px;
|
|
||||||
bottom: 15px;
|
|
||||||
/*background-color: #fff;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.verticalshape {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border: 2px solid #333;
|
|
||||||
border-radius: 0px 5px 5px 0px;
|
|
||||||
margin-top: 4px;
|
|
||||||
/*background-color: #f0f;*/
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.straight {
|
|
||||||
background: url('../img/vertical_shape_icons/straight.png') no-repeat;
|
|
||||||
}
|
|
||||||
.diverging {
|
|
||||||
background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
|
|
||||||
}
|
|
||||||
.converging {
|
|
||||||
background: url('../img/vertical_shape_icons/converging.png') no-repeat;
|
|
||||||
}
|
|
||||||
.sinus {
|
|
||||||
background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Portrait */
|
|
||||||
@media screen and (orientation:portrait) {
|
|
||||||
body {
|
|
||||||
/* background-color: #08F;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#landscape {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#portrait {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Landscape */
|
|
||||||
@media screen and (orientation:landscape) {
|
|
||||||
body {
|
|
||||||
/* background-color: #8F0;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#landscape {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#portrait {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.uiButtonsContainer {
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 1024px;
|
|
||||||
min-height: 500px;
|
|
||||||
max-height: 768px;
|
|
||||||
height: 100%;
|
|
||||||
/* height: 768px;*/
|
|
||||||
}
|
|
||||||
.uiButtonsContainer:before {
|
|
||||||
content:' ';
|
|
||||||
display:block;
|
|
||||||
position:absolute;
|
|
||||||
left:0;
|
|
||||||
top:0;
|
|
||||||
right:0;
|
|
||||||
bottom:0;
|
|
||||||
border: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#d3dlogo {
|
|
||||||
position: absolute;
|
|
||||||
top: 15px;
|
|
||||||
left: 31%;
|
|
||||||
width: 399px;
|
|
||||||
height: 139px;
|
|
||||||
background-image: url('../img/logo_full.png');
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
position: absolute;
|
|
||||||
top: 193px;
|
|
||||||
left: 193px;
|
|
||||||
width: 650px;
|
|
||||||
height: 450px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 4px solid #000;
|
|
||||||
border-radius: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preview_tmp {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 500;
|
|
||||||
border: 1px solid #f80;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvas, #preview {
|
|
||||||
/*border: 1px solid #08c;*/
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvas {
|
|
||||||
width: 500px;
|
|
||||||
height: 450px;
|
|
||||||
border: 0px solid #333;
|
|
||||||
border-right: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preview {
|
|
||||||
/*border: 1px solid #f8c;*/
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: 0px;
|
|
||||||
width: 150px;
|
|
||||||
height: 450px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertImage {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
/*border: 2px solid #f0f;*/
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
width: auto; /* for ie9 */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.bgTop {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
.bgMiddle {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 30%;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
.bgBottom {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* PRINT PROGRESS DISPLAY */
|
|
||||||
#printProgressContainer {
|
|
||||||
position: absolute;
|
|
||||||
right: 30px;
|
|
||||||
top: 370px;
|
|
||||||
width: 110px;
|
|
||||||
margin: 5px 0px;
|
|
||||||
font-weight: bold;
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#progressbarContainer {
|
|
||||||
margin: 3px 0px;
|
|
||||||
width: inherit;
|
|
||||||
height: 20px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 2px solid #333;
|
|
||||||
border-radius: 5px;
|
|
||||||
-o-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
}
|
|
||||||
.progressAmount {
|
|
||||||
margin: 0px 5px;
|
|
||||||
}
|
|
||||||
#progressbar {
|
|
||||||
position: relative;
|
|
||||||
/*margin-bottom: -20px;*/
|
|
||||||
width: 0%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #4c4;
|
|
||||||
border: 0px solid #f0f;
|
|
||||||
border-radius: 3px;
|
|
||||||
-o-border-radius: 3px;
|
|
||||||
-moz-border-radius: 3px;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* THERMOMETER */
|
|
||||||
#thermometerContainer {
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 360px;
|
|
||||||
}
|
|
||||||
#thermometerCanvas {
|
|
||||||
/*background: #59b2b8;*/
|
|
||||||
/*zoom: 2;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
|
|
||||||
|
|
||||||
@media screen and (max-height: 675px) {
|
|
||||||
.bgMiddle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#d3dlogo {
|
|
||||||
width: 399px;
|
|
||||||
height: 74px;
|
|
||||||
background-image: url('../img/logo_small.png');
|
|
||||||
margin-top: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown, #btnsTurnLeftRight {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(0px,-5px) scale(.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNew {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(-5px,-5px) scale(.94);
|
|
||||||
/*-moz-transform: translate(-3px,-3px);*/
|
|
||||||
}
|
|
||||||
#btnOops {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(-5px,-10px) scale(0.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrint {
|
|
||||||
right: 10px;
|
|
||||||
top: 10px;
|
|
||||||
-moz-transform: translate(5px,-5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: scale(.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
top: 128px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-height: 560px) {
|
|
||||||
#d3dlogo {
|
|
||||||
width: 399px;
|
|
||||||
height: 57px;
|
|
||||||
background-image: url('../img/logo_smaller_wide.png');
|
|
||||||
margin-top: 14px;
|
|
||||||
/*zoom: 0.8;*/
|
|
||||||
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
|
|
||||||
/*-moz-transform: ;*/
|
|
||||||
/*left: 34%;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown, #btnsTurnLeftRight {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(0px,-7px) scale(0.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrint {
|
|
||||||
right: 6px;
|
|
||||||
-moz-transform: translate(10px,-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNew {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(-10px,-10px) scale(.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: scale(.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnOops {
|
|
||||||
top: 350px;
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(-10px,-25px) scale(.86);
|
|
||||||
}
|
|
||||||
#btnSave {
|
|
||||||
-moz-transform: translate(-5px,-13px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrevious, #btnNext {
|
|
||||||
/*top: 200px;*/
|
|
||||||
-moz-transform: translate(-5px,-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
top: 110px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,329 +0,0 @@
|
|||||||
body {
|
|
||||||
/* This chops off any overhanging divs */
|
|
||||||
overflow:hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*#landscape {*/
|
|
||||||
/*position:relative;*/
|
|
||||||
/*width: 1024px;*/
|
|
||||||
/*max-height: 768px;*/
|
|
||||||
/*background-color: #808;*/
|
|
||||||
/*border: 10px solid #ff0;*/
|
|
||||||
/*margin: 0px auto;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
|
|
||||||
#verticalShapes {
|
|
||||||
position:absolute;
|
|
||||||
right: -56px;
|
|
||||||
bottom: 15px;
|
|
||||||
/*background-color: #fff;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.verticalshape {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border: 2px solid #333;
|
|
||||||
border-radius: 0px 5px 5px 0px;
|
|
||||||
margin-top: 4px;
|
|
||||||
/*background-color: #f0f;*/
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.straight {
|
|
||||||
background: url('../img/vertical_shape_icons/straight.png') no-repeat;
|
|
||||||
}
|
|
||||||
.diverging {
|
|
||||||
background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
|
|
||||||
}
|
|
||||||
.converging {
|
|
||||||
background: url('../img/vertical_shape_icons/converging.png') no-repeat;
|
|
||||||
}
|
|
||||||
.sinus {
|
|
||||||
background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Portrait */
|
|
||||||
@media screen and (orientation:portrait) {
|
|
||||||
body {
|
|
||||||
/* background-color: #08F;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#landscape {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#portrait {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Landscape */
|
|
||||||
@media screen and (orientation:landscape) {
|
|
||||||
body {
|
|
||||||
/* background-color: #8F0;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#landscape {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#portrait {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.uiButtonsContainer {
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 1024px;
|
|
||||||
min-height: 500px;
|
|
||||||
max-height: 768px;
|
|
||||||
height: 100%;
|
|
||||||
/* height: 768px;*/
|
|
||||||
}
|
|
||||||
.uiButtonsContainer:before {
|
|
||||||
content:' ';
|
|
||||||
display:block;
|
|
||||||
position:absolute;
|
|
||||||
left:0;
|
|
||||||
top:0;
|
|
||||||
right:0;
|
|
||||||
bottom:0;
|
|
||||||
border: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#d3dlogo {
|
|
||||||
position: absolute;
|
|
||||||
top: 15px;
|
|
||||||
left: 31%;
|
|
||||||
width: 399px;
|
|
||||||
height: 139px;
|
|
||||||
background-image: url('../img/logo_full.png');
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
position: absolute;
|
|
||||||
top: 193px;
|
|
||||||
left: 193px;
|
|
||||||
width: 650px;
|
|
||||||
height: 450px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 4px solid #000;
|
|
||||||
border-radius: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preview_tmp {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 500;
|
|
||||||
border: 1px solid #f80;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvas, #preview {
|
|
||||||
/*border: 1px solid #08c;*/
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvas {
|
|
||||||
width: 500px;
|
|
||||||
height: 450px;
|
|
||||||
border: 0px solid #333;
|
|
||||||
border-right: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preview {
|
|
||||||
/*border: 1px solid #f8c;*/
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: 0px;
|
|
||||||
width: 150px;
|
|
||||||
height: 450px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertImage {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
/*border: 2px solid #f0f;*/
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
width: auto; /* for ie9 */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.bgTop {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
.bgMiddle {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 30%;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
.bgBottom {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* PRINT PROGRESS DISPLAY */
|
|
||||||
#printProgressContainer {
|
|
||||||
position: absolute;
|
|
||||||
right: 30px;
|
|
||||||
top: 370px;
|
|
||||||
width: 110px;
|
|
||||||
margin: 5px 0px;
|
|
||||||
font-weight: bold;
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#progressbarContainer {
|
|
||||||
margin: 3px 0px;
|
|
||||||
width: inherit;
|
|
||||||
height: 20px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 2px solid #333;
|
|
||||||
border-radius: 5px;
|
|
||||||
-o-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
}
|
|
||||||
.progressAmount {
|
|
||||||
margin: 0px 5px;
|
|
||||||
}
|
|
||||||
#progressbar {
|
|
||||||
position: relative;
|
|
||||||
/*margin-bottom: -20px;*/
|
|
||||||
width: 0%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #4c4;
|
|
||||||
border: 0px solid #f0f;
|
|
||||||
border-radius: 3px;
|
|
||||||
-o-border-radius: 3px;
|
|
||||||
-moz-border-radius: 3px;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* THERMOMETER */
|
|
||||||
#thermometerContainer {
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 360px;
|
|
||||||
}
|
|
||||||
#thermometerCanvas {
|
|
||||||
/*background: #59b2b8;*/
|
|
||||||
/*zoom: 2;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
|
|
||||||
|
|
||||||
@media screen and (max-height: 675px) {
|
|
||||||
.bgMiddle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#d3dlogo {
|
|
||||||
width: 399px;
|
|
||||||
height: 74px;
|
|
||||||
background-image: url('../img/logo_small.png');
|
|
||||||
margin-top: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown, #btnsTurnLeftRight {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(0px,-5px) scale(.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNew {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(-5px,-5px) scale(.94);
|
|
||||||
/*-moz-transform: translate(-3px,-3px);*/
|
|
||||||
}
|
|
||||||
#btnOops {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(-5px,-10px) scale(0.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrint {
|
|
||||||
right: 10px;
|
|
||||||
top: 10px;
|
|
||||||
-moz-transform: translate(5px,-5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: scale(.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
top: 128px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-height: 560px) {
|
|
||||||
#d3dlogo {
|
|
||||||
width: 399px;
|
|
||||||
height: 57px;
|
|
||||||
background-image: url('../img/logo_smaller_wide.png');
|
|
||||||
margin-top: 14px;
|
|
||||||
/*zoom: 0.8;*/
|
|
||||||
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
|
|
||||||
/*-moz-transform: ;*/
|
|
||||||
/*left: 34%;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown, #btnsTurnLeftRight {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(0px,-7px) scale(0.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrint {
|
|
||||||
right: 6px;
|
|
||||||
-moz-transform: translate(10px,-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNew {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(-10px,-10px) scale(.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: scale(.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnOops {
|
|
||||||
top: 350px;
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(-10px,-25px) scale(.86);
|
|
||||||
}
|
|
||||||
#btnSave {
|
|
||||||
-moz-transform: translate(-5px,-13px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrevious, #btnNext {
|
|
||||||
/*top: 200px;*/
|
|
||||||
-moz-transform: translate(-5px,-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
top: 110px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,323 +0,0 @@
|
|||||||
body {
|
|
||||||
/* This chops off any overhanging divs */
|
|
||||||
overflow:hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.button {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*.big {*/
|
|
||||||
/*background: #a6e19c;*/
|
|
||||||
/*border: 1px solid #222;*/
|
|
||||||
/*height: 64px;*/
|
|
||||||
/*width: 64px;*/
|
|
||||||
/*display: table-cell;*/
|
|
||||||
/*vertical-align: middle;*/
|
|
||||||
/*text-align: center;*/
|
|
||||||
/*border-radius: 32px;*/
|
|
||||||
/*-moz-border-radius: 32px;*/
|
|
||||||
/*-webkit-border-radius: 32px;*/
|
|
||||||
/*}*/
|
|
||||||
/*.small {*/
|
|
||||||
/*background: #a3d5f7;*/
|
|
||||||
/*border: 1px solid #222;*/
|
|
||||||
/*height: 40px;*/
|
|
||||||
/*width: 40px;*/
|
|
||||||
/*display: table-cell;*/
|
|
||||||
/*vertical-align: middle;*/
|
|
||||||
/*text-align: center;*/
|
|
||||||
/*border-radius: 20px;*/
|
|
||||||
/*-moz-border-radius: 20px;*/
|
|
||||||
/*-webkit-border-radius: 20px;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
#logo {
|
|
||||||
position: absolute;
|
|
||||||
/*left: 50%;*/
|
|
||||||
/*margin-left: -220px;*/
|
|
||||||
top: 20px;
|
|
||||||
left: 315px;
|
|
||||||
width: 400px;
|
|
||||||
height: 140px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*ha {*/
|
|
||||||
/*background: #f5f5f5 url('../images/bg.jpg') no-repeat;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/* Portrait */
|
|
||||||
@media screen and (orientation:portrait) {
|
|
||||||
body {
|
|
||||||
/* background-color: #08F;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#landscape {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#portrait {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Landscape */
|
|
||||||
@media screen and (orientation:landscape) {
|
|
||||||
body {
|
|
||||||
/* background-color: #8F0;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#landscape {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#portrait {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
border: 2px solid #333;
|
|
||||||
width: 1024px;
|
|
||||||
min-height: 500px;
|
|
||||||
max-height: 768px;
|
|
||||||
height: 100%;
|
|
||||||
/* height: 768px;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#d3dlogo {
|
|
||||||
position: absolute;
|
|
||||||
top: 15px;
|
|
||||||
left: 31%;
|
|
||||||
width: 399px;
|
|
||||||
height: 139px;
|
|
||||||
background-image: url('../img/logo_full.png');
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#svg {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
position: absolute;
|
|
||||||
top: 193px;
|
|
||||||
left: 193px;
|
|
||||||
width: 650px;
|
|
||||||
height: 450px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 4px solid #000;
|
|
||||||
border-radius: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preview_tmp {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 500;
|
|
||||||
border: 1px solid #f80;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvas, #preview {
|
|
||||||
/*border: 1px solid #08c;*/
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvas {
|
|
||||||
width: 500px;
|
|
||||||
height: 450px;
|
|
||||||
border: 0px solid #333;
|
|
||||||
border-right: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preview {
|
|
||||||
/*border: 1px solid #f8c;*/
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: 0px;
|
|
||||||
width: 150px;
|
|
||||||
height: 450px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertImage {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
/*border: 2px solid #f0f;*/
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
width: auto; /* for ie9 */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.bgTop {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
.bgMiddle {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 30%;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
.bgBottom {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* PRINT PROGRESS DISPLAY */
|
|
||||||
#printProgressContainer {
|
|
||||||
position: absolute;
|
|
||||||
right: 30px;
|
|
||||||
top: 370px;
|
|
||||||
width: 110px;
|
|
||||||
margin: 5px 0px;
|
|
||||||
font-weight: bold;
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#progressbarContainer {
|
|
||||||
margin: 3px 0px;
|
|
||||||
width: inherit;
|
|
||||||
height: 20px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 2px solid #333;
|
|
||||||
border-radius: 5px;
|
|
||||||
-o-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
}
|
|
||||||
.progressAmount {
|
|
||||||
margin: 0px 5px;
|
|
||||||
}
|
|
||||||
#progressbar {
|
|
||||||
position: relative;
|
|
||||||
/*margin-bottom: -20px;*/
|
|
||||||
width: 0%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #4c4;
|
|
||||||
border: 0px solid #f0f;
|
|
||||||
border-radius: 3px;
|
|
||||||
-o-border-radius: 3px;
|
|
||||||
-moz-border-radius: 3px;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* THERMOMETER */
|
|
||||||
#thermometerContainer {
|
|
||||||
position: absolute;
|
|
||||||
right: 25px;
|
|
||||||
top: 370px;
|
|
||||||
}
|
|
||||||
#thermometerCanvas {
|
|
||||||
/*background: #59b2b8;*/
|
|
||||||
/*zoom: 2;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
|
|
||||||
|
|
||||||
@media screen and (max-height: 675px) {
|
|
||||||
.bgMiddle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#d3dlogo {
|
|
||||||
width: 399px;
|
|
||||||
height: 74px;
|
|
||||||
background-image: url('../img/logo_small.png');
|
|
||||||
margin-top: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown, #btnsTurnLeftRight {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(0px,-5px) scale(.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNew {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(-5px,-5px) scale(.94);
|
|
||||||
/*-moz-transform: translate(-3px,-3px);*/
|
|
||||||
}
|
|
||||||
#btnOops {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(-5px,-10px) scale(0.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrint {
|
|
||||||
right: 10px;
|
|
||||||
top: 10px;
|
|
||||||
-moz-transform: translate(5px,-5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: scale(.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
top: 128px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-height: 560px) {
|
|
||||||
#d3dlogo {
|
|
||||||
width: 399px;
|
|
||||||
height: 57px;
|
|
||||||
background-image: url('../img/logo_smaller_wide.png');
|
|
||||||
margin-top: 14px;
|
|
||||||
/*zoom: 0.8;*/
|
|
||||||
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
|
|
||||||
/*-moz-transform: ;*/
|
|
||||||
/*left: 34%;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown, #btnsTurnLeftRight {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(0px,-7px) scale(0.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrint {
|
|
||||||
right: 6px;
|
|
||||||
-moz-transform: translate(10px,-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNew {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(-10px,-10px) scale(.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: scale(.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnOops {
|
|
||||||
top: 350px;
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(-10px,-25px) scale(.86);
|
|
||||||
}
|
|
||||||
#btnSave {
|
|
||||||
-moz-transform: translate(-5px,-13px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrevious, #btnNext {
|
|
||||||
/*top: 200px;*/
|
|
||||||
-moz-transform: translate(-5px,-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
top: 110px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,329 +0,0 @@
|
|||||||
body {
|
|
||||||
/* This chops off any overhanging divs */
|
|
||||||
overflow:hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*#landscape {*/
|
|
||||||
/*position:relative;*/
|
|
||||||
/*width: 1024px;*/
|
|
||||||
/*max-height: 768px;*/
|
|
||||||
/*background-color: #808;*/
|
|
||||||
/*border: 10px solid #ff0;*/
|
|
||||||
/*margin: 0px auto;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
|
|
||||||
#verticalShapes {
|
|
||||||
position:absolute;
|
|
||||||
right: -56px;
|
|
||||||
bottom: 15px;
|
|
||||||
/*background-color: #fff;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.verticalshape {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border: 2px solid #333;
|
|
||||||
border-radius: 0px 5px 5px 0px;
|
|
||||||
margin-top: 4px;
|
|
||||||
/*background-color: #f0f;*/
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.straight {
|
|
||||||
background: url('../img/vertical_shape_icons/straight.png') no-repeat;
|
|
||||||
}
|
|
||||||
.diverging {
|
|
||||||
background: url('../img/vertical_shape_icons/diverging.png') no-repeat;
|
|
||||||
}
|
|
||||||
.converging {
|
|
||||||
background: url('../img/vertical_shape_icons/converging.png') no-repeat;
|
|
||||||
}
|
|
||||||
.sinus {
|
|
||||||
background: url('../img/vertical_shape_icons/sinus.png') no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Portrait */
|
|
||||||
@media screen and (orientation:portrait) {
|
|
||||||
body {
|
|
||||||
/* background-color: #08F;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#landscape {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#portrait {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Landscape */
|
|
||||||
@media screen and (orientation:landscape) {
|
|
||||||
body {
|
|
||||||
/* background-color: #8F0;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#landscape {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#portrait {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.uiButtonsContainer {
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 1024px;
|
|
||||||
min-height: 500px;
|
|
||||||
max-height: 768px;
|
|
||||||
height: 100%;
|
|
||||||
/* height: 768px;*/
|
|
||||||
}
|
|
||||||
.uiButtonsContainer:before {
|
|
||||||
content:' ';
|
|
||||||
display:block;
|
|
||||||
position:absolute;
|
|
||||||
left:0;
|
|
||||||
top:0;
|
|
||||||
right:0;
|
|
||||||
bottom:0;
|
|
||||||
border: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#d3dlogo {
|
|
||||||
position: absolute;
|
|
||||||
top: 15px;
|
|
||||||
left: 31%;
|
|
||||||
width: 399px;
|
|
||||||
height: 139px;
|
|
||||||
background-image: url('../img/logo_full.png');
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
position: absolute;
|
|
||||||
top: 193px;
|
|
||||||
left: 193px;
|
|
||||||
width: 650px;
|
|
||||||
height: 450px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 4px solid #000;
|
|
||||||
border-radius: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preview_tmp {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 500;
|
|
||||||
border: 1px solid #f80;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvas, #preview {
|
|
||||||
/*border: 1px solid #08c;*/
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvas {
|
|
||||||
width: 500px;
|
|
||||||
height: 450px;
|
|
||||||
border: 0px solid #333;
|
|
||||||
border-right: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#preview {
|
|
||||||
/*border: 1px solid #f8c;*/
|
|
||||||
position: absolute;
|
|
||||||
right: 0px;
|
|
||||||
top: 0px;
|
|
||||||
width: 150px;
|
|
||||||
height: 450px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertImage {
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
/*border: 2px solid #f0f;*/
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
width: auto; /* for ie9 */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.bgTop {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
.bgMiddle {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: 30%;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
.bgBottom {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: -5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* PRINT PROGRESS DISPLAY */
|
|
||||||
#printProgressContainer {
|
|
||||||
position: absolute;
|
|
||||||
right: 30px;
|
|
||||||
top: 370px;
|
|
||||||
width: 110px;
|
|
||||||
margin: 5px 0px;
|
|
||||||
font-weight: bold;
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
#progressbarContainer {
|
|
||||||
margin: 3px 0px;
|
|
||||||
width: inherit;
|
|
||||||
height: 20px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 2px solid #333;
|
|
||||||
border-radius: 5px;
|
|
||||||
-o-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
}
|
|
||||||
.progressAmount {
|
|
||||||
margin: 0px 5px;
|
|
||||||
}
|
|
||||||
#progressbar {
|
|
||||||
position: relative;
|
|
||||||
/*margin-bottom: -20px;*/
|
|
||||||
width: 0%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #4c4;
|
|
||||||
border: 0px solid #f0f;
|
|
||||||
border-radius: 3px;
|
|
||||||
-o-border-radius: 3px;
|
|
||||||
-moz-border-radius: 3px;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* THERMOMETER */
|
|
||||||
#thermometerContainer {
|
|
||||||
position: absolute;
|
|
||||||
right: 5px;
|
|
||||||
top: 360px;
|
|
||||||
}
|
|
||||||
#thermometerCanvas {
|
|
||||||
/*background: #59b2b8;*/
|
|
||||||
/*zoom: 2;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
|
|
||||||
|
|
||||||
@media screen and (max-height: 675px) {
|
|
||||||
.bgMiddle {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#d3dlogo {
|
|
||||||
width: 399px;
|
|
||||||
height: 74px;
|
|
||||||
background-image: url('../img/logo_small.png');
|
|
||||||
margin-top: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown, #btnsTurnLeftRight {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(0px,-5px) scale(.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNew {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(-5px,-5px) scale(.94);
|
|
||||||
/*-moz-transform: translate(-3px,-3px);*/
|
|
||||||
}
|
|
||||||
#btnOops {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: translate(-5px,-10px) scale(0.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrint {
|
|
||||||
right: 10px;
|
|
||||||
top: 10px;
|
|
||||||
-moz-transform: translate(5px,-5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
zoom: 0.94;
|
|
||||||
-moz-transform: scale(.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
top: 128px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-height: 560px) {
|
|
||||||
#d3dlogo {
|
|
||||||
width: 399px;
|
|
||||||
height: 57px;
|
|
||||||
background-image: url('../img/logo_smaller_wide.png');
|
|
||||||
margin-top: 14px;
|
|
||||||
/*zoom: 0.8;*/
|
|
||||||
/*-moz-transform: translate(-20px,-15px) scale(.8);*/
|
|
||||||
/*-moz-transform: ;*/
|
|
||||||
/*left: 34%;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown, #btnsTurnLeftRight {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(0px,-7px) scale(0.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrint {
|
|
||||||
right: 6px;
|
|
||||||
-moz-transform: translate(10px,-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnNew {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(-10px,-10px) scale(.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: scale(.86);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnOops {
|
|
||||||
top: 350px;
|
|
||||||
zoom: 0.86;
|
|
||||||
-moz-transform: translate(-10px,-25px) scale(.86);
|
|
||||||
}
|
|
||||||
#btnSave {
|
|
||||||
-moz-transform: translate(-5px,-13px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnPrevious, #btnNext {
|
|
||||||
/*top: 200px;*/
|
|
||||||
-moz-transform: translate(-5px,-10px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#drawAreaContainer {
|
|
||||||
top: 110px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
#contentOverlay {
|
|
||||||
background-color: rgba(255, 255, 255, 0.65);
|
|
||||||
z-index: 10;
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 1024px;
|
|
||||||
height: 100%;
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup {
|
|
||||||
background-color: #fff;
|
|
||||||
z-index: 15;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 835px;
|
|
||||||
height: 500px;
|
|
||||||
margin: -250px 0 0 -417.5px;
|
|
||||||
/*padding: 25px;*/
|
|
||||||
|
|
||||||
/*overflow: scroll;*/
|
|
||||||
/*overflow-y: hidden;*/
|
|
||||||
-moz-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
|
||||||
-webkit-box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
|
||||||
box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
|
|
||||||
border: 2px solid #222;
|
|
||||||
border-radius: 15px;
|
|
||||||
-moz-border-radius: 15px;
|
|
||||||
-webkit-border-radius: 15px;
|
|
||||||
overflow: hidden;
|
|
||||||
display:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#settings header {
|
|
||||||
margin: 25px 25px 0 25px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
#settings div.content {
|
|
||||||
margin: 15px 25px 25px 25px;
|
|
||||||
height: 388px;
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
#settings div.content > div {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
#settings div.content > div.settings {
|
|
||||||
border: 1px solid rgb(187, 187, 187);
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
|
|
||||||
width: 660px;
|
|
||||||
overflow: scroll;
|
|
||||||
max-height: 368px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
padding: 10px 10px 10px 10px;
|
|
||||||
}
|
|
||||||
#settings div.content > div.manipulationBtns {
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: bottom;
|
|
||||||
width: 125px;
|
|
||||||
|
|
||||||
}
|
|
||||||
#settings div.content .btnOK {
|
|
||||||
width: 85px;
|
|
||||||
height: 86px;
|
|
||||||
background: url('../img/buttons/btnOk_settings.png') no-repeat;
|
|
||||||
margin: 0 0 0 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
@ -1,96 +0,0 @@
|
|||||||
form {
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
form input {
|
|
||||||
margin: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body,th,td {
|
|
||||||
font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
.settingsContainer {
|
|
||||||
position:relative;
|
|
||||||
max-width: 600px;
|
|
||||||
/*min-width: 370px;*/
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
/*form#settingsForm {*/
|
|
||||||
/*width: 100% auto;*/
|
|
||||||
/*}*/
|
|
||||||
form fieldset {
|
|
||||||
max-width: 600px;
|
|
||||||
border: 1px solid rgb(187, 187, 187);
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
padding: 8px;
|
|
||||||
/*padding-right: 8px;*/
|
|
||||||
}
|
|
||||||
form fieldset fieldset{
|
|
||||||
max-width: 580px;
|
|
||||||
margin: 15px 0 5px 0;
|
|
||||||
clear: left;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
form fieldset legend {
|
|
||||||
margin-left: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
form label {
|
|
||||||
min-width: 150px;
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
margin: 1px 0 0 0;
|
|
||||||
clear: left;
|
|
||||||
}
|
|
||||||
form div {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
form input[type="text"], form input[type="number"], form input[type="password"] {
|
|
||||||
border: 1px solid rgb(144, 192, 255);
|
|
||||||
margin-right: 5px;
|
|
||||||
-webkit-border-radius: 4px;
|
|
||||||
-moz-border-radius: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
form input[type="text"].small, form input[type="number"].small, form input[type="password"].small {
|
|
||||||
width: 50px;
|
|
||||||
}
|
|
||||||
form input[type="text"].large, form input[type="number"].large, form input[type="password"].large {
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
form input[type="radio"] {
|
|
||||||
margin: 4px 4px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
form textarea {
|
|
||||||
border: 1px solid rgb(144, 192, 255);
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
form .startgcode_left {
|
|
||||||
float:left;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
form textarea.gcode {
|
|
||||||
width: 252px;
|
|
||||||
/*max-width: 262px;*/
|
|
||||||
/*min-width: 200px;*/
|
|
||||||
height: 150px;
|
|
||||||
}
|
|
||||||
form small {
|
|
||||||
margin: 3px 0 0 0;
|
|
||||||
display: block;
|
|
||||||
clear: left;
|
|
||||||
}
|
|
||||||
form .button {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
form #passwordLabel, form #password {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
102
img/WordArt/WordArt Copse.svg
Normal file
102
img/WordArt/WordArt Copse.svg
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="1785.8772"
|
||||||
|
height="37.343998"
|
||||||
|
id="svg3245"
|
||||||
|
version="1.1"
|
||||||
|
inkscape:version="0.48.4 r9939"
|
||||||
|
sodipodi:docname="New document 9">
|
||||||
|
<defs
|
||||||
|
id="defs3247" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="0.66125533"
|
||||||
|
inkscape:cx="885.47012"
|
||||||
|
inkscape:cy="79.926821"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="false"
|
||||||
|
fit-margin-top="0"
|
||||||
|
fit-margin-left="0"
|
||||||
|
fit-margin-right="0"
|
||||||
|
fit-margin-bottom="0"
|
||||||
|
inkscape:window-width="1670"
|
||||||
|
inkscape:window-height="821"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="22"
|
||||||
|
inkscape:window-maximized="0" />
|
||||||
|
<metadata
|
||||||
|
id="metadata3250">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(635.23282,-279.42656)">
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:35.2932663px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
|
||||||
|
x="-638.04181"
|
||||||
|
y="220.68825"
|
||||||
|
id="text3253"
|
||||||
|
sodipodi:linespacing="125%"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan3255"
|
||||||
|
x="-638.04181"
|
||||||
|
y="220.68825" /><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
x="-638.04181"
|
||||||
|
y="264.80484"
|
||||||
|
id="tspan3257"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Copse;-inkscape-font-specification:Copse" /><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
x="-638.04181"
|
||||||
|
y="308.44699"
|
||||||
|
id="tspan3259"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Copse;-inkscape-font-specification:Copse">!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~</tspan><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
x="-638.04181"
|
||||||
|
y="352.56357"
|
||||||
|
id="tspan3261"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Copse;-inkscape-font-specification:Copse" /><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
x="-638.04181"
|
||||||
|
y="396.68018"
|
||||||
|
id="tspan3263"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Copse;-inkscape-font-specification:Copse" /></text>
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Times New Roman;-inkscape-font-specification:Times New Roman"
|
||||||
|
x="488.13605"
|
||||||
|
y="59.544075"
|
||||||
|
id="text3016"
|
||||||
|
sodipodi:linespacing="125%"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan3018"
|
||||||
|
x="488.13605"
|
||||||
|
y="59.544075" /></text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.7 KiB |
BIN
img/buttons/btnArrow.xcf
Normal file
BIN
img/buttons/btnArrow.xcf
Normal file
Binary file not shown.
BIN
img/buttons/btnEditOpen.xcf
Normal file
BIN
img/buttons/btnEditOpen.xcf
Normal file
Binary file not shown.
BIN
img/buttons/btnHeight.xcf
Normal file
BIN
img/buttons/btnHeight.xcf
Normal file
Binary file not shown.
BIN
img/buttons/btnMove.xcf
Normal file
BIN
img/buttons/btnMove.xcf
Normal file
Binary file not shown.
BIN
img/buttons/btnRotate.xcf
Normal file
BIN
img/buttons/btnRotate.xcf
Normal file
Binary file not shown.
BIN
img/buttons/btnTwist.xcf
Normal file
BIN
img/buttons/btnTwist.xcf
Normal file
Binary file not shown.
BIN
img/buttons/btnZoom.xcf
Normal file
BIN
img/buttons/btnZoom.xcf
Normal file
Binary file not shown.
864
img/shapeIcons.ai
Normal file
864
img/shapeIcons.ai
Normal file
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
BIN
img_old/icon.png
BIN
img_old/icon.png
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
78
js/AddShapeDialog.js
Normal file
78
js/AddShapeDialog.js
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
var shapeResolution=3;
|
||||||
|
var shapePopup;
|
||||||
|
|
||||||
|
function initShapeDialog() {
|
||||||
|
shapePopup = new Popup($("#popupShape"), $("#popupMask"));
|
||||||
|
$("#btnShapeOk").on("onButtonClick", shapePopup.commit);
|
||||||
|
$("#btnShapeCancel").on("onButtonClick", shapePopup.cancel);
|
||||||
|
$("#popupShape").bind("onPopupCancel", onShapeCancel);
|
||||||
|
$("#popupShape").bind("onPopupCommit", onShapeOk);
|
||||||
|
|
||||||
|
$("#btnShapePlus").on("onButtonHold",onShapePlus);
|
||||||
|
$("#btnShapeMin").on("onButtonHold",onShapeMin);
|
||||||
|
updateShapePreview();
|
||||||
|
}
|
||||||
|
|
||||||
|
function showShapeDialog() {
|
||||||
|
shapePopup.open();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onShapeCancel() {
|
||||||
|
}
|
||||||
|
|
||||||
|
function onShapeOk() {
|
||||||
|
var res = shapeResolution;
|
||||||
|
|
||||||
|
if (res!=undefined) {
|
||||||
|
if (isNaN(res)) res=3;
|
||||||
|
if (res<2) res=2;
|
||||||
|
if (res>100) res=100;
|
||||||
|
drawCircle(canvasWidth/2,canvasHeight/2,80,res);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onShapePlus() {
|
||||||
|
shapeResolution++;
|
||||||
|
if (shapeResolution>50) shapeResolution=50;
|
||||||
|
updateShapePreview();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onShapeMin() {
|
||||||
|
shapeResolution--;
|
||||||
|
if (shapeResolution<2) shapeResolution=2;
|
||||||
|
updateShapePreview();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateShapePreview() {
|
||||||
|
$(".lblShapeResolution").text(shapeResolution + " sides");
|
||||||
|
|
||||||
|
var canvas = $("#shapePreview")[0];
|
||||||
|
var c = canvas.getContext('2d');
|
||||||
|
var w = canvas.width;
|
||||||
|
var h = canvas.height;
|
||||||
|
console.log(w,h);
|
||||||
|
var r = w/2 - 20;
|
||||||
|
var x0 = w/2;
|
||||||
|
var y0 = h/2;
|
||||||
|
var res = shapeResolution;
|
||||||
|
var step = Math.PI * 2.0 / res;
|
||||||
|
|
||||||
|
c.save();
|
||||||
|
c.clearRect(0,0,canvas.width, canvas.height);
|
||||||
|
c.restore();
|
||||||
|
c.beginPath();
|
||||||
|
for (var a=0; a<Math.PI*2; a+=step) {
|
||||||
|
var x = Math.sin(a+Math.PI) * r + x0;
|
||||||
|
var y = Math.cos(a+Math.PI) * r + y0;
|
||||||
|
if (a==0) c.moveTo(x,y);
|
||||||
|
else c.lineTo(x,y);
|
||||||
|
}
|
||||||
|
//close shape
|
||||||
|
var x = Math.sin(0+Math.PI) * r + x0;
|
||||||
|
var y = Math.cos(0+Math.PI) * r + y0;
|
||||||
|
c.lineTo(x,y);
|
||||||
|
|
||||||
|
//draw shape
|
||||||
|
c.lineWidth = 2;
|
||||||
|
c.stroke();
|
||||||
|
}
|
||||||
139
js/Button.js
Normal file
139
js/Button.js
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
(function($) {
|
||||||
|
|
||||||
|
var clickEnabled = true;
|
||||||
|
|
||||||
|
$.fn.Button = function() {
|
||||||
|
return $(this).each(function(){
|
||||||
|
$.Button($(this)[0]);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
$.Button = function(element) {
|
||||||
|
var downTimerFPS = 20;
|
||||||
|
var _timer = undefined;
|
||||||
|
var _x,_y;
|
||||||
|
var isDown = false;
|
||||||
|
|
||||||
|
var updateCursor = function(e) {
|
||||||
|
// retrieve cursor position relative to element
|
||||||
|
if (e.offsetX != undefined) {
|
||||||
|
_x = e.offsetX;
|
||||||
|
_y = e.offsetY;
|
||||||
|
} else if(e.pageX != undefined) {
|
||||||
|
// http://www.quirksmode.org/mobile/tableViewport_desktop.html#t11
|
||||||
|
var offset = $(element).offset();
|
||||||
|
_x = e.pageX - offset.left;
|
||||||
|
_y = e.pageY - offset.top;
|
||||||
|
} else if(e.originalEvent != undefined && e.originalEvent.pageX != undefined) {
|
||||||
|
//http://css-tricks.com/the-javascript-behind-touch-friendly-sliders/
|
||||||
|
var offset = $(element).offset();
|
||||||
|
_x = e.originalEvent.pageX - offset.left;
|
||||||
|
_y = e.originalEvent.pageY - offset.top;
|
||||||
|
}
|
||||||
|
|
||||||
|
//android+chrome-specific hack
|
||||||
|
if (e.originalEvent.changedTouches != undefined) {
|
||||||
|
var offset = $(element).offset();
|
||||||
|
_x = e.originalEvent.changedTouches[0].pageX - offset.left;
|
||||||
|
_y = e.originalEvent.changedTouches[0].pageY - offset.top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var startDownTimer = function() {
|
||||||
|
if (_timer==undefined) {
|
||||||
|
_timer = setInterval(onDownTimerInterval, 1000/downTimerFPS);
|
||||||
|
isDown = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var stopDownTimer = function() {
|
||||||
|
clearInterval(_timer);
|
||||||
|
_timer = undefined;
|
||||||
|
isDown = false;
|
||||||
|
// _x = undefined;
|
||||||
|
// _y = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
var onDownTimerInterval = function() {
|
||||||
|
if (_x!=undefined && _y!=undefined) {
|
||||||
|
$(element).trigger("onButtonHold",{x:_x,y:_y});
|
||||||
|
} else {
|
||||||
|
console.log("Button: warning... _x or _y not set...");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var onTouchStart = function(e) {
|
||||||
|
clickEnabled = false;
|
||||||
|
updateCursor(e);
|
||||||
|
startDownTimer();
|
||||||
|
$(element).trigger("onButtonClick",{x:_x,y:_y});
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
var onTouchEnd = function(e) {
|
||||||
|
updateCursor(e);
|
||||||
|
stopDownTimer();
|
||||||
|
}
|
||||||
|
|
||||||
|
var onTouchMove = function(e) {
|
||||||
|
updateCursor(e);
|
||||||
|
startDownTimer();
|
||||||
|
}
|
||||||
|
|
||||||
|
var onMouseDown = function(e) {
|
||||||
|
updateCursor(e);
|
||||||
|
startDownTimer();
|
||||||
|
}
|
||||||
|
|
||||||
|
var onMouseUp = function(e) {
|
||||||
|
updateCursor(e);
|
||||||
|
stopDownTimer();
|
||||||
|
}
|
||||||
|
|
||||||
|
var onMouseMove = function(e) {
|
||||||
|
updateCursor(e);
|
||||||
|
if (isDown) onMouseDrag(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
var onMouseDrag = function(e) {
|
||||||
|
updateCursor(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
var onDocumentMouseUp = function(e) {
|
||||||
|
stopDownTimer();
|
||||||
|
}
|
||||||
|
|
||||||
|
var onClick = function(e) {
|
||||||
|
if(!clickEnabled) return;
|
||||||
|
updateCursor(e);
|
||||||
|
stopDownTimer();
|
||||||
|
$(element).trigger("onButtonClick",{x:_x,y:_y});
|
||||||
|
}
|
||||||
|
|
||||||
|
var onStartDrag = function(e) {
|
||||||
|
}
|
||||||
|
|
||||||
|
var onContextMenu = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
//this needs to be done after the function declarations
|
||||||
|
|
||||||
|
$(element).bind({
|
||||||
|
touchstart: onTouchStart,
|
||||||
|
touchend: onTouchEnd,
|
||||||
|
touchmove: onTouchMove,
|
||||||
|
mousedown: onMouseDown,
|
||||||
|
mouseup: onMouseUp,
|
||||||
|
mousemove: onMouseMove,
|
||||||
|
contextmenu: onContextMenu,
|
||||||
|
click: onClick
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).on("mouseup", onDocumentMouseUp);
|
||||||
|
$(element).css("-webkit-user-select","none");
|
||||||
|
$(element).css("-webkit-touch-callout","none");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}(jQuery));
|
||||||
64
js/Class.js
Normal file
64
js/Class.js
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
/* Simple JavaScript Inheritance
|
||||||
|
* By John Resig http://ejohn.org/
|
||||||
|
* MIT Licensed.
|
||||||
|
*/
|
||||||
|
// Inspired by base2 and Prototype
|
||||||
|
(function(){
|
||||||
|
var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
|
||||||
|
|
||||||
|
// The base Class implementation (does nothing)
|
||||||
|
this.Class = function(){};
|
||||||
|
|
||||||
|
// Create a new Class that inherits from this class
|
||||||
|
Class.extend = function(prop) {
|
||||||
|
var _super = this.prototype;
|
||||||
|
|
||||||
|
// Instantiate a base class (but only create the instance,
|
||||||
|
// don't run the init constructor)
|
||||||
|
initializing = true;
|
||||||
|
var prototype = new this();
|
||||||
|
initializing = false;
|
||||||
|
|
||||||
|
// Copy the properties over onto the new prototype
|
||||||
|
for (var name in prop) {
|
||||||
|
// Check if we're overwriting an existing function
|
||||||
|
prototype[name] = typeof prop[name] == "function" &&
|
||||||
|
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
|
||||||
|
(function(name, fn){
|
||||||
|
return function() {
|
||||||
|
var tmp = this._super;
|
||||||
|
|
||||||
|
// Add a new ._super() method that is the same method
|
||||||
|
// but on the super-class
|
||||||
|
this._super = _super[name];
|
||||||
|
|
||||||
|
// The method only need to be bound temporarily, so we
|
||||||
|
// remove it when we're done executing
|
||||||
|
var ret = fn.apply(this, arguments);
|
||||||
|
this._super = tmp;
|
||||||
|
|
||||||
|
return ret;
|
||||||
|
};
|
||||||
|
})(name, prop[name]) :
|
||||||
|
prop[name];
|
||||||
|
}
|
||||||
|
|
||||||
|
// The dummy class constructor
|
||||||
|
function Class() {
|
||||||
|
// All construction is actually done in the init method
|
||||||
|
if ( !initializing && this.init )
|
||||||
|
this.init.apply(this, arguments);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Populate our constructed prototype object
|
||||||
|
Class.prototype = prototype;
|
||||||
|
|
||||||
|
// Enforce the constructor to be what we expect
|
||||||
|
Class.prototype.constructor = Class;
|
||||||
|
|
||||||
|
// And make this class extendable
|
||||||
|
Class.extend = arguments.callee;
|
||||||
|
|
||||||
|
return Class;
|
||||||
|
};
|
||||||
|
})();
|
||||||
@ -80,51 +80,17 @@ function GrandTour(_name) {
|
|||||||
|
|
||||||
var dataset = $(this)[0].$li[0].dataset;
|
var dataset = $(this)[0].$li[0].dataset;
|
||||||
if (dataset.action != undefined) {
|
if (dataset.action != undefined) {
|
||||||
console.log(" THERE'S AN ACTION!");
|
|
||||||
switch (dataset.action) {
|
switch (dataset.action) {
|
||||||
case "sayHello":
|
|
||||||
console.log(" action: sayHello");
|
|
||||||
break;
|
|
||||||
case "showMessage":
|
case "showMessage":
|
||||||
console.log(" action: showMessage");
|
console.log(" action: showMessage");
|
||||||
message.set("This is a status message...", Message.NOTICE);
|
message.set("This is a status message...", Message.NOTICE);
|
||||||
// message.show();
|
|
||||||
break;
|
|
||||||
case "showProgressBar":
|
|
||||||
console.log(" action: showProgressBar");
|
|
||||||
progressbar.show();
|
|
||||||
break;
|
|
||||||
case "showThermometer":
|
|
||||||
console.log(" action: showThermometer");
|
|
||||||
thermometer.show();
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
this.postStepCallback = function(index, tip) {
|
this.postStepCallback = function(index, tip) {
|
||||||
console.log("GrandTour >> f:postStepCallback() >> index: " + index);
|
//console.log("GrandTour >> f:postStepCallback() >> index: " + index);
|
||||||
|
// var dataset = $(this)[0].$li[0].dataset;
|
||||||
var dataset = $(this)[0].$li[0].dataset;
|
|
||||||
if (dataset.action != undefined) {
|
|
||||||
console.log(" THERE *WAS* AN ACTION!");
|
|
||||||
switch (dataset.action) {
|
|
||||||
case "sayHello":
|
|
||||||
// console.log(" action: sayHello");
|
|
||||||
break;
|
|
||||||
case "showMessage":
|
|
||||||
// console.log(" action: showMessage");
|
|
||||||
// message.hide();
|
|
||||||
break;
|
|
||||||
case "showProgressBar":
|
|
||||||
// console.log(" action: showProgressBar");
|
|
||||||
// progressbar.hide();
|
|
||||||
break;
|
|
||||||
case "showThermometer":
|
|
||||||
// console.log(" action: showThermometer");
|
|
||||||
// thermometer.hide();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
this.postRideCallback = function(index, tip) {
|
this.postRideCallback = function(index, tip) {
|
||||||
// console.log("GrandTour >> f:postRideCallback() >> index: " + index + ", self.active: " + self.active);
|
// console.log("GrandTour >> f:postRideCallback() >> index: " + index + ", self.active: " + self.active);
|
||||||
104
js/Keyboard.js
Normal file
104
js/Keyboard.js
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
var keyboardShortcutsEnabled = true;
|
||||||
|
var keyboardEscapeEnterEnabled = false;
|
||||||
|
var wordBuffer = "";
|
||||||
|
|
||||||
|
var wordFuncs = {
|
||||||
|
"idbeholdl": function() {
|
||||||
|
alert("Light!");
|
||||||
|
},
|
||||||
|
"idspispopd": function() {
|
||||||
|
drawTextOnCanvas("Im in ur kanvas drawin' ur stuffz.");
|
||||||
|
},
|
||||||
|
"dia": function() {
|
||||||
|
var cx = canvasWidth / 2;
|
||||||
|
var cy = canvasHeight /2;
|
||||||
|
drawCircle(cx, cy, 50, 4);
|
||||||
|
shapeMoveTo(cx - 20, cy);
|
||||||
|
shapeLineTo(cx + 20, cy);
|
||||||
|
shapeMoveTo(cx, cy - 20);
|
||||||
|
shapeLineTo(cx, cy + 20);
|
||||||
|
},
|
||||||
|
"stats": function() {
|
||||||
|
var text = "Shape statistics:\nNumber of points: " + _points.length;
|
||||||
|
alert(text);
|
||||||
|
},
|
||||||
|
"pdump": function() {
|
||||||
|
console.log("points array: " + _points);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function initKeyboard() {
|
||||||
|
|
||||||
|
$(document).keypress(function(event) {
|
||||||
|
|
||||||
|
if (keyboardEscapeEnterEnabled) {
|
||||||
|
switch (event.keyCode) {
|
||||||
|
case 13:
|
||||||
|
$(document).trigger("onEnterKey");
|
||||||
|
break;
|
||||||
|
case 27:
|
||||||
|
$(document).trigger("onEscapeKey");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!keyboardShortcutsEnabled) return;
|
||||||
|
if (event.ctrlKey && event.altKey && ! event.metaKey) processWords(event);
|
||||||
|
if (event.altKey || event.ctrlKey || event.metaKey) return; //ignore key presses with modifier keys except shift
|
||||||
|
|
||||||
|
var ch = String.fromCharCode(event.which);
|
||||||
|
|
||||||
|
switch (ch) {
|
||||||
|
case 'c': clearDoodle(); break;
|
||||||
|
case 'n': clearDoodle(); break;
|
||||||
|
case 'p': print(); break;
|
||||||
|
case 'u': oopsUndo(); break;
|
||||||
|
case 'g': settingsWindow.downloadGcode(); break;
|
||||||
|
case 'q': stopPrint(); break;
|
||||||
|
case ',': openSettingsWindow(); break;
|
||||||
|
case 'h': previewUp(true); break;
|
||||||
|
case 'H': previewDown(true); break;
|
||||||
|
case 's': saveSketch(); break;
|
||||||
|
case 'L': nextDoodle(); break;
|
||||||
|
case 'l': prevDoodle(); break;
|
||||||
|
case '[': previewTwistLeft(); break;
|
||||||
|
case ']': previewTwistRight(); break;
|
||||||
|
case '|': resetTwist(); break;
|
||||||
|
case 't': showWordArtDialog(); break;
|
||||||
|
case 'i': showShapeDialog(); break;
|
||||||
|
|
||||||
|
case ';': moveShape(-5,0); break;
|
||||||
|
case '\'': moveShape(5,0); break;
|
||||||
|
case '-': zoomShape(.95); break;
|
||||||
|
case '+': zoomShape(1.05); break;
|
||||||
|
case 'r': rotateShape(.1); break;
|
||||||
|
case 'R': rotateShape(-.1); break;
|
||||||
|
|
||||||
|
//default: console.log("Key: '" + ch + "' (" + event.which + ")");
|
||||||
|
}
|
||||||
|
if(event.which != 13) { // don't prevent enter usage, it's used in tour
|
||||||
|
event.preventDefault(); //prevents the character to end up in a focussed textfield
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function processWords(e) {
|
||||||
|
wordBuffer += String.fromCharCode(e.which);
|
||||||
|
|
||||||
|
var match = false;
|
||||||
|
for (var k in wordFuncs) {
|
||||||
|
if (k.indexOf(wordBuffer) == 0) {
|
||||||
|
if (k.length == wordBuffer.length) match = wordFuncs[k];
|
||||||
|
else match = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof(match) == 'function') {
|
||||||
|
match();
|
||||||
|
wordBuffer = "";
|
||||||
|
} else if (!match) {
|
||||||
|
wordBuffer = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
45
js/Popup.js
Normal file
45
js/Popup.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
function Popup(element, mask) {
|
||||||
|
var autoCloseEnabled = true;
|
||||||
|
var enterEnabled = true;
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
this.open = function(complete, disableMaskClick) {
|
||||||
|
mask.fadeIn(POPUP_SHOW_DURATION);
|
||||||
|
element.fadeIn(POPUP_SHOW_DURATION, complete);
|
||||||
|
|
||||||
|
keyboardShortcutsEnabled = false;
|
||||||
|
keyboardEscapeEnterEnabled = true;
|
||||||
|
|
||||||
|
document.body.removeEventListener('touchmove', prevent, false);
|
||||||
|
mask.bind("onButtonClick", self.cancel);
|
||||||
|
$(document).bind("onEscapeKey", self.cancel);
|
||||||
|
if (enterEnabled) $(document).bind("onEnterKey", self.commit);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.close = function(complete) {
|
||||||
|
mask.fadeOut(POPUP_SHOW_DURATION);
|
||||||
|
element.fadeOut(POPUP_SHOW_DURATION, complete);
|
||||||
|
|
||||||
|
keyboardShortcutsEnabled = true;
|
||||||
|
keyboardEscapeEnterEnabled = false;
|
||||||
|
|
||||||
|
document.body.addEventListener('touchmove', prevent, false);
|
||||||
|
mask.unbind("onButtonClick", self.cancel);
|
||||||
|
$(document).unbind("onEscapeKey", self.cancel);
|
||||||
|
if (enterEnabled) $(document).unbind("onEnterKey", self.commit);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setEnterEnabled = function(enabled) { enterEnabled = enabled; }
|
||||||
|
|
||||||
|
this.setAutoCloseEnabled = function(enabled) { autoCloseEnabled = enabled; }
|
||||||
|
|
||||||
|
this.cancel = function() {
|
||||||
|
$(element).trigger('onPopupCancel');
|
||||||
|
if (autoCloseEnabled) self.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.commit = function() {
|
||||||
|
$(element).trigger('onPopupCommit');
|
||||||
|
if (autoCloseEnabled) self.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -191,9 +191,9 @@ function Printer() {
|
|||||||
} else {
|
} else {
|
||||||
// only if the state hasn't bin changed (by for example pressing stop) we send more gcode
|
// only if the state hasn't bin changed (by for example pressing stop) we send more gcode
|
||||||
|
|
||||||
console.log("Printer:sendPrintPart:gcode part received (state: ",self.state,")");
|
//console.log("Printer:sendPrintPart:gcode part received (state: ",self.state,")");
|
||||||
if(self.state == Printer.PRINTING_STATE || self.state == Printer.BUFFERING_STATE) {
|
if(self.state == Printer.PRINTING_STATE || self.state == Printer.BUFFERING_STATE) {
|
||||||
console.log("Printer:sendPrintPart:sending next part");
|
//console.log("Printer:sendPrintPart:sending next part");
|
||||||
self.sendPrintPart(sendIndex + sendLength, sendLength);
|
self.sendPrintPart(sendIndex + sendLength, sendLength);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -271,7 +271,7 @@ function Printer() {
|
|||||||
clearTimeout(self.retryCheckStatusDelay);
|
clearTimeout(self.retryCheckStatusDelay);
|
||||||
}
|
}
|
||||||
this.checkStatus = function() {
|
this.checkStatus = function() {
|
||||||
console.log("Printer:checkStatus");
|
//console.log("Printer:checkStatus");
|
||||||
this.stateOverruled = false;
|
this.stateOverruled = false;
|
||||||
//console.log(" stateOverruled: ",this.stateOverruled);
|
//console.log(" stateOverruled: ",this.stateOverruled);
|
||||||
var self = this;
|
var self = this;
|
||||||
@ -302,7 +302,7 @@ function Printer() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.handleStatusUpdate = function(response) {
|
this.handleStatusUpdate = function(response) {
|
||||||
console.log("Printer:handleStatusUpdate response: ",response);
|
//console.log("Printer:handleStatusUpdate response: ",response);
|
||||||
var data = response.data;
|
var data = response.data;
|
||||||
if(response.status != "success") {
|
if(response.status != "success") {
|
||||||
self.state = Printer.UNKNOWN_STATE;
|
self.state = Printer.UNKNOWN_STATE;
|
||||||
792
js/SettingsWindow.js
Normal file
792
js/SettingsWindow.js
Normal file
@ -0,0 +1,792 @@
|
|||||||
|
/*
|
||||||
|
* This file is part of the Doodle3D project (http://doodle3d.com).
|
||||||
|
*
|
||||||
|
* Copyright (c) 2013, Doodle3D
|
||||||
|
* This software is licensed under the terms of the GNU GPL v2 or later.
|
||||||
|
* See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
|
||||||
|
*/
|
||||||
|
|
||||||
|
//these settings are defined in the firmware (conf_defaults.lua) and will be initialized in loadSettings()
|
||||||
|
var settings = {};
|
||||||
|
var settingsPopup;
|
||||||
|
//wrapper to prevent scoping issues in showSettings()
|
||||||
|
function openSettingsWindow() {
|
||||||
|
settingsWindow.loadSettings(function() { // reload settings
|
||||||
|
settingsPopup.open();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function SettingsWindow() {
|
||||||
|
this.wifiboxURL;
|
||||||
|
this.wifiboxCGIBinURL;
|
||||||
|
this.window;
|
||||||
|
this.btnOK;
|
||||||
|
this.form;
|
||||||
|
this.timeoutTime = 3000;
|
||||||
|
this.saveSettingsTimeoutTime = 8000;
|
||||||
|
this.retryDelay = 2000; // retry setTimout delay
|
||||||
|
this.retryRetrieveNetworkStatusDelayTime = 1000;// retry setTimout delay
|
||||||
|
|
||||||
|
this.retryLoadSettingsDelay; // retry setTimout instance
|
||||||
|
this.retrySaveSettingsDelay; // retry setTimout instance
|
||||||
|
this.retryResetSettingsDelay; // retry setTimout instance
|
||||||
|
this.retryRetrieveNetworkStatusDelay;// retry setTimout instance
|
||||||
|
|
||||||
|
this.apFieldSet;
|
||||||
|
this.clientFieldSet;
|
||||||
|
this.restoreStateField;
|
||||||
|
this.networks;
|
||||||
|
this.currentNetwork; // the ssid of the network the box is on
|
||||||
|
this.selectedNetwork; // the ssid of the selected network in the client mode settings
|
||||||
|
this.currentLocalIP = "";
|
||||||
|
this.clientModeState = SettingsWindow.NOT_CONNECTED;
|
||||||
|
this.currentAP;
|
||||||
|
this.apModeState = SettingsWindow.NO_AP;
|
||||||
|
|
||||||
|
// after switching wifi network or creating a access point we delay the status retrieval
|
||||||
|
// because the webserver needs time to switch
|
||||||
|
this.retrieveNetworkStatusDelay; // setTimout delay
|
||||||
|
this.retrieveNetworkStatusDelayTime = 1000;
|
||||||
|
|
||||||
|
this.restoredStateHideDelayTime = 3000;
|
||||||
|
this.restoredStateHideDelay; // setTimout instance
|
||||||
|
|
||||||
|
// Events
|
||||||
|
SettingsWindow.SETTINGS_LOADED = "settingsLoaded";
|
||||||
|
|
||||||
|
// network client mode states
|
||||||
|
SettingsWindow.NOT_CONNECTED = "not connected"; // also used as first item in networks list
|
||||||
|
SettingsWindow.CONNECTED = "connected";
|
||||||
|
SettingsWindow.CONNECTING = "connecting";
|
||||||
|
SettingsWindow.CONNECTING_FAILED = "connecting failed";
|
||||||
|
|
||||||
|
// network access point mode states
|
||||||
|
SettingsWindow.NO_AP = "no ap";
|
||||||
|
SettingsWindow.AP = "ap";
|
||||||
|
SettingsWindow.CREATING_AP = "creating ap";
|
||||||
|
|
||||||
|
SettingsWindow.API_CONNECTING_FAILED = -1;
|
||||||
|
SettingsWindow.API_NOT_CONNECTED = 0;
|
||||||
|
SettingsWindow.API_CONNECTING = 1;
|
||||||
|
SettingsWindow.API_CONNECTED = 2;
|
||||||
|
SettingsWindow.API_CREATING = 3;
|
||||||
|
SettingsWindow.API_CREATED = 4;
|
||||||
|
|
||||||
|
// network mode
|
||||||
|
SettingsWindow.NETWORK_MODE_NEITHER = "neither";
|
||||||
|
SettingsWindow.NETWORK_MODE_CLIENT = "clientMode";
|
||||||
|
SettingsWindow.NETWORK_MODE_ACCESS_POINT = "accessPointMode";
|
||||||
|
|
||||||
|
this.networkMode = SettingsWindow.NETWORK_MODE_NEITHER;
|
||||||
|
|
||||||
|
this.updatePanel = new UpdatePanel();
|
||||||
|
this.printerPanel = new PrinterPanel();
|
||||||
|
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
this.init = function(wifiboxURL,wifiboxCGIBinURL) {
|
||||||
|
this.wifiboxURL = wifiboxURL;
|
||||||
|
this.wifiboxCGIBinURL = wifiboxCGIBinURL;
|
||||||
|
|
||||||
|
this.window = $("#popupSettings");
|
||||||
|
this.btnOK = this.window.find(".btnOK");
|
||||||
|
settingsPopup = new Popup($("#popupSettings"), $("#popupMask"));
|
||||||
|
settingsPopup.setEnterEnabled(false);
|
||||||
|
settingsPopup.setAutoCloseEnabled(false);
|
||||||
|
|
||||||
|
enableButton(this.btnOK,settingsPopup.commit);
|
||||||
|
$("#popupSettings").bind("onPopupCancel", function() { settingsPopup.close(); } );
|
||||||
|
$("#popupSettings").bind("onPopupCommit", self.submitwindow);
|
||||||
|
|
||||||
|
this.window.find("#settingsContainer").load("settings.html", function() {
|
||||||
|
console.log("Settings:finished loading settings.html, now loading settings...");
|
||||||
|
|
||||||
|
self.form = self.window.find("form");
|
||||||
|
self.form.submit(function (e) { self.submitwindow(e); });
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: self.wifiboxURL + "/printer/listall",
|
||||||
|
dataType: 'json',
|
||||||
|
timeout: self.timeoutTime,
|
||||||
|
success: function(response) {
|
||||||
|
console.log("Settings:printer/listall response: ",response.data.printers);
|
||||||
|
|
||||||
|
$.each(response.data.printers, function(key, value) {
|
||||||
|
// console.log(key,value);
|
||||||
|
$('#printerType').append($('<option>').text(value).attr('value', key));
|
||||||
|
});
|
||||||
|
|
||||||
|
self.loadSettings();
|
||||||
|
|
||||||
|
var btnAP = self.form.find("label[for='ap']");
|
||||||
|
var btnClient = self.form.find("label[for='client']");
|
||||||
|
var btnRefresh = self.form.find("#refreshNetworks");
|
||||||
|
var btnConnect = self.form.find("#connectToNetwork");
|
||||||
|
var btnCreate = self.form.find("#createAP");
|
||||||
|
var networkSelector = self.form.find("#network");
|
||||||
|
self.apFieldSet = self.form.find("#apSettings");
|
||||||
|
self.clientFieldSet = self.form.find("#clientSettings");
|
||||||
|
self.btnRestoreSettings = self.form.find("#restoreSettings");
|
||||||
|
self.restoreStateField = self.form.find("#restoreState");
|
||||||
|
|
||||||
|
btnAP.on('touchstart mousedown',self.showAPSettings);
|
||||||
|
btnClient.on('touchstart mousedown',self.showClientSettings);
|
||||||
|
btnRefresh.on('touchstart mousedown',self.refreshNetworks);
|
||||||
|
btnConnect.on('touchstart mousedown',self.connectToNetwork);
|
||||||
|
btnCreate.on('touchstart mousedown',self.createAP);
|
||||||
|
networkSelector.change(self.networkSelectorChanged);
|
||||||
|
self.btnRestoreSettings.on('touchstart mousedown',self.resetSettings);
|
||||||
|
|
||||||
|
// update panel
|
||||||
|
var $updatePanelElement = self.form.find("#updatePanel");
|
||||||
|
self.updatePanel.init(wifiboxURL,$updatePanelElement);
|
||||||
|
|
||||||
|
// printer panel
|
||||||
|
var $printerPanelElement = self.form.find("#printerPanel");
|
||||||
|
self.printerPanel.init(wifiboxURL,$printerPanelElement);
|
||||||
|
self.printerPanel.fillForm = self.fillForm;
|
||||||
|
}
|
||||||
|
}).fail(function() {
|
||||||
|
console.log("FATAL ERROR: Settings:printer/listall failed");
|
||||||
|
});
|
||||||
|
}); //this.window.find
|
||||||
|
|
||||||
|
}; //this.init
|
||||||
|
|
||||||
|
this.openSettings = function() {
|
||||||
|
self.loadSettings(function() { // reload settings
|
||||||
|
settingsPopup.open();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// this.closeSettings = function(complete) {
|
||||||
|
// settingsPopup.close(complete);
|
||||||
|
// };
|
||||||
|
|
||||||
|
this.submitwindow = function(e) {
|
||||||
|
disableButton(self.btnOK,settingsPopup.commit);
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
self.saveSettings(self.readForm(),function(success){
|
||||||
|
if(success) {
|
||||||
|
settingsPopup.close();
|
||||||
|
self.signin();
|
||||||
|
}
|
||||||
|
enableButton(self.btnOK,settingsPopup.commit);
|
||||||
|
});
|
||||||
|
|
||||||
|
clearTimeout(self.retryRetrieveNetworkStatusDelay);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.loadSettings = function(complete) {
|
||||||
|
if (!communicateWithWifibox) {
|
||||||
|
console.log(" communicateWithWifibox is false: settings aren't being loaded from wifibox...");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.log("Settings:loadSettings() >> getting new data...");
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: this.wifiboxURL + "/config/all",
|
||||||
|
dataType: 'json',
|
||||||
|
timeout: this.timeoutTime,
|
||||||
|
success: function(response){
|
||||||
|
console.log("Settings:loadSettings response: ",response);
|
||||||
|
settings = response.data;
|
||||||
|
console.log(" settings: ",settings);
|
||||||
|
self.fillForm(settings);
|
||||||
|
$(document).trigger(SettingsWindow.SETTINGS_LOADED);
|
||||||
|
if(complete) complete();
|
||||||
|
}
|
||||||
|
}).fail(function() {
|
||||||
|
console.log("Settings:loadSettings: failed");
|
||||||
|
clearTimeout(self.retryLoadSettingsDelay);
|
||||||
|
self.retryLoadSettingsDelay = setTimeout(function() { self.loadSettings(); },self.retryDelay); // retry after delay
|
||||||
|
});
|
||||||
|
|
||||||
|
this.refreshNetworks();
|
||||||
|
this.retrieveNetworkStatus(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.fillForm = function(settings,form) {
|
||||||
|
if(!form) form = this.form; // if no form specified, fill whole form
|
||||||
|
|
||||||
|
//fill form with loaded settings
|
||||||
|
var selects = form.find("select");
|
||||||
|
selects.each( function(index,element) {
|
||||||
|
var elem = $(element);
|
||||||
|
elem.val(settings[elem.attr('name')]);
|
||||||
|
});
|
||||||
|
var inputs = form.find("input");
|
||||||
|
inputs.each( function(index,element) {
|
||||||
|
var elem = $(element);
|
||||||
|
//console.log("printer setting input: ",index,element.attr("type"),element.attr('name')); //,element);
|
||||||
|
switch(elem.attr("type")) {
|
||||||
|
case "text":
|
||||||
|
case "number":
|
||||||
|
elem.val(settings[elem.attr('name')]);
|
||||||
|
break;
|
||||||
|
case "checkbox":
|
||||||
|
elem.prop('checked', settings[elem.attr('name')]);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
var textareas = form.find("textarea");
|
||||||
|
textareas.each( function(index,element) {
|
||||||
|
var elem = $(element);
|
||||||
|
var value = settings[elem.attr('name')];
|
||||||
|
elem.val(value);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
this.saveSettings = function(newSettings,complete) {
|
||||||
|
settings = newSettings; // store new settings in global settings
|
||||||
|
if (communicateWithWifibox) {
|
||||||
|
$.ajax({
|
||||||
|
url: self.wifiboxCGIBinURL + "/config",
|
||||||
|
type: "POST",
|
||||||
|
data: newSettings,
|
||||||
|
dataType: 'json',
|
||||||
|
timeout: self.saveSettingsTimeoutTime,
|
||||||
|
success: function(response){
|
||||||
|
console.log("Settings:saveSettings response: ",response);
|
||||||
|
if(response.status == "error") {
|
||||||
|
clearTimeout(self.retrySaveSettingsDelay);
|
||||||
|
self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings(settings,complete); },self.retryDelay); // retry after delay
|
||||||
|
} else {
|
||||||
|
var data = response.data;
|
||||||
|
var validation = data.validation;
|
||||||
|
self.clearValidationErrors();
|
||||||
|
var validated = true;
|
||||||
|
$.each(validation, function(key, val) {
|
||||||
|
if (val != "ok") {
|
||||||
|
console.log("ERROR: setting '" + key + "' not successfully set. Message: " + val);
|
||||||
|
self.displayValidationError(key,val);
|
||||||
|
validated = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
settings.substituted_ssid = data.substituted_ssid;
|
||||||
|
if(complete) complete(validated);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).fail(function() {
|
||||||
|
console.log("Settings:saveSettings: failed");
|
||||||
|
clearTimeout(self.retrySaveSettingsDelay);
|
||||||
|
self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings(settings,complete); },self.retryDelay); // retry after delay
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.resetSettings = function() {
|
||||||
|
console.log("resetSettings");
|
||||||
|
//$("#restoreSettings").addClass("disabled");
|
||||||
|
self.btnRestoreSettings.attr("disabled", true);
|
||||||
|
|
||||||
|
clearTimeout(self.restoredStateHideDelay);
|
||||||
|
|
||||||
|
self.setRestoreState("Restoring...");
|
||||||
|
|
||||||
|
//console.log(" self.wifiboxURL: ",self.wifiboxURL);
|
||||||
|
|
||||||
|
if (communicateWithWifibox) {
|
||||||
|
$.ajax({
|
||||||
|
url: self.wifiboxCGIBinURL + "/config/resetall",
|
||||||
|
type: "POST",
|
||||||
|
dataType: 'json',
|
||||||
|
timeout: this.timeoutTime,
|
||||||
|
success: function(response){
|
||||||
|
console.log("Settings:resetSettings response: ",response);
|
||||||
|
if(response.status == "error") {
|
||||||
|
clearTimeout(self.retryResetSettingsDelay);
|
||||||
|
self.retryResetSettingsDelay = setTimeout(function() { self.resetSettings(); },self.retryDelay); // retry after delay
|
||||||
|
} else {
|
||||||
|
settings = response.data;
|
||||||
|
console.log(" settings: ",settings);
|
||||||
|
self.fillForm(settings);
|
||||||
|
$(document).trigger(SettingsWindow.SETTINGS_LOADED);
|
||||||
|
|
||||||
|
self.btnRestoreSettings.removeAttr("disabled");
|
||||||
|
self.setRestoreState("Settings restored");
|
||||||
|
// auto hide status
|
||||||
|
clearTimeout(self.restoredStateHideDelay);
|
||||||
|
self.restoredStateHideDelay = setTimeout(function() { self.setRestoreState(""); },self.restoredStateHideDelayTime);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).fail(function() {
|
||||||
|
console.log("Settings:resetSettings: failed");
|
||||||
|
clearTimeout(self.retryResetSettingsDelay);
|
||||||
|
self.retryResetSettingsDelay = setTimeout(function() { self.resetSettings(); },self.retryDelay); // retry after delay
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.setRestoreState = function(text) {
|
||||||
|
self.restoreStateField.html(text);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.displayValidationError = function(key,msg) {
|
||||||
|
var formElement = self.form.find("[name|='"+key+"']");
|
||||||
|
formElement.addClass("error");
|
||||||
|
var errorMsg = "<p class='errorMsg'>"+msg+"</p>";
|
||||||
|
formElement.after(errorMsg);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.clearValidationErrors = function() {
|
||||||
|
self.form.find(".errorMsg").remove();
|
||||||
|
self.form.find(".error").removeClass("error");
|
||||||
|
};
|
||||||
|
|
||||||
|
this.readForm = function() {
|
||||||
|
//console.log("SettingsWindow:readForm");
|
||||||
|
var settings = {};
|
||||||
|
var selects = self.form.find("select");
|
||||||
|
selects.each( function(index,element) {
|
||||||
|
var elem = $(element);
|
||||||
|
//var fieldName = elem.attr('name');
|
||||||
|
if(elem.attr('name') != "") {
|
||||||
|
settings[elem.attr('name')] = elem.val();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var inputs = self.form.find("input");
|
||||||
|
inputs.each( function(index,element) {
|
||||||
|
var elem = $(element);
|
||||||
|
if(elem.attr('name') != "") {
|
||||||
|
switch(elem.attr("type")) {
|
||||||
|
case "text":
|
||||||
|
case "number":
|
||||||
|
settings[elem.attr('name')] = elem.val();
|
||||||
|
break;
|
||||||
|
case "checkbox":
|
||||||
|
settings[elem.attr('name')] = elem.prop('checked');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var textareas = self.form.find("textarea");
|
||||||
|
textareas.each( function(index,element) {
|
||||||
|
var elem = $(element);
|
||||||
|
settings[elem.attr('name')] = elem.val();
|
||||||
|
});
|
||||||
|
//console.log(settings);
|
||||||
|
return settings;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.signin = function() {
|
||||||
|
$.ajax({
|
||||||
|
url: self.wifiboxCGIBinURL + "/network/signin",
|
||||||
|
type: "GET",
|
||||||
|
dataType: 'json',
|
||||||
|
timeout: self.timeoutTime,
|
||||||
|
success: function(response){
|
||||||
|
console.log("Settings:signin response: ",response);
|
||||||
|
}
|
||||||
|
}).fail(function() {
|
||||||
|
console.log("Settings:signin: failed");
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
this.downloadlogs = function() {
|
||||||
|
window.location.href = self.wifiboxURL + "/info/logfiles";
|
||||||
|
};
|
||||||
|
|
||||||
|
this.downloadGcode = function() {
|
||||||
|
var gcode = generate_gcode();
|
||||||
|
if (gcode!=undefined) {
|
||||||
|
var blob = new Blob([gcode.join("\n")], {type: "text/plain;charset=utf-8"});
|
||||||
|
saveAs(blob, "doodle3d.gcode");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.downloadSvg = function() {
|
||||||
|
var svg = saveToSvg();
|
||||||
|
if (svg!=undefined) {
|
||||||
|
var blob = new Blob([svg], {type: "text/plain;charset=utf-8"});
|
||||||
|
saveAs(blob, "doodle3d.svg");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Networks ui
|
||||||
|
*/
|
||||||
|
this.showAPSettings = function() {
|
||||||
|
self.apFieldSet.show();
|
||||||
|
self.clientFieldSet.hide();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.showClientSettings = function() {
|
||||||
|
self.clientFieldSet.show();
|
||||||
|
self.apFieldSet.hide();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.refreshNetworks = function() {
|
||||||
|
console.log("Settings:refreshNetworks");
|
||||||
|
|
||||||
|
if (communicateWithWifibox) {
|
||||||
|
$.ajax({
|
||||||
|
url: self.wifiboxURL + "/network/scan",
|
||||||
|
type: "GET",
|
||||||
|
dataType: 'json',
|
||||||
|
timeout: self.timeoutTime,
|
||||||
|
success: function(response){
|
||||||
|
console.log("Settings:refreshNetworks response: ",response);
|
||||||
|
if(response.status == "error") {
|
||||||
|
//clearTimeout(self.retrySaveSettingsDelay);
|
||||||
|
//self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
|
||||||
|
} else {
|
||||||
|
var networks = response.data.networks;
|
||||||
|
self.networks = {};
|
||||||
|
var foundCurrentNetwork = false;
|
||||||
|
var networkSelector = self.form.find("#network");
|
||||||
|
networkSelector.empty();
|
||||||
|
networkSelector.append(
|
||||||
|
$("<option></option>").val(SettingsWindow.NOT_CONNECTED).html("not connected")
|
||||||
|
);
|
||||||
|
$.each(networks, function(index,element) {
|
||||||
|
if(element.ssid == self.currentNetwork) {
|
||||||
|
foundCurrentNetwork = true;
|
||||||
|
}
|
||||||
|
networkSelector.append(
|
||||||
|
$("<option></option>").val(element.ssid).html(element.ssid)
|
||||||
|
);
|
||||||
|
self.networks[element.ssid] = element;
|
||||||
|
});
|
||||||
|
if(foundCurrentNetwork) {
|
||||||
|
networkSelector.val(self.currentNetwork);
|
||||||
|
self.selectNetwork(self.currentNetwork);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).fail(function() {
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.retrieveNetworkStatus = function(connecting) {
|
||||||
|
//console.log("Settings:retrieveNetworkStatus");
|
||||||
|
if (communicateWithWifibox) {
|
||||||
|
$.ajax({
|
||||||
|
url: self.wifiboxURL + "/network/status",
|
||||||
|
type: "GET",
|
||||||
|
dataType: 'json',
|
||||||
|
timeout: self.timeoutTime,
|
||||||
|
success: function(response){
|
||||||
|
console.log("Settings:retrieveNetworkStatus response: ",response);
|
||||||
|
if(response.status == "error") {
|
||||||
|
|
||||||
|
} else {
|
||||||
|
var data = response.data;
|
||||||
|
|
||||||
|
if(typeof data.status === 'string') {
|
||||||
|
data.status = parseInt(data.status);
|
||||||
|
}
|
||||||
|
//console.log(" data.status: ",data.status,data.statusMessage);
|
||||||
|
|
||||||
|
// Determine which network settings to show
|
||||||
|
switch(data.status) {
|
||||||
|
case SettingsWindow.API_NOT_CONNECTED:
|
||||||
|
//console.log(" not connected & not a access point");
|
||||||
|
self.apFieldSet.show();
|
||||||
|
self.clientFieldSet.show();
|
||||||
|
|
||||||
|
self.networkMode = SettingsWindow.NETWORK_MODE_NEITHER;
|
||||||
|
break;
|
||||||
|
case SettingsWindow.API_CONNECTING_FAILED:
|
||||||
|
case SettingsWindow.API_CONNECTING:
|
||||||
|
case SettingsWindow.API_CONNECTED:
|
||||||
|
//console.log(" client mode");
|
||||||
|
self.form.find("#client").prop('checked',true);
|
||||||
|
|
||||||
|
self.apFieldSet.hide();
|
||||||
|
self.clientFieldSet.show();
|
||||||
|
|
||||||
|
if(data.status == SettingsWindow.API_CONNECTED) {
|
||||||
|
var networkSelector = self.form.find("#network");
|
||||||
|
networkSelector.val(data.ssid);
|
||||||
|
|
||||||
|
self.currentNetwork = data.ssid;
|
||||||
|
self.currentLocalIP = data.localip;
|
||||||
|
self.selectNetwork(data.ssid);
|
||||||
|
} else {
|
||||||
|
self.currentLocalIP = "";
|
||||||
|
}
|
||||||
|
self.networkMode = SettingsWindow.NETWORK_MODE_CLIENT;
|
||||||
|
break;
|
||||||
|
case SettingsWindow.API_CREATING:
|
||||||
|
case SettingsWindow.API_CREATED:
|
||||||
|
//console.log(" access point mode");
|
||||||
|
self.form.find("#ap").prop('checked',true);
|
||||||
|
|
||||||
|
self.apFieldSet.show();
|
||||||
|
self.clientFieldSet.hide();
|
||||||
|
|
||||||
|
self.currentNetwork = undefined;
|
||||||
|
self.selectNetwork(SettingsWindow.NOT_CONNECTED);
|
||||||
|
var networkSelector = self.form.find("#network");
|
||||||
|
networkSelector.val(SettingsWindow.NOT_CONNECTED);
|
||||||
|
|
||||||
|
if(data.ssid && data.status == SettingsWindow.API_CREATED) {
|
||||||
|
self.currentAP = data.ssid;
|
||||||
|
}
|
||||||
|
self.networkMode = SettingsWindow.NETWORK_MODE_ACCESS_POINT;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
self.updatePanel.setNetworkMode(self.networkMode);
|
||||||
|
|
||||||
|
// update status message
|
||||||
|
switch(data.status) {
|
||||||
|
case SettingsWindow.API_CONNECTING_FAILED:
|
||||||
|
self.setClientModeState(SettingsWindow.CONNECTING_FAILED,data.statusMessage);
|
||||||
|
self.setAPModeState(SettingsWindow.NO_AP,"");
|
||||||
|
break;
|
||||||
|
case SettingsWindow.API_NOT_CONNECTED:
|
||||||
|
self.setClientModeState(SettingsWindow.NOT_CONNECTED,"");
|
||||||
|
self.setAPModeState(SettingsWindow.NO_AP,"");
|
||||||
|
break;
|
||||||
|
case SettingsWindow.API_CONNECTING:
|
||||||
|
self.setClientModeState(SettingsWindow.CONNECTING,"");
|
||||||
|
self.setAPModeState(SettingsWindow.NO_AP,"");
|
||||||
|
break;
|
||||||
|
case SettingsWindow.API_CONNECTED:
|
||||||
|
self.setClientModeState(SettingsWindow.CONNECTED,"");
|
||||||
|
self.setAPModeState(SettingsWindow.NO_AP,"");
|
||||||
|
break;
|
||||||
|
case SettingsWindow.API_CREATING:
|
||||||
|
self.setClientModeState(SettingsWindow.NOT_CONNECTED,"");
|
||||||
|
self.setAPModeState(SettingsWindow.CREATING_AP,"");
|
||||||
|
break;
|
||||||
|
case SettingsWindow.API_CREATED:
|
||||||
|
self.setClientModeState(SettingsWindow.NOT_CONNECTED,"");
|
||||||
|
self.setAPModeState(SettingsWindow.AP,"");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Keep checking for updates?
|
||||||
|
if(connecting) {
|
||||||
|
switch(data.status) {
|
||||||
|
case SettingsWindow.API_CONNECTING:
|
||||||
|
case SettingsWindow.API_CREATING:
|
||||||
|
clearTimeout(self.retryRetrieveNetworkStatusDelay);
|
||||||
|
self.retryRetrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus(connecting); },self.retryRetrieveNetworkStatusDelayTime); // retry after delay
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).fail(function() {
|
||||||
|
console.log("Settings:retrieveNetworkStatus: failed");
|
||||||
|
clearTimeout(self.retryRetrieveNetworkStatusDelay);
|
||||||
|
self.retryRetrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus(connecting); },self.retryDelay); // retry after delay
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.networkSelectorChanged = function(e) {
|
||||||
|
var selectedOption = $(this).find("option:selected");
|
||||||
|
self.selectNetwork(selectedOption.val());
|
||||||
|
};
|
||||||
|
|
||||||
|
this.selectNetwork = function(ssid) {
|
||||||
|
console.log("select network: ",ssid);
|
||||||
|
if(ssid == "") return;
|
||||||
|
console.log(" checked");
|
||||||
|
this.selectedNetwork = ssid;
|
||||||
|
if(this.networks == undefined || ssid == SettingsWindow.NOT_CONNECTED) {
|
||||||
|
this.hideWiFiPassword();
|
||||||
|
} else {
|
||||||
|
var network = this.networks[ssid];
|
||||||
|
if(network.encryption == "none") {
|
||||||
|
this.hideWiFiPassword();
|
||||||
|
} else {
|
||||||
|
this.showWiFiPassword();
|
||||||
|
}
|
||||||
|
this.form.find("#password").val("");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.showWiFiPassword = function() {
|
||||||
|
this.form.find("#passwordLabel").show();
|
||||||
|
this.form.find("#password").show();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.hideWiFiPassword = function() {
|
||||||
|
this.form.find("#passwordLabel").hide();
|
||||||
|
this.form.find("#password").hide();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.setClientModeState = function(state,msg) {
|
||||||
|
var field = this.form.find("#clientModeState");
|
||||||
|
var btnConnect = self.form.find("#connectToNetwork");
|
||||||
|
switch(state) {
|
||||||
|
case SettingsWindow.NOT_CONNECTED:
|
||||||
|
btnConnect.removeAttr("disabled");
|
||||||
|
field.html("Not connected");
|
||||||
|
break;
|
||||||
|
case SettingsWindow.CONNECTED:
|
||||||
|
btnConnect.removeAttr("disabled");
|
||||||
|
|
||||||
|
var fieldText = "Connected to: <b>"+this.currentNetwork+"</b>.";
|
||||||
|
if(this.currentLocalIP != undefined && this.currentLocalIP != "") {
|
||||||
|
var a = "<a href='http://"+this.currentLocalIP+"' target='_black'>"+this.currentLocalIP+"</a>";
|
||||||
|
fieldText += " (IP: "+a+")";
|
||||||
|
}
|
||||||
|
field.html(fieldText);
|
||||||
|
break;
|
||||||
|
case SettingsWindow.CONNECTING:
|
||||||
|
btnConnect.attr("disabled", true);
|
||||||
|
field.html("Connecting... Reconnect by connecting your device to <b>"+this.selectedNetwork+"</b> and going to <a href='http://connect.doodle3d.com'>connect.doodle3d.com</a>");
|
||||||
|
break;
|
||||||
|
case SettingsWindow.CONNECTING_FAILED:
|
||||||
|
btnConnect.removeAttr("disabled");
|
||||||
|
field.html(msg);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
this.clientModeState = state;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.setAPModeState = function(state,msg) {
|
||||||
|
var field = this.form.find("#apModeState");
|
||||||
|
var btnCreate = this.form.find("#createAP");
|
||||||
|
switch(state) {
|
||||||
|
case SettingsWindow.NO_AP:
|
||||||
|
btnCreate.removeAttr("disabled");
|
||||||
|
field.html("Not currently a access point");
|
||||||
|
break;
|
||||||
|
case SettingsWindow.AP:
|
||||||
|
btnCreate.removeAttr("disabled");
|
||||||
|
field.html("Is access point: <b>"+this.currentAP+"</b>");
|
||||||
|
break;
|
||||||
|
case SettingsWindow.CREATING_AP:
|
||||||
|
btnCreate.attr("disabled", true);
|
||||||
|
field.html("Creating access point... Reconnect by connecting your device to <b>"+settings.substituted_ssid+"</b> and going to <a href='http://draw.doodle3d.com'>draw.doodle3d.com</a>");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
this.apModeState = state;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.connectToNetwork = function() {
|
||||||
|
console.log("connectToNetwork");
|
||||||
|
if(self.selectedNetwork == undefined) return;
|
||||||
|
var postData = {
|
||||||
|
ssid:self.selectedNetwork,
|
||||||
|
phrase:self.form.find("#password").val(),
|
||||||
|
recreate:true
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(" postData: ",postData);
|
||||||
|
if (communicateWithWifibox) {
|
||||||
|
|
||||||
|
// save network related settings and on complete, connect to network
|
||||||
|
self.saveSettings(self.readForm(),function(success) {
|
||||||
|
if(!success) return;
|
||||||
|
$.ajax({
|
||||||
|
url: self.wifiboxCGIBinURL + "/network/associate",
|
||||||
|
type: "POST",
|
||||||
|
data: postData,
|
||||||
|
dataType: 'json',
|
||||||
|
timeout: self.timeoutTime,
|
||||||
|
success: function(response){
|
||||||
|
console.log("Settings:connectToNetwork response: ",response);
|
||||||
|
}
|
||||||
|
}).fail(function() {
|
||||||
|
console.log("Settings:connectToNetwork: timeout (normal behavior)");
|
||||||
|
//clearTimeout(self.retrySaveSettingsDelay);
|
||||||
|
//self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
self.setClientModeState(SettingsWindow.CONNECTING,"");
|
||||||
|
|
||||||
|
// after switching wifi network or creating a access point we delay the status retrieval
|
||||||
|
// because the webserver needs time to switch
|
||||||
|
clearTimeout(self.retrieveNetworkStatusDelay);
|
||||||
|
self.retrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus(true); },self.retrieveNetworkStatusDelayTime);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.createAP = function() {
|
||||||
|
console.log("createAP");
|
||||||
|
if (communicateWithWifibox) {
|
||||||
|
|
||||||
|
// save network related settings and on complete, create access point
|
||||||
|
self.saveSettings(self.readForm(),function(success) {
|
||||||
|
if(!success) return;
|
||||||
|
self.setAPModeState(SettingsWindow.CREATING_AP); // get latest substituted ssid
|
||||||
|
$.ajax({
|
||||||
|
url: self.wifiboxCGIBinURL + "/network/openap",
|
||||||
|
type: "POST",
|
||||||
|
dataType: 'json',
|
||||||
|
timeout: self.timeoutTime,
|
||||||
|
success: function(response){
|
||||||
|
console.log("Settings:createAP response: ",response);
|
||||||
|
}
|
||||||
|
}).fail(function() {
|
||||||
|
console.log("Settings:createAP: timeout (normal behavior)");
|
||||||
|
//clearTimeout(self.retrySaveSettingsDelay);
|
||||||
|
//self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
|
||||||
|
});
|
||||||
|
|
||||||
|
self.setAPModeState(SettingsWindow.CREATING_AP,"");
|
||||||
|
|
||||||
|
// after switching wifi network or creating a access point we delay the status retrieval
|
||||||
|
// because the webserver needs time to switch
|
||||||
|
clearTimeout(self.retrieveNetworkStatusDelay);
|
||||||
|
self.retrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus(true); },self.retrieveNetworkStatusDelayTime);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/*************************
|
||||||
|
*
|
||||||
|
*
|
||||||
|
* FROM DOODLE3D.INI
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
//TODO: find all references to these variables, replace them and finally remove these.
|
||||||
|
var objectHeight = 20;
|
||||||
|
var layerHeight = .2;
|
||||||
|
//var wallThickness = .5;
|
||||||
|
//var hop = 0;
|
||||||
|
//var speed = 70;
|
||||||
|
//var travelSpeed = 200;
|
||||||
|
var enableTraveling = true;
|
||||||
|
//var filamentThickness = 2.89;
|
||||||
|
var minScale = .3;
|
||||||
|
var maxScale = 1;
|
||||||
|
var shape = "%";
|
||||||
|
var twists = 0;
|
||||||
|
//var useSubLayers = true;
|
||||||
|
//var debug = false; // debug moved to main.js
|
||||||
|
var loglevel = 2;
|
||||||
|
//var zOffset = 0;
|
||||||
|
var serverport = 8888;
|
||||||
|
var autoLoadImage = "hand.txt";
|
||||||
|
var loadOffset = [0, 0]; // x en y ?
|
||||||
|
var showWarmUp = true;
|
||||||
|
var loopAlways = false;
|
||||||
|
var firstLayerSlow = true;
|
||||||
|
var useSubpathColors = false;
|
||||||
|
var autoWarmUp = true;
|
||||||
|
//var maxObjectHeight = 150;
|
||||||
|
var maxScaleDifference = .1;
|
||||||
|
var frameRate = 60;
|
||||||
|
var quitOnEscape = true;
|
||||||
|
var screenToMillimeterScale = .3; // 0.3
|
||||||
|
//var targetTemperature = 220;
|
||||||
|
//var simplifyiterations = 10;
|
||||||
|
//var simplifyminNumPoints = 15;
|
||||||
|
//var simplifyminDistance = 3;
|
||||||
|
//var retractionspeed = 50;
|
||||||
|
//var retractionminDistance = 5;
|
||||||
|
//var retractionamount = 3;
|
||||||
|
var sideis3D = true;
|
||||||
|
var sidevisible = true;
|
||||||
|
var sidebounds = [900, 210, 131, 390];
|
||||||
|
var sideborder = [880, 169, 2, 471];
|
||||||
|
var windowbounds = [0, 0, 800, 500];
|
||||||
|
var windowcenter = true;
|
||||||
|
var windowfullscreen = false;
|
||||||
|
var autoWarmUpCommand = "M104 S230";
|
||||||
|
//var checkTemperatureInterval = 3;
|
||||||
|
var autoWarmUpDelay = 3;
|
||||||
183
js/Shape.js
Normal file
183
js/Shape.js
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
function drawCircle(x0,y0,r,res) {
|
||||||
|
if (res==undefined) res = 50; //circle resolution
|
||||||
|
beginShape();
|
||||||
|
var step = Math.PI * 2.0 / res;
|
||||||
|
for (var a=0; a<Math.PI*2; a+=step) {
|
||||||
|
var x = Math.sin(a+Math.PI) * r + x0;
|
||||||
|
var y = Math.cos(a+Math.PI) * r + y0;
|
||||||
|
if (a==0) shapeMoveTo(x,y);
|
||||||
|
else shapeLineTo(x,y);
|
||||||
|
}
|
||||||
|
|
||||||
|
//close shape
|
||||||
|
var x = Math.sin(0+Math.PI) * r + x0;
|
||||||
|
var y = Math.cos(0+Math.PI) * r + y0;
|
||||||
|
shapeLineTo(x,y);
|
||||||
|
|
||||||
|
endShape();
|
||||||
|
}
|
||||||
|
|
||||||
|
function beginShape(x,y) {
|
||||||
|
setSketchModified(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function shapeMoveTo(x,y) {
|
||||||
|
_points.push([x, y, true]);
|
||||||
|
adjustBounds(x, y);
|
||||||
|
adjustPreviewTransformation();
|
||||||
|
draw(x, y, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
function shapeLineTo(x,y) {
|
||||||
|
_points.push([x, y, false]);
|
||||||
|
adjustBounds(x, y);
|
||||||
|
adjustPreviewTransformation();
|
||||||
|
draw(x, y);
|
||||||
|
}
|
||||||
|
|
||||||
|
function endShape() {
|
||||||
|
renderToImageDataPreview();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getBounds(points) {
|
||||||
|
var xMin=9999,xMax=-9999,yMin=9999,yMax=-9999;
|
||||||
|
for (var i=0; i<points.length; i++) {
|
||||||
|
var p = points[i];
|
||||||
|
xMin = Math.min(xMin,p[0]);
|
||||||
|
xMax = Math.max(xMax,p[0]);
|
||||||
|
yMin = Math.min(yMin,p[1]);
|
||||||
|
yMax = Math.max(yMax,p[1]);
|
||||||
|
}
|
||||||
|
return {x:xMin,y:yMin,width:xMax-xMin,height:yMax-yMin};
|
||||||
|
}
|
||||||
|
|
||||||
|
function translatePoints(points,x,y) {
|
||||||
|
for (var i=0; i<points.length; i++) {
|
||||||
|
points[i][0] += x;
|
||||||
|
points[i][1] += y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function scalePoints(points,x,y) {
|
||||||
|
if (y==undefined) y = x;
|
||||||
|
for (var i=0; i<points.length; i++) {
|
||||||
|
points[i][0] *= x;
|
||||||
|
points[i][1] *= y;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function rotatePoints(points, radians, cx, cy) {
|
||||||
|
if (cx==undefined) cx = 0;
|
||||||
|
if (cy==undefined) cy = 0;
|
||||||
|
|
||||||
|
var cos = Math.cos(radians);
|
||||||
|
var sin = Math.sin(radians);
|
||||||
|
|
||||||
|
for (var i=0; i<points.length; i++) {
|
||||||
|
var x = points[i][0];
|
||||||
|
var y = points[i][1];
|
||||||
|
var nx = (cos * (x - cx)) - (sin * (y - cy)) + cx;
|
||||||
|
var ny = (sin * (x - cx)) + (cos * (y - cy)) + cy;
|
||||||
|
points[i][0] = nx;
|
||||||
|
points[i][1] = ny;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function moveShape(x,y) {
|
||||||
|
var bounds = getBounds(_points);
|
||||||
|
var delta = reduceTransformToFit(x, y, 1.0, bounds);
|
||||||
|
|
||||||
|
if (delta.x != 0 || delta.y != 0) {
|
||||||
|
translatePoints(_points, delta.x, delta.y);
|
||||||
|
updateView();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//TODO: reduction of zoomValue is still not completely correct (but acceptable?)
|
||||||
|
//TODO: bounds should be cached and marked dirty on modification of points array; translations could be combined in several places
|
||||||
|
function zoomShape(zoomValue) {
|
||||||
|
var bounds = getBounds(_points);
|
||||||
|
var transform = reduceTransformToFit(0, 0, zoomValue, bounds);
|
||||||
|
|
||||||
|
translatePoints(_points, transform.x, transform.y); //move points towards center as far as necessary to avoid clipping
|
||||||
|
translatePoints(_points, -bounds.x, -bounds.y);
|
||||||
|
translatePoints(_points, -bounds.width / 2, -bounds.height / 2);
|
||||||
|
scalePoints(_points, transform.zf, transform.zf);
|
||||||
|
translatePoints(_points, bounds.width / 2, bounds.height / 2);
|
||||||
|
translatePoints(_points, bounds.x, bounds.y);
|
||||||
|
updateView();
|
||||||
|
}
|
||||||
|
|
||||||
|
function rotateShape(radians) {
|
||||||
|
var bounds = getBounds(_points);
|
||||||
|
var cx = bounds.x + bounds.width/2;
|
||||||
|
var cy = bounds.y + bounds.height/2;
|
||||||
|
rotatePoints(_points, radians, cx, cy);
|
||||||
|
|
||||||
|
var bounds = getBounds(_points);
|
||||||
|
var transform = reduceTransformToFit(0, 0, 1.0, bounds);
|
||||||
|
translatePoints(_points, transform.x, transform.y);
|
||||||
|
scalePoints(_points, transform.zf, transform.zf);
|
||||||
|
|
||||||
|
updateView();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateView() {
|
||||||
|
setSketchModified(true);
|
||||||
|
redrawDoodle(true);
|
||||||
|
adjustPreviewTransformation();
|
||||||
|
renderToImageDataPreview();
|
||||||
|
|
||||||
|
if (debugMode) {
|
||||||
|
var bounds = getBounds(_points);
|
||||||
|
drawCircleTemp(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2, 5, 'red');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//when x,y!=0,0: reduces them such that transformed bounds will still fit on canvas (given that they fit prior to the transform)
|
||||||
|
//otherwise: calculate translation + zoom reduce such that given bounds will fit on canvas after transformation
|
||||||
|
function reduceTransformToFit(x, y, zf, bounds) {
|
||||||
|
var zw = bounds.width * zf; zh = bounds.height * zf;
|
||||||
|
var newBounds = { x: bounds.x - (zw - bounds.width) / 2, y: bounds.y - (zh - bounds.height) / 2, width: zw, height: zh };
|
||||||
|
// console.log("bounds: " + bounds.x + ", " + bounds.y + ", " + bounds.width + ", " + bounds.height);
|
||||||
|
// console.log("newBounds: " + newBounds.x + ", " + newBounds.y + ", " + newBounds.width + ", " + newBounds.height);
|
||||||
|
|
||||||
|
var ldx = Math.max(x, -newBounds.x);
|
||||||
|
var rdx = Math.min(x, canvasWidth - (newBounds.x + newBounds.width));
|
||||||
|
var tdy = Math.max(y, -newBounds.y);
|
||||||
|
var bdy = Math.min(y, canvasHeight - (newBounds.y + newBounds.height));
|
||||||
|
|
||||||
|
if (x != 0 || y != 0) { //movement was requested
|
||||||
|
return { x: nearestZero(ldx, rdx), y: nearestZero(tdy, bdy) };
|
||||||
|
} else { //no movement requested
|
||||||
|
var delta = { x: ldx + rdx, y: tdy + bdy };
|
||||||
|
if (ldx != 0 && rdx != 0) delta.x /= 2;
|
||||||
|
if (tdy != 0 && bdy != 0) delta.y /= 2;
|
||||||
|
|
||||||
|
delta.x /= zf;
|
||||||
|
delta.y /= zf;
|
||||||
|
|
||||||
|
var zxMax = Math.min(zf, canvasWidth / newBounds.width);
|
||||||
|
var zyMax = Math.min(zf, canvasHeight / newBounds.height);
|
||||||
|
// var oldZF = zf;
|
||||||
|
// var dir = zf >= 1.0 ? 1 : 0;
|
||||||
|
zf = Math.min(zxMax, zyMax);
|
||||||
|
// if (dir == 1 && zf < 1.0) zf = 1;
|
||||||
|
// console.log("orgZF, zxMax, zyMax, finZF: " + oldZF + ", " + zxMax + ", " + zyMax + ", " + zf);
|
||||||
|
|
||||||
|
return { x: delta.x, y: delta.y, zf: zf };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function nearestZero(v1, v2) { return Math.abs(v1) < Math.abs(v2) ? v1 : v2; }
|
||||||
|
|
||||||
|
//*draws* a circle (i.e. it is not added as points to shape)
|
||||||
|
function drawCircleTemp(x, y, r, color) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
ctx.fillStyle = color;
|
||||||
|
ctx.arc(x, y, r, 0, 2 * Math.PI, false);
|
||||||
|
ctx.fill();
|
||||||
|
ctx.stroke();
|
||||||
|
ctx.fillStyle = 'black';
|
||||||
|
}
|
||||||
140
js/Svg.js
Normal file
140
js/Svg.js
Normal file
@ -0,0 +1,140 @@
|
|||||||
|
/*
|
||||||
|
* This file is part of the Doodle3D project (http://doodle3d.com).
|
||||||
|
*
|
||||||
|
* Copyright (c) 2013, Doodle3D
|
||||||
|
* This software is licensed under the terms of the GNU GPL v2 or later.
|
||||||
|
* See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
|
||||||
|
*/
|
||||||
|
|
||||||
|
//SVG validator: http://validator.w3.org/
|
||||||
|
//SVG viewer: http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html
|
||||||
|
function saveToSvg() {
|
||||||
|
var lastX = 0, lastY = 0, lastIsMove = false;
|
||||||
|
var svg = '';
|
||||||
|
|
||||||
|
var boundsWidth = doodleBounds[2] - doodleBounds[0];
|
||||||
|
var boundsHeight = doodleBounds[3] - doodleBounds[1];
|
||||||
|
|
||||||
|
svg += '<?xml version="1.0" standalone="no"?>\n';
|
||||||
|
svg += '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n';
|
||||||
|
svg += '<svg width="' + boundsWidth + '" height="' + boundsHeight + '" version="1.1" xmlns="http://www.w3.org/2000/svg">\n';
|
||||||
|
svg += '\t<desc>Doodle 3D sketch</desc>\n';
|
||||||
|
|
||||||
|
var data = '';
|
||||||
|
for (var i = 0; i < _points.length; ++i) {
|
||||||
|
var x = _points[i][0], y = _points[i][1], isMove = _points[i][2];
|
||||||
|
var dx = x - lastX, dy = y - lastY;
|
||||||
|
|
||||||
|
if (i == 0)
|
||||||
|
data += 'M'; //emit absolute move on first pair of coordinates
|
||||||
|
else if (isMove != lastIsMove)
|
||||||
|
data += isMove ? 'm' : 'l';
|
||||||
|
|
||||||
|
data += dx + ',' + dy + ' ';
|
||||||
|
|
||||||
|
lastX = x;
|
||||||
|
lastY = y;
|
||||||
|
lastIsMove = isMove;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg += '\t<path transform="translate(' + -doodleBounds[0] + ',' + -doodleBounds[1] + ')" d="' + data + '" fill="none" stroke="black" stroke-width="2" />\n';
|
||||||
|
|
||||||
|
var fields = JSON.stringify({'height': numLayers, 'outlineShape': VERTICALSHAPE, 'twist': rStep});
|
||||||
|
svg += '\t<!--<![CDATA[d3d-keys ' + fields + ']]>-->\n';
|
||||||
|
|
||||||
|
svg += '</svg>\n';
|
||||||
|
|
||||||
|
return svg;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//TODO: use local variables instead of _points,numLayers,VERTICALSHAPE and rStep so we can leave a current doodle in tact if an error occurs while parsing
|
||||||
|
function loadFromSvg(svgData) {
|
||||||
|
var mode = '', x = 0, y = 0;
|
||||||
|
|
||||||
|
console.log("loading " + svgData.length + " bytes of data...");
|
||||||
|
|
||||||
|
clearDoodle();
|
||||||
|
|
||||||
|
var p = svgData.indexOf("<path");
|
||||||
|
if (p == -1) { console.log("loadFromSvg: could not find parsing start point"); return false; }
|
||||||
|
p = svgData.indexOf('d="', p);
|
||||||
|
if (p == -1) { console.log("loadFromSvg: could not find parsing start point"); return false; }
|
||||||
|
p += 3; //skip 'd="'
|
||||||
|
|
||||||
|
var skipSpace = function() { while (svgData.charAt(p) == ' ') p++; }
|
||||||
|
var parseCommand = function() {
|
||||||
|
while (true) {
|
||||||
|
skipSpace();
|
||||||
|
var c = svgData.charAt(p);
|
||||||
|
if (c == 'M' || c == 'm' || c == 'L' || c == 'l') { //new command letter
|
||||||
|
mode = c;
|
||||||
|
} else if (c == '"') { //end of command chain
|
||||||
|
return true;
|
||||||
|
} else { //something else, must be a pair of coordinates...
|
||||||
|
var tx = 0, ty = 0, numberEnd = 0, len = 0;
|
||||||
|
numberEnd = svgData.indexOf(',', p);
|
||||||
|
if (numberEnd == -1) { console.log("could not find comma in coordinate pair"); return false; }
|
||||||
|
len = numberEnd - p;
|
||||||
|
tx = parseFloat(svgData.substr(p, len));
|
||||||
|
p += len + 1;
|
||||||
|
skipSpace();
|
||||||
|
numberEnd = svgData.indexOf(' ', p);
|
||||||
|
if (numberEnd == -1) { console.log("could not find space after coordinate pair"); return false; }
|
||||||
|
len = numberEnd - p;
|
||||||
|
ty = parseFloat(svgData.substr(p, len));
|
||||||
|
p += len;
|
||||||
|
|
||||||
|
if (mode == 'M' || mode == 'L') {
|
||||||
|
x = tx; y = ty;
|
||||||
|
} else if (mode == 'm' || mode == 'l') {
|
||||||
|
x += tx; y += ty;
|
||||||
|
} else {
|
||||||
|
console.log("loadFromSvg: found coordinate pair but mode was never set");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
var isMove = mode == 'm' || mode == 'M';
|
||||||
|
|
||||||
|
//TODO: create script-wide function for adding points?
|
||||||
|
//console.log("inserting "+x+","+y+" ",isMove);
|
||||||
|
updatePrevX = x;
|
||||||
|
updatePrevY = y;
|
||||||
|
_points.push([x, y, isMove]);
|
||||||
|
adjustBounds(x, y);
|
||||||
|
adjustPreviewTransformation();
|
||||||
|
|
||||||
|
if (isMove) draw(x, y, .5);
|
||||||
|
else draw(x, y);
|
||||||
|
}
|
||||||
|
p++;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
parseCommand(); //depends on value of p, so don't move this without taking that into consideration
|
||||||
|
|
||||||
|
const fieldDefMarker = "<!--<![CDATA[d3d-keys";
|
||||||
|
p = svgData.indexOf(fieldDefMarker);
|
||||||
|
if (p == -1) { console.log("loadFromSvg: could not find metadata marker"); return false; }
|
||||||
|
p += fieldDefMarker.length;
|
||||||
|
skipSpace();
|
||||||
|
|
||||||
|
var endP = svgData.indexOf("]]>-->", p);
|
||||||
|
if (endP == -1) { console.log("loadFromSvg: could not find metadata end-marker"); return false; }
|
||||||
|
var metaFields = JSON.parse(svgData.substr(p, endP - p));
|
||||||
|
//TODO: log error and return false if parsing failed
|
||||||
|
for (var k in metaFields) {
|
||||||
|
var v = metaFields[k];
|
||||||
|
switch (k) {
|
||||||
|
case "height": numLayers = v; break;
|
||||||
|
case "outlineShape": VERTICALSHAPE = v; break;
|
||||||
|
case "twist": rStep = v; break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderToImageDataPreview();
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
@ -45,18 +45,18 @@ function UpdatePanel() {
|
|||||||
this.wifiboxURL = wifiboxURL;
|
this.wifiboxURL = wifiboxURL;
|
||||||
|
|
||||||
this.element = updatePanelElement;
|
this.element = updatePanelElement;
|
||||||
this.noRetainCheckbox = this.element.find("#noRetain");
|
this.retainCheckbox = this.element.find("#retainConfiguration");
|
||||||
this.btnUpdate = this.element.find("#update");
|
this.btnUpdate = this.element.find("#update");
|
||||||
this.statusDisplay = this.element.find("#updateState");
|
this.statusDisplay = this.element.find("#updateState");
|
||||||
this.infoDisplay = this.element.find("#updateInfo");
|
this.infoDisplay = this.element.find("#updateInfo");
|
||||||
|
|
||||||
this.noRetainCheckbox.change(this.noRetainChanged);
|
this.retainCheckbox.change(this.retainChanged);
|
||||||
this.btnUpdate.click(this.update);
|
this.btnUpdate.click(this.update);
|
||||||
|
|
||||||
this.checkStatus(false);
|
this.checkStatus(false);
|
||||||
}
|
}
|
||||||
this.noRetainChanged = function(e) {
|
this.retainChanged = function(e) {
|
||||||
console.log("UpdatePanel:noRetainChanged");
|
console.log("UpdatePanel:retainChanged");
|
||||||
|
|
||||||
self.setState(self.state,true);
|
self.setState(self.state,true);
|
||||||
}
|
}
|
||||||
@ -82,10 +82,12 @@ function UpdatePanel() {
|
|||||||
this.installUpdate = function() {
|
this.installUpdate = function() {
|
||||||
console.log("UpdatePanel:installUpdate");
|
console.log("UpdatePanel:installUpdate");
|
||||||
|
|
||||||
var noRetain = self.noRetainCheckbox.prop('checked');
|
// should personal sketches and settings be retained over update?
|
||||||
|
var retain = self.retainCheckbox.prop('checked');
|
||||||
|
console.log(" retain: ",retain);
|
||||||
|
|
||||||
self.stopCheckingStatus();
|
self.stopCheckingStatus();
|
||||||
postData = {no_retain:noRetain}
|
postData = {no_retain:!retain}
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: self.wifiboxURL + "/update/install",
|
url: self.wifiboxURL + "/update/install",
|
||||||
type: "POST",
|
type: "POST",
|
||||||
@ -175,8 +177,9 @@ function UpdatePanel() {
|
|||||||
console.log("UpdatePanel:setState: ",this.state," > ",newState,"(",this.stateText,") (networkMode: ",self.networkMode,") (newestVersion: ",self.newestVersion,") (refresh: ",refresh,")");
|
console.log("UpdatePanel:setState: ",this.state," > ",newState,"(",this.stateText,") (networkMode: ",self.networkMode,") (newestVersion: ",self.newestVersion,") (refresh: ",refresh,")");
|
||||||
this.state = newState;
|
this.state = newState;
|
||||||
|
|
||||||
var noRetain = self.noRetainCheckbox.prop('checked');
|
// should personal sketches and settings be retained over update?
|
||||||
console.log(" noRetain", noRetain);
|
var retain = self.retainCheckbox.prop('checked');
|
||||||
|
console.log(" retain", retain);
|
||||||
|
|
||||||
// download button
|
// download button
|
||||||
// if there isn't newestVersion data something went wrong,
|
// if there isn't newestVersion data something went wrong,
|
||||||
@ -189,7 +192,7 @@ function UpdatePanel() {
|
|||||||
case UpdatePanel.DOWNLOAD_FAILED:
|
case UpdatePanel.DOWNLOAD_FAILED:
|
||||||
case UpdatePanel.INSTALL_FAILED:
|
case UpdatePanel.INSTALL_FAILED:
|
||||||
console.log(" self.canUpdate: ",self.canUpdate);
|
console.log(" self.canUpdate: ",self.canUpdate);
|
||||||
if(self.canUpdate || noRetain) {
|
if(self.canUpdate || !retain) {
|
||||||
self.btnUpdate.removeAttr("disabled");
|
self.btnUpdate.removeAttr("disabled");
|
||||||
} else {
|
} else {
|
||||||
self.btnUpdate.attr("disabled", true);
|
self.btnUpdate.attr("disabled", true);
|
||||||
132
js/WordArt.js
Normal file
132
js/WordArt.js
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
var wordArtPopup;
|
||||||
|
|
||||||
|
function initWordArt() {
|
||||||
|
$("body").append('<div id="svgfont" style="display:none"></div>');
|
||||||
|
$("#svgfont").load("img/font.svg?");
|
||||||
|
|
||||||
|
wordArtPopup = new Popup($("#popupWordArt"),$("#popupMask"));
|
||||||
|
$("#btnWordArtOk").on("onButtonClick",wordArtPopup.commit);
|
||||||
|
$("#btnWordArtCancel").on("onButtonClick",wordArtPopup.cancel);
|
||||||
|
$("#popupWordArt").bind("onPopupCancel", onWordArtCancel);
|
||||||
|
$("#popupWordArt").bind("onPopupCommit", onWordArtOk);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showWordArtDialog() {
|
||||||
|
buttonGroupAdd.hide();
|
||||||
|
wordArtPopup.open();
|
||||||
|
$("#txtWordArt").focus();
|
||||||
|
$("#txtWordArt").val(""); //clear textbox
|
||||||
|
}
|
||||||
|
|
||||||
|
function onWordArtCancel() {
|
||||||
|
$("#txtWordArt").blur();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onWordArtOk() {
|
||||||
|
$("#txtWordArt").blur();
|
||||||
|
var s = $("#txtWordArt").val();
|
||||||
|
drawTextOnCanvas(s);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawTextOnCanvas(text) {
|
||||||
|
if (typeof(text) == 'string') {
|
||||||
|
var points = getStringAsPoints(text);
|
||||||
|
|
||||||
|
var bounds = getBounds(points);
|
||||||
|
var scaleX = (canvasWidth-50) / bounds.width;
|
||||||
|
var scaleY = (canvasHeight-50) / bounds.height;
|
||||||
|
|
||||||
|
var scale = Math.min(scaleX,scaleY);
|
||||||
|
|
||||||
|
scalePoints(points,scale);
|
||||||
|
var bounds = getBounds(points);
|
||||||
|
translatePoints(points,-bounds.x,-bounds.y); //left top of text is (0,0)
|
||||||
|
translatePoints(points,-bounds.width/2,-bounds.height/2); //anchor point center
|
||||||
|
translatePoints(points,canvasWidth/2,canvasHeight/2); //center in canvas
|
||||||
|
|
||||||
|
canvasDrawPoints(canvas,points);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getStringAsPoints(text) {
|
||||||
|
var allPoints = [];
|
||||||
|
var xPos = 0;
|
||||||
|
|
||||||
|
for (var i=0; i<text.length; i++) {
|
||||||
|
|
||||||
|
if (text[i]==" ") { //space
|
||||||
|
xPos += 8;
|
||||||
|
} else { //other characters
|
||||||
|
var path = getPathFromChar(text[i]);
|
||||||
|
var points = getPointsFromPath(path);
|
||||||
|
|
||||||
|
if (points.length==0) continue;
|
||||||
|
|
||||||
|
translatePoints(points,-points[0][0],0);
|
||||||
|
|
||||||
|
var bounds = getBounds(points);
|
||||||
|
|
||||||
|
translatePoints(points,-bounds.x,0);
|
||||||
|
translatePoints(points,xPos,0);
|
||||||
|
|
||||||
|
xPos+=bounds.width;
|
||||||
|
xPos+=2;
|
||||||
|
|
||||||
|
for (var j=0; j<points.length; j++) {
|
||||||
|
allPoints.push(points[j]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
return allPoints;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPathFromChar(ch) {
|
||||||
|
var index = ch.charCodeAt(0)-33;
|
||||||
|
var element = $("#svgfont path")[index];
|
||||||
|
if (element==undefined) return "";
|
||||||
|
return $("#svgfont path")[index].attributes["d"].nodeValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPointsFromPath(path) {
|
||||||
|
var points = [];
|
||||||
|
var cmds = path.split(' ');
|
||||||
|
var cursor = { x:0.0, y:0.0 };
|
||||||
|
var move = false;
|
||||||
|
var prevCmd = "";
|
||||||
|
for (var i=0; i<cmds.length; i++) {
|
||||||
|
var cmd = cmds[i];
|
||||||
|
var xy = cmd.split(",");
|
||||||
|
if (cmd=='m') move = true;
|
||||||
|
if (xy.length==2) { // if there are two parts (a comma) we asume it's a l command. (So L is not supported)
|
||||||
|
cursor.x += parseFloat(xy[0]);
|
||||||
|
cursor.y += parseFloat(xy[1]);
|
||||||
|
points.push([cursor.x,cursor.y,move]);
|
||||||
|
move = false;
|
||||||
|
} else if (prevCmd == "h"){
|
||||||
|
cursor.x += parseFloat(cmd);
|
||||||
|
points.push([cursor.x,cursor.y,move]);
|
||||||
|
} else if (prevCmd == "v"){
|
||||||
|
cursor.y += parseFloat(cmd);
|
||||||
|
points.push([cursor.x,cursor.y,move]);
|
||||||
|
} else if (prevCmd == "H"){
|
||||||
|
cursor.x = parseFloat(cmd);
|
||||||
|
points.push([cursor.x,cursor.y,move]);
|
||||||
|
} else if (prevCmd == "V"){
|
||||||
|
cursor.y = parseFloat(cmd);
|
||||||
|
points.push([cursor.x,cursor.y,move]);
|
||||||
|
}
|
||||||
|
prevCmd = cmd;
|
||||||
|
}
|
||||||
|
return points;
|
||||||
|
}
|
||||||
|
|
||||||
|
function canvasDrawPoints(canvas,points) {
|
||||||
|
beginShape();
|
||||||
|
for (var i=0; i<points.length; i++) {
|
||||||
|
var p = points[i];
|
||||||
|
if (points[i][2]) shapeMoveTo(p[0],p[1]);
|
||||||
|
else shapeLineTo(p[0],p[1]);
|
||||||
|
}
|
||||||
|
endShape();
|
||||||
|
}
|
||||||
@ -6,20 +6,13 @@
|
|||||||
* See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
|
* See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var btnMoveUpInterval;
|
|
||||||
var btnMoveDownInterval;
|
|
||||||
|
|
||||||
var btnTwistLeftInterval;
|
|
||||||
var btnTwistRightInterval;
|
|
||||||
var twistIncrement = Math.PI/1800;
|
var twistIncrement = Math.PI/1800;
|
||||||
|
|
||||||
var btnOopsInterval;
|
var btnNew, btnPrevious, btnNext, btnOops, btnStop, btnInfo;
|
||||||
|
var btnSettings, btnWordArt;
|
||||||
var btnNew, btnPrevious, btnNext;
|
var btnToggleEdit, buttonGroupEdit, btnZoom, btnMove, btnRotate;
|
||||||
var btnOops, btnStop, btnClear;
|
var btnToggleVerticalShapes, btnHeight, btnTwist, btnShape, btnConv, btnStraight, btnSine, btnDiv;
|
||||||
var btnMoveUp, btnMoveDown, btnTwistLeft, btnTwistRight;
|
var buttonGroupAdd, popupWordArt;
|
||||||
var btnInfo, btnSettings;
|
|
||||||
//var btnDebug; // debug
|
|
||||||
|
|
||||||
var state;
|
var state;
|
||||||
var prevState;
|
var prevState;
|
||||||
@ -31,183 +24,175 @@ var gcodeGenerateDelay = 50;
|
|||||||
function initButtonBehavior() {
|
function initButtonBehavior() {
|
||||||
console.log("f:initButtonBehavior");
|
console.log("f:initButtonBehavior");
|
||||||
|
|
||||||
// btnClear= $(".btnClear");
|
$(".btn").Button(); //initalizes all buttons
|
||||||
btnOops = $(".btnOops");
|
|
||||||
btnMoveUp = $("#btnMoveUp");
|
|
||||||
btnMoveDown = $("#btnMoveDown");
|
|
||||||
btnTwistLeft = $("#btnTwistLeft");
|
|
||||||
btnTwistRight = $("#btnTwistRight");
|
|
||||||
btnInfo = $(".btnInfo");
|
|
||||||
btnSettings = $(".btnSettings");
|
|
||||||
btnNew = $(".btnNew");
|
|
||||||
btnPrint= $(".btnPrint");
|
|
||||||
btnStop = $(".btnStop");
|
|
||||||
|
|
||||||
btnPrevious = $(".btnPrevious");
|
btnOops = $("#btnOops");
|
||||||
btnNext = $(".btnNext");
|
btnInfo = $("#btnInfo");
|
||||||
btnSave = $(".btnSave");
|
btnSettings = $("#btnSettings");
|
||||||
|
btnNew = $("#btnNew");
|
||||||
|
btnPrint= $("#btnPrint");
|
||||||
|
btnStop = $("#btnStop");
|
||||||
|
btnPrevious = $("#btnPrevious");
|
||||||
|
btnNext = $("#btnNext");
|
||||||
|
btnSave = $("#btnSave");
|
||||||
|
buttonGroupAdd = $("#buttonGroupAdd");
|
||||||
|
btnShape = $("#btnShape");
|
||||||
|
btnWordArt = $("#btnWordArt");
|
||||||
|
popupWordArt = $("#popupWordArt");
|
||||||
|
popupShape = $("#popupShape");
|
||||||
|
popupMask = $("#popupMask");
|
||||||
|
logoPanel = $("#logopanel");
|
||||||
|
btnToggleEdit = $("#btnToggleEdit");
|
||||||
|
buttonGroupEdit = $("#buttonGroupEdit");
|
||||||
|
btnZoom = $("#btnZoom");
|
||||||
|
btnMove = $("#btnMove");
|
||||||
|
btnRotate = $("#btnRotate");
|
||||||
|
btnToggleVerticalShapes = $("#btnToggleVerticalShapes");
|
||||||
|
buttonGroupVerticalShapes = $("#buttonGroupVerticalShapes");
|
||||||
|
btnHeight = $("#btnHeight");
|
||||||
|
btnTwist = $("#btnTwist");
|
||||||
|
btnStraight = $("#btnStraight");
|
||||||
|
btnDiv = $("#btnDiv");
|
||||||
|
btnConv = $("#btnConv");
|
||||||
|
btnSine = $("#btnSine");
|
||||||
|
btnAdd = $("#btnAdd");
|
||||||
|
|
||||||
//debug
|
logoPanel.on("onButtonClick", onLogo);
|
||||||
//btnDebug = $(".debugBtn");
|
btnNew.on("onButtonClick", onBtnNew);
|
||||||
|
btnAdd.on("onButtonClick", onBtnAdd);
|
||||||
|
btnWordArt.on("onButtonClick", onBtnWordArt);
|
||||||
|
btnShape.on("onButtonClick", onBtnShape);
|
||||||
|
btnPrint.on("onButtonClick", print);
|
||||||
|
btnOops.on("onButtonHold", onBtnOops);
|
||||||
|
// vertical shape buttons
|
||||||
|
btnToggleVerticalShapes.on("onButtonClick", onBtnToggleVerticalShapes);
|
||||||
|
btnHeight.on("onButtonHold", onBtnHeight);
|
||||||
|
btnTwist.on("onButtonHold", onBtnTwist);
|
||||||
|
btnStraight.on("onButtonClick", onBtnStraight);
|
||||||
|
btnDiv.on("onButtonClick", onBtnDiv);
|
||||||
|
btnConv.on("onButtonClick", onBtnConv);
|
||||||
|
btnSine.on("onButtonClick", onBtnSine);
|
||||||
|
|
||||||
btnNew.on('touchstart mousedown', clearDoodle);
|
btnToggleEdit.on("onButtonClick", onBtnToggleEdit);
|
||||||
btnPrint.on('touchstart mousedown', print);
|
btnMove.on("onButtonHold", onBtnMove);
|
||||||
|
btnZoom.on("onButtonHold", onBtnZoom);
|
||||||
|
btnRotate.on("onButtonHold", onBtnRotate);
|
||||||
|
|
||||||
getSavedSketchStatus();
|
getSavedSketchStatus();
|
||||||
setSketchModified(false);
|
setSketchModified(false);
|
||||||
//updatePrevNextButtonStateOnClear();
|
|
||||||
|
|
||||||
// btnClear.click(function(e) {
|
function onBtnToggleVerticalShapes() {
|
||||||
// e.preventDefault();
|
var btnImg;
|
||||||
// // console.log("clear");
|
if(buttonGroupVerticalShapes.is(":hidden")) {
|
||||||
//
|
btnImg = "img/buttons/btnArrowClose.png";
|
||||||
// clearDoodle();
|
} else {
|
||||||
// });
|
btnImg = "img/buttons/btnArrowOpen.png";
|
||||||
|
}
|
||||||
|
btnToggleVerticalShapes.attr("src",btnImg);
|
||||||
|
|
||||||
function startOops(e) {
|
buttonGroupVerticalShapes.fadeToggle(BUTTON_GROUP_SHOW_DURATION);
|
||||||
console.log("f:startOops()");
|
}
|
||||||
e.preventDefault();
|
|
||||||
btnOopsInterval = setInterval( function() {
|
function onLogo() {
|
||||||
|
location.reload();
|
||||||
|
}
|
||||||
|
function onBtnAdd() {
|
||||||
|
buttonGroupAdd.fadeToggle(BUTTON_GROUP_SHOW_DURATION);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onBtnStraight() {
|
||||||
|
setVerticalShape(verticalShapes.NONE);
|
||||||
|
}
|
||||||
|
function onBtnDiv() {
|
||||||
|
setVerticalShape(verticalShapes.DIVERGING);
|
||||||
|
}
|
||||||
|
function onBtnConv() {
|
||||||
|
setVerticalShape(verticalShapes.CONVERGING);
|
||||||
|
}
|
||||||
|
function onBtnSine() {
|
||||||
|
setVerticalShape(verticalShapes.SINUS);
|
||||||
|
}
|
||||||
|
|
||||||
|
function hitTest(cursor,button,radius) {
|
||||||
|
return distance(cursor.x,cursor.y,button.x,button.y)<radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function onBtnToggleEdit() {
|
||||||
|
var btnImg;
|
||||||
|
if(buttonGroupEdit.is(":hidden")) {
|
||||||
|
btnImg = "img/buttons/btnArrowClose.png";
|
||||||
|
} else {
|
||||||
|
btnImg = "img/buttons/btnArrowOpen.png";
|
||||||
|
}
|
||||||
|
btnToggleEdit.attr("src",btnImg);
|
||||||
|
|
||||||
|
buttonGroupEdit.fadeToggle(BUTTON_GROUP_SHOW_DURATION);
|
||||||
|
}
|
||||||
|
function onBtnMove(e,cursor) {
|
||||||
|
var w = btnMove.width();
|
||||||
|
var h = btnMove.height();
|
||||||
|
var speedX = (cursor.x-w/2)*0.3;
|
||||||
|
var speedY = (cursor.y-h/2)*0.3;
|
||||||
|
//console.log("move speed: ",speedX,speedY);
|
||||||
|
moveShape(speedX,speedY);
|
||||||
|
}
|
||||||
|
function onBtnZoom(e,cursor) {
|
||||||
|
var h = btnZoom.height();
|
||||||
|
var multiplier = (h/2-cursor.y)*0.003 + 1;
|
||||||
|
zoomShape(multiplier);
|
||||||
|
}
|
||||||
|
function onBtnRotate(e,cursor) {
|
||||||
|
var h = btnZoom.height();
|
||||||
|
var multiplier = (h/2-cursor.y)*0.003;
|
||||||
|
rotateShape(-multiplier);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onBtnHeight(e,cursor) {
|
||||||
|
var h = btnHeight.height();
|
||||||
|
if(cursor.y < h/2) {
|
||||||
|
previewUp(true);
|
||||||
|
} else {
|
||||||
|
previewDown(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function onBtnTwist(e,cursor) {
|
||||||
|
var h = btnTwist.height();
|
||||||
|
var multiplier = (cursor.y-h/2)*0.0005;
|
||||||
|
previewTwist(multiplier,true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onBtnOops(e) {
|
||||||
oopsUndo();
|
oopsUndo();
|
||||||
}, 1000/40);
|
|
||||||
}
|
}
|
||||||
function stopOops(e) {
|
|
||||||
console.log("f:stopOops()");
|
|
||||||
e.preventDefault();
|
|
||||||
clearInterval(btnOopsInterval);
|
|
||||||
redrawDoodle(true);
|
|
||||||
renderToImageDataPreview();
|
|
||||||
// redrawPreview();
|
|
||||||
}
|
|
||||||
btnOops.on('touchstart', function(e) { startOops(e); });
|
|
||||||
btnOops.on('touchend', function(e) { stopOops(e); });
|
|
||||||
btnOops.mousedown(function(e) { startOops(e); });
|
|
||||||
btnOops.mouseup(function(e) { stopOops(e); });
|
|
||||||
|
|
||||||
function startMoveUp(e) {
|
function onBtnNew(e) {
|
||||||
e.preventDefault();
|
clearDoodle();
|
||||||
// console.log("btnMoveUp mouse down");
|
|
||||||
if (_points.length > 1) {
|
|
||||||
previewUp(true);
|
|
||||||
clearInterval(btnMoveUpInterval);
|
|
||||||
btnMoveUpInterval = setInterval( function() {
|
|
||||||
previewUp(true);
|
|
||||||
}, 1000/30);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
function stopMoveUp(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
// console.log("btnMoveUp mouse up");
|
|
||||||
clearInterval(btnMoveUpInterval);
|
|
||||||
if (_points.length > 1) previewUp();
|
|
||||||
}
|
|
||||||
btnMoveUp.mousedown(function(e) { startMoveUp(e) });
|
|
||||||
btnMoveUp.mouseup(function(e) { stopMoveUp(e) });
|
|
||||||
btnMoveUp.on('touchstart', function(e) { startMoveUp(e) });
|
|
||||||
btnMoveUp.on('touchend', function(e) { stopMoveUp(e) });
|
|
||||||
|
|
||||||
function startMoveDown(e) {
|
function onBtnWordArt(e) {
|
||||||
e.preventDefault();
|
showWordArtDialog();
|
||||||
// console.log("btnMoveDown mouse down");
|
|
||||||
if (_points.length > 1) {
|
|
||||||
previewDown(true);
|
|
||||||
clearInterval(btnMoveDownInterval);
|
|
||||||
btnMoveDownInterval = setInterval( function() {
|
|
||||||
previewDown(true);
|
|
||||||
}, 1000/30);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
function stopMoveDown(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
// console.log("btnMoveDown mouse up");
|
|
||||||
clearInterval(btnMoveDownInterval);
|
|
||||||
if (_points.length > 1) previewDown();
|
|
||||||
}
|
|
||||||
btnMoveDown.mousedown(function(e) { startMoveDown(e) });
|
|
||||||
btnMoveDown.mouseup(function(e) { stopMoveDown(e) });
|
|
||||||
btnMoveDown.on('touchstart', function(e) { startMoveDown(e) });
|
|
||||||
btnMoveDown.on('touchend', function(e) { stopMoveDown(e) });
|
|
||||||
|
|
||||||
function startTwistLeft(e) {
|
function onBtnShape(e) {
|
||||||
e.preventDefault();
|
showShapeDialog();
|
||||||
// console.log("btnTwistLeft mouse down");
|
buttonGroupAdd.fadeOut();
|
||||||
if (_points.length > 1) {
|
|
||||||
previewTwistLeft(true);
|
|
||||||
clearInterval(btnTwistLeftInterval);
|
|
||||||
btnTwistLeftInterval = setInterval( function() {
|
|
||||||
previewTwistLeft(true);
|
|
||||||
}, 1000/30);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
function stopTwistLeft(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
// console.log("btnTwistLeft mouse up");
|
|
||||||
clearInterval(btnTwistLeftInterval);
|
|
||||||
if (_points.length > 1) previewTwistLeft();
|
|
||||||
}
|
|
||||||
btnTwistLeft.mousedown(function(e) { startTwistLeft(e) });
|
|
||||||
btnTwistLeft.mouseup(function(e) { stopTwistLeft(e) });
|
|
||||||
btnTwistLeft.on('touchstart', function(e) { startTwistLeft(e) });
|
|
||||||
btnTwistLeft.on('touchend', function(e) { stopTwistLeft(e) });
|
|
||||||
|
|
||||||
function startTwistRight(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
// console.log("btnTwistRight mouse down");
|
|
||||||
if (_points.length > 1) {
|
|
||||||
previewTwistRight(true);
|
|
||||||
clearInterval(btnTwistRightInterval);
|
|
||||||
btnTwistRightInterval = setInterval( function() {
|
|
||||||
previewTwistRight(true);
|
|
||||||
}, 1000/30);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function stopTwistRight(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
// console.log("btnTwistRight mouse up");
|
|
||||||
clearInterval(btnTwistRightInterval);
|
|
||||||
if (_points.length > 1) previewTwistRight();
|
|
||||||
}
|
|
||||||
btnTwistRight.mousedown(function(e) { startTwistRight(e) });
|
|
||||||
btnTwistRight.mouseup(function(e) { stopTwistRight(e) });
|
|
||||||
btnTwistRight.on('touchstart', function(e) { startTwistRight(e) });
|
|
||||||
btnTwistRight.on('touchend', function(e) { stopTwistRight(e) });
|
|
||||||
|
|
||||||
/*function openSettings() {
|
|
||||||
console.log("f:openSettings()");
|
|
||||||
$("#contentOverlay").fadeIn(1000, function() {
|
|
||||||
loadSettings();
|
|
||||||
});
|
|
||||||
}*/
|
|
||||||
enableButton(btnSettings, openSettingsWindow);
|
enableButton(btnSettings, openSettingsWindow);
|
||||||
|
|
||||||
// btnSettings.on('touchend', function(e) {
|
|
||||||
// e.preventDefault();
|
|
||||||
// console.log("btnSettings touchend");
|
|
||||||
// });
|
|
||||||
|
|
||||||
// 29-okt-2013 - we're not doing help for smartphones at the moment
|
// 29-okt-2013 - we're not doing help for smartphones at the moment
|
||||||
if (clientInfo.isSmartphone) {
|
if (clientInfo.isSmartphone) {
|
||||||
btnInfo.addClass("disabled");
|
btnInfo.addClass("disabled");
|
||||||
} else {
|
} else {
|
||||||
btnInfo.mouseup(function(e) {
|
function onBtnInfo(e) {
|
||||||
e.preventDefault();
|
|
||||||
console.log("btnInfo mouse up");
|
|
||||||
helpTours.startTour(helpTours.WELCOMETOUR);
|
helpTours.startTour(helpTours.WELCOMETOUR);
|
||||||
});
|
}
|
||||||
|
enableButton(btnInfo, onBtnInfo);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// DEBUG
|
|
||||||
/*
|
|
||||||
// $(".agentInfo").css("display", "none");
|
|
||||||
btnDebug.click(function(e) {
|
|
||||||
console.log("debugClick");
|
|
||||||
$(".agentInfo").toggleClass("agentInfoToggle");
|
|
||||||
e.preventDefault();
|
|
||||||
})
|
|
||||||
//*/
|
|
||||||
|
|
||||||
//btnStop.on('touchstart mousedown',stopPrint);
|
|
||||||
}
|
|
||||||
function stopPrint() {
|
function stopPrint() {
|
||||||
console.log("f:stopPrint() >> sendPrintCommands = " + sendPrintCommands);
|
console.log("f:stopPrint() >> sendPrintCommands = " + sendPrintCommands);
|
||||||
//if (!confirm("Weet je zeker dat je huidige print wilt stoppen?")) return;
|
//if (!confirm("Weet je zeker dat je huidige print wilt stoppen?")) return;
|
||||||
@ -217,14 +202,6 @@ function stopPrint() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// function prevDoodle(e) {
|
|
||||||
// console.log("f:prevDoodle()");
|
|
||||||
// console.log("f:prevDoodle()");
|
|
||||||
// }
|
|
||||||
// function nextDoodle(e) {
|
|
||||||
// console.log("f:nextDoodle()");
|
|
||||||
// }
|
|
||||||
|
|
||||||
function print(e) {
|
function print(e) {
|
||||||
console.log("f:print() >> sendPrintCommands = " + sendPrintCommands);
|
console.log("f:print() >> sendPrintCommands = " + sendPrintCommands);
|
||||||
|
|
||||||
@ -309,6 +286,7 @@ function oopsUndo() {
|
|||||||
}
|
}
|
||||||
redrawPreview();
|
redrawPreview();
|
||||||
}
|
}
|
||||||
|
|
||||||
function previewUp(redrawLess) {
|
function previewUp(redrawLess) {
|
||||||
// console.log("f:previewUp()");
|
// console.log("f:previewUp()");
|
||||||
if (numLayers < maxNumLayers) {
|
if (numLayers < maxNumLayers) {
|
||||||
@ -329,17 +307,19 @@ function previewDown(redrawLess) {
|
|||||||
redrawRenderedPreview(redrawLess);
|
redrawRenderedPreview(redrawLess);
|
||||||
}
|
}
|
||||||
function previewTwistLeft(redrawLess) {
|
function previewTwistLeft(redrawLess) {
|
||||||
if (redrawLess == undefined) redrawLess = false;
|
previewTwist(-twistIncrement,true)
|
||||||
// console.log("f:previewTwistLeft()");
|
|
||||||
if (rStep > -previewRotationLimit) rStep -= twistIncrement;
|
|
||||||
// redrawPreview(redrawLess);
|
|
||||||
redrawRenderedPreview(redrawLess);
|
|
||||||
setSketchModified(true);
|
|
||||||
}
|
}
|
||||||
function previewTwistRight(redrawLess) {
|
function previewTwistRight(redrawLess) {
|
||||||
// console.log("f:previewTwistRight()");
|
previewTwist(twistIncrement,true)
|
||||||
if (rStep < previewRotationLimit) rStep += twistIncrement;
|
}
|
||||||
// redrawPreview(redrawLess);
|
function previewTwist(increment,redrawLess) {
|
||||||
|
console.log("previewTwist: ",increment);
|
||||||
|
if (redrawLess == undefined) redrawLess = false;
|
||||||
|
|
||||||
|
rStep += increment;
|
||||||
|
if(rStep < -previewRotationLimit) rStep = -previewRotationLimit;
|
||||||
|
else if(rStep > previewRotationLimit) rStep = previewRotationLimit;
|
||||||
|
|
||||||
redrawRenderedPreview(redrawLess);
|
redrawRenderedPreview(redrawLess);
|
||||||
setSketchModified(true);
|
setSketchModified(true);
|
||||||
}
|
}
|
||||||
@ -368,23 +348,17 @@ function setState(newState,newHasControl) {
|
|||||||
// print button
|
// print button
|
||||||
var printEnabled = (newState == Printer.IDLE_STATE && newHasControl);
|
var printEnabled = (newState == Printer.IDLE_STATE && newHasControl);
|
||||||
if(printEnabled) {
|
if(printEnabled) {
|
||||||
btnPrint.removeClass("disabled"); // enable print button
|
enableButton(btnPrint,print);
|
||||||
btnPrint.unbind('touchstart mousedown');
|
|
||||||
btnPrint.bind('touchstart mousedown',print);
|
|
||||||
} else {
|
} else {
|
||||||
btnPrint.addClass("disabled"); // disable print button
|
disableButton(btnPrint);
|
||||||
btnPrint.unbind('touchstart mousedown');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// stop button
|
// stop button
|
||||||
var stopEnabled = ((newState == Printer.PRINTING_STATE || newState == Printer.BUFFERING_STATE) && newHasControl);
|
var stopEnabled = ((newState == Printer.PRINTING_STATE || newState == Printer.BUFFERING_STATE) && newHasControl);
|
||||||
if(stopEnabled) {
|
if(stopEnabled) {
|
||||||
btnStop.removeClass("disabled");
|
enableButton(btnStop,stopPrint);
|
||||||
btnStop.unbind('touchstart mousedown');
|
|
||||||
btnStop.bind('touchstart mousedown',stopPrint);
|
|
||||||
} else {
|
} else {
|
||||||
btnStop.addClass("disabled");
|
disableButton(btnStop);
|
||||||
btnStop.unbind('touchstart mousedown');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// thermometer
|
// thermometer
|
||||||
@ -45,7 +45,7 @@ var isModified = false;
|
|||||||
*
|
*
|
||||||
* * * * * * * * * */
|
* * * * * * * * * */
|
||||||
function initDoodleDrawing() {
|
function initDoodleDrawing() {
|
||||||
console.log("f:initDoodleDrawing()");
|
//console.log("f:initDoodleDrawing()");
|
||||||
|
|
||||||
$canvas = $("#mycanvas");
|
$canvas = $("#mycanvas");
|
||||||
canvas = $canvas[0];
|
canvas = $canvas[0];
|
||||||
@ -79,7 +79,7 @@ function initDoodleDrawing() {
|
|||||||
// drawCanvas = $(".drawareacontainer");
|
// drawCanvas = $(".drawareacontainer");
|
||||||
drawCanvas = $("#mycanvasContainer"); // $("#drawAreaContainer")
|
drawCanvas = $("#mycanvasContainer"); // $("#drawAreaContainer")
|
||||||
|
|
||||||
console.log("drawCanvasTopLeftCoords: " + drawCanvasTopLeftCoords);
|
//console.log("drawCanvasTopLeftCoords: " + drawCanvasTopLeftCoords);
|
||||||
// drawCanvasTopLeftCoords[0] = drawCanvas.css("left").match(/[0-9]/g).join("");
|
// drawCanvasTopLeftCoords[0] = drawCanvas.css("left").match(/[0-9]/g).join("");
|
||||||
// drawCanvasTopLeftCoords[1] = drawCanvas.css("top").match(/[0-9]/g).join("");
|
// drawCanvasTopLeftCoords[1] = drawCanvas.css("top").match(/[0-9]/g).join("");
|
||||||
drawCanvasTopLeftCoords[0] = drawCanvas.offset().left;
|
drawCanvasTopLeftCoords[0] = drawCanvas.offset().left;
|
||||||
@ -87,8 +87,8 @@ function initDoodleDrawing() {
|
|||||||
// drawCanvasTopLeftCoords[0] = drawCanvas[0].offsetParent.offsetLeft;
|
// drawCanvasTopLeftCoords[0] = drawCanvas[0].offsetParent.offsetLeft;
|
||||||
// drawCanvasTopLeftCoords[1] = drawCanvas[0].offsetParent.offsetTop;
|
// drawCanvasTopLeftCoords[1] = drawCanvas[0].offsetParent.offsetTop;
|
||||||
|
|
||||||
console.log("f:initDoodleDrawing() >> canvasWidth: " + canvasWidth);
|
//console.log("f:initDoodleDrawing() >> canvasWidth: " + canvasWidth);
|
||||||
console.log("f:initDoodleDrawing() >> canvasHeight: " + canvasHeight);
|
//console.log("f:initDoodleDrawing() >> canvasHeight: " + canvasHeight);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -98,6 +98,7 @@ function initDoodleDrawing() {
|
|||||||
*
|
*
|
||||||
* * * * * * * * * */
|
* * * * * * * * * */
|
||||||
function draw(_x, _y, _width) {
|
function draw(_x, _y, _width) {
|
||||||
|
//console.log("canvasDrawing:draw");
|
||||||
// console.log("f:draw() >> _width: " + _width);
|
// console.log("f:draw() >> _width: " + _width);
|
||||||
|
|
||||||
if (prevX == 0 && prevY ==0) {
|
if (prevX == 0 && prevY ==0) {
|
||||||
@ -154,7 +155,7 @@ function draw(_x, _y, _width) {
|
|||||||
*
|
*
|
||||||
* * * * * * * * * */
|
* * * * * * * * * */
|
||||||
function clearDoodle() {
|
function clearDoodle() {
|
||||||
console.log("f:clearDoodle");
|
//console.log("f:clearDoodle");
|
||||||
|
|
||||||
updatePrevNextButtonStateOnClear();
|
updatePrevNextButtonStateOnClear();
|
||||||
|
|
||||||
@ -179,6 +180,7 @@ function clearDoodle() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function redrawDoodle(recalcBoundsAndTransforms) {
|
function redrawDoodle(recalcBoundsAndTransforms) {
|
||||||
|
//console.log("canvasDrawing:redrawDoodle");
|
||||||
if (recalcBoundsAndTransforms == undefined) recalcBoundsAndTransforms = false;
|
if (recalcBoundsAndTransforms == undefined) recalcBoundsAndTransforms = false;
|
||||||
// console.log("f:redrawDoodle() >> recalcBoundsAndTransforms = " + recalcBoundsAndTransforms);
|
// console.log("f:redrawDoodle() >> recalcBoundsAndTransforms = " + recalcBoundsAndTransforms);
|
||||||
|
|
||||||
@ -205,8 +207,9 @@ function redrawDoodle(recalcBoundsAndTransforms) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// checks if x,y is outside doodleBounds, if so update
|
||||||
function adjustBounds(x, y) {
|
function adjustBounds(x, y) {
|
||||||
|
//console.log("canvasDrawing:adjustBounds");
|
||||||
var newPointsOutsideOfCurrentBounds = false;
|
var newPointsOutsideOfCurrentBounds = false;
|
||||||
// console.log("f:adjustBounds("+x+","+y+")");
|
// console.log("f:adjustBounds("+x+","+y+")");
|
||||||
|
|
||||||
@ -242,7 +245,7 @@ function redrawDoodle(recalcBoundsAndTransforms) {
|
|||||||
|
|
||||||
// does what exactly?
|
// does what exactly?
|
||||||
function adjustPreviewTransformation() {
|
function adjustPreviewTransformation() {
|
||||||
// console.log("f:adjustPreviewTransformation()");
|
//console.log("canvasDrawing:adjustPreviewTransformation");
|
||||||
|
|
||||||
doodleTransform[0] = doodleBounds[0];
|
doodleTransform[0] = doodleBounds[0];
|
||||||
doodleTransform[1] = doodleBounds[1];
|
doodleTransform[1] = doodleBounds[1];
|
||||||
@ -272,6 +275,7 @@ function adjustPreviewTransformation() {
|
|||||||
*
|
*
|
||||||
* * * * * * * * * */
|
* * * * * * * * * */
|
||||||
function onCanvasMouseDown(e) {
|
function onCanvasMouseDown(e) {
|
||||||
|
//console.log("canvasDrawing:onCanvasMouseDown");
|
||||||
setSketchModified(true);
|
setSketchModified(true);
|
||||||
|
|
||||||
// console.log("f:onCanvasMouseDown()");
|
// console.log("f:onCanvasMouseDown()");
|
||||||
@ -301,7 +305,7 @@ function onCanvasMouseDown(e) {
|
|||||||
|
|
||||||
var prevPoint = {x:-1, y:-1};
|
var prevPoint = {x:-1, y:-1};
|
||||||
function onCanvasMouseMove(e) {
|
function onCanvasMouseMove(e) {
|
||||||
|
//console.log("canvasDrawing:onCanvasMouseMove");
|
||||||
// console.log("f:onCanvasMouseMove()");
|
// console.log("f:onCanvasMouseMove()");
|
||||||
if (!dragging) return;
|
if (!dragging) return;
|
||||||
|
|
||||||
@ -363,11 +367,11 @@ function onCanvasMouseUp(e) {
|
|||||||
// console.log("f:onCanvasMouseUp()");
|
// console.log("f:onCanvasMouseUp()");
|
||||||
// console.log("onmouseup");
|
// console.log("onmouseup");
|
||||||
dragging = false;
|
dragging = false;
|
||||||
console.log("doodleBounds: " + doodleBounds);
|
//console.log("doodleBounds: " + doodleBounds);
|
||||||
console.log("doodleTransform: " + doodleTransform);
|
//console.log("doodleTransform: " + doodleTransform);
|
||||||
// ctx.stroke();
|
// ctx.stroke();
|
||||||
|
|
||||||
console.log("_points.length :" + _points.length);
|
//console.log("_points.length :" + _points.length);
|
||||||
// console.log(_points);
|
// console.log(_points);
|
||||||
|
|
||||||
// DEBUG
|
// DEBUG
|
||||||
@ -383,7 +387,7 @@ function onCanvasTouchDown(e) {
|
|||||||
setSketchModified(true);
|
setSketchModified(true);
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
console.log("f:onCanvasTouchDown >> e: " , e);
|
//console.log("f:onCanvasTouchDown >> e: " , e);
|
||||||
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
|
// var x = e.touches[0].pageX - e.touches[0].target.offsetLeft;
|
||||||
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
|
// var y = e.touches[0].pageY - e.touches[0].target.offsetTop;
|
||||||
var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
|
var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
|
||||||
@ -404,6 +408,7 @@ function onCanvasTouchDown(e) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onCanvasTouchMove(e) {
|
function onCanvasTouchMove(e) {
|
||||||
|
//console.log("canvasDrawing:onCanvasTouchMove");
|
||||||
setSketchModified(true);
|
setSketchModified(true);
|
||||||
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -416,7 +421,7 @@ function onCanvasTouchMove(e) {
|
|||||||
// var x = e.touches[0].layerX;
|
// var x = e.touches[0].layerX;
|
||||||
// var y = e.touches[0].layerY;
|
// var y = e.touches[0].layerY;
|
||||||
|
|
||||||
console.log("f:onCanvasTouchMove >> x,y = "+x+","+y+" , e: " , e);
|
//console.log("f:onCanvasTouchMove >> x,y = "+x+","+y+" , e: " , e);
|
||||||
|
|
||||||
if (prevPoint.x != -1 || prevPoint.y != -1) {
|
if (prevPoint.x != -1 || prevPoint.y != -1) {
|
||||||
var dist = Math.sqrt(Math.pow((prevPoint.x - x), 2) + Math.pow((prevPoint.y - y), 2));
|
var dist = Math.sqrt(Math.pow((prevPoint.x - x), 2) + Math.pow((prevPoint.y - y), 2));
|
||||||
@ -469,12 +474,12 @@ function onCanvasTouchMove(e) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onCanvasTouchEnd(e) {
|
function onCanvasTouchEnd(e) {
|
||||||
console.log("f:onCanvasTouchEnd()");
|
//console.log("f:onCanvasTouchEnd()");
|
||||||
console.log("doodleBounds: " + doodleBounds);
|
//console.log("doodleBounds: " + doodleBounds);
|
||||||
console.log("doodleTransform: " + doodleTransform);
|
//console.log("doodleTransform: " + doodleTransform);
|
||||||
// ctx.stroke();
|
// ctx.stroke();
|
||||||
|
|
||||||
console.log("_points.length :" + _points.length);
|
//console.log("_points.length :" + _points.length);
|
||||||
|
|
||||||
// redrawPreview();
|
// redrawPreview();
|
||||||
renderToImageDataPreview();
|
renderToImageDataPreview();
|
||||||
@ -15,9 +15,11 @@ function generate_gcode() {
|
|||||||
gcode = [];
|
gcode = [];
|
||||||
|
|
||||||
console.log("settings: ",settings);
|
console.log("settings: ",settings);
|
||||||
var speed = settings["printer.speed"]
|
var speed = settings["printer.speed"];
|
||||||
var normalSpeed = speed;
|
var normalSpeed = speed;
|
||||||
var bottomSpeed = speed*0.5;
|
var bottomSpeed = settings["printer.bottomLayerSpeed"];
|
||||||
|
var firstLayerSlow = settings["printer.firstLayerSlow"];
|
||||||
|
var bottomFlowRate = settings["printer.bottomFlowRate"];
|
||||||
var travelSpeed = settings["printer.travelSpeed"]
|
var travelSpeed = settings["printer.travelSpeed"]
|
||||||
var filamentThickness = settings["printer.filamentThickness"];
|
var filamentThickness = settings["printer.filamentThickness"];
|
||||||
var wallThickness = settings["printer.wallThickness"];
|
var wallThickness = settings["printer.wallThickness"];
|
||||||
@ -157,12 +159,14 @@ function generate_gcode() {
|
|||||||
var isTraveling = !isLoop && i==0;
|
var isTraveling = !isLoop && i==0;
|
||||||
var doRetract = retractionEnabled && prev.distance(to) > retractionminDistance;
|
var doRetract = retractionEnabled && prev.distance(to) > retractionminDistance;
|
||||||
|
|
||||||
if (enableTraveling && isTraveling) {
|
var firstPointEver = (layer == 0 && i == 0 && j == 0);
|
||||||
if (doRetract) gcode.push("G0 E" + (extruder - retractionamount).toFixed(3) + " F" + (retractionspeed * 60).toFixed(3)); //retract
|
if (firstPointEver || layer > 2 && enableTraveling && isTraveling) { //always travel to first point, then disable traveling for first two layers and use settings for remainder of print
|
||||||
|
if (!firstPointEver && doRetract) gcode.push("G0 E" + (extruder - retractionamount).toFixed(3) + " F" + (retractionspeed * 60).toFixed(3)); //retract
|
||||||
gcode.push("G0 X" + to.x.toFixed(3) + " Y" + to.y.toFixed(3) + " Z" + z.toFixed(3) + " F" + (travelSpeed * 60).toFixed(3));
|
gcode.push("G0 X" + to.x.toFixed(3) + " Y" + to.y.toFixed(3) + " Z" + z.toFixed(3) + " F" + (travelSpeed * 60).toFixed(3));
|
||||||
if (doRetract) gcode.push("G0 E" + extruder.toFixed(3) + " F" + (retractionspeed * 60).toFixed(3)); // return to normal
|
if (!firstPointEver && doRetract) gcode.push("G0 E" + extruder.toFixed(3) + " F" + (retractionspeed * 60).toFixed(3)); // return to normal
|
||||||
} else {
|
} else {
|
||||||
extruder += prev.distance(to) * wallThickness * layerHeight / (Math.pow((filamentThickness/2), 2) * Math.PI);
|
var f = (layer < 2) ? bottomFlowRate : 1;
|
||||||
|
extruder += prev.distance(to) * wallThickness * layerHeight / (Math.pow((filamentThickness/2), 2) * Math.PI) * f;
|
||||||
gcode.push("G1 X" + to.x.toFixed(3) + " Y" + to.y.toFixed(3) + " Z" + z.toFixed(3) + " F" + (speed * 60).toFixed(3) + " E" + extruder.toFixed(3));
|
gcode.push("G1 X" + to.x.toFixed(3) + " Y" + to.y.toFixed(3) + " Z" + z.toFixed(3) + " F" + (speed * 60).toFixed(3) + " E" + extruder.toFixed(3));
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -35,7 +35,7 @@ function doOnResize() {
|
|||||||
function initLayouting() {
|
function initLayouting() {
|
||||||
console.log("f:initLayouting()");
|
console.log("f:initLayouting()");
|
||||||
|
|
||||||
$drawAreaContainer = $(".drawareacontainer");
|
$drawAreaContainer = $("#drawareacontainer");
|
||||||
|
|
||||||
canvas.width = $canvas.width();
|
canvas.width = $canvas.width();
|
||||||
canvas.height = $canvas.height(); // canvas.clientHeight;
|
canvas.height = $canvas.height(); // canvas.clientHeight;
|
||||||
101
js/libs/jquery-fastclick.js
vendored
Normal file
101
js/libs/jquery-fastclick.js
vendored
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
/**
|
||||||
|
* jQuery.fastClick.js
|
||||||
|
*
|
||||||
|
* Work around the 300ms delay for the click event in some mobile browsers.
|
||||||
|
*
|
||||||
|
* Code based on <http://code.google.com/mobile/articles/fast_buttons.html>
|
||||||
|
*
|
||||||
|
* @usage
|
||||||
|
* $('button').fastClick(function() {alert('clicked!');});
|
||||||
|
*
|
||||||
|
* @license MIT
|
||||||
|
* @author Dave Hulbert (dave1010)
|
||||||
|
* @version 1.0.0 2013-01-17
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*global document, window, jQuery, Math */
|
||||||
|
|
||||||
|
(function($) {
|
||||||
|
|
||||||
|
$.fn.fastClick = function(handler) {
|
||||||
|
return $(this).each(function(){
|
||||||
|
$.FastButton($(this)[0], handler);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
$.FastButton = function(element, handler) {
|
||||||
|
var startX, startY;
|
||||||
|
|
||||||
|
var reset = function() {
|
||||||
|
$(element).unbind('touchend');
|
||||||
|
$("body").unbind('touchmove.fastClick');
|
||||||
|
};
|
||||||
|
|
||||||
|
var onClick = function(event) {
|
||||||
|
event.stopPropagation();
|
||||||
|
reset();
|
||||||
|
handler.call(this, event);
|
||||||
|
|
||||||
|
if (event.type === 'touchend') {
|
||||||
|
$.clickbuster.preventGhostClick(startX, startY);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var onTouchMove = function(event) {
|
||||||
|
if (Math.abs(event.originalEvent.touches[0].clientX - startX) > 10 ||
|
||||||
|
Math.abs(event.originalEvent.touches[0].clientY - startY) > 10) {
|
||||||
|
reset();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var onTouchStart = function(event) {
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
$(element).bind('touchend', onClick);
|
||||||
|
$("body").bind('touchmove.fastClick', onTouchMove);
|
||||||
|
|
||||||
|
startX = event.originalEvent.touches[0].clientX;
|
||||||
|
startY = event.originalEvent.touches[0].clientY;
|
||||||
|
};
|
||||||
|
|
||||||
|
$(element).bind({
|
||||||
|
touchstart: onTouchStart,
|
||||||
|
click: onClick
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
$.clickbuster = {
|
||||||
|
coordinates: [],
|
||||||
|
|
||||||
|
preventGhostClick: function(x, y) {
|
||||||
|
$.clickbuster.coordinates.push(x, y);
|
||||||
|
window.setTimeout($.clickbuster.pop, 2500);
|
||||||
|
},
|
||||||
|
|
||||||
|
pop: function() {
|
||||||
|
$.clickbuster.coordinates.splice(0, 2);
|
||||||
|
},
|
||||||
|
|
||||||
|
onClick: function(event) {
|
||||||
|
var x, y, i;
|
||||||
|
for (i = 0; i < $.clickbuster.coordinates.length; i += 2) {
|
||||||
|
x = $.clickbuster.coordinates[i];
|
||||||
|
y = $.clickbuster.coordinates[i + 1];
|
||||||
|
if (Math.abs(event.clientX - x) < 25 && Math.abs(event.clientY - y) < 25) {
|
||||||
|
event.stopPropagation();
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$(function(){
|
||||||
|
if (document.addEventListener){
|
||||||
|
document.addEventListener('click', $.clickbuster.onClick, true);
|
||||||
|
} else if (document.attachEvent){
|
||||||
|
// for IE 7/8
|
||||||
|
document.attachEvent('onclick', $.clickbuster.onClick);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
}(jQuery));
|
||||||
@ -30,6 +30,9 @@ var showOrHide = false;
|
|||||||
|
|
||||||
var clientInfo = {};
|
var clientInfo = {};
|
||||||
|
|
||||||
|
var POPUP_SHOW_DURATION = 175;
|
||||||
|
var BUTTON_GROUP_SHOW_DURATION = 80;
|
||||||
|
|
||||||
$(function() {
|
$(function() {
|
||||||
console.log("ready");
|
console.log("ready");
|
||||||
|
|
||||||
@ -65,10 +68,16 @@ $(function() {
|
|||||||
initDoodleDrawing();
|
initDoodleDrawing();
|
||||||
initPreviewRendering();
|
initPreviewRendering();
|
||||||
initLayouting();
|
initLayouting();
|
||||||
initSidebars();
|
// initSidebars();
|
||||||
initButtonBehavior();
|
initButtonBehavior();
|
||||||
initKeyboard();
|
initKeyboard();
|
||||||
initVerticalShapes();
|
// initVerticalShapes();
|
||||||
|
initWordArt();
|
||||||
|
initShapeDialog();
|
||||||
|
|
||||||
|
disableDragging();
|
||||||
|
|
||||||
|
if (!clientInfo.isSmartphone) initHelp();
|
||||||
|
|
||||||
thermometer.init($("#thermometerCanvas"), $("#thermometerContainer"));
|
thermometer.init($("#thermometerCanvas"), $("#thermometerContainer"));
|
||||||
progressbar.init($("#progressbarCanvas"), $("#progressbarCanvasContainer"));
|
progressbar.init($("#progressbarCanvas"), $("#progressbarCanvasContainer"));
|
||||||
@ -120,17 +129,24 @@ $(function() {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function disableDragging() {
|
||||||
|
$(document).bind("dragstart", function(event) {
|
||||||
|
console.log("dragstart");
|
||||||
|
event.preventDefault();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function enableButton(elem, handler) {
|
function enableButton(elem, handler) {
|
||||||
//var elem = $('#'+domId);
|
//var elem = $('#'+domId);
|
||||||
elem.removeClass("disabled");
|
elem.removeClass("disabled");
|
||||||
elem.unbind('click');
|
elem.unbind('onButtonClick');
|
||||||
elem.bind('click', handler);
|
elem.bind('onButtonClick', handler);
|
||||||
}
|
}
|
||||||
|
|
||||||
function disableButton(elem) {
|
function disableButton(elem) {
|
||||||
//var elem = $('#'+domId);
|
//var elem = $('#'+domId);
|
||||||
elem.addClass("disabled");
|
elem.addClass("disabled");
|
||||||
elem.unbind('click');
|
elem.unbind('onButtonClick');
|
||||||
}
|
}
|
||||||
|
|
||||||
function showOrHideThermo() {
|
function showOrHideThermo() {
|
||||||
@ -26,7 +26,7 @@ var prevRedrawTime = new Date().getTime();
|
|||||||
var redrawInterval = 1000 / 30; // ms
|
var redrawInterval = 1000 / 30; // ms
|
||||||
|
|
||||||
function initPreviewRendering() {
|
function initPreviewRendering() {
|
||||||
console.log("f:initPreviewRendering()");
|
//console.log("f:initPreviewRendering()");
|
||||||
|
|
||||||
$preview = $("#preview");
|
$preview = $("#preview");
|
||||||
preview = $preview[0];
|
preview = $preview[0];
|
||||||
@ -89,6 +89,7 @@ var highlight = true; //highlight bottom, middle and top layers
|
|||||||
var linesRaw = "";
|
var linesRaw = "";
|
||||||
var debug_redrawSimplification = 6;
|
var debug_redrawSimplification = 6;
|
||||||
function redrawPreview(redrawLess) {
|
function redrawPreview(redrawLess) {
|
||||||
|
//console.log("PreviewRendering:redrawPreview");
|
||||||
if (redrawLess == undefined) redrawLess = false;
|
if (redrawLess == undefined) redrawLess = false;
|
||||||
|
|
||||||
if (_points.length < 2) {
|
if (_points.length < 2) {
|
||||||
@ -168,8 +169,7 @@ function redrawPreview(redrawLess) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function renderToImageDataPreview() {
|
function renderToImageDataPreview() {
|
||||||
console.log("f:renderToImageDataPreview()");
|
//console.log("PreviewRendering:renderToImageDataPreview");
|
||||||
|
|
||||||
if (_points.length < 2) return;
|
if (_points.length < 2) return;
|
||||||
|
|
||||||
//*
|
//*
|
||||||
@ -238,9 +238,10 @@ function renderToImageDataPreview() {
|
|||||||
previewCtx.globalAlpha = globalAlpha;
|
previewCtx.globalAlpha = globalAlpha;
|
||||||
}
|
}
|
||||||
|
|
||||||
// called by the move up/down or twist left/right buttons
|
// called by the move up/down, twist left/right or new buttons
|
||||||
// it is assumed that the preview has been rendered to an Image object, which will be used to draw the preview with (much better performance)
|
// it is assumed that the preview has been rendered to an Image object, which will be used to draw the preview with (much better performance)
|
||||||
function redrawRenderedPreview(redrawLess) {
|
function redrawRenderedPreview(redrawLess) {
|
||||||
|
//console.log("PreviewRendering:redrawRenderedPreview");
|
||||||
if (redrawLess == undefined) redrawLess = false;
|
if (redrawLess == undefined) redrawLess = false;
|
||||||
// console.log("f:redrawRenderedPreview()");
|
// console.log("f:redrawRenderedPreview()");
|
||||||
|
|
||||||
@ -251,6 +252,9 @@ function redrawRenderedPreview(redrawLess) {
|
|||||||
var y = 0;
|
var y = 0;
|
||||||
var r = 0;
|
var r = 0;
|
||||||
|
|
||||||
|
// check if there is preview image data that we can use for the layers
|
||||||
|
if(!doodleImageCapture.src || doodleImageCapture.src == "") return;
|
||||||
|
|
||||||
for(var i = 0; i < numLayers; i++) {
|
for(var i = 0; i < numLayers; i++) {
|
||||||
|
|
||||||
var verticalScaleFactor = scaleFunction(i / maxNumLayers);
|
var verticalScaleFactor = scaleFunction(i / maxNumLayers);
|
||||||
@ -299,6 +303,7 @@ function centeredAndScaledDoodlePoint(p) {
|
|||||||
var updatePrevX = -1;
|
var updatePrevX = -1;
|
||||||
var updatePrevY = -1;
|
var updatePrevY = -1;
|
||||||
function updatePreview(_x, _y, redrawLess) {
|
function updatePreview(_x, _y, redrawLess) {
|
||||||
|
//console.log("PreviewRendering:updatePreview");
|
||||||
if (redrawLess == undefined) redrawLess = false;
|
if (redrawLess == undefined) redrawLess = false;
|
||||||
redrawLess = false;
|
redrawLess = false;
|
||||||
|
|
||||||
@ -13,13 +13,13 @@ function initSidebars() {
|
|||||||
console.log("f:initSidebars()");
|
console.log("f:initSidebars()");
|
||||||
|
|
||||||
sidebarLeft = new SideBar();
|
sidebarLeft = new SideBar();
|
||||||
sidebarLeft.init(".leftpanel", "hideleft", function() {
|
sidebarLeft.init("#leftpanel", "hideleft", function() {
|
||||||
$(".leftpanel").show();
|
$("#leftpanel").show();
|
||||||
});
|
});
|
||||||
|
|
||||||
sidebarRight = new SideBar();
|
sidebarRight = new SideBar();
|
||||||
sidebarRight.init(".rightpanel", "hideright", function() {
|
sidebarRight.init("#rightpanel", "hideright", function() {
|
||||||
$(".rightpanel").show();
|
$("#rightpanel").show();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -25,7 +25,7 @@ function getSavedSketchStatus() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}).fail(function() {
|
}).fail(function() {
|
||||||
console.log("getSavedSketchStatus failed: ", response);
|
console.log("getSavedSketchStatus failed");
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -33,3 +33,7 @@ function isSmartphone() {
|
|||||||
|
|
||||||
return returnBool;
|
return returnBool;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function distance(x1, y1, x2, y2) {
|
||||||
|
return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
|
||||||
|
}
|
||||||
21
js/verticalShapes.js
Normal file
21
js/verticalShapes.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
var VERTICALSHAPE;
|
||||||
|
|
||||||
|
var verticalShapes = {
|
||||||
|
"NONE": 'none',
|
||||||
|
"DIVERGING": 'diverging',
|
||||||
|
"CONVERGING": 'converging',
|
||||||
|
"SINUS": 'sinus'
|
||||||
|
};
|
||||||
|
|
||||||
|
function setVerticalShape(s) {
|
||||||
|
VERTICALSHAPE = s;
|
||||||
|
redrawRenderedPreview();
|
||||||
|
}
|
||||||
|
|
||||||
|
function initVerticalShapes() {
|
||||||
|
resetVerticalShapes();
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetVerticalShapes() {
|
||||||
|
setVerticalShape(verticalShapes.NONE);
|
||||||
|
}
|
||||||
@ -1,136 +0,0 @@
|
|||||||
<<<<<<< HEAD
|
|
||||||
=======
|
|
||||||
var $displayThermometer = $("#thermometerContainer");
|
|
||||||
|
|
||||||
|
|
||||||
//TODO 2013-09-18 allow displaying temperatures HIGHER than the targTemp (it's now being capped at targTemp).
|
|
||||||
>>>>>>> new_layouting_approach
|
|
||||||
function Thermometer() {
|
|
||||||
this.currentTemperature = 0; // default val
|
|
||||||
this.targetTemperature = 180; // default val
|
|
||||||
|
|
||||||
this.thermoOverlayImg = new Image();
|
|
||||||
this.thermoOverlayImgSrc = "img/thermometer_fg_overlay.png"; // ../img/thermometer_fg_overlay.png
|
|
||||||
|
|
||||||
this.thermoWidth= 40;
|
|
||||||
this.thermoHeight = 100;
|
|
||||||
|
|
||||||
this.$canvas;
|
|
||||||
this.canvas;
|
|
||||||
this.context;
|
|
||||||
this.$container;
|
|
||||||
|
|
||||||
this.isInitted = false;
|
|
||||||
|
|
||||||
this.enabled = true;
|
|
||||||
|
|
||||||
this.thermoColors = [
|
|
||||||
[50, 200, 244], // 'cold'
|
|
||||||
[244, 190, 10], // 'warming up'
|
|
||||||
[244, 50, 50] // 'ready / hot'
|
|
||||||
];
|
|
||||||
|
|
||||||
this.init = function(targCanvas, targCanvasContainer) {
|
|
||||||
console.log("Thermometer.init()");
|
|
||||||
|
|
||||||
this.$container = targCanvasContainer;
|
|
||||||
|
|
||||||
this.$canvas = targCanvas;
|
|
||||||
this.canvas = this.$canvas[0];
|
|
||||||
this.context = this.canvas.getContext('2d');
|
|
||||||
|
|
||||||
|
|
||||||
var self = this;
|
|
||||||
this.thermoOverlayImg.onload = function() {
|
|
||||||
console.log("canvasThermoOverlay img loaded");
|
|
||||||
self.isInitted = true;
|
|
||||||
self.update(self.currentTemperature, self.targetTemperature);
|
|
||||||
};
|
|
||||||
this.thermoOverlayImg.src = this.thermoOverlayImgSrc;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.update = function(curr, targ) {
|
|
||||||
// console.log("Thermometer.update(" + curr + "," + targ + ")");
|
|
||||||
|
|
||||||
if (this.isInitted) {
|
|
||||||
if(!this.enabled) return;
|
|
||||||
if (curr == undefined) curr = 0;
|
|
||||||
if (targ== undefined) targ = 180; // prevent divide by zero
|
|
||||||
|
|
||||||
var progress = curr / targ;
|
|
||||||
|
|
||||||
progress = Math.min(progress, 1.0);
|
|
||||||
progress = Math.max(progress, 0);
|
|
||||||
|
|
||||||
var h = this.thermoHeight; // 94 // px
|
|
||||||
var paddingUnder = 15; // how far is beginpoint from bottom of thermometer
|
|
||||||
var paddingAbove = 25; // how far is endpoint from top of thermometer
|
|
||||||
var endPoint = h * .8;
|
|
||||||
var p = Math.floor((h - paddingUnder - paddingAbove) * progress); // %
|
|
||||||
// var tempHeight =
|
|
||||||
|
|
||||||
var currColor = this.thermoColors[0];
|
|
||||||
if (progress > 0.98) {
|
|
||||||
currColor = this.thermoColors[2];
|
|
||||||
} else if (progress > 0.25) {
|
|
||||||
currColor = this.thermoColors[1];
|
|
||||||
}
|
|
||||||
|
|
||||||
// clear
|
|
||||||
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
||||||
this.context.font = "10pt sans-serif";
|
|
||||||
|
|
||||||
// draw the thermometer clipping path
|
|
||||||
this.context.save();
|
|
||||||
this.context.beginPath();
|
|
||||||
this.context.arc(40, 80, 16, 0, 2 * Math.PI, false); // circle bottom of thermometer
|
|
||||||
this.context.arc(40, 10, 4, 0, 2 * Math.PI, false); // circle at top of thermometer tube
|
|
||||||
this.context.rect(36, 11, 8, 70); // thermometer tube
|
|
||||||
this.context.fillStyle = '#fff';
|
|
||||||
this.context.fill();
|
|
||||||
this.context.clip();
|
|
||||||
|
|
||||||
// draw rectangle which represents temperature
|
|
||||||
// rect will be clipped by the thermometer outlines
|
|
||||||
this.context.beginPath();
|
|
||||||
this.context.rect(20, h - paddingUnder - p, 60, p + paddingUnder);
|
|
||||||
//console.log(" currColor: " + currColor);
|
|
||||||
//todo Math.floor??
|
|
||||||
this.context.fillStyle = "rgb(" + currColor[0] + "," + currColor[1] + "," + currColor[2] + ")";
|
|
||||||
this.context.fill();
|
|
||||||
this.context.restore();
|
|
||||||
|
|
||||||
// additional text labels
|
|
||||||
this.context.save();
|
|
||||||
this.context.beginPath();
|
|
||||||
this.context.moveTo(32, paddingAbove);
|
|
||||||
this.context.lineTo(52, paddingAbove);
|
|
||||||
this.context.lineWidth = 2;
|
|
||||||
this.context.strokeStyle = '#000';
|
|
||||||
this.context.stroke();
|
|
||||||
this.context.fillStyle = '#000';
|
|
||||||
this.context.textAlign = "left";
|
|
||||||
this.context.textBaseline = "middle";
|
|
||||||
this.context.fillText(targ + "°", 55, paddingAbove);
|
|
||||||
this.context.restore();
|
|
||||||
|
|
||||||
// the thermometer outline png
|
|
||||||
this.context.drawImage(this.thermoOverlayImg, 20, 0);
|
|
||||||
|
|
||||||
// text
|
|
||||||
this.context.fillStyle = '#000';
|
|
||||||
this.context.textAlign="center";
|
|
||||||
this.context.fillText(curr + "°", 40, h + paddingUnder);
|
|
||||||
} else {
|
|
||||||
console.log("Thermometer.setTemperature() -> thermometer not initialized!");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.show = function() {
|
|
||||||
this.$container.show();
|
|
||||||
this.enabled = true;
|
|
||||||
}
|
|
||||||
this.hide = function() {
|
|
||||||
this.$container.hide();
|
|
||||||
this.enabled = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,260 +0,0 @@
|
|||||||
var imgDims = [320, 320]; // width and height of image
|
|
||||||
|
|
||||||
function doClientAndOrientationStuff() {
|
|
||||||
console.log("f:doClientAndOrientationStuff()");
|
|
||||||
|
|
||||||
$(".agentInfo").text("");
|
|
||||||
|
|
||||||
/*
|
|
||||||
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
|
|
||||||
if (window.orientation == -90 || window.orientation == 90) {
|
|
||||||
// landscape
|
|
||||||
// $('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
|
|
||||||
} else {
|
|
||||||
// portrait
|
|
||||||
$('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
//*/
|
|
||||||
|
|
||||||
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
|
|
||||||
console.log("PHONE OR TABLET! --> window.orientation = " + window.orientation);
|
|
||||||
if (window.orientation == -90 || window.orientation == 90) {
|
|
||||||
console.log(" landscape");
|
|
||||||
// landscape
|
|
||||||
|
|
||||||
// var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
|
|
||||||
var ww = 0; //get proper width
|
|
||||||
if (window.innerWidth) {
|
|
||||||
ww = window.innerWidth;
|
|
||||||
// if (window.screen.availWidth) {
|
|
||||||
// ww = window.screen.availWidth;
|
|
||||||
|
|
||||||
// if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
|
|
||||||
// ww = window.innerWidth;
|
|
||||||
// }
|
|
||||||
} else if($(window).width()) {
|
|
||||||
ww = $(window).width();
|
|
||||||
} else {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// ww = 480;
|
|
||||||
|
|
||||||
var mw = imgDims[0]; // min width of site
|
|
||||||
//*
|
|
||||||
if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
|
|
||||||
var mw = imgDims[1]; // in landscape: min-width is image width
|
|
||||||
}
|
|
||||||
//*/
|
|
||||||
var ratio = ww / mw; //calculate ratio
|
|
||||||
$('#Viewport').attr('content', 'initial-scale='+ratio+',maximum-scale='+ratio+',minimum-scale='+ratio+',user-scalable=no,width='+mw);
|
|
||||||
if( ww < mw){ //smaller than minimum size
|
|
||||||
// $(".colmask").css("background-color", "#ff0");
|
|
||||||
// $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww);
|
|
||||||
// $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
|
|
||||||
}else{ //regular size
|
|
||||||
// $(".colmask").css("background-color", "#0ff");
|
|
||||||
// $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log(" ww: " + ww + ", mw: " + mw + ", ratio: " + ratio);
|
|
||||||
|
|
||||||
$(".agentInfo").append("ww: " + ww + ", mw: " + mw + "<br/>");
|
|
||||||
$(".agentInfo").append("ratio: " + ratio + "<br/>");
|
|
||||||
$(".agentInfo").append("<br/>");
|
|
||||||
} else {
|
|
||||||
console.log(" portrait");
|
|
||||||
// portrait
|
|
||||||
// $('#Viewport').attr('content', 'initial-scale='+1+',maximum-scale='+1+',minimum-scale='+1+',user-scalable=no');
|
|
||||||
$('#Viewport').attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no');
|
|
||||||
}
|
|
||||||
|
|
||||||
} else {
|
|
||||||
// console.log("else");
|
|
||||||
$(".colmask").css("background-color", "#f80");
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
$(".agentInfo").append("$(window).width(): " + $(window).width() + "<br/>");
|
|
||||||
$(".agentInfo").append("window.screen.width: " + window.screen.width+ "<br/>");
|
|
||||||
$(".agentInfo").append("window.screen.availWidth: " + window.screen.availWidth+ "<br/>");
|
|
||||||
$(".agentInfo").append("<br/>");
|
|
||||||
$(".agentInfo").append("window.innerWidth: " + window.innerWidth + "<br/>");
|
|
||||||
$(".agentInfo").append("window.innerHeight: " + window.innerHeight + "<br/>");
|
|
||||||
$(".agentInfo").append("<br/>");
|
|
||||||
$(".agentInfo").append("$(window).height(): " + $(window).height() + "<br/>");
|
|
||||||
$(".agentInfo").append("window.screen.height: " + window.screen.height+ "<br/>");
|
|
||||||
$(".agentInfo").append("window.screen.availHeight: " + window.screen.availHeight+ "<br/>");
|
|
||||||
$(".agentInfo").append("<br/>");
|
|
||||||
$(".agentInfo").append("user agent: " + navigator.userAgent + "<br/>");
|
|
||||||
};
|
|
||||||
|
|
||||||
function doOnOrientationChange() {
|
|
||||||
console.log("doOnOrientationChange");
|
|
||||||
doClientAndOrientationStuff();
|
|
||||||
|
|
||||||
// switch(window.orientation) {
|
|
||||||
// case -90:
|
|
||||||
// case 90:
|
|
||||||
// alert('landscape');
|
|
||||||
// break;
|
|
||||||
// default:
|
|
||||||
// alert('portrait');
|
|
||||||
// break;
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
var drawAreaContainerMinHeight = 300;
|
|
||||||
var drawAreaContainerMaxHeight = 450;
|
|
||||||
function doOnResize() {
|
|
||||||
// console.log("doOnResize() >> " + new Date().getTime());
|
|
||||||
// $(".container").css("height", window.innerHeight);
|
|
||||||
|
|
||||||
// code from new layouting approach... //TODO give this a more logical spot
|
|
||||||
$drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
|
|
||||||
|
|
||||||
canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth;
|
|
||||||
canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
|
|
||||||
// canvas.width = canvas.clientWidth;
|
|
||||||
// canvas.height = canvas.clientHeight;
|
|
||||||
|
|
||||||
// $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
|
|
||||||
// $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
|
|
||||||
// canvas.width = parseInt($canvas.css("width"), 10);
|
|
||||||
// canvas.height = parseInt($canvas.css("height"), 10);
|
|
||||||
|
|
||||||
preview.width = 150;
|
|
||||||
preview.height = $drawAreaContainer.height();
|
|
||||||
// preview.width = parseInt($preview.css("width"), 10);
|
|
||||||
// preview.height = parseInt($preview.css("height"), 10);
|
|
||||||
|
|
||||||
canvasWidth = canvas.width;
|
|
||||||
canvasHeight = canvas.height;
|
|
||||||
|
|
||||||
redrawDoodle();
|
|
||||||
redrawPreview();
|
|
||||||
|
|
||||||
return;
|
|
||||||
|
|
||||||
// doClientAndOrientationStuff() // <-- is this necessary in this method?
|
|
||||||
|
|
||||||
// console.log("f:doOnResize() >> $('#canvascontainer').innerHeight: " + window.innerHeight);
|
|
||||||
if (window.innerHeight < 768) {
|
|
||||||
// $('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70);
|
|
||||||
var newVal = window.innerHeight - $("#drawAreaContainer").offset().top - 100; // what's the 70 ??
|
|
||||||
newVal = Math.max(newVal, drawAreaContainerMinHeight);
|
|
||||||
newVal = Math.min(newVal, drawAreaContainerMaxHeight);
|
|
||||||
|
|
||||||
$('#drawAreaContainer').innerHeight(newVal);
|
|
||||||
|
|
||||||
// canvas drawing area
|
|
||||||
$canvas.css("height", newVal);
|
|
||||||
canvas.height = newVal;
|
|
||||||
canvasWidth = canvas.width;
|
|
||||||
canvasHeight = canvas.height;
|
|
||||||
|
|
||||||
// preview area
|
|
||||||
$preview.css("height", newVal);
|
|
||||||
preview.height = newVal;
|
|
||||||
layerOffsetY = preview.height - 1.75 * layerCY;
|
|
||||||
yStep = preview.height / 150;
|
|
||||||
|
|
||||||
redrawDoodle();
|
|
||||||
redrawPreview();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function initLayouting() {
|
|
||||||
console.log("f:initLayouting()");
|
|
||||||
|
|
||||||
// first set the css width/height and actual width/height of the drawing area
|
|
||||||
<!--div drawAreaContainer 650,450-->
|
|
||||||
<!--canvas mycanvas 500, 450-->
|
|
||||||
<!--canvas preview 150, 450-->
|
|
||||||
|
|
||||||
// $doodleCanvas = $("#mycanvas");
|
|
||||||
// doodleCanvas = $("#mycanvas")[0];
|
|
||||||
// doodleCanvasContext = doodleCanvas.getContext('2d');
|
|
||||||
|
|
||||||
$drawAreaContainer = $("#drawAreaContainer");
|
|
||||||
$drawAreaContainer.css("margin", 0);
|
|
||||||
$drawAreaContainer.css("marginLeft", -parseInt($drawAreaContainer.css("width"))/2);
|
|
||||||
$drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
|
|
||||||
|
|
||||||
canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth;
|
|
||||||
canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
|
|
||||||
// canvas.width = canvas.clientWidth;
|
|
||||||
// canvas.height = canvas.clientHeight;
|
|
||||||
|
|
||||||
preview.width = 150;
|
|
||||||
preview.height = $drawAreaContainer.height();
|
|
||||||
|
|
||||||
// code from new layouting approach... //TODO give this a more logical spot
|
|
||||||
// $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
|
|
||||||
// $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
|
|
||||||
// canvas.width = parseInt($canvas.css("width"), 10);
|
|
||||||
// canvas.height = parseInt($canvas.css("height"), 10);
|
|
||||||
// preview.width = parseInt($preview.css("width"), 10);
|
|
||||||
// preview.height = parseInt($preview.css("height"), 10);
|
|
||||||
canvasWidth = canvas.width;
|
|
||||||
canvasHeight = canvas.height;
|
|
||||||
|
|
||||||
// console.log("f:initLayouting() >> canvas height: " + canvas.height);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// imgDims[0] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
|
|
||||||
// imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
|
|
||||||
|
|
||||||
// imgDims = [1024, 768];
|
|
||||||
|
|
||||||
/*
|
|
||||||
if( /Android|webOS|BlackBerry/i.test(navigator.userAgent) ) {
|
|
||||||
imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
|
|
||||||
} else if ( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
|
|
||||||
imgDims[1] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
|
|
||||||
} else {
|
|
||||||
imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
|
|
||||||
}
|
|
||||||
//*/
|
|
||||||
|
|
||||||
// $(".container").css("height", window.innerHeight);
|
|
||||||
|
|
||||||
// window.innerHeight
|
|
||||||
console.log("window.innerHeight: " + window.innerHeight);
|
|
||||||
console.log("window.innerWidth: " + window.innerWidth);
|
|
||||||
console.log("$('#drawAreaContainer').innerHeight(): " + $("#drawAreaContainer").innerHeight());
|
|
||||||
console.log("$('#drawAreaContainer').offset().top: " + $("#drawAreaContainer").offset().top);
|
|
||||||
|
|
||||||
|
|
||||||
/* 2013-07-26 not doing this resizing stuff now, it's not working well yet
|
|
||||||
if (window.innerHeight < 768) {
|
|
||||||
$('#drawAreaContainer').innerHeight(window.innerHeight - $("#drawAreaContainer").offset().top - 70);
|
|
||||||
}
|
|
||||||
//*/
|
|
||||||
|
|
||||||
// timeout because it SEEMS to be beneficial for initting the layout
|
|
||||||
// 2013-09-18 seems beneficial since when?
|
|
||||||
setTimeout(_startOrientationAndChangeEventListening, 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function _startOrientationAndChangeEventListening() {
|
|
||||||
// Initial execution if needed
|
|
||||||
|
|
||||||
$(window).on('resize', doOnResize);
|
|
||||||
|
|
||||||
// if (!window.addEventListener) {
|
|
||||||
// window.attachEvent('orientationchange', doOnOrientationChange, false);
|
|
||||||
// window.attachEvent('resize', doOnResize, false);
|
|
||||||
// } else {
|
|
||||||
// window.addEventListener('orientationchange', doOnOrientationChange, false);
|
|
||||||
// window.addEventListener('resize', doOnResize, false);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// is it necessary to call these? Aren't they called by the above eventhandlers?
|
|
||||||
// doClientAndOrientationStuff();
|
|
||||||
doOnResize();
|
|
||||||
}
|
|
||||||
2280
js_old/libs/bootstrap.js
vendored
2280
js_old/libs/bootstrap.js
vendored
File diff suppressed because it is too large
Load Diff
6
js_old/libs/bootstrap.min.js
vendored
6
js_old/libs/bootstrap.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,35 +0,0 @@
|
|||||||
// Copyright 2006 Google Inc.
|
|
||||||
//
|
|
||||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
// you may not use this file except in compliance with the License.
|
|
||||||
// You may obtain a copy of the License at
|
|
||||||
//
|
|
||||||
// http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
//
|
|
||||||
// Unless required by applicable law or agreed to in writing, software
|
|
||||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
// See the License for the specific language governing permissions and
|
|
||||||
// limitations under the License.
|
|
||||||
document.createElement("canvas").getContext||(function(){var s=Math,j=s.round,F=s.sin,G=s.cos,V=s.abs,W=s.sqrt,k=10,v=k/2;function X(){return this.context_||(this.context_=new H(this))}var L=Array.prototype.slice;function Y(b,a){var c=L.call(arguments,2);return function(){return b.apply(a,c.concat(L.call(arguments)))}}var M={init:function(b){if(/MSIE/.test(navigator.userAgent)&&!window.opera){var a=b||document;a.createElement("canvas");a.attachEvent("onreadystatechange",Y(this.init_,this,a))}},init_:function(b){b.namespaces.g_vml_||
|
|
||||||
b.namespaces.add("g_vml_","urn:schemas-microsoft-com:vml","#default#VML");b.namespaces.g_o_||b.namespaces.add("g_o_","urn:schemas-microsoft-com:office:office","#default#VML");if(!b.styleSheets.ex_canvas_){var a=b.createStyleSheet();a.owningElement.id="ex_canvas_";a.cssText="canvas{display:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}g_vml_\\:*{behavior:url(#default#VML)}g_o_\\:*{behavior:url(#default#VML)}"}var c=b.getElementsByTagName("canvas"),d=0;for(;d<c.length;d++)this.initElement(c[d])},
|
|
||||||
initElement:function(b){if(!b.getContext){b.getContext=X;b.innerHTML="";b.attachEvent("onpropertychange",Z);b.attachEvent("onresize",$);var a=b.attributes;if(a.width&&a.width.specified)b.style.width=a.width.nodeValue+"px";else b.width=b.clientWidth;if(a.height&&a.height.specified)b.style.height=a.height.nodeValue+"px";else b.height=b.clientHeight}return b}};function Z(b){var a=b.srcElement;switch(b.propertyName){case "width":a.style.width=a.attributes.width.nodeValue+"px";a.getContext().clearRect();
|
|
||||||
break;case "height":a.style.height=a.attributes.height.nodeValue+"px";a.getContext().clearRect();break}}function $(b){var a=b.srcElement;if(a.firstChild){a.firstChild.style.width=a.clientWidth+"px";a.firstChild.style.height=a.clientHeight+"px"}}M.init();var N=[],B=0;for(;B<16;B++){var C=0;for(;C<16;C++)N[B*16+C]=B.toString(16)+C.toString(16)}function I(){return[[1,0,0],[0,1,0],[0,0,1]]}function y(b,a){var c=I(),d=0;for(;d<3;d++){var f=0;for(;f<3;f++){var h=0,g=0;for(;g<3;g++)h+=b[d][g]*a[g][f];c[d][f]=
|
|
||||||
h}}return c}function O(b,a){a.fillStyle=b.fillStyle;a.lineCap=b.lineCap;a.lineJoin=b.lineJoin;a.lineWidth=b.lineWidth;a.miterLimit=b.miterLimit;a.shadowBlur=b.shadowBlur;a.shadowColor=b.shadowColor;a.shadowOffsetX=b.shadowOffsetX;a.shadowOffsetY=b.shadowOffsetY;a.strokeStyle=b.strokeStyle;a.globalAlpha=b.globalAlpha;a.arcScaleX_=b.arcScaleX_;a.arcScaleY_=b.arcScaleY_;a.lineScale_=b.lineScale_}function P(b){var a,c=1;b=String(b);if(b.substring(0,3)=="rgb"){var d=b.indexOf("(",3),f=b.indexOf(")",d+
|
|
||||||
1),h=b.substring(d+1,f).split(",");a="#";var g=0;for(;g<3;g++)a+=N[Number(h[g])];if(h.length==4&&b.substr(3,1)=="a")c=h[3]}else a=b;return{color:a,alpha:c}}function aa(b){switch(b){case "butt":return"flat";case "round":return"round";case "square":default:return"square"}}function H(b){this.m_=I();this.mStack_=[];this.aStack_=[];this.currentPath_=[];this.fillStyle=this.strokeStyle="#000";this.lineWidth=1;this.lineJoin="miter";this.lineCap="butt";this.miterLimit=k*1;this.globalAlpha=1;this.canvas=b;
|
|
||||||
var a=b.ownerDocument.createElement("div");a.style.width=b.clientWidth+"px";a.style.height=b.clientHeight+"px";a.style.overflow="hidden";a.style.position="absolute";b.appendChild(a);this.element_=a;this.lineScale_=this.arcScaleY_=this.arcScaleX_=1}var i=H.prototype;i.clearRect=function(){this.element_.innerHTML=""};i.beginPath=function(){this.currentPath_=[]};i.moveTo=function(b,a){var c=this.getCoords_(b,a);this.currentPath_.push({type:"moveTo",x:c.x,y:c.y});this.currentX_=c.x;this.currentY_=c.y};
|
|
||||||
i.lineTo=function(b,a){var c=this.getCoords_(b,a);this.currentPath_.push({type:"lineTo",x:c.x,y:c.y});this.currentX_=c.x;this.currentY_=c.y};i.bezierCurveTo=function(b,a,c,d,f,h){var g=this.getCoords_(f,h),l=this.getCoords_(b,a),e=this.getCoords_(c,d);Q(this,l,e,g)};function Q(b,a,c,d){b.currentPath_.push({type:"bezierCurveTo",cp1x:a.x,cp1y:a.y,cp2x:c.x,cp2y:c.y,x:d.x,y:d.y});b.currentX_=d.x;b.currentY_=d.y}i.quadraticCurveTo=function(b,a,c,d){var f=this.getCoords_(b,a),h=this.getCoords_(c,d),g={x:this.currentX_+
|
|
||||||
0.6666666666666666*(f.x-this.currentX_),y:this.currentY_+0.6666666666666666*(f.y-this.currentY_)};Q(this,g,{x:g.x+(h.x-this.currentX_)/3,y:g.y+(h.y-this.currentY_)/3},h)};i.arc=function(b,a,c,d,f,h){c*=k;var g=h?"at":"wa",l=b+G(d)*c-v,e=a+F(d)*c-v,m=b+G(f)*c-v,r=a+F(f)*c-v;if(l==m&&!h)l+=0.125;var n=this.getCoords_(b,a),o=this.getCoords_(l,e),q=this.getCoords_(m,r);this.currentPath_.push({type:g,x:n.x,y:n.y,radius:c,xStart:o.x,yStart:o.y,xEnd:q.x,yEnd:q.y})};i.rect=function(b,a,c,d){this.moveTo(b,
|
|
||||||
a);this.lineTo(b+c,a);this.lineTo(b+c,a+d);this.lineTo(b,a+d);this.closePath()};i.strokeRect=function(b,a,c,d){var f=this.currentPath_;this.beginPath();this.moveTo(b,a);this.lineTo(b+c,a);this.lineTo(b+c,a+d);this.lineTo(b,a+d);this.closePath();this.stroke();this.currentPath_=f};i.fillRect=function(b,a,c,d){var f=this.currentPath_;this.beginPath();this.moveTo(b,a);this.lineTo(b+c,a);this.lineTo(b+c,a+d);this.lineTo(b,a+d);this.closePath();this.fill();this.currentPath_=f};i.createLinearGradient=function(b,
|
|
||||||
a,c,d){var f=new D("gradient");f.x0_=b;f.y0_=a;f.x1_=c;f.y1_=d;return f};i.createRadialGradient=function(b,a,c,d,f,h){var g=new D("gradientradial");g.x0_=b;g.y0_=a;g.r0_=c;g.x1_=d;g.y1_=f;g.r1_=h;return g};i.drawImage=function(b){var a,c,d,f,h,g,l,e,m=b.runtimeStyle.width,r=b.runtimeStyle.height;b.runtimeStyle.width="auto";b.runtimeStyle.height="auto";var n=b.width,o=b.height;b.runtimeStyle.width=m;b.runtimeStyle.height=r;if(arguments.length==3){a=arguments[1];c=arguments[2];h=g=0;l=d=n;e=f=o}else if(arguments.length==
|
|
||||||
5){a=arguments[1];c=arguments[2];d=arguments[3];f=arguments[4];h=g=0;l=n;e=o}else if(arguments.length==9){h=arguments[1];g=arguments[2];l=arguments[3];e=arguments[4];a=arguments[5];c=arguments[6];d=arguments[7];f=arguments[8]}else throw Error("Invalid number of arguments");var q=this.getCoords_(a,c),t=[];t.push(" <g_vml_:group",' coordsize="',k*10,",",k*10,'"',' coordorigin="0,0"',' style="width:',10,"px;height:",10,"px;position:absolute;");if(this.m_[0][0]!=1||this.m_[0][1]){var E=[];E.push("M11=",
|
|
||||||
this.m_[0][0],",","M12=",this.m_[1][0],",","M21=",this.m_[0][1],",","M22=",this.m_[1][1],",","Dx=",j(q.x/k),",","Dy=",j(q.y/k),"");var p=q,z=this.getCoords_(a+d,c),w=this.getCoords_(a,c+f),x=this.getCoords_(a+d,c+f);p.x=s.max(p.x,z.x,w.x,x.x);p.y=s.max(p.y,z.y,w.y,x.y);t.push("padding:0 ",j(p.x/k),"px ",j(p.y/k),"px 0;filter:progid:DXImageTransform.Microsoft.Matrix(",E.join(""),", sizingmethod='clip');")}else t.push("top:",j(q.y/k),"px;left:",j(q.x/k),"px;");t.push(' ">','<g_vml_:image src="',b.src,
|
|
||||||
'"',' style="width:',k*d,"px;"," height:",k*f,'px;"',' cropleft="',h/n,'"',' croptop="',g/o,'"',' cropright="',(n-h-l)/n,'"',' cropbottom="',(o-g-e)/o,'"'," />","</g_vml_:group>");this.element_.insertAdjacentHTML("BeforeEnd",t.join(""))};i.stroke=function(b){var a=[],c=P(b?this.fillStyle:this.strokeStyle),d=c.color,f=c.alpha*this.globalAlpha;a.push("<g_vml_:shape",' filled="',!!b,'"',' style="position:absolute;width:',10,"px;height:",10,'px;"',' coordorigin="0 0" coordsize="',k*10," ",k*10,'"',' stroked="',
|
|
||||||
!b,'"',' path="');var h={x:null,y:null},g={x:null,y:null},l=0;for(;l<this.currentPath_.length;l++){var e=this.currentPath_[l];switch(e.type){case "moveTo":a.push(" m ",j(e.x),",",j(e.y));break;case "lineTo":a.push(" l ",j(e.x),",",j(e.y));break;case "close":a.push(" x ");e=null;break;case "bezierCurveTo":a.push(" c ",j(e.cp1x),",",j(e.cp1y),",",j(e.cp2x),",",j(e.cp2y),",",j(e.x),",",j(e.y));break;case "at":case "wa":a.push(" ",e.type," ",j(e.x-this.arcScaleX_*e.radius),",",j(e.y-this.arcScaleY_*e.radius),
|
|
||||||
" ",j(e.x+this.arcScaleX_*e.radius),",",j(e.y+this.arcScaleY_*e.radius)," ",j(e.xStart),",",j(e.yStart)," ",j(e.xEnd),",",j(e.yEnd));break}if(e){if(h.x==null||e.x<h.x)h.x=e.x;if(g.x==null||e.x>g.x)g.x=e.x;if(h.y==null||e.y<h.y)h.y=e.y;if(g.y==null||e.y>g.y)g.y=e.y}}a.push(' ">');if(b)if(typeof this.fillStyle=="object"){var m=this.fillStyle,r=0,n={x:0,y:0},o=0,q=1;if(m.type_=="gradient"){var t=m.x1_/this.arcScaleX_,E=m.y1_/this.arcScaleY_,p=this.getCoords_(m.x0_/this.arcScaleX_,m.y0_/this.arcScaleY_),
|
|
||||||
z=this.getCoords_(t,E);r=Math.atan2(z.x-p.x,z.y-p.y)*180/Math.PI;if(r<0)r+=360;if(r<1.0E-6)r=0}else{var p=this.getCoords_(m.x0_,m.y0_),w=g.x-h.x,x=g.y-h.y;n={x:(p.x-h.x)/w,y:(p.y-h.y)/x};w/=this.arcScaleX_*k;x/=this.arcScaleY_*k;var R=s.max(w,x);o=2*m.r0_/R;q=2*m.r1_/R-o}var u=m.colors_;u.sort(function(ba,ca){return ba.offset-ca.offset});var J=u.length,da=u[0].color,ea=u[J-1].color,fa=u[0].alpha*this.globalAlpha,ga=u[J-1].alpha*this.globalAlpha,S=[],l=0;for(;l<J;l++){var T=u[l];S.push(T.offset*q+
|
|
||||||
o+" "+T.color)}a.push('<g_vml_:fill type="',m.type_,'"',' method="none" focus="100%"',' color="',da,'"',' color2="',ea,'"',' colors="',S.join(","),'"',' opacity="',ga,'"',' g_o_:opacity2="',fa,'"',' angle="',r,'"',' focusposition="',n.x,",",n.y,'" />')}else a.push('<g_vml_:fill color="',d,'" opacity="',f,'" />');else{var K=this.lineScale_*this.lineWidth;if(K<1)f*=K;a.push("<g_vml_:stroke",' opacity="',f,'"',' joinstyle="',this.lineJoin,'"',' miterlimit="',this.miterLimit,'"',' endcap="',aa(this.lineCap),
|
|
||||||
'"',' weight="',K,'px"',' color="',d,'" />')}a.push("</g_vml_:shape>");this.element_.insertAdjacentHTML("beforeEnd",a.join(""))};i.fill=function(){this.stroke(true)};i.closePath=function(){this.currentPath_.push({type:"close"})};i.getCoords_=function(b,a){var c=this.m_;return{x:k*(b*c[0][0]+a*c[1][0]+c[2][0])-v,y:k*(b*c[0][1]+a*c[1][1]+c[2][1])-v}};i.save=function(){var b={};O(this,b);this.aStack_.push(b);this.mStack_.push(this.m_);this.m_=y(I(),this.m_)};i.restore=function(){O(this.aStack_.pop(),
|
|
||||||
this);this.m_=this.mStack_.pop()};function ha(b){var a=0;for(;a<3;a++){var c=0;for(;c<2;c++)if(!isFinite(b[a][c])||isNaN(b[a][c]))return false}return true}function A(b,a,c){if(!!ha(a)){b.m_=a;if(c)b.lineScale_=W(V(a[0][0]*a[1][1]-a[0][1]*a[1][0]))}}i.translate=function(b,a){A(this,y([[1,0,0],[0,1,0],[b,a,1]],this.m_),false)};i.rotate=function(b){var a=G(b),c=F(b);A(this,y([[a,c,0],[-c,a,0],[0,0,1]],this.m_),false)};i.scale=function(b,a){this.arcScaleX_*=b;this.arcScaleY_*=a;A(this,y([[b,0,0],[0,a,
|
|
||||||
0],[0,0,1]],this.m_),true)};i.transform=function(b,a,c,d,f,h){A(this,y([[b,a,0],[c,d,0],[f,h,1]],this.m_),true)};i.setTransform=function(b,a,c,d,f,h){A(this,[[b,a,0],[c,d,0],[f,h,1]],true)};i.clip=function(){};i.arcTo=function(){};i.createPattern=function(){return new U};function D(b){this.type_=b;this.r1_=this.y1_=this.x1_=this.r0_=this.y0_=this.x0_=0;this.colors_=[]}D.prototype.addColorStop=function(b,a){a=P(a);this.colors_.push({offset:b,color:a.color,alpha:a.alpha})};function U(){}G_vmlCanvasManager=
|
|
||||||
M;CanvasRenderingContext2D=H;CanvasGradient=D;CanvasPattern=U})();
|
|
||||||
@ -1,924 +0,0 @@
|
|||||||
// Copyright 2006 Google Inc.
|
|
||||||
//
|
|
||||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
// you may not use this file except in compliance with the License.
|
|
||||||
// You may obtain a copy of the License at
|
|
||||||
//
|
|
||||||
// http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
//
|
|
||||||
// Unless required by applicable law or agreed to in writing, software
|
|
||||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
// See the License for the specific language governing permissions and
|
|
||||||
// limitations under the License.
|
|
||||||
|
|
||||||
|
|
||||||
// Known Issues:
|
|
||||||
//
|
|
||||||
// * Patterns are not implemented.
|
|
||||||
// * Radial gradient are not implemented. The VML version of these look very
|
|
||||||
// different from the canvas one.
|
|
||||||
// * Clipping paths are not implemented.
|
|
||||||
// * Coordsize. The width and height attribute have higher priority than the
|
|
||||||
// width and height style values which isn't correct.
|
|
||||||
// * Painting mode isn't implemented.
|
|
||||||
// * Canvas width/height should is using content-box by default. IE in
|
|
||||||
// Quirks mode will draw the canvas using border-box. Either change your
|
|
||||||
// doctype to HTML5
|
|
||||||
// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
|
|
||||||
// or use Box Sizing Behavior from WebFX
|
|
||||||
// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
|
|
||||||
// * Non uniform scaling does not correctly scale strokes.
|
|
||||||
// * Optimize. There is always room for speed improvements.
|
|
||||||
|
|
||||||
// Only add this code if we do not already have a canvas implementation
|
|
||||||
if (!document.createElement('canvas').getContext) {
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
|
|
||||||
// alias some functions to make (compiled) code shorter
|
|
||||||
var m = Math;
|
|
||||||
var mr = m.round;
|
|
||||||
var ms = m.sin;
|
|
||||||
var mc = m.cos;
|
|
||||||
var abs = m.abs;
|
|
||||||
var sqrt = m.sqrt;
|
|
||||||
|
|
||||||
// this is used for sub pixel precision
|
|
||||||
var Z = 10;
|
|
||||||
var Z2 = Z / 2;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* This funtion is assigned to the <canvas> elements as element.getContext().
|
|
||||||
* @this {HTMLElement}
|
|
||||||
* @return {CanvasRenderingContext2D_}
|
|
||||||
*/
|
|
||||||
function getContext() {
|
|
||||||
return this.context_ ||
|
|
||||||
(this.context_ = new CanvasRenderingContext2D_(this));
|
|
||||||
}
|
|
||||||
|
|
||||||
var slice = Array.prototype.slice;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Binds a function to an object. The returned function will always use the
|
|
||||||
* passed in {@code obj} as {@code this}.
|
|
||||||
*
|
|
||||||
* Example:
|
|
||||||
*
|
|
||||||
* g = bind(f, obj, a, b)
|
|
||||||
* g(c, d) // will do f.call(obj, a, b, c, d)
|
|
||||||
*
|
|
||||||
* @param {Function} f The function to bind the object to
|
|
||||||
* @param {Object} obj The object that should act as this when the function
|
|
||||||
* is called
|
|
||||||
* @param {*} var_args Rest arguments that will be used as the initial
|
|
||||||
* arguments when the function is called
|
|
||||||
* @return {Function} A new function that has bound this
|
|
||||||
*/
|
|
||||||
function bind(f, obj, var_args) {
|
|
||||||
var a = slice.call(arguments, 2);
|
|
||||||
return function() {
|
|
||||||
return f.apply(obj, a.concat(slice.call(arguments)));
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
var G_vmlCanvasManager_ = {
|
|
||||||
init: function(opt_doc) {
|
|
||||||
if (/MSIE/.test(navigator.userAgent) && !window.opera) {
|
|
||||||
var doc = opt_doc || document;
|
|
||||||
// Create a dummy element so that IE will allow canvas elements to be
|
|
||||||
// recognized.
|
|
||||||
doc.createElement('canvas');
|
|
||||||
doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
init_: function(doc) {
|
|
||||||
// create xmlns
|
|
||||||
if (!doc.namespaces['g_vml_']) {
|
|
||||||
doc.namespaces.add('g_vml_', 'urn:schemas-microsoft-com:vml',
|
|
||||||
'#default#VML');
|
|
||||||
|
|
||||||
}
|
|
||||||
if (!doc.namespaces['g_o_']) {
|
|
||||||
doc.namespaces.add('g_o_', 'urn:schemas-microsoft-com:office:office',
|
|
||||||
'#default#VML');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Setup default CSS. Only add one style sheet per document
|
|
||||||
if (!doc.styleSheets['ex_canvas_']) {
|
|
||||||
var ss = doc.createStyleSheet();
|
|
||||||
ss.owningElement.id = 'ex_canvas_';
|
|
||||||
ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
|
|
||||||
// default size is 300x150 in Gecko and Opera
|
|
||||||
'text-align:left;width:300px;height:150px}' +
|
|
||||||
'g_vml_\\:*{behavior:url(#default#VML)}' +
|
|
||||||
'g_o_\\:*{behavior:url(#default#VML)}';
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// find all canvas elements
|
|
||||||
var els = doc.getElementsByTagName('canvas');
|
|
||||||
for (var i = 0; i < els.length; i++) {
|
|
||||||
this.initElement(els[i]);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Public initializes a canvas element so that it can be used as canvas
|
|
||||||
* element from now on. This is called automatically before the page is
|
|
||||||
* loaded but if you are creating elements using createElement you need to
|
|
||||||
* make sure this is called on the element.
|
|
||||||
* @param {HTMLElement} el The canvas element to initialize.
|
|
||||||
* @return {HTMLElement} the element that was created.
|
|
||||||
*/
|
|
||||||
initElement: function(el) {
|
|
||||||
if (!el.getContext) {
|
|
||||||
|
|
||||||
el.getContext = getContext;
|
|
||||||
|
|
||||||
// Remove fallback content. There is no way to hide text nodes so we
|
|
||||||
// just remove all childNodes. We could hide all elements and remove
|
|
||||||
// text nodes but who really cares about the fallback content.
|
|
||||||
el.innerHTML = '';
|
|
||||||
|
|
||||||
// do not use inline function because that will leak memory
|
|
||||||
el.attachEvent('onpropertychange', onPropertyChange);
|
|
||||||
el.attachEvent('onresize', onResize);
|
|
||||||
|
|
||||||
var attrs = el.attributes;
|
|
||||||
if (attrs.width && attrs.width.specified) {
|
|
||||||
// TODO: use runtimeStyle and coordsize
|
|
||||||
// el.getContext().setWidth_(attrs.width.nodeValue);
|
|
||||||
el.style.width = attrs.width.nodeValue + 'px';
|
|
||||||
} else {
|
|
||||||
el.width = el.clientWidth;
|
|
||||||
}
|
|
||||||
if (attrs.height && attrs.height.specified) {
|
|
||||||
// TODO: use runtimeStyle and coordsize
|
|
||||||
// el.getContext().setHeight_(attrs.height.nodeValue);
|
|
||||||
el.style.height = attrs.height.nodeValue + 'px';
|
|
||||||
} else {
|
|
||||||
el.height = el.clientHeight;
|
|
||||||
}
|
|
||||||
//el.getContext().setCoordsize_()
|
|
||||||
}
|
|
||||||
return el;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function onPropertyChange(e) {
|
|
||||||
var el = e.srcElement;
|
|
||||||
|
|
||||||
switch (e.propertyName) {
|
|
||||||
case 'width':
|
|
||||||
el.style.width = el.attributes.width.nodeValue + 'px';
|
|
||||||
el.getContext().clearRect();
|
|
||||||
break;
|
|
||||||
case 'height':
|
|
||||||
el.style.height = el.attributes.height.nodeValue + 'px';
|
|
||||||
el.getContext().clearRect();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onResize(e) {
|
|
||||||
var el = e.srcElement;
|
|
||||||
if (el.firstChild) {
|
|
||||||
el.firstChild.style.width = el.clientWidth + 'px';
|
|
||||||
el.firstChild.style.height = el.clientHeight + 'px';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
G_vmlCanvasManager_.init();
|
|
||||||
|
|
||||||
// precompute "00" to "FF"
|
|
||||||
var dec2hex = [];
|
|
||||||
for (var i = 0; i < 16; i++) {
|
|
||||||
for (var j = 0; j < 16; j++) {
|
|
||||||
dec2hex[i * 16 + j] = i.toString(16) + j.toString(16);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function createMatrixIdentity() {
|
|
||||||
return [
|
|
||||||
[1, 0, 0],
|
|
||||||
[0, 1, 0],
|
|
||||||
[0, 0, 1]
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
function matrixMultiply(m1, m2) {
|
|
||||||
var result = createMatrixIdentity();
|
|
||||||
|
|
||||||
for (var x = 0; x < 3; x++) {
|
|
||||||
for (var y = 0; y < 3; y++) {
|
|
||||||
var sum = 0;
|
|
||||||
|
|
||||||
for (var z = 0; z < 3; z++) {
|
|
||||||
sum += m1[x][z] * m2[z][y];
|
|
||||||
}
|
|
||||||
|
|
||||||
result[x][y] = sum;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
function copyState(o1, o2) {
|
|
||||||
o2.fillStyle = o1.fillStyle;
|
|
||||||
o2.lineCap = o1.lineCap;
|
|
||||||
o2.lineJoin = o1.lineJoin;
|
|
||||||
o2.lineWidth = o1.lineWidth;
|
|
||||||
o2.miterLimit = o1.miterLimit;
|
|
||||||
o2.shadowBlur = o1.shadowBlur;
|
|
||||||
o2.shadowColor = o1.shadowColor;
|
|
||||||
o2.shadowOffsetX = o1.shadowOffsetX;
|
|
||||||
o2.shadowOffsetY = o1.shadowOffsetY;
|
|
||||||
o2.strokeStyle = o1.strokeStyle;
|
|
||||||
o2.globalAlpha = o1.globalAlpha;
|
|
||||||
o2.arcScaleX_ = o1.arcScaleX_;
|
|
||||||
o2.arcScaleY_ = o1.arcScaleY_;
|
|
||||||
o2.lineScale_ = o1.lineScale_;
|
|
||||||
}
|
|
||||||
|
|
||||||
function processStyle(styleString) {
|
|
||||||
var str, alpha = 1;
|
|
||||||
|
|
||||||
styleString = String(styleString);
|
|
||||||
if (styleString.substring(0, 3) == 'rgb') {
|
|
||||||
var start = styleString.indexOf('(', 3);
|
|
||||||
var end = styleString.indexOf(')', start + 1);
|
|
||||||
var guts = styleString.substring(start + 1, end).split(',');
|
|
||||||
|
|
||||||
str = '#';
|
|
||||||
for (var i = 0; i < 3; i++) {
|
|
||||||
str += dec2hex[Number(guts[i])];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (guts.length == 4 && styleString.substr(3, 1) == 'a') {
|
|
||||||
alpha = guts[3];
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
str = styleString;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {color: str, alpha: alpha};
|
|
||||||
}
|
|
||||||
|
|
||||||
function processLineCap(lineCap) {
|
|
||||||
switch (lineCap) {
|
|
||||||
case 'butt':
|
|
||||||
return 'flat';
|
|
||||||
case 'round':
|
|
||||||
return 'round';
|
|
||||||
case 'square':
|
|
||||||
default:
|
|
||||||
return 'square';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* This class implements CanvasRenderingContext2D interface as described by
|
|
||||||
* the WHATWG.
|
|
||||||
* @param {HTMLElement} surfaceElement The element that the 2D context should
|
|
||||||
* be associated with
|
|
||||||
*/
|
|
||||||
function CanvasRenderingContext2D_(surfaceElement) {
|
|
||||||
this.m_ = createMatrixIdentity();
|
|
||||||
|
|
||||||
this.mStack_ = [];
|
|
||||||
this.aStack_ = [];
|
|
||||||
this.currentPath_ = [];
|
|
||||||
|
|
||||||
// Canvas context properties
|
|
||||||
this.strokeStyle = '#000';
|
|
||||||
this.fillStyle = '#000';
|
|
||||||
|
|
||||||
this.lineWidth = 1;
|
|
||||||
this.lineJoin = 'miter';
|
|
||||||
this.lineCap = 'butt';
|
|
||||||
this.miterLimit = Z * 1;
|
|
||||||
this.globalAlpha = 1;
|
|
||||||
this.canvas = surfaceElement;
|
|
||||||
|
|
||||||
var el = surfaceElement.ownerDocument.createElement('div');
|
|
||||||
el.style.width = surfaceElement.clientWidth + 'px';
|
|
||||||
el.style.height = surfaceElement.clientHeight + 'px';
|
|
||||||
el.style.overflow = 'hidden';
|
|
||||||
el.style.position = 'absolute';
|
|
||||||
surfaceElement.appendChild(el);
|
|
||||||
|
|
||||||
this.element_ = el;
|
|
||||||
this.arcScaleX_ = 1;
|
|
||||||
this.arcScaleY_ = 1;
|
|
||||||
this.lineScale_ = 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
var contextPrototype = CanvasRenderingContext2D_.prototype;
|
|
||||||
contextPrototype.clearRect = function() {
|
|
||||||
this.element_.innerHTML = '';
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.beginPath = function() {
|
|
||||||
// TODO: Branch current matrix so that save/restore has no effect
|
|
||||||
// as per safari docs.
|
|
||||||
this.currentPath_ = [];
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.moveTo = function(aX, aY) {
|
|
||||||
var p = this.getCoords_(aX, aY);
|
|
||||||
this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y});
|
|
||||||
this.currentX_ = p.x;
|
|
||||||
this.currentY_ = p.y;
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.lineTo = function(aX, aY) {
|
|
||||||
var p = this.getCoords_(aX, aY);
|
|
||||||
this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y});
|
|
||||||
|
|
||||||
this.currentX_ = p.x;
|
|
||||||
this.currentY_ = p.y;
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
|
|
||||||
aCP2x, aCP2y,
|
|
||||||
aX, aY) {
|
|
||||||
var p = this.getCoords_(aX, aY);
|
|
||||||
var cp1 = this.getCoords_(aCP1x, aCP1y);
|
|
||||||
var cp2 = this.getCoords_(aCP2x, aCP2y);
|
|
||||||
bezierCurveTo(this, cp1, cp2, p);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Helper function that takes the already fixed cordinates.
|
|
||||||
function bezierCurveTo(self, cp1, cp2, p) {
|
|
||||||
self.currentPath_.push({
|
|
||||||
type: 'bezierCurveTo',
|
|
||||||
cp1x: cp1.x,
|
|
||||||
cp1y: cp1.y,
|
|
||||||
cp2x: cp2.x,
|
|
||||||
cp2y: cp2.y,
|
|
||||||
x: p.x,
|
|
||||||
y: p.y
|
|
||||||
});
|
|
||||||
self.currentX_ = p.x;
|
|
||||||
self.currentY_ = p.y;
|
|
||||||
}
|
|
||||||
|
|
||||||
contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
|
|
||||||
// the following is lifted almost directly from
|
|
||||||
// http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
|
|
||||||
|
|
||||||
var cp = this.getCoords_(aCPx, aCPy);
|
|
||||||
var p = this.getCoords_(aX, aY);
|
|
||||||
|
|
||||||
var cp1 = {
|
|
||||||
x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
|
|
||||||
y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)
|
|
||||||
};
|
|
||||||
var cp2 = {
|
|
||||||
x: cp1.x + (p.x - this.currentX_) / 3.0,
|
|
||||||
y: cp1.y + (p.y - this.currentY_) / 3.0
|
|
||||||
};
|
|
||||||
|
|
||||||
bezierCurveTo(this, cp1, cp2, p);
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.arc = function(aX, aY, aRadius,
|
|
||||||
aStartAngle, aEndAngle, aClockwise) {
|
|
||||||
aRadius *= Z;
|
|
||||||
var arcType = aClockwise ? 'at' : 'wa';
|
|
||||||
|
|
||||||
var xStart = aX + mc(aStartAngle) * aRadius - Z2;
|
|
||||||
var yStart = aY + ms(aStartAngle) * aRadius - Z2;
|
|
||||||
|
|
||||||
var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
|
|
||||||
var yEnd = aY + ms(aEndAngle) * aRadius - Z2;
|
|
||||||
|
|
||||||
// IE won't render arches drawn counter clockwise if xStart == xEnd.
|
|
||||||
if (xStart == xEnd && !aClockwise) {
|
|
||||||
xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
|
|
||||||
// that can be represented in binary
|
|
||||||
}
|
|
||||||
|
|
||||||
var p = this.getCoords_(aX, aY);
|
|
||||||
var pStart = this.getCoords_(xStart, yStart);
|
|
||||||
var pEnd = this.getCoords_(xEnd, yEnd);
|
|
||||||
|
|
||||||
this.currentPath_.push({type: arcType,
|
|
||||||
x: p.x,
|
|
||||||
y: p.y,
|
|
||||||
radius: aRadius,
|
|
||||||
xStart: pStart.x,
|
|
||||||
yStart: pStart.y,
|
|
||||||
xEnd: pEnd.x,
|
|
||||||
yEnd: pEnd.y});
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
|
|
||||||
this.moveTo(aX, aY);
|
|
||||||
this.lineTo(aX + aWidth, aY);
|
|
||||||
this.lineTo(aX + aWidth, aY + aHeight);
|
|
||||||
this.lineTo(aX, aY + aHeight);
|
|
||||||
this.closePath();
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
|
|
||||||
var oldPath = this.currentPath_;
|
|
||||||
this.beginPath();
|
|
||||||
|
|
||||||
this.moveTo(aX, aY);
|
|
||||||
this.lineTo(aX + aWidth, aY);
|
|
||||||
this.lineTo(aX + aWidth, aY + aHeight);
|
|
||||||
this.lineTo(aX, aY + aHeight);
|
|
||||||
this.closePath();
|
|
||||||
this.stroke();
|
|
||||||
|
|
||||||
this.currentPath_ = oldPath;
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
|
|
||||||
var oldPath = this.currentPath_;
|
|
||||||
this.beginPath();
|
|
||||||
|
|
||||||
this.moveTo(aX, aY);
|
|
||||||
this.lineTo(aX + aWidth, aY);
|
|
||||||
this.lineTo(aX + aWidth, aY + aHeight);
|
|
||||||
this.lineTo(aX, aY + aHeight);
|
|
||||||
this.closePath();
|
|
||||||
this.fill();
|
|
||||||
|
|
||||||
this.currentPath_ = oldPath;
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
|
|
||||||
var gradient = new CanvasGradient_('gradient');
|
|
||||||
gradient.x0_ = aX0;
|
|
||||||
gradient.y0_ = aY0;
|
|
||||||
gradient.x1_ = aX1;
|
|
||||||
gradient.y1_ = aY1;
|
|
||||||
return gradient;
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
|
|
||||||
aX1, aY1, aR1) {
|
|
||||||
var gradient = new CanvasGradient_('gradientradial');
|
|
||||||
gradient.x0_ = aX0;
|
|
||||||
gradient.y0_ = aY0;
|
|
||||||
gradient.r0_ = aR0;
|
|
||||||
gradient.x1_ = aX1;
|
|
||||||
gradient.y1_ = aY1;
|
|
||||||
gradient.r1_ = aR1;
|
|
||||||
return gradient;
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.drawImage = function(image, var_args) {
|
|
||||||
var dx, dy, dw, dh, sx, sy, sw, sh;
|
|
||||||
|
|
||||||
// to find the original width we overide the width and height
|
|
||||||
var oldRuntimeWidth = image.runtimeStyle.width;
|
|
||||||
var oldRuntimeHeight = image.runtimeStyle.height;
|
|
||||||
image.runtimeStyle.width = 'auto';
|
|
||||||
image.runtimeStyle.height = 'auto';
|
|
||||||
|
|
||||||
// get the original size
|
|
||||||
var w = image.width;
|
|
||||||
var h = image.height;
|
|
||||||
|
|
||||||
// and remove overides
|
|
||||||
image.runtimeStyle.width = oldRuntimeWidth;
|
|
||||||
image.runtimeStyle.height = oldRuntimeHeight;
|
|
||||||
|
|
||||||
if (arguments.length == 3) {
|
|
||||||
dx = arguments[1];
|
|
||||||
dy = arguments[2];
|
|
||||||
sx = sy = 0;
|
|
||||||
sw = dw = w;
|
|
||||||
sh = dh = h;
|
|
||||||
} else if (arguments.length == 5) {
|
|
||||||
dx = arguments[1];
|
|
||||||
dy = arguments[2];
|
|
||||||
dw = arguments[3];
|
|
||||||
dh = arguments[4];
|
|
||||||
sx = sy = 0;
|
|
||||||
sw = w;
|
|
||||||
sh = h;
|
|
||||||
} else if (arguments.length == 9) {
|
|
||||||
sx = arguments[1];
|
|
||||||
sy = arguments[2];
|
|
||||||
sw = arguments[3];
|
|
||||||
sh = arguments[4];
|
|
||||||
dx = arguments[5];
|
|
||||||
dy = arguments[6];
|
|
||||||
dw = arguments[7];
|
|
||||||
dh = arguments[8];
|
|
||||||
} else {
|
|
||||||
throw Error('Invalid number of arguments');
|
|
||||||
}
|
|
||||||
|
|
||||||
var d = this.getCoords_(dx, dy);
|
|
||||||
|
|
||||||
var w2 = sw / 2;
|
|
||||||
var h2 = sh / 2;
|
|
||||||
|
|
||||||
var vmlStr = [];
|
|
||||||
|
|
||||||
var W = 10;
|
|
||||||
var H = 10;
|
|
||||||
|
|
||||||
// For some reason that I've now forgotten, using divs didn't work
|
|
||||||
vmlStr.push(' <g_vml_:group',
|
|
||||||
' coordsize="', Z * W, ',', Z * H, '"',
|
|
||||||
' coordorigin="0,0"' ,
|
|
||||||
' style="width:', W, 'px;height:', H, 'px;position:absolute;');
|
|
||||||
|
|
||||||
// If filters are necessary (rotation exists), create them
|
|
||||||
// filters are bog-slow, so only create them if abbsolutely necessary
|
|
||||||
// The following check doesn't account for skews (which don't exist
|
|
||||||
// in the canvas spec (yet) anyway.
|
|
||||||
|
|
||||||
if (this.m_[0][0] != 1 || this.m_[0][1]) {
|
|
||||||
var filter = [];
|
|
||||||
|
|
||||||
// Note the 12/21 reversal
|
|
||||||
filter.push('M11=', this.m_[0][0], ',',
|
|
||||||
'M12=', this.m_[1][0], ',',
|
|
||||||
'M21=', this.m_[0][1], ',',
|
|
||||||
'M22=', this.m_[1][1], ',',
|
|
||||||
'Dx=', mr(d.x / Z), ',',
|
|
||||||
'Dy=', mr(d.y / Z), '');
|
|
||||||
|
|
||||||
// Bounding box calculation (need to minimize displayed area so that
|
|
||||||
// filters don't waste time on unused pixels.
|
|
||||||
var max = d;
|
|
||||||
var c2 = this.getCoords_(dx + dw, dy);
|
|
||||||
var c3 = this.getCoords_(dx, dy + dh);
|
|
||||||
var c4 = this.getCoords_(dx + dw, dy + dh);
|
|
||||||
|
|
||||||
max.x = m.max(max.x, c2.x, c3.x, c4.x);
|
|
||||||
max.y = m.max(max.y, c2.y, c3.y, c4.y);
|
|
||||||
|
|
||||||
vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z),
|
|
||||||
'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(',
|
|
||||||
filter.join(''), ", sizingmethod='clip');")
|
|
||||||
} else {
|
|
||||||
vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;');
|
|
||||||
}
|
|
||||||
|
|
||||||
vmlStr.push(' ">' ,
|
|
||||||
'<g_vml_:image src="', image.src, '"',
|
|
||||||
' style="width:', Z * dw, 'px;',
|
|
||||||
' height:', Z * dh, 'px;"',
|
|
||||||
' cropleft="', sx / w, '"',
|
|
||||||
' croptop="', sy / h, '"',
|
|
||||||
' cropright="', (w - sx - sw) / w, '"',
|
|
||||||
' cropbottom="', (h - sy - sh) / h, '"',
|
|
||||||
' />',
|
|
||||||
'</g_vml_:group>');
|
|
||||||
|
|
||||||
this.element_.insertAdjacentHTML('BeforeEnd',
|
|
||||||
vmlStr.join(''));
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.stroke = function(aFill) {
|
|
||||||
var lineStr = [];
|
|
||||||
var lineOpen = false;
|
|
||||||
var a = processStyle(aFill ? this.fillStyle : this.strokeStyle);
|
|
||||||
var color = a.color;
|
|
||||||
var opacity = a.alpha * this.globalAlpha;
|
|
||||||
|
|
||||||
var W = 10;
|
|
||||||
var H = 10;
|
|
||||||
|
|
||||||
lineStr.push('<g_vml_:shape',
|
|
||||||
' filled="', !!aFill, '"',
|
|
||||||
' style="position:absolute;width:', W, 'px;height:', H, 'px;"',
|
|
||||||
' coordorigin="0 0" coordsize="', Z * W, ' ', Z * H, '"',
|
|
||||||
' stroked="', !aFill, '"',
|
|
||||||
' path="');
|
|
||||||
|
|
||||||
var newSeq = false;
|
|
||||||
var min = {x: null, y: null};
|
|
||||||
var max = {x: null, y: null};
|
|
||||||
|
|
||||||
for (var i = 0; i < this.currentPath_.length; i++) {
|
|
||||||
var p = this.currentPath_[i];
|
|
||||||
var c;
|
|
||||||
|
|
||||||
switch (p.type) {
|
|
||||||
case 'moveTo':
|
|
||||||
c = p;
|
|
||||||
lineStr.push(' m ', mr(p.x), ',', mr(p.y));
|
|
||||||
break;
|
|
||||||
case 'lineTo':
|
|
||||||
lineStr.push(' l ', mr(p.x), ',', mr(p.y));
|
|
||||||
break;
|
|
||||||
case 'close':
|
|
||||||
lineStr.push(' x ');
|
|
||||||
p = null;
|
|
||||||
break;
|
|
||||||
case 'bezierCurveTo':
|
|
||||||
lineStr.push(' c ',
|
|
||||||
mr(p.cp1x), ',', mr(p.cp1y), ',',
|
|
||||||
mr(p.cp2x), ',', mr(p.cp2y), ',',
|
|
||||||
mr(p.x), ',', mr(p.y));
|
|
||||||
break;
|
|
||||||
case 'at':
|
|
||||||
case 'wa':
|
|
||||||
lineStr.push(' ', p.type, ' ',
|
|
||||||
mr(p.x - this.arcScaleX_ * p.radius), ',',
|
|
||||||
mr(p.y - this.arcScaleY_ * p.radius), ' ',
|
|
||||||
mr(p.x + this.arcScaleX_ * p.radius), ',',
|
|
||||||
mr(p.y + this.arcScaleY_ * p.radius), ' ',
|
|
||||||
mr(p.xStart), ',', mr(p.yStart), ' ',
|
|
||||||
mr(p.xEnd), ',', mr(p.yEnd));
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// TODO: Following is broken for curves due to
|
|
||||||
// move to proper paths.
|
|
||||||
|
|
||||||
// Figure out dimensions so we can do gradient fills
|
|
||||||
// properly
|
|
||||||
if (p) {
|
|
||||||
if (min.x == null || p.x < min.x) {
|
|
||||||
min.x = p.x;
|
|
||||||
}
|
|
||||||
if (max.x == null || p.x > max.x) {
|
|
||||||
max.x = p.x;
|
|
||||||
}
|
|
||||||
if (min.y == null || p.y < min.y) {
|
|
||||||
min.y = p.y;
|
|
||||||
}
|
|
||||||
if (max.y == null || p.y > max.y) {
|
|
||||||
max.y = p.y;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
lineStr.push(' ">');
|
|
||||||
|
|
||||||
if (!aFill) {
|
|
||||||
var lineWidth = this.lineScale_ * this.lineWidth;
|
|
||||||
|
|
||||||
// VML cannot correctly render a line if the width is less than 1px.
|
|
||||||
// In that case, we dilute the color to make the line look thinner.
|
|
||||||
if (lineWidth < 1) {
|
|
||||||
opacity *= lineWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
lineStr.push(
|
|
||||||
'<g_vml_:stroke',
|
|
||||||
' opacity="', opacity, '"',
|
|
||||||
' joinstyle="', this.lineJoin, '"',
|
|
||||||
' miterlimit="', this.miterLimit, '"',
|
|
||||||
' endcap="', processLineCap(this.lineCap), '"',
|
|
||||||
' weight="', lineWidth, 'px"',
|
|
||||||
' color="', color, '" />'
|
|
||||||
);
|
|
||||||
} else if (typeof this.fillStyle == 'object') {
|
|
||||||
var fillStyle = this.fillStyle;
|
|
||||||
var angle = 0;
|
|
||||||
var focus = {x: 0, y: 0};
|
|
||||||
|
|
||||||
// additional offset
|
|
||||||
var shift = 0;
|
|
||||||
// scale factor for offset
|
|
||||||
var expansion = 1;
|
|
||||||
|
|
||||||
if (fillStyle.type_ == 'gradient') {
|
|
||||||
var x0 = fillStyle.x0_ / this.arcScaleX_;
|
|
||||||
var y0 = fillStyle.y0_ / this.arcScaleY_;
|
|
||||||
var x1 = fillStyle.x1_ / this.arcScaleX_;
|
|
||||||
var y1 = fillStyle.y1_ / this.arcScaleY_;
|
|
||||||
var p0 = this.getCoords_(x0, y0);
|
|
||||||
var p1 = this.getCoords_(x1, y1);
|
|
||||||
var dx = p1.x - p0.x;
|
|
||||||
var dy = p1.y - p0.y;
|
|
||||||
angle = Math.atan2(dx, dy) * 180 / Math.PI;
|
|
||||||
|
|
||||||
// The angle should be a non-negative number.
|
|
||||||
if (angle < 0) {
|
|
||||||
angle += 360;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Very small angles produce an unexpected result because they are
|
|
||||||
// converted to a scientific notation string.
|
|
||||||
if (angle < 1e-6) {
|
|
||||||
angle = 0;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
var p0 = this.getCoords_(fillStyle.x0_, fillStyle.y0_);
|
|
||||||
var width = max.x - min.x;
|
|
||||||
var height = max.y - min.y;
|
|
||||||
focus = {
|
|
||||||
x: (p0.x - min.x) / width,
|
|
||||||
y: (p0.y - min.y) / height
|
|
||||||
};
|
|
||||||
|
|
||||||
width /= this.arcScaleX_ * Z;
|
|
||||||
height /= this.arcScaleY_ * Z;
|
|
||||||
var dimension = m.max(width, height);
|
|
||||||
shift = 2 * fillStyle.r0_ / dimension;
|
|
||||||
expansion = 2 * fillStyle.r1_ / dimension - shift;
|
|
||||||
}
|
|
||||||
|
|
||||||
// We need to sort the color stops in ascending order by offset,
|
|
||||||
// otherwise IE won't interpret it correctly.
|
|
||||||
var stops = fillStyle.colors_;
|
|
||||||
stops.sort(function(cs1, cs2) {
|
|
||||||
return cs1.offset - cs2.offset;
|
|
||||||
});
|
|
||||||
|
|
||||||
var length = stops.length;
|
|
||||||
var color1 = stops[0].color;
|
|
||||||
var color2 = stops[length - 1].color;
|
|
||||||
var opacity1 = stops[0].alpha * this.globalAlpha;
|
|
||||||
var opacity2 = stops[length - 1].alpha * this.globalAlpha;
|
|
||||||
|
|
||||||
var colors = [];
|
|
||||||
for (var i = 0; i < length; i++) {
|
|
||||||
var stop = stops[i];
|
|
||||||
colors.push(stop.offset * expansion + shift + ' ' + stop.color);
|
|
||||||
}
|
|
||||||
|
|
||||||
// When colors attribute is used, the meanings of opacity and o:opacity2
|
|
||||||
// are reversed.
|
|
||||||
lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"',
|
|
||||||
' method="none" focus="100%"',
|
|
||||||
' color="', color1, '"',
|
|
||||||
' color2="', color2, '"',
|
|
||||||
' colors="', colors.join(','), '"',
|
|
||||||
' opacity="', opacity2, '"',
|
|
||||||
' g_o_:opacity2="', opacity1, '"',
|
|
||||||
' angle="', angle, '"',
|
|
||||||
' focusposition="', focus.x, ',', focus.y, '" />');
|
|
||||||
} else {
|
|
||||||
lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity,
|
|
||||||
'" />');
|
|
||||||
}
|
|
||||||
|
|
||||||
lineStr.push('</g_vml_:shape>');
|
|
||||||
|
|
||||||
this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.fill = function() {
|
|
||||||
this.stroke(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
contextPrototype.closePath = function() {
|
|
||||||
this.currentPath_.push({type: 'close'});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
contextPrototype.getCoords_ = function(aX, aY) {
|
|
||||||
var m = this.m_;
|
|
||||||
return {
|
|
||||||
x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
|
|
||||||
y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.save = function() {
|
|
||||||
var o = {};
|
|
||||||
copyState(this, o);
|
|
||||||
this.aStack_.push(o);
|
|
||||||
this.mStack_.push(this.m_);
|
|
||||||
this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.restore = function() {
|
|
||||||
copyState(this.aStack_.pop(), this);
|
|
||||||
this.m_ = this.mStack_.pop();
|
|
||||||
};
|
|
||||||
|
|
||||||
function matrixIsFinite(m) {
|
|
||||||
for (var j = 0; j < 3; j++) {
|
|
||||||
for (var k = 0; k < 2; k++) {
|
|
||||||
if (!isFinite(m[j][k]) || isNaN(m[j][k])) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function setM(ctx, m, updateLineScale) {
|
|
||||||
if (!matrixIsFinite(m)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
ctx.m_ = m;
|
|
||||||
|
|
||||||
if (updateLineScale) {
|
|
||||||
// Get the line scale.
|
|
||||||
// Determinant of this.m_ means how much the area is enlarged by the
|
|
||||||
// transformation. So its square root can be used as a scale factor
|
|
||||||
// for width.
|
|
||||||
var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
|
|
||||||
ctx.lineScale_ = sqrt(abs(det));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
contextPrototype.translate = function(aX, aY) {
|
|
||||||
var m1 = [
|
|
||||||
[1, 0, 0],
|
|
||||||
[0, 1, 0],
|
|
||||||
[aX, aY, 1]
|
|
||||||
];
|
|
||||||
|
|
||||||
setM(this, matrixMultiply(m1, this.m_), false);
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.rotate = function(aRot) {
|
|
||||||
var c = mc(aRot);
|
|
||||||
var s = ms(aRot);
|
|
||||||
|
|
||||||
var m1 = [
|
|
||||||
[c, s, 0],
|
|
||||||
[-s, c, 0],
|
|
||||||
[0, 0, 1]
|
|
||||||
];
|
|
||||||
|
|
||||||
setM(this, matrixMultiply(m1, this.m_), false);
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.scale = function(aX, aY) {
|
|
||||||
this.arcScaleX_ *= aX;
|
|
||||||
this.arcScaleY_ *= aY;
|
|
||||||
var m1 = [
|
|
||||||
[aX, 0, 0],
|
|
||||||
[0, aY, 0],
|
|
||||||
[0, 0, 1]
|
|
||||||
];
|
|
||||||
|
|
||||||
setM(this, matrixMultiply(m1, this.m_), true);
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
|
|
||||||
var m1 = [
|
|
||||||
[m11, m12, 0],
|
|
||||||
[m21, m22, 0],
|
|
||||||
[dx, dy, 1]
|
|
||||||
];
|
|
||||||
|
|
||||||
setM(this, matrixMultiply(m1, this.m_), true);
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
|
|
||||||
var m = [
|
|
||||||
[m11, m12, 0],
|
|
||||||
[m21, m22, 0],
|
|
||||||
[dx, dy, 1]
|
|
||||||
];
|
|
||||||
|
|
||||||
setM(this, m, true);
|
|
||||||
};
|
|
||||||
|
|
||||||
/******** STUBS ********/
|
|
||||||
contextPrototype.clip = function() {
|
|
||||||
// TODO: Implement
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.arcTo = function() {
|
|
||||||
// TODO: Implement
|
|
||||||
};
|
|
||||||
|
|
||||||
contextPrototype.createPattern = function() {
|
|
||||||
return new CanvasPattern_;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Gradient / Pattern Stubs
|
|
||||||
function CanvasGradient_(aType) {
|
|
||||||
this.type_ = aType;
|
|
||||||
this.x0_ = 0;
|
|
||||||
this.y0_ = 0;
|
|
||||||
this.r0_ = 0;
|
|
||||||
this.x1_ = 0;
|
|
||||||
this.y1_ = 0;
|
|
||||||
this.r1_ = 0;
|
|
||||||
this.colors_ = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
|
|
||||||
aColor = processStyle(aColor);
|
|
||||||
this.colors_.push({offset: aOffset,
|
|
||||||
color: aColor.color,
|
|
||||||
alpha: aColor.alpha});
|
|
||||||
};
|
|
||||||
|
|
||||||
function CanvasPattern_() {}
|
|
||||||
|
|
||||||
// set up externs
|
|
||||||
G_vmlCanvasManager = G_vmlCanvasManager_;
|
|
||||||
CanvasRenderingContext2D = CanvasRenderingContext2D_;
|
|
||||||
CanvasGradient = CanvasGradient_;
|
|
||||||
CanvasPattern = CanvasPattern_;
|
|
||||||
|
|
||||||
})();
|
|
||||||
|
|
||||||
} // if
|
|
||||||
@ -1,499 +0,0 @@
|
|||||||
/**
|
|
||||||
* @preserve HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
|
|
||||||
*/
|
|
||||||
;(function(window, document) {
|
|
||||||
/*jshint evil:true */
|
|
||||||
/** version */
|
|
||||||
var version = '3.6.2';
|
|
||||||
|
|
||||||
/** Preset options */
|
|
||||||
var options = window.html5 || {};
|
|
||||||
|
|
||||||
/** Used to skip problem elements */
|
|
||||||
var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
|
|
||||||
|
|
||||||
/** Not all elements can be cloned in IE **/
|
|
||||||
var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
|
|
||||||
|
|
||||||
/** Detect whether the browser supports default html5 styles */
|
|
||||||
var supportsHtml5Styles;
|
|
||||||
|
|
||||||
/** Name of the expando, to work with multiple documents or to re-shiv one document */
|
|
||||||
var expando = '_html5shiv';
|
|
||||||
|
|
||||||
/** The id for the the documents expando */
|
|
||||||
var expanID = 0;
|
|
||||||
|
|
||||||
/** Cached data for each document */
|
|
||||||
var expandoData = {};
|
|
||||||
|
|
||||||
/** Detect whether the browser supports unknown elements */
|
|
||||||
var supportsUnknownElements;
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
try {
|
|
||||||
var a = document.createElement('a');
|
|
||||||
a.innerHTML = '<xyz></xyz>';
|
|
||||||
//if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
|
|
||||||
supportsHtml5Styles = ('hidden' in a);
|
|
||||||
|
|
||||||
supportsUnknownElements = a.childNodes.length == 1 || (function() {
|
|
||||||
// assign a false positive if unable to shiv
|
|
||||||
(document.createElement)('a');
|
|
||||||
var frag = document.createDocumentFragment();
|
|
||||||
return (
|
|
||||||
typeof frag.cloneNode == 'undefined' ||
|
|
||||||
typeof frag.createDocumentFragment == 'undefined' ||
|
|
||||||
typeof frag.createElement == 'undefined'
|
|
||||||
);
|
|
||||||
}());
|
|
||||||
} catch(e) {
|
|
||||||
// assign a false positive if detection fails => unable to shiv
|
|
||||||
supportsHtml5Styles = true;
|
|
||||||
supportsUnknownElements = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
}());
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates a style sheet with the given CSS text and adds it to the document.
|
|
||||||
* @private
|
|
||||||
* @param {Document} ownerDocument The document.
|
|
||||||
* @param {String} cssText The CSS text.
|
|
||||||
* @returns {StyleSheet} The style element.
|
|
||||||
*/
|
|
||||||
function addStyleSheet(ownerDocument, cssText) {
|
|
||||||
var p = ownerDocument.createElement('p'),
|
|
||||||
parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
|
|
||||||
|
|
||||||
p.innerHTML = 'x<style>' + cssText + '</style>';
|
|
||||||
return parent.insertBefore(p.lastChild, parent.firstChild);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the value of `html5.elements` as an array.
|
|
||||||
* @private
|
|
||||||
* @returns {Array} An array of shived element node names.
|
|
||||||
*/
|
|
||||||
function getElements() {
|
|
||||||
var elements = html5.elements;
|
|
||||||
return typeof elements == 'string' ? elements.split(' ') : elements;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the data associated to the given document
|
|
||||||
* @private
|
|
||||||
* @param {Document} ownerDocument The document.
|
|
||||||
* @returns {Object} An object of data.
|
|
||||||
*/
|
|
||||||
function getExpandoData(ownerDocument) {
|
|
||||||
var data = expandoData[ownerDocument[expando]];
|
|
||||||
if (!data) {
|
|
||||||
data = {};
|
|
||||||
expanID++;
|
|
||||||
ownerDocument[expando] = expanID;
|
|
||||||
expandoData[expanID] = data;
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* returns a shived element for the given nodeName and document
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {String} nodeName name of the element
|
|
||||||
* @param {Document} ownerDocument The context document.
|
|
||||||
* @returns {Object} The shived element.
|
|
||||||
*/
|
|
||||||
function createElement(nodeName, ownerDocument, data){
|
|
||||||
if (!ownerDocument) {
|
|
||||||
ownerDocument = document;
|
|
||||||
}
|
|
||||||
if(supportsUnknownElements){
|
|
||||||
return ownerDocument.createElement(nodeName);
|
|
||||||
}
|
|
||||||
if (!data) {
|
|
||||||
data = getExpandoData(ownerDocument);
|
|
||||||
}
|
|
||||||
var node;
|
|
||||||
|
|
||||||
if (data.cache[nodeName]) {
|
|
||||||
node = data.cache[nodeName].cloneNode();
|
|
||||||
} else if (saveClones.test(nodeName)) {
|
|
||||||
node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
|
|
||||||
} else {
|
|
||||||
node = data.createElem(nodeName);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Avoid adding some elements to fragments in IE < 9 because
|
|
||||||
// * Attributes like `name` or `type` cannot be set/changed once an element
|
|
||||||
// is inserted into a document/fragment
|
|
||||||
// * Link elements with `src` attributes that are inaccessible, as with
|
|
||||||
// a 403 response, will cause the tab/window to crash
|
|
||||||
// * Script elements appended to fragments will execute when their `src`
|
|
||||||
// or `text` property is set
|
|
||||||
return node.canHaveChildren && !reSkip.test(nodeName) ? data.frag.appendChild(node) : node;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* returns a shived DocumentFragment for the given document
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {Document} ownerDocument The context document.
|
|
||||||
* @returns {Object} The shived DocumentFragment.
|
|
||||||
*/
|
|
||||||
function createDocumentFragment(ownerDocument, data){
|
|
||||||
if (!ownerDocument) {
|
|
||||||
ownerDocument = document;
|
|
||||||
}
|
|
||||||
if(supportsUnknownElements){
|
|
||||||
return ownerDocument.createDocumentFragment();
|
|
||||||
}
|
|
||||||
data = data || getExpandoData(ownerDocument);
|
|
||||||
var clone = data.frag.cloneNode(),
|
|
||||||
i = 0,
|
|
||||||
elems = getElements(),
|
|
||||||
l = elems.length;
|
|
||||||
for(;i<l;i++){
|
|
||||||
clone.createElement(elems[i]);
|
|
||||||
}
|
|
||||||
return clone;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Shivs the `createElement` and `createDocumentFragment` methods of the document.
|
|
||||||
* @private
|
|
||||||
* @param {Document|DocumentFragment} ownerDocument The document.
|
|
||||||
* @param {Object} data of the document.
|
|
||||||
*/
|
|
||||||
function shivMethods(ownerDocument, data) {
|
|
||||||
if (!data.cache) {
|
|
||||||
data.cache = {};
|
|
||||||
data.createElem = ownerDocument.createElement;
|
|
||||||
data.createFrag = ownerDocument.createDocumentFragment;
|
|
||||||
data.frag = data.createFrag();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
ownerDocument.createElement = function(nodeName) {
|
|
||||||
//abort shiv
|
|
||||||
if (!html5.shivMethods) {
|
|
||||||
return data.createElem(nodeName);
|
|
||||||
}
|
|
||||||
return createElement(nodeName, ownerDocument, data);
|
|
||||||
};
|
|
||||||
|
|
||||||
ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' +
|
|
||||||
'var n=f.cloneNode(),c=n.createElement;' +
|
|
||||||
'h.shivMethods&&(' +
|
|
||||||
// unroll the `createElement` calls
|
|
||||||
getElements().join().replace(/\w+/g, function(nodeName) {
|
|
||||||
data.createElem(nodeName);
|
|
||||||
data.frag.createElement(nodeName);
|
|
||||||
return 'c("' + nodeName + '")';
|
|
||||||
}) +
|
|
||||||
');return n}'
|
|
||||||
)(html5, data.frag);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Shivs the given document.
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {Document} ownerDocument The document to shiv.
|
|
||||||
* @returns {Document} The shived document.
|
|
||||||
*/
|
|
||||||
function shivDocument(ownerDocument) {
|
|
||||||
if (!ownerDocument) {
|
|
||||||
ownerDocument = document;
|
|
||||||
}
|
|
||||||
var data = getExpandoData(ownerDocument);
|
|
||||||
|
|
||||||
if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
|
|
||||||
data.hasCSS = !!addStyleSheet(ownerDocument,
|
|
||||||
// corrects block display not defined in IE6/7/8/9
|
|
||||||
'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' +
|
|
||||||
// adds styling not present in IE6/7/8/9
|
|
||||||
'mark{background:#FF0;color:#000}' +
|
|
||||||
// hides non-rendered elements
|
|
||||||
'template{display:none}'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (!supportsUnknownElements) {
|
|
||||||
shivMethods(ownerDocument, data);
|
|
||||||
}
|
|
||||||
return ownerDocument;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The `html5` object is exposed so that more elements can be shived and
|
|
||||||
* existing shiving can be detected on iframes.
|
|
||||||
* @type Object
|
|
||||||
* @example
|
|
||||||
*
|
|
||||||
* // options can be changed before the script is included
|
|
||||||
* html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };
|
|
||||||
*/
|
|
||||||
var html5 = {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* An array or space separated string of node names of the elements to shiv.
|
|
||||||
* @memberOf html5
|
|
||||||
* @type Array|String
|
|
||||||
*/
|
|
||||||
'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video',
|
|
||||||
|
|
||||||
/**
|
|
||||||
* current version of html5shiv
|
|
||||||
*/
|
|
||||||
'version': version,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A flag to indicate that the HTML5 style sheet should be inserted.
|
|
||||||
* @memberOf html5
|
|
||||||
* @type Boolean
|
|
||||||
*/
|
|
||||||
'shivCSS': (options.shivCSS !== false),
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Is equal to true if a browser supports creating unknown/HTML5 elements
|
|
||||||
* @memberOf html5
|
|
||||||
* @type boolean
|
|
||||||
*/
|
|
||||||
'supportsUnknownElements': supportsUnknownElements,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A flag to indicate that the document's `createElement` and `createDocumentFragment`
|
|
||||||
* methods should be overwritten.
|
|
||||||
* @memberOf html5
|
|
||||||
* @type Boolean
|
|
||||||
*/
|
|
||||||
'shivMethods': (options.shivMethods !== false),
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A string to describe the type of `html5` object ("default" or "default print").
|
|
||||||
* @memberOf html5
|
|
||||||
* @type String
|
|
||||||
*/
|
|
||||||
'type': 'default',
|
|
||||||
|
|
||||||
// shivs the document according to the specified `html5` object options
|
|
||||||
'shivDocument': shivDocument,
|
|
||||||
|
|
||||||
//creates a shived element
|
|
||||||
createElement: createElement,
|
|
||||||
|
|
||||||
//creates a shived documentFragment
|
|
||||||
createDocumentFragment: createDocumentFragment
|
|
||||||
};
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
// expose html5
|
|
||||||
window.html5 = html5;
|
|
||||||
|
|
||||||
// shiv the document
|
|
||||||
shivDocument(document);
|
|
||||||
|
|
||||||
/*------------------------------- Print Shiv -------------------------------*/
|
|
||||||
|
|
||||||
/** Used to filter media types */
|
|
||||||
var reMedia = /^$|\b(?:all|print)\b/;
|
|
||||||
|
|
||||||
/** Used to namespace printable elements */
|
|
||||||
var shivNamespace = 'html5shiv';
|
|
||||||
|
|
||||||
/** Detect whether the browser supports shivable style sheets */
|
|
||||||
var supportsShivableSheets = !supportsUnknownElements && (function() {
|
|
||||||
// assign a false negative if unable to shiv
|
|
||||||
var docEl = document.documentElement;
|
|
||||||
return !(
|
|
||||||
typeof document.namespaces == 'undefined' ||
|
|
||||||
typeof document.parentWindow == 'undefined' ||
|
|
||||||
typeof docEl.applyElement == 'undefined' ||
|
|
||||||
typeof docEl.removeNode == 'undefined' ||
|
|
||||||
typeof window.attachEvent == 'undefined'
|
|
||||||
);
|
|
||||||
}());
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Wraps all HTML5 elements in the given document with printable elements.
|
|
||||||
* (eg. the "header" element is wrapped with the "html5shiv:header" element)
|
|
||||||
* @private
|
|
||||||
* @param {Document} ownerDocument The document.
|
|
||||||
* @returns {Array} An array wrappers added.
|
|
||||||
*/
|
|
||||||
function addWrappers(ownerDocument) {
|
|
||||||
var node,
|
|
||||||
nodes = ownerDocument.getElementsByTagName('*'),
|
|
||||||
index = nodes.length,
|
|
||||||
reElements = RegExp('^(?:' + getElements().join('|') + ')$', 'i'),
|
|
||||||
result = [];
|
|
||||||
|
|
||||||
while (index--) {
|
|
||||||
node = nodes[index];
|
|
||||||
if (reElements.test(node.nodeName)) {
|
|
||||||
result.push(node.applyElement(createWrapper(node)));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates a printable wrapper for the given element.
|
|
||||||
* @private
|
|
||||||
* @param {Element} element The element.
|
|
||||||
* @returns {Element} The wrapper.
|
|
||||||
*/
|
|
||||||
function createWrapper(element) {
|
|
||||||
var node,
|
|
||||||
nodes = element.attributes,
|
|
||||||
index = nodes.length,
|
|
||||||
wrapper = element.ownerDocument.createElement(shivNamespace + ':' + element.nodeName);
|
|
||||||
|
|
||||||
// copy element attributes to the wrapper
|
|
||||||
while (index--) {
|
|
||||||
node = nodes[index];
|
|
||||||
node.specified && wrapper.setAttribute(node.nodeName, node.nodeValue);
|
|
||||||
}
|
|
||||||
// copy element styles to the wrapper
|
|
||||||
wrapper.style.cssText = element.style.cssText;
|
|
||||||
return wrapper;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Shivs the given CSS text.
|
|
||||||
* (eg. header{} becomes html5shiv\:header{})
|
|
||||||
* @private
|
|
||||||
* @param {String} cssText The CSS text to shiv.
|
|
||||||
* @returns {String} The shived CSS text.
|
|
||||||
*/
|
|
||||||
function shivCssText(cssText) {
|
|
||||||
var pair,
|
|
||||||
parts = cssText.split('{'),
|
|
||||||
index = parts.length,
|
|
||||||
reElements = RegExp('(^|[\\s,>+~])(' + getElements().join('|') + ')(?=[[\\s,>+~#.:]|$)', 'gi'),
|
|
||||||
replacement = '$1' + shivNamespace + '\\:$2';
|
|
||||||
|
|
||||||
while (index--) {
|
|
||||||
pair = parts[index] = parts[index].split('}');
|
|
||||||
pair[pair.length - 1] = pair[pair.length - 1].replace(reElements, replacement);
|
|
||||||
parts[index] = pair.join('}');
|
|
||||||
}
|
|
||||||
return parts.join('{');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Removes the given wrappers, leaving the original elements.
|
|
||||||
* @private
|
|
||||||
* @params {Array} wrappers An array of printable wrappers.
|
|
||||||
*/
|
|
||||||
function removeWrappers(wrappers) {
|
|
||||||
var index = wrappers.length;
|
|
||||||
while (index--) {
|
|
||||||
wrappers[index].removeNode();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Shivs the given document for print.
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {Document} ownerDocument The document to shiv.
|
|
||||||
* @returns {Document} The shived document.
|
|
||||||
*/
|
|
||||||
function shivPrint(ownerDocument) {
|
|
||||||
var shivedSheet,
|
|
||||||
wrappers,
|
|
||||||
data = getExpandoData(ownerDocument),
|
|
||||||
namespaces = ownerDocument.namespaces,
|
|
||||||
ownerWindow = ownerDocument.parentWindow;
|
|
||||||
|
|
||||||
if (!supportsShivableSheets || ownerDocument.printShived) {
|
|
||||||
return ownerDocument;
|
|
||||||
}
|
|
||||||
if (typeof namespaces[shivNamespace] == 'undefined') {
|
|
||||||
namespaces.add(shivNamespace);
|
|
||||||
}
|
|
||||||
|
|
||||||
function removeSheet() {
|
|
||||||
clearTimeout(data._removeSheetTimer);
|
|
||||||
if (shivedSheet) {
|
|
||||||
shivedSheet.removeNode(true);
|
|
||||||
}
|
|
||||||
shivedSheet= null;
|
|
||||||
}
|
|
||||||
|
|
||||||
ownerWindow.attachEvent('onbeforeprint', function() {
|
|
||||||
|
|
||||||
removeSheet();
|
|
||||||
|
|
||||||
var imports,
|
|
||||||
length,
|
|
||||||
sheet,
|
|
||||||
collection = ownerDocument.styleSheets,
|
|
||||||
cssText = [],
|
|
||||||
index = collection.length,
|
|
||||||
sheets = Array(index);
|
|
||||||
|
|
||||||
// convert styleSheets collection to an array
|
|
||||||
while (index--) {
|
|
||||||
sheets[index] = collection[index];
|
|
||||||
}
|
|
||||||
// concat all style sheet CSS text
|
|
||||||
while ((sheet = sheets.pop())) {
|
|
||||||
// IE does not enforce a same origin policy for external style sheets...
|
|
||||||
// but has trouble with some dynamically created stylesheets
|
|
||||||
if (!sheet.disabled && reMedia.test(sheet.media)) {
|
|
||||||
|
|
||||||
try {
|
|
||||||
imports = sheet.imports;
|
|
||||||
length = imports.length;
|
|
||||||
} catch(er){
|
|
||||||
length = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
for (index = 0; index < length; index++) {
|
|
||||||
sheets.push(imports[index]);
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
cssText.push(sheet.cssText);
|
|
||||||
} catch(er){}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// wrap all HTML5 elements with printable elements and add the shived style sheet
|
|
||||||
cssText = shivCssText(cssText.reverse().join(''));
|
|
||||||
wrappers = addWrappers(ownerDocument);
|
|
||||||
shivedSheet = addStyleSheet(ownerDocument, cssText);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
ownerWindow.attachEvent('onafterprint', function() {
|
|
||||||
// remove wrappers, leaving the original elements, and remove the shived style sheet
|
|
||||||
removeWrappers(wrappers);
|
|
||||||
clearTimeout(data._removeSheetTimer);
|
|
||||||
data._removeSheetTimer = setTimeout(removeSheet, 500);
|
|
||||||
});
|
|
||||||
|
|
||||||
ownerDocument.printShived = true;
|
|
||||||
return ownerDocument;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
// expose API
|
|
||||||
html5.type += ' print';
|
|
||||||
html5.shivPrint = shivPrint;
|
|
||||||
|
|
||||||
// shiv for print
|
|
||||||
shivPrint(document);
|
|
||||||
|
|
||||||
}(this, document));
|
|
||||||
301
js_old/libs/html5shiv.js
vendored
301
js_old/libs/html5shiv.js
vendored
@ -1,301 +0,0 @@
|
|||||||
/**
|
|
||||||
* @preserve HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
|
|
||||||
*/
|
|
||||||
;(function(window, document) {
|
|
||||||
/*jshint evil:true */
|
|
||||||
/** version */
|
|
||||||
var version = '3.6.2';
|
|
||||||
|
|
||||||
/** Preset options */
|
|
||||||
var options = window.html5 || {};
|
|
||||||
|
|
||||||
/** Used to skip problem elements */
|
|
||||||
var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
|
|
||||||
|
|
||||||
/** Not all elements can be cloned in IE **/
|
|
||||||
var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
|
|
||||||
|
|
||||||
/** Detect whether the browser supports default html5 styles */
|
|
||||||
var supportsHtml5Styles;
|
|
||||||
|
|
||||||
/** Name of the expando, to work with multiple documents or to re-shiv one document */
|
|
||||||
var expando = '_html5shiv';
|
|
||||||
|
|
||||||
/** The id for the the documents expando */
|
|
||||||
var expanID = 0;
|
|
||||||
|
|
||||||
/** Cached data for each document */
|
|
||||||
var expandoData = {};
|
|
||||||
|
|
||||||
/** Detect whether the browser supports unknown elements */
|
|
||||||
var supportsUnknownElements;
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
try {
|
|
||||||
var a = document.createElement('a');
|
|
||||||
a.innerHTML = '<xyz></xyz>';
|
|
||||||
//if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
|
|
||||||
supportsHtml5Styles = ('hidden' in a);
|
|
||||||
|
|
||||||
supportsUnknownElements = a.childNodes.length == 1 || (function() {
|
|
||||||
// assign a false positive if unable to shiv
|
|
||||||
(document.createElement)('a');
|
|
||||||
var frag = document.createDocumentFragment();
|
|
||||||
return (
|
|
||||||
typeof frag.cloneNode == 'undefined' ||
|
|
||||||
typeof frag.createDocumentFragment == 'undefined' ||
|
|
||||||
typeof frag.createElement == 'undefined'
|
|
||||||
);
|
|
||||||
}());
|
|
||||||
} catch(e) {
|
|
||||||
// assign a false positive if detection fails => unable to shiv
|
|
||||||
supportsHtml5Styles = true;
|
|
||||||
supportsUnknownElements = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
}());
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Creates a style sheet with the given CSS text and adds it to the document.
|
|
||||||
* @private
|
|
||||||
* @param {Document} ownerDocument The document.
|
|
||||||
* @param {String} cssText The CSS text.
|
|
||||||
* @returns {StyleSheet} The style element.
|
|
||||||
*/
|
|
||||||
function addStyleSheet(ownerDocument, cssText) {
|
|
||||||
var p = ownerDocument.createElement('p'),
|
|
||||||
parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
|
|
||||||
|
|
||||||
p.innerHTML = 'x<style>' + cssText + '</style>';
|
|
||||||
return parent.insertBefore(p.lastChild, parent.firstChild);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the value of `html5.elements` as an array.
|
|
||||||
* @private
|
|
||||||
* @returns {Array} An array of shived element node names.
|
|
||||||
*/
|
|
||||||
function getElements() {
|
|
||||||
var elements = html5.elements;
|
|
||||||
return typeof elements == 'string' ? elements.split(' ') : elements;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the data associated to the given document
|
|
||||||
* @private
|
|
||||||
* @param {Document} ownerDocument The document.
|
|
||||||
* @returns {Object} An object of data.
|
|
||||||
*/
|
|
||||||
function getExpandoData(ownerDocument) {
|
|
||||||
var data = expandoData[ownerDocument[expando]];
|
|
||||||
if (!data) {
|
|
||||||
data = {};
|
|
||||||
expanID++;
|
|
||||||
ownerDocument[expando] = expanID;
|
|
||||||
expandoData[expanID] = data;
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* returns a shived element for the given nodeName and document
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {String} nodeName name of the element
|
|
||||||
* @param {Document} ownerDocument The context document.
|
|
||||||
* @returns {Object} The shived element.
|
|
||||||
*/
|
|
||||||
function createElement(nodeName, ownerDocument, data){
|
|
||||||
if (!ownerDocument) {
|
|
||||||
ownerDocument = document;
|
|
||||||
}
|
|
||||||
if(supportsUnknownElements){
|
|
||||||
return ownerDocument.createElement(nodeName);
|
|
||||||
}
|
|
||||||
if (!data) {
|
|
||||||
data = getExpandoData(ownerDocument);
|
|
||||||
}
|
|
||||||
var node;
|
|
||||||
|
|
||||||
if (data.cache[nodeName]) {
|
|
||||||
node = data.cache[nodeName].cloneNode();
|
|
||||||
} else if (saveClones.test(nodeName)) {
|
|
||||||
node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
|
|
||||||
} else {
|
|
||||||
node = data.createElem(nodeName);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Avoid adding some elements to fragments in IE < 9 because
|
|
||||||
// * Attributes like `name` or `type` cannot be set/changed once an element
|
|
||||||
// is inserted into a document/fragment
|
|
||||||
// * Link elements with `src` attributes that are inaccessible, as with
|
|
||||||
// a 403 response, will cause the tab/window to crash
|
|
||||||
// * Script elements appended to fragments will execute when their `src`
|
|
||||||
// or `text` property is set
|
|
||||||
return node.canHaveChildren && !reSkip.test(nodeName) ? data.frag.appendChild(node) : node;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* returns a shived DocumentFragment for the given document
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {Document} ownerDocument The context document.
|
|
||||||
* @returns {Object} The shived DocumentFragment.
|
|
||||||
*/
|
|
||||||
function createDocumentFragment(ownerDocument, data){
|
|
||||||
if (!ownerDocument) {
|
|
||||||
ownerDocument = document;
|
|
||||||
}
|
|
||||||
if(supportsUnknownElements){
|
|
||||||
return ownerDocument.createDocumentFragment();
|
|
||||||
}
|
|
||||||
data = data || getExpandoData(ownerDocument);
|
|
||||||
var clone = data.frag.cloneNode(),
|
|
||||||
i = 0,
|
|
||||||
elems = getElements(),
|
|
||||||
l = elems.length;
|
|
||||||
for(;i<l;i++){
|
|
||||||
clone.createElement(elems[i]);
|
|
||||||
}
|
|
||||||
return clone;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Shivs the `createElement` and `createDocumentFragment` methods of the document.
|
|
||||||
* @private
|
|
||||||
* @param {Document|DocumentFragment} ownerDocument The document.
|
|
||||||
* @param {Object} data of the document.
|
|
||||||
*/
|
|
||||||
function shivMethods(ownerDocument, data) {
|
|
||||||
if (!data.cache) {
|
|
||||||
data.cache = {};
|
|
||||||
data.createElem = ownerDocument.createElement;
|
|
||||||
data.createFrag = ownerDocument.createDocumentFragment;
|
|
||||||
data.frag = data.createFrag();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
ownerDocument.createElement = function(nodeName) {
|
|
||||||
//abort shiv
|
|
||||||
if (!html5.shivMethods) {
|
|
||||||
return data.createElem(nodeName);
|
|
||||||
}
|
|
||||||
return createElement(nodeName, ownerDocument, data);
|
|
||||||
};
|
|
||||||
|
|
||||||
ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' +
|
|
||||||
'var n=f.cloneNode(),c=n.createElement;' +
|
|
||||||
'h.shivMethods&&(' +
|
|
||||||
// unroll the `createElement` calls
|
|
||||||
getElements().join().replace(/\w+/g, function(nodeName) {
|
|
||||||
data.createElem(nodeName);
|
|
||||||
data.frag.createElement(nodeName);
|
|
||||||
return 'c("' + nodeName + '")';
|
|
||||||
}) +
|
|
||||||
');return n}'
|
|
||||||
)(html5, data.frag);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Shivs the given document.
|
|
||||||
* @memberOf html5
|
|
||||||
* @param {Document} ownerDocument The document to shiv.
|
|
||||||
* @returns {Document} The shived document.
|
|
||||||
*/
|
|
||||||
function shivDocument(ownerDocument) {
|
|
||||||
if (!ownerDocument) {
|
|
||||||
ownerDocument = document;
|
|
||||||
}
|
|
||||||
var data = getExpandoData(ownerDocument);
|
|
||||||
|
|
||||||
if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
|
|
||||||
data.hasCSS = !!addStyleSheet(ownerDocument,
|
|
||||||
// corrects block display not defined in IE6/7/8/9
|
|
||||||
'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' +
|
|
||||||
// adds styling not present in IE6/7/8/9
|
|
||||||
'mark{background:#FF0;color:#000}' +
|
|
||||||
// hides non-rendered elements
|
|
||||||
'template{display:none}'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (!supportsUnknownElements) {
|
|
||||||
shivMethods(ownerDocument, data);
|
|
||||||
}
|
|
||||||
return ownerDocument;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The `html5` object is exposed so that more elements can be shived and
|
|
||||||
* existing shiving can be detected on iframes.
|
|
||||||
* @type Object
|
|
||||||
* @example
|
|
||||||
*
|
|
||||||
* // options can be changed before the script is included
|
|
||||||
* html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };
|
|
||||||
*/
|
|
||||||
var html5 = {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* An array or space separated string of node names of the elements to shiv.
|
|
||||||
* @memberOf html5
|
|
||||||
* @type Array|String
|
|
||||||
*/
|
|
||||||
'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video',
|
|
||||||
|
|
||||||
/**
|
|
||||||
* current version of html5shiv
|
|
||||||
*/
|
|
||||||
'version': version,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A flag to indicate that the HTML5 style sheet should be inserted.
|
|
||||||
* @memberOf html5
|
|
||||||
* @type Boolean
|
|
||||||
*/
|
|
||||||
'shivCSS': (options.shivCSS !== false),
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Is equal to true if a browser supports creating unknown/HTML5 elements
|
|
||||||
* @memberOf html5
|
|
||||||
* @type boolean
|
|
||||||
*/
|
|
||||||
'supportsUnknownElements': supportsUnknownElements,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A flag to indicate that the document's `createElement` and `createDocumentFragment`
|
|
||||||
* methods should be overwritten.
|
|
||||||
* @memberOf html5
|
|
||||||
* @type Boolean
|
|
||||||
*/
|
|
||||||
'shivMethods': (options.shivMethods !== false),
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A string to describe the type of `html5` object ("default" or "default print").
|
|
||||||
* @memberOf html5
|
|
||||||
* @type String
|
|
||||||
*/
|
|
||||||
'type': 'default',
|
|
||||||
|
|
||||||
// shivs the document according to the specified `html5` object options
|
|
||||||
'shivDocument': shivDocument,
|
|
||||||
|
|
||||||
//creates a shived element
|
|
||||||
createElement: createElement,
|
|
||||||
|
|
||||||
//creates a shived documentFragment
|
|
||||||
createDocumentFragment: createDocumentFragment
|
|
||||||
};
|
|
||||||
|
|
||||||
/*--------------------------------------------------------------------------*/
|
|
||||||
|
|
||||||
// expose html5
|
|
||||||
window.html5 = html5;
|
|
||||||
|
|
||||||
// shiv the document
|
|
||||||
shivDocument(document);
|
|
||||||
|
|
||||||
}(this, document));
|
|
||||||
@ -1,836 +0,0 @@
|
|||||||
/*!
|
|
||||||
* imagesLoaded PACKAGED v3.0.4
|
|
||||||
* JavaScript is all like "You images are done yet or what?"
|
|
||||||
* MIT License
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*!
|
|
||||||
* EventEmitter v4.2.4 - git.io/ee
|
|
||||||
* Oliver Caldwell
|
|
||||||
* MIT license
|
|
||||||
* @preserve
|
|
||||||
*/
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Class for managing events.
|
|
||||||
* Can be extended to provide event functionality in other classes.
|
|
||||||
*
|
|
||||||
* @class EventEmitter Manages event registering and emitting.
|
|
||||||
*/
|
|
||||||
function EventEmitter() {}
|
|
||||||
|
|
||||||
// Shortcuts to improve speed and size
|
|
||||||
|
|
||||||
// Easy access to the prototype
|
|
||||||
var proto = EventEmitter.prototype;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Finds the index of the listener for the event in it's storage array.
|
|
||||||
*
|
|
||||||
* @param {Function[]} listeners Array of listeners to search through.
|
|
||||||
* @param {Function} listener Method to look for.
|
|
||||||
* @return {Number} Index of the specified listener, -1 if not found
|
|
||||||
* @api private
|
|
||||||
*/
|
|
||||||
function indexOfListener(listeners, listener) {
|
|
||||||
var i = listeners.length;
|
|
||||||
while (i--) {
|
|
||||||
if (listeners[i].listener === listener) {
|
|
||||||
return i;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Alias a method while keeping the context correct, to allow for overwriting of target method.
|
|
||||||
*
|
|
||||||
* @param {String} name The name of the target method.
|
|
||||||
* @return {Function} The aliased method
|
|
||||||
* @api private
|
|
||||||
*/
|
|
||||||
function alias(name) {
|
|
||||||
return function aliasClosure() {
|
|
||||||
return this[name].apply(this, arguments);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns the listener array for the specified event.
|
|
||||||
* Will initialise the event object and listener arrays if required.
|
|
||||||
* Will return an object if you use a regex search. The object contains keys for each matched event. So /ba[rz]/ might return an object containing bar and baz. But only if you have either defined them with defineEvent or added some listeners to them.
|
|
||||||
* Each property in the object response is an array of listener functions.
|
|
||||||
*
|
|
||||||
* @param {String|RegExp} evt Name of the event to return the listeners from.
|
|
||||||
* @return {Function[]|Object} All listener functions for the event.
|
|
||||||
*/
|
|
||||||
proto.getListeners = function getListeners(evt) {
|
|
||||||
var events = this._getEvents();
|
|
||||||
var response;
|
|
||||||
var key;
|
|
||||||
|
|
||||||
// Return a concatenated array of all matching events if
|
|
||||||
// the selector is a regular expression.
|
|
||||||
if (typeof evt === 'object') {
|
|
||||||
response = {};
|
|
||||||
for (key in events) {
|
|
||||||
if (events.hasOwnProperty(key) && evt.test(key)) {
|
|
||||||
response[key] = events[key];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
response = events[evt] || (events[evt] = []);
|
|
||||||
}
|
|
||||||
|
|
||||||
return response;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Takes a list of listener objects and flattens it into a list of listener functions.
|
|
||||||
*
|
|
||||||
* @param {Object[]} listeners Raw listener objects.
|
|
||||||
* @return {Function[]} Just the listener functions.
|
|
||||||
*/
|
|
||||||
proto.flattenListeners = function flattenListeners(listeners) {
|
|
||||||
var flatListeners = [];
|
|
||||||
var i;
|
|
||||||
|
|
||||||
for (i = 0; i < listeners.length; i += 1) {
|
|
||||||
flatListeners.push(listeners[i].listener);
|
|
||||||
}
|
|
||||||
|
|
||||||
return flatListeners;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fetches the requested listeners via getListeners but will always return the results inside an object. This is mainly for internal use but others may find it useful.
|
|
||||||
*
|
|
||||||
* @param {String|RegExp} evt Name of the event to return the listeners from.
|
|
||||||
* @return {Object} All listener functions for an event in an object.
|
|
||||||
*/
|
|
||||||
proto.getListenersAsObject = function getListenersAsObject(evt) {
|
|
||||||
var listeners = this.getListeners(evt);
|
|
||||||
var response;
|
|
||||||
|
|
||||||
if (listeners instanceof Array) {
|
|
||||||
response = {};
|
|
||||||
response[evt] = listeners;
|
|
||||||
}
|
|
||||||
|
|
||||||
return response || listeners;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Adds a listener function to the specified event.
|
|
||||||
* The listener will not be added if it is a duplicate.
|
|
||||||
* If the listener returns true then it will be removed after it is called.
|
|
||||||
* If you pass a regular expression as the event name then the listener will be added to all events that match it.
|
|
||||||
*
|
|
||||||
* @param {String|RegExp} evt Name of the event to attach the listener to.
|
|
||||||
* @param {Function} listener Method to be called when the event is emitted. If the function returns true then it will be removed after calling.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.addListener = function addListener(evt, listener) {
|
|
||||||
var listeners = this.getListenersAsObject(evt);
|
|
||||||
var listenerIsWrapped = typeof listener === 'object';
|
|
||||||
var key;
|
|
||||||
|
|
||||||
for (key in listeners) {
|
|
||||||
if (listeners.hasOwnProperty(key) && indexOfListener(listeners[key], listener) === -1) {
|
|
||||||
listeners[key].push(listenerIsWrapped ? listener : {
|
|
||||||
listener: listener,
|
|
||||||
once: false
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Alias of addListener
|
|
||||||
*/
|
|
||||||
proto.on = alias('addListener');
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Semi-alias of addListener. It will add a listener that will be
|
|
||||||
* automatically removed after it's first execution.
|
|
||||||
*
|
|
||||||
* @param {String|RegExp} evt Name of the event to attach the listener to.
|
|
||||||
* @param {Function} listener Method to be called when the event is emitted. If the function returns true then it will be removed after calling.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.addOnceListener = function addOnceListener(evt, listener) {
|
|
||||||
return this.addListener(evt, {
|
|
||||||
listener: listener,
|
|
||||||
once: true
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Alias of addOnceListener.
|
|
||||||
*/
|
|
||||||
proto.once = alias('addOnceListener');
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Defines an event name. This is required if you want to use a regex to add a listener to multiple events at once. If you don't do this then how do you expect it to know what event to add to? Should it just add to every possible match for a regex? No. That is scary and bad.
|
|
||||||
* You need to tell it what event names should be matched by a regex.
|
|
||||||
*
|
|
||||||
* @param {String} evt Name of the event to create.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.defineEvent = function defineEvent(evt) {
|
|
||||||
this.getListeners(evt);
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Uses defineEvent to define multiple events.
|
|
||||||
*
|
|
||||||
* @param {String[]} evts An array of event names to define.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.defineEvents = function defineEvents(evts) {
|
|
||||||
for (var i = 0; i < evts.length; i += 1) {
|
|
||||||
this.defineEvent(evts[i]);
|
|
||||||
}
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Removes a listener function from the specified event.
|
|
||||||
* When passed a regular expression as the event name, it will remove the listener from all events that match it.
|
|
||||||
*
|
|
||||||
* @param {String|RegExp} evt Name of the event to remove the listener from.
|
|
||||||
* @param {Function} listener Method to remove from the event.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.removeListener = function removeListener(evt, listener) {
|
|
||||||
var listeners = this.getListenersAsObject(evt);
|
|
||||||
var index;
|
|
||||||
var key;
|
|
||||||
|
|
||||||
for (key in listeners) {
|
|
||||||
if (listeners.hasOwnProperty(key)) {
|
|
||||||
index = indexOfListener(listeners[key], listener);
|
|
||||||
|
|
||||||
if (index !== -1) {
|
|
||||||
listeners[key].splice(index, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Alias of removeListener
|
|
||||||
*/
|
|
||||||
proto.off = alias('removeListener');
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Adds listeners in bulk using the manipulateListeners method.
|
|
||||||
* If you pass an object as the second argument you can add to multiple events at once. The object should contain key value pairs of events and listeners or listener arrays. You can also pass it an event name and an array of listeners to be added.
|
|
||||||
* You can also pass it a regular expression to add the array of listeners to all events that match it.
|
|
||||||
* Yeah, this function does quite a bit. That's probably a bad thing.
|
|
||||||
*
|
|
||||||
* @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to add to multiple events at once.
|
|
||||||
* @param {Function[]} [listeners] An optional array of listener functions to add.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.addListeners = function addListeners(evt, listeners) {
|
|
||||||
// Pass through to manipulateListeners
|
|
||||||
return this.manipulateListeners(false, evt, listeners);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Removes listeners in bulk using the manipulateListeners method.
|
|
||||||
* If you pass an object as the second argument you can remove from multiple events at once. The object should contain key value pairs of events and listeners or listener arrays.
|
|
||||||
* You can also pass it an event name and an array of listeners to be removed.
|
|
||||||
* You can also pass it a regular expression to remove the listeners from all events that match it.
|
|
||||||
*
|
|
||||||
* @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to remove from multiple events at once.
|
|
||||||
* @param {Function[]} [listeners] An optional array of listener functions to remove.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.removeListeners = function removeListeners(evt, listeners) {
|
|
||||||
// Pass through to manipulateListeners
|
|
||||||
return this.manipulateListeners(true, evt, listeners);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Edits listeners in bulk. The addListeners and removeListeners methods both use this to do their job. You should really use those instead, this is a little lower level.
|
|
||||||
* The first argument will determine if the listeners are removed (true) or added (false).
|
|
||||||
* If you pass an object as the second argument you can add/remove from multiple events at once. The object should contain key value pairs of events and listeners or listener arrays.
|
|
||||||
* You can also pass it an event name and an array of listeners to be added/removed.
|
|
||||||
* You can also pass it a regular expression to manipulate the listeners of all events that match it.
|
|
||||||
*
|
|
||||||
* @param {Boolean} remove True if you want to remove listeners, false if you want to add.
|
|
||||||
* @param {String|Object|RegExp} evt An event name if you will pass an array of listeners next. An object if you wish to add/remove from multiple events at once.
|
|
||||||
* @param {Function[]} [listeners] An optional array of listener functions to add/remove.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.manipulateListeners = function manipulateListeners(remove, evt, listeners) {
|
|
||||||
var i;
|
|
||||||
var value;
|
|
||||||
var single = remove ? this.removeListener : this.addListener;
|
|
||||||
var multiple = remove ? this.removeListeners : this.addListeners;
|
|
||||||
|
|
||||||
// If evt is an object then pass each of it's properties to this method
|
|
||||||
if (typeof evt === 'object' && !(evt instanceof RegExp)) {
|
|
||||||
for (i in evt) {
|
|
||||||
if (evt.hasOwnProperty(i) && (value = evt[i])) {
|
|
||||||
// Pass the single listener straight through to the singular method
|
|
||||||
if (typeof value === 'function') {
|
|
||||||
single.call(this, i, value);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// Otherwise pass back to the multiple function
|
|
||||||
multiple.call(this, i, value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// So evt must be a string
|
|
||||||
// And listeners must be an array of listeners
|
|
||||||
// Loop over it and pass each one to the multiple method
|
|
||||||
i = listeners.length;
|
|
||||||
while (i--) {
|
|
||||||
single.call(this, evt, listeners[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Removes all listeners from a specified event.
|
|
||||||
* If you do not specify an event then all listeners will be removed.
|
|
||||||
* That means every event will be emptied.
|
|
||||||
* You can also pass a regex to remove all events that match it.
|
|
||||||
*
|
|
||||||
* @param {String|RegExp} [evt] Optional name of the event to remove all listeners for. Will remove from every event if not passed.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.removeEvent = function removeEvent(evt) {
|
|
||||||
var type = typeof evt;
|
|
||||||
var events = this._getEvents();
|
|
||||||
var key;
|
|
||||||
|
|
||||||
// Remove different things depending on the state of evt
|
|
||||||
if (type === 'string') {
|
|
||||||
// Remove all listeners for the specified event
|
|
||||||
delete events[evt];
|
|
||||||
}
|
|
||||||
else if (type === 'object') {
|
|
||||||
// Remove all events matching the regex.
|
|
||||||
for (key in events) {
|
|
||||||
if (events.hasOwnProperty(key) && evt.test(key)) {
|
|
||||||
delete events[key];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
// Remove all listeners in all events
|
|
||||||
delete this._events;
|
|
||||||
}
|
|
||||||
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Alias of removeEvent.
|
|
||||||
*
|
|
||||||
* Added to mirror the node API.
|
|
||||||
*/
|
|
||||||
proto.removeAllListeners = alias('removeEvent');
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Emits an event of your choice.
|
|
||||||
* When emitted, every listener attached to that event will be executed.
|
|
||||||
* If you pass the optional argument array then those arguments will be passed to every listener upon execution.
|
|
||||||
* Because it uses `apply`, your array of arguments will be passed as if you wrote them out separately.
|
|
||||||
* So they will not arrive within the array on the other side, they will be separate.
|
|
||||||
* You can also pass a regular expression to emit to all events that match it.
|
|
||||||
*
|
|
||||||
* @param {String|RegExp} evt Name of the event to emit and execute listeners for.
|
|
||||||
* @param {Array} [args] Optional array of arguments to be passed to each listener.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.emitEvent = function emitEvent(evt, args) {
|
|
||||||
var listeners = this.getListenersAsObject(evt);
|
|
||||||
var listener;
|
|
||||||
var i;
|
|
||||||
var key;
|
|
||||||
var response;
|
|
||||||
|
|
||||||
for (key in listeners) {
|
|
||||||
if (listeners.hasOwnProperty(key)) {
|
|
||||||
i = listeners[key].length;
|
|
||||||
|
|
||||||
while (i--) {
|
|
||||||
// If the listener returns true then it shall be removed from the event
|
|
||||||
// The function is executed either with a basic call or an apply if there is an args array
|
|
||||||
listener = listeners[key][i];
|
|
||||||
|
|
||||||
if (listener.once === true) {
|
|
||||||
this.removeListener(evt, listener.listener);
|
|
||||||
}
|
|
||||||
|
|
||||||
response = listener.listener.apply(this, args || []);
|
|
||||||
|
|
||||||
if (response === this._getOnceReturnValue()) {
|
|
||||||
this.removeListener(evt, listener.listener);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Alias of emitEvent
|
|
||||||
*/
|
|
||||||
proto.trigger = alias('emitEvent');
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Subtly different from emitEvent in that it will pass its arguments on to the listeners, as opposed to taking a single array of arguments to pass on.
|
|
||||||
* As with emitEvent, you can pass a regex in place of the event name to emit to all events that match it.
|
|
||||||
*
|
|
||||||
* @param {String|RegExp} evt Name of the event to emit and execute listeners for.
|
|
||||||
* @param {...*} Optional additional arguments to be passed to each listener.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.emit = function emit(evt) {
|
|
||||||
var args = Array.prototype.slice.call(arguments, 1);
|
|
||||||
return this.emitEvent(evt, args);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Sets the current value to check against when executing listeners. If a
|
|
||||||
* listeners return value matches the one set here then it will be removed
|
|
||||||
* after execution. This value defaults to true.
|
|
||||||
*
|
|
||||||
* @param {*} value The new value to check for when executing listeners.
|
|
||||||
* @return {Object} Current instance of EventEmitter for chaining.
|
|
||||||
*/
|
|
||||||
proto.setOnceReturnValue = function setOnceReturnValue(value) {
|
|
||||||
this._onceReturnValue = value;
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fetches the current value to check against when executing listeners. If
|
|
||||||
* the listeners return value matches this one then it should be removed
|
|
||||||
* automatically. It will return true by default.
|
|
||||||
*
|
|
||||||
* @return {*|Boolean} The current value to check for or the default, true.
|
|
||||||
* @api private
|
|
||||||
*/
|
|
||||||
proto._getOnceReturnValue = function _getOnceReturnValue() {
|
|
||||||
if (this.hasOwnProperty('_onceReturnValue')) {
|
|
||||||
return this._onceReturnValue;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fetches the events object and creates one if required.
|
|
||||||
*
|
|
||||||
* @return {Object} The events storage object.
|
|
||||||
* @api private
|
|
||||||
*/
|
|
||||||
proto._getEvents = function _getEvents() {
|
|
||||||
return this._events || (this._events = {});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Expose the class either via AMD, CommonJS or the global object
|
|
||||||
if (typeof define === 'function' && define.amd) {
|
|
||||||
define(function () {
|
|
||||||
return EventEmitter;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
else if (typeof module === 'object' && module.exports){
|
|
||||||
module.exports = EventEmitter;
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.EventEmitter = EventEmitter;
|
|
||||||
}
|
|
||||||
}.call(this));
|
|
||||||
|
|
||||||
/*!
|
|
||||||
* eventie v1.0.3
|
|
||||||
* event binding helper
|
|
||||||
* eventie.bind( elem, 'click', myFn )
|
|
||||||
* eventie.unbind( elem, 'click', myFn )
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*jshint browser: true, undef: true, unused: true */
|
|
||||||
/*global define: false */
|
|
||||||
|
|
||||||
( function( window ) {
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
var docElem = document.documentElement;
|
|
||||||
|
|
||||||
var bind = function() {};
|
|
||||||
|
|
||||||
if ( docElem.addEventListener ) {
|
|
||||||
bind = function( obj, type, fn ) {
|
|
||||||
obj.addEventListener( type, fn, false );
|
|
||||||
};
|
|
||||||
} else if ( docElem.attachEvent ) {
|
|
||||||
bind = function( obj, type, fn ) {
|
|
||||||
obj[ type + fn ] = fn.handleEvent ?
|
|
||||||
function() {
|
|
||||||
var event = window.event;
|
|
||||||
// add event.target
|
|
||||||
event.target = event.target || event.srcElement;
|
|
||||||
fn.handleEvent.call( fn, event );
|
|
||||||
} :
|
|
||||||
function() {
|
|
||||||
var event = window.event;
|
|
||||||
// add event.target
|
|
||||||
event.target = event.target || event.srcElement;
|
|
||||||
fn.call( obj, event );
|
|
||||||
};
|
|
||||||
obj.attachEvent( "on" + type, obj[ type + fn ] );
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
var unbind = function() {};
|
|
||||||
|
|
||||||
if ( docElem.removeEventListener ) {
|
|
||||||
unbind = function( obj, type, fn ) {
|
|
||||||
obj.removeEventListener( type, fn, false );
|
|
||||||
};
|
|
||||||
} else if ( docElem.detachEvent ) {
|
|
||||||
unbind = function( obj, type, fn ) {
|
|
||||||
obj.detachEvent( "on" + type, obj[ type + fn ] );
|
|
||||||
try {
|
|
||||||
delete obj[ type + fn ];
|
|
||||||
} catch ( err ) {
|
|
||||||
// can't delete window object properties
|
|
||||||
obj[ type + fn ] = undefined;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
var eventie = {
|
|
||||||
bind: bind,
|
|
||||||
unbind: unbind
|
|
||||||
};
|
|
||||||
|
|
||||||
// transport
|
|
||||||
if ( typeof define === 'function' && define.amd ) {
|
|
||||||
// AMD
|
|
||||||
define( eventie );
|
|
||||||
} else {
|
|
||||||
// browser global
|
|
||||||
window.eventie = eventie;
|
|
||||||
}
|
|
||||||
|
|
||||||
})( this );
|
|
||||||
|
|
||||||
/*!
|
|
||||||
* imagesLoaded v3.0.4
|
|
||||||
* JavaScript is all like "You images are done yet or what?"
|
|
||||||
* MIT License
|
|
||||||
*/
|
|
||||||
|
|
||||||
( function( window ) {
|
|
||||||
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
var $ = window.jQuery;
|
|
||||||
var console = window.console;
|
|
||||||
var hasConsole = typeof console !== 'undefined';
|
|
||||||
|
|
||||||
// -------------------------- helpers -------------------------- //
|
|
||||||
|
|
||||||
// extend objects
|
|
||||||
function extend( a, b ) {
|
|
||||||
for ( var prop in b ) {
|
|
||||||
a[ prop ] = b[ prop ];
|
|
||||||
}
|
|
||||||
return a;
|
|
||||||
}
|
|
||||||
|
|
||||||
var objToString = Object.prototype.toString;
|
|
||||||
function isArray( obj ) {
|
|
||||||
return objToString.call( obj ) === '[object Array]';
|
|
||||||
}
|
|
||||||
|
|
||||||
// turn element or nodeList into an array
|
|
||||||
function makeArray( obj ) {
|
|
||||||
var ary = [];
|
|
||||||
if ( isArray( obj ) ) {
|
|
||||||
// use object if already an array
|
|
||||||
ary = obj;
|
|
||||||
} else if ( typeof obj.length === 'number' ) {
|
|
||||||
// convert nodeList to array
|
|
||||||
for ( var i=0, len = obj.length; i < len; i++ ) {
|
|
||||||
ary.push( obj[i] );
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// array of single index
|
|
||||||
ary.push( obj );
|
|
||||||
}
|
|
||||||
return ary;
|
|
||||||
}
|
|
||||||
|
|
||||||
// -------------------------- -------------------------- //
|
|
||||||
|
|
||||||
function defineImagesLoaded( EventEmitter, eventie ) {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {Array, Element, NodeList, String} elem
|
|
||||||
* @param {Object or Function} options - if function, use as callback
|
|
||||||
* @param {Function} onAlways - callback function
|
|
||||||
*/
|
|
||||||
function ImagesLoaded( elem, options, onAlways ) {
|
|
||||||
// coerce ImagesLoaded() without new, to be new ImagesLoaded()
|
|
||||||
if ( !( this instanceof ImagesLoaded ) ) {
|
|
||||||
return new ImagesLoaded( elem, options );
|
|
||||||
}
|
|
||||||
// use elem as selector string
|
|
||||||
if ( typeof elem === 'string' ) {
|
|
||||||
elem = document.querySelectorAll( elem );
|
|
||||||
}
|
|
||||||
|
|
||||||
this.elements = makeArray( elem );
|
|
||||||
this.options = extend( {}, this.options );
|
|
||||||
|
|
||||||
if ( typeof options === 'function' ) {
|
|
||||||
onAlways = options;
|
|
||||||
} else {
|
|
||||||
extend( this.options, options );
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( onAlways ) {
|
|
||||||
this.on( 'always', onAlways );
|
|
||||||
}
|
|
||||||
|
|
||||||
this.getImages();
|
|
||||||
|
|
||||||
if ( $ ) {
|
|
||||||
// add jQuery Deferred object
|
|
||||||
this.jqDeferred = new $.Deferred();
|
|
||||||
}
|
|
||||||
|
|
||||||
// HACK check async to allow time to bind listeners
|
|
||||||
var _this = this;
|
|
||||||
setTimeout( function() {
|
|
||||||
_this.check();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
ImagesLoaded.prototype = new EventEmitter();
|
|
||||||
|
|
||||||
ImagesLoaded.prototype.options = {};
|
|
||||||
|
|
||||||
ImagesLoaded.prototype.getImages = function() {
|
|
||||||
this.images = [];
|
|
||||||
|
|
||||||
// filter & find items if we have an item selector
|
|
||||||
for ( var i=0, len = this.elements.length; i < len; i++ ) {
|
|
||||||
var elem = this.elements[i];
|
|
||||||
// filter siblings
|
|
||||||
if ( elem.nodeName === 'IMG' ) {
|
|
||||||
this.addImage( elem );
|
|
||||||
}
|
|
||||||
// find children
|
|
||||||
var childElems = elem.querySelectorAll('img');
|
|
||||||
// concat childElems to filterFound array
|
|
||||||
for ( var j=0, jLen = childElems.length; j < jLen; j++ ) {
|
|
||||||
var img = childElems[j];
|
|
||||||
this.addImage( img );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {Image} img
|
|
||||||
*/
|
|
||||||
ImagesLoaded.prototype.addImage = function( img ) {
|
|
||||||
var loadingImage = new LoadingImage( img );
|
|
||||||
this.images.push( loadingImage );
|
|
||||||
};
|
|
||||||
|
|
||||||
ImagesLoaded.prototype.check = function() {
|
|
||||||
var _this = this;
|
|
||||||
var checkedCount = 0;
|
|
||||||
var length = this.images.length;
|
|
||||||
this.hasAnyBroken = false;
|
|
||||||
// complete if no images
|
|
||||||
if ( !length ) {
|
|
||||||
this.complete();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
function onConfirm( image, message ) {
|
|
||||||
if ( _this.options.debug && hasConsole ) {
|
|
||||||
console.log( 'confirm', image, message );
|
|
||||||
}
|
|
||||||
|
|
||||||
_this.progress( image );
|
|
||||||
checkedCount++;
|
|
||||||
if ( checkedCount === length ) {
|
|
||||||
_this.complete();
|
|
||||||
}
|
|
||||||
return true; // bind once
|
|
||||||
}
|
|
||||||
|
|
||||||
for ( var i=0; i < length; i++ ) {
|
|
||||||
var loadingImage = this.images[i];
|
|
||||||
loadingImage.on( 'confirm', onConfirm );
|
|
||||||
loadingImage.check();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
ImagesLoaded.prototype.progress = function( image ) {
|
|
||||||
this.hasAnyBroken = this.hasAnyBroken || !image.isLoaded;
|
|
||||||
// HACK - Chrome triggers event before object properties have changed. #83
|
|
||||||
var _this = this;
|
|
||||||
setTimeout( function() {
|
|
||||||
_this.emit( 'progress', _this, image );
|
|
||||||
if ( _this.jqDeferred ) {
|
|
||||||
_this.jqDeferred.notify( _this, image );
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
ImagesLoaded.prototype.complete = function() {
|
|
||||||
var eventName = this.hasAnyBroken ? 'fail' : 'done';
|
|
||||||
this.isComplete = true;
|
|
||||||
var _this = this;
|
|
||||||
// HACK - another setTimeout so that confirm happens after progress
|
|
||||||
setTimeout( function() {
|
|
||||||
_this.emit( eventName, _this );
|
|
||||||
_this.emit( 'always', _this );
|
|
||||||
if ( _this.jqDeferred ) {
|
|
||||||
var jqMethod = _this.hasAnyBroken ? 'reject' : 'resolve';
|
|
||||||
_this.jqDeferred[ jqMethod ]( _this );
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// -------------------------- jquery -------------------------- //
|
|
||||||
|
|
||||||
if ( $ ) {
|
|
||||||
$.fn.imagesLoaded = function( options, callback ) {
|
|
||||||
var instance = new ImagesLoaded( this, options, callback );
|
|
||||||
return instance.jqDeferred.promise( $(this) );
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// -------------------------- -------------------------- //
|
|
||||||
|
|
||||||
var cache = {};
|
|
||||||
|
|
||||||
function LoadingImage( img ) {
|
|
||||||
this.img = img;
|
|
||||||
}
|
|
||||||
|
|
||||||
LoadingImage.prototype = new EventEmitter();
|
|
||||||
|
|
||||||
LoadingImage.prototype.check = function() {
|
|
||||||
// first check cached any previous images that have same src
|
|
||||||
var cached = cache[ this.img.src ];
|
|
||||||
if ( cached ) {
|
|
||||||
this.useCached( cached );
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// add this to cache
|
|
||||||
cache[ this.img.src ] = this;
|
|
||||||
|
|
||||||
// If complete is true and browser supports natural sizes,
|
|
||||||
// try to check for image status manually.
|
|
||||||
if ( this.img.complete && this.img.naturalWidth !== undefined ) {
|
|
||||||
// report based on naturalWidth
|
|
||||||
this.confirm( this.img.naturalWidth !== 0, 'naturalWidth' );
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// If none of the checks above matched, simulate loading on detached element.
|
|
||||||
var proxyImage = this.proxyImage = new Image();
|
|
||||||
eventie.bind( proxyImage, 'load', this );
|
|
||||||
eventie.bind( proxyImage, 'error', this );
|
|
||||||
proxyImage.src = this.img.src;
|
|
||||||
};
|
|
||||||
|
|
||||||
LoadingImage.prototype.useCached = function( cached ) {
|
|
||||||
if ( cached.isConfirmed ) {
|
|
||||||
this.confirm( cached.isLoaded, 'cached was confirmed' );
|
|
||||||
} else {
|
|
||||||
var _this = this;
|
|
||||||
cached.on( 'confirm', function( image ) {
|
|
||||||
_this.confirm( image.isLoaded, 'cache emitted confirmed' );
|
|
||||||
return true; // bind once
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
LoadingImage.prototype.confirm = function( isLoaded, message ) {
|
|
||||||
this.isConfirmed = true;
|
|
||||||
this.isLoaded = isLoaded;
|
|
||||||
this.emit( 'confirm', this, message );
|
|
||||||
};
|
|
||||||
|
|
||||||
// trigger specified handler for event type
|
|
||||||
LoadingImage.prototype.handleEvent = function( event ) {
|
|
||||||
var method = 'on' + event.type;
|
|
||||||
if ( this[ method ] ) {
|
|
||||||
this[ method ]( event );
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
LoadingImage.prototype.onload = function() {
|
|
||||||
this.confirm( true, 'onload' );
|
|
||||||
this.unbindProxyEvents();
|
|
||||||
};
|
|
||||||
|
|
||||||
LoadingImage.prototype.onerror = function() {
|
|
||||||
this.confirm( false, 'onerror' );
|
|
||||||
this.unbindProxyEvents();
|
|
||||||
};
|
|
||||||
|
|
||||||
LoadingImage.prototype.unbindProxyEvents = function() {
|
|
||||||
eventie.unbind( this.proxyImage, 'load', this );
|
|
||||||
eventie.unbind( this.proxyImage, 'error', this );
|
|
||||||
};
|
|
||||||
|
|
||||||
// ----- ----- //
|
|
||||||
|
|
||||||
return ImagesLoaded;
|
|
||||||
}
|
|
||||||
|
|
||||||
// -------------------------- transport -------------------------- //
|
|
||||||
|
|
||||||
if ( typeof define === 'function' && define.amd ) {
|
|
||||||
// AMD
|
|
||||||
define( [
|
|
||||||
'eventEmitter/EventEmitter',
|
|
||||||
'eventie/eventie'
|
|
||||||
],
|
|
||||||
defineImagesLoaded );
|
|
||||||
} else {
|
|
||||||
// browser global
|
|
||||||
window.imagesLoaded = defineImagesLoaded(
|
|
||||||
window.EventEmitter,
|
|
||||||
window.eventie
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
})( window );
|
|
||||||
539
js_old/libs/jquery-tourbus.js
vendored
539
js_old/libs/jquery-tourbus.js
vendored
@ -1,539 +0,0 @@
|
|||||||
(function() {
|
|
||||||
var __slice = [].slice;
|
|
||||||
|
|
||||||
(function($) {
|
|
||||||
var Bus, Leg, methods, tourbus, uniqueId, _addRule, _assemble, _busses, _dataProp, _include, _tours;
|
|
||||||
tourbus = $.tourbus = function() {
|
|
||||||
var args, method;
|
|
||||||
args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
|
|
||||||
method = args[0];
|
|
||||||
if (methods.hasOwnProperty(method)) {
|
|
||||||
args = args.slice(1);
|
|
||||||
} else if (method instanceof $) {
|
|
||||||
method = 'build';
|
|
||||||
} else if (typeof method === 'string') {
|
|
||||||
method = 'build';
|
|
||||||
args[0] = $(args[0]);
|
|
||||||
} else {
|
|
||||||
$.error("Unknown method of $.tourbus --", args);
|
|
||||||
}
|
|
||||||
return methods[method].apply(this, args);
|
|
||||||
};
|
|
||||||
$.fn.tourbus = function() {
|
|
||||||
var args;
|
|
||||||
args = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
|
|
||||||
return this.each(function() {
|
|
||||||
args.unshift($(this));
|
|
||||||
tourbus.apply(null, ['build'].concat(__slice.call(args)));
|
|
||||||
return this;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
methods = {
|
|
||||||
build: function(el, options) {
|
|
||||||
var built;
|
|
||||||
if (options == null) {
|
|
||||||
options = {};
|
|
||||||
}
|
|
||||||
options = $.extend(true, {}, tourbus.defaults, options);
|
|
||||||
built = [];
|
|
||||||
if (!(el instanceof $)) {
|
|
||||||
el = $(el);
|
|
||||||
}
|
|
||||||
el.each(function() {
|
|
||||||
return built.push(_assemble(this, options));
|
|
||||||
});
|
|
||||||
if (built.length === 0) {
|
|
||||||
$.error("" + el.selector + " was not found!");
|
|
||||||
}
|
|
||||||
if (built.length === 1) {
|
|
||||||
return built[0];
|
|
||||||
}
|
|
||||||
return built;
|
|
||||||
},
|
|
||||||
destroyAll: function() {
|
|
||||||
var bus, index, _results;
|
|
||||||
_results = [];
|
|
||||||
for (index in _busses) {
|
|
||||||
bus = _busses[index];
|
|
||||||
_results.push(bus.destroy());
|
|
||||||
}
|
|
||||||
return _results;
|
|
||||||
},
|
|
||||||
expose: function(global) {
|
|
||||||
return global.tourbus = {
|
|
||||||
Bus: Bus,
|
|
||||||
Leg: Leg
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
tourbus.defaults = {
|
|
||||||
debug: false,
|
|
||||||
autoDepart: false,
|
|
||||||
target: 'body',
|
|
||||||
startAt: 0,
|
|
||||||
onDepart: function() {
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
onStop: function() {
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
onLegStart: function() {
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
onLegEnd: function() {
|
|
||||||
return null;
|
|
||||||
},
|
|
||||||
leg: {
|
|
||||||
scrollTo: null,
|
|
||||||
scrollSpeed: 150,
|
|
||||||
scrollContext: 100,
|
|
||||||
orientation: 'bottom',
|
|
||||||
align: 'left',
|
|
||||||
width: 'auto',
|
|
||||||
margin: 10,
|
|
||||||
top: null,
|
|
||||||
left: null,
|
|
||||||
arrow: "35%"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/* Internal
|
|
||||||
*/
|
|
||||||
|
|
||||||
Bus = (function() {
|
|
||||||
|
|
||||||
function Bus(el, options) {
|
|
||||||
this.id = uniqueId();
|
|
||||||
this.$target = $(options.target);
|
|
||||||
this.$el = $(el);
|
|
||||||
this.$el.data({
|
|
||||||
tourbus: this
|
|
||||||
});
|
|
||||||
this.options = options;
|
|
||||||
this.currentLegIndex = null;
|
|
||||||
this.legs = null;
|
|
||||||
this.legEls = this.$el.children('li');
|
|
||||||
this.totalLegs = this.legEls.length;
|
|
||||||
this._setupEvents();
|
|
||||||
if (this.options.autoDepart) {
|
|
||||||
this.$el.trigger('depart.tourbus');
|
|
||||||
}
|
|
||||||
this._log('built tourbus with el', el.toString(), 'and options', this.options);
|
|
||||||
}
|
|
||||||
|
|
||||||
Bus.prototype.depart = function() {
|
|
||||||
this.running = true;
|
|
||||||
this.options.onDepart(this);
|
|
||||||
this._log('departing', this);
|
|
||||||
this.legs = this._buildLegs();
|
|
||||||
this.currentLegIndex = this.options.startAt;
|
|
||||||
return this.showLeg();
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.stop = function() {
|
|
||||||
if (!this.running) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (this.legs) {
|
|
||||||
$.each(this.legs, $.proxy(this.hideLeg, this));
|
|
||||||
}
|
|
||||||
this.currentLegIndex = this.options.startAt;
|
|
||||||
this.options.onStop(this);
|
|
||||||
return this.running = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.on = function(event, selector, fn) {
|
|
||||||
return this.$target.on(event, selector, fn);
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.currentLeg = function() {
|
|
||||||
if (this.currentLegIndex === null) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
return this.legs[this.currentLegIndex];
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.showLeg = function(index) {
|
|
||||||
var leg, preventDefault;
|
|
||||||
if (index == null) {
|
|
||||||
index = this.currentLegIndex;
|
|
||||||
}
|
|
||||||
leg = this.legs[index];
|
|
||||||
this._log('showLeg:', leg);
|
|
||||||
preventDefault = this.options.onLegStart(leg, this);
|
|
||||||
if (preventDefault !== false) {
|
|
||||||
return leg.show();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.hideLeg = function(index) {
|
|
||||||
var leg, preventDefault;
|
|
||||||
if (index == null) {
|
|
||||||
index = this.currentLegIndex;
|
|
||||||
}
|
|
||||||
leg = this.legs[index];
|
|
||||||
this._log('hideLeg:', leg);
|
|
||||||
preventDefault = this.options.onLegEnd(leg, this);
|
|
||||||
if (preventDefault !== false) {
|
|
||||||
return leg.hide();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.repositionLegs = function() {
|
|
||||||
if (this.legs) {
|
|
||||||
return $.each(this.legs, function() {
|
|
||||||
return this.reposition();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.next = function() {
|
|
||||||
this.hideLeg();
|
|
||||||
this.currentLegIndex++;
|
|
||||||
if (this.currentLegIndex > this.totalLegs - 1) {
|
|
||||||
return this.stop();
|
|
||||||
}
|
|
||||||
return this.showLeg();
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.prev = function(cb) {
|
|
||||||
this.hideLeg();
|
|
||||||
this.currentLegIndex--;
|
|
||||||
if (this.currentLegIndex < 0) {
|
|
||||||
return this.stop();
|
|
||||||
}
|
|
||||||
return this.showLeg();
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype.destroy = function() {
|
|
||||||
if (this.legs) {
|
|
||||||
$.each(this.legs, function() {
|
|
||||||
return this.destroy();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.legs = null;
|
|
||||||
delete _busses[this.id];
|
|
||||||
return this._teardownEvents();
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype._buildLegs = function() {
|
|
||||||
var _this = this;
|
|
||||||
if (this.legs) {
|
|
||||||
$.each(this.legs, function(_, leg) {
|
|
||||||
return leg.destroy();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return $.map(this.legEls, function(legEl, i) {
|
|
||||||
var $legEl, data, leg;
|
|
||||||
$legEl = $(legEl);
|
|
||||||
data = $legEl.data();
|
|
||||||
leg = new Leg({
|
|
||||||
content: $legEl.html(),
|
|
||||||
target: data.el || 'body',
|
|
||||||
bus: _this,
|
|
||||||
index: i,
|
|
||||||
rawData: data
|
|
||||||
});
|
|
||||||
leg.render();
|
|
||||||
_this.$target.append(leg.$el);
|
|
||||||
leg._position();
|
|
||||||
leg.hide();
|
|
||||||
return leg;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype._log = function() {
|
|
||||||
if (!this.options.debug) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
return console.log.apply(console, ["TOURBUS " + this.id + ":"].concat(__slice.call(arguments)));
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype._setupEvents = function() {
|
|
||||||
this.$el.on('depart.tourbus', $.proxy(this.depart, this));
|
|
||||||
this.$el.on('stop.tourbus', $.proxy(this.stop, this));
|
|
||||||
this.$el.on('next.tourbus', $.proxy(this.next, this));
|
|
||||||
return this.$el.on('prev.tourbus', $.proxy(this.prev, this));
|
|
||||||
};
|
|
||||||
|
|
||||||
Bus.prototype._teardownEvents = function() {
|
|
||||||
return this.$el.off('.tourbus');
|
|
||||||
};
|
|
||||||
|
|
||||||
return Bus;
|
|
||||||
|
|
||||||
})();
|
|
||||||
Leg = (function() {
|
|
||||||
|
|
||||||
function Leg(options) {
|
|
||||||
this.bus = options.bus;
|
|
||||||
this.rawData = options.rawData;
|
|
||||||
this.content = options.content;
|
|
||||||
this.index = options.index;
|
|
||||||
this.options = options;
|
|
||||||
this.$target = $(options.target);
|
|
||||||
if (this.$target.length === 0) {
|
|
||||||
throw "" + this.$target.selector + " is not an element!";
|
|
||||||
}
|
|
||||||
this._setupOptions();
|
|
||||||
this._configureElement();
|
|
||||||
this._configureTarget();
|
|
||||||
this._configureScroll();
|
|
||||||
this._setupEvents();
|
|
||||||
this.bus._log("leg " + this.index + " made with options", this.options);
|
|
||||||
}
|
|
||||||
|
|
||||||
Leg.prototype.render = function() {
|
|
||||||
var arrowClass, html;
|
|
||||||
arrowClass = this.options.orientation === 'centered' ? '' : 'tourbus-arrow';
|
|
||||||
this.$el.addClass(" " + arrowClass + " tourbus-arrow-" + this.options.orientation + " ");
|
|
||||||
html = "<div class='tourbus-leg-inner'>\n " + this.content + "\n</div>";
|
|
||||||
this.$el.css({
|
|
||||||
width: this.options.width
|
|
||||||
}).html(html);
|
|
||||||
return this;
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype.destroy = function() {
|
|
||||||
this.$el.remove();
|
|
||||||
return this._teardownEvents();
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype.reposition = function() {
|
|
||||||
this._configureTarget();
|
|
||||||
return this._position();
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype._position = function() {
|
|
||||||
var css, keys, rule, selector;
|
|
||||||
if (this.options.orientation !== 'centered') {
|
|
||||||
rule = {};
|
|
||||||
keys = {
|
|
||||||
top: 'left',
|
|
||||||
bottom: 'left',
|
|
||||||
left: 'top',
|
|
||||||
right: 'top'
|
|
||||||
};
|
|
||||||
if (typeof this.options.arrow === 'number') {
|
|
||||||
this.options.arrow += 'px';
|
|
||||||
}
|
|
||||||
rule[keys[this.options.orientation]] = this.options.arrow;
|
|
||||||
selector = "#" + this.id + ".tourbus-arrow";
|
|
||||||
this.bus._log("adding rule for " + this.id, rule);
|
|
||||||
_addRule("" + selector + ":before, " + selector + ":after", rule);
|
|
||||||
}
|
|
||||||
css = this._offsets();
|
|
||||||
this.bus._log('setting offsets on leg', css);
|
|
||||||
return this.$el.css(css);
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype.show = function() {
|
|
||||||
this.$el.css({
|
|
||||||
visibility: 'visible',
|
|
||||||
opacity: 1.0,
|
|
||||||
zIndex: 9999
|
|
||||||
});
|
|
||||||
return this.scrollIntoView();
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype.hide = function() {
|
|
||||||
if (this.bus.options.debug) {
|
|
||||||
return this.$el.css({
|
|
||||||
visibility: 'visible',
|
|
||||||
opacity: 0.4,
|
|
||||||
zIndex: 0
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
return this.$el.css({
|
|
||||||
visibility: 'hidden'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype.scrollIntoView = function() {
|
|
||||||
var scrollTarget;
|
|
||||||
if (!this.willScroll) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
scrollTarget = _dataProp(this.options.scrollTo, this.$el);
|
|
||||||
this.bus._log('scrolling to', scrollTarget, this.scrollSettings);
|
|
||||||
return $.scrollTo(scrollTarget, this.scrollSettings);
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype._setupOptions = function() {
|
|
||||||
var globalOptions;
|
|
||||||
globalOptions = this.bus.options.leg;
|
|
||||||
this.options.top = _dataProp(this.rawData.top, globalOptions.top);
|
|
||||||
this.options.left = _dataProp(this.rawData.left, globalOptions.left);
|
|
||||||
this.options.scrollTo = _dataProp(this.rawData.scrollTo, globalOptions.scrollTo);
|
|
||||||
this.options.scrollSpeed = _dataProp(this.rawData.scrollSpeed, globalOptions.scrollSpeed);
|
|
||||||
this.options.scrollContext = _dataProp(this.rawData.scrollContext, globalOptions.scrollContext);
|
|
||||||
this.options.margin = _dataProp(this.rawData.margin, globalOptions.margin);
|
|
||||||
this.options.arrow = this.rawData.arrow || globalOptions.arrow;
|
|
||||||
this.options.align = this.rawData.align || globalOptions.align;
|
|
||||||
this.options.width = this.rawData.width || globalOptions.width;
|
|
||||||
return this.options.orientation = this.rawData.orientation || globalOptions.orientation;
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype._configureElement = function() {
|
|
||||||
this.id = "tourbus-leg-id-" + this.bus.id + "-" + this.options.index;
|
|
||||||
this.$el = $("<div class='tourbus-leg'></div>");
|
|
||||||
this.el = this.$el[0];
|
|
||||||
this.$el.attr({
|
|
||||||
id: this.id
|
|
||||||
});
|
|
||||||
return this.$el.css({
|
|
||||||
zIndex: 9999
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype._setupEvents = function() {
|
|
||||||
this.$el.on('click', '.tourbus-next', $.proxy(this.bus.next, this.bus));
|
|
||||||
this.$el.on('click', '.tourbus-prev', $.proxy(this.bus.prev, this.bus));
|
|
||||||
return this.$el.on('click', '.tourbus-stop', $.proxy(this.bus.stop, this.bus));
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype._teardownEvents = function() {
|
|
||||||
return this.$el.off('click');
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype._configureTarget = function() {
|
|
||||||
this.targetOffset = this.$target.offset();
|
|
||||||
if (_dataProp(this.options.top, false)) {
|
|
||||||
this.targetOffset.top = this.options.top;
|
|
||||||
}
|
|
||||||
if (_dataProp(this.options.left, false)) {
|
|
||||||
this.targetOffset.left = this.options.left;
|
|
||||||
}
|
|
||||||
this.targetWidth = this.$target.outerWidth();
|
|
||||||
return this.targetHeight = this.$target.outerHeight();
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype._configureScroll = function() {
|
|
||||||
this.willScroll = $.fn.scrollTo && this.options.scrollTo !== false;
|
|
||||||
return this.scrollSettings = {
|
|
||||||
offset: -this.options.scrollContext,
|
|
||||||
easing: 'linear',
|
|
||||||
axis: 'y',
|
|
||||||
duration: this.options.scrollSpeed
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
Leg.prototype._offsets = function() {
|
|
||||||
var dimension, elHalf, elHeight, elWidth, offsets, targetHalf, targetHeightOverride, validOrientations;
|
|
||||||
elHeight = this.$el.height();
|
|
||||||
elWidth = this.$el.width();
|
|
||||||
offsets = {};
|
|
||||||
switch (this.options.orientation) {
|
|
||||||
case 'centered':
|
|
||||||
targetHeightOverride = $(window).height();
|
|
||||||
offsets.top = this.options.top;
|
|
||||||
if (!_dataProp(offsets.top, false)) {
|
|
||||||
offsets.top = (targetHeightOverride / 2) - (elHeight / 2);
|
|
||||||
}
|
|
||||||
offsets.left = (this.targetWidth / 2) - (elWidth / 2);
|
|
||||||
break;
|
|
||||||
case 'left':
|
|
||||||
offsets.top = this.targetOffset.top;
|
|
||||||
offsets.left = this.targetOffset.left - elWidth - this.options.margin;
|
|
||||||
break;
|
|
||||||
case 'right':
|
|
||||||
offsets.top = this.targetOffset.top;
|
|
||||||
offsets.left = this.targetOffset.left + this.targetWidth + this.options.margin;
|
|
||||||
break;
|
|
||||||
case 'top':
|
|
||||||
offsets.top = this.targetOffset.top - elHeight - this.options.margin;
|
|
||||||
offsets.left = this.targetOffset.left;
|
|
||||||
break;
|
|
||||||
case 'bottom':
|
|
||||||
offsets.top = this.targetOffset.top + this.targetHeight + this.options.margin;
|
|
||||||
offsets.left = this.targetOffset.left;
|
|
||||||
}
|
|
||||||
validOrientations = {
|
|
||||||
top: ['left', 'right'],
|
|
||||||
bottom: ['left', 'right'],
|
|
||||||
left: ['top', 'bottom'],
|
|
||||||
right: ['top', 'bottom']
|
|
||||||
};
|
|
||||||
if (_include(this.options.orientation, validOrientations[this.options.align])) {
|
|
||||||
switch (this.options.align) {
|
|
||||||
case 'right':
|
|
||||||
offsets.left += this.targetWidth - elWidth;
|
|
||||||
break;
|
|
||||||
case 'bottom':
|
|
||||||
offsets.top += this.targetHeight - elHeight;
|
|
||||||
}
|
|
||||||
} else if (this.options.align === 'center') {
|
|
||||||
if (_include(this.options.orientation, validOrientations.left)) {
|
|
||||||
targetHalf = this.targetWidth / 2;
|
|
||||||
elHalf = elWidth / 2;
|
|
||||||
dimension = 'left';
|
|
||||||
} else {
|
|
||||||
targetHalf = this.targetHeight / 2;
|
|
||||||
elHalf = elHeight / 2;
|
|
||||||
dimension = 'top';
|
|
||||||
}
|
|
||||||
if (targetHalf > elHalf) {
|
|
||||||
offsets[dimension] += targetHalf - elHalf;
|
|
||||||
} else {
|
|
||||||
offsets[dimension] -= elHalf - targetHalf;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return offsets;
|
|
||||||
};
|
|
||||||
|
|
||||||
return Leg;
|
|
||||||
|
|
||||||
})();
|
|
||||||
_tours = 0;
|
|
||||||
uniqueId = function() {
|
|
||||||
return _tours++;
|
|
||||||
};
|
|
||||||
_busses = {};
|
|
||||||
_assemble = function() {
|
|
||||||
var bus;
|
|
||||||
bus = (function(func, args, ctor) {
|
|
||||||
ctor.prototype = func.prototype;
|
|
||||||
var child = new ctor, result = func.apply(child, args);
|
|
||||||
return Object(result) === result ? result : child;
|
|
||||||
})(Bus, arguments, function(){});
|
|
||||||
_busses[bus.id] = bus;
|
|
||||||
return bus;
|
|
||||||
};
|
|
||||||
_dataProp = function(possiblyFalsy, alternative) {
|
|
||||||
if (possiblyFalsy === null || typeof possiblyFalsy === 'undefined') {
|
|
||||||
return alternative;
|
|
||||||
}
|
|
||||||
return possiblyFalsy;
|
|
||||||
};
|
|
||||||
_include = function(value, array) {
|
|
||||||
return $.inArray(value, array || []) !== -1;
|
|
||||||
};
|
|
||||||
return _addRule = (function(styleTag) {
|
|
||||||
var sheet;
|
|
||||||
styleTag.type = 'text/css';
|
|
||||||
document.getElementsByTagName('head')[0].appendChild(styleTag);
|
|
||||||
sheet = document.styleSheets[document.styleSheets.length - 1];
|
|
||||||
return function(selector, css) {
|
|
||||||
var key, propText;
|
|
||||||
propText = $.map((function() {
|
|
||||||
var _results;
|
|
||||||
_results = [];
|
|
||||||
for (key in css) {
|
|
||||||
_results.push(key);
|
|
||||||
}
|
|
||||||
return _results;
|
|
||||||
})(), function(p) {
|
|
||||||
return "" + p + ":" + css[p];
|
|
||||||
}).join(';');
|
|
||||||
try {
|
|
||||||
if (sheet.insertRule) {
|
|
||||||
sheet.insertRule("" + selector + " { " + propText + " }", (sheet.cssRules || sheet.rules).length);
|
|
||||||
} else {
|
|
||||||
sheet.addRule(selector, propText);
|
|
||||||
}
|
|
||||||
} catch (_error) {}
|
|
||||||
};
|
|
||||||
})(document.createElement('style'));
|
|
||||||
})(jQuery);
|
|
||||||
|
|
||||||
}).call(this);
|
|
||||||
1
js_old/libs/jquery-tourbus.min.js
vendored
1
js_old/libs/jquery-tourbus.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,139 +0,0 @@
|
|||||||
var debugMode = false; // debug mode
|
|
||||||
var sendPrintCommands = true; // if Doodle3d should send print commands to the 3d printer
|
|
||||||
var communicateWithWifibox = true; // if Doodle3d should try interfacing with the wifibox (in case one is not connected)
|
|
||||||
var wifiboxIsRemote = false; // when you want to run the client on a computer and have it remotely connect to the wifibox
|
|
||||||
var autoUpdate = true; // auto retrieve updates about temperature and progress from printer
|
|
||||||
|
|
||||||
var printer = new Printer();
|
|
||||||
var progressbar = new Progressbar();
|
|
||||||
var thermometer = new Thermometer();
|
|
||||||
var settingsWindow = new SettingsWindow();
|
|
||||||
var message = new Message();
|
|
||||||
|
|
||||||
var firstTimeSettingsLoaded = true;
|
|
||||||
|
|
||||||
var wifiboxURL; // Using the uhttpd lua handler as default, because of better performance
|
|
||||||
var wifiboxCGIBinURL; // CGI-bin, for some network stuff, where it needs to restart the webserver for example
|
|
||||||
|
|
||||||
var $drawAreaContainer, $doodleCanvas, doodleCanvas, doodleCanvasContext, $previewContainer;
|
|
||||||
|
|
||||||
$(function() {
|
|
||||||
console.log("ready");
|
|
||||||
|
|
||||||
|
|
||||||
//TODO give this a more logical place in code
|
|
||||||
|
|
||||||
if (getURLParameter("d") != "null") debugMode = (getURLParameter("d") == "1");
|
|
||||||
if (getURLParameter("p") != "null") sendPrintCommands = (getURLParameter("p") == "1");
|
|
||||||
if (getURLParameter("c") != "null") communicateWithWifibox = (getURLParameter("c") == "1");
|
|
||||||
if (getURLParameter("r") != "null") wifiboxIsRemote = (getURLParameter("r") == "1");
|
|
||||||
if (getURLParameter("u") != "null") autoUpdate = (getURLParameter("u") == "1");
|
|
||||||
|
|
||||||
if (wifiboxIsRemote) {
|
|
||||||
wifiboxURL = "http://192.168.5.1/d3dapi";
|
|
||||||
wifiboxCGIBinURL = "http://192.168.5.1/cgi-bin/d3dapi";
|
|
||||||
} else {
|
|
||||||
wifiboxURL = "http://" + window.location.host + "/d3dapi";
|
|
||||||
wifiboxCGIBinURL = "http://" + window.location.host + "/cgi-bin/d3dapi";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!communicateWithWifibox) {
|
|
||||||
sendPrintCommands = false; // 'communicateWithWifibox = false' implies this
|
|
||||||
}
|
|
||||||
console.log("debugMode: " + debugMode);
|
|
||||||
console.log("sendPrintCommands: " + sendPrintCommands);
|
|
||||||
console.log("communicateWithWifibox: " + communicateWithWifibox);
|
|
||||||
console.log("wifiboxIsRemote: " + wifiboxIsRemote);
|
|
||||||
console.log("wifibox URL: " + wifiboxURL);
|
|
||||||
|
|
||||||
initDoodleDrawing();
|
|
||||||
initPreviewRendering();
|
|
||||||
initLayouting();
|
|
||||||
initSidebars();
|
|
||||||
initButtonBehavior();
|
|
||||||
initVerticalShapes();
|
|
||||||
|
|
||||||
thermometer.init($("#thermometerCanvas"), $("#thermometerContainer"));
|
|
||||||
progressbar.init($("#progressbarCanvas"), $("#progressbarCanvasContainer"));
|
|
||||||
|
|
||||||
message.init($("#message"));
|
|
||||||
|
|
||||||
printer.init();
|
|
||||||
$(document).on(Printer.UPDATE,update);
|
|
||||||
|
|
||||||
settingsWindow.init(wifiboxURL,wifiboxCGIBinURL);
|
|
||||||
$(document).on(SettingsWindow.SETTINGS_LOADED, settingsLoaded);
|
|
||||||
|
|
||||||
if(debugMode) {
|
|
||||||
console.log("debug mode is true");
|
|
||||||
$("body").css("overflow", "auto");
|
|
||||||
$("#debug_textArea").css("display", "block");
|
|
||||||
$("#preview_tmp").css("display", "block");
|
|
||||||
|
|
||||||
$("#debug_display").css("display", "block");
|
|
||||||
|
|
||||||
// show and hide the progressguage and thermometer
|
|
||||||
showhideInterval = setInterval(showOrHideThermo, 2500);
|
|
||||||
|
|
||||||
// $("#debugContainer").css("display", "block");
|
|
||||||
|
|
||||||
/* TEMP CODE!! -> artificially populates the startgcode and endgcode textareas in the settings window */
|
|
||||||
// todo remove this temporary code...
|
|
||||||
/*
|
|
||||||
setTimeout(function() {
|
|
||||||
$("#startgcode").text("");
|
|
||||||
$("#startgcode").append("G21 (mm) \n");
|
|
||||||
$("#startgcode").append("G91 (relative) \n");
|
|
||||||
$("#startgcode").append("G28 X0 Y0 Z0 (physical home) \n");
|
|
||||||
$("#startgcode").append("M104 S230 (temperature) \n");
|
|
||||||
$("#startgcode").append("G1 E10 F250 (flow) \n");
|
|
||||||
$("#startgcode").append("G92 X-100 Y-100 Z0 E10 \n");
|
|
||||||
$("#startgcode").append("G1 Z3 F5000 (prevent diagonal line) \n");
|
|
||||||
$("#startgcode").append("G90 (absolute) \n");
|
|
||||||
$("#startgcode").append("M106 (fan on)");
|
|
||||||
console.log("$('#startgcode'): " + $("#startgcode").val());
|
|
||||||
|
|
||||||
$("#endgcode").text("");
|
|
||||||
$("#endgcode").append("G1 X-100 Y-100 F15000 (fast homing) \n");
|
|
||||||
$("#endgcode").append("M107 \n");
|
|
||||||
$("#endgcode").append("M84 (disable axes) \n");
|
|
||||||
console.log("$('#endgcode'): " + $("#endgcode").val());
|
|
||||||
}, 1000);
|
|
||||||
//*/
|
|
||||||
}
|
|
||||||
<<<<<<< .merge_file_HNcA77
|
|
||||||
=======
|
|
||||||
//showhideInterval = setInterval(showOrHideThermo, 2500);
|
|
||||||
>>>>>>> .merge_file_0hlg7g
|
|
||||||
});
|
|
||||||
|
|
||||||
/*var showhideInterval;
|
|
||||||
var showOrHide = false;
|
|
||||||
|
|
||||||
function showOrHideThermo() {
|
|
||||||
console.log("f:showOrHideThermo()");
|
|
||||||
if (showOrHide) {
|
|
||||||
thermometer.hide();
|
|
||||||
progressbar.hide();
|
|
||||||
} else {
|
|
||||||
thermometer.show();
|
|
||||||
progressbar.show();
|
|
||||||
|
|
||||||
}
|
|
||||||
showOrHide = !showOrHide;
|
|
||||||
}*/
|
|
||||||
|
|
||||||
function settingsLoaded() {
|
|
||||||
console.log("settingsLoaded");
|
|
||||||
console.log("autoHeatup: ",settings["printer.heatup.enabled"]);
|
|
||||||
if(settings["printer.heatup.enabled"]) {
|
|
||||||
if(firstTimeSettingsLoaded) {
|
|
||||||
printer.preheat();
|
|
||||||
firstTimeSettingsLoaded = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setDebugText(text) {
|
|
||||||
$("#debug_display").text(text);
|
|
||||||
}
|
|
||||||
@ -1,209 +0,0 @@
|
|||||||
//*
|
|
||||||
var $preview;
|
|
||||||
var preview;
|
|
||||||
var previewCtx;
|
|
||||||
|
|
||||||
$preview = $("#preview");
|
|
||||||
preview = document.getElementById('preview');
|
|
||||||
previewCtx = preview.getContext('2d');
|
|
||||||
|
|
||||||
var svgPathRegExp = /[LM]\d* \d*/ig;
|
|
||||||
var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
|
|
||||||
|
|
||||||
var prevRedrawTime = new Date().getTime();
|
|
||||||
var redrawInterval = 1000 / 30; // ms
|
|
||||||
|
|
||||||
function initPreviewRendering() {
|
|
||||||
console.log("f:initPreviewRendering()");
|
|
||||||
|
|
||||||
layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
|
|
||||||
layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
|
|
||||||
layerOffsetY = preview.height - 1.75 * layerCY;
|
|
||||||
yStep = preview.height / 150;
|
|
||||||
|
|
||||||
redrawPreview();
|
|
||||||
}
|
|
||||||
|
|
||||||
//var numLayers = 100; //50
|
|
||||||
var numLayers = 100; // 100
|
|
||||||
var globalScale = 0.3; // global scale of preview (width preview / width canvas)
|
|
||||||
var globalAlpha = 0.20; // global alpha of preview
|
|
||||||
var scaleY = 0.4; // additional vertical scale per path for 3d effect
|
|
||||||
var viewerScale = 0.65; // additional scale to fit into preview nicely (otherwise is fills out totally)
|
|
||||||
var strokeWidth = 2; //4;
|
|
||||||
//var rStep = Math.PI/40; //Math.PI/40; //
|
|
||||||
var rStep = Math.PI/45; // Math.PI/180; //Math.PI/40; //
|
|
||||||
var yStep = preview.height / 150; // 3; //6;
|
|
||||||
//var svgWidth = 500; // 650 //parseInt($(svg).css("width"));
|
|
||||||
//var svgHeight = 450; //450; //parseInt($(svg).css("height"));
|
|
||||||
var layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
|
|
||||||
var layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
|
|
||||||
var layerOffsetY= preview.height - 1.75 * layerCY; // 330; // previewHeight - 120
|
|
||||||
var prevX = 0;
|
|
||||||
var prevY = 0;
|
|
||||||
var highlight = true; //highlight bottom, middle and top layers
|
|
||||||
|
|
||||||
var linesRaw = "";
|
|
||||||
var debug_redrawSimplification = 6;
|
|
||||||
function redrawPreview(redrawLess) {
|
|
||||||
if (redrawLess == undefined) redrawLess = false;
|
|
||||||
//*/
|
|
||||||
//TODO
|
|
||||||
/*
|
|
||||||
het up/down en twist left/right gaat nu wat traag. Juist dat gaat veel sneller met de toDataURL oplossing
|
|
||||||
Is het een idee om op het einde van een touchevent wel de image versie te renderen maar tijdens het tekenen
|
|
||||||
niet?
|
|
||||||
*/
|
|
||||||
|
|
||||||
if (!redrawLess) {
|
|
||||||
//debug_redrawSimplification = Math.round(_points.length / 65);
|
|
||||||
//*
|
|
||||||
if (_points.length < 100) {
|
|
||||||
debug_redrawSimplification = 6;
|
|
||||||
} else if (_points.length < 250) {
|
|
||||||
debug_redrawSimplification = 7;
|
|
||||||
} else if (_points.length < 400) {
|
|
||||||
debug_redrawSimplification = 8;
|
|
||||||
} else if (_points.length < 550) {
|
|
||||||
debug_redrawSimplification = 9;
|
|
||||||
} else if (_points.length < 700) {
|
|
||||||
debug_redrawSimplification = 10;
|
|
||||||
} else {
|
|
||||||
debug_redrawSimplification = 11;
|
|
||||||
}
|
|
||||||
//*/
|
|
||||||
// console.log("debug_redrawSimplification: " + debug_redrawSimplification);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (_points.length < 2) return;
|
|
||||||
|
|
||||||
var y = 0;
|
|
||||||
var r = 0;
|
|
||||||
|
|
||||||
//preview.width = preview.width;
|
|
||||||
previewCtx.clearRect(0, 0, preview.width, preview.height);
|
|
||||||
previewCtx.lineWidth = strokeWidth;
|
|
||||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
|
||||||
|
|
||||||
for(var i = 0; i < numLayers; i++) {
|
|
||||||
|
|
||||||
|
|
||||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
|
|
||||||
previewCtx.globalAlpha = 1;
|
|
||||||
} else {
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (redrawLess && i%debug_redrawSimplification != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
previewCtx.save();
|
|
||||||
|
|
||||||
previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
|
|
||||||
// previewCtx.setTransform(1, 0, 0, scaleY, layerCX, layerOffsetY+layerCY+y);
|
|
||||||
previewCtx.scale(viewerScale, scaleY * viewerScale);
|
|
||||||
previewCtx.rotate(r);
|
|
||||||
previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
|
||||||
// previewCtx.translate(-layerCX,-layerCY);
|
|
||||||
// previewCtx.translate(-doodleTransform[0] * globalScale, -doodleTransform[1] * globalScale);
|
|
||||||
|
|
||||||
// previewCtx.setTransform(doodleTransform[2], 0, 0, doodleTransform[3], 0, 0);
|
|
||||||
|
|
||||||
var adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[0]);
|
|
||||||
|
|
||||||
previewCtx.beginPath();
|
|
||||||
previewCtx.moveTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
|
||||||
for(var j = 1; j < _points.length; j++) {
|
|
||||||
adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[j])
|
|
||||||
// if (redrawLess && Math.floor(j/debug_redrawSimplification)%2 == 0 ) continue;
|
|
||||||
// if (redrawLess && Math.floor(j/debug_redrawSimplification)%2 == 0 ) continue;
|
|
||||||
if (redrawLess && j%debug_redrawSimplification != 0 ) continue;
|
|
||||||
previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
|
||||||
}
|
|
||||||
previewCtx.stroke();
|
|
||||||
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
previewCtx.restore();
|
|
||||||
}
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
function centeredAndScaledDoodlePoint(p) {
|
|
||||||
var obj = { x: 0, y: 0};
|
|
||||||
|
|
||||||
obj.x = (p[0] - ((doodleBounds[2] - doodleBounds[0])/2)) * (globalScale * doodleTransform[2]);
|
|
||||||
obj.y = (p[1] - ((doodleBounds[3] - doodleBounds[1])/2)) * (globalScale * doodleTransform[3]);
|
|
||||||
// obj.x = (p[0] - (doodleBounds[2] - doodleBounds[0])) * (globalScale * doodleTransform[2]);
|
|
||||||
// obj.y = (p[1] - (doodleBounds[3] - doodleBounds[1])) * (globalScale * doodleTransform[3]);
|
|
||||||
// obj.x = (p[0] - doodleTransform[0]) * (globalScale * doodleTransform[2]);
|
|
||||||
// obj.y = (p[1] - doodleTransform[1]) * (globalScale * doodleTransform[3]);
|
|
||||||
|
|
||||||
return obj;
|
|
||||||
}
|
|
||||||
|
|
||||||
//*
|
|
||||||
var updatePrevX = -1;
|
|
||||||
var updatePrevY = -1;
|
|
||||||
function updatePreview(_x, _y, redrawLess) {
|
|
||||||
if (redrawLess == undefined) redrawLess = false;
|
|
||||||
redrawLess = false;
|
|
||||||
|
|
||||||
if (_points.length < 2) return;
|
|
||||||
if (updatePrevX == -1 || updatePrevY == -1) {
|
|
||||||
updatePrevX = _x;
|
|
||||||
updatePrevY = _y;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// if (_points.length < 16 && Math.sqrt(Math.pow((updatePrevX - _x), 2) + Math.pow((updatePrevY - _y), 2)) < 8) return;
|
|
||||||
|
|
||||||
var y = 0;
|
|
||||||
var r = 0;
|
|
||||||
|
|
||||||
previewCtx.lineWidth = strokeWidth;
|
|
||||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
|
||||||
|
|
||||||
for(var i = 0; i < numLayers; i++) {
|
|
||||||
|
|
||||||
|
|
||||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
|
|
||||||
previewCtx.globalAlpha = 1;
|
|
||||||
} else {
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (redrawLess && i%debug_redrawSimplification != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
previewCtx.save();
|
|
||||||
|
|
||||||
previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
|
|
||||||
previewCtx.scale(viewerScale, scaleY * viewerScale);
|
|
||||||
previewCtx.rotate(r);
|
|
||||||
previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
|
||||||
|
|
||||||
|
|
||||||
previewCtx.beginPath();
|
|
||||||
var prevPoint = centeredAndScaledDoodlePoint([updatePrevX, updatePrevY]);
|
|
||||||
previewCtx.moveTo(prevPoint.x, prevPoint.y);
|
|
||||||
var adjustedDoodlePoint = centeredAndScaledDoodlePoint([_x, _y]);
|
|
||||||
previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
|
||||||
previewCtx.stroke();
|
|
||||||
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
previewCtx.restore();
|
|
||||||
}
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
updatePrevX = _x;
|
|
||||||
updatePrevY = _y;
|
|
||||||
|
|
||||||
}
|
|
||||||
//*/
|
|
||||||
@ -1,355 +0,0 @@
|
|||||||
//*
|
|
||||||
var $preview;
|
|
||||||
var preview;
|
|
||||||
var previewCtx;
|
|
||||||
|
|
||||||
var preview_tmp;
|
|
||||||
var previewCtx_tmp;
|
|
||||||
|
|
||||||
var previewDefaults = {
|
|
||||||
rotation: Math.PI/90,
|
|
||||||
numLayers: 10
|
|
||||||
}
|
|
||||||
|
|
||||||
var svgPathRegExp = /[LM]\d* \d*/ig;
|
|
||||||
var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
|
|
||||||
|
|
||||||
var prevRedrawTime = new Date().getTime();
|
|
||||||
var redrawInterval = 1000 / 30; // ms
|
|
||||||
|
|
||||||
function initPreviewRendering() {
|
|
||||||
console.log("f:initPreviewRendering()");
|
|
||||||
|
|
||||||
$preview = $("#preview");
|
|
||||||
preview = $preview[0];
|
|
||||||
previewCtx = preview.getContext('2d');
|
|
||||||
|
|
||||||
// DEBUG --> mbt preview_tmp (voor de toImageData truc)
|
|
||||||
var _ratio = preview.width / canvas.width;
|
|
||||||
preview_tmp = document.getElementById('preview_tmp');
|
|
||||||
preview_tmp.width = preview.width;
|
|
||||||
preview_tmp.height = canvas.height * _ratio;
|
|
||||||
$("#preview_tmp").css("top", -preview_tmp.height);
|
|
||||||
|
|
||||||
previewCtx_tmp = preview_tmp.getContext('2d');
|
|
||||||
|
|
||||||
calcPreviewCanvasProperties();
|
|
||||||
redrawPreview();
|
|
||||||
}
|
|
||||||
|
|
||||||
function calcPreviewCanvasProperties() {
|
|
||||||
console.log("f:calcPreviewCanvasProperties()");
|
|
||||||
|
|
||||||
globalScale = preview.width / canvasWidth;
|
|
||||||
layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
|
|
||||||
layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
|
|
||||||
// layerOffsetY = preview.height - 1.75 * layerCY;
|
|
||||||
layerOffsetY = preview.height * (1 - previewVerticalPadding.bottom);
|
|
||||||
yStep = (preview.height - (preview.height * (previewVerticalPadding.top + previewVerticalPadding.bottom))) / maxNumLayers;
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO (perhaps) : make the twist limit dynamic, depending on what's printable (w.r.t. overlapping)
|
|
||||||
var previewRotationLimit = Math.PI / 30; // rough estimate
|
|
||||||
|
|
||||||
var numLayers = previewDefaults.numLayers; // current number of preview layers
|
|
||||||
var maxNumLayers= 100; // maximum number of preview layers
|
|
||||||
var minNumLayers= 2; // minimum number of preview layers
|
|
||||||
var globalScale = 0.3; // global scale of preview (width preview / width canvas)
|
|
||||||
var globalAlpha = 0.20; // global alpha of preview
|
|
||||||
var scaleY = 0.4; // additional vertical scale per path for 3d effect
|
|
||||||
var viewerScale = 0.65; // additional scale to fit into preview nicely (otherwise is fills out totally)
|
|
||||||
var previewVerticalPadding = { "top" : .15, "bottom" : 0.12 }; // %
|
|
||||||
var strokeWidth = 2; //4;
|
|
||||||
//var rStep = Math.PI/40; //Math.PI/40; //
|
|
||||||
var rStep = previewDefaults.rotation; // Math.PI/180; //Math.PI/40; //
|
|
||||||
var yStep;// = preview.height / 150; // 3; //6;
|
|
||||||
//var svgWidth = 500; // 650 //parseInt($(svg).css("width"));
|
|
||||||
//var svgHeight = 450; //450; //parseInt($(svg).css("height"));
|
|
||||||
var layerCX, layerCY;
|
|
||||||
//var layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
|
|
||||||
//var layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
|
|
||||||
var layerOffsetY; //= preview.height - 1.75 * layerCY; // 330; // previewHeight - 120
|
|
||||||
var prevX = 0;
|
|
||||||
var prevY = 0;
|
|
||||||
var highlight = true; //highlight bottom, middle and top layers
|
|
||||||
|
|
||||||
var linesRaw = "";
|
|
||||||
var debug_redrawSimplification = 6;
|
|
||||||
function redrawPreview(redrawLess) {
|
|
||||||
if (redrawLess == undefined) redrawLess = false;
|
|
||||||
|
|
||||||
if (_points.length < 2) return;
|
|
||||||
|
|
||||||
if (!redrawLess) {
|
|
||||||
//debug_redrawSimplification = Math.round(_points.length / 65);
|
|
||||||
//*
|
|
||||||
if (_points.length < 100) {
|
|
||||||
debug_redrawSimplification = 6;
|
|
||||||
} else if (_points.length < 250) {
|
|
||||||
debug_redrawSimplification = 7;
|
|
||||||
} else if (_points.length < 400) {
|
|
||||||
debug_redrawSimplification = 8;
|
|
||||||
} else if (_points.length < 550) {
|
|
||||||
debug_redrawSimplification = 9;
|
|
||||||
} else if (_points.length < 700) {
|
|
||||||
debug_redrawSimplification = 10;
|
|
||||||
} else {
|
|
||||||
debug_redrawSimplification = 11;
|
|
||||||
}
|
|
||||||
//*/
|
|
||||||
// console.log("debug_redrawSimplification: " + debug_redrawSimplification);
|
|
||||||
}
|
|
||||||
|
|
||||||
var y = 0;
|
|
||||||
var r = 0;
|
|
||||||
|
|
||||||
//preview.width = preview.width;
|
|
||||||
previewCtx.clearRect(0, 0, preview.width, preview.height);
|
|
||||||
previewCtx.lineWidth = strokeWidth;
|
|
||||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
|
||||||
|
|
||||||
for(var i = 0; i < numLayers; i++) {
|
|
||||||
|
|
||||||
var verticalScaleFactor = scaleFunction(i / maxNumLayers);
|
|
||||||
|
|
||||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
|
|
||||||
previewCtx.globalAlpha = 1;
|
|
||||||
} else {
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (redrawLess && i%debug_redrawSimplification != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
previewCtx.save();
|
|
||||||
|
|
||||||
// previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
|
|
||||||
previewCtx.translate(layerCX, layerOffsetY + y);
|
|
||||||
// previewCtx.setTransform(1, 0, 0, scaleY, layerCX, layerOffsetY+layerCY+y);
|
|
||||||
previewCtx.scale(viewerScale * verticalScaleFactor, scaleY * viewerScale * verticalScaleFactor);
|
|
||||||
previewCtx.rotate(r);
|
|
||||||
previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
|
||||||
|
|
||||||
var adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[0]);
|
|
||||||
|
|
||||||
previewCtx.beginPath();
|
|
||||||
previewCtx.moveTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
|
||||||
for(var j = 1; j < _points.length; j++) {
|
|
||||||
adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[j])
|
|
||||||
if (redrawLess && j%debug_redrawSimplification != 0 ) continue;
|
|
||||||
previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
|
||||||
}
|
|
||||||
previewCtx.stroke();
|
|
||||||
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
previewCtx.restore();
|
|
||||||
}
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderToImageDataPreview() {
|
|
||||||
console.log("f:renderToImageDataPreview()");
|
|
||||||
|
|
||||||
if (_points.length < 2) return;
|
|
||||||
|
|
||||||
//*
|
|
||||||
// the first step
|
|
||||||
previewCtx_tmp.clearRect(0, 0, preview.width, preview.height);
|
|
||||||
previewCtx_tmp.lineWidth = strokeWidth;
|
|
||||||
previewCtx_tmp.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
|
||||||
|
|
||||||
previewCtx_tmp.save();
|
|
||||||
previewCtx_tmp.translate(layerCX, layerCY);
|
|
||||||
previewCtx_tmp.scale(viewerScale, viewerScale);
|
|
||||||
previewCtx_tmp.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
|
||||||
|
|
||||||
var adjustedDoodlePt = centeredAndScaledDoodlePoint(_points[0]);
|
|
||||||
|
|
||||||
previewCtx_tmp.beginPath();
|
|
||||||
previewCtx_tmp.moveTo(adjustedDoodlePt.x, adjustedDoodlePt.y);
|
|
||||||
for(var j = 1; j < _points.length; j++) {
|
|
||||||
adjustedDoodlePt = centeredAndScaledDoodlePoint(_points[j])
|
|
||||||
previewCtx_tmp.lineTo(adjustedDoodlePt.x, adjustedDoodlePt.y);
|
|
||||||
}
|
|
||||||
previewCtx_tmp.stroke();
|
|
||||||
previewCtx_tmp.closePath();
|
|
||||||
previewCtx_tmp.restore();
|
|
||||||
//*/
|
|
||||||
|
|
||||||
// var saved_rect = previewCtx_tmp.getImageData(0, 0, layerCX*2, layerCY*2);
|
|
||||||
var saved_rect_todataurl = preview_tmp.toDataURL();
|
|
||||||
doodleImageCapture = new Image();
|
|
||||||
doodleImageCapture.onload = function() {
|
|
||||||
|
|
||||||
previewCtx.clearRect(0, 0, preview.width, preview.height);
|
|
||||||
previewCtx.lineWidth = strokeWidth;
|
|
||||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
|
||||||
|
|
||||||
var y = 0;
|
|
||||||
var r = 0;
|
|
||||||
|
|
||||||
for(var i=0;i<numLayers;i++) {
|
|
||||||
|
|
||||||
var verticalScaleFactor = scaleFunction(i / maxNumLayers);
|
|
||||||
|
|
||||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1){
|
|
||||||
previewCtx.globalAlpha = 1;
|
|
||||||
} else {
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
previewCtx.save();
|
|
||||||
|
|
||||||
<<<<<<< HEAD
|
|
||||||
previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
|
|
||||||
// previewCtx.scale(1, scaleY)
|
|
||||||
previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor)
|
|
||||||
=======
|
|
||||||
// previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
|
|
||||||
previewCtx.translate(layerCX,layerOffsetY+y);
|
|
||||||
previewCtx.scale(1, scaleY)
|
|
||||||
>>>>>>> new_layouting_approach
|
|
||||||
previewCtx.rotate(r);
|
|
||||||
previewCtx.translate(-layerCX,-layerCY);
|
|
||||||
|
|
||||||
previewCtx.drawImage(doodleImageCapture, 0, 0);
|
|
||||||
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
previewCtx.restore();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
doodleImageCapture.src = saved_rect_todataurl;
|
|
||||||
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
// called by the move up/down or twist left/right buttons
|
|
||||||
// it is assumed that the preview has been rendered to an Image object, which will be used to draw the preview with (much better performance)
|
|
||||||
function redrawRenderedPreview(redrawLess) {
|
|
||||||
if (redrawLess == undefined) redrawLess = false;
|
|
||||||
console.log("f:redrawRenderedPreview()");
|
|
||||||
|
|
||||||
previewCtx.clearRect(0, 0, preview.width, preview.height);
|
|
||||||
previewCtx.lineWidth = strokeWidth;
|
|
||||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
|
||||||
|
|
||||||
var y = 0;
|
|
||||||
var r = 0;
|
|
||||||
|
|
||||||
for(var i = 0; i < numLayers; i++) {
|
|
||||||
|
|
||||||
var verticalScaleFactor = scaleFunction(i / maxNumLayers);
|
|
||||||
|
|
||||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1){
|
|
||||||
previewCtx.globalAlpha = 1;
|
|
||||||
} else {
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (redrawLess && i%2 != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
previewCtx.save();
|
|
||||||
|
|
||||||
<<<<<<< HEAD
|
|
||||||
previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
|
|
||||||
// previewCtx.scale(1, scaleY)
|
|
||||||
previewCtx.scale(verticalScaleFactor, scaleY * verticalScaleFactor);
|
|
||||||
=======
|
|
||||||
previewCtx.translate(layerCX,layerOffsetY+y);
|
|
||||||
// previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
|
|
||||||
previewCtx.scale(1, scaleY)
|
|
||||||
>>>>>>> new_layouting_approach
|
|
||||||
previewCtx.rotate(r);
|
|
||||||
previewCtx.translate(-layerCX,-layerCY);
|
|
||||||
|
|
||||||
previewCtx.drawImage(doodleImageCapture, 0, 0);
|
|
||||||
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
previewCtx.restore();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function centeredAndScaledDoodlePoint(p) {
|
|
||||||
var obj = { x: 0, y: 0};
|
|
||||||
|
|
||||||
obj.x = (p[0] - ((doodleBounds[2] - doodleBounds[0])/2)) * (globalScale * doodleTransform[2]);
|
|
||||||
obj.y = (p[1] - ((doodleBounds[3] - doodleBounds[1])/2)) * (globalScale * doodleTransform[3]);
|
|
||||||
// obj.x = (p[0] - (doodleBounds[2] - doodleBounds[0])) * (globalScale * doodleTransform[2]);
|
|
||||||
// obj.y = (p[1] - (doodleBounds[3] - doodleBounds[1])) * (globalScale * doodleTransform[3]);
|
|
||||||
// obj.x = (p[0] - doodleTransform[0]) * (globalScale * doodleTransform[2]);
|
|
||||||
// obj.y = (p[1] - doodleTransform[1]) * (globalScale * doodleTransform[3]);
|
|
||||||
|
|
||||||
return obj;
|
|
||||||
}
|
|
||||||
|
|
||||||
//*
|
|
||||||
var updatePrevX = -1;
|
|
||||||
var updatePrevY = -1;
|
|
||||||
function updatePreview(_x, _y, redrawLess) {
|
|
||||||
if (redrawLess == undefined) redrawLess = false;
|
|
||||||
redrawLess = false;
|
|
||||||
|
|
||||||
if (_points.length < 2) return;
|
|
||||||
if (updatePrevX == -1 || updatePrevY == -1) {
|
|
||||||
updatePrevX = _x;
|
|
||||||
updatePrevY = _y;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// if (_points.length < 16 && Math.sqrt(Math.pow((updatePrevX - _x), 2) + Math.pow((updatePrevY - _y), 2)) < 8) return;
|
|
||||||
|
|
||||||
var y = 0;
|
|
||||||
var r = 0;
|
|
||||||
|
|
||||||
previewCtx.lineWidth = strokeWidth;
|
|
||||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
|
||||||
|
|
||||||
for(var i = 0; i < numLayers; i++) {
|
|
||||||
|
|
||||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
|
|
||||||
previewCtx.globalAlpha = 1;
|
|
||||||
} else {
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (redrawLess && i%debug_redrawSimplification != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
previewCtx.save();
|
|
||||||
|
|
||||||
// previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
|
|
||||||
previewCtx.translate(layerCX, layerOffsetY + y);
|
|
||||||
previewCtx.scale(viewerScale, scaleY * viewerScale);
|
|
||||||
previewCtx.rotate(r);
|
|
||||||
previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
|
||||||
|
|
||||||
|
|
||||||
previewCtx.beginPath();
|
|
||||||
var prevPoint = centeredAndScaledDoodlePoint([updatePrevX, updatePrevY]);
|
|
||||||
previewCtx.moveTo(prevPoint.x, prevPoint.y);
|
|
||||||
var adjustedDoodlePoint = centeredAndScaledDoodlePoint([_x, _y]);
|
|
||||||
previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
|
||||||
previewCtx.stroke();
|
|
||||||
|
|
||||||
y -= yStep;
|
|
||||||
r += rStep;
|
|
||||||
previewCtx.restore();
|
|
||||||
}
|
|
||||||
previewCtx.globalAlpha = globalAlpha;
|
|
||||||
updatePrevX = _x;
|
|
||||||
updatePrevY = _y;
|
|
||||||
|
|
||||||
}
|
|
||||||
//*/
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
/*
|
|
||||||
* This file is part of the Doodle3D project (http://doodle3d.com).
|
|
||||||
*
|
|
||||||
* Copyright (c) 2013, Doodle3D
|
|
||||||
* This software is licensed under the terms of the GNU GPL v2 or later.
|
|
||||||
* See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
|
|
||||||
*/
|
|
||||||
|
|
||||||
var keyboardShortcutsEnabled = true;
|
|
||||||
|
|
||||||
function initKeyboard() {
|
|
||||||
|
|
||||||
$(document).keypress(function(event) {
|
|
||||||
|
|
||||||
if (!keyboardShortcutsEnabled) return;
|
|
||||||
|
|
||||||
var ch = String.fromCharCode(event.which);
|
|
||||||
|
|
||||||
switch (ch) {
|
|
||||||
case 'c': clearDoodle(); break;
|
|
||||||
case 'n': clearDoodle(); break;
|
|
||||||
case 'p': print(); break;
|
|
||||||
case 'u': oopsUndo(); break;
|
|
||||||
case 'e': settingsWindow.downloadGcode(); break;
|
|
||||||
case 'q': stopPrint(); break;
|
|
||||||
case ',': openSettingsWindow(); break;
|
|
||||||
case 'C': drawCircle(250,180,80,64); break; //x,y,r,res
|
|
||||||
case 'T': drawCircle(250,180,80,3); break; //triangle
|
|
||||||
case 'X': drawCircle(250,180,80,6); break; //hexagon
|
|
||||||
case 'h': previewUp(true); break;
|
|
||||||
case 'H': previewDown(true); break;
|
|
||||||
case 's': saveSketch(); break;
|
|
||||||
case 'L': nextDoodle(); break;
|
|
||||||
case 'l': prevDoodle(); break;
|
|
||||||
case '[': previewTwistLeft(); break;
|
|
||||||
case ']': previewTwistRight(); break;
|
|
||||||
case '\'': resetTwist(); break;
|
|
||||||
default: console.log("Key: '" + ch + "' (" + event.which + ")");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,767 +0,0 @@
|
|||||||
/*
|
|
||||||
* This file is part of the Doodle3D project (http://doodle3d.com).
|
|
||||||
*
|
|
||||||
* Copyright (c) 2013, Doodle3D
|
|
||||||
* This software is licensed under the terms of the GNU GPL v2 or later.
|
|
||||||
* See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
|
|
||||||
*/
|
|
||||||
|
|
||||||
//these settings are defined in the firmware (conf_defaults.lua) and will be initialized in loadSettings()
|
|
||||||
var settings = { }
|
|
||||||
|
|
||||||
//wrapper to prevent scoping issues in showSettings()
|
|
||||||
function openSettingsWindow() {
|
|
||||||
settingsWindow.showSettings();
|
|
||||||
}
|
|
||||||
|
|
||||||
function SettingsWindow() {
|
|
||||||
this.wifiboxURL;
|
|
||||||
this.wifiboxCGIBinURL
|
|
||||||
this.window;
|
|
||||||
this.btnOK;
|
|
||||||
this.form;
|
|
||||||
this.timeoutTime = 3000;
|
|
||||||
this.saveSettingsTimeoutTime = 8000;
|
|
||||||
this.retryDelay = 2000; // retry setTimout delay
|
|
||||||
this.retryRetrieveNetworkStatusDelayTime = 1000;// retry setTimout delay
|
|
||||||
|
|
||||||
this.retryLoadSettingsDelay; // retry setTimout instance
|
|
||||||
this.retrySaveSettingsDelay; // retry setTimout instance
|
|
||||||
this.retryResetSettingsDelay // retry setTimout instance
|
|
||||||
this.retryRetrieveNetworkStatusDelay;// retry setTimout instance
|
|
||||||
|
|
||||||
this.apFieldSet;
|
|
||||||
this.clientFieldSet;
|
|
||||||
this.networks;
|
|
||||||
this.currentNetwork; // the ssid of the network the box is on
|
|
||||||
this.selectedNetwork; // the ssid of the selected network in the client mode settings
|
|
||||||
this.currentLocalIP = "";
|
|
||||||
this.clientModeState = SettingsWindow.NOT_CONNECTED;
|
|
||||||
this.currentAP;
|
|
||||||
this.apModeState = SettingsWindow.NO_AP;
|
|
||||||
|
|
||||||
// after switching wifi network or creating a access point we delay the status retrieval
|
|
||||||
// because the webserver needs time to switch
|
|
||||||
this.retrieveNetworkStatusDelay; // setTimout delay
|
|
||||||
this.retrieveNetworkStatusDelayTime = 1000;
|
|
||||||
|
|
||||||
// Events
|
|
||||||
SettingsWindow.SETTINGS_LOADED = "settingsLoaded";
|
|
||||||
|
|
||||||
// network client mode states
|
|
||||||
SettingsWindow.NOT_CONNECTED = "not connected"; // also used as first item in networks list
|
|
||||||
SettingsWindow.CONNECTED = "connected";
|
|
||||||
SettingsWindow.CONNECTING = "connecting";
|
|
||||||
SettingsWindow.CONNECTING_FAILED = "connecting failed"
|
|
||||||
|
|
||||||
// network access point mode states
|
|
||||||
SettingsWindow.NO_AP = "no ap";
|
|
||||||
SettingsWindow.AP = "ap";
|
|
||||||
SettingsWindow.CREATING_AP = "creating ap";
|
|
||||||
|
|
||||||
SettingsWindow.API_CONNECTING_FAILED = -1
|
|
||||||
SettingsWindow.API_NOT_CONNECTED = 0
|
|
||||||
SettingsWindow.API_CONNECTING = 1
|
|
||||||
SettingsWindow.API_CONNECTED = 2
|
|
||||||
SettingsWindow.API_CREATING = 3
|
|
||||||
SettingsWindow.API_CREATED = 4
|
|
||||||
|
|
||||||
// network mode
|
|
||||||
SettingsWindow.NETWORK_MODE_NEITHER = "neither";
|
|
||||||
SettingsWindow.NETWORK_MODE_CLIENT = "clientMode";
|
|
||||||
SettingsWindow.NETWORK_MODE_ACCESS_POINT = "accessPointMode";
|
|
||||||
|
|
||||||
this.networkMode = SettingsWindow.NETWORK_MODE_NEITHER;
|
|
||||||
|
|
||||||
this.updatePanel = new UpdatePanel();
|
|
||||||
this.printerPanel = new PrinterPanel();
|
|
||||||
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
this.init = function(wifiboxURL,wifiboxCGIBinURL) {
|
|
||||||
this.wifiboxURL = wifiboxURL;
|
|
||||||
this.wifiboxCGIBinURL = wifiboxCGIBinURL;
|
|
||||||
|
|
||||||
this.window = $("#settings");
|
|
||||||
this.btnOK = this.window.find(".btnOK");
|
|
||||||
enableButton(this.btnOK,this.submitwindow);
|
|
||||||
|
|
||||||
this.window.find(".settingsContainer").load("settings.html", function() {
|
|
||||||
console.log("Settings:finished loading settings.html, now loading settings...");
|
|
||||||
|
|
||||||
self.form = self.window.find("form");
|
|
||||||
self.form.submit(function (e) { self.submitwindow(e) });
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: self.wifiboxURL + "/printer/listall",
|
|
||||||
dataType: 'json',
|
|
||||||
timeout: self.timeoutTime,
|
|
||||||
success: function(response) {
|
|
||||||
console.log("Settings:printer/listall response: ",response.data.printers);
|
|
||||||
|
|
||||||
$.each(response.data.printers, function(key, value) {
|
|
||||||
// console.log(key,value);
|
|
||||||
$('#printerType').append($('<option>').text(value).attr('value', key));
|
|
||||||
});
|
|
||||||
|
|
||||||
self.loadSettings();
|
|
||||||
|
|
||||||
var btnAP = self.form.find("label[for='ap']");
|
|
||||||
var btnClient = self.form.find("label[for='client']");
|
|
||||||
var btnRefresh = self.form.find("#refreshNetworks");
|
|
||||||
var btnConnect = self.form.find("#connectToNetwork");
|
|
||||||
var btnCreate = self.form.find("#createAP");
|
|
||||||
var networkSelector = self.form.find("#network");
|
|
||||||
self.apFieldSet = self.form.find("#apSettings");
|
|
||||||
self.clientFieldSet = self.form.find("#clientSettings");
|
|
||||||
self.btnRestoreSettings = self.form.find("#restoreSettings");
|
|
||||||
|
|
||||||
btnAP.on('touchstart mousedown',self.showAPSettings);
|
|
||||||
btnClient.on('touchstart mousedown',self.showClientSettings);
|
|
||||||
btnRefresh.on('touchstart mousedown',self.refreshNetworks);
|
|
||||||
btnConnect.on('touchstart mousedown',self.connectToNetwork);
|
|
||||||
btnCreate.on('touchstart mousedown',self.createAP);
|
|
||||||
networkSelector.change(self.networkSelectorChanged);
|
|
||||||
self.btnRestoreSettings.on('touchstart mousedown',self.resetSettings);
|
|
||||||
|
|
||||||
// update panel
|
|
||||||
var $updatePanelElement = self.form.find("#updatePanel");
|
|
||||||
self.updatePanel.init(wifiboxURL,$updatePanelElement);
|
|
||||||
|
|
||||||
// printer panel
|
|
||||||
var $printerPanelElement = self.form.find("#printerPanel");
|
|
||||||
self.printerPanel.init(wifiboxURL,$printerPanelElement);
|
|
||||||
self.printerPanel.fillForm = self.fillForm;
|
|
||||||
}
|
|
||||||
}).fail(function() {
|
|
||||||
console.log("FATAL ERROR: Settings:printer/listall failed");
|
|
||||||
});
|
|
||||||
}); //this.window.find
|
|
||||||
|
|
||||||
} //this.init
|
|
||||||
|
|
||||||
this.submitwindow = function(e) {
|
|
||||||
disableButton(self.btnOK,self.submitwindow);
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
self.saveSettings(self.readForm(),function(success){
|
|
||||||
if(success) {
|
|
||||||
self.hideSettings(function() {
|
|
||||||
enableButton(self.btnOK,self.submitwindow);
|
|
||||||
});
|
|
||||||
self.signin();
|
|
||||||
} else {
|
|
||||||
enableButton(self.btnOK,self.submitwindow);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
clearTimeout(self.retryRetrieveNetworkStatusDelay);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.showSettings = function() {
|
|
||||||
keyboardShortcutsEnabled = false;
|
|
||||||
this.loadSettings(function() { // reload settings
|
|
||||||
$("#contentOverlay").fadeIn(175, function() {
|
|
||||||
document.body.removeEventListener('touchmove',prevent,false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.hideSettings = function(complete) {
|
|
||||||
keyboardShortcutsEnabled = true;
|
|
||||||
$("#contentOverlay").fadeOut(175, function() {
|
|
||||||
document.body.addEventListener('touchmove',prevent,false);
|
|
||||||
// self.window.css("display","none");
|
|
||||||
complete();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.loadSettings = function(complete) {
|
|
||||||
if (!communicateWithWifibox) {
|
|
||||||
console.log(" communicateWithWifibox is false: settings aren't being loaded from wifibox...")
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
console.log("Settings:loadSettings() >> getting new data...");
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: this.wifiboxURL + "/config/all",
|
|
||||||
dataType: 'json',
|
|
||||||
timeout: this.timeoutTime,
|
|
||||||
success: function(response){
|
|
||||||
console.log("Settings:loadSettings response: ",response);
|
|
||||||
settings = response.data;
|
|
||||||
console.log(" settings: ",settings);
|
|
||||||
self.fillForm(settings);
|
|
||||||
$(document).trigger(SettingsWindow.SETTINGS_LOADED);
|
|
||||||
if(complete) complete();
|
|
||||||
}
|
|
||||||
}).fail(function() {
|
|
||||||
console.log("Settings:loadSettings: failed");
|
|
||||||
clearTimeout(self.retryLoadSettingsDelay);
|
|
||||||
self.retryLoadSettingsDelay = setTimeout(function() { self.loadSettings() },self.retryDelay); // retry after delay
|
|
||||||
});
|
|
||||||
|
|
||||||
this.refreshNetworks();
|
|
||||||
this.retrieveNetworkStatus(false);
|
|
||||||
}
|
|
||||||
this.fillForm = function(settings,form) {
|
|
||||||
if(!form) form = this.form; // if no form specified, fill whole form
|
|
||||||
|
|
||||||
//fill form with loaded settings
|
|
||||||
var selects = form.find("select");
|
|
||||||
selects.each( function(index,element) {
|
|
||||||
var element = $(element);
|
|
||||||
element.val(settings[element.attr('name')]);
|
|
||||||
});
|
|
||||||
var inputs = form.find("input");
|
|
||||||
inputs.each( function(index,element) {
|
|
||||||
var element = $(element);
|
|
||||||
//console.log("printer setting input: ",index,element.attr("type"),element.attr('name')); //,element);
|
|
||||||
switch(element.attr("type")) {
|
|
||||||
case "text":
|
|
||||||
case "number":
|
|
||||||
element.val(settings[element.attr('name')]);
|
|
||||||
break;
|
|
||||||
case "checkbox":
|
|
||||||
element.prop('checked', settings[element.attr('name')]);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
var textareas = form.find("textarea");
|
|
||||||
textareas.each( function(index,element) {
|
|
||||||
var element = $(element);
|
|
||||||
var value = settings[element.attr('name')];
|
|
||||||
element.val(value);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.saveSettings = function(newSettings,complete) {
|
|
||||||
settings = newSettings; // store new settings in global settings
|
|
||||||
if (communicateWithWifibox) {
|
|
||||||
$.ajax({
|
|
||||||
url: self.wifiboxCGIBinURL + "/config",
|
|
||||||
type: "POST",
|
|
||||||
data: newSettings,
|
|
||||||
dataType: 'json',
|
|
||||||
timeout: self.saveSettingsTimeoutTime,
|
|
||||||
success: function(response){
|
|
||||||
console.log("Settings:saveSettings response: ",response);
|
|
||||||
if(response.status == "error") {
|
|
||||||
clearTimeout(self.retrySaveSettingsDelay);
|
|
||||||
self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings(settings,complete) },self.retryDelay); // retry after delay
|
|
||||||
} else {
|
|
||||||
var data = response.data;
|
|
||||||
var validation = data.validation;
|
|
||||||
self.clearValidationErrors();
|
|
||||||
var validated = true;
|
|
||||||
$.each(validation, function(key, val) {
|
|
||||||
if (val != "ok") {
|
|
||||||
console.log("ERROR: setting '" + key + "' not successfully set. Message: " + val);
|
|
||||||
self.displayValidationError(key,val);
|
|
||||||
validated = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
settings.substituted_ssid = data.substituted_ssid;
|
|
||||||
if(complete) complete(validated);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).fail(function() {
|
|
||||||
console.log("Settings:saveSettings: failed");
|
|
||||||
clearTimeout(self.retrySaveSettingsDelay);
|
|
||||||
self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings(settings,complete) },self.retryDelay); // retry after delay
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.resetSettings = function() {
|
|
||||||
console.log("resetSettings");
|
|
||||||
//$("#restoreSettings").addClass("disabled");
|
|
||||||
self.btnRestoreSettings.attr("disabled", true);
|
|
||||||
|
|
||||||
//console.log(" self.wifiboxURL: ",self.wifiboxURL);
|
|
||||||
|
|
||||||
if (communicateWithWifibox) {
|
|
||||||
$.ajax({
|
|
||||||
url: self.wifiboxCGIBinURL + "/config/resetall",
|
|
||||||
type: "POST",
|
|
||||||
dataType: 'json',
|
|
||||||
timeout: this.timeoutTime,
|
|
||||||
success: function(response){
|
|
||||||
console.log("Settings:resetSettings response: ",response);
|
|
||||||
if(response.status == "error") {
|
|
||||||
clearTimeout(self.retryResetSettingsDelay);
|
|
||||||
self.retryResetSettingsDelay = setTimeout(function() { self.resetSettings() },self.retryDelay); // retry after delay
|
|
||||||
} else {
|
|
||||||
settings = response.data;
|
|
||||||
console.log(" settings: ",settings);
|
|
||||||
self.fillForm(settings);
|
|
||||||
$(document).trigger(SettingsWindow.SETTINGS_LOADED);
|
|
||||||
|
|
||||||
self.btnRestoreSettings.removeAttr("disabled");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).fail(function() {
|
|
||||||
console.log("Settings:resetSettings: failed");
|
|
||||||
clearTimeout(self.retryResetSettingsDelay);
|
|
||||||
self.retryResetSettingsDelay = setTimeout(function() { self.resetSettings() },self.retryDelay); // retry after delay
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.displayValidationError = function(key,msg) {
|
|
||||||
var formElement = self.form.find("[name|='"+key+"']");
|
|
||||||
formElement.addClass("error");
|
|
||||||
var errorMsg = "<p class='errorMsg'>"+msg+"</p>"
|
|
||||||
formElement.after(errorMsg);
|
|
||||||
}
|
|
||||||
this.clearValidationErrors = function() {
|
|
||||||
self.form.find(".errorMsg").remove();
|
|
||||||
self.form.find(".error").removeClass("error");
|
|
||||||
}
|
|
||||||
|
|
||||||
this.readForm = function() {
|
|
||||||
//console.log("SettingsWindow:readForm");
|
|
||||||
var settings = {};
|
|
||||||
var selects = self.form.find("select");
|
|
||||||
selects.each( function(index,element) {
|
|
||||||
var element = $(element);
|
|
||||||
var fieldName = element.attr('name');
|
|
||||||
if(element.attr('name') != "") {
|
|
||||||
settings[element.attr('name')] = element.val();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
var inputs = self.form.find("input");
|
|
||||||
inputs.each( function(index,element) {
|
|
||||||
var element = $(element);
|
|
||||||
if(element.attr('name') != "") {
|
|
||||||
switch(element.attr("type")) {
|
|
||||||
case "text":
|
|
||||||
case "number":
|
|
||||||
settings[element.attr('name')] = element.val();
|
|
||||||
break;
|
|
||||||
case "checkbox":
|
|
||||||
settings[element.attr('name')] = element.prop('checked')
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
var textareas = self.form.find("textarea");
|
|
||||||
textareas.each( function(index,element) {
|
|
||||||
var element = $(element);
|
|
||||||
settings[element.attr('name')] = element.val();
|
|
||||||
});
|
|
||||||
//console.log(settings);
|
|
||||||
return settings;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.signin = function() {
|
|
||||||
$.ajax({
|
|
||||||
url: self.wifiboxCGIBinURL + "/network/signin",
|
|
||||||
type: "GET",
|
|
||||||
dataType: 'json',
|
|
||||||
timeout: self.timeoutTime,
|
|
||||||
success: function(response){
|
|
||||||
console.log("Settings:signin response: ",response);
|
|
||||||
}
|
|
||||||
}).fail(function() {
|
|
||||||
console.log("Settings:signin: failed");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
this.downloadlogs = function() {
|
|
||||||
window.location.href = self.wifiboxURL + "/info/logfiles"
|
|
||||||
}
|
|
||||||
|
|
||||||
this.downloadGcode = function() {
|
|
||||||
var gcode = generate_gcode();
|
|
||||||
if (gcode!=undefined) {
|
|
||||||
var blob = new Blob([gcode.join("\n")], {type: "text/plain;charset=utf-8"});
|
|
||||||
saveAs(blob, "doodle3d.gcode");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.downloadSvg = function() {
|
|
||||||
var svg = saveToSvg();
|
|
||||||
if (svg!=undefined) {
|
|
||||||
var blob = new Blob([svg], {type: "text/plain;charset=utf-8"});
|
|
||||||
saveAs(blob, "doodle3d.svg");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Networks ui
|
|
||||||
*/
|
|
||||||
this.showAPSettings = function() {
|
|
||||||
self.apFieldSet.show();
|
|
||||||
self.clientFieldSet.hide();
|
|
||||||
}
|
|
||||||
this.showClientSettings = function() {
|
|
||||||
self.clientFieldSet.show();
|
|
||||||
self.apFieldSet.hide();
|
|
||||||
}
|
|
||||||
this.refreshNetworks = function() {
|
|
||||||
console.log("Settings:refreshNetworks");
|
|
||||||
|
|
||||||
if (communicateWithWifibox) {
|
|
||||||
$.ajax({
|
|
||||||
url: self.wifiboxURL + "/network/scan",
|
|
||||||
type: "GET",
|
|
||||||
dataType: 'json',
|
|
||||||
timeout: self.timeoutTime,
|
|
||||||
success: function(response){
|
|
||||||
console.log("Settings:refreshNetworks response: ",response);
|
|
||||||
if(response.status == "error") {
|
|
||||||
//clearTimeout(self.retrySaveSettingsDelay);
|
|
||||||
//self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
|
|
||||||
} else {
|
|
||||||
var networks = response.data.networks
|
|
||||||
self.networks = {};
|
|
||||||
var foundCurrentNetwork = false;
|
|
||||||
var networkSelector = self.form.find("#network");
|
|
||||||
networkSelector.empty();
|
|
||||||
networkSelector.append(
|
|
||||||
$("<option></option>").val(SettingsWindow.NOT_CONNECTED).html("not connected")
|
|
||||||
);
|
|
||||||
$.each(networks, function(index,element) {
|
|
||||||
if(element.ssid == self.currentNetwork) {
|
|
||||||
foundCurrentNetwork = true;
|
|
||||||
}
|
|
||||||
networkSelector.append(
|
|
||||||
$("<option></option>").val(element.ssid).html(element.ssid)
|
|
||||||
);
|
|
||||||
self.networks[element.ssid] = element;
|
|
||||||
});
|
|
||||||
if(foundCurrentNetwork) {
|
|
||||||
networkSelector.val(self.currentNetwork);
|
|
||||||
self.selectNetwork(self.currentNetwork);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).fail(function() {
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.retrieveNetworkStatus = function(connecting) {
|
|
||||||
//console.log("Settings:retrieveNetworkStatus");
|
|
||||||
if (communicateWithWifibox) {
|
|
||||||
$.ajax({
|
|
||||||
url: self.wifiboxURL + "/network/status",
|
|
||||||
type: "GET",
|
|
||||||
dataType: 'json',
|
|
||||||
timeout: self.timeoutTime,
|
|
||||||
success: function(response){
|
|
||||||
console.log("Settings:retrieveNetworkStatus response: ",response);
|
|
||||||
if(response.status == "error") {
|
|
||||||
|
|
||||||
} else {
|
|
||||||
var data = response.data;
|
|
||||||
|
|
||||||
if(typeof data.status === 'string') {
|
|
||||||
data.status = parseInt(data.status);
|
|
||||||
}
|
|
||||||
//console.log(" data.status: ",data.status,data.statusMessage);
|
|
||||||
|
|
||||||
// Determine which network settings to show
|
|
||||||
switch(data.status) {
|
|
||||||
case SettingsWindow.API_NOT_CONNECTED:
|
|
||||||
//console.log(" not connected & not a access point");
|
|
||||||
self.apFieldSet.show();
|
|
||||||
self.clientFieldSet.show();
|
|
||||||
|
|
||||||
self.networkMode = SettingsWindow.NETWORK_MODE_NEITHER;
|
|
||||||
break;
|
|
||||||
case SettingsWindow.API_CONNECTING_FAILED:
|
|
||||||
case SettingsWindow.API_CONNECTING:
|
|
||||||
case SettingsWindow.API_CONNECTED:
|
|
||||||
//console.log(" client mode");
|
|
||||||
self.form.find("#client").prop('checked',true);
|
|
||||||
|
|
||||||
self.apFieldSet.hide();
|
|
||||||
self.clientFieldSet.show();
|
|
||||||
|
|
||||||
if(data.status == SettingsWindow.API_CONNECTED) {
|
|
||||||
var networkSelector = self.form.find("#network");
|
|
||||||
networkSelector.val(data.ssid);
|
|
||||||
|
|
||||||
self.currentNetwork = data.ssid;
|
|
||||||
self.currentLocalIP = data.localip;
|
|
||||||
self.selectNetwork(data.ssid);
|
|
||||||
} else {
|
|
||||||
self.currentLocalIP = ""
|
|
||||||
}
|
|
||||||
self.networkMode = SettingsWindow.NETWORK_MODE_CLIENT;
|
|
||||||
break;
|
|
||||||
case SettingsWindow.API_CREATING:
|
|
||||||
case SettingsWindow.API_CREATED:
|
|
||||||
//console.log(" access point mode");
|
|
||||||
self.form.find("#ap").prop('checked',true);
|
|
||||||
|
|
||||||
self.apFieldSet.show();
|
|
||||||
self.clientFieldSet.hide();
|
|
||||||
|
|
||||||
self.currentNetwork = undefined;
|
|
||||||
self.selectNetwork(SettingsWindow.NOT_CONNECTED);
|
|
||||||
var networkSelector = self.form.find("#network");
|
|
||||||
networkSelector.val(SettingsWindow.NOT_CONNECTED);
|
|
||||||
|
|
||||||
if(data.ssid && data.status == SettingsWindow.API_CREATED) {
|
|
||||||
self.currentAP = data.ssid;
|
|
||||||
}
|
|
||||||
self.networkMode = SettingsWindow.NETWORK_MODE_ACCESS_POINT;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
self.updatePanel.setNetworkMode(self.networkMode);
|
|
||||||
|
|
||||||
// update status message
|
|
||||||
switch(data.status) {
|
|
||||||
case SettingsWindow.API_CONNECTING_FAILED:
|
|
||||||
self.setClientModeState(SettingsWindow.CONNECTING_FAILED,data.statusMessage);
|
|
||||||
self.setAPModeState(SettingsWindow.NO_AP,"");
|
|
||||||
break;
|
|
||||||
case SettingsWindow.API_NOT_CONNECTED:
|
|
||||||
self.setClientModeState(SettingsWindow.NOT_CONNECTED,"");
|
|
||||||
self.setAPModeState(SettingsWindow.NO_AP,"");
|
|
||||||
break;
|
|
||||||
case SettingsWindow.API_CONNECTING:
|
|
||||||
self.setClientModeState(SettingsWindow.CONNECTING,"");
|
|
||||||
self.setAPModeState(SettingsWindow.NO_AP,"");
|
|
||||||
break;
|
|
||||||
case SettingsWindow.API_CONNECTED:
|
|
||||||
self.setClientModeState(SettingsWindow.CONNECTED,"");
|
|
||||||
self.setAPModeState(SettingsWindow.NO_AP,"");
|
|
||||||
break;
|
|
||||||
case SettingsWindow.API_CREATING:
|
|
||||||
self.setClientModeState(SettingsWindow.NOT_CONNECTED,"");
|
|
||||||
self.setAPModeState(SettingsWindow.CREATING_AP,"");
|
|
||||||
break;
|
|
||||||
case SettingsWindow.API_CREATED:
|
|
||||||
self.setClientModeState(SettingsWindow.NOT_CONNECTED,"");
|
|
||||||
self.setAPModeState(SettingsWindow.AP,"");
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Keep checking for updates?
|
|
||||||
if(connecting) {
|
|
||||||
switch(data.status) {
|
|
||||||
case SettingsWindow.API_CONNECTING:
|
|
||||||
case SettingsWindow.API_CREATING:
|
|
||||||
clearTimeout(self.retryRetrieveNetworkStatusDelay);
|
|
||||||
self.retryRetrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus(connecting) },self.retryRetrieveNetworkStatusDelayTime); // retry after delay
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).fail(function() {
|
|
||||||
console.log("Settings:retrieveNetworkStatus: failed");
|
|
||||||
clearTimeout(self.retryRetrieveNetworkStatusDelay);
|
|
||||||
self.retryRetrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus(connecting) },self.retryDelay); // retry after delay
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.networkSelectorChanged = function(e) {
|
|
||||||
var selectedOption = $(this).find("option:selected");
|
|
||||||
self.selectNetwork(selectedOption.val());
|
|
||||||
}
|
|
||||||
|
|
||||||
this.selectNetwork = function(ssid) {
|
|
||||||
console.log("select network: ",ssid);
|
|
||||||
if(ssid == "") return;
|
|
||||||
console.log(" checked");
|
|
||||||
this.selectedNetwork = ssid;
|
|
||||||
if(this.networks == undefined || ssid == SettingsWindow.NOT_CONNECTED) {
|
|
||||||
this.hideWiFiPassword();
|
|
||||||
} else {
|
|
||||||
var network = this.networks[ssid];
|
|
||||||
if(network.encryption == "none") {
|
|
||||||
this.hideWiFiPassword();
|
|
||||||
} else {
|
|
||||||
this.showWiFiPassword();
|
|
||||||
}
|
|
||||||
this.form.find("#password").val("");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.showWiFiPassword = function() {
|
|
||||||
this.form.find("#passwordLabel").show();
|
|
||||||
this.form.find("#password").show();
|
|
||||||
}
|
|
||||||
this.hideWiFiPassword = function() {
|
|
||||||
this.form.find("#passwordLabel").hide();
|
|
||||||
this.form.find("#password").hide();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setClientModeState = function(state,msg) {
|
|
||||||
var field = this.form.find("#clientModeState");
|
|
||||||
var btnConnect = self.form.find("#connectToNetwork");
|
|
||||||
switch(state) {
|
|
||||||
case SettingsWindow.NOT_CONNECTED:
|
|
||||||
btnConnect.removeAttr("disabled");
|
|
||||||
field.html("Not connected");
|
|
||||||
break;
|
|
||||||
case SettingsWindow.CONNECTED:
|
|
||||||
btnConnect.removeAttr("disabled");
|
|
||||||
|
|
||||||
var fieldText = "Connected to: <b>"+this.currentNetwork+"</b>.";
|
|
||||||
if(this.currentLocalIP != undefined && this.currentLocalIP != "") {
|
|
||||||
var a = "<a href='http://"+this.currentLocalIP+"' target='_black'>"+this.currentLocalIP+"</a>";
|
|
||||||
fieldText += " (IP: "+a+")";
|
|
||||||
}
|
|
||||||
field.html(fieldText);
|
|
||||||
break;
|
|
||||||
case SettingsWindow.CONNECTING:
|
|
||||||
btnConnect.attr("disabled", true);
|
|
||||||
field.html("Connecting... Reconnect by connecting your device to <b>"+this.selectedNetwork+"</b> and going to <a href='http://connect.doodle3d.com'>connect.doodle3d.com</a>");
|
|
||||||
break;
|
|
||||||
case SettingsWindow.CONNECTING_FAILED:
|
|
||||||
btnConnect.removeAttr("disabled");
|
|
||||||
field.html(msg);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
this.clientModeState = state;
|
|
||||||
}
|
|
||||||
this.setAPModeState = function(state,msg) {
|
|
||||||
var field = this.form.find("#apModeState");
|
|
||||||
var btnCreate = this.form.find("#createAP");
|
|
||||||
switch(state) {
|
|
||||||
case SettingsWindow.NO_AP:
|
|
||||||
btnCreate.removeAttr("disabled");
|
|
||||||
field.html("Not currently a access point");
|
|
||||||
break;
|
|
||||||
case SettingsWindow.AP:
|
|
||||||
btnCreate.removeAttr("disabled");
|
|
||||||
field.html("Is access point: <b>"+this.currentAP+"</b>");
|
|
||||||
break;
|
|
||||||
case SettingsWindow.CREATING_AP:
|
|
||||||
btnCreate.attr("disabled", true);
|
|
||||||
field.html("Creating access point... Reconnect by connecting your device to <b>"+settings.substituted_ssid+"</b> and going to <a href='http://draw.doodle3d.com'>draw.doodle3d.com</a>");
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
this.apModeState = state;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.connectToNetwork = function() {
|
|
||||||
console.log("connectToNetwork");
|
|
||||||
if(self.selectedNetwork == undefined) return;
|
|
||||||
var postData = {
|
|
||||||
ssid:self.selectedNetwork,
|
|
||||||
phrase:self.form.find("#password").val(),
|
|
||||||
recreate:true
|
|
||||||
}
|
|
||||||
console.log(" postData: ",postData);
|
|
||||||
if (communicateWithWifibox) {
|
|
||||||
|
|
||||||
// save network related settings and on complete, connect to network
|
|
||||||
self.saveSettings(self.readForm(),function(success) {
|
|
||||||
if(!success) return;
|
|
||||||
$.ajax({
|
|
||||||
url: self.wifiboxCGIBinURL + "/network/associate",
|
|
||||||
type: "POST",
|
|
||||||
data: postData,
|
|
||||||
dataType: 'json',
|
|
||||||
timeout: self.timeoutTime,
|
|
||||||
success: function(response){
|
|
||||||
console.log("Settings:connectToNetwork response: ",response);
|
|
||||||
}
|
|
||||||
}).fail(function() {
|
|
||||||
console.log("Settings:connectToNetwork: timeout (normal behavior)");
|
|
||||||
//clearTimeout(self.retrySaveSettingsDelay);
|
|
||||||
//self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
self.setClientModeState(SettingsWindow.CONNECTING,"");
|
|
||||||
|
|
||||||
// after switching wifi network or creating a access point we delay the status retrieval
|
|
||||||
// because the webserver needs time to switch
|
|
||||||
clearTimeout(self.retrieveNetworkStatusDelay);
|
|
||||||
self.retrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus(true) },self.retrieveNetworkStatusDelayTime);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.createAP = function() {
|
|
||||||
console.log("createAP");
|
|
||||||
if (communicateWithWifibox) {
|
|
||||||
|
|
||||||
// save network related settings and on complete, create access point
|
|
||||||
self.saveSettings(self.readForm(),function(success) {
|
|
||||||
if(!success) return;
|
|
||||||
self.setAPModeState(SettingsWindow.CREATING_AP); // get latest substituted ssid
|
|
||||||
$.ajax({
|
|
||||||
url: self.wifiboxCGIBinURL + "/network/openap",
|
|
||||||
type: "POST",
|
|
||||||
dataType: 'json',
|
|
||||||
timeout: self.timeoutTime,
|
|
||||||
success: function(response){
|
|
||||||
console.log("Settings:createAP response: ",response);
|
|
||||||
}
|
|
||||||
}).fail(function() {
|
|
||||||
console.log("Settings:createAP: timeout (normal behavior)");
|
|
||||||
//clearTimeout(self.retrySaveSettingsDelay);
|
|
||||||
//self.retrySaveSettingsDelay = setTimeout(function() { self.saveSettings() },self.retryDelay); // retry after delay
|
|
||||||
});
|
|
||||||
|
|
||||||
self.setAPModeState(SettingsWindow.CREATING_AP,"");
|
|
||||||
|
|
||||||
// after switching wifi network or creating a access point we delay the status retrieval
|
|
||||||
// because the webserver needs time to switch
|
|
||||||
clearTimeout(self.retrieveNetworkStatusDelay);
|
|
||||||
self.retrieveNetworkStatusDelay = setTimeout(function() { self.retrieveNetworkStatus(true) },self.retrieveNetworkStatusDelayTime);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*************************
|
|
||||||
*
|
|
||||||
*
|
|
||||||
* FROM DOODLE3D.INI
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
//TODO: find all references to these variables, replace them and finally remove these.
|
|
||||||
var objectHeight = 20;
|
|
||||||
var layerHeight = .2;
|
|
||||||
//var wallThickness = .5;
|
|
||||||
//var hop = 0;
|
|
||||||
//var speed = 70;
|
|
||||||
//var travelSpeed = 200;
|
|
||||||
var enableTraveling = true;
|
|
||||||
//var filamentThickness = 2.89;
|
|
||||||
var minScale = .3;
|
|
||||||
var maxScale = 1;
|
|
||||||
var shape = "%";
|
|
||||||
var twists = 0;
|
|
||||||
//var useSubLayers = true;
|
|
||||||
//var debug = false; // debug moved to main.js
|
|
||||||
var loglevel = 2;
|
|
||||||
//var zOffset = 0;
|
|
||||||
var serverport = 8888;
|
|
||||||
var autoLoadImage = "hand.txt";
|
|
||||||
var loadOffset = [0, 0]; // x en y ?
|
|
||||||
var showWarmUp = true;
|
|
||||||
var loopAlways = false;
|
|
||||||
var firstLayerSlow = true;
|
|
||||||
var useSubpathColors = false;
|
|
||||||
var autoWarmUp = true;
|
|
||||||
//var maxObjectHeight = 150;
|
|
||||||
var maxScaleDifference = .1;
|
|
||||||
var frameRate = 60;
|
|
||||||
var quitOnEscape = true;
|
|
||||||
var screenToMillimeterScale = .3; // 0.3
|
|
||||||
//var targetTemperature = 220;
|
|
||||||
//var simplifyiterations = 10;
|
|
||||||
//var simplifyminNumPoints = 15;
|
|
||||||
//var simplifyminDistance = 3;
|
|
||||||
//var retractionspeed = 50;
|
|
||||||
//var retractionminDistance = 5;
|
|
||||||
//var retractionamount = 3;
|
|
||||||
var sideis3D = true;
|
|
||||||
var sidevisible = true;
|
|
||||||
var sidebounds = [900, 210, 131, 390];
|
|
||||||
var sideborder = [880, 169, 2, 471];
|
|
||||||
var windowbounds = [0, 0, 800, 500];
|
|
||||||
var windowcenter = true;
|
|
||||||
var windowfullscreen = false;
|
|
||||||
var autoWarmUpCommand = "M104 S230";
|
|
||||||
//var checkTemperatureInterval = 3;
|
|
||||||
var autoWarmUpDelay = 3;
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
/*
|
|
||||||
* This file is part of the Doodle3D project (http://doodle3d.com).
|
|
||||||
*
|
|
||||||
* Copyright (c) 2013, Doodle3D
|
|
||||||
* This software is licensed under the terms of the GNU GPL v2 or later.
|
|
||||||
* See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
|
|
||||||
*/
|
|
||||||
|
|
||||||
function drawCircle(x0,y0,r,res) {
|
|
||||||
if (res==undefined) res = 50; //circle resolution
|
|
||||||
beginShape();
|
|
||||||
var step=Math.PI * 2.0 / res;
|
|
||||||
for (var a=0; a<=Math.PI*2; a+=step) {
|
|
||||||
var x = Math.sin(a) * r + x0;
|
|
||||||
var y = Math.cos(a) * r + y0;
|
|
||||||
if (a==0) shapeMoveTo(x,y);
|
|
||||||
else shapeLineTo(x,y);
|
|
||||||
}
|
|
||||||
endShape();
|
|
||||||
}
|
|
||||||
|
|
||||||
function beginShape(x,y) {
|
|
||||||
setSketchModified(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
function shapeMoveTo(x,y) {
|
|
||||||
_points.push([x, y, true]);
|
|
||||||
adjustBounds(x, y)
|
|
||||||
adjustPreviewTransformation();
|
|
||||||
draw(x, y, .5);
|
|
||||||
}
|
|
||||||
|
|
||||||
function shapeLineTo(x,y) {
|
|
||||||
_points.push([x, y, false]);
|
|
||||||
adjustBounds(x, y)
|
|
||||||
adjustPreviewTransformation();
|
|
||||||
draw(x, y);
|
|
||||||
}
|
|
||||||
|
|
||||||
function endShape() {
|
|
||||||
renderToImageDataPreview();
|
|
||||||
}
|
|
||||||
140
js_src/Svg.js
140
js_src/Svg.js
@ -1,140 +0,0 @@
|
|||||||
/*
|
|
||||||
* This file is part of the Doodle3D project (http://doodle3d.com).
|
|
||||||
*
|
|
||||||
* Copyright (c) 2013, Doodle3D
|
|
||||||
* This software is licensed under the terms of the GNU GPL v2 or later.
|
|
||||||
* See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
|
|
||||||
*/
|
|
||||||
|
|
||||||
//SVG validator: http://validator.w3.org/
|
|
||||||
//SVG viewer: http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html
|
|
||||||
function saveToSvg() {
|
|
||||||
var lastX = 0, lastY = 0, lastIsMove;
|
|
||||||
var svg = '';
|
|
||||||
|
|
||||||
var boundsWidth = doodleBounds[2] - doodleBounds[0];
|
|
||||||
var boundsHeight = doodleBounds[3] - doodleBounds[1];
|
|
||||||
|
|
||||||
svg += '<?xml version="1.0" standalone="no"?>\n';
|
|
||||||
svg += '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n';
|
|
||||||
svg += '<svg width="' + boundsWidth + '" height="' + boundsHeight + '" version="1.1" xmlns="http://www.w3.org/2000/svg">\n';
|
|
||||||
svg += '\t<desc>Doodle 3D sketch</desc>\n';
|
|
||||||
|
|
||||||
var data = '';
|
|
||||||
for (var i = 0; i < _points.length; ++i) {
|
|
||||||
var x = _points[i][0], y = _points[i][1], isMove = _points[i][2];
|
|
||||||
var dx = x - lastX, dy = y - lastY;
|
|
||||||
|
|
||||||
if (i == 0)
|
|
||||||
data += 'M'; //emit absolute move on first pair of coordinates
|
|
||||||
else if (isMove != lastIsMove)
|
|
||||||
data += isMove ? 'm' : 'l';
|
|
||||||
|
|
||||||
data += dx + ',' + dy + ' ';
|
|
||||||
|
|
||||||
lastX = x;
|
|
||||||
lastY = y;
|
|
||||||
lastIsMove = isMove;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg += '\t<path transform="translate(' + -doodleBounds[0] + ',' + -doodleBounds[1] + ')" d="' + data + '" fill="none" stroke="black" stroke-width="2" />\n';
|
|
||||||
|
|
||||||
var fields = JSON.stringify({'height': numLayers, 'outlineShape': VERTICALSHAPE, 'twist': rStep});
|
|
||||||
svg += '\t<!--<![CDATA[d3d-keys ' + fields + ']]>-->\n';
|
|
||||||
|
|
||||||
svg += '</svg>\n';
|
|
||||||
|
|
||||||
return svg;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//TODO: use local variables instead of _points,numLayers,VERTICALSHAPE and rStep so we can leave a current doodle in tact if an error occurs while parsing
|
|
||||||
function loadFromSvg(svgData) {
|
|
||||||
var mode = '', x = 0, y = 0;
|
|
||||||
|
|
||||||
console.log("loading " + svgData.length + " bytes of data...");
|
|
||||||
|
|
||||||
clearDoodle();
|
|
||||||
|
|
||||||
var p = svgData.indexOf("<path");
|
|
||||||
if (p == -1) { console.log("loadFromSvg: could not find parsing start point"); return false; }
|
|
||||||
p = svgData.indexOf('d="', p);
|
|
||||||
if (p == -1) { console.log("loadFromSvg: could not find parsing start point"); return false; }
|
|
||||||
p += 3; //skip 'd="'
|
|
||||||
|
|
||||||
var skipSpace = function() { while (svgData.charAt(p) == ' ') p++; }
|
|
||||||
var parseCommand = function() {
|
|
||||||
while (true) {
|
|
||||||
skipSpace();
|
|
||||||
var c = svgData.charAt(p);
|
|
||||||
if (c == 'M' || c == 'm' || c == 'l') { //new command letter
|
|
||||||
mode = c;
|
|
||||||
} else if (c == '"') { //end of command chain
|
|
||||||
return true;
|
|
||||||
} else { //something else, must be a pair of coordinates...
|
|
||||||
var tx = 0, ty = 0, numberEnd = 0, len = 0;
|
|
||||||
numberEnd = svgData.indexOf(',', p);
|
|
||||||
if (numberEnd == -1) { console.log("could not find comma in coordinate pair"); return false; }
|
|
||||||
len = numberEnd - p;
|
|
||||||
tx = parseInt(svgData.substr(p, len));
|
|
||||||
p += len + 1;
|
|
||||||
skipSpace();
|
|
||||||
numberEnd = svgData.indexOf(' ', p);
|
|
||||||
if (numberEnd == -1) { console.log("could not find space after coordinate pair"); return false; }
|
|
||||||
len = numberEnd - p;
|
|
||||||
ty = parseInt(svgData.substr(p, len));
|
|
||||||
p += len;
|
|
||||||
|
|
||||||
if (mode == 'M' || mode == 'L') {
|
|
||||||
x = tx; y = ty;
|
|
||||||
} else if (mode == 'm' || mode == 'l') {
|
|
||||||
x += tx; y += ty;
|
|
||||||
} else {
|
|
||||||
console.log("loadFromSvg: found coordinate pair but mode was never set");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
var isMove = mode == 'm' || mode == 'M';
|
|
||||||
|
|
||||||
//TODO: create script-wide function for adding points?
|
|
||||||
//console.log("inserting "+x+","+y+" ",isMove);
|
|
||||||
updatePrevX = x;
|
|
||||||
updatePrevY = y;
|
|
||||||
_points.push([x, y, isMove]);
|
|
||||||
adjustBounds(x, y);
|
|
||||||
adjustPreviewTransformation();
|
|
||||||
|
|
||||||
if (isMove) draw(x, y, .5);
|
|
||||||
else draw(x, y);
|
|
||||||
}
|
|
||||||
p++;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
};
|
|
||||||
|
|
||||||
parseCommand(); //depends on value of p, so don't move this without taking that into consideration
|
|
||||||
|
|
||||||
const fieldDefMarker = "<!--<![CDATA[d3d-keys";
|
|
||||||
p = svgData.indexOf(fieldDefMarker);
|
|
||||||
if (p == -1) { console.log("loadFromSvg: could not find metadata marker"); return false; }
|
|
||||||
p += fieldDefMarker.length;
|
|
||||||
skipSpace();
|
|
||||||
|
|
||||||
var endP = svgData.indexOf("]]>-->", p);
|
|
||||||
if (endP == -1) { console.log("loadFromSvg: could not find metadata end-marker"); return false; }
|
|
||||||
var metaFields = JSON.parse(svgData.substr(p, endP - p));
|
|
||||||
//TODO: log error and return false if parsing failed
|
|
||||||
for (var k in metaFields) {
|
|
||||||
var v = metaFields[k];
|
|
||||||
switch (k) {
|
|
||||||
case "height": numLayers = v; break;
|
|
||||||
case "outlineShape": VERTICALSHAPE = v; break;
|
|
||||||
case "twist": rStep = v; break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
renderToImageDataPreview();
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
/*
|
|
||||||
* This file is part of the Doodle3D project (http://doodle3d.com).
|
|
||||||
*
|
|
||||||
* Copyright (c) 2013, Doodle3D
|
|
||||||
* This software is licensed under the terms of the GNU GPL v2 or later.
|
|
||||||
* See file LICENSE.txt or visit http://www.gnu.org/licenses/gpl.html for full license details.
|
|
||||||
*/
|
|
||||||
|
|
||||||
var VERTICALSHAPE;
|
|
||||||
var verticalShapes = {
|
|
||||||
"NONE": 'none',
|
|
||||||
"DIVERGING": 'diverging',
|
|
||||||
"CONVERGING": 'converging',
|
|
||||||
"SINUS": 'sinus'
|
|
||||||
};
|
|
||||||
|
|
||||||
function initVerticalShapes() {
|
|
||||||
// TODO give these vertical shapes a better spot
|
|
||||||
VERTICALSHAPE = verticalShapes.NONE;
|
|
||||||
$(".verticalShapes, .straight").on('mouseup touchend', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
console.log("diverging");
|
|
||||||
VERTICALSHAPE = verticalShapes.NONE;
|
|
||||||
redrawRenderedPreview();
|
|
||||||
})
|
|
||||||
$(".verticalShapes, .diverging").on('mouseup touchend', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
console.log("diverging");
|
|
||||||
VERTICALSHAPE = verticalShapes.DIVERGING;
|
|
||||||
redrawRenderedPreview();
|
|
||||||
})
|
|
||||||
$(".verticalShapes, .converging").on('mouseup touchend', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
console.log("converging");
|
|
||||||
VERTICALSHAPE = verticalShapes.CONVERGING;
|
|
||||||
redrawRenderedPreview();
|
|
||||||
})
|
|
||||||
$(".verticalShapes, .sinus").on('mouseup touchend', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
console.log("sinus");
|
|
||||||
VERTICALSHAPE = verticalShapes.SINUS;
|
|
||||||
redrawRenderedPreview();
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetVerticalShapes() {
|
|
||||||
VERTICALSHAPE = verticalShapes.NONE;
|
|
||||||
}
|
|
||||||
@ -1,8 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
|
|
||||||
GLOBAL CONTAINER
|
GLOBAL CONTAINER
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
@import "config.less";
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@ -10,20 +9,12 @@ body {
|
|||||||
user-select: none; /* disable cut copy paste */
|
user-select: none; /* disable cut copy paste */
|
||||||
overflow:hidden; /* This chops off any overhanging divs */
|
overflow:hidden; /* This chops off any overhanging divs */
|
||||||
}
|
}
|
||||||
img {
|
|
||||||
z-index: 5;
|
@import "buttons.less";
|
||||||
/*pointer-events:none;*/
|
@import "popup.less";
|
||||||
/*-webkit-touch-callout: none; *//*disable callout, image save panel */
|
|
||||||
/*-webkit-tap-highlight-color: transparent; *//* "turn off" link highlight */
|
|
||||||
}
|
|
||||||
/* http://stackoverflow.com/questions/5348092/prevent-default-press-but-not-default-drag-in-ios-mobilesafari */
|
|
||||||
.btn {
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
#landscape {
|
#landscape {
|
||||||
position:absolute;
|
position:absolute;
|
||||||
// background-color: #fff;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1024px;
|
max-width: 1024px;
|
||||||
max-height: 768px;
|
max-height: 768px;
|
||||||
@ -31,99 +22,50 @@ img {
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
// z-index: 5;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
// box-sizing: border-box;
|
|
||||||
// border: 2px solid #5e8c71;
|
|
||||||
// -moz-box-sizing:border-box;
|
|
||||||
// -webkit-box-sizing:border-box;// border-width: 0 2px 2px 2px;
|
|
||||||
|
|
||||||
// solution from: http://stackoverflow.com/questions/14085822/css-firefox-box-shadow-and-outline
|
// solution from: http://stackoverflow.com/questions/14085822/css-firefox-box-shadow-and-outline
|
||||||
box-shadow: 0 0 0 2px #5e8c71,
|
box-shadow: 0 0 0 2px #5e8c71,
|
||||||
0 0 8px 4px rgba(8, 8, 8, 0.25);
|
0 0 8px 4px rgba(8, 8, 8, 0.25);
|
||||||
|
|
||||||
// outline: 2px solid #5e8c71;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#portrait {
|
#portrait {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bgContainer {
|
.bgContainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.bgTop, .bgMiddle, .bgBottom {
|
#bgTop, #bgMiddle, #bgBottom {
|
||||||
opacity: 1.0;
|
opacity: 1.0;
|
||||||
transition: opacity .35s linear;
|
transition: opacity .35s linear;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
z-index: -5;
|
//z-index: -5;
|
||||||
}
|
}
|
||||||
.bgTop {
|
|
||||||
|
#bgTop {
|
||||||
top: 0px;
|
top: 0px;
|
||||||
}
|
}
|
||||||
.bgMiddle {
|
|
||||||
|
#bgMiddle {
|
||||||
top: 30%;
|
top: 30%;
|
||||||
}
|
}
|
||||||
.bgBottom {
|
|
||||||
|
#bgBottom {
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
}
|
}
|
||||||
//.rightpanel, .leftpanel {
|
|
||||||
// img {
|
|
||||||
// cursor: pointer;
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
CENTER PANEL
|
|
||||||
|
|
||||||
*/
|
|
||||||
@import "base_centerpanel.less";
|
@import "base_centerpanel.less";
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
LEFT PANEL
|
|
||||||
|
|
||||||
*/
|
|
||||||
@import "base_leftpanel.less";
|
@import "base_leftpanel.less";
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
RIGHT PANEL
|
|
||||||
|
|
||||||
*/
|
|
||||||
@import "base_rightpanel.less";
|
@import "base_rightpanel.less";
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
under all the above styles w.r.t. the cascading effect
|
|
||||||
*/
|
|
||||||
.disabled {
|
|
||||||
opacity: 0.3;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnStop.disabled {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// http://blogs.msdn.com/b/askie/archive/2013/01/06/how-to-implement-the-ms-touch-action-none-property-to-disable-double-tap-zoom-on-touch-devices.aspx
|
|
||||||
//a, input, button {
|
|
||||||
// -ms-touch-action: none !important;
|
|
||||||
//}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
REST
|
REST
|
||||||
|
|
||||||
*/
|
*/
|
||||||
/* CLEARFIX */
|
/* CLEARFIX */
|
||||||
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
|
/* http://nicolasgallagher.com/micro-clearfix-hack/ */
|
||||||
|
|||||||
@ -1,58 +1,130 @@
|
|||||||
// CENTER PANEL
|
// CENTER PANEL
|
||||||
.centerpanel {
|
#centerpanel {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
margin-left: -33%;
|
margin-left: -@center-panel-width/2;
|
||||||
width: 66%;
|
width: @center-panel-width;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// z-index: 5;
|
padding-top: 1%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#logopanel {
|
||||||
|
height: 15%;
|
||||||
|
text-align: center;
|
||||||
|
width: 40%;
|
||||||
|
margin-left: 30%;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
// top panel
|
img#pencil {
|
||||||
@import "base_centerpanel_logo.less";
|
margin-top: 2%;
|
||||||
|
max-width: 50%;
|
||||||
|
max-height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
// draw area stuff (plus up/down/left/right buttons)
|
img#logo {
|
||||||
@import "base_centerpanel_drawarea.less";
|
max-width: 90%;
|
||||||
|
margin-bottom: 2%;
|
||||||
|
max-height: 45%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// DRAW AREA
|
||||||
|
#drawareacontainer {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 79%;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 3px solid black;
|
||||||
|
border-radius: 15px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvasContainers {
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mycanvasContainer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 78%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mycanvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border-right: 2px solid #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
#previewContainer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 22%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#preview {
|
||||||
|
min-width: 50px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#preview_tmp {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
HEIGHT-related RESPONSIVE STUFF
|
HEIGHT-related RESPONSIVE STUFF
|
||||||
*/
|
*/
|
||||||
@media screen and (max-height: 700px) {
|
@media screen and (max-height: 700px) {
|
||||||
.logopanel {
|
|
||||||
height: 22%;
|
|
||||||
}
|
|
||||||
.doodlecontainer {
|
|
||||||
height: 68%;
|
|
||||||
}
|
|
||||||
.d3dlogo {
|
|
||||||
top: 25%;
|
|
||||||
max-width: 399px;
|
|
||||||
height: 74px;
|
|
||||||
background-image: url('../img/logo/logo_small.png');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-height: 655px) {
|
@media screen and (max-height: 655px) {
|
||||||
.bgMiddle { opacity: 0; }
|
|
||||||
|
#logopanel {
|
||||||
|
height: 10%;
|
||||||
|
|
||||||
|
img#logo {
|
||||||
|
margin-top: 1%;
|
||||||
|
max-height: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img#pencil {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#drawareacontainer {
|
||||||
|
height: 83%;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-height: 525px) {
|
@media screen and (max-height: 525px) {
|
||||||
.d3dlogo {
|
|
||||||
top: 20%;
|
|
||||||
height: 57px;
|
|
||||||
max-width: 307px;
|
|
||||||
background-image: url('../img/logo/logo_smaller.png');
|
|
||||||
// max-width: 399px;
|
|
||||||
// background-image: url('../img/logo/logo_smaller_wide.png');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-height: 375px) {
|
@media screen and (max-height: 375px) {
|
||||||
.d3dlogo {
|
|
||||||
height: 40px;
|
|
||||||
max-width: 216px;
|
|
||||||
background-image: url('../img/logo/logo_smallest.png');
|
|
||||||
// max-width: 399px;
|
|
||||||
// background-image: url('../img/logo/logo_smallest_wide.png');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,128 +0,0 @@
|
|||||||
// import vertical shapes additions
|
|
||||||
@import "verticalshapes.less";
|
|
||||||
|
|
||||||
// DRAW AREA
|
|
||||||
.drawareacontainer {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 65%;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 4px solid #000;
|
|
||||||
border-radius: 15px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
// z-index: 15;
|
|
||||||
}
|
|
||||||
|
|
||||||
#canvasContainers {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mycanvasContainer {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 78%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
#mycanvas {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border-right: 2px solid #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
#previewContainer {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 22%;
|
|
||||||
// max-width: 150px;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
#preview {
|
|
||||||
min-width: 50px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* DEBUG THING */
|
|
||||||
#preview_tmp {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 500;
|
|
||||||
border: 1px solid #f80;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.bottompanel {
|
|
||||||
position: relative;
|
|
||||||
bottom: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 10%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
DOODLE UP/DOWN/LEFT/RIGHT buttons
|
|
||||||
*/
|
|
||||||
.manipulationBtns {
|
|
||||||
margin: 2px 5px;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
max-width: 340px;
|
|
||||||
max-height: 70px;
|
|
||||||
width: 45%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.manipulationBtn {
|
|
||||||
width: 45%;
|
|
||||||
height: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsUpDown {
|
|
||||||
float: left;
|
|
||||||
width: 45%;
|
|
||||||
}
|
|
||||||
#btnsUpDown > div {
|
|
||||||
float: left;
|
|
||||||
padding-right: 8px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnsTurnLeftRight {
|
|
||||||
float: right;
|
|
||||||
width: 45%;
|
|
||||||
}
|
|
||||||
#btnsTurnLeftRight >div {
|
|
||||||
float: left;
|
|
||||||
padding-right: 8px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnMoveUp {
|
|
||||||
max-width: 65px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnMoveDown {
|
|
||||||
max-width: 64px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnTwistLeft {
|
|
||||||
max-width: 59px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#btnTwistRight {
|
|
||||||
max-width: 64px;
|
|
||||||
}
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
.logopanel {
|
|
||||||
height: 25%;
|
|
||||||
}
|
|
||||||
.d3dlogo {
|
|
||||||
position: relative;
|
|
||||||
top: 15%;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0px auto;
|
|
||||||
max-width: 399px;
|
|
||||||
height: 139px;
|
|
||||||
background: url('../img/logo/logo_full.png') no-repeat center center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,42 +1,8 @@
|
|||||||
// LEFT PANEL
|
// LEFT PANEL
|
||||||
.leftpanel {
|
#leftpanel {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 17%;
|
width: @left-panel-width;
|
||||||
// background-color: rgba(67, 204, 67, 0.4);
|
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
}
|
}
|
||||||
.btnNew {
|
|
||||||
margin: 5% 0% 1% 5%;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 180px;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.btnsPrevNext {
|
|
||||||
margin: 1% 7%;
|
|
||||||
max-width: 160px;
|
|
||||||
}
|
|
||||||
.btnPrevious {
|
|
||||||
width: 40%;
|
|
||||||
max-width: 56px;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.btnNext {
|
|
||||||
width: 40%;
|
|
||||||
max-width: 56px;
|
|
||||||
height: auto;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
.btnSave {
|
|
||||||
margin: 5% 5% 1% 5%;
|
|
||||||
width: 90%;
|
|
||||||
max-width: 144px;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.btnOops {
|
|
||||||
margin: 5% 5% 1% 5%;
|
|
||||||
width: 90%;
|
|
||||||
max-width: 144px;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user