├── Build └── maximus-ingamepanels-custom │ ├── InGamePanels │ └── maximus-ingamepanels-custom.spb │ ├── html_ui │ ├── InGamePanels │ │ └── CustomPanel │ │ │ ├── CustomPanel.css │ │ │ ├── CustomPanel.html │ │ │ └── CustomPanel.js │ └── Textures │ │ └── Menu │ │ └── toolbar │ │ └── ICON_TOOLBAR_MAXIMUS_CUSTOM_PANEL.svg │ ├── layout.json │ └── manifest.json ├── README.md ├── Screenshots ├── Example1-NoWebContent.png ├── Example2-WebContent-Zoom-Far.png ├── Example2-WebContent-Zoom-Near.png ├── Example2-WebContent-Zoom-Near2.png ├── Example2-WebContent-Zoom-Near3.png ├── Original-VFR-HTML-Day.png ├── Original-VFR-HTML-Nav.png └── Original-VFR-HTML-Night.png ├── build.bat ├── example.png ├── example2.png └── maximus-ingamepanels-custom ├── Build ├── PackageDefinitions │ └── maximus-ingamepanels-custom.xml ├── PackageSources │ └── maximus-ingamepanels-custom.xml ├── icon.png └── maximus-ingamepanels-custom.xml ├── InGamePanels └── maximus-ingamepanels-custom.spb ├── html_ui ├── InGamePanels │ └── CustomPanel │ │ ├── CustomPanel.css │ │ ├── CustomPanel.html │ │ └── CustomPanel.js └── Textures │ └── Menu │ └── toolbar │ └── ICON_TOOLBAR_MAXIMUS_CUSTOM_PANEL.svg ├── layout.json └── manifest.json /Build/maximus-ingamepanels-custom/InGamePanels/maximus-ingamepanels-custom.spb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sciontc1/MSFS2020-WebView-Panel/760eb77467625c1ef2298ccda8ad303f80019df4/Build/maximus-ingamepanels-custom/InGamePanels/maximus-ingamepanels-custom.spb -------------------------------------------------------------------------------- /Build/maximus-ingamepanels-custom/html_ui/InGamePanels/CustomPanel/CustomPanel.css: -------------------------------------------------------------------------------- 1 | /** This mixin makes a single line element fit exactly on the Roboto font for easier integration. */ 2 | ingame-ui#CustomPanel { 3 | display:flex; 4 | flex-direction:column; 5 | align-items:center; 6 | justify-content: center; 7 | height:100% !important; 8 | width: 100% !important; 9 | /*border: 2px solid blue !important;*/ 10 | } 11 | ingame-ui#CustomPanel #CustomPanelWrap { 12 | display: flex; 13 | flex-direction: column; 14 | width: 100% !important; 15 | height: 100% !important; 16 | /*border: 2px solid red !important;*/ 17 | min-height: 0; 18 | min-width: 0; 19 | overflow:hidden; 20 | align-items: stretch !important; 21 | flex: 1 1 auto !important; 22 | } 23 | ingame-ui#CustomPanel #CustomPanelWrap #CustomPanelIframe { 24 | flex: 1 1 auto !important; 25 | border: 0; 26 | } 27 | ingame-ui#CustomPanel #MainDisplay.hidden { 28 | display: none; 29 | } 30 | ingame-ui#CustomPanel #Footer.hidden { 31 | display: none; 32 | } 33 | ingame-ui#CustomPanel .ingameUiContent { 34 | /*border: 2px solid green !important;*/ 35 | display: flex !important; 36 | flex-direction: column !important; 37 | width: 100% !important; 38 | height: 100% !important; 39 | min-height: 0 !important; 40 | min-width: 0 !important; 41 | overflow:hidden !important; 42 | align-items: stretch !important; 43 | flex: 1 1 auto !important; 44 | } 45 | ingame-ui#CustomPanel .ingameUiWrapper { 46 | /*border: 2px solid yellow !important;*/ 47 | display: flex !important; 48 | flex-direction: column !important; 49 | width: 100% !important; 50 | height: 100% !important; 51 | min-height: 0 !important; 52 | min-width: 0 !important; 53 | overflow:hidden !important; 54 | align-items: stretch !important; 55 | flex: 1 1 auto !important; 56 | } 57 | -------------------------------------------------------------------------------- /Build/maximus-ingamepanels-custom/html_ui/InGamePanels/CustomPanel/CustomPanel.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
32 |
33 | header 34 |
35 | 38 |
39 |
40 | 41 | -------------------------------------------------------------------------------- /Build/maximus-ingamepanels-custom/html_ui/InGamePanels/CustomPanel/CustomPanel.js: -------------------------------------------------------------------------------- 1 | class IngamePanelCustomPanel extends TemplateElement { 2 | constructor() { 3 | super(...arguments); 4 | 5 | this.panelActive = false; 6 | this.started = false; 7 | this.ingameUi = null; 8 | this.busy = false; 9 | this.debugEnabled = false; 10 | 11 | if (this.debugEnabled) { 12 | var self = this; 13 | setTimeout(() => { 14 | self.isDebugEnabled(); 15 | }, 1000); 16 | } else { 17 | this.initialize(); 18 | } 19 | } 20 | isDebugEnabled() { 21 | var self = this; 22 | if (typeof g_modDebugMgr != "undefined") { 23 | g_modDebugMgr.AddConsole(null); 24 | g_modDebugMgr.AddDebugButton("Identifier", function() { 25 | console.log('Identifier'); 26 | console.log(self.instrumentIdentifier); 27 | }); 28 | g_modDebugMgr.AddDebugButton("TemplateID", function() { 29 | console.log('TemplateID'); 30 | console.log(self.templateID); 31 | }); 32 | g_modDebugMgr.AddDebugButton("Source", function() { 33 | console.log('Source'); 34 | console.log(window.document.documentElement.outerHTML); 35 | }); 36 | g_modDebugMgr.AddDebugButton("close", function() { 37 | console.log('close'); 38 | if (self.ingameUi) { 39 | console.log('ingameUi'); 40 | self.ingameUi.closePanel(); 41 | } 42 | }); 43 | this.initialize(); 44 | } else { 45 | Include.addScript("/JS/debug.js", function () { 46 | if (typeof g_modDebugMgr != "undefined") { 47 | g_modDebugMgr.AddConsole(null); 48 | g_modDebugMgr.AddDebugButton("Identifier", function() { 49 | console.log('Identifier'); 50 | console.log(self.instrumentIdentifier); 51 | }); 52 | g_modDebugMgr.AddDebugButton("TemplateID", function() { 53 | console.log('TemplateID'); 54 | console.log(self.templateID); 55 | }); 56 | g_modDebugMgr.AddDebugButton("Source", function() { 57 | console.log('Source'); 58 | console.log(window.document.documentElement.outerHTML); 59 | }); 60 | g_modDebugMgr.AddDebugButton("close", function() { 61 | console.log('close'); 62 | if (self.ingameUi) { 63 | console.log('ingameUi'); 64 | self.ingameUi.closePanel(); 65 | } 66 | }); 67 | self.initialize(); 68 | } else { 69 | setTimeout(() => { 70 | self.isDebugEnabled(); 71 | }, 2000); 72 | } 73 | }); 74 | } 75 | } 76 | connectedCallback() { 77 | super.connectedCallback(); 78 | 79 | var self = this; 80 | this.ingameUi = this.querySelector('ingame-ui'); 81 | 82 | this.iframeElement = document.getElementById("CustomPanelIframe"); 83 | 84 | this.m_MainDisplay = document.querySelector("#MainDisplay"); 85 | this.m_MainDisplay.classList.add("hidden"); 86 | 87 | this.m_Footer = document.querySelector("#Footer"); 88 | this.m_Footer.classList.add("hidden"); 89 | 90 | if (this.ingameUi) { 91 | this.ingameUi.addEventListener("panelActive", (e) => { 92 | console.log('panelActive'); 93 | self.panelActive = true; 94 | if (self.iframeElement) { 95 | self.iframeElement.src = 'http://localhost:9000'; 96 | } 97 | }); 98 | this.ingameUi.addEventListener("panelInactive", (e) => { 99 | console.log('panelInactive'); 100 | self.panelActive = false; 101 | if (self.iframeElement) { 102 | self.iframeElement.src = ''; 103 | } 104 | }); 105 | this.ingameUi.addEventListener("onResizeElement", () => { 106 | //self.updateImage(); 107 | }); 108 | this.ingameUi.addEventListener("dblclick", () => { 109 | if (self.m_Footer) { 110 | self.m_Footer.classList.remove("hidden"); 111 | } 112 | }); 113 | } 114 | } 115 | initialize() { 116 | if (this.started) { 117 | return; 118 | } 119 | 120 | //var self = this; 121 | //this.m_MainDisplay = document.querySelector("#MainDisplay"); 122 | //this.m_MainDisplay.classList.add("hidden"); 123 | 124 | //this.m_Footer = document.querySelector("#Footer"); 125 | //this.m_Footer.classList.add("hidden"); 126 | 127 | //this.iframeElement = document.getElementById("CustomPanelIframe"); 128 | //this.ingameUi = this.querySelector('ingame-ui'); 129 | 130 | /*if (this.ingameUi) { 131 | this.ingameUi.addEventListener("panelActive", (e) => { 132 | console.log('panelActive'); 133 | self.updateImage(); 134 | }); 135 | this.ingameUi.addEventListener("panelInactive", (e) => { 136 | console.log('panelInactive'); 137 | self.iframeElement.src = ''; 138 | }); 139 | this.ingameUi.addEventListener("onResizeElement", () => { 140 | //self.updateImage(); 141 | }); 142 | this.ingameUi.addEventListener("dblclick", () => { 143 | if (self.m_Footer) { 144 | self.m_Footer.classList.remove("hidden"); 145 | } 146 | }); 147 | }*/ 148 | this.started = true; 149 | } 150 | disconnectedCallback() { 151 | super.disconnectedCallback(); 152 | } 153 | updateImage() { 154 | 155 | } 156 | } 157 | window.customElements.define("ingamepanel-custom", IngamePanelCustomPanel); 158 | checkAutoload(); -------------------------------------------------------------------------------- /Build/maximus-ingamepanels-custom/html_ui/Textures/Menu/toolbar/ICON_TOOLBAR_MAXIMUS_CUSTOM_PANEL.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 16 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /Build/maximus-ingamepanels-custom/layout.json: -------------------------------------------------------------------------------- 1 | { 2 | "content": [ 3 | { 4 | "path": "html_ui/InGamePanels/CustomPanel/CustomPanel.css", 5 | "size": 1009, 6 | "date": 132441482909180874 7 | }, 8 | { 9 | "path": "html_ui/InGamePanels/CustomPanel/CustomPanel.html", 10 | "size": 3119, 11 | "date": 132440507097241168 12 | }, 13 | { 14 | "path": "html_ui/InGamePanels/CustomPanel/CustomPanel.js", 15 | "size": 5517, 16 | "date": 132442481411972180 17 | }, 18 | { 19 | "path": "html_ui/Textures/Menu/toolbar/ICON_TOOLBAR_MAXIMUS_CUSTOM_PANEL.svg", 20 | "size": 702, 21 | "date": 132401952992678246 22 | }, 23 | { 24 | "path": "InGamePanels/maximus-ingamepanels-custom.spb", 25 | "size": 806, 26 | "date": 132453435271410222 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /Build/maximus-ingamepanels-custom/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": [ 3 | { 4 | "name": "fs-base-propdefs", 5 | "package_version": "0.1.2" 6 | }, 7 | { 8 | "name": "fs-base-ui", 9 | "package_version": "0.1.10" 10 | }, 11 | { 12 | "name": "asobo-vcockpits-core", 13 | "package_version": "0.1.12" 14 | } 15 | ], 16 | "content_type": "", 17 | "title": "Custom In-Game Panel", 18 | "manufacturer": "Maximus", 19 | "creator": "Maximus", 20 | "package_version": "2.0.0", 21 | "minimum_game_version": "1.8.3", 22 | "release_notes": { 23 | "neutral": { 24 | "LastUpdate": "", 25 | "OlderHistory": "" 26 | } 27 | }, 28 | "total_package_size": "00000000000000014353" 29 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # About: MSFS2020-WebView-Panel 2 | This repo itself is a template to be used along side other applications/mods. Its implemented with the intentions of further improvement however is preconfigured and functional with some mods "as is". 3 | 4 | This allows mods which run on a local server and output/display in a web browser to be displayed directly in game. Currently preconfigured to - "http://localhost:9000" 5 | 6 | Created using the initial template provided by Maximus: https://github.com/bymaximus/msfs2020-toolbar-window-template Many thanks for their's and others work on the source. Currently most of the core files are still the original source from Maximus, however as this develops it may stray further away. 7 | 8 | I'm considering creating a companion file to configure/modify the key elements/files required to generate the package file to allow others to create their own and make changes easier if its just to adjust the URL - in future the panel will ideally not be called "CustomPanel" but a relevant title for your use. 9 | 10 | # Customising / Changing / Configuring 11 | Change: CTRL+F and locate the following text or below element and change the "http://localhost:9000" URL to your specified site/URL/Port 12 | 13 | `self.iframeElement.src` 14 | 15 | Append URL in file located at following path to suit: 16 | 17 | `msfs2020-toolbar-window-template-master\maximus-ingamepanels-custom\html_ui\InGamePanels\CustomPanel\CustomPanel.js` 18 | 19 | 20 | # Generating package 21 | To Re-build the SPB if you have changed the URL or other settings/content and used this as a template 22 | 23 | run `build.bat` which will build the .spb package and create the required folder structure inside the "Build" directory 24 | 25 | # Installing 26 | 27 | 1. Download the .zip or release from this repo if available. - https://github.com/sciontc1/MSFS2020-WebView-Panel/archive/refs/heads/master.zip 28 | 29 | 2. Extract "MSFS2020-WebView-Panel-master.zip" 30 | 31 | 3. Copy the folder/package "maximus-ingamepanels-custom" from inside the "Build" folder to your community folder 32 | 33 | Ensure you close and restart MSFS2020 to allow it to "install" the mod, which can be checked by viewing the content manager from within your profile in the main menu of the sim. 34 | 35 | 36 | # Addon mods: 37 | 38 | This fork was initially to allow the use of other mods as a default value instead of the original URL Maximus had included to make it more of a template ready to go with some mods as is, such as: 39 | 40 | * Lians MSFS2020 Google map VFR mod. : https://github.com/lian/msfs2020-go/releases - custom HTML to resize the font to my preferences can be seen in the screenshots of this repo 41 | 42 | * HankHank10's MSFS2020 Cockpit companion (requires changing URL to "localhost:5000" and rebuilding SPB package via running build.bat) : https://github.com/hankhank10/MSFS2020-cockpit-companion/releases/tag/0.1 43 | 44 | Will update with more as and when possible 45 | -------------------------------------------------------------------------------- /Screenshots/Example1-NoWebContent.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sciontc1/MSFS2020-WebView-Panel/760eb77467625c1ef2298ccda8ad303f80019df4/Screenshots/Example1-NoWebContent.png -------------------------------------------------------------------------------- /Screenshots/Example2-WebContent-Zoom-Far.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sciontc1/MSFS2020-WebView-Panel/760eb77467625c1ef2298ccda8ad303f80019df4/Screenshots/Example2-WebContent-Zoom-Far.png -------------------------------------------------------------------------------- /Screenshots/Example2-WebContent-Zoom-Near.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sciontc1/MSFS2020-WebView-Panel/760eb77467625c1ef2298ccda8ad303f80019df4/Screenshots/Example2-WebContent-Zoom-Near.png -------------------------------------------------------------------------------- /Screenshots/Example2-WebContent-Zoom-Near2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sciontc1/MSFS2020-WebView-Panel/760eb77467625c1ef2298ccda8ad303f80019df4/Screenshots/Example2-WebContent-Zoom-Near2.png -------------------------------------------------------------------------------- /Screenshots/Example2-WebContent-Zoom-Near3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sciontc1/MSFS2020-WebView-Panel/760eb77467625c1ef2298ccda8ad303f80019df4/Screenshots/Example2-WebContent-Zoom-Near3.png -------------------------------------------------------------------------------- /Screenshots/Original-VFR-HTML-Day.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sciontc1/MSFS2020-WebView-Panel/760eb77467625c1ef2298ccda8ad303f80019df4/Screenshots/Original-VFR-HTML-Day.png -------------------------------------------------------------------------------- /Screenshots/Original-VFR-HTML-Nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sciontc1/MSFS2020-WebView-Panel/760eb77467625c1ef2298ccda8ad303f80019df4/Screenshots/Original-VFR-HTML-Nav.png -------------------------------------------------------------------------------- /Screenshots/Original-VFR-HTML-Night.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sciontc1/MSFS2020-WebView-Panel/760eb77467625c1ef2298ccda8ad303f80019df4/Screenshots/Original-VFR-HTML-Night.png -------------------------------------------------------------------------------- /build.bat: -------------------------------------------------------------------------------- 1 | "%MSFS_SDK%\Tools\bin\fspackagetool.exe" "maximus-ingamepanels-custom\Build\maximus-ingamepanels-custom.xml" -nomirroring 2 | copy /Y "maximus-ingamepanels-custom\Build\Packages\maximus-ingamepanels-custom\Build\maximus-ingamepanels-custom.spb" "maximus-ingamepanels-custom\InGamePanels" 3 | RMDIR "Build\*.*" /S /Q 4 | TIMEOUT /T 3 5 | xcopy /e /v "maximus-ingamepanels-custom" "Build\maximus-ingamepanels-custom\" /y /s 6 | TIMEOUT /T 3 7 | RMDIR "Build\maximus-ingamepanels-custom\Build" /S /Q 8 | -------------------------------------------------------------------------------- /example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sciontc1/MSFS2020-WebView-Panel/760eb77467625c1ef2298ccda8ad303f80019df4/example.png -------------------------------------------------------------------------------- /example2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sciontc1/MSFS2020-WebView-Panel/760eb77467625c1ef2298ccda8ad303f80019df4/example2.png -------------------------------------------------------------------------------- /maximus-ingamepanels-custom/Build/PackageDefinitions/maximus-ingamepanels-custom.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | SPB 4 | maximus-ingamepanels-custom 5 | Maximus 6 | Maximus 7 | 8 | 9 | false 10 | false 11 | 12 | 13 | 14 | SPB 15 | 16 | false 17 | 18 | PackageSources\ 19 | Build\ 20 | 21 | 22 | -------------------------------------------------------------------------------- /maximus-ingamepanels-custom/Build/PackageSources/maximus-ingamepanels-custom.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | InGamePanel_CustomPanel.spb 4 | 5 | 6 | -------------------------------------------------------------------------------- /maximus-ingamepanels-custom/Build/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sciontc1/MSFS2020-WebView-Panel/760eb77467625c1ef2298ccda8ad303f80019df4/maximus-ingamepanels-custom/Build/icon.png -------------------------------------------------------------------------------- /maximus-ingamepanels-custom/Build/maximus-ingamepanels-custom.xml: -------------------------------------------------------------------------------- 1 | 2 | . 3 | _Temp 4 | 5 | PackageDefinitions\maximus-ingamepanels-custom.xml 6 | 7 | -------------------------------------------------------------------------------- /maximus-ingamepanels-custom/InGamePanels/maximus-ingamepanels-custom.spb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sciontc1/MSFS2020-WebView-Panel/760eb77467625c1ef2298ccda8ad303f80019df4/maximus-ingamepanels-custom/InGamePanels/maximus-ingamepanels-custom.spb -------------------------------------------------------------------------------- /maximus-ingamepanels-custom/html_ui/InGamePanels/CustomPanel/CustomPanel.css: -------------------------------------------------------------------------------- 1 | /** This mixin makes a single line element fit exactly on the Roboto font for easier integration. */ 2 | ingame-ui#CustomPanel { 3 | display:flex; 4 | flex-direction:column; 5 | align-items:center; 6 | justify-content: center; 7 | height:100% !important; 8 | width: 100% !important; 9 | /*border: 2px solid blue !important;*/ 10 | } 11 | ingame-ui#CustomPanel #CustomPanelWrap { 12 | display: flex; 13 | flex-direction: column; 14 | width: 100% !important; 15 | height: 100% !important; 16 | /*border: 2px solid red !important;*/ 17 | min-height: 0; 18 | min-width: 0; 19 | overflow:hidden; 20 | align-items: stretch !important; 21 | flex: 1 1 auto !important; 22 | } 23 | ingame-ui#CustomPanel #CustomPanelWrap #CustomPanelIframe { 24 | flex: 1 1 auto !important; 25 | border: 0; 26 | } 27 | ingame-ui#CustomPanel #MainDisplay.hidden { 28 | display: none; 29 | } 30 | ingame-ui#CustomPanel #Footer.hidden { 31 | display: none; 32 | } 33 | ingame-ui#CustomPanel .ingameUiContent { 34 | /*border: 2px solid green !important;*/ 35 | display: flex !important; 36 | flex-direction: column !important; 37 | width: 100% !important; 38 | height: 100% !important; 39 | min-height: 0 !important; 40 | min-width: 0 !important; 41 | overflow:hidden !important; 42 | align-items: stretch !important; 43 | flex: 1 1 auto !important; 44 | } 45 | ingame-ui#CustomPanel .ingameUiWrapper { 46 | /*border: 2px solid yellow !important;*/ 47 | display: flex !important; 48 | flex-direction: column !important; 49 | width: 100% !important; 50 | height: 100% !important; 51 | min-height: 0 !important; 52 | min-width: 0 !important; 53 | overflow:hidden !important; 54 | align-items: stretch !important; 55 | flex: 1 1 auto !important; 56 | } 57 | -------------------------------------------------------------------------------- /maximus-ingamepanels-custom/html_ui/InGamePanels/CustomPanel/CustomPanel.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
32 |
33 | header 34 |
35 | 38 |
39 |
40 | 41 | -------------------------------------------------------------------------------- /maximus-ingamepanels-custom/html_ui/InGamePanels/CustomPanel/CustomPanel.js: -------------------------------------------------------------------------------- 1 | class IngamePanelCustomPanel extends TemplateElement { 2 | constructor() { 3 | super(...arguments); 4 | 5 | this.panelActive = false; 6 | this.started = false; 7 | this.ingameUi = null; 8 | this.busy = false; 9 | this.debugEnabled = false; 10 | 11 | if (this.debugEnabled) { 12 | var self = this; 13 | setTimeout(() => { 14 | self.isDebugEnabled(); 15 | }, 1000); 16 | } else { 17 | this.initialize(); 18 | } 19 | } 20 | isDebugEnabled() { 21 | var self = this; 22 | if (typeof g_modDebugMgr != "undefined") { 23 | g_modDebugMgr.AddConsole(null); 24 | g_modDebugMgr.AddDebugButton("Identifier", function() { 25 | console.log('Identifier'); 26 | console.log(self.instrumentIdentifier); 27 | }); 28 | g_modDebugMgr.AddDebugButton("TemplateID", function() { 29 | console.log('TemplateID'); 30 | console.log(self.templateID); 31 | }); 32 | g_modDebugMgr.AddDebugButton("Source", function() { 33 | console.log('Source'); 34 | console.log(window.document.documentElement.outerHTML); 35 | }); 36 | g_modDebugMgr.AddDebugButton("close", function() { 37 | console.log('close'); 38 | if (self.ingameUi) { 39 | console.log('ingameUi'); 40 | self.ingameUi.closePanel(); 41 | } 42 | }); 43 | this.initialize(); 44 | } else { 45 | Include.addScript("/JS/debug.js", function () { 46 | if (typeof g_modDebugMgr != "undefined") { 47 | g_modDebugMgr.AddConsole(null); 48 | g_modDebugMgr.AddDebugButton("Identifier", function() { 49 | console.log('Identifier'); 50 | console.log(self.instrumentIdentifier); 51 | }); 52 | g_modDebugMgr.AddDebugButton("TemplateID", function() { 53 | console.log('TemplateID'); 54 | console.log(self.templateID); 55 | }); 56 | g_modDebugMgr.AddDebugButton("Source", function() { 57 | console.log('Source'); 58 | console.log(window.document.documentElement.outerHTML); 59 | }); 60 | g_modDebugMgr.AddDebugButton("close", function() { 61 | console.log('close'); 62 | if (self.ingameUi) { 63 | console.log('ingameUi'); 64 | self.ingameUi.closePanel(); 65 | } 66 | }); 67 | self.initialize(); 68 | } else { 69 | setTimeout(() => { 70 | self.isDebugEnabled(); 71 | }, 2000); 72 | } 73 | }); 74 | } 75 | } 76 | connectedCallback() { 77 | super.connectedCallback(); 78 | 79 | var self = this; 80 | this.ingameUi = this.querySelector('ingame-ui'); 81 | 82 | this.iframeElement = document.getElementById("CustomPanelIframe"); 83 | 84 | this.m_MainDisplay = document.querySelector("#MainDisplay"); 85 | this.m_MainDisplay.classList.add("hidden"); 86 | 87 | this.m_Footer = document.querySelector("#Footer"); 88 | this.m_Footer.classList.add("hidden"); 89 | 90 | if (this.ingameUi) { 91 | this.ingameUi.addEventListener("panelActive", (e) => { 92 | console.log('panelActive'); 93 | self.panelActive = true; 94 | if (self.iframeElement) { 95 | self.iframeElement.src = 'http://localhost:9000'; 96 | } 97 | }); 98 | this.ingameUi.addEventListener("panelInactive", (e) => { 99 | console.log('panelInactive'); 100 | self.panelActive = false; 101 | if (self.iframeElement) { 102 | self.iframeElement.src = ''; 103 | } 104 | }); 105 | this.ingameUi.addEventListener("onResizeElement", () => { 106 | //self.updateImage(); 107 | }); 108 | this.ingameUi.addEventListener("dblclick", () => { 109 | if (self.m_Footer) { 110 | self.m_Footer.classList.remove("hidden"); 111 | } 112 | }); 113 | } 114 | } 115 | initialize() { 116 | if (this.started) { 117 | return; 118 | } 119 | 120 | //var self = this; 121 | //this.m_MainDisplay = document.querySelector("#MainDisplay"); 122 | //this.m_MainDisplay.classList.add("hidden"); 123 | 124 | //this.m_Footer = document.querySelector("#Footer"); 125 | //this.m_Footer.classList.add("hidden"); 126 | 127 | //this.iframeElement = document.getElementById("CustomPanelIframe"); 128 | //this.ingameUi = this.querySelector('ingame-ui'); 129 | 130 | /*if (this.ingameUi) { 131 | this.ingameUi.addEventListener("panelActive", (e) => { 132 | console.log('panelActive'); 133 | self.updateImage(); 134 | }); 135 | this.ingameUi.addEventListener("panelInactive", (e) => { 136 | console.log('panelInactive'); 137 | self.iframeElement.src = ''; 138 | }); 139 | this.ingameUi.addEventListener("onResizeElement", () => { 140 | //self.updateImage(); 141 | }); 142 | this.ingameUi.addEventListener("dblclick", () => { 143 | if (self.m_Footer) { 144 | self.m_Footer.classList.remove("hidden"); 145 | } 146 | }); 147 | }*/ 148 | this.started = true; 149 | } 150 | disconnectedCallback() { 151 | super.disconnectedCallback(); 152 | } 153 | updateImage() { 154 | 155 | } 156 | } 157 | window.customElements.define("ingamepanel-custom", IngamePanelCustomPanel); 158 | checkAutoload(); 159 | -------------------------------------------------------------------------------- /maximus-ingamepanels-custom/html_ui/Textures/Menu/toolbar/ICON_TOOLBAR_MAXIMUS_CUSTOM_PANEL.svg: -------------------------------------------------------------------------------- 1 | 2 | ICON_TOOLBAR_MAXIMUS_CUSTOM_PANEL 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /maximus-ingamepanels-custom/layout.json: -------------------------------------------------------------------------------- 1 | { 2 | "content": [ 3 | { 4 | "path": "html_ui/InGamePanels/CustomPanel/CustomPanel.css", 5 | "size": 1009, 6 | "date": 132441482909180874 7 | }, 8 | { 9 | "path": "html_ui/InGamePanels/CustomPanel/CustomPanel.html", 10 | "size": 3119, 11 | "date": 132440507097241168 12 | }, 13 | { 14 | "path": "html_ui/InGamePanels/CustomPanel/CustomPanel.js", 15 | "size": 5517, 16 | "date": 132442481411972180 17 | }, 18 | { 19 | "path": "html_ui/Textures/Menu/toolbar/ICON_TOOLBAR_MAXIMUS_CUSTOM_PANEL.svg", 20 | "size": 702, 21 | "date": 132401952992678246 22 | }, 23 | { 24 | "path": "InGamePanels/maximus-ingamepanels-custom.spb", 25 | "size": 806, 26 | "date": 132453435271410222 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /maximus-ingamepanels-custom/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": [ 3 | { 4 | "name": "fs-base-propdefs", 5 | "package_version": "0.1.2" 6 | }, 7 | { 8 | "name": "fs-base-ui", 9 | "package_version": "0.1.10" 10 | }, 11 | { 12 | "name": "asobo-vcockpits-core", 13 | "package_version": "0.1.12" 14 | } 15 | ], 16 | "content_type": "", 17 | "title": "Custom In-Game Panel", 18 | "manufacturer": "Maximus", 19 | "creator": "Maximus", 20 | "package_version": "2.0.0", 21 | "minimum_game_version": "1.8.3", 22 | "release_notes": { 23 | "neutral": { 24 | "LastUpdate": "", 25 | "OlderHistory": "" 26 | } 27 | }, 28 | "total_package_size": "00000000000000014353" 29 | } --------------------------------------------------------------------------------