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:
Artur Gomes 2017-07-26 09:20:04 +01:00
parent 5c40a6810e
commit c94774ec18
3 changed files with 147 additions and 64 deletions

View file

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

View file

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

View file

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