demo/moray3d/resources/moray3d.html

See examples/demo/moray3d

<html>
<head>
<title>Zentri ZAP WebSocket Accelerometer</title>
<style>
body {
font-family: Monospace;
background: #222;
margin: 0px;
overflow: hidden;
color:#f00;
}
div{
position: absolute;
font-family: Arial;
color:#888;
font-size: calc(100vh/10);
}
form{
margin-bottom: 0;
}
.led {
top: 5vh;
left: 5%;
margin: 0 auto;
width: 33vw;
z-index: 999;
}
.led::before {
content: '>';
color: #888;
display: block;
position: absolute;
font-size: 14px;
font-size: 18pt;
}
.led input {
padding-left: 24px;
font-size: 18pt;
width: 100%;
background-color: rgba(0,0,0,0);
border: none;
color: #888;
outline:none;
}
.temp{
bottom: 5%;
left: 10%;
}
.humi{
bottom: 5%;
right: 6%;
}
.humi::before{
display: inline-block;
position: absolute;
left: calc(-1 *100vh/16);
background-size: contain;
content: '';
width: calc(100vh/18);
height: calc(100vh/18);
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%0A%20%20%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%0A%20%20%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%0A%20%20%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%0A%20%20%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%0A%20%20%20xmlns%3Asodipodi%3D%22http%3A//sodipodi.sourceforge.net/DTD/sodipodi-0.dtd%22%0A%20%20%20xmlns%3Ainkscape%3D%22http%3A//www.inkscape.org/namespaces/inkscape%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20id%3D%22Layer_1%22%0A%20%20%20x%3D%220px%22%0A%20%20%20y%3D%220px%22%0A%20%20%20width%3D%22100px%22%0A%20%20%20height%3D%22100px%22%0A%20%20%20viewBox%3D%225.0%20-10.0%20100.0%20135.0%22%0A%20%20%20enable-background%3D%22new%200%200%20100%20100%22%0A%20%20%20xml%3Aspace%3D%22preserve%22%0A%20%20%20inkscape%3Aversion%3D%220.48.5%20r10040%22%0A%20%20%20sodipodi%3Adocname%3D%22noun_121293_cc.svg%22%3E%3Cmetadata%0A%20%20%20%20%20id%3D%22metadata13%22%3E%3Crdf%3ARDF%3E%3Ccc%3AWork%0A%20%20%20%20%20%20%20%20%20rdf%3Aabout%3D%22%22%3E%3Cdc%3Aformat%3Eimage/svg+xml%3C/dc%3Aformat%3E%3Cdc%3Atype%0A%20%20%20%20%20%20%20%20%20%20%20rdf%3Aresource%3D%22http%3A//purl.org/dc/dcmitype/StillImage%22%20/%3E%3C/cc%3AWork%3E%3C/rdf%3ARDF%3E%3C/metadata%3E%3Cdefs%0A%20%20%20%20%20id%3D%22defs11%22%20/%3E%3Csodipodi%3Anamedview%0A%20%20%20%20%20pagecolor%3D%22%23ffffff%22%0A%20%20%20%20%20bordercolor%3D%22%23666666%22%0A%20%20%20%20%20borderopacity%3D%221%22%0A%20%20%20%20%20objecttolerance%3D%2210%22%0A%20%20%20%20%20gridtolerance%3D%2210%22%0A%20%20%20%20%20guidetolerance%3D%2210%22%0A%20%20%20%20%20inkscape%3Apageopacity%3D%220%22%0A%20%20%20%20%20inkscape%3Apageshadow%3D%222%22%0A%20%20%20%20%20inkscape%3Awindow-width%3D%221020%22%0A%20%20%20%20%20inkscape%3Awindow-height%3D%22853%22%0A%20%20%20%20%20id%3D%22namedview9%22%0A%20%20%20%20%20showgrid%3D%22false%22%0A%20%20%20%20%20inkscape%3Azoom%3D%222.36%22%0A%20%20%20%20%20inkscape%3Acx%3D%2254.237288%22%0A%20%20%20%20%20inkscape%3Acy%3D%2250%22%0A%20%20%20%20%20inkscape%3Awindow-x%3D%222582%22%0A%20%20%20%20%20inkscape%3Awindow-y%3D%2290%22%0A%20%20%20%20%20inkscape%3Awindow-maximized%3D%220%22%0A%20%20%20%20%20inkscape%3Acurrent-layer%3D%22Layer_1%22%20/%3E%3Cpath%0A%20%20%20%20%20d%3D%22m%2010.783431%2C55.598901%20c%20-7.0718398%2C-4.8816%20-10.96415981%2C-11.26656%20-10.96415981%2C-17.98416%200%2C-6.7176%203.89232001%2C-13.10256%2010.96415981%2C-17.98416%201.96128%2C-1.35216%202.45376%2C-4.04784%201.1016%2C-6.00912%20-1.3608%2C-1.96992%20-4.0521598%2C-2.4624%20-6.0134398%2C-1.1016%20-9.47376%2C6.54048%20-14.69232%2C15.45264%20-14.69232%2C25.09488%200%2C9.64224%205.21856%2C18.55008%2014.69232%2C25.09488%207.0718398%2C4.8816%2010.9641598%2C11.26656%2010.9641598%2C17.98416%200%2C6.7176%20-3.89232%2C13.10256%20-10.9641598%2C17.98416%20-1.96128%2C1.352159%20-2.45376%2C4.047839%20-1.1016%2C6.009119%200.83808%2C1.21392%202.19024%2C1.86624%203.55968%2C1.86624%200.84672%2C0%201.7020798%2C-0.24624%202.4494398%2C-0.76464%209.47376%2C-6.540479%2014.69232%2C-15.452639%2014.69232%2C-25.094879%200%2C-9.64224%20-5.20992%2C-18.5544%20-14.688%2C-25.09488%20z%20m%2092.499839%2C0%20c%20-7.071839%2C-4.8816%20-10.964159%2C-11.26656%20-10.964159%2C-17.98416%200%2C-6.7176%203.89232%2C-13.10256%2010.964159%2C-17.98416%201.96128%2C-1.35216%202.45376%2C-4.04784%201.1016%2C-6.00912%20-1.35648%2C-1.96992%20-4.05216%2C-2.4624%20-6.013439%2C-1.1016%20-9.47376%2C6.54048%20-14.69232%2C15.45264%20-14.69232%2C25.09488%200%2C9.64224%205.21856%2C18.55008%2014.69232%2C25.09488%207.071839%2C4.8816%2010.964159%2C11.26656%2010.964159%2C17.98416%200%2C6.7176%20-3.89232%2C13.10256%20-10.964159%2C17.98416%20-1.96128%2C1.352159%20-2.45376%2C4.047839%20-1.1016%2C6.009119%200.83808%2C1.21392%202.19024%2C1.86624%203.559679%2C1.86624%200.84672%2C0%201.70208%2C-0.24624%202.44944%2C-0.76464%209.47376%2C-6.540479%2014.69232%2C-15.452639%2014.69232%2C-25.094879%200%2C-9.64224%20-5.20992%2C-18.5544%20-14.688%2C-25.09488%20z%20m%20-46.249919%2C0%20c%20-7.07184%2C-4.8816%20-10.96416%2C-11.26656%20-10.96416%2C-17.98416%200%2C-6.7176%203.89232%2C-13.10256%2010.96416%2C-17.98416%201.96128%2C-1.35216%202.45376%2C-4.04784%201.1016%2C-6.00912%20-1.35216%2C-1.96128%20-4.04784%2C-2.46672%20-6.01344%2C-1.1016%20-9.47376%2C6.54048%20-14.69232%2C15.45264%20-14.69232%2C25.09488%200%2C9.64224%205.21856%2C18.55008%2014.69232%2C25.09488%207.07184%2C4.8816%2010.96416%2C11.26656%2010.96416%2C17.98416%200%2C6.7176%20-3.89232%2C13.10256%20-10.96416%2C17.98416%20-1.96128%2C1.352159%20-2.45376%2C4.047839%20-1.1016%2C6.009119%200.83808%2C1.21392%202.19024%2C1.86624%203.55968%2C1.86624%200.8424%2C0%201.70208%2C-0.24624%202.44944%2C-0.76464%209.47376%2C-6.540479%2014.69232%2C-15.452639%2014.69232%2C-25.094879%200%2C-9.64224%20-5.20992%2C-18.5544%20-14.688%2C-25.09488%20z%22%0A%20%20%20%20%20id%3D%22path3%22%0A%20%20%20%20%20style%3D%22fill%3A%23888888%3Bfill-opacity%3A1%22%0A%20%20%20%20%20inkscape%3Aconnector-curvature%3D%220%22%20/%3E%3C/svg%3E');
background-repeat: no-repeat;
}
.temp::before {
display: inline-block;
position: absolute;
top: 4px;
left: calc(-1 *100vh/24);
background-size: contain;
content: '';
width: calc(100vh/20);
height: calc(100vh/20);
background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%0A%20%20%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%0A%20%20%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%0A%20%20%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%0A%20%20%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%0A%20%20%20xmlns%3Asodipodi%3D%22http%3A//sodipodi.sourceforge.net/DTD/sodipodi-0.dtd%22%0A%20%20%20xmlns%3Ainkscape%3D%22http%3A//www.inkscape.org/namespaces/inkscape%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20id%3D%22Layer_1%22%0A%20%20%20x%3D%220px%22%0A%20%20%20y%3D%220px%22%0A%20%20%20width%3D%22100px%22%0A%20%20%20height%3D%22100px%22%0A%20%20%20viewBox%3D%225.0%20-10.0%20100.0%20135.0%22%0A%20%20%20enable-background%3D%22new%200%200%20100%20100%22%0A%20%20%20xml%3Aspace%3D%22preserve%22%0A%20%20%20inkscape%3Aversion%3D%220.48.5%20r10040%22%0A%20%20%20sodipodi%3Adocname%3D%22noun_121298_cc.svg%22%3E%3Cmetadata%0A%20%20%20%20%20id%3D%22metadata13%22%3E%3Crdf%3ARDF%3E%3Ccc%3AWork%0A%20%20%20%20%20%20%20%20%20rdf%3Aabout%3D%22%22%3E%3Cdc%3Aformat%3Eimage/svg+xml%3C/dc%3Aformat%3E%3Cdc%3Atype%0A%20%20%20%20%20%20%20%20%20%20%20rdf%3Aresource%3D%22http%3A//purl.org/dc/dcmitype/StillImage%22%20/%3E%3C/cc%3AWork%3E%3C/rdf%3ARDF%3E%3C/metadata%3E%3Cdefs%0A%20%20%20%20%20id%3D%22defs11%22%20/%3E%3Csodipodi%3Anamedview%0A%20%20%20%20%20pagecolor%3D%22%23ffffff%22%0A%20%20%20%20%20bordercolor%3D%22%23666666%22%0A%20%20%20%20%20borderopacity%3D%221%22%0A%20%20%20%20%20objecttolerance%3D%2210%22%0A%20%20%20%20%20gridtolerance%3D%2210%22%0A%20%20%20%20%20guidetolerance%3D%2210%22%0A%20%20%20%20%20inkscape%3Apageopacity%3D%220%22%0A%20%20%20%20%20inkscape%3Apageshadow%3D%222%22%0A%20%20%20%20%20inkscape%3Awindow-width%3D%221100%22%0A%20%20%20%20%20inkscape%3Awindow-height%3D%221028%22%0A%20%20%20%20%20id%3D%22namedview9%22%0A%20%20%20%20%20showgrid%3D%22false%22%0A%20%20%20%20%20inkscape%3Azoom%3D%224.72%22%0A%20%20%20%20%20inkscape%3Acx%3D%2240.883486%22%0A%20%20%20%20%20inkscape%3Acy%3D%2248.098647%22%0A%20%20%20%20%20inkscape%3Awindow-x%3D%221920%22%0A%20%20%20%20%20inkscape%3Awindow-y%3D%2224%22%0A%20%20%20%20%20inkscape%3Awindow-maximized%3D%220%22%0A%20%20%20%20%20inkscape%3Acurrent-layer%3D%22Layer_1%22%20/%3E%3Cpath%0A%20%20%20%20%20d%3D%22m%2067.84522%2C79.032192%20v%20-67.41%20c%200%2C-7.7924005%20-6.3392%2C-14.1316005%20-14.1288%2C-14.1316005%20-7.7896%2C0%20-14.1288%2C6.3392%20-14.1288%2C14.1316005%20v%2067.41%20c%20-5.2864%2C4.2644%20-8.4%2C10.7128%20-8.4%2C17.5336%200%2C12.426398%2010.108%2C22.531598%2022.5316%2C22.531598%2012.4236%2C0%2022.5316%2C-10.1052%2022.5316%2C-22.531598%20-0.0028%2C-6.8208%20-3.1164%2C-13.2664%20-8.4056%2C-17.5336%20z%20m%20-14.1288%2C34.465198%20c%20-9.3352%2C0%20-16.9316%2C-7.5964%20-16.9316%2C-16.931598%200%2C-5.4936%202.6964%2C-10.6736%207.2128%2C-13.846%200.7476%2C-0.5264%201.19%2C-1.3804%201.19%2C-2.2904%20v%20-68.8072%20c%200%2C-4.7040005%203.8276%2C-8.5316005%208.5288%2C-8.5316005%204.7012%2C0%208.5288%2C3.8276%208.5288%2C8.5316005%20v%2068.8044%20c%200%2C0.91%200.4424%2C1.7668%201.19%2C2.2904%204.5164%2C3.1752%207.2128%2C8.3524%207.2128%2C13.846%200%2C9.337998%20-7.5964%2C16.934398%20-16.9316%2C16.934398%20z%20m%203.5%2C-28.660798%20v%20-37.0496%20c%200%2C-1.932%20-1.568%2C-3.5%20-3.5%2C-3.5%20-1.932%2C0%20-3.5%2C1.568%20-3.5%2C3.5%20v%2037.0468%20c%20-5.0708%2C1.5204%20-8.8004%2C6.174%20-8.8004%2C11.7292%200%2C6.781598%205.5188%2C12.300398%2012.3004%2C12.300398%206.7816%2C0%2012.3004%2C-5.5188%2012.3004%2C-12.300398%200%2C-5.5524%20-3.7296%2C-10.2088%20-8.8004%2C-11.7264%20z%22%0A%20%20%20%20%20id%3D%22path3%22%0A%20%20%20%20%20style%3D%22fill%3A%23888888%3Bfill-opacity%3A1%22%0A%20%20%20%20%20inkscape%3Aconnector-curvature%3D%220%22%20/%3E%3C/svg%3E');
background-repeat: no-repeat;
}
@media screen and (orientation:portrait) {
div{
font-size: calc(100vh/20);
}
.humi::before {
left: calc(-1 *100vh/16);
width: calc(100vh/18);
height: calc(100vh/18);
}
.temp::before {
left: calc(-1 *100vh/24);
width: calc(100vh/20);
height: calc(100vh/20);
}
}
</style>
</head>
<body>
<p></p>
<div class="led"><form onsubmit="return sendText();"><input type="text"></form></div>
<div class="temp">12.3&deg;C</div>
<div class="humi">24%RH</div>
<script type="text/javascript">
var cnsThreejsHtml, ws;
var assetsLoaded = 0;
var assets = {
'/js/three.min.js': {pos: 'body', tag: 'script', attrs: { type: 'text/javascript', src: 'js/three.min.js'}, attempt: 1},
'/js/three.renderer.projector.min.js': {pos: 'body', tag: 'script', attrs: { type: 'text/javascript', src: 'js/three.renderer.projector.min.js'}, attempt: 1},
'/js/morayModel.min.js': {pos: 'body', tag: 'script', attrs: { type: 'text/javascript', src: 'js/morayModel.min.js'}, attempt: 1},
'/js/morayAccel.min.js': {pos: 'body', tag: 'script', attrs: { type: 'text/javascript', src: 'js/morayAccel.min.js'}, attempt: 1}
};
function sendText(e){
if(e){
e.preventDefault();
e.stopPropagation();
}
var inp = document.getElementsByTagName('input')[0];
var val = inp.value;
inp.value = '';
console.log(val);
ws.send(JSON.stringify({
stream: 'display',
method: 'put',
data: val
}));
return false;
}
function loadAsset(asset){
asset.el = document.createElement(asset.tag);
for(var j = 0; j < Object.keys(asset.attrs).length; j++) {
asset.el[Object.keys(asset.attrs)[j]] = asset.attrs[Object.keys(asset.attrs)[j]];
}
document[asset.pos].appendChild(asset.el);
asset.el.addEventListener('load', assetLoaded);
asset.el.addEventListener('progress', function(e,m,n,i){console.log(e,m,n,i);});
asset.el.addEventListener('error', assetErr);
}
function assetLoaded(e){
console.log('asset loaded');
assetsLoaded++;
if(assetsLoaded === Object.keys(assets).length){
cnsThreejsHtml = new CNSThreeJsHtml();
document.onkeypress = function(e){
if(e.keyCode === 13){
sendText(e);
}
}
}
}
function assetErr(e){
var asset = assets[(e.target.src||e.target.href).replace(window.location.origin,'')];
if(asset.attempt < 3) {
asset.attempt++;
document[asset.pos].removeChild(this);
return setTimeout(loadAsset, 1000, asset);
}
var err = document.createElement('p');
err.innerHTML = 'error loading assests';
document['body'].appendChild(err);
}
Object.keys(assets).forEach(function(asset){loadAsset(assets[asset])});
</script>
</body>
</html>