Remove fingerpaint app from scripts/system.

scripts/system/fingerPaint/content/animatedBrushes/animatedBrush.js

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

scripts/system/fingerPaint/content/animatedBrushes/animatedBrushScript.js

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

scripts/system/fingerPaint/content/animatedBrushes/animatedBrushesList.js

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

scripts/system/fingerPaint/content/animatedBrushes/animatedHueBrush.js

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

scripts/system/fingerPaint/content/animatedBrushes/animatedRotationBrush.js

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

scripts/system/fingerPaint/content/animatedBrushes/animatedTranslationBrush.js

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

scripts/system/fingerPaint/content/js/ColorUtils.js

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

scripts/system/fingerPaint/content/tabicons/brush-icon.svg

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

scripts/system/fingerPaint/content/tabicons/hand-icon.svg

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

scripts/system/fingerPaint/content/tabicons/palette-icon.svg

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

scripts/system/fingerPaint/html/brushesTab.html

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

scripts/system/fingerPaint/html/chooseHandTab.html

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

scripts/system/fingerPaint/html/colorsTab.html

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

scripts/system/fingerPaint/html/main.html

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