content/hifi-content/caitlyn/dev/scratch/webApp/emitterUI/app.html
2022-02-13 22:19:19 +01:00

95 lines
No EOL
3.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="https://s3.amazonaws.com/codiqa-cdn/codiqa.ext.css" rel="stylesheet">
<link href="https://s3.amazonaws.com/codiqa-cdn/mobile/1.4.2/jquery.mobile-1.4.2.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/codiqa-cdn/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="https://s3.amazonaws.com/codiqa-cdn/codiqa.ext.js"></script>
<script src="script.js"></script>
<script src="./webBridgeTest_files/jquery-1.11.1.min.js.download"></script>
<script src="./webBridgeTest_files/jquery.mobile-1.4.5.min.js.download"></script>
<script>
$(document).ready(function () {
// hook up a handler for events that come from hifi.
EventBridge.scriptEventReceived.connect(function (msg) { // GET MESSAGES FROM HIFI
console.log("WEB: recv script event = " + JSON.stringify(msg));
if (msg === "button-1-done") {
// re-enable the button now that the audio is complete
$("#button-1").removeClass("ui-disabled");
} else if (msg === "button-2-done") {
// re-enable the button now that the audio is complete
$("#button-2").removeClass("ui-disabled");
}
});
// hook up a click handler for button-1
$("#button-1").click(function () { // SEND MESSAGES TO HIGH FIDELITY
// OK so it looks like this function is maybe evaluated? I still don't understand where eventbridge is gcreated or the emitWebEvent thing lives.
console.log("WEB: emit web event = " + JSON.stringify("button-1-play"));
// disable the button until we receive a done message.
$("#button-1").addClass("ui-disabled");
// send a play event to hifi
EventBridge.emitWebEvent("button-1-play"); // WHENCE DO EMIT WEB EVENT COME?
});
// hook up a click handler for button-2
$("#button-2").click(function () {
console.log("WEB: emit web event = " + JSON.stringify("button-2-play"));
// disable the button until we receive a done message.
$("#button-2").addClass("ui-disabled");
// send a play event to hifi
EventBridge.emitWebEvent("button-2-play");
});
});
</script>
</head>
<body>
<div data-role="page" data-control-title="Audio Emitter Control Panel"
id="page1">
<div role="main" class="ui-content" style="padding: 10px">
<div class="ui-field-contain" data-controltype="textarea">
<label for="text-URL">
Audio URL
</label>
<textarea name="" id="text-URL" placeholder="" data-mini="true"></textarea>
</div>
<div class="ui-field-contain" data-controltype="slider">
<label for="slider-vol">
Volume 0 - 100
</label>
<input id="slider-vol" type="range" name="slider" value="50" min="0" max="100"
data-highlight="false">
</div>
<div class="ui-field-contain" data-controltype="slider">
<label for="slider-range">
Range 0 - 100
</label>
<input id="slider-range" type="range" name="slider" value="50" min="0"
max="100" data-highlight="false">
</div>
</div>
</div>
</body>
</html>