mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-08-04 00:33:11 +02:00
Add new Interface (more similar to the ui used on other apps)
Fix brush on repeat mode (keeps the the aspect ratio of the texture)
This commit is contained in:
Artur Gomes
parent
9d35cdcda3
commit
dffbc442be
10 changed files with 783 additions and 214 deletions
|
|
@ -144,9 +144,18 @@ void RenderablePolyLineEntityItem::updateGeometry() {
|
|||
float uCoord, vCoord;
|
||||
uCoord = 0.0f;
|
||||
float uCoordInc = 1.0 / (_vertices.size() / 2);
|
||||
float accumulatedDistance = 0;
|
||||
float distanceToLastPoint = 0;
|
||||
|
||||
for (int i = 0; i < _vertices.size() / 2; i++) {
|
||||
vCoord = 0.0f;
|
||||
|
||||
|
||||
if (!_isUVModeStretch && vertexIndex > 2) {
|
||||
distanceToLastPoint = glm::abs(glm::distance(_vertices.at(vertexIndex), _vertices.at(vertexIndex - 2)));
|
||||
float strokeWidth = i > 1 ? _strokeWidths[i] : (_strokeWidths[i - 2] + _strokeWidths[i - 1]) / 2;
|
||||
uCoord = (_textureAspectRatio * (accumulatedDistance + distanceToLastPoint)) / strokeWidth;
|
||||
accumulatedDistance += distanceToLastPoint;
|
||||
}
|
||||
|
||||
uv = vec2(uCoord, vCoord);
|
||||
|
||||
|
|
@ -164,15 +173,16 @@ void RenderablePolyLineEntityItem::updateGeometry() {
|
|||
_numVertices += 2;
|
||||
uCoord += uCoordInc;
|
||||
|
||||
if (!_isUVModeStretch) {
|
||||
if (i % 2 == 0) {
|
||||
uCoord = 1.0f;
|
||||
}
|
||||
else {
|
||||
uCoord = 0.0f;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
if (!_isUVModeStretch) {
|
||||
if (i % 2 == 0) {
|
||||
uCoord = 1.0f;
|
||||
} else {
|
||||
uCoord = 0.0f;
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
_pointsChanged = false;
|
||||
_normalsChanged = false;
|
||||
_strokeWidthsChanged = false;
|
||||
|
|
@ -300,7 +310,15 @@ void RenderablePolyLineEntityItem::render(RenderArgs* args) {
|
|||
} else {
|
||||
batch.setResourceTexture(PolyLinePayload::PAINTSTROKE_TEXTURE_SLOT, nullptr);
|
||||
}
|
||||
|
||||
|
||||
float textureWidth = (float)_texture->getOriginalWidth();
|
||||
float textureHeight = (float)_texture->getOriginalHeight();
|
||||
if (textureWidth != 0 && textureHeight != 0) {
|
||||
_textureAspectRatio = textureWidth < textureHeight
|
||||
? textureWidth / textureHeight
|
||||
: textureHeight / textureWidth;
|
||||
}
|
||||
|
||||
batch.setInputFormat(_format);
|
||||
batch.setInputBuffer(0, _verticesBuffer, 0, _format->getChannels().at(0)._stride);
|
||||
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ protected:
|
|||
gpu::BufferView _uniformBuffer;
|
||||
unsigned int _numVertices;
|
||||
bool _empty { true };
|
||||
float _textureAspectRatio = 1.0f;
|
||||
QVector<glm::vec3> _vertices;
|
||||
};
|
||||
|
||||
|
|
|
|||
BIN
scripts/system/fingerPaint/content/chosen.png
Normal file
BIN
scripts/system/fingerPaint/content/chosen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -59,6 +59,7 @@
|
|||
ERASE_SEARCH_RADIUS = 0.1, // m
|
||||
STROKE_DIMENSIONS = { x: 10, y: 10, z: 10 },
|
||||
isDrawingLine = false,
|
||||
isTriggerPressureWidthEnabled = savedSettings.currentTriggerWidthEnabled,
|
||||
entityID,
|
||||
basePosition,
|
||||
strokePoints,
|
||||
|
|
@ -92,8 +93,14 @@
|
|||
}
|
||||
|
||||
function changeStrokeWidthMultiplier(multiplier) {
|
||||
// MIN_STROKE_LENGTH = ((multiplier * MIN_STROKE_LENGTH) / 0.25)*0.5;
|
||||
//print("MIN_STROKE_LENGTH: " + MIN_STROKE_LENGTH);
|
||||
strokeWidthMultiplier = multiplier;
|
||||
}
|
||||
|
||||
function setTriggerPressureWidthEnabled(isEnabled) {
|
||||
isTriggerPressureWidthEnabled = isEnabled;
|
||||
}
|
||||
|
||||
function changeUVMode(isUVModeStretch) {
|
||||
IS_UV_MODE_STRETCH = isUVModeStretch;
|
||||
|
|
@ -118,12 +125,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
function calculateLineWidth(width) {
|
||||
if (isTriggerPressureWidthEnabled) {
|
||||
return width * strokeWidthMultiplier;
|
||||
} else {
|
||||
return 0.03 * strokeWidthMultiplier; //MAX_LINE_WIDTH
|
||||
}
|
||||
}
|
||||
|
||||
function startLine(position, width) {
|
||||
// Start drawing a polyline.
|
||||
if (isTabletFocused)
|
||||
return;
|
||||
|
||||
width = width * strokeWidthMultiplier;
|
||||
width = calculateLineWidth(width);
|
||||
|
||||
if (isDrawingLine) {
|
||||
print("ERROR: startLine() called when already drawing line");
|
||||
|
|
@ -160,8 +175,8 @@
|
|||
var localPosition,
|
||||
distanceToPrevious,
|
||||
MAX_DISTANCE_TO_PREVIOUS = 1.0;
|
||||
|
||||
width = width * strokeWidthMultiplier;
|
||||
|
||||
width = calculateLineWidth(width);
|
||||
|
||||
if (!isDrawingLine) {
|
||||
print("ERROR: drawLine() called when not drawing line");
|
||||
|
|
@ -197,17 +212,17 @@
|
|||
function finishLine(position, width) {
|
||||
// Finish drawing polyline; delete if it has only 1 point.
|
||||
//stopDynamicBrush = true;
|
||||
print("Before adding script: " + JSON.stringify(Entities.getEntityProperties(entityID)));
|
||||
//print("Before adding script: " + JSON.stringify(Entities.getEntityProperties(entityID)));
|
||||
var userData = Entities.getEntityProperties(entityID).userData;
|
||||
if (userData && JSON.parse(userData).animations) {
|
||||
Entities.editEntity(entityID, {
|
||||
script: ANIMATION_SCRIPT_PATH,
|
||||
});
|
||||
}
|
||||
print("After adding script: " + JSON.stringify(Entities.getEntityProperties(entityID)));
|
||||
//print("After adding script: " + JSON.stringify(Entities.getEntityProperties(entityID)));
|
||||
//setIsDrawingFingerPaint(entityID, false);
|
||||
print("already stopped drawing");
|
||||
width = width * strokeWidthMultiplier;
|
||||
//print("already stopped drawing");
|
||||
width = calculateLineWidth(width);
|
||||
|
||||
if (!isDrawingLine) {
|
||||
print("ERROR: finishLine() called when not drawing line");
|
||||
|
|
@ -220,7 +235,7 @@
|
|||
}
|
||||
|
||||
isDrawingLine = false;
|
||||
print("After adding script 3: " + JSON.stringify(Entities.getEntityProperties(entityID)));
|
||||
//print("After adding script 3: " + JSON.stringify(Entities.getEntityProperties(entityID)));
|
||||
}
|
||||
|
||||
function cancelLine() {
|
||||
|
|
@ -294,7 +309,8 @@
|
|||
getStrokeColor: getStrokeColor,
|
||||
getStrokeWidth: getStrokeWidth,
|
||||
getEntityID: getEntityID,
|
||||
changeUVMode: changeUVMode
|
||||
changeUVMode: changeUVMode,
|
||||
setTriggerPressureWidthEnabled: setTriggerPressureWidthEnabled
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -462,21 +478,21 @@
|
|||
|
||||
updateHandAnimations();
|
||||
pauseProcessing();
|
||||
print("Hovering tablet!");
|
||||
//print("Hovering tablet!");
|
||||
}
|
||||
} else {
|
||||
if (isTabletFocused) {
|
||||
print("Unhovering tablet!");
|
||||
//print("Unhovering tablet!");
|
||||
isTabletFocused = false;
|
||||
//isFingerPainting = true;
|
||||
Overlays.editOverlay(inkSourceOverlay, {visible: true});
|
||||
resumeProcessing();
|
||||
updateHandFunctions();
|
||||
//updateHandAnimations();
|
||||
print("Current hand " + handName);
|
||||
/*print("Current hand " + handName);
|
||||
print("isFingerPainting " + isFingerPainting);
|
||||
print("inkSourceOverlay " + JSON.stringify(inkSourceOverlay));
|
||||
print("inkSourceOverlay " + JSON.stringify(inkSourceOverlay));
|
||||
print("inkSourceOverlay " + JSON.stringify(inkSourceOverlay));*/
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -839,6 +855,7 @@
|
|||
savedSettings.currentDynamicBrushes = Settings.getValue("currentDynamicBrushes", []);
|
||||
savedSettings.customColors = Settings.getValue("customColors", []);
|
||||
savedSettings.currentTab = Settings.getValue("currentTab", 0);
|
||||
savedSettings.currentTriggerWidthEnabled = Settings.getValue("currentTriggerWidthEnabled", true);
|
||||
|
||||
print("Restoring data: " + JSON.stringify(savedSettings));
|
||||
isLeftHandDominant = savedSettings.currentDrawingHand;
|
||||
|
|
@ -897,7 +914,7 @@
|
|||
}
|
||||
switch (event.type) {
|
||||
case "ready":
|
||||
print("Setting up the tablet");
|
||||
//print("Setting up the tablet");
|
||||
tablet.emitScriptEvent(JSON.stringify(savedSettings));
|
||||
break;
|
||||
case "changeTab":
|
||||
|
|
@ -906,17 +923,22 @@
|
|||
case "changeColor":
|
||||
if (!isBrushColored) {
|
||||
Settings.setValue("currentColor", event);
|
||||
print("changing color...");
|
||||
//print("changing color...");
|
||||
leftBrush.changeStrokeColor(event.red, event.green, event.blue);
|
||||
rightBrush.changeStrokeColor(event.red, event.green, event.blue);
|
||||
Overlays.editOverlay(inkSourceOverlay, {
|
||||
color: {red: event.red, green: event.green, blue: event.blue}
|
||||
});
|
||||
|
||||
}
|
||||
break;
|
||||
case "switchTriggerPressureWidth":
|
||||
//print("changing pressure sensitive width...");
|
||||
Settings.setValue("currentTriggerWidthEnabled", event.enabled);
|
||||
leftBrush.setTriggerPressureWidthEnabled(event.enabled);
|
||||
rightBrush.setTriggerPressureWidthEnabled(event.enabled);
|
||||
break;
|
||||
case "addCustomColor":
|
||||
print("Adding custom color");
|
||||
//print("Adding custom color");
|
||||
var customColors = Settings.getValue("customColors", []);
|
||||
customColors.push({red: event.red, green: event.green, blue: event.blue});
|
||||
if (customColors.length > event.maxColors) {
|
||||
|
|
@ -927,7 +949,7 @@
|
|||
|
||||
|
||||
case "changeBrush":
|
||||
print("abrushType: " + event.brushType);
|
||||
//print("abrushType: " + event.brushType);
|
||||
Settings.setValue("currentTexture", event);
|
||||
if (event.brushType === "repeat") {
|
||||
print("brushType: " + event.brushType);
|
||||
|
|
@ -940,19 +962,14 @@
|
|||
}
|
||||
isBrushColored = event.isColored;
|
||||
if (event.isColored) {
|
||||
Settings.setValue("currentColor", {red: 255, green: 255, blue: 255});
|
||||
leftBrush.changeStrokeColor(255, 255, 255);
|
||||
rightBrush.changeStrokeColor(255, 255, 255);
|
||||
Overlays.editOverlay(inkSourceOverlay, {
|
||||
color: {red: 255, green: 255, blue: 255}
|
||||
});
|
||||
}
|
||||
/*leftBrush.changeUVMode(false);
|
||||
rightBrush.changeUVMode(false);
|
||||
if (event.brushName.indexOf("256x256") != -1) {
|
||||
leftBrush.changeUVMode(true);
|
||||
rightBrush.changeUVMode(true);
|
||||
}*/
|
||||
print("changing brush to " + event.brushName);
|
||||
//print("changing brush to " + event.brushName);
|
||||
event.brushName = CONTENT_PATH + "/" + event.brushName;
|
||||
leftBrush.changeTexture(event.brushName);
|
||||
rightBrush.changeTexture(event.brushName);
|
||||
|
|
@ -960,8 +977,8 @@
|
|||
|
||||
case "changeLineWidth":
|
||||
Settings.setValue("currentStrokeWidth", event.brushWidth);
|
||||
var dim = event.brushWidth*2 +0.1;
|
||||
print("changing brush width dim to " + dim);
|
||||
var dim = event.brushWidth * 2 + 0.1;
|
||||
//print("changing brush width dim to " + dim);
|
||||
//var dim2 = Math.floor( Math.random()*40 + 5);
|
||||
leftBrush.changeStrokeWidthMultiplier(dim);
|
||||
rightBrush.changeStrokeWidthMultiplier(dim);
|
||||
|
|
@ -971,7 +988,7 @@
|
|||
break;
|
||||
|
||||
case "undo":
|
||||
print("Going to undo");
|
||||
//print("Going to undo");
|
||||
/**
|
||||
The undo is called only on the right brush because the undo stack is global, meaning that
|
||||
calling undoErasing on both the left and right brush would cause the stack to pop twice.
|
||||
|
|
@ -1006,7 +1023,7 @@
|
|||
}
|
||||
|
||||
function addAnimationToBrush(entityID) {
|
||||
print("Brushes INfo 0" + JSON.stringify(DynamicBrushesInfo));
|
||||
//print("Brushes INfo 0" + JSON.stringify(DynamicBrushesInfo));
|
||||
Object.keys(DynamicBrushesInfo).forEach(function(animationName) {
|
||||
print(animationName + "Brushes INfo 0" + JSON.stringify(DynamicBrushesInfo));
|
||||
if (DynamicBrushesInfo[animationName].isEnabled) {
|
||||
|
|
@ -1020,7 +1037,7 @@
|
|||
//Entities.editEntity(entityID, {script: Script.resolvePath("content/brushes/dynamicBrushes/dynamicBrushScript.js")});
|
||||
}
|
||||
});
|
||||
print("Brushes INfo 1" + JSON.stringify(DynamicBrushesInfo));
|
||||
//print("Brushes INfo 1" + JSON.stringify(DynamicBrushesInfo));
|
||||
}
|
||||
|
||||
function addElementToUndoStack(item)
|
||||
|
|
|
|||
|
|
@ -1,118 +1,601 @@
|
|||
<!--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>
|
||||
.brushButton {
|
||||
max-width: 220px,
|
||||
padding: 10px,
|
||||
background-color: #666666
|
||||
width: 66px;
|
||||
background-color: #2e2e2e;
|
||||
border:none;
|
||||
margin: 1px 0px;
|
||||
}
|
||||
.checkbox {
|
||||
margin: 0px;
|
||||
}
|
||||
.BrushIcon {
|
||||
<div class="brushLabel"></div> padding: 10px,
|
||||
width: 130px,
|
||||
width: 100%;
|
||||
}
|
||||
#dynamicBrush {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.selectedBrush {
|
||||
background-color: #f4e842
|
||||
position: relative;
|
||||
}
|
||||
#selectedOverlay {
|
||||
background-color: rgba(16, 128, 184, 0.7);
|
||||
top:0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background-image: url("../content/chosen.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
#brushesCointainer {
|
||||
margin-bottom: 200px;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
.imageContainer {
|
||||
/*float: left;*/
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.brushLabel {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
color: white;
|
||||
width: 100%;
|
||||
z-index: 800;
|
||||
word-wrap: break-word;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<div><input onchange="setDynamicBrush(this)" animationType="DynamicHueBrush" type="checkbox" id="dynamicBrush"> Use Dynamic Hue </input></div>
|
||||
<div class="behavior-group property checkbox">
|
||||
<input onchange="setDynamicBrush(this)" animationType="DynamicHueBrush" type="checkbox" id="dynamicBrush"></input>
|
||||
<label for="dynamicBrush">Use Dynamic Hue </label>
|
||||
</div>
|
||||
<div>
|
||||
<div style="float: left; margin-right: 20px">
|
||||
<div><input onchange="setDynamicBrush(this)" animationType="DynamicRotationBrush" type="checkbox" id="yawRotationBrush"> Use Yaw Rotation </input></div>
|
||||
<div><input onchange="setDynamicBrush(this)" animationType="DynamicRotationBrush" type="checkbox" id="pitchRotationBrush"> Use Pitch Rotation </input></div>
|
||||
<div><input onchange="setDynamicBrush(this)" animationType="DynamicRotationBrush" type="checkbox" id="rollRotationBrush"> Use Roll Rotation </input></div>
|
||||
<div class="behavior-group property checkbox">
|
||||
<input onchange="setDynamicBrush(this)" animationType="DynamicRotationBrush" type="checkbox" id="yawRotationBrush"></input>
|
||||
<label for="yawRotationBrush">Use Yaw Rotation</label>
|
||||
</div>
|
||||
<div class="behavior-group property checkbox">
|
||||
<input onchange="setDynamicBrush(this)" animationType="DynamicRotationBrush" type="checkbox" id="pitchRotationBrush"></input>
|
||||
<label for="pitchRotationBrush">Use Pitch Rotation</label>
|
||||
</div>
|
||||
<div class="behavior-group property checkbox">
|
||||
<input onchange="setDynamicBrush(this)" animationType="DynamicRotationBrush" type="checkbox" id="rollRotationBrush"></input>
|
||||
<label for="rollRotationBrush">Use Roll Rotation</label>
|
||||
</div>
|
||||
</div>
|
||||
<div >
|
||||
<div><input onchange="setDynamicBrush(this)" animationType="DynamicTranslationBrush" type="checkbox" id="xTranslationBrush"> Use Translation x</input></div>
|
||||
<div><input onchange="setDynamicBrush(this)" animationType="DynamicTranslationBrush" type="checkbox" id="yTranslationBrush"> Use Translation y</input></div>
|
||||
<div><input onchange="setDynamicBrush(this)" animationType="DynamicTranslationBrush" type="checkbox" id="zTranslationBrush"> Use Translation z</input></div>
|
||||
<div>
|
||||
<div class="behavior-group property checkbox">
|
||||
<input onchange="setDynamicBrush(this)" animationType="DynamicTranslationBrush" type="checkbox" id="xTranslationBrush"></input>
|
||||
<label for="xTranslationBrush">Use Translation x</label>
|
||||
</div>
|
||||
<div class="behavior-group property checkbox">
|
||||
<input onchange="setDynamicBrush(this)" animationType="DynamicTranslationBrush" type="checkbox" id="yTranslationBrush"></input>
|
||||
<label for="yTranslationBrush">Use Translation y</label>
|
||||
</div>
|
||||
<div class="behavior-group property checkbox">
|
||||
<input onchange="setDynamicBrush(this)" animationType="DynamicTranslationBrush" type="checkbox" id="zTranslationBrush"></input>
|
||||
<label for="zTranslationBrush">Use Translation z</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="brushesCointainer">
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/basic.png" onclick="changePaintBrush(0)"><img width="130px" src="../content/brushes/256x256/basic.png" class="BrushIcon" ><div class="brushLabel">basic A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/basic.png" onclick="changePaintBrush(1)"><img width="130px" src="../content/brushes/256x256/basic.png" class="BrushIcon" ><div class="brushLabel">basic B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/bristle.png" onclick="changePaintBrush(2)"><img width="130px" src="../content/brushes/256x256/bristle.png" class="BrushIcon" ><div class="brushLabel">bristle A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/bristle.png" onclick="changePaintBrush(3)"><img width="130px" src="../content/brushes/256x256/bristle.png" class="BrushIcon" ><div class="brushLabel">bristle B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/dupuiz.png" onclick="changePaintBrush(4)"><img width="130px" src="../content/brushes/256x256/dupuiz.png" class="BrushIcon" ><div class="brushLabel">dupuiz A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/dupuiz.png" onclick="changePaintBrush(5)"><img width="130px" src="../content/brushes/256x256/dupuiz.png" class="BrushIcon" ><div class="brushLabel">dupuiz B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/gouache.png" onclick="changePaintBrush(6)"><img width="130px" src="../content/brushes/256x256/gouache.png" class="BrushIcon" ><div class="brushLabel">gouache A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/gouache.png" onclick="changePaintBrush(7)"><img width="130px" src="../content/brushes/256x256/gouache.png" class="BrushIcon" ><div class="brushLabel">gouache B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/graphite.png" onclick="changePaintBrush(8)"><img width="130px" src="../content/brushes/256x256/graphite.png" class="BrushIcon" ><div class="brushLabel">graphite A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/graphite.png" onclick="changePaintBrush(9)"><img width="130px" src="../content/brushes/256x256/graphite.png" class="BrushIcon" ><div class="brushLabel">graphite B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/spat-fine.png" onclick="changePaintBrush(10)"><img width="130px" src="../content/brushes/256x256/spat-fine.png" class="BrushIcon" ><div class="brushLabel">spat-fine A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/spat-fine.png" onclick="changePaintBrush(11)"><img width="130px" src="../content/brushes/256x256/spat-fine.png" class="BrushIcon" ><div class="brushLabel">spat-fine B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/spat-medium.png" onclick="changePaintBrush(12)"><img width="130px" src="../content/brushes/256x256/spat-medium.png" class="BrushIcon" ><div class="brushLabel">spat-medium A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/spat-medium.png" onclick="changePaintBrush(13)"><img width="130px" src="../content/brushes/256x256/spat-medium.png" class="BrushIcon" ><div class="brushLabel">spat-medium B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/sponge.png" onclick="changePaintBrush(14)"><img width="130px" src="../content/brushes/256x256/sponge.png" class="BrushIcon" ><div class="brushLabel">sponge A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256/sponge.png" onclick="changePaintBrush(15)"><img width="130px" src="../content/brushes/256x256/sponge.png" class="BrushIcon" ><div class="brushLabel">sponge B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256stretched/basic.png" onclick="changePaintBrush(16)"><img width="130px" src="../content/brushes/256x256stretched/basic.png" class="BrushIcon" ><div class="brushLabel">basic A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/basic.png" onclick="changePaintBrush(17)"><img width="130px" src="../content/brushes/256x256stretched/basic.png" class="BrushIcon" ><div class="brushLabel">basic B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256stretched/bristle.png" onclick="changePaintBrush(18)"><img width="130px" src="../content/brushes/256x256stretched/bristle.png" class="BrushIcon" ><div class="brushLabel">bristle A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/bristle.png" onclick="changePaintBrush(19)"><img width="130px" src="../content/brushes/256x256stretched/bristle.png" class="BrushIcon" ><div class="brushLabel">bristle B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256stretched/gouache.png" onclick="changePaintBrush(20)"><img width="130px" src="../content/brushes/256x256stretched/gouache.png" class="BrushIcon" ><div class="brushLabel">gouache A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/gouache.png" onclick="changePaintBrush(21)"><img width="130px" src="../content/brushes/256x256stretched/gouache.png" class="BrushIcon" ><div class="brushLabel">gouache B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256stretched/sponge.png" onclick="changePaintBrush(22)"><img width="130px" src="../content/brushes/256x256stretched/sponge.png" class="BrushIcon" ><div class="brushLabel">sponge A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/256x256stretched/sponge.png" onclick="changePaintBrush(23)"><img width="130px" src="../content/brushes/256x256stretched/sponge.png" class="BrushIcon" ><div class="brushLabel">sponge B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/basic.png" onclick="changePaintBrush(24)"><img width="130px" src="../content/brushes/basic.png" class="BrushIcon" ><div class="brushLabel">basic A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/basic.png" onclick="changePaintBrush(25)"><img width="130px" src="../content/brushes/basic.png" class="BrushIcon" ><div class="brushLabel">basic B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/bristle.png" onclick="changePaintBrush(26)"><img width="130px" src="../content/brushes/bristle.png" class="BrushIcon" ><div class="brushLabel">bristle A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/bristle.png" onclick="changePaintBrush(27)"><img width="130px" src="../content/brushes/bristle.png" class="BrushIcon" ><div class="brushLabel">bristle B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/gouache.png" onclick="changePaintBrush(28)"><img width="130px" src="../content/brushes/gouache.png" class="BrushIcon" ><div class="brushLabel">gouache A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gouache.png" onclick="changePaintBrush(29)"><img width="130px" src="../content/brushes/gouache.png" class="BrushIcon" ><div class="brushLabel">gouache B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/gradient.png" onclick="changePaintBrush(30)"><img width="130px" src="../content/brushes/gradient.png" class="BrushIcon" ><div class="brushLabel">gradient A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gradient.png" onclick="changePaintBrush(31)"><img width="130px" src="../content/brushes/gradient.png" class="BrushIcon" ><div class="brushLabel">gradient B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/gradient2.png" onclick="changePaintBrush(32)"><img width="130px" src="../content/brushes/gradient2.png" class="BrushIcon" ><div class="brushLabel">gradient2 A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gradient2.png" onclick="changePaintBrush(33)"><img width="130px" src="../content/brushes/gradient2.png" class="BrushIcon" ><div class="brushLabel">gradient2 B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/gradient3.png" onclick="changePaintBrush(34)"><img width="130px" src="../content/brushes/gradient3.png" class="BrushIcon" ><div class="brushLabel">gradient3 A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gradient3.png" onclick="changePaintBrush(35)"><img width="130px" src="../content/brushes/gradient3.png" class="BrushIcon" ><div class="brushLabel">gradient3 B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/koons.png" onclick="changePaintBrush(36)"><img width="130px" src="../content/brushes/koons.png" class="BrushIcon" ><div class="brushLabel">koons A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/koons.png" onclick="changePaintBrush(37)"><img width="130px" src="../content/brushes/koons.png" class="BrushIcon" ><div class="brushLabel">koons B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/oil.png" onclick="changePaintBrush(38)"><img width="130px" src="../content/brushes/oil.png" class="BrushIcon" ><div class="brushLabel">oil A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/oil.png" onclick="changePaintBrush(39)"><img width="130px" src="../content/brushes/oil.png" class="BrushIcon" ><div class="brushLabel">oil B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush1.png" onclick="changePaintBrush(40)"><img width="130px" src="../content/brushes/paintbrush1.png" class="BrushIcon" ><div class="brushLabel">paintbrush1 A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush1.png" onclick="changePaintBrush(41)"><img width="130px" src="../content/brushes/paintbrush1.png" class="BrushIcon" ><div class="brushLabel">paintbrush1 B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush2.png" onclick="changePaintBrush(42)"><img width="130px" src="../content/brushes/paintbrush2.png" class="BrushIcon" ><div class="brushLabel">paintbrush2 A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush2.png" onclick="changePaintBrush(43)"><img width="130px" src="../content/brushes/paintbrush2.png" class="BrushIcon" ><div class="brushLabel">paintbrush2 B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush3.png" onclick="changePaintBrush(44)"><img width="130px" src="../content/brushes/paintbrush3.png" class="BrushIcon" ><div class="brushLabel">paintbrush3 A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush3.png" onclick="changePaintBrush(45)"><img width="130px" src="../content/brushes/paintbrush3.png" class="BrushIcon" ><div class="brushLabel">paintbrush3 B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush4.png" onclick="changePaintBrush(46)"><img width="130px" src="../content/brushes/paintbrush4.png" class="BrushIcon" ><div class="brushLabel">paintbrush4 A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush4.png" onclick="changePaintBrush(47)"><img width="130px" src="../content/brushes/paintbrush4.png" class="BrushIcon" ><div class="brushLabel">paintbrush4 B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush5.png" onclick="changePaintBrush(48)"><img width="130px" src="../content/brushes/paintbrush5.png" class="BrushIcon" ><div class="brushLabel">paintbrush5 A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush5.png" onclick="changePaintBrush(49)"><img width="130px" src="../content/brushes/paintbrush5.png" class="BrushIcon" ><div class="brushLabel">paintbrush5 B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush6.png" onclick="changePaintBrush(50)"><img width="130px" src="../content/brushes/paintbrush6.png" class="BrushIcon" ><div class="brushLabel">paintbrush6 A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush6.png" onclick="changePaintBrush(51)"><img width="130px" src="../content/brushes/paintbrush6.png" class="BrushIcon" ><div class="brushLabel">paintbrush6 B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/pastel.png" onclick="changePaintBrush(52)"><img width="130px" src="../content/brushes/pastel.png" class="BrushIcon" ><div class="brushLabel">pastel A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/pastel.png" onclick="changePaintBrush(53)"><img width="130px" src="../content/brushes/pastel.png" class="BrushIcon" ><div class="brushLabel">pastel B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/soft.png" onclick="changePaintBrush(54)"><img width="130px" src="../content/brushes/soft.png" class="BrushIcon" ><div class="brushLabel">soft A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/soft.png" onclick="changePaintBrush(55)"><img width="130px" src="../content/brushes/soft.png" class="BrushIcon" ><div class="brushLabel">soft B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/sponge.png" onclick="changePaintBrush(56)"><img width="130px" src="../content/brushes/sponge.png" class="BrushIcon" ><div class="brushLabel">sponge A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/sponge.png" onclick="changePaintBrush(57)"><img width="130px" src="../content/brushes/sponge.png" class="BrushIcon" ><div class="brushLabel">sponge B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/square.png" onclick="changePaintBrush(58)"><img width="130px" src="../content/brushes/square.png" class="BrushIcon" ><div class="brushLabel">square A</div></button></button>
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/square.png" onclick="changePaintBrush(59)"><img width="130px" src="../content/brushes/square.png" class="BrushIcon" ><div class="brushLabel">square B</div></button></button>
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/breakfast.png" onclick="changePaintBrush(60)"><img width="130px" src="../content/brushes/colored/breakfast.png" class="BrushIcon" ><div class="brushLabel">breakfast A</div></button></button>
|
||||
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/breakfast.png" onclick="changePaintBrush(61)"><img width="130px" src="../content/brushes/colored/breakfast.png" class="BrushIcon" ><div class="brushLabel">breakfast B</div></button></button>
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/chique.png" onclick="changePaintBrush(62)"><img width="130px" src="../content/brushes/colored/chique.png" class="BrushIcon" ><div class="brushLabel">chique A</div></button></button>
|
||||
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/chique.png" onclick="changePaintBrush(63)"><img width="130px" src="../content/brushes/colored/chique.png" class="BrushIcon" ><div class="brushLabel">chique B</div></button></button>
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/hawaii.png" onclick="changePaintBrush(64)"><img width="130px" src="../content/brushes/colored/hawaii.png" class="BrushIcon" ><div class="brushLabel">hawaii A</div></button></button>
|
||||
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/hawaii.png" onclick="changePaintBrush(65)"><img width="130px" src="../content/brushes/colored/hawaii.png" class="BrushIcon" ><div class="brushLabel">hawaii B</div></button></button>
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/newton.png" onclick="changePaintBrush(66)"><img width="130px" src="../content/brushes/colored/newton.png" class="BrushIcon" ><div class="brushLabel">newton A</div></button></button>
|
||||
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/newton.png" onclick="changePaintBrush(67)"><img width="130px" src="../content/brushes/colored/newton.png" class="BrushIcon" ><div class="brushLabel">newton B</div></button></button>
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/pastels.png" onclick="changePaintBrush(68)"><img width="130px" src="../content/brushes/colored/pastels.png" class="BrushIcon" ><div class="brushLabel">pastels A</div></button></button>
|
||||
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/pastels.png" onclick="changePaintBrush(69)"><img width="130px" src="../content/brushes/colored/pastels.png" class="BrushIcon" ><div class="brushLabel">pastels B</div></button></button>
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/colored/softy.png" onclick="changePaintBrush(70)"><img width="130px" src="../content/brushes/colored/softy.png" class="BrushIcon" ><div class="brushLabel">softy A</div></button></button>
|
||||
<button class="brushButton" colored="true" brushType="repeat" id="content/brushes/colored/softy.png" onclick="changePaintBrush(71)"><img width="130px" src="../content/brushes/colored/softy.png" class="BrushIcon" ><div class="brushLabel">softy B</div></button></button>
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/256x256/basic.png" onclick="changePaintBrush(0)">
|
||||
<div class="imageContainer">
|
||||
<img s src="../content/brushes/256x256/basic.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256/basic.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256/bristle.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256/bristle.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256/dupuiz.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256/dupuiz.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256/gouache.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256/gouache.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256/graphite.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256/graphite.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256/spat-fine.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256/spat-fine.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256/spat-medium.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256/spat-medium.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256/sponge.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256/sponge.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256stretched/basic.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256stretched/basic.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256stretched/bristle.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256stretched/bristle.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256stretched/gouache.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256stretched/gouache.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256stretched/sponge.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/256x256stretched/sponge.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/basic.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/basic.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/bristle.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/bristle.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/gouache.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/gouache.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/gradient.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/gradient.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/gradient2.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/gradient2.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/gradient3.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/gradient3.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/koons.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/koons.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/oil.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/oil.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/paintbrush1.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/paintbrush1.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/paintbrush2.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/paintbrush2.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/paintbrush3.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/paintbrush3.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/paintbrush4.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/paintbrush4.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/paintbrush5.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/paintbrush5.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/paintbrush6.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/paintbrush6.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/pastel.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/pastel.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/soft.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/soft.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/sponge.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/sponge.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/square.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/square.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/colored/breakfast.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/colored/breakfast.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/colored/chique.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/colored/chique.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/colored/hawaii.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/colored/hawaii.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/colored/newton.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/colored/newton.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/colored/pastels.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/colored/pastels.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/colored/softy.png" class="BrushIcon"/>
|
||||
</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 s src="../content/brushes/colored/softy.png" class="BrushIcon"/>
|
||||
</div>
|
||||
<div class="brushLabel">softy B</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -123,8 +606,17 @@
|
|||
function changePaintBrush(brushIndex) {
|
||||
var brushes = document.getElementById("brushesCointainer").children;
|
||||
brushes[currentBrush].classList.remove("selectedBrush");
|
||||
if (document.getElementById("selectedOverlay"))
|
||||
document.getElementById("selectedOverlay").remove();
|
||||
|
||||
currentBrush = brushIndex;
|
||||
brushes[currentBrush].classList.add("selectedBrush");
|
||||
|
||||
var selectedOverlay = document.createElement("div");
|
||||
selectedOverlay.id = "selectedOverlay";
|
||||
brushes[currentBrush].children[0].appendChild(selectedOverlay);
|
||||
console.log(brushes[currentBrush].children[0]);
|
||||
|
||||
var changedBrushEvent = {
|
||||
"type" : "changeBrush",
|
||||
"brushName": brushes[currentBrush].id,
|
||||
|
|
@ -132,6 +624,7 @@
|
|||
"isColored": brushes[currentBrush].getAttribute("colored"),
|
||||
"brushID" : brushIndex
|
||||
};
|
||||
|
||||
parent.postMessage(JSON.stringify(changedBrushEvent), "*");
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<!--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">
|
||||
.changeHandButton {
|
||||
width: 200px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,39 @@
|
|||
<!--Note: change the parent postmessage second parameter due to possible security issues-->
|
||||
<link rel="stylesheet" type="text/css" href="../../html/css/colpick.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../html/css/edit-style.css">
|
||||
<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;
|
||||
height: 1.8rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance:none;
|
||||
width: 0.6rem;
|
||||
height: 1.8rem;
|
||||
padding:0;
|
||||
margin: 0;
|
||||
background-color: #696969;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb:hover {
|
||||
background-color: white;
|
||||
}
|
||||
input[type=range]:focus { /*#252525*/
|
||||
outline: none;
|
||||
}
|
||||
.slider-wrapper {
|
||||
display: table;
|
||||
padding: 0.4rem 0;
|
||||
}
|
||||
.property.range input[type=number] {
|
||||
margin-left: 0.8rem;
|
||||
width: 5.4rem;
|
||||
height: 1.8rem;
|
||||
}
|
||||
#color_picker {
|
||||
display: grid;
|
||||
}
|
||||
|
|
@ -9,6 +41,7 @@
|
|||
border: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
#color_picker_table {
|
||||
border-collapse:collapse
|
||||
|
|
@ -17,11 +50,28 @@
|
|||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="behavior-group property checkbox">
|
||||
<input onchange="switchPressureSensitiveWidth(this)" type="checkbox" id="triggerSensitiveWidth"></input>
|
||||
<label for="triggerSensitiveWidth">Use Trigger Sensitive Width</label>
|
||||
</div>
|
||||
<div class="property range">
|
||||
<label style="display: block">Stroke Width</label>
|
||||
<div class="slider-wrapper">
|
||||
<input type="range" id="lineWidthRange" value=0.25 min=0 max=1 step=0.01 onchange="changeLineWidthRange(this)"/>
|
||||
<input type="number" id="lineWidthText" value=0.25 min=0 max=1 step=0.01 onchange="changeLineWidthNumber(this)"/>
|
||||
<!--<span id="lineWidthText">0.25</span>
|
||||
var inputField = document.createElement("input");
|
||||
inputField.setAttribute("type", "number");-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="colorpicker"></div>
|
||||
<table id="color_picker_table">
|
||||
</table>
|
||||
|
||||
<div id="color_picker_table">
|
||||
</div>
|
||||
|
||||
<div id="last_picked_colors"></div>
|
||||
<div id="property-color" class="color-picker"></div>
|
||||
|
||||
|
||||
<script src="../../html/js/colpick.js">
|
||||
|
|
@ -53,10 +103,10 @@
|
|||
}
|
||||
var colorPickerLayout = document.getElementById("color_picker_table");
|
||||
for (var j = 0; j < ROWS; j++) {
|
||||
var row = document.createElement("tr");
|
||||
var row = document.createElement("div");
|
||||
for (var i = 0; i < startingColors.length; i++) {
|
||||
var colorCell = document.createElement("input");
|
||||
colorCell.type = "button";
|
||||
var colorCell = document.createElement("div");
|
||||
//colorCell.type = "button";
|
||||
colorCell.style.backgroundColor = "hsl(" + startingColors[i].hue + ",100%," + ((80-(80*j/(ROWS-1))) + 10) + "%)";
|
||||
colorCell.className = "color_picker_cell";
|
||||
colorCell.onclick = function() {
|
||||
|
|
@ -81,6 +131,33 @@
|
|||
parent.postMessage(JSON.stringify(changedColorEvent), "*");
|
||||
}
|
||||
|
||||
function changeLineWidthRange(e) {
|
||||
document.getElementById("lineWidthText").value = e.value;
|
||||
notifyLineWidthChanged(e);
|
||||
}
|
||||
|
||||
function changeLineWidthNumber(e) {
|
||||
document.getElementById("lineWidthRange").value = e.value;
|
||||
notifyLineWidthChanged(e);
|
||||
}
|
||||
|
||||
function notifyLineWidthChanged(e) {
|
||||
var changeLineWidthEvent = {
|
||||
"type" : "changeLineWidth",
|
||||
"brushWidth": e.value
|
||||
};
|
||||
parent.postMessage(JSON.stringify(changeLineWidthEvent), "*");
|
||||
}
|
||||
|
||||
function switchPressureSensitiveWidth(checkbox) {
|
||||
// 'jscolor' instance can be used as a string
|
||||
var switchPressureSensitiveWidthEvent = {
|
||||
"type" : "switchTriggerPressureWidth",
|
||||
"enabled" : checkbox.checked,
|
||||
};
|
||||
parent.postMessage(JSON.stringify(switchPressureSensitiveWidthEvent), "*");
|
||||
}
|
||||
|
||||
function updateColorFromTable(button) {
|
||||
var colorArray = window.getComputedStyle(button).backgroundColor.match(/\d+/g);
|
||||
$('#colorpicker').colpickSetColor({'r': colorArray[0], 'g': colorArray[1], 'b': colorArray[2]}, true);
|
||||
|
|
@ -106,11 +183,10 @@
|
|||
return;
|
||||
}
|
||||
}
|
||||
if (lastPickedColors.length + 1 >= COLUMNS) {
|
||||
if (lastPickedColors.length + 1 > COLUMNS) {
|
||||
lastPickedColorsContainer.removeChild(lastPickedColors[lastPickedColors.length-1]);
|
||||
}
|
||||
var colorCell = document.createElement("input");
|
||||
colorCell.type = "button";
|
||||
var colorCell = document.createElement("div");
|
||||
colorCell.style.backgroundColor = "rgb(" + colorArray[0] + "," + colorArray[1] + "," + colorArray[2];
|
||||
colorCell.className = "color_picker_cell";
|
||||
colorCell.onclick = function() { updateColorFromTable(this) };
|
||||
|
|
@ -129,16 +205,28 @@
|
|||
|
||||
window.addEventListener("message", restoreLastColor, false);
|
||||
function restoreLastColor(event) {
|
||||
var color = JSON.parse(event.data);
|
||||
var newColor = color.currentColor;
|
||||
var customColors = color.customColors;
|
||||
if (newColor) {
|
||||
var palleteData = JSON.parse(event.data);
|
||||
|
||||
if ("currentColor" in palleteData) {
|
||||
var newColor = palleteData.currentColor;
|
||||
$('#colorpicker').colpickSetColor({'r': newColor.red, 'g': newColor.green, 'b': newColor.blue}, true);
|
||||
}
|
||||
if (customColors) {
|
||||
|
||||
if ("customColors" in palleteData) {
|
||||
var customColors = palleteData.customColors;
|
||||
for (var i = 0; i < customColors.length; i++) {
|
||||
addCustomColor([customColors[i].red, customColors[i].green, customColors[i].blue], false);
|
||||
}
|
||||
}
|
||||
|
||||
if ("currentTriggerWidthEnabled" in palleteData) {
|
||||
document.getElementById("triggerSensitiveWidth").checked = palleteData.currentTriggerWidthEnabled;
|
||||
}
|
||||
|
||||
if ("currentStrokeWidth" in palleteData) {
|
||||
document.getElementById("lineWidthRange").value = palleteData.currentStrokeWidth;
|
||||
changeLineWidthRange({value: palleteData.currentStrokeWidth});
|
||||
changeLineWidthNumber({value: palleteData.currentStrokeWidth});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
<!--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">
|
||||
#undoButton {
|
||||
width: 200px;
|
||||
|
|
|
|||
|
|
@ -1,57 +0,0 @@
|
|||
<!--Note: change the parent postmessage second parameter due to possible security issues-->
|
||||
<style type="text/css">
|
||||
/*range style: http://danielstern.ca/range.css/#/*/
|
||||
input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
width: 400px;
|
||||
}
|
||||
input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
background: #666;
|
||||
border: 0.1px solid #010101;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
border: 1px solid #000000;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
#lineWidthText {
|
||||
padding-left: 12px;
|
||||
padding-top: 6px;
|
||||
position: absolute;
|
||||
}
|
||||
#lineWidthContainer {
|
||||
margin: 12px;
|
||||
margin-top: 48px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="lineWidthContainer">
|
||||
<input type="range" id="lineWidthRange" value=0.25 min=0 max=1 step=0.01 onchange="changeLineWidth(this)">
|
||||
<span id="lineWidthText">0.25</span>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function changeLineWidth(e) {
|
||||
document.getElementById("lineWidthText").innerText = e.value;
|
||||
var changeLineWidthEvent = {
|
||||
"type" : "changeLineWidth",
|
||||
"brushWidth": e.value
|
||||
};
|
||||
parent.postMessage(JSON.stringify(changeLineWidthEvent), "*");
|
||||
}
|
||||
|
||||
window.addEventListener("message", restoreLineWidth, false);
|
||||
function restoreLineWidth() {
|
||||
var width = JSON.parse(event.data);
|
||||
document.getElementById("lineWidthRange").value = width;
|
||||
changeLineWidth({value: width});
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<script type="text/javascript" src="../../html/js/jquery-2.1.4.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../../html/css/edit-style.css">
|
||||
|
||||
<style>
|
||||
iframe {
|
||||
|
|
@ -9,16 +10,19 @@
|
|||
width:100%;
|
||||
position: absolute;
|
||||
}
|
||||
#tabs {
|
||||
background-color: black;
|
||||
}
|
||||
.tabButton {
|
||||
background-color: #aaaaaa;
|
||||
background-color: #000;
|
||||
color: white;
|
||||
font-size: 100%;
|
||||
padding: 12px;
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
}
|
||||
.tabIcon {
|
||||
width: 24px;
|
||||
|
|
@ -26,24 +30,22 @@
|
|||
padding-right: 12px;
|
||||
}
|
||||
.selected {
|
||||
background-color: #4286f4
|
||||
background-color: #404040
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="margin:0px;padding:0px;overflow:hidden">
|
||||
<div id="tabs">
|
||||
<span class="tabButton" onclick="selectTab(0)"><img class="tabIcon" src="../content/tabicons/colorpaletteBtn.png"/>Color</span>
|
||||
<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"/>Eraser</span>
|
||||
<span class="tabButton" onclick="selectTab(3)"><img class="tabIcon" src="../content/tabicons/linewidthBtn.png"/>Line Width</span>
|
||||
<span class="tabButton" onclick="selectTab(4)"><img class="tabIcon" src="../content/tabicons/pointingfinger128px.png"/>Hand</span>
|
||||
<span class="tabButton" onclick="selectTab(3)"><img class="tabIcon" src="../content/tabicons/pointingfinger128px.png"/>Hand</span>
|
||||
</div>
|
||||
<div id="settingsLoading" style="display: none; background-color: #F44336; color: white; padding: 8px">Loading previous settings</div>
|
||||
<div id="content">
|
||||
<iframe frameborder="0" src="colorsTab.html" onLoad="notifyFrameLoaded(this)" id="colorTab" seamless></iframe>
|
||||
<iframe frameborder="0" src="brushesTab.html" onLoad="notifyFrameLoaded(this)" id="brushesTab" seamless style="display: none"></iframe>
|
||||
<iframe frameborder="0" src="eraserTab.html" onLoad="notifyFrameLoaded(this)" id="eraserTab" seamless style="display: none"></iframe>
|
||||
<iframe frameborder="0" src="lineWidthTab.html" onLoad="notifyFrameLoaded(this)" id="lineWidthTab" seamless style="display: none"></iframe>
|
||||
<iframe frameborder="0" src="chooseHandTab.html" onLoad="notifyFrameLoaded(this)" id="chooseHandTab" seamless style="display: none"></iframe>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -98,11 +100,11 @@
|
|||
function setupSettings() {
|
||||
//run only when all the tabs have been loaded and the settings have been received
|
||||
//no matter the order at which these occur
|
||||
if (!settings || iframesLoaded != 5) {
|
||||
if (!settings || iframesLoaded != document.getElementById("content").children.length) {
|
||||
return;
|
||||
}
|
||||
$("#settingsLoading").hide();
|
||||
if (settings.currentTab) {
|
||||
if (settings.currentTab != null) {
|
||||
selectTab(settings.currentTab);
|
||||
}
|
||||
if (settings.currentColor) {
|
||||
|
|
@ -111,20 +113,23 @@
|
|||
if (settings.customColors) {
|
||||
document.getElementById("colorTab").contentWindow.postMessage(JSON.stringify({customColors: settings.customColors}), "*");
|
||||
}
|
||||
if (settings.currentTriggerWidthEnabled) {
|
||||
document.getElementById("colorTab").contentWindow.postMessage(JSON.stringify({currentTriggerWidthEnabled: settings.currentTriggerWidthEnabled}), "*");
|
||||
}
|
||||
if (settings.currentStrokeWidth) {
|
||||
document.getElementById("colorTab").contentWindow.postMessage(JSON.stringify({currentStrokeWidth: settings.currentStrokeWidth}), "*");
|
||||
}
|
||||
if (settings.currentTexture) {
|
||||
document.getElementById("brushesTab").contentWindow.postMessage(JSON.stringify({currentTexture: settings.currentTexture}), "*");
|
||||
}
|
||||
if (settings.currentDynamicBrushes) {
|
||||
document.getElementById("brushesTab").contentWindow.postMessage(JSON.stringify({currentDynamicBrushes: settings.currentDynamicBrushes}), "*");
|
||||
}
|
||||
if (settings.currentStrokeWidth) {
|
||||
document.getElementById("lineWidthTab").contentWindow.postMessage(JSON.stringify(settings.currentStrokeWidth), "*");
|
||||
}
|
||||
if (settings.currentDrawingHand) {
|
||||
document.getElementById("chooseHandTab").contentWindow.postMessage(JSON.stringify(settings.currentDrawingHand), "*");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$(document).ready(receiveDataSetup);
|
||||
// Listen to message from child window
|
||||
eventer(messageEvent,function(e) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue