mirror of
https://github.com/overte-org/overte.git
synced 2025-08-04 02:23:38 +02:00
Remove fingerpaint app from scripts/system.
This commit is contained in:
Daniela
parent
2b18296cfd
commit
b55e416ccf
41 changed files with 0 additions and 2517 deletions
|
|
@ -1,37 +0,0 @@
|
|||
//This file is just used for the superclass
|
||||
function AnimatedBrushClass() {}
|
||||
|
||||
/**
|
||||
* Called on every frame draw after the user stops painting
|
||||
*
|
||||
* @abstract
|
||||
* @param deltaSeconds, the number of seconds past since the last frame was rendered
|
||||
* @param entityID: the id of the polyline being drawn
|
||||
* @param fingerOverlayID: the id of the overlay that shows over the finger when using fingerpaint
|
||||
*/
|
||||
AnimatedBrushClass.prototype.onUpdate = function(deltaSeconds, entityID) {
|
||||
//To be implemented on the child
|
||||
throw "Abstract method onUpdate not implemented";
|
||||
}
|
||||
|
||||
/**
|
||||
* This function updates the user data so in the next frame the animation gets the previous values.\
|
||||
*
|
||||
* @param entityID: the id of the polyline being animated
|
||||
* @param animatedBrushObject: the animation object (should be a subclass of animatedBrush)
|
||||
*/
|
||||
AnimatedBrushClass.prototype.updateUserData = function(entityID, animatedBrushObject) {
|
||||
var prevUserData = Entities.getEntityProperties(entityID).userData;
|
||||
|
||||
if (prevUserData) {
|
||||
prevUserData = prevUserData == "" ? new Object() : JSON.parse(prevUserData); //preserve other possible user data
|
||||
if (prevUserData.animations != null && prevUserData.animations[animatedBrushObject.NAME] != null) {
|
||||
delete prevUserData.animations[animatedBrushObject.NAME];
|
||||
prevUserData.animations[animatedBrushObject.NAME] = animatedBrushObject;
|
||||
}
|
||||
prevUserData.timeFromLastAnimation = Date.now();
|
||||
Entities.editEntity(entityID, {userData: JSON.stringify(prevUserData)});
|
||||
}
|
||||
}
|
||||
|
||||
AnimatedBrush = AnimatedBrushClass;
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
(function() {
|
||||
Script.include("animatedBrushesList.js");
|
||||
var UPDATE_TIME = 33; //run at aproximatelly 30fps
|
||||
var MIN_PLAY_DISTANCE = 6; //Minimum distance from player to entity in order to play animation
|
||||
var self = this;
|
||||
this.preload = function(entityID) {
|
||||
//print("After adding script 2 : " + JSON.stringify(Entities.getEntityProperties(entityID)));
|
||||
|
||||
self.intervalID = Script.setInterval(function() {
|
||||
if (MyAvatar.sessionUUID != Entities.getEntityProperties(entityID).lastEditedBy) {
|
||||
Script.clearInterval(self.intervalID);
|
||||
return;
|
||||
}
|
||||
if (Vec3.withinEpsilon(MyAvatar.position, Entities.getEntityProperties(entityID).position, MIN_PLAY_DISTANCE)) {
|
||||
var userData = Entities.getEntityProperties(entityID).userData;
|
||||
if (userData) {
|
||||
var userDataObject = JSON.parse(userData);
|
||||
var animationObject = userDataObject.animations;
|
||||
var newAnimationObject = null;
|
||||
if (!userDataObject.timeFromLastAnimation) {
|
||||
userDataObject.timeFromLastAnimation = Date.now();
|
||||
}
|
||||
Object.keys(animationObject).forEach(function(animationName) {
|
||||
newAnimationObject = animationObject[animationName];
|
||||
//print("Proto 0001: " + JSON.stringify(newAnimationObject));
|
||||
newAnimationObject.__proto__ = AnimatedBrushesInfo[animationName].proto;
|
||||
//print("time from last draw " + (Date.now() - userDataObject.animations.timeFromLastDraw));
|
||||
newAnimationObject.onUpdate(Date.now() - userDataObject.timeFromLastAnimation, entityID);
|
||||
});
|
||||
}
|
||||
}
|
||||
}, UPDATE_TIME);
|
||||
};
|
||||
this.unload = function() {
|
||||
Script.clearInterval(self.intervalID);
|
||||
}
|
||||
});
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
Script.include("animatedHueBrush.js");
|
||||
Script.include("animatedRotationBrush.js");
|
||||
Script.include("animatedTranslationBrush.js");
|
||||
|
||||
AnimatedBrushesInfo = {
|
||||
animatedHueBrush: {
|
||||
isEnabled: false,
|
||||
proto: AnimatedHueBrush.prototype,
|
||||
settings: null,
|
||||
},
|
||||
|
||||
animatedRotationBrush: {
|
||||
isEnabled: false,
|
||||
proto: AnimatedRotationBrush.prototype,
|
||||
settings: null,
|
||||
},
|
||||
|
||||
animatedTranslationBrush: {
|
||||
isEnabled: false,
|
||||
proto: AnimatedTranslationBrush.prototype,
|
||||
settings: null,
|
||||
},
|
||||
}
|
||||
|
||||
animatedBrushFactory = function(animatedBrushName, settings, entityID) {
|
||||
switch (animatedBrushName) {
|
||||
case "animatedHueBrush":
|
||||
return new AnimatedHueBrush(settings, entityID);
|
||||
case "animatedRotationBrush":
|
||||
return new AnimatedRotationBrush(settings, entityID);
|
||||
case "animatedTranslationBrush":
|
||||
return new AnimatedTranslationBrush(settings, entityID);
|
||||
default:
|
||||
throw new Error("Invalid Brush Name. Could not instantiate " + animatedBrushName);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
//Superclass
|
||||
Script.include("animatedBrush.js");
|
||||
Script.include("../js/ColorUtils.js");
|
||||
|
||||
function AnimatedHueBrushClass(settings, entityID) {
|
||||
AnimatedBrush.call(this);
|
||||
this.hsvColor = rgb2hsv(Entities.getEntityProperties(entityID).color);// {hue: 0, saturation: 1.0, value: 1.0};
|
||||
this.animatedColor = {red: 0, green: 0, blue: 0};
|
||||
}
|
||||
|
||||
AnimatedHueBrushClass.prototype.ANIMATED_BRUSH_TIME = 10; //inteval in milliseconds to update the brush width;
|
||||
AnimatedHueBrushClass.prototype.ANIMATED_BRUSH_INCREMENT = 0.5; //linear increment of brush size;
|
||||
AnimatedHueBrushClass.prototype.NAME = "animatedHueBrush";
|
||||
|
||||
AnimatedHueBrushClass.prototype.onUpdate = function(deltaSeconds, entityID) {
|
||||
this.hsvColor.hue = this.hsvColor.hue + ((deltaSeconds * this.ANIMATED_BRUSH_INCREMENT)/this.ANIMATED_BRUSH_TIME);
|
||||
this.hsvColor.hue = this.hsvColor.hue >= 360 ? 0 : this.hsvColor.hue; //restart hue cycle
|
||||
this.animatedColor = hsv2rgb(this.hsvColor);
|
||||
Entities.editEntity(entityID, { color : this.animatedColor});
|
||||
this.parent.updateUserData(entityID, this);
|
||||
}
|
||||
|
||||
AnimatedHueBrushClass.prototype.constructor = AnimatedHueBrushClass;
|
||||
AnimatedHueBrushClass.prototype.parent = AnimatedBrush.prototype;
|
||||
|
||||
AnimatedHueBrush = AnimatedHueBrushClass;
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
//Superclass
|
||||
Script.include("animatedBrush.js");
|
||||
|
||||
function AnimatedRotationBrushClass(settings, entityID) {
|
||||
AnimatedBrush.call(this);
|
||||
this.angle = 0;
|
||||
this.activeAxis = settings.axis;
|
||||
}
|
||||
|
||||
AnimatedRotationBrushClass.prototype.constructor = AnimatedRotationBrushClass;
|
||||
AnimatedRotationBrushClass.prototype.parent = AnimatedBrush.prototype;
|
||||
|
||||
AnimatedRotationBrushClass.prototype.ANIMATED_BRUSH_TIME = 100; //inteval in milliseconds to update the entity rotation;
|
||||
AnimatedRotationBrushClass.prototype.ANIMATED_BRUSH_INCREMENT = 5; //linear increment of brush size;
|
||||
AnimatedRotationBrushClass.prototype.NAME = "animatedRotationBrush"; //linear increment of brush size;
|
||||
|
||||
AnimatedRotationBrushClass.prototype.onUpdate = function(deltaSeconds, entityID) {
|
||||
this.angle = this.angle + ((deltaSeconds * this.ANIMATED_BRUSH_INCREMENT)/this.ANIMATED_BRUSH_TIME);
|
||||
this.angle = this.angle >= 360 ? 0 : this.angle; //restart hue cycle
|
||||
var rotation = Vec3.multiply(this.angle, this.activeAxis);
|
||||
Entities.editEntity(entityID, {rotation : Quat.fromPitchYawRollDegrees(rotation.x, rotation.y, rotation.z)});
|
||||
this.parent.updateUserData(entityID, this);
|
||||
}
|
||||
|
||||
AnimatedRotationBrush = AnimatedRotationBrushClass;
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
//Superclass
|
||||
Script.include("animatedBrush.js");
|
||||
|
||||
function AnimatedTranslationBrushClass(settings, entityID) {
|
||||
AnimatedBrush.call(this);
|
||||
this.startingPosition = null;
|
||||
this.translation = 0;
|
||||
this.activeAxis = settings.axis;
|
||||
}
|
||||
|
||||
AnimatedTranslationBrushClass.prototype.constructor = AnimatedTranslationBrushClass;
|
||||
AnimatedTranslationBrushClass.prototype.parent = AnimatedBrush.prototype;
|
||||
|
||||
AnimatedTranslationBrushClass.prototype.ANIMATED_BRUSH_TIME = 10; //inteval in milliseconds to update the brush width;
|
||||
AnimatedTranslationBrushClass.prototype.ANIMATED_BRUSH_INCREMENT = 0.005; //linear increment of brush size;
|
||||
AnimatedTranslationBrushClass.prototype.MAX_TRANSLATION = 2;
|
||||
AnimatedTranslationBrushClass.prototype.NAME = "animatedTranslationBrush"; //linear increment of brush size;
|
||||
|
||||
AnimatedTranslationBrushClass.prototype.onUpdate = function(deltaSeconds, entityID) {
|
||||
var currentPosition = Entities.getEntityProperties(entityID).position;
|
||||
if (this.startingPosition == null) {
|
||||
this.startingPosition = currentPosition;
|
||||
}
|
||||
this.translation = this.translation + ((deltaSeconds * this.ANIMATED_BRUSH_INCREMENT)/this.ANIMATED_BRUSH_TIME);
|
||||
|
||||
var translationVec = Vec3.multiply(this.translation, this.activeAxis);
|
||||
var nextPosition = {
|
||||
x: this.startingPosition.x + translationVec.x,
|
||||
y: this.startingPosition.y + translationVec.y,
|
||||
z: this.startingPosition.z + translationVec.z
|
||||
};
|
||||
|
||||
if (Vec3.distance(nextPosition, this.startingPosition) > this.MAX_TRANSLATION) {
|
||||
this.translation = 0;
|
||||
nextPosition = this.startingPosition;
|
||||
}
|
||||
Entities.editEntity(entityID, {position : nextPosition});
|
||||
this.parent.updateUserData(entityID, this);
|
||||
}
|
||||
|
||||
AnimatedTranslationBrush = AnimatedTranslationBrushClass;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 934 B |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 628 B |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 928 B |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,76 +0,0 @@
|
|||
//converts hsv color into rgb color space, expects hsv with the following ranges
|
||||
//H(0, 359), S(0, 1), V(0, 1) to R(0, 255), G(0, 255), B(0, 255)
|
||||
hsv2rgb = function (hsvColor) {
|
||||
var c = hsvColor.value * hsvColor.saturation;
|
||||
var x = c * (1 - Math.abs((hsvColor.hue/60) % 2 - 1));
|
||||
var m = hsvColor.value - c;
|
||||
var rgbColor = new Object();
|
||||
if (hsvColor.hue >= 0 && hsvColor.hue < 60) {
|
||||
rgbColor.red = Math.ceil((c + m) * 255);
|
||||
rgbColor.green = Math.ceil((x + m) * 255);
|
||||
rgbColor.blue = Math.ceil((0 + m) * 255);
|
||||
} else if (hsvColor.hue >= 60 && hsvColor.hue < 120) {
|
||||
rgbColor.red = Math.ceil((x + m) * 255);
|
||||
rgbColor.green = Math.ceil((c + m) * 255);
|
||||
rgbColor.blue = Math.ceil((0 + m) * 255);
|
||||
} else if (hsvColor.hue >= 120 && hsvColor.hue < 180) {
|
||||
rgbColor.red = Math.ceil((0 + m) * 255);
|
||||
rgbColor.green = Math.ceil((c + m) * 255);
|
||||
rgbColor.blue = Math.ceil((x + m) * 255);
|
||||
} else if (hsvColor.hue >= 180 && hsvColor.hue < 240) {
|
||||
rgbColor.red = Math.ceil((0 + m) * 255);
|
||||
rgbColor.green = Math.ceil((x + m) * 255);
|
||||
rgbColor.blue = Math.ceil((c + m) * 255);
|
||||
} else if (hsvColor.hue >= 240 && hsvColor.hue < 300) {
|
||||
rgbColor.red = Math.ceil((x + m) * 255);
|
||||
rgbColor.green = Math.ceil((0 + m) * 255);
|
||||
rgbColor.blue = Math.ceil((c + m) * 255);
|
||||
} else if (hsvColor.hue >= 300 && hsvColor.hue < 360) {
|
||||
rgbColor.red = Math.ceil((c + m) * 255);
|
||||
rgbColor.green = Math.ceil((0 + m) * 255);
|
||||
rgbColor.blue = Math.ceil((x + m) * 255);
|
||||
}
|
||||
return rgbColor;
|
||||
}
|
||||
|
||||
|
||||
//converts rgb color into hsv color space, expects rgb with the following ranges
|
||||
//R(0, 255), G(0, 255), B(0, 255) to H(0, 359), S(0, 1), V(0, 1)
|
||||
rgb2hsv = function (rgbColor) {
|
||||
var r = rgbColor.red / 255.0;
|
||||
var g = rgbColor.green / 255.0;
|
||||
var b = rgbColor.blue / 255.0;
|
||||
|
||||
var cMax = Math.max(r, Math.max(g, b));
|
||||
var cMin = Math.min(r, Math.min(g, b));
|
||||
var deltaC = cMax - cMin;
|
||||
|
||||
var hsvColor = new Object();
|
||||
//hue calculatio
|
||||
if (deltaC == 0) {
|
||||
hsvColor.hue = 0;
|
||||
|
||||
} else if (cMax == r) {
|
||||
hsvColor.hue = 60 * (((g-b)/deltaC) % 6);
|
||||
|
||||
} else if (cMax == g) {
|
||||
hsvColor.hue = 60 * (((b-r)/deltaC) + 2);
|
||||
|
||||
} else if (cMax == b) {
|
||||
hsvColor.hue = 60 * (((r-g)/deltaC) + 4);
|
||||
}
|
||||
|
||||
if (hsvColor.hue < 0) {
|
||||
hsvColor.hue += 360;
|
||||
}
|
||||
//saturation calculation
|
||||
if (cMax == 0) {
|
||||
hsvColor.saturation = 0;
|
||||
} else {
|
||||
hsvColor.saturation = (deltaC/cMax);
|
||||
}
|
||||
|
||||
hsvColor.value = (cMax);
|
||||
|
||||
return hsvColor;
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg fill="#fff" id="Brush-icon-High-Fidelity" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>Artboard 1</title><path d="M186.14,357.79c7.59,9.58,8.08,17.35,8.5,23,1.45,19.27-6.3,35.94-22.69,47-16.48,11.34-42.76,18.39-66.78,20.23a155,155,0,0,1-59.6-7.11,8.54,8.54,0,0,1-5.89-8.38c.09-3.79,2.75-6.72,6.34-8,13.84-5.08,22.76-14.57,34.07-29.61s22.25-32.28,34.73-45C123.09,341.41,129,339,140.91,338c14.3-1,34.25,5.49,45.23,19.78"/><path d="M457.94,72.56A13,13,0,0,0,449.48,69c-2.41,0-4.82,1.24-7.22,2.46C367.84,122.63,226.49,258.69,163,320.63a53.88,53.88,0,0,1,35.08,15.43C211.45,349.24,214,370.93,214,370.93c61.05-64.34,196.33-207.59,246.45-282.71C462.84,83.38,462.79,76.14,457.94,72.56Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 710 B |
|
|
@ -1 +0,0 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1{fill:#fff;}</style></defs><title>hand</title><path class="cls-1" d="M197.33,26.23q13.93-19.8,40.33-19.8t40.7,20.17q14.3,20.17,14.3,51v38.87l124.3,48a52.83,52.83,0,0,1,15,7.15q7.33,5,7.33,10.45v125.4q0,2.57-29.7,33T375.17,370.9H182.67q-6.24,0-13-5.13A48.79,48.79,0,0,1,159.2,355.5l-3.3-5.13L71.57,217.27q-5.87-11.36,2.2-19.43l41.07-40.33a16.62,16.62,0,0,1,11.73-5A18.61,18.61,0,0,1,139,156.77l44.37,30.8V76.83Q183.4,46,197.33,26.23ZM256,124.5V50.07q0-7.7-9.17-11.18a25.63,25.63,0,0,0-18.33-.18q-9.17,3.3-9.17,11.37V224a8.5,8.5,0,0,1-.18,2.2c-.13.37-.31,1-.55,1.83a7.1,7.1,0,0,1-.73,1.83c-.25.37-.55.86-.92,1.47a4.23,4.23,0,0,1-1.47,1.47c-.61.37-1.16.68-1.65.92q-9.17,4.4-17.23-1.83L129.5,178.4,99.07,209.93l86.53,124.3H370l32.63-36.67V190.13l-124.3-48a52.74,52.74,0,0,1-15-7.15Q256,130,256,124.5ZM201,407.57H384.33a18.15,18.15,0,0,1,18.33,18.33v36.67a18.15,18.15,0,0,1-18.33,18.33H201a18.15,18.15,0,0,1-18.33-18.33V425.9A18.15,18.15,0,0,1,201,407.57Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg fill="#fff" id="Palette-icon-High-Fidelity" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>palette-icon</title><path d="M186.73,239.68a31.17,31.17,0,0,0,10.36-7.46,20.84,20.84,0,0,0,4.27-18.36c-3.11-12.11-15.54-17.4-26.67-19.67-10.51-2.14-21.55-2.44-31.34-6.82-14.91-6.66-24.85-23.11-23.8-39.41,1.28-20,17-36,33.5-47.35,60.53-41.4,146.23-41.86,207.34-1.31s94,119.52,79.92,191.5S366.23,423.51,294.48,438.65c-51.48,10.86-106-.5-152.82-24.6C120.85,403.33,101,389.8,86.82,371.13S64.92,328,70.05,305.2s23.86-41.3,46-48c13.5-4.08,27.93-3.92,41.68-7a142.49,142.49,0,0,0,24.14-8.3C183.52,241.16,185.14,240.45,186.73,239.68ZM373,148.22a29.25,29.25,0,1,0-3.88,41.32h0a29.26,29.26,0,0,0,4-41.17l-.14-.17Zm27.95,141.42.15-.12a29.45,29.45,0,1,0-41.45-4l.11.14a29.26,29.26,0,0,0,41.17,4l.15-.12Zm-40.52,89.43a29.25,29.25,0,1,0-41.17-4,29.26,29.26,0,0,0,41.17,4l.06,0ZM263.61,407.5a33.22,33.22,0,1,0-.15.1l.29-.24Zm-83.69-82.23A29.25,29.25,0,1,0,176,366.59h0a29.26,29.26,0,0,0,4-41.17l-.14-.17Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1,010 B |
File diff suppressed because it is too large
Load diff
|
|
@ -1,677 +0,0 @@
|
|||
<script type="text/javascript" src="../../html/js/keyboardControl.js"></script>
|
||||
<script src="../../html/js/jquery-2.1.4.min.js"></script>
|
||||
<script src="../content/js/ColorUtils.js"></script>
|
||||
<script src="../../html/js/colpick.js"></script>
|
||||
|
||||
<style>
|
||||
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 {
|
||||
outline: none;
|
||||
}
|
||||
.sliderWrapper {
|
||||
display: table;
|
||||
padding: 0.4rem 0;
|
||||
}
|
||||
.property.range input[type=number] {
|
||||
margin-left: 0.8rem;
|
||||
width: 5.4rem;
|
||||
height: 1.8rem;
|
||||
}
|
||||
.brushButton {
|
||||
background-color: #2e2e2e;
|
||||
border:none;
|
||||
position: relative;
|
||||
width: 80px;
|
||||
margin: 1px 0px;
|
||||
}
|
||||
.checkbox {
|
||||
margin: 0px;
|
||||
}
|
||||
.BrushIcon {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-size: 75% 75%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-blend-mode: multiply;
|
||||
background-image: url("../../../../resources/icons/loadingDark.gif");
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
}
|
||||
#animatedBrush {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.selectedBrush {
|
||||
position: relative;
|
||||
}
|
||||
#selectedOverlay {
|
||||
background-color: rgba(16, 128, 184, 0.7);
|
||||
top:0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#brushesCointainer {
|
||||
margin-bottom: 50px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.imageContainer {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
height: 80px;
|
||||
}
|
||||
.brushLabel {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-bottom: 5px;
|
||||
color: white;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
z-index: 2;
|
||||
word-wrap: break-word;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#strokeWidthWidget {
|
||||
position: fixed;
|
||||
background-color: #404040;
|
||||
display: flex;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
top: -1px;
|
||||
margin: 0px;
|
||||
padding: 15px 0px;
|
||||
border: none;
|
||||
padding-left: 21px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#pressureSensitiveCheckbox {
|
||||
margin-left: 20px;
|
||||
margin-top: 23px;
|
||||
}
|
||||
|
||||
.animationBrush input[type=checkbox]:disabled + label,
|
||||
.dynamicBrush input[type=checkbox]:disabled + label {
|
||||
color: #202020;
|
||||
}
|
||||
|
||||
.brushes-group[collapsed="true"] ~ .brushes-group,
|
||||
.special-group[collapsed="true"] ~ .special-group {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#brushesContent {
|
||||
margin-top: 48px
|
||||
}
|
||||
|
||||
.effectPreview {
|
||||
width: 40px;
|
||||
height: 18px;
|
||||
background-color: red;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
#continuousLineIcon {
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
font-size: 32px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="../../html/css/edit-style.css">
|
||||
|
||||
<div id="strokeWidthWidget" class="property range">
|
||||
<div>
|
||||
<label style="display: block">Stroke Width</label>
|
||||
<div class="sliderWrapper">
|
||||
<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)"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pressureSensitiveCheckbox" class="behavior-group property checkbox">
|
||||
<input onchange="switchPressureSensitiveWidth(this)" type="checkbox" id="triggerSensitiveWidth"></input>
|
||||
<label for="triggerSensitiveWidth">Trigger Sensitive Width</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="brushesContent">
|
||||
<div id="properties-list">
|
||||
<fieldset class="major">
|
||||
<legend id="special-section" class="section-header special-group special-section">
|
||||
Special Effects<span>M</span>
|
||||
</legend>
|
||||
<div class="special-group special-brushes-section special-section">
|
||||
|
||||
<div class="special-group special-brushes property checkbox">
|
||||
<span id="continuousLineIcon" class="glyph effectPreview">∞</span>
|
||||
<input onchange="setContinuosLineMode(this)" type="checkbox" id="continuousLine"></input>
|
||||
<label for="continuousLine">Use Continuous Line</label>
|
||||
</div>
|
||||
|
||||
<div class="special-group behavior-group property checkbox animationBrush">
|
||||
<span id="animatedHue" class="effectPreview"></span>
|
||||
<input onchange="setAnimatedBrush(this)" type="checkbox" id="animatedBrush"></input>
|
||||
<label for="animatedBrush">Use Hue Animation</label>
|
||||
</div>
|
||||
|
||||
<div class="special-group behavior-group property checkbox dynamicBrush">
|
||||
<span id="hue" class="effectPreview"></span>
|
||||
<input onchange="setDynamicBrush(this)" type="checkbox" id="dynamicHue"></input>
|
||||
<label for="dynamicHue">Use Dynamic Hue</label>
|
||||
</div>
|
||||
|
||||
<div class="special-group behavior-group property checkbox dynamicBrush">
|
||||
<span id="saturation" class="effectPreview"></span>
|
||||
<input onchange="setDynamicBrush(this)" type="checkbox" id="dynamicSaturation"></input>
|
||||
<label for="dynamicSaturation">Use Dynamic Saturation</label>
|
||||
</div>
|
||||
|
||||
<div class="special-group behavior-group property checkbox dynamicBrush">
|
||||
<span id="value" class="effectPreview"></span>
|
||||
<input onchange="setDynamicBrush(this)" type="checkbox" id="dynamicValue"></input>
|
||||
<label for="dynamicValue">Use Dynamic Brightness</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
|
||||
<fieldset class="major">
|
||||
<legend id="brush-section" class="section-header brushes-group brushes-section">
|
||||
Brushes<span>M</span>
|
||||
</legend>
|
||||
<div id="brushesCointainer" class="brushes-group">
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/square.png" onclick="changePaintBrush(0)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/square.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Square</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/paintbrush6.png" onclick="changePaintBrush(1)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/paintbrush6.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Rounded</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/soft.png" onclick="changePaintBrush(2)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/soft.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Soft</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/dupuiz.png" onclick="changePaintBrush(3)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/dupuiz.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Tri</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/basic.png" onclick="changePaintBrush(4)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/basic.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Basic</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/oil.png" onclick="changePaintBrush(5)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/oil.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Oil</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/gouache.png" onclick="changePaintBrush(6)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/gouache.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Gouache A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/gouache.png" onclick="changePaintBrush(7)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/gouacheB.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Gouache B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/koons.png" onclick="changePaintBrush(8)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/koons.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Koons</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/sponge.png" onclick="changePaintBrush(9)">
|
||||
<div class="imageContainer">
|
||||
<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(10)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/spongeB.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Sponge B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/graphite.png" onclick="changePaintBrush(11)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/graphite.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Graphite</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/bristle.png" onclick="changePaintBrush(12)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/bristle.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Bristle</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/spat-fine.png" onclick="changePaintBrush(13)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/spat-fine.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Spat</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="stretch" id="content/brushes/gradient2.png" onclick="changePaintBrush(14)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/gradient2.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Gradient A</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/gradient2.png" onclick="changePaintBrush(15)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/gradient2.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Gradient B</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/dot.png" onclick="changePaintBrush(16)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/dot.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Dot</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/polka.png" onclick="changePaintBrush(17)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/polka.png" class="BrushIcon"/></div>
|
||||
</div>
|
||||
<div class="brushLabel">Polka</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/heart.png" onclick="changePaintBrush(18)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/heart.png" class="BrushIcon"/></div>
|
||||
</div>
|
||||
<div class="brushLabel">Heart</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/hearts.png" onclick="changePaintBrush(19)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/hearts.png" class="BrushIcon"/></div>
|
||||
</div>
|
||||
<div class="brushLabel">Hearts</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/flowers2.png" onclick="changePaintBrush(20)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/flowers2.png" class="BrushIcon"/></div>
|
||||
</div>
|
||||
<div class="brushLabel">Flowers</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/leaves.png" onclick="changePaintBrush(21)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/leaves.png" class="BrushIcon"/></div>
|
||||
</div>
|
||||
<div class="brushLabel">Leaves</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/snowflakes2.png" onclick="changePaintBrush(22)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/snowflakes2.png" class="BrushIcon"/></div>
|
||||
</div>
|
||||
<div class="brushLabel">Snowflakes</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" brushType="repeat" id="content/brushes/paintbrush1.png" onclick="changePaintBrush(23)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/paintbrush1.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Stars</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/breakfast.png" onclick="changePaintBrush(24)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/breakfast.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Breakfast</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/newton.png" onclick="changePaintBrush(25)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/newton.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Newton</div>
|
||||
</button>
|
||||
|
||||
<button class="brushButton" colored="true" brushType="stretch" id="content/brushes/softy.png" onclick="changePaintBrush(26)">
|
||||
<div class="imageContainer">
|
||||
<div imageSrc="../content/brushes/softy.png" class="BrushIcon"></div>
|
||||
</div>
|
||||
<div class="brushLabel">Softbow</div>
|
||||
</button>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var ANIMATED_HUE_STEP = 1;
|
||||
var currentBrush = 0;
|
||||
var colorAnimPreviewInterval = null;
|
||||
var currentAnimationColor = {h: 0, s: 100, b: 100};
|
||||
colorAnimPreviewInterval = setInterval(setHueAnimationColorPreview, 30);
|
||||
|
||||
var EventBridge = parent.EventBridge;
|
||||
|
||||
function changeLineWidthRange(e) {
|
||||
document.getElementById("lineWidthText").value = e.value;
|
||||
notifyLineWidthChanged(e);
|
||||
}
|
||||
|
||||
function changeLineWidthNumber(e) {
|
||||
if (e.value > 1) {
|
||||
document.getElementById("lineWidthText").value = 1;
|
||||
}
|
||||
if (e.value < 0) {
|
||||
document.getElementById("lineWidthText").value = 0;
|
||||
}
|
||||
document.getElementById("lineWidthRange").value = e.value > 1 ? 1 : e.value;
|
||||
document.getElementById("lineWidthRange").value = e.value < 0 ? 0 : e.value;
|
||||
notifyLineWidthChanged(e);
|
||||
}
|
||||
|
||||
function notifyLineWidthChanged(e) {
|
||||
var changeLineWidthEvent = {
|
||||
"type" : "changeLineWidth",
|
||||
"brushWidth": e.value
|
||||
};
|
||||
EventBridge.emitWebEvent(JSON.stringify(changeLineWidthEvent));
|
||||
}
|
||||
|
||||
function switchPressureSensitiveWidth(checkbox) {
|
||||
// 'jscolor' instance can be used as a string
|
||||
var switchPressureSensitiveWidthEvent = {
|
||||
"type" : "switchTriggerPressureWidth",
|
||||
"enabled" : checkbox.checked,
|
||||
};
|
||||
EventBridge.emitWebEvent(JSON.stringify(switchPressureSensitiveWidthEvent));
|
||||
}
|
||||
|
||||
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";
|
||||
selectedOverlay.innerHTML = "✔";
|
||||
brushes[currentBrush].children[0].appendChild(selectedOverlay);
|
||||
|
||||
var changedBrushEvent = {
|
||||
"type" : "changeBrush",
|
||||
"brushName": brushes[currentBrush].id,
|
||||
"brushType": brushes[currentBrush].getAttribute("brushType"),
|
||||
"isColored": brushes[currentBrush].getAttribute("colored"),
|
||||
"brushID" : brushIndex
|
||||
};
|
||||
|
||||
EventBridge.emitWebEvent(JSON.stringify(changedBrushEvent));
|
||||
}
|
||||
|
||||
function switchDynamicBrushEnabledStatus(checkbox) {
|
||||
var isAnyAnimatedChecked = false;
|
||||
$(".animationBrush").each(function( index ) {
|
||||
isAnyAnimatedChecked |= $(this).find("input[type=checkbox]")[0].checked;
|
||||
});
|
||||
$(".dynamicBrush").each(function( index ) {
|
||||
$(this).find("input[type=checkbox]")[0].disabled = isAnyAnimatedChecked;
|
||||
});
|
||||
}
|
||||
|
||||
function switchAnimationBrushEnabledStatus(checkbox) {
|
||||
var isAnyDynamicChecked = false;
|
||||
$(".dynamicBrush").each(function( index ) {
|
||||
isAnyDynamicChecked |= $(this).find("input[type=checkbox]")[0].checked;
|
||||
});
|
||||
$(".animationBrush").each(function( index ) {
|
||||
$(this).find("input[type=checkbox]")[0].disabled = isAnyDynamicChecked;
|
||||
});
|
||||
}
|
||||
|
||||
function setAnimatedBrush(checkbox) {
|
||||
switchDynamicBrushEnabledStatus();
|
||||
var switchAnimatedBrushEvent = {
|
||||
"type" : "switchAnimatedBrush",
|
||||
"animatedBrushName": "animatedHueBrush",
|
||||
"enabled" : checkbox.checked,
|
||||
"settings" : null,
|
||||
"animatedBrushID" : checkbox.id
|
||||
};
|
||||
EventBridge.emitWebEvent(JSON.stringify(switchAnimatedBrushEvent));
|
||||
}
|
||||
|
||||
function setDynamicBrush(checkbox) {
|
||||
switchAnimationBrushEnabledStatus();
|
||||
var switchDynamicBrushEvent = {
|
||||
"type" : "switchDynamicBrush",
|
||||
"enabled" : checkbox.checked,
|
||||
"dynamicBrushId" : checkbox.id
|
||||
};
|
||||
EventBridge.emitWebEvent(JSON.stringify(switchDynamicBrushEvent));
|
||||
}
|
||||
|
||||
function setContinuosLineMode(checkbox) {
|
||||
var switchContinuousDrawModeEvent = {
|
||||
"type" : "switchIsContinuous",
|
||||
"enabled" : checkbox.checked,
|
||||
};
|
||||
EventBridge.emitWebEvent(JSON.stringify(switchContinuousDrawModeEvent));
|
||||
}
|
||||
|
||||
function resizeImage(image, width, height) {
|
||||
var height = height == width ? "80px" : "40px";
|
||||
image.css("height", height);
|
||||
image.first().css("background-image", "url(" + image.attr('imageSrc') + ")");
|
||||
image.first().css("background-size", "contain");
|
||||
image.first().css("background-position", "center");
|
||||
if (height == "40px") {
|
||||
image.first().css("top", "18px");
|
||||
image.first().css("position", "absolute");
|
||||
}
|
||||
}
|
||||
|
||||
function setPreviewColors(id, hsvColor, num_steps, hsvComponent, min, max, start, step_size) {
|
||||
var gradient_step = 100.0 / (num_steps - 1);
|
||||
var previewColor = {h: hsvColor.h, s: hsvColor.s, b: hsvColor.b};
|
||||
var gradientStr = "";
|
||||
//generate the gradient string
|
||||
previewColor[hsvComponent] = start;
|
||||
for (var i = 0; i < num_steps; i++) {
|
||||
gradientStr += "#" + $.colpick.hsbToHex({h: previewColor.h, s: previewColor.s, b: previewColor.b})
|
||||
+ " " + (gradient_step * i).toFixed(1) + "%";
|
||||
gradientStr += i < (num_steps - 1) ? ", " : "";
|
||||
previewColor[hsvComponent] = start + (i + 1) * step_size;
|
||||
previewColor[hsvComponent] = previewColor[hsvComponent] > max
|
||||
? min + (previewColor[hsvComponent] % (max - min))
|
||||
: previewColor[hsvComponent];
|
||||
}
|
||||
$(id).css("background", "-webkit-linear-gradient(left, " + gradientStr + ")");
|
||||
}
|
||||
|
||||
function setHueAnimationColorPreview() {
|
||||
currentAnimationColor.h += ANIMATED_HUE_STEP;
|
||||
currentAnimationColor.h = currentAnimationColor.h > 360
|
||||
? 360 - currentAnimationColor.h
|
||||
: currentAnimationColor.h;
|
||||
$("#animatedHue").css("background-color",
|
||||
"#" + $.colpick.hsbToHex({h: currentAnimationColor.h, s: currentAnimationColor.s, b: currentAnimationColor.b}));
|
||||
}
|
||||
|
||||
function setStrokeColor(strokeColor) {
|
||||
$(".imageContainer").each(function( index ) {
|
||||
//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 + ")");
|
||||
|
||||
}
|
||||
});
|
||||
var hsvColor = $.colpick.rgbToHsb({r: strokeColor.red, g: strokeColor.green, b: strokeColor.blue});
|
||||
setPreviewColors("#hue", hsvColor, 7, "h", 0, 360, hsvColor.h, 60);
|
||||
setPreviewColors("#saturation", hsvColor, 2, "s", 50, 100, 100, 50);
|
||||
setPreviewColors("#value", hsvColor, 2, "b", 60, 100, 100, 60);
|
||||
currentAnimationColor = {h: hsvColor.h, s: hsvColor.s, b: hsvColor.b};
|
||||
}
|
||||
|
||||
restoreSavedBrushes(JSON.parse(decodeURIComponent(window.parent.location.search).substring(1)));
|
||||
function restoreSavedBrushes(brushData) {
|
||||
if ("currentTexture" in brushData) {
|
||||
changePaintBrush(brushData.currentTexture.brushID);
|
||||
}
|
||||
|
||||
if ("currentAnimatedBrushes" in brushData) {
|
||||
var animatedBrushes = brushData.currentAnimatedBrushes;
|
||||
for (var i = 0; i < animatedBrushes.length; i++) {
|
||||
document.getElementById(animatedBrushes[i]).checked = true;
|
||||
//Fix for onchange not being called (this appears to be the only checkbox where this happens)
|
||||
$("#" + animatedBrushes[i]).trigger("change");
|
||||
}
|
||||
switchDynamicBrushEnabledStatus();
|
||||
}
|
||||
|
||||
if ("currentDynamicBrushes" in brushData) {
|
||||
for(var key in brushData.currentDynamicBrushes) {
|
||||
document.getElementById(key).checked = brushData.currentDynamicBrushes[key];
|
||||
}
|
||||
switchAnimationBrushEnabledStatus();
|
||||
}
|
||||
|
||||
if ("currentColor" in brushData) {
|
||||
setStrokeColor(brushData.currentColor);
|
||||
}
|
||||
|
||||
if ("currentStrokeWidth" in brushData) {
|
||||
document.getElementById("lineWidthRange").value = brushData.currentStrokeWidth;
|
||||
changeLineWidthRange({value: brushData.currentStrokeWidth});
|
||||
changeLineWidthNumber({value: brushData.currentStrokeWidth});
|
||||
}
|
||||
|
||||
if ("currentTriggerWidthEnabled" in brushData) {
|
||||
document.getElementById("triggerSensitiveWidth").checked = brushData.currentTriggerWidthEnabled;
|
||||
}
|
||||
|
||||
if ("currentIsContinuous" in brushData) {
|
||||
document.getElementById("continuousLine").checked = brushData.currentIsContinuous;
|
||||
}
|
||||
|
||||
if ("currentHeadersCollapsedStatus" in brushData) {
|
||||
for (var key in brushData.currentHeadersCollapsedStatus) {
|
||||
|
||||
var element = document.getElementById(key);
|
||||
if (brushData.currentHeadersCollapsedStatus[key]) {
|
||||
element.setAttribute("collapsed", "true");
|
||||
element.getElementsByTagName("span")[0].textContent ="L";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("message", receiveStrokeColor, false);
|
||||
function receiveStrokeColor(message) {
|
||||
var event = JSON.parse(message.data);
|
||||
setStrokeColor(event.value);
|
||||
}
|
||||
|
||||
$(window).load(function(){
|
||||
setUpKeyboardControl();
|
||||
|
||||
// Collapsible sections
|
||||
var elCollapsible = document.getElementsByClassName("section-header");
|
||||
|
||||
var toggleCollapsedEvent = function(event) {
|
||||
var element = event.target;
|
||||
var isCollapsed = element.getAttribute("collapsed") !== "true";
|
||||
element.setAttribute("collapsed", isCollapsed ? "true" : "false");
|
||||
element.getElementsByTagName("span")[0].textContent = isCollapsed ? "L" : "M";
|
||||
var switchCollapsedState = {
|
||||
"type" : "switchCollapsed",
|
||||
"isCollapsed": isCollapsed,
|
||||
"sectionId" : element.getAttribute("id")
|
||||
};
|
||||
EventBridge.emitWebEvent(JSON.stringify(switchCollapsedState));
|
||||
};
|
||||
|
||||
for (var i = 0, length = elCollapsible.length; i < length; i++) {
|
||||
var element = elCollapsible[i];
|
||||
element.addEventListener("click", toggleCollapsedEvent, true);
|
||||
};
|
||||
});
|
||||
|
||||
window.onbeforeunload = function(){
|
||||
clearInterval(colorAnimPreviewInterval);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<link rel="stylesheet" type="text/css" href="../../html/css/edit-style.css">
|
||||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: Font-Awesome;
|
||||
src: url(../../../../resources/fonts/fontawesome-webfont.ttf),
|
||||
url(../../../../fonts/fontawesome-webfont.ttf),
|
||||
url(../../../../interface/resources/fonts/fontawesome-webfont.ttf);
|
||||
}
|
||||
.changeHandButton {
|
||||
width: 216px;
|
||||
height: 216px;
|
||||
color: white !important;
|
||||
background-color: #2e2e2e;
|
||||
border: none;
|
||||
float: left;
|
||||
margin: 2px;
|
||||
text-transform: uppercase;
|
||||
font-size: 100px;
|
||||
background-image: url("../content/tabicons/hand-icon.svg");
|
||||
background-size: 60% 60%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.changeHandButton:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.changeHandButton:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
#left {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
.selectedHand {
|
||||
background-color: rgb(16, 128, 184);
|
||||
}
|
||||
</style>
|
||||
<div id="handButtonsContainer" >
|
||||
<button class="changeHandButton" id="left" onclick="chooseHand(0)"></button>
|
||||
<button class="changeHandButton selectedHand" id="right" onclick="chooseHand(1)"></button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var currentHand = 1;
|
||||
var EventBridge = parent.EventBridge;
|
||||
|
||||
function chooseHand(handIndex) {
|
||||
handButtons = document.getElementById("handButtonsContainer").children;
|
||||
handButtons[currentHand].classList.remove("selectedHand");
|
||||
currentHand = handIndex;
|
||||
handButtons[currentHand].classList.add("selectedHand");
|
||||
var chooseHandEvent = {
|
||||
"type" : "changeBrushHand",
|
||||
"DrawingHand": handButtons[handIndex].id
|
||||
};
|
||||
EventBridge.emitWebEvent(JSON.stringify(chooseHandEvent));
|
||||
}
|
||||
|
||||
restoreCurrentDrawingHand(JSON.parse(decodeURIComponent(window.parent.location.search).substring(1)));
|
||||
function restoreCurrentDrawingHand(handData) {
|
||||
if (handData.currentDrawingHand) {
|
||||
chooseHand(0);
|
||||
} else {
|
||||
chooseHand(1);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,241 +0,0 @@
|
|||
<link rel="stylesheet" type="text/css" href="../../html/css/edit-style.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../html/css/colpick.css">
|
||||
<script type="text/javascript" src="../../html/js/eventBridgeLoader.js"></script>
|
||||
<script type="text/javascript" src="../../html/js/keyboardControl.js"></script>
|
||||
<script src="../../html/js/jquery-2.1.4.min.js"></script>
|
||||
<style>
|
||||
#colorPicker {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.colorPickerCell {
|
||||
border: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#colorPickerTable {
|
||||
margin-top: 24px;
|
||||
border-collapse:collapse
|
||||
}
|
||||
|
||||
#customColorPicker {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.colorPickerCell {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#selectedOverlay {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: white;
|
||||
background-color: rgba(16, 128, 184, 0.3);
|
||||
top:0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="colorpicker"></div>
|
||||
<div id="colorPickerTable"></div>
|
||||
<div id="lastPickedColors"></div>
|
||||
|
||||
<script src="../../html/js/colpick.js">
|
||||
require('jquery-colpick');
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$('#colorpicker').colpick({
|
||||
flat:true,
|
||||
layout:'full',
|
||||
colorScheme:'dark',
|
||||
submitText: 'Add custom color',
|
||||
onChange: function(hsb, hex, rgb, el) {
|
||||
updateFromCustomPicker([rgb.r, rgb.g, rgb.b])
|
||||
},
|
||||
onSubmit: function(hsb, hex, rgb, el) {
|
||||
addColorFromCustomPicker(rgb)
|
||||
}
|
||||
});
|
||||
|
||||
var COLUMNS = 18, ROWS = 10;
|
||||
var lastSelectedButton = null;
|
||||
var currentSelectedColorOrigin = "custom"; //where the color was picked from
|
||||
var EventBridge = parent.EventBridge;
|
||||
|
||||
function addColors() {
|
||||
//10-90%
|
||||
var startingColors = [];
|
||||
for (var i = 0; i < COLUMNS; i++) {
|
||||
var hsl = new Object();
|
||||
hsl.hue = 340*i/(COLUMNS-1) + 10;
|
||||
startingColors.push(hsl);
|
||||
}
|
||||
var colorPickerLayout = document.getElementById("colorPickerTable");
|
||||
for (var j = 0; j < ROWS; j++) {
|
||||
var row = document.createElement("div");
|
||||
for (var i = 0; i < startingColors.length; i++) {
|
||||
var colorCell = document.createElement("div");
|
||||
//colorCell.type = "button";
|
||||
colorCell.style.backgroundColor = "hsl(" + startingColors[i].hue
|
||||
+ ",100%," + ((80-(80*j/(ROWS-1))) + 10) + "%)";
|
||||
|
||||
colorCell.className = "colorPickerCell";
|
||||
colorCell.onclick = function() {
|
||||
updateColorFromTable(this, "table")
|
||||
};
|
||||
row.appendChild(colorCell);
|
||||
}
|
||||
colorPickerLayout.appendChild(row);
|
||||
}
|
||||
|
||||
//make it easier to select later the current color
|
||||
$(".colorPickerCell").each(function() {
|
||||
var colorArray = window.getComputedStyle($(this)[0]).backgroundColor.match(/\d+/g);
|
||||
$(this).attr("id", "table(" + colorArray[0] + "," + colorArray[1] + "," + colorArray[2] + ")");
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
addColors();
|
||||
|
||||
function clampColors(colorArray) {
|
||||
colorArray[0] = Math.min(Math.max(colorArray[0], 0), 255);
|
||||
colorArray[1] = Math.min(Math.max(colorArray[1], 0), 255);
|
||||
colorArray[2] = Math.min(Math.max(colorArray[2], 0), 255);
|
||||
|
||||
$('#colorpicker').colpickSetColor({'r': colorArray[0], 'g': colorArray[1], 'b': colorArray[2]}, true);
|
||||
}
|
||||
|
||||
function update(colorArray) {
|
||||
// 'jscolor' instance can be used as a string
|
||||
var changedColorEvent = {
|
||||
"type" : "changeColor",
|
||||
"red" : colorArray[0],
|
||||
"green" : colorArray[1],
|
||||
"blue" : colorArray[2],
|
||||
"origin" : currentSelectedColorOrigin,
|
||||
};
|
||||
setColorInTable(colorArray);
|
||||
EventBridge.emitWebEvent(JSON.stringify(changedColorEvent));
|
||||
}
|
||||
|
||||
function updateFromCustomPicker(colorArray) {
|
||||
if (colorArray[0] != Math.min(Math.max(colorArray[0], 0), 255)
|
||||
|| colorArray[1] != Math.min(Math.max(colorArray[1], 0), 255)
|
||||
|| colorArray[2] != Math.min(Math.max(colorArray[2], 0), 255)) {
|
||||
clampColors(colorArray);
|
||||
|
||||
return;
|
||||
}
|
||||
var tableColor = document.getElementById("table(" + colorArray[0] + "," + colorArray[1] + "," + colorArray[2] + ")");
|
||||
var userColor = document.getElementById("user(" + colorArray[0] + "," + colorArray[1] + "," + colorArray[2] + ")");
|
||||
if (tableColor) {
|
||||
currentSelectedColorOrigin = "table";
|
||||
} else if (userColor) {
|
||||
currentSelectedColorOrigin = "user";
|
||||
} else {
|
||||
currentSelectedColorOrigin = "custom";
|
||||
}
|
||||
update(colorArray);
|
||||
}
|
||||
|
||||
function selectButton(button) {
|
||||
if (lastSelectedButton != null) {
|
||||
lastSelectedButton.removeChild(document.getElementById("selectedOverlay"));
|
||||
}
|
||||
if (button) {
|
||||
var selectedOverlay = document.createElement("div");
|
||||
selectedOverlay.id = "selectedOverlay";
|
||||
selectedOverlay.innerHTML = "✔";
|
||||
button.appendChild(selectedOverlay);
|
||||
lastSelectedButton = button;
|
||||
} else {
|
||||
lastSelectedButton = null;
|
||||
}
|
||||
}
|
||||
|
||||
function updateColorFromTable(button, origin) {
|
||||
var colorArray = window.getComputedStyle(button).backgroundColor.match(/\d+/g);
|
||||
$('#colorpicker').colpickSetColor({'r': colorArray[0], 'g': colorArray[1], 'b': colorArray[2]}, true);
|
||||
currentSelectedColorOrigin = origin;
|
||||
update(colorArray);
|
||||
}
|
||||
|
||||
function addColorFromCustomPicker(rgbColor) {
|
||||
currentSelectedColorOrigin = "user";
|
||||
var colorArray = [rgbColor.r, rgbColor.g, rgbColor.b];
|
||||
addCustomColor(colorArray, true);
|
||||
update(colorArray);
|
||||
}
|
||||
|
||||
function addCustomColor(colorArray, notify) {
|
||||
var lastPickedColorsContainer = document.getElementById("lastPickedColors");
|
||||
var lastPickedColors = lastPickedColorsContainer.children;
|
||||
for (var i = 0; i < lastPickedColors.length; i++) {
|
||||
var lasPickedCellColor = window.getComputedStyle(lastPickedColors[i]).backgroundColor.match(/\d+/g);
|
||||
var equalRgbComponentsCount = 0;
|
||||
for (var j = 0; j < 3; j++) {
|
||||
if (lasPickedCellColor[j] == colorArray[j])
|
||||
equalRgbComponentsCount++;
|
||||
if (equalRgbComponentsCount == 3) //the color is the same so we won't add it!
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (lastPickedColors.length + 1 > COLUMNS) {
|
||||
lastPickedColorsContainer.removeChild(lastPickedColors[lastPickedColors.length-1]);
|
||||
}
|
||||
|
||||
var colorCell = document.createElement("div");
|
||||
colorCell.style.backgroundColor = "rgb(" + colorArray[0] + "," + colorArray[1] + "," + colorArray[2] + ")";
|
||||
colorCell.className = "colorPickerCell";
|
||||
colorCell.id = "user(" + colorArray[0] + "," + colorArray[1] + "," + colorArray[2] + ")";
|
||||
colorCell.onclick = function() { updateColorFromTable(this, "user") };
|
||||
lastPickedColorsContainer.insertBefore(colorCell, lastPickedColorsContainer.firstChild);
|
||||
|
||||
if (notify) {
|
||||
var addCustomColorEvent = {
|
||||
"type" : "addCustomColor",
|
||||
"maxColors": COLUMNS,
|
||||
"red" : colorArray[0],
|
||||
"green" : colorArray[1],
|
||||
"blue" : colorArray[2]
|
||||
};
|
||||
EventBridge.emitWebEvent(JSON.stringify(addCustomColorEvent));
|
||||
}
|
||||
}
|
||||
|
||||
restoreLastColor(JSON.parse(decodeURIComponent(window.parent.location.search).substring(1)));
|
||||
function restoreLastColor(palleteData) {
|
||||
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 ("currentColor" in palleteData) {
|
||||
var newColor = palleteData.currentColor;
|
||||
$('#colorpicker').colpickSetColor({'r': newColor.red, 'g': newColor.green, 'b': newColor.blue}, true);
|
||||
currentSelectedColorOrigin = newColor.origin;
|
||||
setColorInTable([newColor.red, newColor.green, newColor.blue]);
|
||||
}
|
||||
}
|
||||
|
||||
function setColorInTable(colorArray) {
|
||||
var color = document.getElementById(currentSelectedColorOrigin + "(" + colorArray[0] + "," + colorArray[1] + "," + colorArray[2] + ")");
|
||||
selectButton(color);
|
||||
}
|
||||
|
||||
$(window).load(function(){
|
||||
setUpKeyboardControl();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<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>
|
||||
|
||||
@font-face {
|
||||
font-family: Font-Awesome;
|
||||
src: url(../../../../resources/fonts/fontawesome-webfont.ttf),
|
||||
url(../../../../fonts/fontawesome-webfont.ttf),
|
||||
url(../../../../interface/resources/fonts/fontawesome-webfont.ttf);
|
||||
}
|
||||
iframe {
|
||||
height:100%;
|
||||
width:100%;
|
||||
position: absolute;
|
||||
}
|
||||
#tabs {
|
||||
background-color: black;
|
||||
}
|
||||
.tabButton {
|
||||
background-color: #000;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
padding: 12px;
|
||||
margin: 0px;
|
||||
vertical-align: middle;
|
||||
display: inline-flex;
|
||||
user-select: none;
|
||||
}
|
||||
.tabIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.selected {
|
||||
background-color: #404040
|
||||
}
|
||||
#undoButton {
|
||||
float: right;
|
||||
border: 2px solid white;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
font-size: 15px;
|
||||
margin-top: 10px;
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body style="margin:0px;padding:0px;overflow:hidden">
|
||||
<div id="tabs">
|
||||
<div class="tabButton" onclick="selectTab(0)"><img class="tabIcon" src="../content/tabicons/palette-icon.svg"/>Palette</div>
|
||||
<div class="tabButton" onclick="selectTab(1)"><img class="tabIcon" src="../content/tabicons/brush-icon.svg"/>Brushes</div>
|
||||
<div class="tabButton" onclick="selectTab(2)"><img class="tabIcon" src="../content/tabicons/hand-icon.svg"/>Hand</div>
|
||||
<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="chooseHandTab.html" id="chooseHandTab" seamless style="display: none"></iframe>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script type="text/javascript">
|
||||
var currentTab = 0;
|
||||
var iframesLoaded = 0;
|
||||
function selectTab(tabIndex) {
|
||||
var tabs = document.getElementById("tabs").children;
|
||||
var contentPanels = document.getElementById("content").children;
|
||||
tabs[currentTab].classList.remove("selected");
|
||||
contentPanels[currentTab].style.display = "none";
|
||||
contentPanels[tabIndex].style.display = "block";
|
||||
tabs[tabIndex].classList.add("selected");
|
||||
currentTab = tabIndex;
|
||||
var changeTabEvent = {
|
||||
"type" : "changeTab",
|
||||
"currentTab": tabIndex
|
||||
};
|
||||
EventBridge.emitWebEvent(JSON.stringify(changeTabEvent));
|
||||
}
|
||||
|
||||
function frameLoaded(iframe) {
|
||||
iframesLoaded++;
|
||||
if (iframesLoaded == $("#content").children().length) {
|
||||
var appReadyEvent = {
|
||||
"type" : "appReady",
|
||||
};
|
||||
EventBridge.emitWebEvent(JSON.stringify(appReadyEvent));
|
||||
}
|
||||
}
|
||||
|
||||
EventBridge.scriptEventReceived.connect(function (message) {
|
||||
var event = JSON.parse(message);
|
||||
if (event.type == "undoDisable") {
|
||||
setUndoState(event.value);
|
||||
}
|
||||
if (event.type == "changeStrokeColor") {
|
||||
document.getElementById("brushesTab").contentWindow.postMessage(message, "*");
|
||||
}
|
||||
});
|
||||
|
||||
//restore last opened tab
|
||||
selectTab(JSON.parse(decodeURIComponent(window.location.search).substring(1)).currentTab);
|
||||
|
||||
//Undo related logic
|
||||
function setUndoState(disabled) {
|
||||
if (!disabled) {
|
||||
document.getElementById("undoButton").removeAttribute("disabled");
|
||||
} else {
|
||||
document.getElementById("undoButton").setAttribute("disabled", disabled);
|
||||
}
|
||||
}
|
||||
|
||||
function undo() {
|
||||
var undoEvent = {"type": "undo"};
|
||||
EventBridge.emitWebEvent(JSON.stringify(undoEvent));
|
||||
}
|
||||
|
||||
window.onbeforeunload = function (e) {
|
||||
var reloadPageEvent = {
|
||||
"type" : "reloadPage",
|
||||
};
|
||||
EventBridge.emitWebEvent(JSON.stringify(reloadPageEvent));
|
||||
};
|
||||
|
||||
var undoState = JSON.parse(decodeURIComponent(window.location.search).substring(1));
|
||||
setUndoState(undoState.undoDisable);
|
||||
|
||||
</script>
|
||||
|
||||
Loading…
Reference in a new issue