mirror of
https://github.com/lubosz/overte.git
synced 2025-04-24 14:03:17 +02:00
use the new tablet event bridge
This commit is contained in:
Faye Li
parent
f3fdb7c315
commit
2c77580ee9
2 changed files with 55 additions and 135 deletions
|
|
@ -10,7 +10,6 @@
|
|||
padding: 0;
|
||||
width: 100%;
|
||||
color: white;
|
||||
background: linear-gradient(#2b2b2b, #0f212e);
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
|
|
@ -32,22 +31,44 @@
|
|||
margin-top: 90px;
|
||||
padding: 30px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div>Photobooth</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div id="properties-list">
|
||||
<div class="property url refresh">
|
||||
<label>Model URL</label>
|
||||
<input type="text" id="model-url"></input>
|
||||
<input type="button" id="reload-model-button" class="glyph" value="F">
|
||||
</div>
|
||||
<div class="property dropdown">
|
||||
<label>Camera</label>
|
||||
<select id="property-camera">
|
||||
<option>First Person Camera</option>
|
||||
<option>Main Camera</option>
|
||||
<option>Left Camera</option>
|
||||
<option>Right Camera</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="property">
|
||||
<input id="picture-button" type="button" class="blue" value="Take Picture">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
<script>
|
||||
var EventBridge;
|
||||
var openEventBridge = function (callback) {
|
||||
var WebChannel = new QWebChannel(qt.webChannelTransport, function (channel) {
|
||||
EventBridge = WebChannel.objects.eventBridgeWrapper.eventBridge;
|
||||
callback();
|
||||
});
|
||||
};
|
||||
|
||||
var emit = function (eventType, data) {
|
||||
data = data || {};
|
||||
data.type = eventType;
|
||||
EventBridge.emitWebEvent(JSON.stringify(data));
|
||||
// Helper function to emit web events to photoboothApp.js
|
||||
function emit(eventType, eventData) {
|
||||
var eventObject = {
|
||||
"app": "photobooth",
|
||||
"type": eventType,
|
||||
"data": eventData
|
||||
};
|
||||
EventBridge.emitWebEvent(JSON.stringify(eventObject));
|
||||
};
|
||||
|
||||
function loaded () {
|
||||
|
|
@ -75,118 +96,11 @@
|
|||
|
||||
|
||||
});
|
||||
|
||||
// Drop downs
|
||||
function setDropdownText(dropdown) {
|
||||
var lis = dropdown.parentNode.getElementsByTagName("li");
|
||||
var text = "";
|
||||
for (var i = 0; i < lis.length; i++) {
|
||||
if (lis[i].getAttribute("value") === dropdown.value) {
|
||||
text = lis[i].textContent;
|
||||
}
|
||||
}
|
||||
dropdown.firstChild.textContent = text;
|
||||
}
|
||||
function toggleDropdown(event) {
|
||||
var element = event.target;
|
||||
if (element.nodeName !== "DT") {
|
||||
element = element.parentNode;
|
||||
}
|
||||
element = element.parentNode;
|
||||
var isDropped = element.getAttribute("dropped");
|
||||
element.setAttribute("dropped", isDropped !== "true" ? "true" : "false");
|
||||
}
|
||||
function setDropdownValue(event) {
|
||||
var dt = event.target.parentNode.parentNode.previousSibling;
|
||||
dt.value = event.target.getAttribute("value");
|
||||
dt.firstChild.textContent = event.target.textContent;
|
||||
|
||||
dt.parentNode.setAttribute("dropped", "false");
|
||||
|
||||
var evt = document.createEvent("HTMLEvents");
|
||||
evt.initEvent("change", true, true);
|
||||
dt.dispatchEvent(evt);
|
||||
}
|
||||
|
||||
var elDropdowns = document.getElementsByTagName("select");
|
||||
for (var i = 0; i < elDropdowns.length; i++) {
|
||||
var options = elDropdowns[i].getElementsByTagName("option");
|
||||
var selectedOption = 0;
|
||||
for (var j = 0; j < options.length; j++) {
|
||||
if (options[j].getAttribute("selected") === "selected") {
|
||||
selectedOption = j;
|
||||
}
|
||||
}
|
||||
var div = elDropdowns[i].parentNode;
|
||||
|
||||
var dl = document.createElement("dl");
|
||||
div.appendChild(dl);
|
||||
|
||||
var dt = document.createElement("dt");
|
||||
dt.name = elDropdowns[i].name;
|
||||
dt.id = elDropdowns[i].id;
|
||||
dt.addEventListener("click", toggleDropdown, true);
|
||||
dl.appendChild(dt);
|
||||
|
||||
var span = document.createElement("span");
|
||||
span.setAttribute("value", options[selectedOption].value);
|
||||
span.textContent = options[selectedOption].firstChild.textContent;
|
||||
dt.appendChild(span);
|
||||
|
||||
var span = document.createElement("span");
|
||||
span.textContent = "5"; // caratDn
|
||||
dt.appendChild(span);
|
||||
|
||||
var dd = document.createElement("dd");
|
||||
dl.appendChild(dd);
|
||||
|
||||
var ul = document.createElement("ul");
|
||||
dd.appendChild(ul);
|
||||
|
||||
for (var j = 0; j < options.length; j++) {
|
||||
var li = document.createElement("li");
|
||||
li.setAttribute("value", options[j].value);
|
||||
li.textContent = options[j].firstChild.textContent;
|
||||
li.addEventListener("click", setDropdownValue);
|
||||
ul.appendChild(li);
|
||||
}
|
||||
}
|
||||
elDropdowns = document.getElementsByTagName("select");
|
||||
while (elDropdowns.length > 0) {
|
||||
var el = elDropdowns[0];
|
||||
el.parentNode.removeChild(el);
|
||||
elDropdowns = document.getElementsByTagName("select");
|
||||
}
|
||||
}
|
||||
$(document).ready(function() {
|
||||
// Send a ready event to hifi
|
||||
emit("ready", null);
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div>Photobooth</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div id="properties-list">
|
||||
<div class="property url refresh">
|
||||
<label>Model URL</label>
|
||||
<input type="text" id="model-url"></input>
|
||||
<input type="button" id="reload-model-button" class="glyph" value="F">
|
||||
</div>
|
||||
<div class="property dropdown">
|
||||
<label>Camera</label>
|
||||
<select id="property-camera">
|
||||
<option>First Person Camera</option>
|
||||
<option>Main Camera</option>
|
||||
<option>Left Camera</option>
|
||||
<option>Right Camera</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="property">
|
||||
<input id="picture-button" type="button" class="blue" value="Take Picture">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -19,11 +19,24 @@
|
|||
icon: "icons/tablet-icons/snap-i.svg",
|
||||
text: "PHOTOBOOTH"
|
||||
});
|
||||
|
||||
function onClicked() {
|
||||
tablet.gotoWebScreen(PHOTOBOOTH_WINDOW_HTML_URL);
|
||||
PhotoBooth.init();
|
||||
}
|
||||
button.clicked.connect(onClicked);
|
||||
tablet.webEventReceived.connect(onWebEventReceived);
|
||||
|
||||
function onWebEventReceived(event) {
|
||||
print("photobooth.js received a web event:" + event);
|
||||
// Converts the event to a JavasScript Object
|
||||
if (typeof event === "string") {
|
||||
event = JSON.parse(event);
|
||||
}
|
||||
if (event.app === "photobooth") {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
var PhotoBooth = {};
|
||||
PhotoBooth.init = function () {
|
||||
|
|
@ -170,20 +183,13 @@
|
|||
print("clicked reload model button " + event.value);
|
||||
PhotoBooth.changeModel(event.value);
|
||||
};
|
||||
|
||||
photoboothWindow.webEventReceived.connect(function (data) {
|
||||
var event = JSON.parse(data);
|
||||
if (photoboothWindowListener[event.type]) {
|
||||
photoboothWindowListener[event.type](event);
|
||||
}
|
||||
});
|
||||
};
|
||||
main();
|
||||
|
||||
function cleanup() {
|
||||
tablet.removeButton(button);
|
||||
Camera.mode = "first person";
|
||||
PhotoBooth.destroy();
|
||||
tablet.removeButton(button);
|
||||
}
|
||||
Script.scriptEnding.connect(cleanup);
|
||||
}());
|
||||
Loading…
Reference in a new issue