Remove fingerpaint app from scripts/system.

This commit is contained in:
Daniela 2017-10-03 15:28:05 +01:00
parent 2b18296cfd
commit b55e416ccf
41 changed files with 0 additions and 2517 deletions

View file

@ -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;

View file

@ -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);
}
});

View file

@ -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);
}
}

View file

@ -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;

View file

@ -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;

View file

@ -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

View file

@ -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;
}

View file

@ -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

View file

@ -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

View file

@ -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

View file

@ -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">&#8734;</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 = "&#x2714";
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>

View file

@ -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>

View file

@ -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 = "&#x2714";
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>

View file

@ -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="&#xf064;"/>
</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>