This commit is contained in:
peteruithoven 2014-01-10 17:21:43 +01:00
parent f7fec0aec6
commit 82b57def39
17 changed files with 166 additions and 167 deletions

View File

@ -77,7 +77,7 @@ function SettingsWindow() {
this.btnOK = this.window.find(".btnOK");
enableButton(this.btnOK,this.submitwindow);
this.window.find(".settingsContainer").load("settings.html", function() {
this.window.find("#settingsContainer").load("settings.html", function() {
console.log("Settings:finished loading settings.html, now loading settings...");
self.form = self.window.find("form");

View File

@ -1,15 +1,15 @@
function initWordArt() {
$("body").append('<div id="svgfont" style="display:none"></div>');
$("#svgfont").load("img/font.svg?");
$(".btnWordArtOk").on("onButtonClick",onWordArtOk);
$(".btnWordArtCancel").on("onButtonClick",onWordArtCancel);
$("#btnWordArtOk").on("onButtonClick",onWordArtOk);
$("#btnWordArtCancel").on("onButtonClick",onWordArtCancel);
}
function showWordArtDialog() {
buttonGroupAdd.hide();
showPopup(popupWordArt);
$(".txtWordArt").focus();
$(".txtWordArt").val(""); //clear textbox
$("#txtWordArt").focus();
$("#txtWordArt").val(""); //clear textbox
}
function onWordArtCancel() {
@ -19,7 +19,7 @@ function onWordArtCancel() {
function onWordArtOk() {
hidePopup(popupWordArt);
var s = $(".txtWordArt").val();
var s = $("#txtWordArt").val();
if (s!=undefined) {
var points = getStringAsPoints(s);

View File

@ -16,36 +16,36 @@ function initButtonBehavior() {
$(".btn").Button(); //initalizes all buttons
btnOops = $(".btnOops");
btnInfo = $(".btnInfo");
btnSettings = $(".btnSettings");
btnNew = $(".btnNew");
btnPrint= $(".btnPrint");
btnStop = $(".btnStop");
btnPrevious = $(".btnPrevious");
btnNext = $(".btnNext");
btnSave = $(".btnSave");
btnWordArt = $(".btnWordArt");
btnZoom = $(".btnZoom");
btnUp = $(".btnUp");
btnDown = $(".btnDown");
btnMove = $(".btnMove");
btnTwistLeft = $(".btnTwistLeft");
btnTwistRight = $(".btnTwistRight");
btnShape = $(".btnShape");
btnRotate = $(".btnRotate");
btnEditClosed = $(".btnEditClosed");
btnEditOpen = $(".btnEditOpen");
btnStraight = $(".btnStraight");
btnDiv = $(".btnDiv");
btnConv = $(".btnConv");
btnSine = $(".btnSine");
btnAdd = $(".btnAdd");
btnToggleVertical = $(".btnToggleVertical");
btnOops = $("#btnOops");
btnInfo = $("#btnInfo");
btnSettings = $("#btnSettings");
btnNew = $("#btnNew");
btnPrint= $("#btnPrint");
btnStop = $("#btnStop");
btnPrevious = $("#btnPrevious");
btnNext = $("#btnNext");
btnSave = $("#btnSave");
btnWordArt = $("#btnWordArt");
btnZoom = $("#btnZoom");
btnUp = $("#btnUp");
btnDown = $("#btnDown");
btnMove = $("#btnMove");
btnTwistLeft = $("#btnTwistLeft");
btnTwistRight = $("#btnTwistRight");
btnShape = $("#btnShape");
btnRotate = $("#btnRotate");
btnEditClosed = $("#btnEditClosed");
btnEditOpen = $("#btnEditOpen");
btnStraight = $("#btnStraight");
btnDiv = $("#btnDiv");
btnConv = $("#btnConv");
btnSine = $("#btnSine");
btnAdd = $("#btnAdd");
btnToggleVertical = $("#btnToggleVertical");
buttonGroupAdd = $("#buttonGroupAdd");
buttonGroupVertical = $(".buttonGroupVertical");
popupWordArt = $(".popupWordArt");
popupShape = $(".popupShape");
buttonGroupVerticalShapes = $("#buttonGroupVerticalShapes");
popupWordArt = $("#popupWordArt");
popupShape = $("#popupShape");
btnNew.on("onButtonClick", onBtnNew);
btnWordArt.on("onButtonClick", onBtnWordArt);
@ -74,7 +74,7 @@ function initButtonBehavior() {
setSketchModified(false);
function onBtnToggleVertical() {
buttonGroupVertical.toggle();
buttonGroupVerticalShapes.toggle();
}
function onBtnAdd() {
@ -198,7 +198,7 @@ function initButtonBehavior() {
function onBtnShape(e) {
showShapeDialog();
buttonGroupAdd.hide();
buttonGroupAdd.fadeOut();
}
enableButton(btnSettings, openSettingsWindow);

View File

@ -27,7 +27,7 @@ function doOnResize() {
function initLayouting() {
console.log("f:initLayouting()");
$drawAreaContainer = $(".drawareacontainer");
$drawAreaContainer = $("#drawareacontainer");
canvas.width = $canvas.width();
canvas.height = $canvas.height(); // canvas.clientHeight;

View File

@ -5,13 +5,13 @@ function initSidebars() {
console.log("f:initSidebars()");
sidebarLeft = new SideBar();
sidebarLeft.init(".leftpanel", "hideleft", function() {
$(".leftpanel").show();
sidebarLeft.init("#leftpanel", "hideleft", function() {
$("#leftpanel").show();
});
sidebarRight = new SideBar();
sidebarRight.init(".rightpanel", "hideright", function() {
$(".rightpanel").show();
sidebarRight.init("#rightpanel", "hideright", function() {
$("#rightpanel").show();
});
}

View File

@ -40,7 +40,7 @@ body {
height: 100%;
overflow: hidden;
}
.bgTop, .bgMiddle, .bgBottom {
#bgTop, #bgMiddle, #bgBottom {
opacity: 1.0;
transition: opacity .35s linear;
position: absolute;
@ -48,15 +48,15 @@ body {
z-index: -5;
}
.bgTop {
#bgTop {
top: 0px;
}
.bgMiddle {
#bgMiddle {
top: 30%;
}
.bgBottom {
#bgBottom {
bottom: 0px;
}

View File

@ -1,5 +1,5 @@
// CENTER PANEL
.centerpanel {
#centerpanel {
position: absolute;
left: 50%;
margin-left: -@center-panel-width/2;
@ -9,20 +9,20 @@
border: 1px solid red;
}
.logopanel {
#logopanel {
height: 15%;
text-align: center;
width: 40%;
margin-left: 30%;
cursor: pointer;
img.pencil {
img#pencil {
margin-top: 2%;
max-width: 50%;
max-height: 50%;
}
img.logo {
img#logo {
max-width: 90%;
margin-bottom: 2%;
max-height: 45%;
@ -30,7 +30,7 @@
}
// DRAW AREA
.drawareacontainer {
#drawareacontainer {
position: relative;
width: 100%;
height: 79%;
@ -99,20 +99,20 @@
@media screen and (max-height: 655px) {
.logopanel {
#logopanel {
height: 10%;
img.logo {
img#logo {
margin-top: 1%;
max-height: 90%;
}
img.pencil {
img#pencil {
display: none;
}
}
.drawareacontainer {
#drawareacontainer {
height: 83%;
}

View File

@ -1,5 +1,5 @@
// LEFT PANEL
.leftpanel {
#leftpanel {
position: absolute;
width: @left-panel-width;
top: 0px;

View File

@ -1,5 +1,5 @@
// RIGHT PANEL
.rightpanel {
#rightpanel {
position: absolute;
width: @right-panel-width;
top: 0;

View File

@ -9,7 +9,7 @@
cursor: default;
}
.btnPrint {
#btnPrint {
margin: 1% 5% 5% 0%;
width: 90%;
max-width: 163px;
@ -17,7 +17,7 @@
float: right;
}
.btnStop {
#btnStop {
margin: 5% 5% 1% 5%;
float: right;
width: 80%;
@ -25,7 +25,7 @@
height: auto;
}
.btnsSettingsInfo {
#btnsSettingsInfo {
position: absolute;
bottom: 4%; //25px;
right: 5px;
@ -34,58 +34,59 @@
max-width: 160px;
}
.btnInfo {
#btnInfo {
width: 40%;
max-width: 53px;
height: auto;
}
.btnSettings {
#btnSettings {
width: 40%;
max-width: 53px;
height: auto;
float: right;
}
.btnNew {
#btnNew {
margin: 5% 0% 1% 5%;
width: 90%;
max-width: 130px;
height: auto;
}
.btnsPrevNext {
#btnsPrevNext {
margin: 1% 7%;
max-width: 100px;
text-align:center;
}
.btnPrevious {
#btnPrevious {
width: 40%;
max-width: 56px;
height: auto;
}
.btnNext {
#btnNext {
width: 40%;
max-width: 56px;
height: auto;
float: right;
}
.btnSave {
#btnSave {
margin: 4% 5% 1% 5%;
width: 90%;
max-width: 100px;
height: auto;
}
.btnOops {
#btnOops {
margin: 5% 5% 1% 5%;
width: 90%;
max-width: 100px;
height: auto;
}
.btnAdd {
#btnAdd {
width: 90%;
max-width: 100px;
margin: 5% 5% 1% 5%;
@ -117,14 +118,14 @@
display: none;
}
.btnEditClosed {
#btnEditClosed {
top: 5px;
left: 5px;
width: .75*31px;
position: absolute;
}
.btnEditOpen {
#btnEditOpen {
position: absolute;
top: 5px;
left: 5px;
@ -132,14 +133,14 @@
display: none;
}
.btnAddOpen {
/*#btnAddOpen {
position: absolute;
top: 370px;
left: 60px;
z-index: 1000;
width: 200%;
display: none;
}
}*/
.buttonGroup {
background-color: white;
@ -157,13 +158,13 @@
left: 60px;
width: 140px; /*fixme: can this grow based on it's content?*/
.btnWordArt, .btnShape {
#btnWordArt, #btnShape {
width: 60px; /* scaled down >50% */
float: left;
}
}
.buttonGroupVertical {
#buttonGroupVerticalShapes {
top: 10px;
left: 10px;
padding-top: 20px;
@ -174,7 +175,7 @@
}
}
.btnToggleVertical {
#btnToggleVertical {
position: absolute;
top: 0;
left: 10px;

View File

@ -2,25 +2,25 @@
/*
LEFT
*/
.leftpanel {
#leftpanel {
// width: @mobilePanelsWidth;
.btnNew {
#btnNew {
margin: 5% 5% 1% 5%;
width: 90%;
}
.btnSave {
#btnSave {
margin-left: 5%;
width: 90%;
}
.btnOops {
#btnOops {
margin-left: 5%;
width: 90%;
}
.btnAdd {
#btnAdd {
margin-left: 5%;
width: 90%;
}
@ -29,15 +29,15 @@
/*
RIGHT
*/
.rightpanel {
#rightpanel {
// width: @mobilePanelsWidth;
// margin-top: 5%; /* reserve space for 'status message' in right top */
.btnPrint {
#btnPrint {
margin: 1% 5% 5% 5%;
width: 90%;
}
.btnStop {
#btnStop {
margin: 5% 6% 1% 5%;
width: 70%;
}

View File

@ -34,39 +34,39 @@
display: none;
}
.popup.popupWordArt {
#popupWordArt {
width: 50%;
margin-left: -50%/2;
input[type="text"] {
width: 100%;
}
#btnWordArtOk {
float: right;
margin: 15px 0 18px 0;
}
}
.popup.popupShape {
width: 30%;
#popupShape {
width: 30%;
margin-left: -30%/2;
}
.popupWordArt input[type="text"] {
width: 100%;
}
.popupShape {
// border: 2px solid black;
}
#shapePreview {
// width: 150px;
// height: 150px;
border: 1px solid black;
border-radius: 5px;
}
.lblShapeResolution {
display: inline-block;
}
#btnShapeOk {
position: absolute;
bottom: 5%;
right: 3%;
#shapePreview {
// width: 150px;
// height: 150px;
border: 1px solid black;
border-radius: 5px;
}
.lblShapeResolution {
display: inline-block;
}
#btnShapeOk {
position: absolute;
bottom: 5%;
right: 3%;
}
}
.columnRight {

View File

@ -6,7 +6,7 @@
display: block;
}
.vertImage {
#vertImage {
margin: 0;
padding: 0;
/*border: 2px solid #f0f;*/

View File

@ -3,7 +3,7 @@
PROGRESS GUAGE
*/
.progressbarCanvasContainerParent {
#progressbarCanvasContainerParent {
position:relative;
width:100%;
}

View File

@ -37,12 +37,12 @@
.toppanel {
height: 10%;
.settingsLabelContainer {
#settingsLabelContainer {
width: 100%;
height: auto;
margin-bottom: 1%;
.settingsLabelImg {
#settingsLabelImg {
width: 45%;
max-width: 373px;
height: auto;
@ -53,7 +53,7 @@
width: 100%;
height: 90%;
> .settingsContainer {
> #settingsContainer {
float:left;
width: 83%;
height: 98%;

View File

@ -4,7 +4,7 @@
THERMOMETER
*/
.thermometerContainerParent {
#thermometerContainerParent {
position:relative;
width:100%;
padding-top: 10px;

View File

@ -18,41 +18,40 @@
<!-- background images -->
<div class="bgContainer">
<img class="bgTop" src="img/bg_top.png" />
<img class="bgMiddle" src="img/bg_middle.png" />
<img class="bgBottom" src="img/bg_bottom.png" />
<img id="bgTop" src="img/bg_top.png" />
<img id="bgMiddle" src="img/bg_middle.png" />
<img id="bgBottom" src="img/bg_bottom.png" />
</div>
<!-- left panel -->
<div class="leftpanel">
<!-- <div class='sidebutton shadowright'></div> -->
<img class="btnNew btn" src="img/buttons/btnNew.png" /><br/>
<div class="btnsPrevNext" style="text-align:center">
<img class="btnPrevious btn disabled" src="img/buttons/btnLeft.png">
<img class="btnNext btn disabled" src="img/buttons/btnRight.png">
<div id="leftpanel">
<img id="btnNew" class="btn" src="img/buttons/btnNew.png" /><br/>
<div id="btnsPrevNext">
<img id="btnPrevious" class="btn disabled" src="img/buttons/btnLeft.png">
<img id="btnNext" class="btn disabled" src="img/buttons/btnRight.png">
</div>
<img class="btnSave btn" src="img/buttons/btnSave.png" /><br/>
<img class="btnOops btn" src="img/buttons/btnOops.png" /><br/>
<img class="btnAdd btn" src="img/buttons/btnAdd.png" /><br/>
<img id="btnSave" class="btn" src="img/buttons/btnSave.png" /><br/>
<img id="btnOops" class="btn" src="img/buttons/btnOops.png" /><br/>
<img id="btnAdd" class="btn" src="img/buttons/btnAdd.png" /><br/>
<div class="buttonGroup" id="buttonGroupAdd">
<img class="btnWordArt btn" src="img/buttons/btnWordArt.png" />
<img class="btnShape btn" src="img/buttons/btnShape.png" />
<div id="buttonGroupAdd" class="buttonGroup">
<img id="btnWordArt" class="btn" src="img/buttons/btnWordArt.png" />
<img id="btnShape" class="btn" src="img/buttons/btnShape.png" />
</div>
</div>
<!-- right panel -->
<div class="rightpanel">
<img class="btnPrint btn clearfix" src="img/buttons/btnPrint.png" />
<img class="btnStop btn clearfix disabled" src="img/buttons/btnStop.png" />
<div id="rightpanel">
<img id="btnPrint" class="btn clearfix" src="img/buttons/btnPrint.png" />
<img id="btnStop" class="btn clearfix disabled" src="img/buttons/btnStop.png" />
<div class="progressbarCanvasContainerParent">
<div id="progressbarCanvasContainerParent">
<div id="progressbarCanvasContainer">
<canvas id="progressbarCanvas" width="93" height="82"></canvas>
</div>
</div>
<div class="thermometerContainerParent">
<div id="thermometerContainerParent">
<div id="thermometerContainer">
<canvas id="thermometerCanvas" width="90" height="120"></canvas>
</div>
@ -69,25 +68,24 @@
<div><img class="verticalshape sinus" src="img/vertical_shape_icons/sinus.png" /></div>
</div> -->
<div class="btnsSettingsInfo">
<img class="btnSettings btn" src="img/buttons/btnSettings.png">
<img class="btnInfo btn" src="img/buttons/btnInfo.png">
<div id="btnsSettingsInfo">
<img id="btnSettings" class="btn" src="img/buttons/btnSettings.png">
<img id="btnInfo" class="btn" src="img/buttons/btnInfo.png">
</div>
</div>
<div id="message"></div>
<!-- center panel -->
<div class="centerpanel">
<div id="centerpanel">
<div class="logopanel" onclick="location.reload()">
<img class="pencil" src="img/logo/pencil.png"/>
<img class="logo" src="img/logo/doodle3d.png"/>
<div id="logopanel" onclick="location.reload()">
<img id="pencil" src="img/logo/pencil.png"/>
<img id="logo" src="img/logo/doodle3d.png"/>
</div>
<div class="drawareacontainer">
<div id="drawareacontainer">
<div id="canvasContainers">
<div id="mycanvasContainer">
@ -96,25 +94,25 @@
<div id="previewContainer">
<canvas id="preview"></canvas>
<div class="buttonGroup buttonGroupVertical">
<img class="btn btnTwistLeft" src="img/buttons/btnTwistLeft.png" />
<img class="btn btnTwistRight" src="img/buttons/btnTwistRight.png" />
<img class="btn btnUp" src="img/buttons/btnUp.png" />
<img class="btn btnDown" src="img/buttons/btnDown.png" />
<div id="buttonGroupVerticalShapes" class="buttonGroup">
<img id="btnTwistLeft" class="btn" src="img/buttons/btnTwistLeft.png" />
<img id="btnTwistRight" class="btn" src="img/buttons/btnTwistRight.png" />
<img id="btnUp" class="btn" src="img/buttons/btnUp.png" />
<img id="btnDown" class="btn" src="img/buttons/btnDown.png" />
<hr>
<img class="btn btnConv" src="img/buttons/btnConv.png" />
<img class="btn btnDiv" src="img/buttons/btnDiv.png" />
<img class="btn btnSine" src="img/buttons/btnSine.png" />
<img class="btn btnStraight" src="img/buttons/btnStraight.png" />
<img id="btnConv" class="btn" src="img/buttons/btnConv.png" />
<img id="btnDiv" class="btn" src="img/buttons/btnDiv.png" />
<img id="btnSine" class="btn" src="img/buttons/btnSine.png" />
<img id="btnStraight" class="btn" src="img/buttons/btnStraight.png" />
</div>
<img class="btn btnToggleVertical" src="img/buttons/btnArrowOpen.png" />
<img id="btnToggleVertical" class="btn" src="img/buttons/btnArrowOpen.png" />
</div>
</div>
<canvas id="preview_tmp"></canvas>
<img class="btnEditClosed btn" src="img/buttons/btnEditClosed.png" />
<img class="btnEditOpen btn" src="img/buttons/btnEditOpen.png" />
<img id="btnEditClosed" class="btn" src="img/buttons/btnEditClosed.png" />
<img id="btnEditOpen" class="btn" src="img/buttons/btnEditOpen.png" />
</div>
</div>
@ -127,16 +125,16 @@
<div id="popupMask"></div>
<div class="popup popupWordArt">
<div class="popup" id="popupWordArt">
<div class="content">
<h1>Add WordArt</h1>
Please enter your text:<br>
<input class="txtWordArt" type="text"/>
<img class="btn btnWordArtOk" src="img/buttons/btnOk.png">
<input id="txtWordArt" type="text"/>
<img id="btnWordArtOk" class="btn" src="img/buttons/btnOk.png">
</div>
</div>
<div class="popup popupShape">
<div class="popup" id="popupShape">
<div class="content">
<h1>Add a new shape</h1>
<div class="columnRight">
@ -152,12 +150,12 @@
<div id="contentOverlay">
<div id="settings">
<div class="toppanel">
<div class="settingsLabelContainer">
<img class="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
<div id="settingsLabelContainer">
<img id="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
</div>
</div>
<div class="bottompanel">
<div class="settingsContainer"></div>
<div id="settingsContainer"></div>
<div class="right">
<div class="btnContainer">
<img src="img/buttons/btnOk.png" class="btn btnOK" alt="save"/>
@ -169,7 +167,7 @@
</div>
<div id="portrait">
<img class="vertImage" src="img/bg_vertical.png"/>
<img id="vertImage" src="img/bg_vertical.png"/>
</div>
<div id="helpContainer"></div>