mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-08-09 11:07:52 +02:00
Add Keyboard when input fields get focus in the palette tab.
Add feedback when user picks a color from the table or from the set custom colors. Fix hand hovering tablet when entering the app (stopped working after restoring brush values).
This commit is contained in:
parent
5c40a6810e
commit
c94774ec18
3 changed files with 147 additions and 64 deletions
|
@ -15,7 +15,7 @@
|
||||||
UNDO_STACK_SIZE = 5,
|
UNDO_STACK_SIZE = 5,
|
||||||
undoStack = [];
|
undoStack = [];
|
||||||
isFingerPainting = false,
|
isFingerPainting = false,
|
||||||
isTabletFocused = false, //starts with true cause you need to be hovering the tablet in order to open the app
|
isTabletFocused = false,
|
||||||
tabletDebugFocusLine = null,
|
tabletDebugFocusLine = null,
|
||||||
//animated brush vars
|
//animated brush vars
|
||||||
lastFrameTime = Date.now(),
|
lastFrameTime = Date.now(),
|
||||||
|
@ -156,6 +156,7 @@
|
||||||
entityID = Entities.addEntity({
|
entityID = Entities.addEntity({
|
||||||
type: "PolyLine",
|
type: "PolyLine",
|
||||||
name: "fingerPainting",
|
name: "fingerPainting",
|
||||||
|
shapeType: "box",
|
||||||
color: STROKE_COLOR,
|
color: STROKE_COLOR,
|
||||||
position: position,
|
position: position,
|
||||||
linePoints: strokePoints,
|
linePoints: strokePoints,
|
||||||
|
@ -205,8 +206,6 @@
|
||||||
normals: strokeNormals,
|
normals: strokeNormals,
|
||||||
strokeWidths: strokeWidths
|
strokeWidths: strokeWidths
|
||||||
});
|
});
|
||||||
|
|
||||||
print(JSON.stringify(Entities.getEntityProperties(entityID)));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -460,17 +459,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkTabletHasFocus() {
|
function checkTabletHasFocus() {
|
||||||
var controllerPose = isLeftHandDominant ? getControllerWorldLocation(Controller.Standard.LeftHand, true)
|
var controllerPose = isLeftHandDominant
|
||||||
: getControllerWorldLocation(Controller.Standard.RightHand, true);
|
? getControllerWorldLocation(Controller.Standard.LeftHand, true)
|
||||||
|
: getControllerWorldLocation(Controller.Standard.RightHand, true);
|
||||||
|
|
||||||
var fingerTipRotation = controllerPose.rotation;//Quat.inverse(MyAvatar.orientation);
|
var fingerTipRotation = controllerPose.rotation;
|
||||||
var fingerTipPosition = controllerPose.position;//MyAvatar.getJointPosition(handName === "left" ? "LeftHandIndex4" : "RightHandIndex4");
|
var fingerTipPosition = controllerPose.position;
|
||||||
var pickRay = {
|
var pickRay = {
|
||||||
origin: fingerTipPosition,
|
origin: fingerTipPosition,
|
||||||
direction: Quat.getUp(fingerTipRotation)
|
direction: Quat.getUp(fingerTipRotation)
|
||||||
}
|
}
|
||||||
var overlays = Overlays.findRayIntersection(pickRay, false, [HMD.tabletID], [inkSourceOverlay.overlayID]);
|
var overlays = Overlays.findRayIntersection(pickRay, false, [HMD.tabletID], [inkSourceOverlay.overlayID]);
|
||||||
//print(JSON.stringify(overlays));
|
|
||||||
if (overlays.intersects && HMD.tabletID == overlays.overlayID) {
|
if (overlays.intersects && HMD.tabletID == overlays.overlayID) {
|
||||||
if (!isTabletFocused) {
|
if (!isTabletFocused) {
|
||||||
isTabletFocused = true;
|
isTabletFocused = true;
|
||||||
|
@ -846,7 +845,7 @@
|
||||||
//Load last fingerpaint settings
|
//Load last fingerpaint settings
|
||||||
function restoreLastValues() {
|
function restoreLastValues() {
|
||||||
savedSettings = new Object();
|
savedSettings = new Object();
|
||||||
savedSettings.currentColor = Settings.getValue("currentColor", {red: 250, green: 0, blue: 0}),
|
savedSettings.currentColor = Settings.getValue("currentColor", {red: 250, green: 0, blue: 0, origin: "custom"}),
|
||||||
savedSettings.currentStrokeWidth = Settings.getValue("currentStrokeWidth", 0.25);
|
savedSettings.currentStrokeWidth = Settings.getValue("currentStrokeWidth", 0.25);
|
||||||
savedSettings.currentTexture = Settings.getValue("currentTexture", null);
|
savedSettings.currentTexture = Settings.getValue("currentTexture", null);
|
||||||
savedSettings.currentDrawingHand = Settings.getValue("currentDrawingHand", false);
|
savedSettings.currentDrawingHand = Settings.getValue("currentDrawingHand", false);
|
||||||
|
@ -859,7 +858,7 @@
|
||||||
|
|
||||||
function onButtonClicked() {
|
function onButtonClicked() {
|
||||||
restoreLastValues();
|
restoreLastValues();
|
||||||
isTabletFocused = false; //should always start false so onUpdate updates this variable to true in the beggining
|
//isFingerPainting = false;
|
||||||
var wasFingerPainting = isFingerPainting;
|
var wasFingerPainting = isFingerPainting;
|
||||||
|
|
||||||
isFingerPainting = !isFingerPainting;
|
isFingerPainting = !isFingerPainting;
|
||||||
|
@ -883,6 +882,13 @@
|
||||||
|
|
||||||
if (!isFingerPainting) {
|
if (!isFingerPainting) {
|
||||||
disableProcessing();
|
disableProcessing();
|
||||||
|
Controller.mousePressEvent.disconnect(mouseStartLine);
|
||||||
|
Controller.mouseMoveEvent.disconnect(mouseDrawLine);
|
||||||
|
Controller.mouseReleaseEvent.disconnect(mouseFinishLine);
|
||||||
|
} else {
|
||||||
|
Controller.mousePressEvent.connect(mouseStartLine);
|
||||||
|
Controller.mouseMoveEvent.connect(mouseDrawLine);
|
||||||
|
Controller.mouseReleaseEvent.connect(mouseFinishLine);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -910,6 +916,9 @@
|
||||||
event = JSON.parse(event);
|
event = JSON.parse(event);
|
||||||
}
|
}
|
||||||
switch (event.type) {
|
switch (event.type) {
|
||||||
|
case "appReady":
|
||||||
|
isTabletFocused = false; //make sure we can set the focus on the tablet again
|
||||||
|
break;
|
||||||
case "changeTab":
|
case "changeTab":
|
||||||
Settings.setValue("currentTab", event.currentTab);
|
Settings.setValue("currentTab", event.currentTab);
|
||||||
break;
|
break;
|
||||||
|
@ -1053,7 +1062,6 @@
|
||||||
isActive: isFingerPainting
|
isActive: isFingerPainting
|
||||||
});
|
});
|
||||||
button.clicked.connect(onButtonClicked);
|
button.clicked.connect(onButtonClicked);
|
||||||
|
|
||||||
// Track whether tablet is displayed or not.
|
// Track whether tablet is displayed or not.
|
||||||
tablet.screenChanged.connect(onTabletScreenChanged);
|
tablet.screenChanged.connect(onTabletScreenChanged);
|
||||||
}
|
}
|
||||||
|
@ -1080,13 +1088,13 @@
|
||||||
return Vec3.sum(pickRay.origin, Vec3.multiply(pickRay.direction, 5));
|
return Vec3.sum(pickRay.origin, Vec3.multiply(pickRay.direction, 5));
|
||||||
}
|
}
|
||||||
|
|
||||||
Controller.mouseMoveEvent.connect(function(event){
|
function mouseDrawLine(event){
|
||||||
if (rightBrush && rightBrush.isDrawing()) {
|
if (rightBrush && rightBrush.isDrawing()) {
|
||||||
rightBrush.drawLine(getFingerPosition(event.x, event.y), 0.03);
|
rightBrush.drawLine(getFingerPosition(event.x, event.y), 0.03);
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
Controller.mousePressEvent.connect(function(event){
|
function mouseStartLine(event){
|
||||||
print(JSON.stringify(event));
|
print(JSON.stringify(event));
|
||||||
if (event.isLeftButton) {
|
if (event.isLeftButton) {
|
||||||
rightBrush.startLine(getFingerPosition(event.x, event.y), 0.03);
|
rightBrush.startLine(getFingerPosition(event.x, event.y), 0.03);
|
||||||
|
@ -1094,37 +1102,34 @@
|
||||||
} else if (event.isMiddleButton) {
|
} else if (event.isMiddleButton) {
|
||||||
//delete first line in sight
|
//delete first line in sight
|
||||||
//var pickRay = getFingerPosition(event.x, event.y);
|
//var pickRay = getFingerPosition(event.x, event.y);
|
||||||
entities = Entities.findEntities(MyAvatar.position, 10);
|
// entities = Entities.findEntities(MyAvatar.position, 10);
|
||||||
// Fine polyline entity with closest point within search radius.
|
// Fine polyline entity with closest point within search radius.
|
||||||
for (i = 0, entitiesLength = entities.length; i < entitiesLength; i += 1) {
|
/*for (i = 0, entitiesLength = entities.length; i < entitiesLength; i += 1) {
|
||||||
print("NEAR ENTITIES: " + JSON.stringify(Entities.getEntityProperties(entities[i])));
|
print("NEAR ENTITIES: " + JSON.stringify(Entities.getEntityProperties(entities[i])));
|
||||||
}
|
}*/
|
||||||
|
|
||||||
var pickRay = Camera.computePickRay(event.x, event.y);
|
var pickRay = Camera.computePickRay(event.x, event.y);
|
||||||
var entityToDelete = Entities.findRayIntersection(pickRay, false, [Entities.findEntities(MyAvatar.position, 1000)], []);
|
var entityToDelete = Entities.findRayIntersection(pickRay, false, [Entities.findEntities(MyAvatar.position, 1000)], []);
|
||||||
print("Entity to DELETE: " + JSON.stringify(entityToDelete));
|
print("Entity to DELETE: " + JSON.stringify(entityToDelete));
|
||||||
|
var line3d = Overlays.addOverlay("line3d", {
|
||||||
var line3d = Overlays.addOverlay("line3d", {
|
start: pickRay.origin,
|
||||||
start: pickRay.origin,
|
end: Vec3.sum(pickRay.origin, Vec3.multiply(pickRay.direction, 100)),
|
||||||
end: Vec3.sum(pickRay.origin, Vec3.multiply(pickRay.direction, 100)),
|
color: { red: 255, green: 0, blue: 255},
|
||||||
color: { red: 255, green: 0, blue: 255},
|
lineWidth: 5
|
||||||
lineWidth: 5
|
});
|
||||||
});
|
|
||||||
if (entityToDelete.intersects) {
|
if (entityToDelete.intersects) {
|
||||||
print("Entity to DELETE Properties: " + JSON.stringify(Entities.getEntityProperties(entityToDelete.entityID)));
|
print("Entity to DELETE Properties: " + JSON.stringify(Entities.getEntityProperties(entityToDelete.entityID)));
|
||||||
//Entities.deleteEntity(entityToDelete.entityID);
|
//Entities.deleteEntity(entityToDelete.entityID);
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
});
|
|
||||||
|
|
||||||
Controller.mouseReleaseEvent.connect(function(event){
|
function mouseFinishLine(event){
|
||||||
isMouseDrawing = false;
|
isMouseDrawing = false;
|
||||||
if (rightBrush && rightBrush.isDrawing()) {
|
if (rightBrush && rightBrush.isDrawing()) {
|
||||||
rightBrush.finishLine(getFingerPosition(event.x, event.y), 0.03);
|
rightBrush.finishLine(getFingerPosition(event.x, event.y), 0.03);
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
setUp();
|
setUp();
|
||||||
Script.scriptEnding.connect(tearDown);
|
Script.scriptEnding.connect(tearDown);
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
<!--Note: change the parent postmessage second parameter due to possible security issues-->
|
<!--Note: change the parent postmessage second parameter due to possible security issues-->
|
||||||
<link rel="stylesheet" type="text/css" href="../../html/css/colpick.css">
|
<link rel="stylesheet" type="text/css" href="../../html/css/colpick.css">
|
||||||
<link rel="stylesheet" type="text/css" href="../../html/css/edit-style.css">
|
<link rel="stylesheet" type="text/css" href="../../html/css/edit-style.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>
|
<script src="../../html/js/jquery-2.1.4.min.js"></script>
|
||||||
<style>
|
<style>
|
||||||
/*range style: http://danielstern.ca/range.css/#/*/
|
/*range style: http://danielstern.ca/range.css/#/*/
|
||||||
|
@ -25,7 +27,7 @@
|
||||||
input[type=range]:focus { /*#252525*/
|
input[type=range]:focus { /*#252525*/
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.slider-wrapper {
|
.sliderWrapper {
|
||||||
display: table;
|
display: table;
|
||||||
padding: 0.4rem 0;
|
padding: 0.4rem 0;
|
||||||
}
|
}
|
||||||
|
@ -34,30 +36,45 @@
|
||||||
width: 5.4rem;
|
width: 5.4rem;
|
||||||
height: 1.8rem;
|
height: 1.8rem;
|
||||||
}
|
}
|
||||||
#color_picker {
|
#colorPicker {
|
||||||
display: grid;
|
display: grid;
|
||||||
}
|
}
|
||||||
.color_picker_cell {
|
.colorPickerCell {
|
||||||
border: none;
|
border: none;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
#color_picker_table {
|
#colorPickerTable {
|
||||||
border-collapse:collapse
|
border-collapse:collapse
|
||||||
}
|
}
|
||||||
#custom_color_picker {
|
#customColorPicker {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
.colorPickerCell {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#selectedOverlay {
|
||||||
|
background-color: rgba(16, 128, 184, 0.3);
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
background-image: url("../content/chosen.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="behavior-group property checkbox">
|
<div class="behavior-group property checkbox">
|
||||||
<input onchange="switchPressureSensitiveWidth(this)" type="checkbox" id="triggerSensitiveWidth"></input>
|
<input onchange="switchPressureSensitiveWidth(this)" type="checkbox" id="triggerSensitiveWidth"></input>
|
||||||
<label for="triggerSensitiveWidth">Use Trigger Sensitive Width</label>
|
<label for="triggerSensitiveWidth">Use Trigger Sensitive Width</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="property range">
|
<div class="property range">
|
||||||
<label style="display: block">Stroke Width</label>
|
<label style="display: block">Stroke Width</label>
|
||||||
<div class="slider-wrapper">
|
<div class="sliderWrapper">
|
||||||
<input type="range" id="lineWidthRange" value=0.25 min=0 max=1 step=0.01 onchange="changeLineWidthRange(this)"/>
|
<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)"/>
|
<input type="number" id="lineWidthText" value=0.25 min=0 max=1 step=0.01 onchange="changeLineWidthNumber(this)"/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -65,10 +82,10 @@
|
||||||
|
|
||||||
<div id="colorpicker"></div>
|
<div id="colorpicker"></div>
|
||||||
|
|
||||||
<div id="color_picker_table">
|
<div id="colorPickerTable">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="last_picked_colors"></div>
|
<div id="lastPickedColors"></div>
|
||||||
|
|
||||||
|
|
||||||
<script src="../../html/js/colpick.js">
|
<script src="../../html/js/colpick.js">
|
||||||
|
@ -81,15 +98,16 @@
|
||||||
colorScheme:'dark',
|
colorScheme:'dark',
|
||||||
submitText: 'Add custom color',
|
submitText: 'Add custom color',
|
||||||
onChange: function(hsb, hex, rgb, el) {
|
onChange: function(hsb, hex, rgb, el) {
|
||||||
update([rgb.r, rgb.g, rgb.b])
|
updateFromCustomPicker([rgb.r, rgb.g, rgb.b])
|
||||||
},
|
},
|
||||||
onSubmit: function(hsb, hex, rgb, el) {
|
onSubmit: function(hsb, hex, rgb, el) {
|
||||||
updateColorFromCustomPicker(rgb)
|
addColorFromCustomPicker(rgb)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
var COLUMNS = 18, ROWS = 10;
|
var COLUMNS = 18, ROWS = 10;
|
||||||
|
var lastSelectedButton = null;
|
||||||
|
var currentSelectedColorOrigin = "custom"; //where the color was picked from
|
||||||
function addColors() {
|
function addColors() {
|
||||||
//10-90%
|
//10-90%
|
||||||
var startingColors = [];
|
var startingColors = [];
|
||||||
|
@ -98,21 +116,28 @@
|
||||||
hsl.hue = 340*i/(COLUMNS-1) + 10;
|
hsl.hue = 340*i/(COLUMNS-1) + 10;
|
||||||
startingColors.push(hsl);
|
startingColors.push(hsl);
|
||||||
}
|
}
|
||||||
var colorPickerLayout = document.getElementById("color_picker_table");
|
var colorPickerLayout = document.getElementById("colorPickerTable");
|
||||||
for (var j = 0; j < ROWS; j++) {
|
for (var j = 0; j < ROWS; j++) {
|
||||||
var row = document.createElement("div");
|
var row = document.createElement("div");
|
||||||
for (var i = 0; i < startingColors.length; i++) {
|
for (var i = 0; i < startingColors.length; i++) {
|
||||||
var colorCell = document.createElement("div");
|
var colorCell = document.createElement("div");
|
||||||
//colorCell.type = "button";
|
//colorCell.type = "button";
|
||||||
colorCell.style.backgroundColor = "hsl(" + startingColors[i].hue + ",100%," + ((80-(80*j/(ROWS-1))) + 10) + "%)";
|
colorCell.style.backgroundColor = "hsl(" + startingColors[i].hue + ",100%," + ((80-(80*j/(ROWS-1))) + 10) + "%)";
|
||||||
colorCell.className = "color_picker_cell";
|
colorCell.className = "colorPickerCell";
|
||||||
colorCell.onclick = function() {
|
colorCell.onclick = function() {
|
||||||
updateColorFromTable(this)
|
updateColorFromTable(this, "table")
|
||||||
};
|
};
|
||||||
row.appendChild(colorCell);
|
row.appendChild(colorCell);
|
||||||
}
|
}
|
||||||
colorPickerLayout.appendChild(row);
|
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();
|
addColors();
|
||||||
|
@ -123,18 +148,36 @@
|
||||||
"type" : "changeColor",
|
"type" : "changeColor",
|
||||||
"red" : colorArray[0],
|
"red" : colorArray[0],
|
||||||
"green" : colorArray[1],
|
"green" : colorArray[1],
|
||||||
"blue" : colorArray[2]
|
"blue" : colorArray[2],
|
||||||
|
"origin" : currentSelectedColorOrigin,
|
||||||
};
|
};
|
||||||
|
setColorInTable(colorArray);
|
||||||
parent.postMessage(JSON.stringify(changedColorEvent), "*");
|
parent.postMessage(JSON.stringify(changedColorEvent), "*");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function updateFromCustomPicker(colorArray) {
|
||||||
|
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 changeLineWidthRange(e) {
|
function changeLineWidthRange(e) {
|
||||||
document.getElementById("lineWidthText").value = e.value;
|
document.getElementById("lineWidthText").value = e.value;
|
||||||
notifyLineWidthChanged(e);
|
notifyLineWidthChanged(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
function changeLineWidthNumber(e) {
|
function changeLineWidthNumber(e) {
|
||||||
document.getElementById("lineWidthRange").value = e.value;
|
if (e.value > 1) {
|
||||||
|
document.getElementById("lineWidthText").value = 1;
|
||||||
|
}
|
||||||
|
document.getElementById("lineWidthRange").value = e.value > 1 ? 1 : e.value;
|
||||||
notifyLineWidthChanged(e);
|
notifyLineWidthChanged(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -155,23 +198,39 @@
|
||||||
parent.postMessage(JSON.stringify(switchPressureSensitiveWidthEvent), "*");
|
parent.postMessage(JSON.stringify(switchPressureSensitiveWidthEvent), "*");
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateColorFromTable(button) {
|
function selectButton(button) {
|
||||||
|
if (lastSelectedButton != null) {
|
||||||
|
lastSelectedButton.removeChild(document.getElementById("selectedOverlay"));
|
||||||
|
}
|
||||||
|
if (button) {
|
||||||
|
var selectedOverlay = document.createElement("div");
|
||||||
|
selectedOverlay.id = "selectedOverlay";
|
||||||
|
button.appendChild(selectedOverlay);
|
||||||
|
lastSelectedButton = button;
|
||||||
|
} else {
|
||||||
|
lastSelectedButton = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateColorFromTable(button, origin) {
|
||||||
var colorArray = window.getComputedStyle(button).backgroundColor.match(/\d+/g);
|
var colorArray = window.getComputedStyle(button).backgroundColor.match(/\d+/g);
|
||||||
$('#colorpicker').colpickSetColor({'r': colorArray[0], 'g': colorArray[1], 'b': colorArray[2]}, true);
|
$('#colorpicker').colpickSetColor({'r': colorArray[0], 'g': colorArray[1], 'b': colorArray[2]}, true);
|
||||||
|
currentSelectedColorOrigin = origin;
|
||||||
update(colorArray);
|
update(colorArray);
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateColorFromCustomPicker(rgbColor) {
|
function addColorFromCustomPicker(rgbColor) {
|
||||||
|
currentSelectedColorOrigin = "user";
|
||||||
var colorArray = [rgbColor.r, rgbColor.g, rgbColor.b];
|
var colorArray = [rgbColor.r, rgbColor.g, rgbColor.b];
|
||||||
addCustomColor(colorArray, true);
|
addCustomColor(colorArray, true);
|
||||||
update(colorArray);
|
update(colorArray);
|
||||||
}
|
}
|
||||||
|
|
||||||
function addCustomColor(colorArray, notify) {
|
function addCustomColor(colorArray, notify) {
|
||||||
var lastPickedColorsContainer = document.getElementById("last_picked_colors");
|
var lastPickedColorsContainer = document.getElementById("lastPickedColors");
|
||||||
var lastPickedColors = lastPickedColorsContainer.children;
|
var lastPickedColors = lastPickedColorsContainer.children;
|
||||||
for (var i = 0; i < lastPickedColors.length; i++) {
|
for (var i = 0; i < lastPickedColors.length; i++) {
|
||||||
var lasPickedCellColor = window.getComputedStyle(lastPickedColors[0]).backgroundColor.match(/\d+/g);
|
var lasPickedCellColor = window.getComputedStyle(lastPickedColors[i]).backgroundColor.match(/\d+/g);
|
||||||
var equalRgbComponentsCount = 0;
|
var equalRgbComponentsCount = 0;
|
||||||
for (var j = 0; j < 3; j++) {
|
for (var j = 0; j < 3; j++) {
|
||||||
if (lasPickedCellColor[j] == colorArray[j])
|
if (lasPickedCellColor[j] == colorArray[j])
|
||||||
|
@ -184,9 +243,10 @@
|
||||||
lastPickedColorsContainer.removeChild(lastPickedColors[lastPickedColors.length-1]);
|
lastPickedColorsContainer.removeChild(lastPickedColors[lastPickedColors.length-1]);
|
||||||
}
|
}
|
||||||
var colorCell = document.createElement("div");
|
var colorCell = document.createElement("div");
|
||||||
colorCell.style.backgroundColor = "rgb(" + colorArray[0] + "," + colorArray[1] + "," + colorArray[2];
|
colorCell.style.backgroundColor = "rgb(" + colorArray[0] + "," + colorArray[1] + "," + colorArray[2] + ")";
|
||||||
colorCell.className = "color_picker_cell";
|
colorCell.className = "colorPickerCell";
|
||||||
colorCell.onclick = function() { updateColorFromTable(this) };
|
colorCell.id = "user(" + colorArray[0] + "," + colorArray[1] + "," + colorArray[2] + ")";
|
||||||
|
colorCell.onclick = function() { updateColorFromTable(this, "user") };
|
||||||
lastPickedColorsContainer.insertBefore(colorCell, lastPickedColorsContainer.firstChild);
|
lastPickedColorsContainer.insertBefore(colorCell, lastPickedColorsContainer.firstChild);
|
||||||
if (notify) {
|
if (notify) {
|
||||||
var addCustomColorEvent = {
|
var addCustomColorEvent = {
|
||||||
|
@ -203,18 +263,19 @@
|
||||||
restoreLastColor(JSON.parse(decodeURIComponent(window.parent.location.search).substring(1)));
|
restoreLastColor(JSON.parse(decodeURIComponent(window.parent.location.search).substring(1)));
|
||||||
function restoreLastColor(palleteData) {
|
function restoreLastColor(palleteData) {
|
||||||
//var palleteData = JSON.parse(event.data);
|
//var palleteData = JSON.parse(event.data);
|
||||||
|
|
||||||
if ("currentColor" in palleteData) {
|
|
||||||
var newColor = palleteData.currentColor;
|
|
||||||
$('#colorpicker').colpickSetColor({'r': newColor.red, 'g': newColor.green, 'b': newColor.blue}, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
if ("customColors" in palleteData) {
|
if ("customColors" in palleteData) {
|
||||||
var customColors = palleteData.customColors;
|
var customColors = palleteData.customColors;
|
||||||
for (var i = 0; i < customColors.length; i++) {
|
for (var i = 0; i < customColors.length; i++) {
|
||||||
addCustomColor([customColors[i].red, customColors[i].green, customColors[i].blue], false);
|
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]);
|
||||||
|
}
|
||||||
|
|
||||||
if ("currentTriggerWidthEnabled" in palleteData) {
|
if ("currentTriggerWidthEnabled" in palleteData) {
|
||||||
document.getElementById("triggerSensitiveWidth").checked = palleteData.currentTriggerWidthEnabled;
|
document.getElementById("triggerSensitiveWidth").checked = palleteData.currentTriggerWidthEnabled;
|
||||||
|
@ -227,5 +288,13 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function setColorInTable(colorArray) {
|
||||||
|
var color = document.getElementById(currentSelectedColorOrigin + "(" + colorArray[0] + "," + colorArray[1] + "," + colorArray[2] + ")");
|
||||||
|
selectButton(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
$(window).load(function(){
|
||||||
|
var EventBridge = parent.EventBridge;
|
||||||
|
setUpKeyboardControl();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
|
@ -43,10 +43,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="settingsLoading" style="display: none; background-color: #F44336; color: white; padding: 8px">Loading previous settings</div>
|
<div id="settingsLoading" style="display: none; background-color: #F44336; color: white; padding: 8px">Loading previous settings</div>
|
||||||
<div id="content">
|
<div id="content">
|
||||||
<iframe frameborder="0" lastState="window.location.search" src="colorsTab.html" id="colorTab" seamless></iframe>
|
<iframe frameborder="0" lastState="window.location.search" onload="frameLoaded(this)" src="colorsTab.html" id="colorTab" seamless></iframe>
|
||||||
<iframe frameborder="0" lastState="window.location.search" src="brushesTab.html" id="brushesTab" seamless style="display: none"></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" src="eraserTab.html" id="eraserTab" seamless style="display: none"></iframe>
|
<iframe frameborder="0" lastState="window.location.search" onload="frameLoaded(this)" src="eraserTab.html" id="eraserTab" seamless style="display: none"></iframe>
|
||||||
<iframe frameborder="0" lastState="window.location.search" src="chooseHandTab.html" id="chooseHandTab" 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>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
@ -70,6 +70,16 @@
|
||||||
EventBridge.emitWebEvent(JSON.stringify(changeTabEvent));
|
EventBridge.emitWebEvent(JSON.stringify(changeTabEvent));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function frameLoaded(iframe) {
|
||||||
|
iframesLoaded++;
|
||||||
|
if (iframesLoaded == $("#content").children().length) {
|
||||||
|
var appReadyEvent = {
|
||||||
|
"type" : "appReady",
|
||||||
|
};
|
||||||
|
EventBridge.emitWebEvent(JSON.stringify(appReadyEvent));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
//Accept events from iframes
|
//Accept events from iframes
|
||||||
//https://stackoverflow.com/questions/8822907/html5-cross-browser-iframe-postmessage-child-to-parent
|
//https://stackoverflow.com/questions/8822907/html5-cross-browser-iframe-postmessage-child-to-parent
|
||||||
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
|
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
|
||||||
|
@ -82,6 +92,5 @@
|
||||||
eventer(messageEvent,function(e) {
|
eventer(messageEvent,function(e) {
|
||||||
EventBridge.emitWebEvent(e.data);
|
EventBridge.emitWebEvent(e.data);
|
||||||
}, false);
|
}, false);
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue