179 lines
5.3 KiB
Handlebars
179 lines
5.3 KiB
Handlebars
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link rel="stylesheet" type="text/css" href="/css/spx_renderpopups.css">
|
|
|
|
<title>SPX - scalable renderer view</title>
|
|
<script src="/js/anime.min.js"></script>
|
|
<style>
|
|
|
|
|
|
html,
|
|
body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: rgb(0,0,0);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
*, *:before, *:after {
|
|
box-sizing: inherit;
|
|
margin: 0;
|
|
padding: 0;
|
|
user-select: none;
|
|
}
|
|
|
|
.renderer {
|
|
/* rendererscalable hardcoded to 1920x1080 data received {{width}}x{{height}}*/
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0px;
|
|
outline: 0px;
|
|
width: {{width}};
|
|
height: {{height}};
|
|
ZZZwidth: 1920px;
|
|
ZZZheight: 1080px;
|
|
background-size: 10vw;
|
|
transform-origin: top left;
|
|
background-image: url('/img/checker60.png'); /* bgimage for local preview */
|
|
}
|
|
|
|
#message {
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 100;
|
|
display: flex;
|
|
color: orange;
|
|
font-size: 2.0vw;
|
|
line-height: 1.5em;
|
|
position: absolute;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-shadow: 2px 2px 4px black;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.pale {
|
|
color: #aaa;
|
|
}
|
|
|
|
#previewBG {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0px solid yellowgreen;
|
|
}
|
|
|
|
#previewIF {
|
|
transform-origin: top left;
|
|
}
|
|
|
|
</style>
|
|
<script src="/js/socket.io.js"></script>
|
|
<script>
|
|
var socket = io();
|
|
let socData={};
|
|
|
|
socket.on('connect', function () {
|
|
{{#ifValue mode 'preview'}}
|
|
socData.name = 'SPX_PREVIEW';
|
|
{{/ifValue}}
|
|
{{#ifValue mode 'program'}}
|
|
socData.name = 'SPX_PROGRAM';
|
|
{{/ifValue}}
|
|
socData.spxcmd = 'identifyClient';
|
|
socket.emit('SPXMessage2Server', socData);
|
|
});
|
|
|
|
socket.on('SPXMessage2Client', function (data) {
|
|
if (data.spxcmd == 'closepreview' && socData.name == 'SPX_PREVIEW') {
|
|
window.close();
|
|
}
|
|
if (data.spxcmd == 'closeprogram' && socData.name == 'SPX_PROGRAM') {
|
|
window.close();
|
|
}
|
|
}); // end SPXMessage2Client
|
|
|
|
</script>
|
|
</head>
|
|
<body onresize="resizePreview();">
|
|
|
|
{{#ifValue mode 'preview'}}
|
|
<div class="watermark prev"></div>
|
|
{{/ifValue}}
|
|
|
|
{{#ifValue mode 'program'}}
|
|
<div class="watermark prog"></div>
|
|
{{/ifValue}}
|
|
|
|
|
|
<div id="previewBG" style="background-color: rgb(0, 0, 0); overflow: hidden;">
|
|
|
|
{{#ifValue mode 'preview'}}
|
|
<iframe id="previewIF" src="/renderer?preview=true" class="renderer"></iframe>
|
|
{{else}}
|
|
<iframe id="previewIF" src="/renderer" class="renderer"></iframe>
|
|
{{/ifValue}}
|
|
</div>
|
|
|
|
|
|
<div id="message">
|
|
THIS SCALABLE VIEW IS FOR SPX OPERATOR ONLY
|
|
<br>
|
|
<small class="pale">Use transparent <span style="color:#fff;">/renderer</span> for production.</small>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
anime({
|
|
targets: '#message',
|
|
opacity: 0,
|
|
duration: 1000,
|
|
easing: 'linear',
|
|
delay: 2000
|
|
});
|
|
|
|
function resizePreview() {
|
|
// renderscalable
|
|
// Scalable renderer size set by SPX to {{width}}x{{height}}
|
|
let DefaultX = '{{width}}'; // Math always defaults to 16:9
|
|
let DefaultY = '{{height}}';
|
|
// console.log('Resizer ' + DefaultX + ' x ' + DefaultY + ' px');
|
|
|
|
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
|
|
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
|
|
|
|
if (DefaultX.includes('vw')) {
|
|
// Responsive settings, use window size! Added in v1.3.0
|
|
// console.log('Responsive settings, use window size! Added in v1.3.0');
|
|
DefaultX = vw;
|
|
DefaultY = vh;
|
|
}
|
|
|
|
let Wpx = vw// document.getElementById('previewWidthRuler').offsetWidth;
|
|
let Sca = Wpx/parseInt(DefaultX);
|
|
let Hpx = parseInt(parseInt(DefaultY) * Sca);
|
|
document.getElementById('previewBG').style.width=Wpx+'px';
|
|
document.getElementById('previewBG').style.height=Hpx+'px';
|
|
document.getElementById('previewIF').style.transform="scale("+Sca+")";
|
|
document.getElementById('previewBG').style.display='block';
|
|
// console.log('Resized to ' + Wpx + ' x ' + Hpx + ' px, scale multiplier: ' + Sca);
|
|
}
|
|
|
|
resizePreview();
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |