94 lines
3.2 KiB
Handlebars
94 lines
3.2 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">
|
|
<title>SPX - PREVIEW</title>
|
|
<link rel="stylesheet" type="text/css" href="/css/spx_renderpopups.css">
|
|
<script src="/js/socket.io.js"></script>
|
|
<script>
|
|
var socket = io();
|
|
|
|
socket.on('connect', function () {
|
|
data={};
|
|
data.name = 'SPX_PREVIEW'; // <---- Name of this socket connection
|
|
data.spxcmd = 'identifyClient';
|
|
socket.emit('SPXMessage2Server', data);
|
|
});
|
|
|
|
socket.on('SPXMessage2Client', function (data) {
|
|
// Handles messages coming from server to this client.
|
|
// All comms using 'SPXMessage2Client' as a conduit with data object and
|
|
// data.spxcmd as function identifier. Additional object values are payload.
|
|
// console.log('SPXMessage2Client received', data)
|
|
switch (data.spxcmd) {
|
|
case 'closepreview':
|
|
// console.log('Close preview window request received from Controller');
|
|
window.close();
|
|
break;
|
|
|
|
default:
|
|
// console.log('Unknown SPXMessage2Client command: ' + data.command);
|
|
}
|
|
}); // end SPXMessage2Client
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body onresize="resizePreview();" onunload="return windowClosing();">
|
|
|
|
<!-- maybe in the future
|
|
<div id="toolbar">
|
|
<div>PREVIEW</div>
|
|
<div>Clear</div>
|
|
<div>Layers</div>
|
|
</div>
|
|
-->
|
|
|
|
<div class="watermark prev"></div>
|
|
<div id="previewBG" style="background-color: rgb(0, 0, 0); overflow: hidden;">
|
|
<iframe id="previewIF"
|
|
src="/renderer?preview=true"
|
|
class="renderer"
|
|
style="width: {{width}}px; height: {{height}}px;"></iframe>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
function windowClosing() {
|
|
console.log('========= Closing ============');
|
|
return true;
|
|
}
|
|
|
|
|
|
function resizePreview() {
|
|
// Preview renderer size set by SPX to {{width}}x{{height}}
|
|
let DefaultX = 1920; // Math always defaults to 16:9
|
|
let DefaultY = 1080;
|
|
|
|
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
|
|
DefaultX = vw;
|
|
DefaultY = vy;
|
|
}
|
|
|
|
let Wpx = vw// document.getElementById('previewWidthRuler').offsetWidth;
|
|
let Sca = Wpx/DefaultX;
|
|
let Hpx = 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> |