vmario
/
doodle3d-client
mirror of https://github.com/Doodle3D/doodle3d-client.git
0
0
Fork 0
Code Issues Releases Wiki Activity

New Twist and Height buttons

This commit is contained in:
peteruithoven 2014-01-16 16:07:40 +01:00
parent 0b908a8f44
commit e9a2b90483
10 changed files with 52 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/buttons/btnArrow.xcf
View File

Binary file not shown.

BIN
img/buttons/btnHeight.xcf Normal file
View File

Binary file not shown.

BIN
img/buttons/btnMove.xcf
View File

Binary file not shown.

BIN
img/buttons/btnTwist.xcf Normal file
View File

Binary file not shown.

88
js/buttonbehaviors.js
View File

@ -3,7 +3,7 @@ var twistIncrement = Math.PI/1800;
var btnNew, btnPrevious, btnNext, btnOops, btnStop, btnInfo;
var btnSettings, btnWordArt;
var btnToggleEdit, buttonGroupEdit, btnZoom, btnMove, btnRotate;
var btnToggleVerticalShapes, btnUpDown, btnTwist, btnShape, btnConv, btnStraight, btnSine, btnDiv;
var btnToggleVerticalShapes, btnHeight, btnTwist, btnShape, btnConv, btnStraight, btnSine, btnDiv;
var buttonGroupAdd, popupWordArt;
var state;
@ -27,29 +27,27 @@ function initButtonBehavior() {
btnPrevious = $("#btnPrevious");
btnNext = $("#btnNext");
btnSave = $("#btnSave");
btnWordArt = $("#btnWordArt");
btnZoom = $("#btnZoom");
btnUp = $("#btnUp");
btnDown = $("#btnDown");
btnMove = $("#btnMove");
btnTwistLeft = $("#btnTwistLeft");
btnTwistRight = $("#btnTwistRight");
btnShape = $("#btnShape");
btnRotate = $("#btnRotate");
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");
btnToggleVerticalShapes = $("#btnToggleVerticalShapes");
buttonGroupAdd = $("#buttonGroupAdd");
buttonGroupVerticalShapes = $("#buttonGroupVerticalShapes");
popupWordArt = $("#popupWordArt");
popupShape = $("#popupShape");
popupMask = $("#popupMask");
logoPanel = $("#logopanel");
logoPanel.on("onButtonClick", onLogo);
btnNew.on("onButtonClick", onBtnNew);
@ -60,10 +58,8 @@ function initButtonBehavior() {
btnOops.on("onButtonHold", onBtnOops);
// vertical shape buttons
btnToggleVerticalShapes.on("onButtonClick", onBtnToggleVerticalShapes);
btnUp.on("onButtonHold", onBtnUp);
btnDown.on("onButtonHold", onBtnDown);
btnTwistLeft.on("onButtonHold", onBtnTwistLeft);
btnTwistRight.on("onButtonHold", onBtnTwistRight);
btnHeight.on("onButtonHold", onBtnHeight);
btnTwist.on("onButtonHold", onBtnTwist);
btnStraight.on("onButtonClick", onBtnStraight);
btnDiv.on("onButtonClick", onBtnDiv);
btnConv.on("onButtonClick", onBtnConv);
@ -141,25 +137,21 @@ function initButtonBehavior() {
function onBtnRotate(e,cursor) {
var h = btnZoom.height();
var multiplier = (h/2-cursor.y)*0.003;
rotateShape(-multiplier);
//if (cursor.y<25) rotateShape(.1);
//else if (cursor.y>55) rotateShape(-.1);
rotateShape(-multiplier);
}
function onBtnUp(e) {
previewUp(true);
function onBtnHeight(e,cursor) {
var h = btnHeight.height();
if(cursor.y < h/2) {
previewUp(true);
} else {
previewDown(true);
}
}
function onBtnDown(e) {
previewDown(true);
}
function onBtnTwistLeft(e) {
previewTwistLeft(true);
}
function onBtnTwistRight(e) {
previewTwistRight(true);
function onBtnTwist(e,cursor) {
var h = btnTwist.height();
var multiplier = (cursor.y-h/2)*0.0005;
previewTwist(multiplier,true);
}
function onBtnOops(e) {
@ -313,17 +305,19 @@ function previewDown(redrawLess) {
redrawRenderedPreview(redrawLess);
}
function previewTwistLeft(redrawLess) {
if (redrawLess == undefined) redrawLess = false;
// console.log("f:previewTwistLeft()");
if (rStep > -previewRotationLimit) rStep -= twistIncrement;
// redrawPreview(redrawLess);
redrawRenderedPreview(redrawLess);
setSketchModified(true);
previewTwist(-twistIncrement,true)
}
function previewTwistRight(redrawLess) {
// console.log("f:previewTwistRight()");
if (rStep < previewRotationLimit) rStep += twistIncrement;
// redrawPreview(redrawLess);
previewTwist(twistIncrement,true)
}
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);
setSketchModified(true);
}

5
less/buttons.less
View File

@ -161,7 +161,8 @@
}*/
.buttonGroup {
background-color: white;
/*background-color: white;*/
background-color: #fff;
position: absolute;
border: 3px solid black;
border-radius: 40px;
@ -185,7 +186,7 @@
#buttonGroupVerticalShapes {
top: 7px;
left: 8px;
padding-top: 20px;
padding: 12px 7px 7px 9px;
width: 65px;
.btn {

BIN
www/img/buttons/btnArrowClose.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
www/img/buttons/btnHeight.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
www/img/buttons/btnTwist.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

29
www/index.html
View File

@ -56,18 +56,6 @@
<canvas id="thermometerCanvas" width="90" height="120"></canvas>
</div>
</div>
<!-- <div id="verticalShapes">
<img class="btn btnVertical btnStraight" src="img/buttons/btnStraight.png"/>
<img class="btn btnVertical btnDiv" src="img/buttons/btnDiv.png"/>
<img class="btn btnVertical btnConv" src="img/buttons/btnConv.png"/>
<img class="btn btnVertical btnSine" src="img/buttons/btnSine.png"/>
<div><img class="verticalshape straight" src="img/vertical_shape_icons/straight.png" /></div>
<div><img class="verticalshape diverging" src="img/vertical_shape_icons/diverging.png" /></div>
<div><img class="verticalshape converging" src="img/vertical_shape_icons/converging.png" /></div>
<div><img class="verticalshape sinus" src="img/vertical_shape_icons/sinus.png" /></div>
</div> -->
<div id="btnsSettingsInfo">
<img id="btnSettings" class="btn" src="img/buttons/btnSettings.png">
<img id="btnInfo" class="btn" src="img/buttons/btnInfo.png">
@ -95,15 +83,14 @@
<div id="previewContainer">
<canvas id="preview"></canvas>
<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 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" />
<img id="btnTwist" class="btn" src="img/buttons/btnTwist.png" />
<img id="btnHeight" class="btn" src="img/buttons/btnHeight.png" />
<div id="verticalShapes">
<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>
</div>
<img id="btnToggleVerticalShapes" class="btn" src="img/buttons/btnArrowClose.png" />
</div>