cpp
/
urho3d
mirror of https://github.com/urho3d/urho3d.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
							<!doctype html>
<html lang="en-us">
<head>
    <meta charset=utf-8>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Urho3D</title>
    <style>
        body, html {
            padding: 0;
            margin: 0;
            margin: 0;
            overflow: hidden;
        }

        .emscripten {
            padding-right: 0;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }

        div.emscripten {
            text-align: center;
        }

        #fullscreen-button {
            position: absolute;
            width: 2em;
            height: 2em;
            left: 50%;
            top: 4px;
            -moz-transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            stroke: #999999;
            stroke-width: 10px;
        }

        #fullscreen-button:hover {
            fill: #999999;
            cursor: pointer;
        }

        #canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            border: 1px solid #000000;
            border: none;
            cursor: default !important;
        }

        .centered {
            position: absolute;
            top: 50%;
            left: 50%;
            -moz-transform: translateX(-50%) translateY(-50%);
            -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="centered">
        <div class="emscripten" id="status">Downloading...</div>
        <progress hidden id="progress" max=100 value=10></progress>
    </div>
    <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1 width=100 height=100 style="display: none;"></canvas>
    <div id="fullscreen-button" onclick="enterFullscreen()" style="display: none;">
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
            <path d="M93.1,139.6l46.5-46.5L93.1,46.5L139.6,0H0v139.6l46.5-46.5L93.1,139.6z M93.1,372.4l-46.5,46.5L0,372.4V512h139.6
                l-46.5-46.5l46.5-46.5L93.1,372.4z M372.4,139.6H139.6v232.7h232.7V139.6z M325.8,325.8H186.2V186.2h139.6V325.8z M372.4,0
                l46.5,46.5l-46.5,46.5l46.5,46.5l46.5-46.5l46.5,46.5V0H372.4z M418.9,372.4l-46.5,46.5l46.5,46.5L372.4,512H512V372.4l-46.5,46.5
                L418.9,372.4z"/>
        </svg>
    </div>
    <script>
        var canvasElement = document.getElementById('canvas');
        var devicePixelRatio = 1;//window.devicePixelRatio || 1;
        var canvasWidth = 0;
        var canvasHeight = 0;

        // Detect the visible width and height of the window
        function calculateCanvasSize() {
            canvasWidth = parseInt(window.getComputedStyle(canvasElement).getPropertyValue('width')) * devicePixelRatio;
            canvasHeight = parseInt(window.getComputedStyle(canvasElement).getPropertyValue('height')) * devicePixelRatio;
        }
        calculateCanvasSize();

        // Detect fullscreen change and resize canvas resolution accordingly
        function viewportResizeHandler() {
            if (document.hidden) {
                return;
            }

            calculateCanvasSize();
            if (Module['JSCanvasSize']) {
                if (isFullScreen()) {
                    Module.JSCanvasSize(screen.width * devicePixelRatio, screen.height * devicePixelRatio, true, devicePixelRatio);
                } else {
                    Module.JSCanvasSize(canvasWidth, canvasHeight, false, devicePixelRatio);
                }
            }
        }

        function visibilityChanged() {
            if (document.hidden) {
                return;
            }

            // Overwrite some emscripten functions that break the input
            __registerFocusEventCallback = function() {
                if (!JSEvents.focusEvent) JSEvents.focusEvent = _malloc(256);
            };
            __registerFullscreenChangeEventCallback = function() {
                if (!JSEvents.fullscreenChangeEvent) JSEvents.fullscreenChangeEvent = _malloc(280);
            };

            setTimeout(() => {
                viewportResizeHandler();
            }, 100);
        }

        document.addEventListener('fullscreenchange', viewportResizeHandler, false);
        document.addEventListener('mozfullscreenchange', viewportResizeHandler, false);
        document.addEventListener('webkitfullscreenchange', viewportResizeHandler, false);
        document.addEventListener('MSFullscreenChange', viewportResizeHandler, false);

        document.addEventListener('visibilitychange', visibilityChanged, false);
        document.addEventListener('msvisibilitychange', visibilityChanged, false);
        document.addEventListener('webkitvisibilitychange', visibilityChanged, false);

        var resizeTimeout = false;
        // When window size has changed, resize the canvas accordingly
        window.addEventListener('resize', function(evt) {
            // resize event is called before the resizing has finished, we must wait a bit so the new calculations use the new viewport size
            if (resizeTimeout) {
                clearTimeout(resizeTimeout);
            }
            resizeTimeout = setTimeout(() => {
                viewportResizeHandler(evt);
            }, 1000);
        });

        // Enter the fullscreen mode
        function enterFullscreen(show) {
            if (show === undefined) show = !isFullScreen();
            if (show) {
                if (canvasElement.requestFullscreen) canvasElement.requestFullscreen();
                else if (canvasElement.webkitRequestFullScreen) canvasElement.webkitRequestFullScreen();
                else if (canvasElement.mozRequestFullScreen) canvasElement.mozRequestFullScreen();
                else if (canvasElement.msRequestFullscreen) canvasElement.msRequestFullscreen();
            } else {
                if (document.exitFullscreen) document.exitFullscreen();
                else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
                else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
                else if (document.msExitFullscreen) document.msExitFullscreen();
            }
        }

        function isFullScreen() {
            return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
        }

        // App is ready to launch, make canvas and fullscreen button visible
        function ready() {
            document.getElementById('canvas').style.display = 'block';
            document.getElementById('fullscreen-button').style.display = 'block';

            if (document.hidden) {
                return;
            }

            // Overwrite some emscripten functions that break the input
            __registerFocusEventCallback = function() {
                if (!JSEvents.focusEvent) JSEvents.focusEvent = _malloc(256);
            };
            __registerFullscreenChangeEventCallback = function() {
                if (!JSEvents.fullscreenChangeEvent) JSEvents.fullscreenChangeEvent = _malloc(280);
            };

            setTimeout(() => {
                viewportResizeHandler();
            }, 100);
        }

        var Module = {
            preRun: [],
            postRun: [],
            canvas: canvasElement,
            forcedAspectRatio: false,

            print: function (text) {
                console.log(text);
            },

            printErr: function(text) {
                console.error(text);
            },

            // Urho3D called method which tells the canvas the current renderer resolution, based on E_SCREENMODE event values
            SetRendererSize: function(width, height) {
                console.log('Engine renderer size changed to', width, height);
                calculateCanvasSize();

                if (document.hidden) {
                    return;
                }

                var aspectRatio = width / height;
                canvasElement.width = width;
                canvasElement.height = height;

                // Compare calculated canvas resolution with the actual renderer resolution
                if (canvasWidth === width && canvasHeight === height) {
                    return;
                }

                // Renderer resolution is wrong, update it with the calculated values
                console.log('Renderer and canvas resolution mismatch, updating renderer resolution width', this.canvas.width, 'to', width, 'and height', this.canvas.height, 'to', height);
                Module.JSCanvasSize(canvasWidth, canvasHeight, false, devicePixelRatio);
            },

            // Retrieve the current status of the application
            setStatus: function(text) {
                if (text === 'Running...') {
                    ready();
                }
                if (Module.setStatus.interval) clearInterval(Module.setStatus.interval);
                var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
                var statusElement = document.getElementById('status');
                var progressElement = document.getElementById('progress');
                if (m) {
                    text = m[1];
                    progressElement.value = parseInt(m[2])*100;
                    progressElement.max = parseInt(m[4])*100;
                    progressElement.hidden = false;
                } else {
                    progressElement.value = null;
                    progressElement.max = null;
                    progressElement.hidden = true;
                }
                statusElement.innerHTML = text;
            },

            totalDependencies: 0,
            monitorRunDependencies: function(left) {
                this.totalDependencies = Math.max(this.totalDependencies, left);
                Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
            },
        };
        Module.setStatus('Downloading...');
    </script>
    {{{ SCRIPT }}}
</body>
</html>