mirror of
https://github.com/Armored-Dragon/overte.git
synced 2025-03-11 16:13:16 +01:00
Add tablet application to replicate the existing overlay interface that
uses qml. Add last user picked colors using the custom color picker so that users can easily reuse that color.
This commit is contained in:
Artur Gomes
parent
3d8951a5e0
commit
9309f5137a
7 changed files with 484 additions and 20 deletions
|
|
@ -12,7 +12,20 @@
|
|||
var tablet,
|
||||
button,
|
||||
BUTTON_NAME = "PAINT",
|
||||
//undo vars
|
||||
UNDO_STACK_SIZE = 5,
|
||||
undoStack = [];
|
||||
isFingerPainting = false,
|
||||
//dynamic brush vars
|
||||
/*9isDynamicBrushEnabled = false,
|
||||
isDynamicBrushRunning = false,
|
||||
DYNAMIC_BRUSH_UPDATE_TIME = 100,
|
||||
lastFrameTime = Date.now(),
|
||||
frameDeltaSeconds = null, //time that passed between frames in milliseconds
|
||||
stopDynamicBrush = false,
|
||||
prevBrushWidth = 0,
|
||||
DYNAMIC_BRUSH_TIME = 50, //inteval in milliseconds to update the brush width
|
||||
DYNAMIC_BRUSH_INCREMENT = 0.01, //linear increment of brush size */
|
||||
leftHand = null,
|
||||
rightHand = null,
|
||||
leftBrush = null,
|
||||
|
|
@ -22,11 +35,11 @@
|
|||
isTabletDisplayed = false,
|
||||
HIFI_POINT_INDEX_MESSAGE_CHANNEL = "Hifi-Point-Index",
|
||||
HIFI_GRAB_DISABLE_MESSAGE_CHANNEL = "Hifi-Grab-Disable",
|
||||
HIFI_POINTER_DISABLE_MESSAGE_CHANNEL = "Hifi-Pointer-Disable";
|
||||
HIFI_POINTER_DISABLE_MESSAGE_CHANNEL = "Hifi-Pointer-Disable",
|
||||
SCRIPT_PATH = Script.resolvePath('')
|
||||
CONTENT_PATH = SCRIPT_PATH.substr(0, SCRIPT_PATH.lastIndexOf('/')),
|
||||
APP_URL = CONTENT_PATH + "/html/main.html";
|
||||
|
||||
|
||||
|
||||
|
||||
// Set up the qml ui
|
||||
var qml = Script.resolvePath('PaintWindow.qml');
|
||||
var window = null;
|
||||
|
|
@ -38,8 +51,7 @@
|
|||
var LEFT_ANIM_URL = Script.resourcesPath() + 'avatar/animations/touch_point_closed_left.fbx';
|
||||
var RIGHT_ANIM_URL_OPEN = Script.resourcesPath() + 'avatar/animations/touch_point_open_right.fbx';
|
||||
var LEFT_ANIM_URL_OPEN = Script.resourcesPath() + 'avatar/animations/touch_point_open_left.fbx';
|
||||
|
||||
|
||||
|
||||
function paintBrush(name) {
|
||||
// Paints in 3D.
|
||||
var brushName = name,
|
||||
|
|
@ -60,9 +72,7 @@
|
|||
MIN_STROKE_LENGTH = 0.005, // m
|
||||
MIN_STROKE_INTERVAL = 66, // ms
|
||||
MAX_POINTS_PER_LINE = 70; // Hard-coded limit in PolyLineEntityItem.h.
|
||||
|
||||
var undo = null;
|
||||
|
||||
|
||||
function strokeNormal() {
|
||||
return Vec3.multiplyQbyV(Camera.getOrientation(), Vec3.UNIT_NEG_Z);
|
||||
}
|
||||
|
|
@ -94,15 +104,21 @@
|
|||
}
|
||||
|
||||
function undoErasing() {
|
||||
var undo = undoStack.pop();
|
||||
if (undo) {
|
||||
Entities.addEntity(undo);
|
||||
undo = null;
|
||||
}
|
||||
}
|
||||
|
||||
function startLine(position, width) {
|
||||
// Start drawing a polyline.
|
||||
|
||||
/*if (isDynamicBrushEnabled) {
|
||||
print("start running the dynamic brush");
|
||||
prevBrushWidth = getStrokeWidth();
|
||||
changeStrokeWidthMultiplier(0.1);
|
||||
isDynamicBrushRunning = true;
|
||||
}*/
|
||||
|
||||
width = width * strokeWidthMultiplier;
|
||||
|
||||
if (isDrawingLine) {
|
||||
|
|
@ -134,6 +150,7 @@
|
|||
}
|
||||
|
||||
function drawLine(position, width) {
|
||||
print("current brush width" + getStrokeWidth());
|
||||
// Add a stroke to the polyline if stroke is a sufficient length.
|
||||
var localPosition,
|
||||
distanceToPrevious,
|
||||
|
|
@ -172,7 +189,8 @@
|
|||
|
||||
function finishLine(position, width) {
|
||||
// Finish drawing polyline; delete if it has only 1 point.
|
||||
|
||||
//stopDynamicBrush = true;
|
||||
print("already stopped drawing");
|
||||
width = width * strokeWidthMultiplier;
|
||||
|
||||
if (!isDrawingLine) {
|
||||
|
|
@ -230,7 +248,7 @@
|
|||
|
||||
// Delete found entity.
|
||||
if (found) {
|
||||
undo = Entities.getEntityProperties(foundID);
|
||||
addElementToUndoStack(Entities.getEntityProperties(foundID));
|
||||
Entities.deleteEntity(foundID);
|
||||
}
|
||||
}
|
||||
|
|
@ -288,10 +306,6 @@
|
|||
function onTriggerPress(value) {
|
||||
// Controller values are only updated when they change so store latest for use in update.
|
||||
rawTriggerValue = value;
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function updateTriggerPress(value) {
|
||||
|
|
@ -404,6 +418,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
/*function runDynamicBrush() {
|
||||
if (isDynamicBrushRunning) {
|
||||
var currentBrush = isLeftHandDominant ? leftBrush : rightBrush;
|
||||
|
||||
if (currentBrush.getStrokeWidth() < 2.1 && !stopDynamicBrush) {
|
||||
currentBrush.changeStrokeWidthMultiplier(currentBrush.getStrokeWidth() + ((frameDeltaSeconds * DYNAMIC_BRUSH_INCREMENT)/DYNAMIC_BRUSH_TIME));
|
||||
print("going up: " + currentBrush.getStrokeWidth());
|
||||
}
|
||||
if (stopDynamicBrush) {
|
||||
currentBrush.changeStrokeWidthMultiplier(currentBrush.getStrokeWidth() - ((frameDeltaSeconds * DYNAMIC_BRUSH_INCREMENT)/DYNAMIC_BRUSH_TIME));
|
||||
print("going down: " + currentBrush.getStrokeWidth());
|
||||
}
|
||||
if (currentBrush.getStrokeWidth() <= 0) {
|
||||
print("stopped: " + currentBrush.getStrokeWidth());
|
||||
stopDynamicBrush = false;
|
||||
isDynamicBrushRunning = false;
|
||||
print("putting back the brush width: " + prevBrushWidth);
|
||||
currentBrush.changeStrokeWidthMultiplier(prevBrushWidth);
|
||||
currentBrush.finishLine();
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
function onUpdate() {
|
||||
|
||||
//update ink Source
|
||||
|
|
@ -435,7 +472,9 @@
|
|||
// }
|
||||
// inkSource = Entities.addEntity(inkSourceProps);
|
||||
// }
|
||||
|
||||
/*frameDeltaSeconds = Date.now() - lastFrameTime;
|
||||
lastFrameTime = Date.now();
|
||||
runDynamicBrush(); */
|
||||
updateTriggerPress();
|
||||
updateGripPress();
|
||||
}
|
||||
|
|
@ -630,7 +669,9 @@
|
|||
return;
|
||||
}
|
||||
if (message[0] === "width"){
|
||||
print("changing brush width " + message[1]);
|
||||
var dim = message[1]*2 +0.1;
|
||||
print("changing brush dim " + dim);
|
||||
//var dim2 = Math.floor( Math.random()*40 + 5);
|
||||
leftBrush.changeStrokeWidthMultiplier(dim);
|
||||
rightBrush.changeStrokeWidthMultiplier(dim);
|
||||
|
|
@ -641,7 +682,8 @@
|
|||
return;
|
||||
}
|
||||
if (message[0] === "brush"){
|
||||
|
||||
print("changing brush to qml " + message[1]);
|
||||
|
||||
//var dim2 = Math.floor( Math.random()*40 + 5);
|
||||
leftBrush.changeTexture(message[1]);
|
||||
rightBrush.changeTexture(message[1]);
|
||||
|
|
@ -723,6 +765,7 @@
|
|||
}
|
||||
|
||||
if (isFingerPainting) {
|
||||
tablet.gotoWebScreen(APP_URL);
|
||||
enableProcessing();
|
||||
}
|
||||
|
||||
|
|
@ -740,12 +783,89 @@
|
|||
updateHandFunctions();
|
||||
}
|
||||
|
||||
|
||||
function onWebEventReceived(event){
|
||||
print("Received Web Event: " + event);
|
||||
|
||||
if (typeof event === "string") {
|
||||
event = JSON.parse(event);
|
||||
}
|
||||
switch (event.type) {
|
||||
case "changeColor":
|
||||
print("changing color...");
|
||||
leftBrush.changeStrokeColor(event.red, event.green, event.blue);
|
||||
rightBrush.changeStrokeColor(event.red, event.green, event.blue);
|
||||
Overlays.editOverlay(inkSourceOverlay, {
|
||||
color: {red: event.red, green: event.green, blue: event.blue}
|
||||
});
|
||||
break;
|
||||
|
||||
case "changeBrush":
|
||||
if (event.brushName === "content/brushes/paintbrush1.png") {
|
||||
leftBrush.changeUVMode(false);
|
||||
rightBrush.changeUVMode(false);
|
||||
} else if (event.brushName === "content/brushes/paintbrush3.png") {
|
||||
leftBrush.changeUVMode(false);
|
||||
rightBrush.changeUVMode(false);
|
||||
} else {
|
||||
leftBrush.changeUVMode(true);
|
||||
rightBrush.changeUVMode(true);
|
||||
}
|
||||
print("changing brush to " + event.brushName);
|
||||
event.brushName = CONTENT_PATH + "/" + event.brushName;
|
||||
leftBrush.changeTexture(event.brushName);
|
||||
rightBrush.changeTexture(event.brushName);
|
||||
break;
|
||||
|
||||
case "changeLineWidth":
|
||||
var dim = event.brushWidth*2 +0.1;
|
||||
print("changing brush width dim to " + dim);
|
||||
//var dim2 = Math.floor( Math.random()*40 + 5);
|
||||
leftBrush.changeStrokeWidthMultiplier(dim);
|
||||
rightBrush.changeStrokeWidthMultiplier(dim);
|
||||
Overlays.editOverlay(inkSourceOverlay, {
|
||||
size: dim * 0.06
|
||||
});
|
||||
break;
|
||||
|
||||
case "undo":
|
||||
print("Going to undo");
|
||||
/**
|
||||
The undo is called only on the right brush because the undo stack is global, meaning that
|
||||
calling undoErasing on both the left and right brush would cause the stack to pop twice.
|
||||
Using the leftBrush instead of the rightBrush would have the exact same effect.
|
||||
*/
|
||||
rightBrush.undoErasing();
|
||||
break;
|
||||
|
||||
case "changeBrushHand":
|
||||
isLeftHandDominant = event.DrawingHand == "left";
|
||||
updateHandAnimations();
|
||||
break;
|
||||
|
||||
/*case "switchDynamicBrush":
|
||||
isDynamicBrushEnabled = event.isDynamicBrushEnabled;
|
||||
break;*/
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function addElementToUndoStack(item)
|
||||
{
|
||||
if (undoStack.length + 1 > UNDO_STACK_SIZE) {
|
||||
undoStack.splice(0, 1);
|
||||
}
|
||||
undoStack.push(item);
|
||||
}
|
||||
|
||||
function setUp() {
|
||||
tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
|
||||
if (!tablet) {
|
||||
return;
|
||||
}
|
||||
|
||||
tablet.webEventReceived.connect(onWebEventReceived);
|
||||
// Tablet button.
|
||||
button = tablet.addButton({
|
||||
icon: "icons/tablet-icons/finger-paint-i.svg",
|
||||
|
|
|
|||
51
scripts/system/fingerPaint/html/brushesTab.html
Normal file
51
scripts/system/fingerPaint/html/brushesTab.html
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<!--Note: change the parent postmessage second parameter due to possible security issues-->
|
||||
<style>
|
||||
.brushButton {
|
||||
max-width: 220px,
|
||||
padding: 10px,
|
||||
background-color: #666666
|
||||
}
|
||||
.BrushIcon {
|
||||
padding: 10px,
|
||||
width: 130px,
|
||||
}
|
||||
#dynamicBrush {
|
||||
margin: 20px 0;
|
||||
}
|
||||
.selectedBrush {
|
||||
background-color: #f4e842
|
||||
}
|
||||
</style>
|
||||
<!--<input onchange="setDynamicBrush(this)" type="checkbox" id="dynamicBrush"> Use Dynamic brush </input>-->
|
||||
<div id="brushesCointainer">
|
||||
<button class="brushButton" id="content/brushes/paintbrush1.png" onclick="changePaintBrush(0)"><img width="130px" src="../content/brushes/paintbrush1.png" class="BrushIcon" ></button>
|
||||
<button class="brushButton" id="content/brushes/paintbrush2.png" onclick="changePaintBrush(1)"><img width="130px" src="../content/brushes/paintbrush2.png" class="BrushIcon" ></button>
|
||||
<button class="brushButton" id="content/brushes/paintbrush3.png" onclick="changePaintBrush(2)"><img width="130px" src="../content/brushes/paintbrush3.png" class="BrushIcon" ></button>
|
||||
<button class="brushButton" id="content/brushes/paintbrush4.png" onclick="changePaintBrush(3)"><img width="130px" src="../content/brushes/paintbrush4.png" class="BrushIcon" ></button>
|
||||
<button class="brushButton" id="content/brushes/paintbrush5.png" onclick="changePaintBrush(4)"><img width="130px" src="../content/brushes/paintbrush5.png" class="BrushIcon" ></button>
|
||||
<button class="brushButton" id="content/brushes/paintbrush6.png" onclick="changePaintBrush(5)"><img width="130px" src="../content/brushes/paintbrush6.png" class="BrushIcon" ></button>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var currentBrush = 5;
|
||||
function changePaintBrush(brushIndex) {
|
||||
var bruhes = document.getElementById("brushesCointainer").children;
|
||||
bruhes[currentBrush].classList.remove("selectedBrush");
|
||||
currentBrush = brushIndex;
|
||||
bruhes[currentBrush].classList.add("selectedBrush");
|
||||
var changedBrushEvent = {
|
||||
"type" : "changeBrush",
|
||||
"brushName": bruhes[currentBrush].id
|
||||
};
|
||||
parent.postMessage(JSON.stringify(changedBrushEvent), "*");
|
||||
}
|
||||
|
||||
/*function setDynamicBrush(checkbox) {
|
||||
var switchBrushEvent = {
|
||||
"type" : "switchDynamicBrush",
|
||||
"isDynamicBrushEnabled": checkbox.checked
|
||||
};
|
||||
parent.postMessage(JSON.stringify(switchBrushEvent), "*");
|
||||
}*/
|
||||
</script>
|
||||
35
scripts/system/fingerPaint/html/chooseHandTab.html
Normal file
35
scripts/system/fingerPaint/html/chooseHandTab.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!--Note: change the parent postmessage second parameter due to possible security issues-->
|
||||
<style type="text/css">
|
||||
.changeHandButton {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.brushButton {
|
||||
max-width: 220px,
|
||||
padding: 10px,
|
||||
background-color: #666666
|
||||
}
|
||||
.selectedHand {
|
||||
background-color: #f4e842
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="handButtonsContainer" >
|
||||
<button class="changeHandButton" id="left" onclick="chooseHand(0)">Left</button>
|
||||
<button class="changeHandButton selectedHand" id="right" onclick="chooseHand(1)">Right</button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var currentHand = 1;
|
||||
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
|
||||
};
|
||||
parent.postMessage(JSON.stringify(chooseHandEvent), "*");
|
||||
}
|
||||
</script>
|
||||
116
scripts/system/fingerPaint/html/colorsTab.html
Normal file
116
scripts/system/fingerPaint/html/colorsTab.html
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<!--Note: change the parent postmessage second parameter due to possible security issues-->
|
||||
<link rel="stylesheet" type="text/css" href="../../html/css/colpick.css">
|
||||
<script src="../../html/js/jquery-2.1.4.min.js"></script>
|
||||
<style>
|
||||
#color_picker {
|
||||
display: grid;
|
||||
}
|
||||
.color_picker_cell {
|
||||
border: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
#color_picker_table {
|
||||
border-collapse:collapse
|
||||
}
|
||||
#custom_color_picker {
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="colorpicker"></div>
|
||||
<table id="color_picker_table">
|
||||
</table>
|
||||
<div id="last_picked_colors"></div>
|
||||
<div id="property-color" class="color-picker"></div>
|
||||
|
||||
|
||||
<script src="../../html/js/colpick.js">
|
||||
require('jquery-colpick');
|
||||
</script>
|
||||
<script>
|
||||
$('#colorpicker').colpick({
|
||||
flat:true,
|
||||
layout:'hex',
|
||||
colorScheme:'dark',
|
||||
onSubmit: function(hsb, hex, rgb, el) {
|
||||
updateColorFromCustomPicker(rgb)
|
||||
}
|
||||
});
|
||||
|
||||
var COLUMNS = 18, ROWS = 10;
|
||||
|
||||
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("color_picker_table");
|
||||
for (var j = 0; j < ROWS; j++) {
|
||||
var row = document.createElement("tr");
|
||||
for (var i = 0; i < startingColors.length; i++) {
|
||||
var colorCell = document.createElement("input");
|
||||
colorCell.type = "button";
|
||||
colorCell.style.backgroundColor = "hsl(" + startingColors[i].hue + ",100%," + ((80-(80*j/(ROWS-1))) + 10) + "%)";
|
||||
colorCell.className = "color_picker_cell";
|
||||
colorCell.onclick = function() {
|
||||
updateColorFromTable(this)
|
||||
};
|
||||
row.appendChild(colorCell);
|
||||
}
|
||||
colorPickerLayout.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
addColors();
|
||||
|
||||
function update(colorArray) {
|
||||
// 'jscolor' instance can be used as a string
|
||||
var changedColorEvent = {
|
||||
"type" : "changeColor",
|
||||
"red" : colorArray[0],
|
||||
"green": colorArray[1],
|
||||
"blue" : colorArray[2]
|
||||
};
|
||||
parent.postMessage(JSON.stringify(changedColorEvent), "*");
|
||||
}
|
||||
|
||||
function updateColorFromTable(button) {
|
||||
var colorArray = window.getComputedStyle(button).backgroundColor.match(/\d+/g);
|
||||
$('#colorpicker').colpickSetColor({'r': colorArray[0], 'g': colorArray[1], 'b': colorArray[2]}, true);
|
||||
update(colorArray);
|
||||
}
|
||||
|
||||
function updateColorFromCustomPicker(rgbColor) {
|
||||
var colorArray = [rgbColor.r, rgbColor.g, rgbColor.b];
|
||||
addCustomColor(colorArray);
|
||||
update(colorArray);
|
||||
}
|
||||
|
||||
function addCustomColor(colorArray) {
|
||||
var lastPickedColorsContainer = document.getElementById("last_picked_colors");
|
||||
var lastPickedColors = lastPickedColorsContainer.children;
|
||||
for (var i = 0; i < lastPickedColors.length; i++) {
|
||||
var lasPickedCellColor = window.getComputedStyle(lastPickedColors[0]).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 >= COLUMNS) {
|
||||
lastPickedColorsContainer.removeChild(lastPickedColors[lastPickedColors.length-1]);
|
||||
}
|
||||
var colorCell = document.createElement("input");
|
||||
colorCell.type = "button";
|
||||
colorCell.style.backgroundColor = "rgb(" + colorArray[0] + "," + colorArray[1] + "," + colorArray[2];
|
||||
colorCell.className = "color_picker_cell";
|
||||
colorCell.onclick = function() { updateColorFromTable(this) };
|
||||
lastPickedColorsContainer.insertBefore(colorCell, lastPickedColorsContainer.firstChild);
|
||||
}
|
||||
</script>
|
||||
17
scripts/system/fingerPaint/html/eraserTab.html
Normal file
17
scripts/system/fingerPaint/html/eraserTab.html
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<!--Note: change the parent postmessage second parameter due to possible security issues-->
|
||||
<style type="text/css">
|
||||
#undoButton {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<button id="undoButton" onclick="undo()">Undo</button>
|
||||
<script type="text/javascript">
|
||||
function undo() {
|
||||
var undoEvent = {
|
||||
"type" : "undo"
|
||||
};
|
||||
parent.postMessage(JSON.stringify(undoEvent), "*");
|
||||
}
|
||||
</script>
|
||||
50
scripts/system/fingerPaint/html/lineWidthTab.html
Normal file
50
scripts/system/fingerPaint/html/lineWidthTab.html
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<!--Note: change the parent postmessage second parameter due to possible security issues-->
|
||||
<style type="text/css">
|
||||
/*range style: http://danielstern.ca/range.css/#/*/
|
||||
input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
width: 400px;
|
||||
}
|
||||
input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
background: #666;
|
||||
border: 0.1px solid #010101;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
border: 1px solid #000000;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
#lineWidthText {
|
||||
padding-left: 12px;
|
||||
padding-top: 6px;
|
||||
position: absolute;
|
||||
}
|
||||
#lineWidthContainer {
|
||||
margin: 12px;
|
||||
margin-top: 48px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="lineWidthContainer">
|
||||
<input type="range" id="myRange" value=0.25 min=0 max=1 step=0.01 onchange="changeLineWidth(this)">
|
||||
<span id="lineWidthText">0.25</span>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function changeLineWidth(e) {
|
||||
document.getElementById("lineWidthText").innerText = e.value;
|
||||
var changeLineWidthEvent = {
|
||||
"type" : "changeLineWidth",
|
||||
"brushWidth": e.value
|
||||
};
|
||||
parent.postMessage(JSON.stringify(changeLineWidthEvent), "*");
|
||||
}
|
||||
</script>
|
||||
75
scripts/system/fingerPaint/html/main.html
Normal file
75
scripts/system/fingerPaint/html/main.html
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../../html/js/jquery-2.1.4.min.js"></script>
|
||||
<style>
|
||||
iframe {
|
||||
height:100%;
|
||||
width:100%;
|
||||
position: absolute;
|
||||
}
|
||||
.tabButton {
|
||||
background-color: #aaaaaa;
|
||||
color: white;
|
||||
font-size: 100%;
|
||||
padding: 12px;
|
||||
margin: 0px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
}
|
||||
.tabIcon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
.selected {
|
||||
background-color: #4286f4
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="margin:0px;padding:0px;overflow:hidden">
|
||||
<div id="tabs">
|
||||
<span class="tabButton" onclick="selectTab(0)"><img class="tabIcon" src="../content/tabicons/colorpaletteBtn.png"/>Color</span>
|
||||
<span class="tabButton" onclick="selectTab(1)"><img class="tabIcon" src="../content/tabicons/brushesBtn.png"/>Brushes</span>
|
||||
<span class="tabButton" onclick="selectTab(2)"><img class="tabIcon" src="../content/tabicons/eraser.png"/>Eraser</span>
|
||||
<span class="tabButton" onclick="selectTab(3)"><img class="tabIcon" src="../content/tabicons/linewidthBtn.png"/>Line Width</span>
|
||||
<span class="tabButton" onclick="selectTab(4)"><img class="tabIcon" src="../content/tabicons/pointingfinger128px.png"/>Hand</span>
|
||||
</div>
|
||||
<div id="content">
|
||||
<iframe frameborder="0" src="colorsTab.html" seamless></iframe>
|
||||
<iframe frameborder="0" src="brushesTab.html" seamless style="display: none"></iframe>
|
||||
<iframe frameborder="0" src="eraserTab.html" seamless style="display: none"></iframe>
|
||||
<iframe frameborder="0" src="lineWidthTab.html" seamless style="display: none"></iframe>
|
||||
<iframe frameborder="0" src="chooseHandTab.html" seamless style="display: none"></iframe>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script type="text/javascript">
|
||||
var currentTab = 0;
|
||||
selectTab(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;
|
||||
}
|
||||
|
||||
//Accept events from iframes
|
||||
//https://stackoverflow.com/questions/8822907/html5-cross-browser-iframe-postmessage-child-to-parent
|
||||
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
|
||||
var eventer = window[eventMethod];
|
||||
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
|
||||
|
||||
// Listen to message from child window
|
||||
eventer(messageEvent,function(e) {
|
||||
EventBridge.emitWebEvent(e.data);
|
||||
}, false);
|
||||
|
||||
</script>
|
||||
|
||||
Loading…
Reference in a new issue