feat(settings): add a settings panel

README.md

@@ -62,9 +62,9 @@ operators:
     use_skel: true # For the Spine model, <true> for using skel file, otherwise use json
 # Development server settings
 server:
-  operator_folder: /operator/ # The path that the showcase webpage accesses game files
+  operator_folder: ./operator/ # The path that the showcase webpage accesses game files
   release_folder: ./release/ # The folder that stores the showcase webpage
-  template_folder: /template/ # The folder that stores the showcase template
+  template_folder: ./template/ # The folder that stores the showcase template
 ```
 ## LICENSE
 
@@ -81,4 +81,4 @@ The `LICENSE` file applies to all files unless listed specifically.
 
 - all files under `operator` folder and its sub-folders
 - all files under `release/*/operator/*` folder
-- `release/*/operator/operator.js`
+- `release/*/operator/operator_assets.js`

Version

@@ -1 +1 @@
-2.0.1
+2.0.2

lib/builder.py

@@ -33,13 +33,13 @@ class Builder:
             skel=target_path + common_name + ".skel",
         )
 
-        operator_file = pathlib.Path.cwd().joinpath(target_path, "..", "operator.js")
+        operator_file = pathlib.Path.cwd().joinpath(target_path, "..", "operator_assets.js")
         if operator_file.exists() is False:
             print("Building operaotr data for {}...".format(operator_name))
 
             alpha_composite_threads = list()
             png_to_base64_threads = list()
-            prefix = "window.operator = "
+            prefix = "window.operatorAssets = "
             data = dict()
 
             ar = AtlasReader(source_path + common_name, target_path + common_name)

template/assets/runner.js

@@ -1,15 +1,3 @@
-const params = new URLSearchParams(window.location.search);
-var RATIO = 0.618;
-var fps = 60;
-var viewport = Object.assign({}, window.settings.viewport);
-
-if (params.has("fps")) {
-    var tmp = parseInt(params.get("fps"));
-    if (!isNaN(tmp)) {
-        fps = tmp;
-    }
-}
-
 function supportsWebGL() {
     try {
         let canvas = document.createElement("canvas");
@@ -18,14 +6,6 @@ function supportsWebGL() {
     } catch (e) {
         return false;
     }
-}
-
-function calculateScale(width, height) {
-    let windowWidth = window.innerWidth;
-    let windowHeight = window.innerHeight;
-    let scaleX = windowWidth / width;
-    let scaleY = windowHeight / height;
-    return { x: scaleX, y: scaleY };
 };
 
 if (!supportsWebGL()) {
@@ -34,14 +14,22 @@ if (!supportsWebGL()) {
     e.classList.add("fallback");
     e.parentElement.classList.add("widget-wrapper");
 
+    function calculateScale(width, height) {
+        let windowWidth = window.innerWidth;
+        let windowHeight = window.innerHeight;
+        let scaleX = windowWidth / width;
+        let scaleY = windowHeight / height;
+        return { x: scaleX, y: scaleY };
+    }
+
     function fallback() {
-        const scale = calculateScale(window.settings.fallbackImage.width, window.settings.fallbackImage.height);
+        const scale = calculateScale(window.operatorSettings.fallbackImage.width, window.operatorSettings.fallbackImage.height);
         if (scale.x > scale.y) {
-            e.style.width = window.settings.fallbackImage.width * scale.y + "px";
+            e.style.width = window.operatorSettings.fallbackImage.width * scale.y + "px";
-            e.style.height = window.settings.fallbackImage.height * scale.y + "px";
+            e.style.height = window.operatorSettings.fallbackImage.height * scale.y + "px";
         } else if (scale.x < scale.y) {
-            e.style.width = window.settings.fallbackImage.width * scale.x + "px";
+            e.style.width = window.operatorSettings.fallbackImage.width * scale.x + "px";
-            e.style.height = window.settings.fallbackImage.height * scale.x + "px";
+            e.style.height = window.operatorSettings.fallbackImage.height * scale.x + "px";
         }
     }
 
@@ -49,105 +37,84 @@ if (!supportsWebGL()) {
     fallback();
 } else {
     var e = document.getElementById("container");
-    var resetTime = window.performance.now();
 	
 	var spinePlayer = new spine.SpinePlayer(e, {
-        jsonUrl: window.settings.jsonUrl,
+        jsonUrl: window.operatorSettings.jsonUrl,
-        skelUrl: window.settings.skelUrl,
+        skelUrl: window.operatorSettings.skelUrl,
-		atlasUrl: window.settings.atlasUrl,
+		atlasUrl: window.operatorSettings.atlasUrl,
-        animation: window.settings.animation,
+        animation: window.operatorSettings.animation,
-        rawDataURIs: window.operator,
+        rawDataURIs: window.operatorAssets,
 		premultipliedAlpha: true,
 		alpha: true,
 		backgroundColor: "#00000000",
-		fps: fps,
+		viewport: window.operatorSettings.viewport,
-		viewport: window.settings.viewport,
         showControls: false,
-        defaultMix: window.settings.defaultMix,
+        fps: window.operatorSettings.fps,
-        success: window.settings.success,
+        defaultMix: window.operatorSettings.defaultMix,
+        success: window.operatorSettings.success,
+    });
+    var settings = new Settings({
+        logo: document.getElementById("logo"),
+        spinePlayer: spinePlayer,
+        operatorSettings: window.operatorSettings
     });
-    
-    
 }
 
-function resizeLogo() {
+settings.setup()
-    document.getElementById("logo").width = window.innerWidth / 2 * RATIO
-}
-window.addEventListener('resize', resizeLogo, true);
-resizeLogo()
-
-window.addEventListener("contextmenu", e => e.preventDefault());
-document.addEventListener("gesturestart", e => e.preventDefault());
 
 // wallpaper engine
 window.wallpaperPropertyListener = {
     applyGeneralProperties: function (properties) {
         if (properties.fps) {
-            spinePlayer.setFps(properties.fps);
+            settings.setFPS(properties.fps);
         }
     },
     applyUserProperties: function (properties) {
         if (properties.logo) {
-            if (!properties.logo.value) {
+            settings.displayLogo(properties.logo.value)
-                document.getElementById("logo").style.display = "none";
-            } else {
-                document.getElementById("logo").style.display = "inherit";
-            }
         }
         if (properties.logoratio) {
             if (properties.logoratio.value) {
-                RATIO = properties.logoratio.value / 100;
+                settings.resizeLogo(properties.logoratio.value)
-                resizeLogo();
             }
         }
         if (properties.logoopacity) {
             if (properties.logoopacity.value) {
-                var opacity= properties.logoopacity.value / 100;
+                settings.opacityLogo(properties.logoopacity.value)
-                document.getElementById('logo').style.opacity = opacity;
             }
         }
         if (properties.logoimage) {
-            var logoImage;
-            const e = document.getElementById('logo');
             if (properties.logoimage.value) {
-                logoImage = 'file:///' + properties.logoimage.value;
+                var logoImage = 'file:///' + properties.logoimage.value;
-                e.style.filter = "invert(0)";
+                settings.setLogo(logoImage, true);
             } else {
-                logoImage = "./operator/operator_logo.png"
+                settings.resetLogo();
-                e.style.filter = "invert(1)";
             }
-            e.src = logoImage;
-            resizeLogo();
         }
         if (properties.background) {
-            var background;
             if (properties.background.value) {
-                background = 'file:///' + properties.background.value;
+                var background = 'file:///' + properties.background.value;
+                settings.setBackground(background);
             } else {
-                background = "./operator/operator_bg.png"
+                settings.resetBackground();
             }
-            document.body.style.backgroundImage = `url(${background})`
         }
         if (properties.position) {
             if (!properties.position.value) {
-                spinePlayer.updateViewport(window.settings.viewport)
+                settings.positionReset();
             }
         }
         if (properties.paddingleft) {
-            viewport.padLeft = `${properties.paddingleft.value}%`
+            settings.positionPadding("padLeft", properties.paddingleft.value)
-            spinePlayer.updateViewport(viewport)
         }
         if (properties.paddingright) {
-            viewport.padRight = `${properties.paddingright.value}%`
+            settings.positionPadding("padRight", properties.paddingright.value)
-            spinePlayer.updateViewport(viewport)
         }
         if (properties.paddingtop) {
-            viewport.padTop = `${properties.paddingtop.value}%`
+            settings.positionPadding("padTop", properties.paddingtop.value)
-            spinePlayer.updateViewport(viewport)
         }
         if (properties.paddingbottom) {
-            viewport.padBottom = `${properties.paddingbottom.value}%`
+            settings.positionPadding("padBottom", properties.paddingbottom.value)
-            spinePlayer.updateViewport(viewport)
         }
     },
 };

template/assets/settings.js

@@ -0,0 +1,332 @@
+var Settings = (function () {
+    function Settings(config) {
+        this.logoEl = config.logo;
+        this.spinePlayer = config.spinePlayer;
+        this.operatorSettings = config.operatorSettings;
+        this.validateConfig();
+        
+        this.fps = 60;
+        this.ratio = this.defaultRatio = 0.618 * 100;
+        this.viewport = Object.assign({}, window.operatorSettings.viewport);
+        this.backgroundImage = getComputedStyle(document.body).backgroundImage;
+        this.logoSrc = this.logoEl.src;
+        this.opacity = parseFloat(getComputedStyle(this.logoEl).opacity) * 100;
+        this.el = document.createElement("div");
+        
+    }
+    Settings.prototype.validateConfig = function () {
+        if (typeof this.logoEl === "string")
+            this.logoEl = document.getElementById(this.logoEl);
+		else
+            this.logoEl = this.logoEl;
+        if (typeof this.spinePlayer !== "object") {
+            var message = "Invalid spine player, the showcase will not work properly.";
+            alert(message);
+            throw new Error(message);
+        }
+    };
+    Settings.prototype.setFPS = function (value) {
+        value = parseInt(value);
+        this.spinePlayer.setFps(value);
+    };
+    Settings.prototype.displayLogo = function (bool) {
+        if (bool) {
+            this.logoEl.style.display = "inherit";
+        } else {
+            this.logoEl.style.display = "none";
+        }
+    };
+    Settings.prototype.setBackground = function (url) {
+        url = `url("${url}")`;
+        document.body.style.backgroundImage = url
+    };
+    Settings.prototype.resetBackground = function () {
+        document.body.style.backgroundImage = this.backgroundImage;
+    };
+    Settings.prototype.setLogo = function (url, removeInvert) {
+        this.logoEl.src = url;
+        this.resizeLogo(this.ratio);
+        if (removeInvert) {
+            this.logoEl.style.filter = "invert(0)";
+        } else {
+            this.logoEl.style.filter = "invert(1)";
+        }
+    };
+    Settings.prototype.resetLogo = function () {
+        this.setLogo(this.logoSrc, false);
+    };
+    Settings.prototype.resizeLogo = function (value) {
+        this.ratio = parseFloat(value);
+        this.logoEl.width = window.innerWidth / 2 * this.ratio / 100
+    };
+    Settings.prototype.opacityLogo = function (value) {
+        var opacity = parseFloat(value);
+        this.logoEl.style.opacity = opacity / 100;
+    };
+    Settings.prototype.positionReset = function () {
+        this.spinePlayer.updateViewport(window.operatorSettings.viewport)
+    };
+    Settings.prototype.positionPadding = function (key, value) {
+        switch (key) {
+            case "padLeft":
+                this.viewport.padLeft = `${value}%`;
+                break;
+            case "padRight":
+                this.viewport.padRight = `${value}%`;
+                break;
+            case "padTop":
+                this.viewport.padTop = `${value}%`;
+                break;
+            case "padBottom":
+                this.viewport.padBottom = `${value}%`;
+                break;
+        }
+        this.spinePlayer.updateViewport(this.viewport)
+    };
+    Settings.prototype.open = function () {
+        this.el.classList.add("website-settings");
+    };
+    Settings.prototype.close = function () {
+        this.el.classList.remove("website-settings");
+    };
+    Settings.prototype.reset = function () {
+        this.setFPS(this.fps);
+        this.displayLogo(true);
+        this.resizeLogo(this.defaultRatio);
+        this.opacityLogo(this.opacity);
+        this.positionReset();
+        this.resetBackground();
+        this.resetLogo();
+        this.spinePlayer.play();
+        this._removeHTML();
+        this._insertHTML();
+    };
+    Settings.prototype.setup = function () {
+        var _this = this;
+
+        _this._insertHTML();
+        
+        function resize() {
+            document.getElementById("logo").width = window.innerWidth / 2 * _this.ratio / 100
+        }
+        window.addEventListener("resize", resize, true);
+        resize()
+
+        window.addEventListener("contextmenu", e => e.preventDefault());
+        document.addEventListener("gesturestart", e => e.preventDefault());
+    };
+    Settings.prototype.sync = function (source, targetID) {
+        document.getElementById(targetID).value = source.value;
+    };
+    Settings.prototype._showRelated = function (e, relatedSettingsID) {
+        var eRelatedSettings = document.getElementById(relatedSettingsID)
+        if (e.checked) {
+            eRelatedSettings.style.display = "inherit";
+        } else {
+            eRelatedSettings.style.display = "none";
+        }
+    };
+    Settings.prototype._removeHTML = function () {
+        this.el.innerHTML = null;
+    };
+    Settings.prototype._insertHTML = function () {
+        var htmldata =
+        `
+            <div>
+                <label for="fps">FPS</label>
+                <input type="range" min="1" max="60" value="${this.operatorSettings.fps}" step="1" id="fps_slider">
+                <input type="number" id="fps_input" name="fps"  value="${this.operatorSettings.fps}">
+            </div>
+            <div>
+                <label for="operator_logo">Operator Logo</label>
+                <input type="checkbox" id="operator_logo" name="operator_logo" checked data-checked="true">
+                <div id="operator_logo_realted">
+                    <div>
+                        <label for="logo_image">Logo Image (Store Locally)</label>
+                        <input type="file" id="logo_image">
+                        <button type="button" id="logo_image_clear" disabled>Clear</button>
+                    </div>
+                    <div>
+                        <label for="logo_ratio">Logo Ratio</label>
+                        <input type="range" min="0" max="100" step="0.1" id="logo_ratio_slider" value="${this.ratio}">
+                        <input type="number" id="logo_ratio_input" name="logo_ratio" value="${this.ratio}">
+                    </div>
+                    <div>
+                        <label for="logo_opacity">Logo Opacity</label>
+                        <input type="range" min="0" max="100" data-css-class="logo" step="1" id="logo_opacity_slider" value="${this.opacity}">
+                        <input type="number" id="logo_opacity_input" name="logo_opacity" value="${this.opacity}">
+                    </div>
+                </div>
+            </div>
+            <div>
+                <label for="background_image">Background Image (Store Locally)</label>
+                <input type="file" id="background_image">
+                <button type="button" id="background_image_clear" disabled>Clear</button>
+            </div>
+            <div>
+                <label for="position">Position</label>
+                <input type="checkbox" id="position" name="position">
+                <div id="position_realted" style="display: none;">
+                    <div>
+                        <label for="position_padding_left">Padding Left</label>
+                        <input type="range" min="-100" max="100" id="position_padding_left_slider" value="${this._getPercentage(this.operatorSettings.viewport.padLeft)}">
+                        <input type="number" id="position_padding_left_input" name="position_padding_left" value="${this._getPercentage(this.operatorSettings.viewport.padLeft)}">
+                    </div>
+                    <div>
+                        <label for="position_padding_right">Padding Right</label>
+                        <input type="range" min="-100" max="100" id="position_padding_right_slider" value="${this._getPercentage(this.operatorSettings.viewport.padRight)}">
+                        <input type="number" id="position_padding_right_input" name="position_padding_right" value="${this._getPercentage(this.operatorSettings.viewport.padRight)}">
+                    </div>
+                    <div>
+                        <label for="position_padding_Top">Padding Top</label>
+                        <input type="range" min="-100" max="100" id="position_padding_top_slider" value="${this._getPercentage(this.operatorSettings.viewport.padTop)}">
+                        <input type="number" id="position_padding_top_input" name="position_padding_top" value="${this._getPercentage(this.operatorSettings.viewport.padTop)}">
+                    </div>
+                    <div>
+                        <label for="position_padding_bottom">Padding Bottom</label>
+                        <input type="range" min="-100" max="100" id="position_padding_bottom_slider"  value="${this._getPercentage(this.operatorSettings.viewport.padBottom)}">
+                        <input type="number" id="position_padding_bottom_input" name="position_padding_bottom" value="${this._getPercentage(this.operatorSettings.viewport.padBottom)}">
+                    </div>
+                </div>
+            </div>
+            <div>
+                <button type="button" id="settings_play" disabled>Play</button>
+                <button type="button" id="settings_pause">Pause</button>
+                <button type="button" id="settings_reset">Reset</button>
+                <button type="button" id="settings_close">Close</button>
+            </div>
+        `
+
+        this.el.innerHTML = htmldata;
+        document.body.appendChild(this.el);
+        
+        this._addEventListener();
+    };
+    Settings.prototype._addEventListener = function () {
+        var _this = this;
+
+        document.getElementById("fps_slider").addEventListener("input", e => {
+            _this.sync(e.currentTarget, "fps_input");
+            _this.setFPS(e.currentTarget.value);
+        })
+        document.getElementById("fps_input").addEventListener("change", e => {
+            _this.sync(e.currentTarget, "fps_slider");
+            _this.setFPS(e.currentTarget.value);
+        })
+
+        document.getElementById("operator_logo").addEventListener("click", e => {
+            _this._showRelated(e.currentTarget, "operator_logo_realted");
+            _this.displayLogo(e.currentTarget.checked)
+        })
+
+        document.getElementById("logo_image").addEventListener("change", e => {
+            var file = e.target.files[0];
+            var reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = readerEvent => {
+                var content = readerEvent.target.result;
+                this.setLogo(content, true);
+            }
+            document.getElementById("logo_image_clear").disabled = false;
+        })
+        document.getElementById("logo_image_clear").addEventListener("click", e => {
+            this.resetLogo();
+            e.currentTarget.disabled = true;
+        })
+
+        document.getElementById("logo_ratio_slider").addEventListener("input", e => {
+            _this.sync(e.currentTarget, "logo_ratio_input");
+            _this.resizeLogo(e.currentTarget.value);
+        })
+        document.getElementById("logo_ratio_input").addEventListener("change", e => {
+            _this.sync(e.currentTarget, "logo_ratio_slider");
+            _this.resizeLogo(e.currentTarget.value);
+        })
+
+        document.getElementById("logo_opacity_slider").addEventListener("input", e => {
+            _this.sync(e.currentTarget, "logo_opacity_input");
+            _this.opacityLogo(e.currentTarget.value);
+        })
+        document.getElementById("logo_opacity_input").addEventListener("change", e => {
+            _this.sync(e.currentTarget, "logo_opacity_slider");
+            _this.opacityLogo(e.currentTarget.value);
+        })
+
+        document.getElementById("background_image").addEventListener("change", e => {
+            var file = e.target.files[0];
+            var reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = readerEvent => {
+                var content = readerEvent.target.result;
+                this.setBackground(content);
+            }
+            document.getElementById("background_image_clear").disabled = false;
+        })
+        document.getElementById("background_image_clear").addEventListener("click", e => {
+            this.resetBackground();
+            e.currentTarget.disabled = true;
+        })
+
+        document.getElementById("position").addEventListener("click", e => {
+            _this._showRelated(e.currentTarget, "position_realted");
+            if (e.currentTarget.checked) _this.positionReset();
+        })
+
+        document.getElementById("position_padding_left_slider").addEventListener("input", e => {
+            _this.sync(e.currentTarget, "position_padding_left_input");
+            _this.positionPadding("padLeft", e.currentTarget.value);
+        })
+        document.getElementById("position_padding_left_input").addEventListener("change", e => {
+            _this.sync(e.currentTarget, "position_padding_left_slider");
+            _this.positionPadding("padLeft", e.currentTarget.value);
+        })
+
+        document.getElementById("position_padding_right_slider").addEventListener("input", e => {
+            _this.sync(e.currentTarget, "position_padding_right_input");
+            _this.positionPadding("padRight", e.currentTarget.value);
+        })
+        document.getElementById("position_padding_right_input").addEventListener("change", e => {
+            _this.sync(e.currentTarget, "position_padding_right_slider");
+            _this.positionPadding("padRight", e.currentTarget.value);
+        })
+
+        document.getElementById("position_padding_top_slider").addEventListener("input", e => {
+            _this.sync(e.currentTarget, "position_padding_top_input");
+            _this.positionPadding("padTop", e.currentTarget.value);
+        })
+        document.getElementById("position_padding_top_input").addEventListener("change", e => {
+            _this.sync(e.currentTarget, "position_padding_top_slider");
+            _this.positionPadding("padTop", e.currentTarget.value);
+        })
+
+        document.getElementById("position_padding_bottom_slider").addEventListener("input", e => {
+            _this.sync(e.currentTarget, "position_padding_bottom_input");
+            _this.positionPadding("padBottom", e.currentTarget.value);
+        })
+        document.getElementById("position_padding_bottom_input").addEventListener("change", e => {
+            _this.sync(e.currentTarget, "position_padding_bottom_slider");
+            _this.positionPadding("padBottom", e.currentTarget.value);
+        })
+
+        document.getElementById("settings_play").addEventListener("click", e => {
+            this.spinePlayer.play();
+            e.currentTarget.disabled = true;
+            document.getElementById("settings_pause").disabled = false;
+        })
+        document.getElementById("settings_pause").addEventListener("click", e => {
+            this.spinePlayer.pause();
+            e.currentTarget.disabled = true;
+            document.getElementById("settings_play").disabled = false;
+        })
+        document.getElementById("settings_reset").addEventListener("click", e => {
+            _this.reset();
+        })
+        document.getElementById("settings_reset").addEventListener("click", e => {
+            _this.close();
+        })
+    };
+    Settings.prototype._getPercentage = function (value) {
+        return parseInt(value.replace("%", ""));
+    };
+    return Settings;
+}());

template/assets/spine-player.js

@@ -11188,13 +11188,13 @@ var spine;
 		SpinePlayer.prototype.play = function () {
 			var _this = this;
 			this.paused = false;
-			var remove = function () {
+			// var remove = function () {
-				if (!_this.paused)
+			// 	if (!_this.paused)
-					_this.playerControls.classList.add("spine-player-controls-hidden");
+			// 		_this.playerControls.classList.add("spine-player-controls-hidden");
-			};
+			// };
-			this.cancelId = setTimeout(remove, 1000);
+			// this.cancelId = setTimeout(remove, 1000);
-			this.playButton.classList.remove("spine-player-button-icon-play");
+			// this.playButton.classList.remove("spine-player-button-icon-play");
-			this.playButton.classList.add("spine-player-button-icon-pause");
+			// this.playButton.classList.add("spine-player-button-icon-pause");
 			if (this.config.animation) {
 				if (!this.animationState.getCurrent(0)) {
 					this.setAnimation(this.config.animation);
@@ -11203,10 +11203,10 @@ var spine;
 		};
 		SpinePlayer.prototype.pause = function () {
 			this.paused = true;
-			this.playerControls.classList.remove("spine-player-controls-hidden");
+			// this.playerControls.classList.remove("spine-player-controls-hidden");
 			clearTimeout(this.cancelId);
-			this.playButton.classList.remove("spine-player-button-icon-pause");
+			// this.playButton.classList.remove("spine-player-button-icon-pause");
-			this.playButton.classList.add("spine-player-button-icon-play");
+			// this.playButton.classList.add("spine-player-button-icon-play");
 		};
 		SpinePlayer.prototype.setAnimation = function (animation) {
 			this.previousViewport = this.currentViewport;

template/assets/style.css

@@ -40,4 +40,13 @@ body {
     background-image: url("../operator/fallback.png");
     width: 100%;
     height: 100%;
+}
+
+.website-settings {
+    position: fixed;
+    left: 0;
+    top: 0;
+    background-color: white;
+    user-select: auto;
+    z-index: 999;
 }

template/index.html

@@ -12,7 +12,7 @@
     </head>
 
     <body>
-        <div id="dev" style="position: fixed;left: 0;left: 0;background-color: white;"></div>
+        <div id="dev" style="position: fixed;left: 0;top: 0;background-color: white;"></div>
         <image src="./operator/operator_logo.png" class="logo" id="logo" alt="operator logo" />
         <div id="widget-wrapper" style="width: 100%; height: 100%;">
             <div id="container" style="width: 100%; height: 100%;"></div>
@@ -20,8 +20,9 @@
     </body>
 
     <script type="text/javascript" src="./assets/spine-player.js?v={version}"></script>
-    <script type="text/javascript" src="./operator/operator.js?v={version}"></script>
+    <script type="text/javascript" src="./operator/operator_assets.js?v={version}"></script>
-    <script type="text/javascript" src="./operator/settings.js?v={version}"></script>
+    <script type="text/javascript" src="./operator/operator_settings.js?v={version}"></script>
+    <script type="text/javascript" src="./assets/settings.js?v={version}"></script>
     <script type="text/javascript" src="./assets/runner.js?v={version}"></script>
 
 </html>