mirror of
https://thingvellir.net/git/overte
synced 2025-03-27 23:52:03 +01:00
Fix Desktop painting weird behaviour when painting (painting surface not
always facing the user, this happened because of the change of the paint surface direction on the last commit) Fix brush tint (was just changing color in the last commit, now is blending with the brush, using a kind of luminance blend effect) Remove unecessary files.
This commit is contained in:
Artur Gomes
parent
2d2efab5ed
commit
108c02d05e
4 changed files with 135 additions and 140 deletions
|
|
@ -78,11 +78,17 @@
|
|||
MAX_POINTS_PER_LINE = 70; // Hard-coded limit in PolyLineEntityItem.h.
|
||||
|
||||
function strokeNormal() {
|
||||
var controllerPose = isLeftHandDominant
|
||||
if (!isMouseDrawing) {
|
||||
var controllerPose = isLeftHandDominant
|
||||
? getControllerWorldLocation(Controller.Standard.LeftHand, true)
|
||||
: getControllerWorldLocation(Controller.Standard.RightHand, true);
|
||||
var fingerTipRotation = controllerPose.rotation;
|
||||
return Quat.getUp(fingerTipRotation);
|
||||
var fingerTipRotation = controllerPose.rotation;
|
||||
return Quat.getUp(fingerTipRotation);
|
||||
|
||||
} else {
|
||||
return Vec3.multiplyQbyV(Camera.getOrientation(), Vec3.UNIT_NEG_Z);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function changeStrokeColor(red, green, blue) {
|
||||
|
|
@ -1157,16 +1163,22 @@
|
|||
function mouseDrawLine(event){
|
||||
if (rightBrush && rightBrush.isDrawing()) {
|
||||
print(JSON.stringify(event));
|
||||
rightBrush.drawLine(getFingerPosition(event.x, event.y), 0.03);
|
||||
rightBrush.drawLine(getFingerPosition(event.x, event.y), MAX_LINE_WIDTH);
|
||||
} else {
|
||||
print("cannot draw with mouse");
|
||||
}
|
||||
}
|
||||
|
||||
function mouseStartLine(event){
|
||||
print(JSON.stringify(event));
|
||||
if (event.isLeftButton && rightBrush) {
|
||||
rightBrush.startLine(getFingerPosition(event.x, event.y), 0.03);
|
||||
}
|
||||
//won't work until findRayIntersection works with polylines
|
||||
isMouseDrawing = true;
|
||||
rightBrush.startLine(getFingerPosition(event.x, event.y), MAX_LINE_WIDTH);
|
||||
} else {
|
||||
print("cannot draw with mouse");
|
||||
}
|
||||
//Note: won't work until findRayIntersection works with polylines
|
||||
//
|
||||
//else if (event.isMiddleButton) {
|
||||
// var pickRay = Camera.computePickRay(event.x, event.y);
|
||||
// var entityToDelete = Entities.findRayIntersection(pickRay, false, [Entities.findEntities(MyAvatar.position, 1000)], []);
|
||||
|
|
@ -1187,7 +1199,9 @@
|
|||
function mouseFinishLine(event){
|
||||
isMouseDrawing = false;
|
||||
if (rightBrush && rightBrush.isDrawing()) {
|
||||
rightBrush.finishLine(getFingerPosition(event.x, event.y), 0.03);
|
||||
rightBrush.finishLine(getFingerPosition(event.x, event.y), MAX_LINE_WIDTH);
|
||||
} else {
|
||||
print("cannot draw with mouse");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<script src="../../html/js/jquery-2.1.4.min.js"></script>
|
||||
|
||||
<style>
|
||||
/*range style: http://danielstern.ca/range.css/#/*/
|
||||
input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
background: #2e2e2e;
|
||||
|
|
@ -23,7 +22,7 @@
|
|||
input[type=range]::-webkit-slider-thumb:hover {
|
||||
background-color: white;
|
||||
}
|
||||
input[type=range]:focus { /*#252525*/
|
||||
input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
.sliderWrapper {
|
||||
|
|
@ -36,9 +35,10 @@
|
|||
height: 1.8rem;
|
||||
}
|
||||
.brushButton {
|
||||
width: 66px;
|
||||
background-color: #2e2e2e;
|
||||
border:none;
|
||||
position: relative;
|
||||
width: 66px;
|
||||
margin: 1px 0px;
|
||||
}
|
||||
.checkbox {
|
||||
|
|
@ -46,6 +46,14 @@
|
|||
}
|
||||
.BrushIcon {
|
||||
width: 100%;
|
||||
height: 66px;
|
||||
background-size: 75% 75%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-blend-mode: multiply;
|
||||
/*Just in case the user need to wait for the loading*/
|
||||
background-image: url("../../../../resources/icons/loadingDark.gif");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
}
|
||||
#dynamicBrush {
|
||||
margin: 20px 0;
|
||||
|
|
@ -61,10 +69,11 @@
|
|||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-image: url("../content/chosen.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#brushesCointainer {
|
||||
margin-bottom: 50px;
|
||||
|
|
@ -73,14 +82,14 @@
|
|||
display: block;
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
visibility: hidden;
|
||||
}
|
||||
.brushLabel {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
color: white;
|
||||
width: 100%;
|
||||
z-index: 800;
|
||||
z-index: 2;
|
||||
word-wrap: break-word;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
|
|
@ -88,12 +97,14 @@
|
|||
#strokeWidthWidget {
|
||||
position: fixed;
|
||||
background-color: #404040;
|
||||
z-index: 2;
|
||||
z-index: 3;
|
||||
top: -1px;
|
||||
margin: 0px;
|
||||
padding: 15px 0px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div id="strokeWidthWidget" class="property range">
|
||||
|
|
@ -143,504 +154,504 @@
|
|||
<div id="brushesCointainer">
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/basic.png" onclick="changePaintBrush(0)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256/basic.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256/basic.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">basic A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/basic.png" onclick="changePaintBrush(1)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256/basic.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256/basic.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">basic B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/bristle.png" onclick="changePaintBrush(2)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256/bristle.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256/bristle.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">bristle A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/bristle.png" onclick="changePaintBrush(3)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256/bristle.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256/bristle.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">bristle B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/dupuiz.png" onclick="changePaintBrush(4)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256/dupuiz.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256/dupuiz.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">dupuiz A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/dupuiz.png" onclick="changePaintBrush(5)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256/dupuiz.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256/dupuiz.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">dupuiz B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/gouache.png" onclick="changePaintBrush(6)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256/gouache.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256/gouache.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gouache A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/gouache.png" onclick="changePaintBrush(7)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256/gouache.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256/gouache.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gouache B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/graphite.png" onclick="changePaintBrush(8)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256/graphite.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256/graphite.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">graphite A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/graphite.png" onclick="changePaintBrush(9)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256/graphite.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256/graphite.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">graphite B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/spat-fine.png" onclick="changePaintBrush(10)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256/spat-fine.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256/spat-fine.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">spat-fine A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/spat-fine.png" onclick="changePaintBrush(11)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256/spat-fine.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256/spat-fine.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">spat-fine B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/spat-medium.png" onclick="changePaintBrush(12)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256/spat-medium.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256/spat-medium.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">spat-medium A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/spat-medium.png" onclick="changePaintBrush(13)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256/spat-medium.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256/spat-medium.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">spat-medium B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/sponge.png" onclick="changePaintBrush(14)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256/sponge.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256/sponge.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">sponge A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/sponge.png" onclick="changePaintBrush(15)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256/sponge.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256/sponge.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">sponge B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256stretched/basic.png" onclick="changePaintBrush(16)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256stretched/basic.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256stretched/basic.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">basic A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/basic.png" onclick="changePaintBrush(17)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256stretched/basic.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256stretched/basic.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">basic B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256stretched/bristle.png" onclick="changePaintBrush(18)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256stretched/bristle.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256stretched/bristle.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">bristle A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/bristle.png" onclick="changePaintBrush(19)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256stretched/bristle.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256stretched/bristle.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">bristle B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256stretched/gouache.png" onclick="changePaintBrush(20)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256stretched/gouache.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256stretched/gouache.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gouache A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/gouache.png" onclick="changePaintBrush(21)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256stretched/gouache.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256stretched/gouache.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gouache B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256stretched/sponge.png" onclick="changePaintBrush(22)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256stretched/sponge.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256stretched/sponge.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">sponge A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/sponge.png" onclick="changePaintBrush(23)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/256x256stretched/sponge.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/256x256stretched/sponge.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">sponge B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/basic.png" onclick="changePaintBrush(24)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/basic.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/basic.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">basic A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/basic.png" onclick="changePaintBrush(25)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/basic.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/basic.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">basic B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/bristle.png" onclick="changePaintBrush(26)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/bristle.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/bristle.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">bristle A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/bristle.png" onclick="changePaintBrush(27)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/bristle.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/bristle.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">bristle B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/gouache.png" onclick="changePaintBrush(28)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/gouache.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/gouache.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gouache A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gouache.png" onclick="changePaintBrush(29)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/gouache.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/gouache.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gouache B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/gradient.png" onclick="changePaintBrush(30)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/gradient.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/gradient.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gradient A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gradient.png" onclick="changePaintBrush(31)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/gradient.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/gradient.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gradient B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/gradient2.png" onclick="changePaintBrush(32)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/gradient2.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/gradient2.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gradient2 A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gradient2.png" onclick="changePaintBrush(33)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/gradient2.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/gradient2.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gradient2 B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/gradient3.png" onclick="changePaintBrush(34)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/gradient3.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/gradient3.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gradient3 A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gradient3.png" onclick="changePaintBrush(35)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/gradient3.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/gradient3.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">gradient3 B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/koons.png" onclick="changePaintBrush(36)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/koons.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/koons.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">koons A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/koons.png" onclick="changePaintBrush(37)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/koons.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/koons.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">koons B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/oil.png" onclick="changePaintBrush(38)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/oil.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/oil.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">oil A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/oil.png" onclick="changePaintBrush(39)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/oil.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/oil.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">oil B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush1.png" onclick="changePaintBrush(40)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/paintbrush1.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/paintbrush1.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush1 A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush1.png" onclick="changePaintBrush(41)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/paintbrush1.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/paintbrush1.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush1 B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush2.png" onclick="changePaintBrush(42)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/paintbrush2.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/paintbrush2.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush2 A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush2.png" onclick="changePaintBrush(43)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/paintbrush2.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/paintbrush2.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush2 B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush3.png" onclick="changePaintBrush(44)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/paintbrush3.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/paintbrush3.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush3 A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush3.png" onclick="changePaintBrush(45)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/paintbrush3.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/paintbrush3.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush3 B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush4.png" onclick="changePaintBrush(46)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/paintbrush4.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/paintbrush4.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush4 A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush4.png" onclick="changePaintBrush(47)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/paintbrush4.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/paintbrush4.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush4 B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush5.png" onclick="changePaintBrush(48)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/paintbrush5.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/paintbrush5.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush5 A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush5.png" onclick="changePaintBrush(49)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/paintbrush5.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/paintbrush5.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush5 B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush6.png" onclick="changePaintBrush(50)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/paintbrush6.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/paintbrush6.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush6 A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush6.png" onclick="changePaintBrush(51)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/paintbrush6.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/paintbrush6.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">paintbrush6 B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/pastel.png" onclick="changePaintBrush(52)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/pastel.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/pastel.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">pastel A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/pastel.png" onclick="changePaintBrush(53)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/pastel.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/pastel.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">pastel B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/soft.png" onclick="changePaintBrush(54)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/soft.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/soft.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">soft A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/soft.png" onclick="changePaintBrush(55)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/soft.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/soft.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">soft B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/sponge.png" onclick="changePaintBrush(56)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/sponge.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/sponge.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">sponge A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/sponge.png" onclick="changePaintBrush(57)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/sponge.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/sponge.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">sponge B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/square.png" onclick="changePaintBrush(58)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/square.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/square.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">square A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/square.png" onclick="changePaintBrush(59)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/square.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/square.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">square B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/breakfast.png" onclick="changePaintBrush(60)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/colored/breakfast.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/colored/breakfast.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">breakfast A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/breakfast.png" onclick="changePaintBrush(61)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/colored/breakfast.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/colored/breakfast.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">breakfast B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/chique.png" onclick="changePaintBrush(62)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/colored/chique.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/colored/chique.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">chique A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/chique.png" onclick="changePaintBrush(63)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/colored/chique.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/colored/chique.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">chique B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/hawaii.png" onclick="changePaintBrush(64)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/colored/hawaii.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/colored/hawaii.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">hawaii A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/hawaii.png" onclick="changePaintBrush(65)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/colored/hawaii.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/colored/hawaii.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">hawaii B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/newton.png" onclick="changePaintBrush(66)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/colored/newton.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/colored/newton.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">newton A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/newton.png" onclick="changePaintBrush(67)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/colored/newton.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/colored/newton.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">newton B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/pastels.png" onclick="changePaintBrush(68)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/colored/pastels.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/colored/pastels.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">pastels A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/pastels.png" onclick="changePaintBrush(69)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/colored/pastels.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/colored/pastels.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">pastels B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/softy.png" onclick="changePaintBrush(70)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/colored/softy.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/colored/softy.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">softy A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/softy.png" onclick="changePaintBrush(71)">
|
||||
<div class="imageContainer">
|
||||
<img src="../content/brushes/colored/softy.png" class="BrushIcon"/>
|
||||
<div imageSrc="../content/brushes/colored/softy.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">softy B</div>
|
||||
</button>
|
||||
|
|
@ -685,6 +696,7 @@
|
|||
|
||||
var selectedOverlay = document.createElement("div");
|
||||
selectedOverlay.id = "selectedOverlay";
|
||||
selectedOverlay.innerHTML = "✔";
|
||||
brushes[currentBrush].children[0].appendChild(selectedOverlay);
|
||||
|
||||
var changedBrushEvent = {
|
||||
|
|
@ -738,18 +750,27 @@
|
|||
parent.postMessage(JSON.stringify(switchDynamicBrushEvent), "*");
|
||||
}
|
||||
|
||||
function resizeImage(image, width, height) {
|
||||
var height = height == width ? "66px" : "33px";
|
||||
image.css("height", height);
|
||||
image.first().css("background-image", "url(" + image.attr('imageSrc') + ")");
|
||||
image.first().css("background-size", "contain");
|
||||
}
|
||||
|
||||
function setStrokeColor(strokeColor) {
|
||||
$(".imageContainer").each(function( index ) {
|
||||
//"background-color", "rgb(" + strokeColor.red + ", " + strokeColor.green + ", " + strokeColor.blue + ")");
|
||||
/*$(this).find('img').css("-webkit-mask", "url(" + $(this).find('img').attr('imageSrc') + ") center center");
|
||||
$(this).find('img').css("-webkit-mask-repeat", "no-repeat");
|
||||
$(this).find('img').css("-webkit-mask-size", "contain");*/
|
||||
$(this).find('img').css("background-color", "rgb(" + strokeColor.red + ", " + strokeColor.green + ", " + strokeColor.blue + ")");
|
||||
/*$(this).find('img').css("-webkit-mask-source-type", "luminance");
|
||||
$(this).find('img').css("stuff", "blue");
|
||||
$(this).find('img').css("width", "66px");
|
||||
$(this).find('img').css("height", "66px");*/
|
||||
$(this).css("visibility", "visible");
|
||||
//recalculate the image height so it keeps the aspect ratio
|
||||
var image = new Image();
|
||||
image.src = $(this).find('div').first().attr('imageSrc');
|
||||
var img = $(this).find('div').first();
|
||||
image.addEventListener("load", function(){
|
||||
resizeImage(img, this.naturalWidth, this.naturalHeight);
|
||||
});
|
||||
|
||||
if (!$(this).parent().attr("colored")) {
|
||||
$(this).find('div').first().css("-webkit-mask-box-image", "url(" + $(this).find('div').first().attr('imageSrc') + ")");
|
||||
$(this).find('div').first().css("background-color", "rgb(" + strokeColor.red + ", " + strokeColor.green + ", " + strokeColor.blue + ")");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
<!--Note: change the parent postmessage second parameter due to possible security issues-->
|
||||
<link rel="stylesheet" type="text/css" href="../../html/css/edit-style.css">
|
||||
|
||||
<style type="text/css">
|
||||
#undo {
|
||||
width: 438px;
|
||||
height: 200px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
<!--<button id="undoButton" onclick="undo()">Undo</button>-->
|
||||
<input type="button" value="undo" disabled id="undo" onclick="undo()"></input>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
function undo() {
|
||||
var undoEvent = {
|
||||
"type" : "undo"
|
||||
};
|
||||
parent.postMessage(JSON.stringify(undoEvent), "*");
|
||||
}
|
||||
window.addEventListener("message", setUndoState, false);
|
||||
function setUndoState(message) {
|
||||
//document.getElementById("message").innerHTML = "message received!";
|
||||
var event = JSON.parse(message.data);
|
||||
if (!event.value) {
|
||||
document.getElementById("undo").removeAttribute("disabled");
|
||||
} else {
|
||||
document.getElementById("undo").setAttribute("disabled", event.value);
|
||||
}
|
||||
}
|
||||
|
||||
restoreUndoState(JSON.parse(decodeURIComponent(window.parent.location.search).substring(1)));
|
||||
function restoreUndoState(undoState) {
|
||||
setUndoState({data: JSON.stringify({value: undoState.undoDisable})});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -54,14 +54,12 @@
|
|||
<div id="tabs">
|
||||
<span class="tabButton" onclick="selectTab(0)"><img class="tabIcon" src="../content/tabicons/colorpaletteBtn.png"/>Palette</span>
|
||||
<span class="tabButton" onclick="selectTab(1)"><img class="tabIcon" src="../content/tabicons/brushesBtn.png"/>Brushes</span>
|
||||
<!--<span class="tabButton" onclick="selectTab(2)"><img class="tabIcon" src="../content/tabicons/eraser.png"/>Undo</span>-->
|
||||
<span class="tabButton" onclick="selectTab(2)"><img class="tabIcon" src="../content/tabicons/pointingfinger128px.png"/>Hand</span>
|
||||
<input type="button" onclick="undo()" id="undoButton" style="font-family: Font-Awesome;" disabled class="grayButton glyph" value=""/>
|
||||
</div>
|
||||
<div id="content">
|
||||
<iframe frameborder="0" lastState="window.location.search" onload="frameLoaded(this)" src="colorsTab.html" id="colorTab" seamless></iframe>
|
||||
<iframe frameborder="0" lastState="window.location.search" onload="frameLoaded(this)" src="brushesTab.html" id="brushesTab" seamless style="display: none"></iframe>
|
||||
<!--<iframe frameborder="0" lastState="window.location.search" onload="frameLoaded(this)" src="eraserTab.html" id="eraserTab" seamless style="display: none"></iframe>-->
|
||||
<iframe frameborder="0" lastState="window.location.search" onload="frameLoaded(this)" src="chooseHandTab.html" id="chooseHandTab" seamless style="display: none"></iframe>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue