Init WebCG

2026-08-12 14:21:28 +09:00
commit 5c01660f97
170 changed files with 46248 additions and 0 deletions
@@ -0,0 +1,179 @@
+<!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>