Initial commit

2023-11-14 01:00:23 +01:00 · 2023-11-14 01:00:23 +01:00 · f8bc484f40
commit f8bc484f40
55 changed files with 7688 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,8 @@
+Packages
+_PackageInt
+PackageSources/js-bundle/__generated__
+PackageSources/js-bundle/.rollup.cache
+PackageSources/js-bundle/node_modules
+PackageSources/html_ui
+PackageSources/module/.vs
+PackageSources/module/MSFS
--- a/PDF-Reader.xml
+++ b/PDF-Reader.xml
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project Version="2" Name="PDF-Reader" FolderName="Packages" PublishingGroupFolderName="PublishingGroupsContent" MetadataFolderName="PackagesMetadata" PublishingGroupMetadataFolderName="PublishingGroupsMetadata">
+	<OutputDirectory>.</OutputDirectory>
+	<TemporaryOutputDirectory>_PackageInt</TemporaryOutputDirectory>
+	<PublishingGroupTemporaryOutputDirectory>_PublishingGroupInt</PublishingGroupTemporaryOutputDirectory>
+	<Packages>
+		<Package>PackageDefinitions\khofmann-pdf-reader.xml</Package>
+	</Packages>
+	<PublishingGroups/>
+</Project>
+
--- a/PackageDefinitions/khofmann-pdf-reader.xml
+++ b/PackageDefinitions/khofmann-pdf-reader.xml
@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<AssetPackage Version="0.1.0">
+	<ItemSettings>
+		<ContentType>MISC</ContentType>
+		<Title>PDF-Reader</Title>
+		<Manufacturer>khofmann</Manufacturer>
+		<Creator>khofmann</Creator>
+	</ItemSettings>
+	<Flags>
+		<VisibleInStore>false</VisibleInStore>
+		<CanBeReferenced>false</CanBeReferenced>
+	</Flags>
+	<AssetGroups>
+		<AssetGroup Name="ContentInfo">
+			<Type>ContentInfo</Type>
+			<Flags>
+				<FSXCompatibility>false</FSXCompatibility>
+			</Flags>
+			<AssetDir>PackageDefinitions\khofmann-pdf-reader\ContentInfo\</AssetDir>
+			<OutputDir>ContentInfo\khofmann-pdf-reader\</OutputDir>
+		</AssetGroup>
+		<AssetGroup Name="html-ui">
+			<Type>Copy</Type>
+			<Flags>
+				<FSXCompatibility>false</FSXCompatibility>
+			</Flags>
+			<AssetDir>PackageSources\html_ui\</AssetDir>
+			<OutputDir>html_ui\</OutputDir>
+		</AssetGroup>
+		<AssetGroup Name="module">
+			<Type>Copy</Type>
+			<Flags>
+				<FSXCompatibility>false</FSXCompatibility>
+			</Flags>
+			<AssetDir>PackageSources\module\MSFS\</AssetDir>
+			<OutputDir>modules\</OutputDir>
+			<Config>
+				<Include>PDF-Reader-Debug.wasm</Include>
+			</Config>
+		</AssetGroup>
+		<AssetGroup Name="pdf-reader-panel">
+			<Type>SPB</Type>
+			<Flags>
+				<FSXCompatibility>false</FSXCompatibility>
+			</Flags>
+			<AssetDir>PackageSources\pdf-reader-panel\</AssetDir>
+			<OutputDir>InGamePanels\</OutputDir>
+		</AssetGroup>
+	</AssetGroups>
+</AssetPackage>
+
--- a/PackageDefinitions/khofmann-pdf-reader/ContentInfo/thumbnail.jpg
+++ b/PackageDefinitions/khofmann-pdf-reader/ContentInfo/thumbnail.jpg
--- a/PackageSources/js-bundle/.eslintrc.cjs
+++ b/PackageSources/js-bundle/.eslintrc.cjs
@ -0,0 +1,29 @@
+module.exports = {
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+      },
+    },
+    react: {
+      version: 'detect',
+    },
+  },
+  root: true,
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/errors',
+    'plugin:import/typescript',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  rules: {
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/prop-types': 'off',
+    '@typescript-eslint/no-shadow': 'error',
+  },
+};
--- a/PackageSources/js-bundle/.npmrc
+++ b/PackageSources/js-bundle/.npmrc
@ -0,0 +1 @@
+engine-strict = true
--- a/PackageSources/js-bundle/.nvmrc
+++ b/PackageSources/js-bundle/.nvmrc
@ -0,0 +1 @@
+v18
--- a/PackageSources/js-bundle/.prettierrc.cjs
+++ b/PackageSources/js-bundle/.prettierrc.cjs
@ -0,0 +1,9 @@
+module.exports = {
+  printWidth: 120,
+  tabWidth: 2,
+  semi: true,
+  trailingComma: 'es5',
+  singleQuote: true,
+  arrowParens: 'always',
+  plugins: ['prettier-plugin-organize-imports'],
+};
--- a/PackageSources/js-bundle/.rollup.cache/C/Users/llego/Documents/MyFSProjects/PDF-Reader/PackageSources/html_ui/InGamePanels/pdf-reader-panel/tsconfig.tsbuildinfo
+++ b/PackageSources/js-bundle/.rollup.cache/C/Users/llego/Documents/MyFSProjects/PDF-Reader/PackageSources/html_ui/InGamePanels/pdf-reader-panel/tsconfig.tsbuildinfo
--- a/PackageSources/js-bundle/.vscode/settings.json
+++ b/PackageSources/js-bundle/.vscode/settings.json
@ -0,0 +1,22 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "search.exclude": {
+    "**/node_modules": true,
+    "yarn.lock": true,
+    "package.json": true,
+    "tsconfig.json": true,
+    ".*": true
+  },
+  "[xml]": {
+    "editor.defaultFormatter": "redhat.vscode-xml"
+  }
+}
--- a/PackageSources/js-bundle/index.d.ts
+++ b/PackageSources/js-bundle/index.d.ts
@ -0,0 +1,6 @@
+/// <reference types="@microsoft/msfs-types/js/common.d.ts" />
+/// <reference types="@microsoft/msfs-types/pages/vcockpit/instruments/shared/baseinstrument.d.ts" />
+/// <reference types="@microsoft/msfs-types/js/datastorage.d.ts" />
+/// <reference types="@microsoft/msfs-types/js/buttons.d.ts" />
+/// <reference types="@microsoft/msfs-types/js/services/toolbarpanels.d.ts" />
+/// <reference types="@microsoft/msfs-types/js/simvar.d.ts" />
--- a/PackageSources/js-bundle/package.json
+++ b/PackageSources/js-bundle/package.json
@ -0,0 +1,70 @@
+{
+  "name": "pdf-reader",
+  "version": "1.0.2",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "types": "rimraf __generated__ && typed-scss-modules ./src --nameFormat none --exportType default --outputFolder __generated__",
+    "lint": "eslint ./src",
+    "licenses": "license-report --output=markdown > ./src/assets/licenses_node.md",
+    "debugger": "cd \"%MSFS_SDK%\\Tools\\CoherentGT Debugger\" && Debugger.exe",
+    "locale": "cd \"%MSFS_SDK%\\Tools\\MSFS_Localization\" && MSFSLocalizationManager.exe",
+    "dev": "npx rollup -c -w",
+    "clean": "rimraf ../html_ui/InGamePanels/pdf-reader-panel/ && rimraf .rollup.cache",
+    "build": "npm version patch && npx rollup -c",
+    "release": "yarn types && yarn lint && yarn run licenses && yarn clean && cross-env NODE_ENV=production npx rollup -c"
+  },
+  "engines": {
+    "npm": "USE YARN",
+    "yarn": ">=1.22.5",
+    "node": ">=18"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@microsoft/msfs-types": "^1.14.6",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-typescript": "^11.1.1",
+    "@types/react": "^18.2.8",
+    "@types/react-dom": "^18.2.4",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "autoprefixer": "^10.4.14",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.42.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "license-report": "^6.5.0",
+    "node-sass": "^9.0.0",
+    "postcss": "^8.4.24",
+    "prettier": "^3.0.3",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "rimraf": "^5.0.1",
+    "rollup": "^4.3.1",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-react-svg": "^3.0.3",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-version-injector": "^1.3.3",
+    "svg-slim": "^2.0.5",
+    "tslib": "^2.5.3",
+    "typed-scss-modules": "^7.1.0",
+    "typescript": "5.2.2",
+    "yarn": "^1.22.19"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.17",
+    "postcss-import": "^15.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}
--- a/PackageSources/js-bundle/pdf-reader.code-workspace
+++ b/PackageSources/js-bundle/pdf-reader.code-workspace
@ -0,0 +1,27 @@
+{
+  "folders": [{
+    "path": "."
+  }],
+  "settings": {
+    "typescript.tsdk": "node_modules\\typescript\\lib",
+    "typescript.enablePromptUseWorkspaceTsdk": true,
+    "cSpell.words": [
+      "AVERAGER",
+      "Clickspot",
+      "CLICKSPOTS",
+      "CLOUDCHECK",
+      "ingame",
+      "KHOFMANN",
+      "msfs",
+      "MSFS",
+      "NONSTARS",
+      "onwarn",
+      "pmdec",
+      "pmra",
+      "refrac",
+      "simobject",
+      "svgs",
+      "Topocentric"
+    ],
+  }
+}
--- a/PackageSources/js-bundle/rollup.config.js
+++ b/PackageSources/js-bundle/rollup.config.js
@ -0,0 +1,72 @@
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
+import typescript from '@rollup/plugin-typescript';
+import autoprefixer from 'autoprefixer';
+import atImport from 'postcss-import';
+import copy from 'rollup-plugin-copy';
+import postcss from 'rollup-plugin-postcss';
+import reactSvg from 'rollup-plugin-react-svg';
+import replace from 'rollup-plugin-replace';
+import versionInjector from 'rollup-plugin-version-injector';
+import svgs from 'svg-slim';
+
+const { NODE_ENV: targetEnv = 'development' } = process.env;
+const outDirBase = '../html_ui';
+const panelDirBase = `${outDirBase}/InGamePanels/pdf-reader-panel`;
+
+function svgSlim(code, id) {
+  if (!id.endsWith('.svg')) return code;
+  return svgs(code.toString(), {}).then((res) => res);
+}
+
+export default {
+  input: 'src/index.ts',
+  output: {
+    dir: panelDirBase,
+    format: 'es',
+    sourcemap: targetEnv !== 'production',
+  },
+  plugins: [
+    replace({
+      'process.env.NODE_ENV': JSON.stringify(targetEnv),
+      'import.meta.env': true,
+      'import.meta.env.MODE': JSON.stringify(targetEnv),
+    }),
+    versionInjector(),
+    postcss({
+      plugins: [autoprefixer(), atImport()],
+      extract: true,
+      use: ['sass'],
+      sourceMap: 'inline',
+      minimize: targetEnv === 'production',
+    }),
+    reactSvg(),
+    resolve(),
+    json(),
+    typescript(),
+    commonjs({
+      requireReturnsDefault: 'auto',
+    }),
+    targetEnv === 'production' && terser(),
+    copy({
+      targets: [
+        { src: ['src/assets/*', '!**/*.svg'], dest: `${panelDirBase}/assets` },
+        { src: 'src/assets/img/*', dest: `${panelDirBase}/assets/img`, transform: svgSlim },
+        { src: ['src/index.html'], dest: `${panelDirBase}` },
+        {
+          src: ['src/assets/ICON_PDF_READER.svg'],
+          dest: [`${outDirBase}/icons/toolbar`, `${outDirBase}/Textures/Menu/toolbar`],
+          transform: svgSlim,
+        },
+      ],
+    }),
+  ],
+  onwarn: function (warning, warn) {
+    if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+      return;
+    }
+    warn(warning);
+  },
+};
--- a/PackageSources/js-bundle/src/App.module.scss
+++ b/PackageSources/js-bundle/src/App.module.scss
@ -0,0 +1,9 @@
+@import 'fonts/300.css';
+@import 'fonts/400.css';
+@import 'fonts/500.css';
+@import 'fonts/700.css';
+
+.app {
+  width: 100%;
+  height: 100%;
+}
--- a/PackageSources/js-bundle/src/App.tsx
+++ b/PackageSources/js-bundle/src/App.tsx
@ -0,0 +1,25 @@
+import { FC } from 'react';
+import styles from './App.module.scss';
+import DataContextProvider from './contexts/DataContext';
+import ThemeProvider from './contexts/ThemeContext';
+import Router from './routers/Router';
+
+interface IAppProps {
+  dataListener: ViewListener.ViewListener;
+}
+
+const App: FC<IAppProps> = ({ dataListener }) => {
+  return (
+    // <StrictMode>
+    <div className={styles.app}>
+      <ThemeProvider>
+        <DataContextProvider dataListener={dataListener}>
+          <Router globals={{ dataListener: dataListener }} />
+        </DataContextProvider>
+      </ThemeProvider>
+    </div>
+    // </StrictMode>
+  );
+};
+
+export default App;
--- a/PackageSources/js-bundle/src/assets/ICON_PDF_READER.svg
+++ b/PackageSources/js-bundle/src/assets/ICON_PDF_READER.svg
@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+   sodipodi:docname="ICON_SEXTANT.svg"
+   id="svg845"
+   version="1.1"
+   viewBox="0 0 64 64">
+  <metadata
+     id="metadata851">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs849">
+    <linearGradient
+       osb:paint="solid"
+       id="linearGradient855">
+      <stop
+         id="stop853"
+         offset="0"
+         style="stop-color:#000000;stop-opacity:1;" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     inkscape:current-layer="svg845"
+     inkscape:window-maximized="1"
+     inkscape:window-y="-8"
+     inkscape:window-x="-8"
+     inkscape:cy="29.89416"
+     inkscape:cx="25.192973"
+     inkscape:zoom="9.7580736"
+     showgrid="false"
+     id="namedview847"
+     inkscape:window-height="1009"
+     inkscape:window-width="1920"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     guidetolerance="10"
+     gridtolerance="10"
+     objecttolerance="10"
+     borderopacity="1"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     inkscape:document-rotation="0" />
+  <path
+     id="path843"
+     d="m 32.313363,14.5 1.622111,0.455618 -0.563096,2.004458 c 0.432478,0.555125 0.691638,1.251691 0.691638,2.009674 -5e-4,1.136501 -0.586647,2.166934 -1.509739,2.757891 h -4.225751 l 0.134216,-0.453782 a 3.2760452,3.2760452 0 0 1 -0.95097,-2.303989 c 0,-1.613289 1.166465,-2.953094 2.701882,-3.224715 l -1.142231,4.066581 1.621855,0.455597 1.228176,-4.372131 0.391909,-1.395084 z m 2.438161,7.121022 c 1.349129,1.106874 3.130528,2.871214 4.497291,3.816458 l -0.969431,3.451577 1.450953,0.407297 c 0.02401,0.125618 0.05972,0.251114 0.111838,0.375754 l 6.454515,8.487813 c 0.734661,-0.565877 1.158724,-0.06207 1.517604,0.369341 a 26.014576,26.014576 0 0 0 3.303398,-3.459764 l 2.406987,2.35074 c -5.374043,6.611061 -13.567885,10.841735 -22.736728,10.841735 -1.320154,0 -2.619533,-0.08968 -3.893806,-0.259578 0.278039,-0.957066 0.556191,-1.914182 0.834311,-2.871166 a 2.5253653,2.5253653 0 0 0 0.178136,-0.397461 26.279703,26.279703 0 0 0 2.881393,0.15844 c 5.561506,0 10.70859,-1.743809 14.926334,-4.715368 l -2.924622,-3.846075 c -2.601568,1.803098 -5.626727,3.036468 -8.894445,3.519949 a 2.5102004,2.5102004 0 0 1 -2.421545,1.860694 2.5102004,2.5102004 0 0 1 -2.372781,-1.699271 c -0.339286,-0.0275 -0.676445,-0.0625 -1.011286,-0.105003 0.156245,-0.546601 0.313792,-1.09321 0.471349,-1.639931 0.18797,0.02146 0.376721,0.04114 0.566245,0.05669 a 2.5101033,2.5101033 0 0 1 0.296785,-0.565939 l -0.386562,-1.13693 c 0.617773,-2.125751 1.243208,-4.25071 1.868865,-6.375732 h 0.939751 l 0.65427,6.669049 a 2.5102004,2.5102004 0 0 1 1.2573,1.255032 c 2.942725,-0.450582 5.666453,-1.559982 8.016914,-3.173345 l -7.564764,-9.947771 v -2.75757 a 5.0310714,5.0310714 0 0 0 0.541879,-0.669728 z m -12.361619,0.293974 v 7.300778 h -1.659112 v -7.300778 z m 5.641858,0.65519 v 5.990378 h -3.956921 v -5.990378 z m -8.985708,0 v 5.990378 H 16.23803 v -5.990378 z m 13.478527,0.842362 v 4.305595 h -2.80803 v -4.305595 z m 8.822061,0.111385 1.621682,0.455551 -1.619709,5.767336 -1.622067,-0.455557 0.778055,-2.769921 0.141006,-0.502416 0.700736,-2.494909 z m -26.793472,0.543805 v 2.995212 h -4.02488 v -2.995209 z m 14.792171,6.177774 -3.492469,11.923677 0.761895,1.429245 -1.715597,5.901566 -5.82884,-1.928157 1.914527,-5.833674 1.619634,-0.667346 3.203522,-10.825608 h 3.537208 z m -6.065591,0.655191 -3.126867,4.330386 c 0.715464,0.468767 1.464814,0.889511 2.242028,1.261971 a 912.7541,912.7541 0 0 0 -0.479457,1.63133 21.09589,21.09589 0 0 1 -2.744387,-1.533304 l -2.827443,3.915369 a 25.877194,25.877194 0 0 0 2.921292,1.695353 c -0.385294,1.059351 -0.725356,2.136878 -1.065025,3.214715 -2.860357,-1.366783 -5.466616,-3.182559 -7.724571,-5.358205 l 2.139733,-2.590338 a 25.96227,25.96227 0 0 0 1.722772,1.547282 c 0.271625,-0.302983 0.804263,-0.497238 1.164847,-0.221845 l 5.69905,-7.892839 h 2.077986 z"
+     style="stroke-width:0.0936303" />
+</svg>
--- a/PackageSources/js-bundle/src/assets/fonts/LICENSE.txt
+++ b/PackageSources/js-bundle/src/assets/fonts/LICENSE.txt
@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
--- a/PackageSources/js-bundle/src/assets/fonts/Roboto-Black.ttf
+++ b/PackageSources/js-bundle/src/assets/fonts/Roboto-Black.ttf
--- a/PackageSources/js-bundle/src/assets/fonts/Roboto-BlackItalic.ttf
+++ b/PackageSources/js-bundle/src/assets/fonts/Roboto-BlackItalic.ttf
--- a/PackageSources/js-bundle/src/assets/fonts/Roboto-Bold.ttf
+++ b/PackageSources/js-bundle/src/assets/fonts/Roboto-Bold.ttf
--- a/PackageSources/js-bundle/src/assets/fonts/Roboto-BoldItalic.ttf
+++ b/PackageSources/js-bundle/src/assets/fonts/Roboto-BoldItalic.ttf
--- a/PackageSources/js-bundle/src/assets/fonts/Roboto-Italic.ttf
+++ b/PackageSources/js-bundle/src/assets/fonts/Roboto-Italic.ttf
--- a/PackageSources/js-bundle/src/assets/fonts/Roboto-Light.ttf
+++ b/PackageSources/js-bundle/src/assets/fonts/Roboto-Light.ttf
--- a/PackageSources/js-bundle/src/assets/fonts/Roboto-LightItalic.ttf
+++ b/PackageSources/js-bundle/src/assets/fonts/Roboto-LightItalic.ttf
--- a/PackageSources/js-bundle/src/assets/fonts/Roboto-Medium.ttf
+++ b/PackageSources/js-bundle/src/assets/fonts/Roboto-Medium.ttf
--- a/PackageSources/js-bundle/src/assets/fonts/Roboto-MediumItalic.ttf
+++ b/PackageSources/js-bundle/src/assets/fonts/Roboto-MediumItalic.ttf
--- a/PackageSources/js-bundle/src/assets/fonts/Roboto-Regular.ttf
+++ b/PackageSources/js-bundle/src/assets/fonts/Roboto-Regular.ttf
--- a/PackageSources/js-bundle/src/assets/fonts/Roboto-Thin.ttf
+++ b/PackageSources/js-bundle/src/assets/fonts/Roboto-Thin.ttf
--- a/PackageSources/js-bundle/src/assets/fonts/Roboto-ThinItalic.ttf
+++ b/PackageSources/js-bundle/src/assets/fonts/Roboto-ThinItalic.ttf
--- a/PackageSources/js-bundle/src/assets/licenses.md
+++ b/PackageSources/js-bundle/src/assets/licenses.md
@ -0,0 +1,2 @@
+| Name | Modified | License type | Link | Author |
+| :--- | :------- | :----------- | :--- | :----- |
--- a/PackageSources/js-bundle/src/assets/licenses_node.md
+++ b/PackageSources/js-bundle/src/assets/licenses_node.md
@ -0,0 +1,43 @@
+| Department | Related to | Name                             | License period | Material not material | License type | Link                                                                      | Remote version | Installed version | Defined version | Author                                                      |
+| :--------- | :--------- | :------------------------------- | :------------- | :-------------------- | :----------- | :------------------------------------------------------------------------ | :------------- | :---------------- | :-------------- | :---------------------------------------------------------- |
+| kessler    | stuff      | @emotion/react                   | perpetual      | material              | MIT          | git+https://github.com/emotion-js/emotion.git#main                        | 11.11.1        | 11.11.1           | ^11.11.1        | Emotion Contributors                                        |
+| kessler    | stuff      | @emotion/styled                  | perpetual      | material              | MIT          | git+https://github.com/emotion-js/emotion.git#main                        | 11.11.0        | 11.11.0           | ^11.11.0        | n/a                                                         |
+| kessler    | stuff      | @mui/icons-material              | perpetual      | material              | MIT          | git+https://github.com/mui/material-ui.git                                | 5.14.16        | 5.14.16           | ^5.14.16        | MUI Team                                                    |
+| kessler    | stuff      | @mui/material                    | perpetual      | material              | MIT          | git+https://github.com/mui/material-ui.git                                | 5.14.17        | 5.14.17           | ^5.14.17        | MUI Team                                                    |
+| kessler    | stuff      | postcss-import                   | perpetual      | material              | MIT          | git+https://github.com/postcss/postcss-import.git                         | 15.1.0         | 15.1.0            | ^15.1.0         | Maxime Thirouin                                             |
+| kessler    | stuff      | react                            | perpetual      | material              | MIT          | git+https://github.com/facebook/react.git                                 | 18.2.0         | 18.2.0            | ^18.2.0         | n/a                                                         |
+| kessler    | stuff      | react-dom                        | perpetual      | material              | MIT          | git+https://github.com/facebook/react.git                                 | 18.2.0         | 18.2.0            | ^18.2.0         | n/a                                                         |
+| kessler    | stuff      | @microsoft/msfs-types            | perpetual      | material              | MIT          | git+https://github.com/microsoft/msfs-avionics-mirror.git                 | 1.14.6         | 1.14.6            | ^1.14.6         | Asobo Studio / Working Title Simulations                    |
+| kessler    | stuff      | @rollup/plugin-commonjs          | perpetual      | material              | MIT          | git+https://github.com/rollup/plugins.git                                 | 25.0.7         | 25.0.7            | ^25.0.0         | Rich Harris <richard.a.harris@gmail.com>                    |
+| kessler    | stuff      | @rollup/plugin-json              | perpetual      | material              | MIT          | git+https://github.com/rollup/plugins.git                                 | 6.0.1          | 6.0.1             | ^6.0.0          | rollup                                                      |
+| kessler    | stuff      | @rollup/plugin-node-resolve      | perpetual      | material              | MIT          | git+https://github.com/rollup/plugins.git                                 | 15.2.3         | 15.2.3            | ^15.1.0         | Rich Harris <richard.a.harris@gmail.com>                    |
+| kessler    | stuff      | @rollup/plugin-terser            | perpetual      | material              | MIT          | git+https://github.com/rollup/plugins.git                                 | 0.4.4          | 0.4.4             | ^0.4.3          | Peter Placzek <peter.placzek1996@gmail.com>                 |
+| kessler    | stuff      | @rollup/plugin-typescript        | perpetual      | material              | MIT          | git+https://github.com/rollup/plugins.git                                 | 11.1.5         | 11.1.5            | ^11.1.1         | Oskar Segersvärd                                            |
+| kessler    | stuff      | @types/react                     | perpetual      | material              | MIT          | https://github.com/DefinitelyTyped/DefinitelyTyped.git                    | 18.2.37        | 18.2.37           | ^18.2.8         | n/a                                                         |
+| kessler    | stuff      | @types/react-dom                 | perpetual      | material              | MIT          | https://github.com/DefinitelyTyped/DefinitelyTyped.git                    | 18.2.15        | 18.2.15           | ^18.2.4         | n/a                                                         |
+| kessler    | stuff      | @typescript-eslint/eslint-plugin | perpetual      | material              | MIT          | git+https://github.com/typescript-eslint/typescript-eslint.git            | 6.11.0         | 6.10.0            | ^6.10.0         | n/a                                                         |
+| kessler    | stuff      | @typescript-eslint/parser        | perpetual      | material              | BSD-2-Clause | git+https://github.com/typescript-eslint/typescript-eslint.git            | 6.11.0         | 6.10.0            | ^6.10.0         | n/a                                                         |
+| kessler    | stuff      | autoprefixer                     | perpetual      | material              | MIT          | git+https://github.com/postcss/autoprefixer.git                           | 10.4.16        | 10.4.16           | ^10.4.14        | Andrey Sitnik <andrey@sitnik.ru>                            |
+| kessler    | stuff      | cross-env                        | perpetual      | material              | MIT          | git+https://github.com/kentcdodds/cross-env.git                           | 7.0.3          | 7.0.3             | ^7.0.3          | Kent C. Dodds <me@kentcdodds.com> (https://kentcdodds.com)  |
+| kessler    | stuff      | eslint                           | perpetual      | material              | MIT          | git+https://github.com/eslint/eslint.git                                  | 8.53.0         | 8.53.0            | ^8.42.0         | Nicholas C. Zakas <nicholas+npm@nczconsulting.com>          |
+| kessler    | stuff      | eslint-plugin-import             | perpetual      | material              | MIT          | git+https://github.com/import-js/eslint-plugin-import.git                 | 2.29.0         | 2.29.0            | ^2.27.5         | Ben Mosher <me@benmosher.com>                               |
+| kessler    | stuff      | eslint-plugin-react              | perpetual      | material              | MIT          | git+https://github.com/jsx-eslint/eslint-plugin-react.git                 | 7.33.2         | 7.33.2            | ^7.32.2         | Yannick Croissant <yannick.croissant+npm@gmail.com>         |
+| kessler    | stuff      | eslint-plugin-react-hooks        | perpetual      | material              | MIT          | git+https://github.com/facebook/react.git                                 | 4.6.0          | 4.6.0             | ^4.6.0          | n/a                                                         |
+| kessler    | stuff      | license-report                   | perpetual      | material              | MIT          | git+https://github.com/ironSource/license-report.git                      | 6.5.0          | 6.5.0             | ^6.5.0          | Yaniv Kessler                                               |
+| kessler    | stuff      | node-sass                        | perpetual      | material              | MIT          | git+https://github.com/sass/node-sass.git                                 | 9.0.0          | 9.0.0             | ^9.0.0          | Andrew Nesbitt andrewnez@gmail.com http://andrew.github.com |
+| kessler    | stuff      | postcss                          | perpetual      | material              | MIT          | git+https://github.com/postcss/postcss.git                                | 8.4.31         | 8.4.31            | ^8.4.24         | Andrey Sitnik <andrey@sitnik.ru>                            |
+| kessler    | stuff      | prettier                         | perpetual      | material              | MIT          | git+https://github.com/prettier/prettier.git                              | 3.1.0          | 3.0.3             | ^3.0.3          | James Long                                                  |
+| kessler    | stuff      | prettier-plugin-organize-imports | perpetual      | material              | MIT          | git+https://github.com/simonhaenisch/prettier-plugin-organize-imports.git | 3.2.4          | 3.2.4             | ^3.2.4          | Simon Haenisch (https://github.com/simonhaenisch)           |
+| kessler    | stuff      | rimraf                           | perpetual      | material              | ISC          | git://github.com/isaacs/rimraf.git                                        | 5.0.5          | 5.0.5             | ^5.0.1          | Isaac Z. Schlueter <i@izs.me> (http://blog.izs.me/)         |
+| kessler    | stuff      | rollup                           | perpetual      | material              | MIT          | git+https://github.com/rollup/rollup.git                                  | 4.4.0          | 4.4.0             | ^4.3.1          | Rich Harris                                                 |
+| kessler    | stuff      | rollup-plugin-copy               | perpetual      | material              | MIT          | git+https://github.com/vladshcherbin/rollup-plugin-copy.git               | 3.5.0          | 3.5.0             | ^3.4.0          | Vlad Shcherbin <vlad.shcherbin@gmail.com>                   |
+| kessler    | stuff      | rollup-plugin-postcss            | perpetual      | material              | MIT          | git+https://github.com/egoist/rollup-plugin-postcss.git                   | 4.0.2          | 4.0.2             | ^4.0.2          | EGOIST <0x142857@gmail.com>                                 |
+| kessler    | stuff      | rollup-plugin-react-svg          | perpetual      | material              | MIT          | git+https://github.com/boopathi/react-svg-loader.git                      | 3.0.3          | 3.0.3             | ^3.0.3          | boopathi                                                    |
+| kessler    | stuff      | rollup-plugin-replace            | perpetual      | material              | MIT          | git+https://github.com/rollup/rollup-plugin-replace.git                   | 2.2.0          | 2.2.0             | ^2.2.0          | Rich Harris <richard.a.harris@gmail.com>                    |
+| kessler    | stuff      | rollup-plugin-version-injector   | perpetual      | material              | ISC          | git+https://github.com/djhouseknecht/rollup-plugin-version-injector.git   | 1.3.3          | 1.3.3             | ^1.3.3          | David Houseknecht <david.j.houseknecht@gmail.com>           |
+| kessler    | stuff      | svg-slim                         | perpetual      | material              | MIT          | git+https://github.com/benboba/svg-slim.git                               | 2.0.5          | 2.0.5             | ^2.0.5          | Wang Feng <benboba@gmail.com>                               |
+| kessler    | stuff      | tslib                            | perpetual      | material              | 0BSD         | git+https://github.com/Microsoft/tslib.git                                | 2.6.2          | 2.6.2             | ^2.5.3          | Microsoft Corp.                                             |
+| kessler    | stuff      | typed-scss-modules               | perpetual      | material              | MIT          | git+https://github.com/skovy/typed-scss-modules.git                       | 7.1.4          | 7.1.4             | ^7.1.0          | Spencer Miskoviak <smiskoviak@gmail.com>                    |
+| kessler    | stuff      | typescript                       | perpetual      | material              | Apache-2.0   | git+https://github.com/Microsoft/TypeScript.git                           | 5.2.2          | 5.2.2             | 5.2.2           | Microsoft Corp.                                             |
+| kessler    | stuff      | yarn                             | perpetual      | material              | BSD-2-Clause | https://registry.npmjs.org/yarn/-/yarn-1.22.19.tgz                        | 1.22.19        | 1.22.19           | ^1.22.19        | n/a                                                         |
+
--- a/PackageSources/js-bundle/src/constants.ts
+++ b/PackageSources/js-bundle/src/constants.ts
@ -0,0 +1,4 @@
+export const COMMANDS = 'KHOFMANN_PDF_READER_COMMANDS';
+export const DATA = 'KHOFMANN_PDF_READER_DATA';
+export const LIST = 'LIST';
+export const LOAD = 'LOAD';
--- a/PackageSources/js-bundle/src/contexts/DataContext.tsx
+++ b/PackageSources/js-bundle/src/contexts/DataContext.tsx
@ -0,0 +1,80 @@
+import { FC, PropsWithChildren, createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { COMMANDS, DATA, LIST, LOAD } from '../constants';
+
+interface IDataContext {
+  list?: IList[];
+  file?: string;
+  isLoading?: boolean;
+  refresh?: () => void;
+  load?: (path: string) => void;
+}
+
+export interface IList {
+  name: string;
+  // Base64 PNG
+  thumb: string;
+  pages: number;
+}
+
+export const DataContext = createContext<IDataContext>({});
+
+export const useData = () => {
+  const { list, file, isLoading, refresh, load } = useContext(DataContext);
+
+  if (list !== undefined && file !== undefined && isLoading !== undefined && refresh && load) {
+    return { list, file, isLoading, refresh, load };
+  } else {
+    throw new Error("Couldn't find context. Is your component inside a DataProvider?");
+  }
+};
+
+interface IDataContextProps {
+  dataListener: ViewListener.ViewListener;
+}
+
+const DataContextProvider: FC<PropsWithChildren<IDataContextProps>> = ({ dataListener, children }) => {
+  const [list, setList] = useState<IList[]>([]);
+  const [file, setFile] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    dataListener.on(DATA, dataCallback);
+    setIsLoading(true);
+    setTimeout(() => dataListener.call('COMM_BUS_WASM_CALLBACK', COMMANDS, LIST), 1000);
+
+    return () => dataListener?.off(DATA, dataCallback);
+  }, []);
+
+  const dataCallback = useCallback((args: string) => {
+    try {
+      const json = JSON.parse(args);
+      switch (json.id) {
+        case LIST:
+          setList(json.data);
+          window.dispatchEvent(new Event('resize'));
+          break;
+        case LOAD:
+          setFile(json.data);
+          window.dispatchEvent(new Event('resize'));
+          break;
+      }
+    } catch (e) {
+      console.warn(e);
+    }
+    setIsLoading(false);
+  }, []);
+
+  const refresh = () => {
+    setIsLoading(true);
+    dataListener.call('COMM_BUS_WASM_CALLBACK', COMMANDS, LIST);
+  };
+
+  const load = (path: string) => {
+    setIsLoading(true);
+    dataListener.call('COMM_BUS_WASM_CALLBACK', COMMANDS, JSON.stringify({ cmd: LOAD, file: path }));
+  };
+
+  return <DataContext.Provider value={{ list, file, isLoading, refresh, load }}>{children}</DataContext.Provider>;
+};
+
+export default DataContextProvider;
--- a/PackageSources/js-bundle/src/contexts/ThemeContext.tsx
+++ b/PackageSources/js-bundle/src/contexts/ThemeContext.tsx
@ -0,0 +1,51 @@
+import { Theme, createTheme } from '@mui/material';
+import { FC, PropsWithChildren, createContext, useContext, useMemo, useState } from 'react';
+
+interface IThemeContext {
+  theme?: Theme;
+  title?: string;
+  setTheme?: (theme: 'Default') => void;
+}
+
+export const ThemeContext = createContext<IThemeContext>({});
+
+export const useTheme = () => {
+  const { theme, title, setTheme } = useContext(ThemeContext);
+
+  if (theme !== undefined && title !== undefined && setTheme) {
+    return { theme, title, setTheme };
+  } else {
+    throw new Error("Couldn't find context. Is your component inside a ThemeProvider?");
+  }
+};
+
+const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
+  const theme_default = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          primary: {
+            main: getComputedStyle(document.documentElement).getPropertyValue('--enabledBackGroundColor').trim(),
+            contrastText: '#fff',
+          },
+        },
+      }),
+    []
+  );
+
+  const [title, setTitle] = useState('MSFS');
+  const [theme, setTheme] = useState<IThemeContext['theme']>(theme_default);
+
+  const _setTheme: IThemeContext['setTheme'] = (_theme) => {
+    switch (_theme) {
+      case 'Default':
+        setTitle('Default');
+        setTheme(theme_default);
+        break;
+    }
+  };
+
+  return <ThemeContext.Provider value={{ theme, title, setTheme: _setTheme }}>{children}</ThemeContext.Provider>;
+};
+
+export default ThemeProvider;
--- a/PackageSources/js-bundle/src/fonts/300.css
+++ b/PackageSources/js-bundle/src/fonts/300.css
@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300;
+  src: url(assets/fonts/Roboto-Light.ttf) format('truetype');
+}
--- a/PackageSources/js-bundle/src/fonts/400.css
+++ b/PackageSources/js-bundle/src/fonts/400.css
@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url(assets/fonts/Roboto-Regular.ttf) format('truetype');
+}
--- a/PackageSources/js-bundle/src/fonts/500.css
+++ b/PackageSources/js-bundle/src/fonts/500.css
@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url(assets/fonts/Roboto-Medium.ttf) format('truetype');
+}
--- a/PackageSources/js-bundle/src/fonts/700.css
+++ b/PackageSources/js-bundle/src/fonts/700.css
@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url(assets/fonts/Roboto-Bold.ttf) format('truetype');
+}
--- a/PackageSources/js-bundle/src/index.html
+++ b/PackageSources/js-bundle/src/index.html
@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+  <!-- prettier-ignore -->
+  <head>
+    <title></title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link rel="stylesheet" href="/SCSS/common.css" />
+    <link rel="stylesheet" href="index.css" />
+
+    <script type="text/javascript" src="/JS/coherent.js"></script>
+    <script type="text/javascript" src="/JS/common.js"></script>
+    <script type="text/javascript" src="/Pages/VCockpit/Instruments/Shared/BaseInstrument.js"></script>
+    <script type="text/javascript" src="/JS/dataStorage.js"></script>
+    <script type="text/javascript" src="/JS/buttons.js"></script>
+    <script type="text/javascript" src="/JS/Services/ToolBarPanels.js"></script>
+    <script type="text/javascript" src="/JS/simvar.js"></script>
+
+    <link rel="import" href="/templates/NewPushButton/NewPushButton.html" />
+    <link rel="import" href="/templates/ingameUi/ingameUi.html" />
+    <link rel="import" href="/templates/ingameUiHeader/ingameUiHeader.html" />
+    <link rel="import" href="/templates/virtualScroll/virtualScroll.html" />
+  </head>
+  <body class="border-box">
+    <pdf-reader-panel>
+      <ingame-ui
+        id="pdf-reader"
+        panel-id="PDF_READER_PANEL"
+        title="PDF Reader"
+        class="ingameUiFrame panelInvisible"
+        content-fit="true"
+      >
+        <virtual-scroll direction="y">
+          <div id="react" style="display: flex"></div>
+        </virtual-scroll>
+      </ingame-ui>
+    </pdf-reader-panel>
+    <script src="index.js" type="text/javascript"></script>
+  </body>
+</html>
--- a/PackageSources/js-bundle/src/index.ts
+++ b/PackageSources/js-bundle/src/index.ts
@ -0,0 +1,30 @@
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+class PDFReaderPanel extends TemplateElement {
+  dataListener?: ViewListener.ViewListener;
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.dataListener = RegisterViewListener('JS_LISTENER_COMM_BUS');
+
+    const container = document.getElementById('react');
+    if (container) {
+      const root = createRoot(container);
+      root.render(createElement(App, { dataListener: this.dataListener }));
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+}
+
+window.customElements.define('pdf-reader-panel', PDFReaderPanel);
+checkAutoload();
--- a/PackageSources/js-bundle/src/pages/ListPage/ListPage.tsx
+++ b/PackageSources/js-bundle/src/pages/ListPage/ListPage.tsx
@ -0,0 +1,54 @@
+import ReplayIcon from '@mui/icons-material/Replay';
+import { AppBar, Backdrop, Box, Button, Grid, Stack, Toolbar, Typography } from '@mui/material';
+import { FC } from 'react';
+import { useData } from '../../contexts/DataContext';
+import { useRouter } from '../../routers/Router';
+
+const ListPage: FC = () => {
+  const { navigate } = useRouter();
+  const { list, isLoading, refresh } = useData();
+
+  return (
+    <Box>
+      <AppBar position="sticky">
+        <Toolbar>
+          <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
+            Files
+          </Typography>
+          <Button onClick={refresh}>
+            <ReplayIcon htmlColor="white" fontSize="large" />
+          </Button>
+        </Toolbar>
+      </AppBar>
+      {isLoading ? (
+        <Backdrop sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }} open>
+          <Typography variant="h1">Loading...</Typography>
+        </Backdrop>
+      ) : (
+        <Stack spacing={2}>
+          {list.map((entry) => (
+            <Grid
+              key={entry.name}
+              bgcolor="primary.main"
+              onClick={() => navigate('/file', { entry })}
+              container
+              padding={1}
+              height={73}
+            >
+              <Grid item xs={1} padding={0}>
+                <img src={`data:image/png;base64,${entry.thumb}`} width={40} height={57} />
+              </Grid>
+              <Grid item xs={11} padding={0}>
+                <Box display="flex" alignItems="center" height="100%">
+                  <Typography variant="h5">{entry.name}</Typography>
+                </Box>
+              </Grid>
+            </Grid>
+          ))}
+        </Stack>
+      )}
+    </Box>
+  );
+};
+
+export default ListPage;
--- a/PackageSources/js-bundle/src/pages/PDFPage/PDFPage.tsx
+++ b/PackageSources/js-bundle/src/pages/PDFPage/PDFPage.tsx
@ -0,0 +1,80 @@
+import BackIcon from '@mui/icons-material/ArrowBack';
+import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import { AppBar, Backdrop, Box, Button, TextField, Toolbar, Typography } from '@mui/material';
+import { FC, useEffect, useState } from 'react';
+import { IList, useData } from '../../contexts/DataContext';
+import { useRouter } from '../../routers/Router';
+
+const PDFPage: FC = () => {
+  const { goBack, getProps } = useRouter();
+  const { entry } = getProps() as { entry: IList };
+  const { file, isLoading, load } = useData();
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageJump, setPageJump] = useState('1');
+
+  useEffect(() => {
+    load(`${entry.name}\\${currentPage}.png`);
+  }, [currentPage]);
+
+  return (
+    <Box>
+      <AppBar position="sticky">
+        <Toolbar>
+          <Button startIcon={<BackIcon htmlColor="white" />} onClick={() => goBack()}>
+            <Typography variant="h5" color="#fff">
+              Back
+            </Typography>
+          </Button>
+          <Typography variant="h5" marginLeft={2} component="div" sx={{ flexGrow: 1 }}>
+            {entry.name}
+          </Typography>
+          <TextField
+            variant="filled"
+            value={pageJump}
+            sx={{ input: { color: '#fff' }, width: '100px' }}
+            onChange={(e) => setPageJump(e.target.value)}
+          />
+          <Button
+            onClick={() => {
+              try {
+                let page = Number.parseInt(pageJump);
+                if (isNaN(page)) page = currentPage;
+                page = Math.max(1, Math.min(entry.pages, page));
+                setCurrentPage(page);
+                setPageJump(`${page}`);
+              } catch (e) {
+                console.warn(e);
+              }
+            }}
+          >
+            <Typography variant="h5" color="#fff">
+              Go to
+            </Typography>
+          </Button>
+          <Button onClick={() => setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev))}>
+            <NavigateBeforeIcon htmlColor="white" fontSize="large" />
+          </Button>
+          <Typography variant="h5">
+            {currentPage}/{entry.pages}
+          </Typography>
+          <Button onClick={() => setCurrentPage((prev) => (prev < entry.pages ? prev + 1 : prev))}>
+            <NavigateNextIcon htmlColor="white" fontSize="large" />
+          </Button>
+        </Toolbar>
+      </AppBar>
+      {isLoading ? (
+        <Backdrop sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }} open>
+          <Typography variant="h1">Loading...</Typography>
+        </Backdrop>
+      ) : (
+        <Box>
+          <img src={`data:image/png;base64,${file}`} width="100%" />
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default PDFPage;
--- a/PackageSources/js-bundle/src/routers/Router.tsx
+++ b/PackageSources/js-bundle/src/routers/Router.tsx
@ -0,0 +1,85 @@
+import { ThemeProvider } from '@mui/material';
+import { Attributes, FC, ReactNode, createContext, useContext, useMemo, useRef, useState } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import ListPage from '../pages/ListPage/ListPage';
+import PDFPage from '../pages/PDFPage/PDFPage';
+
+interface IRouterContext {
+  navigate?: (route: string, props: (Partial<Record<string, unknown>> & Attributes) | undefined) => void;
+  goBack?: () => void;
+  getProps?: () => (Partial<Record<string, unknown>> & Attributes) | undefined;
+}
+
+export const RouterContext = createContext<IRouterContext>({});
+
+export const useRouter = () => {
+  const { navigate, goBack, getProps } = useContext(RouterContext);
+
+  if (navigate && goBack && getProps) {
+    return { navigate, goBack, getProps };
+  } else {
+    throw new Error("Couldn't find context. Is your component inside a Router?");
+  }
+};
+
+interface IRouterProps {
+  globals: (Partial<Record<string, unknown>> & Attributes) | undefined;
+}
+
+const Router: FC<IRouterProps> = ({ globals }) => {
+  const { theme } = useTheme();
+
+  const routes = useMemo<
+    {
+      path: string;
+      element: ReactNode;
+    }[]
+  >(
+    () => [
+      {
+        path: '/',
+        element: <ListPage />,
+      },
+      {
+        path: '/file',
+        element: <PDFPage />,
+      },
+    ],
+    []
+  );
+
+  const history = useRef([{ page: routes[0].element, props: globals }]).current;
+
+  const [currentPage, setCurrentPage] = useState<{
+    page: ReactNode;
+    props: (Partial<Record<string, unknown>> & Attributes) | undefined;
+  }>({ page: routes[0].element, props: globals });
+
+  const navigate = (route: string, _props: (Partial<Record<string, unknown>> & Attributes) | undefined) => {
+    const page = routes.find((_page) => _page.path === route);
+    if (page) {
+      history.push({ page: page.element, props: { ..._props, ...globals } });
+      setCurrentPage({ page: page.element, props: { ..._props, ...globals } });
+      window.dispatchEvent(new Event('resize'));
+    } else {
+      console.warn('No route registered for', route);
+    }
+  };
+  const goBack = () => {
+    if (history.length > 1) {
+      history.pop();
+      setCurrentPage(history[history.length - 1]);
+      window.dispatchEvent(new Event('resize'));
+    } else console.warn('Already on root page');
+  };
+
+  const getProps = () => currentPage.props;
+
+  return (
+    <ThemeProvider theme={theme}>
+      <RouterContext.Provider value={{ navigate, goBack, getProps }}>{currentPage.page}</RouterContext.Provider>
+    </ThemeProvider>
+  );
+};
+
+export default Router;
--- a/PackageSources/js-bundle/src/types/virtual-scroll.d.ts
+++ b/PackageSources/js-bundle/src/types/virtual-scroll.d.ts
@ -0,0 +1,11 @@
+import { DOMAttributes, ReactNode } from 'react';
+
+type CustomElement<T> = Partial<T & DOMAttributes<T> & { children: ReactNode }>;
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      ['virtual-scroll']: CustomElement<{ class?: string; direction: 'x' | 'y' }>;
+    }
+  }
+}
--- a/PackageSources/js-bundle/tsconfig.json
+++ b/PackageSources/js-bundle/tsconfig.json
@ -0,0 +1,124 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Projects */
+    "incremental": true,
+    /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+
+    /* Language and Environment */
+    "target": "es2017",
+    /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "lib": ["es2017", "dom"],
+    /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "jsx": "react-jsx",
+    /* Specify what JSX code is generated. */
+    // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "FSComponent.buildComponent",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "FSComponent.Fragment",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+
+    /* Modules */
+    "module": "es2015",
+    /* Specify what module code is generated. */
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    "moduleResolution": "node",
+    /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    "rootDirs": [".", "__generated__"],
+    /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],
+    /* Specify multiple folders that act like './node_modules/@types'. */
+    //"types": [],
+    /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
+    // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
+    // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
+    // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
+    "resolveJsonModule": true,
+    /* Enable importing .json files. */
+    // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+
+    /* JavaScript Support */
+    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    "outDir": "../html_ui/InGamePanels/pdf-reader-panel",
+    /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+
+    /* Interop Constraints */
+    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true,
+    /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true,
+    /* Ensure that casing is correct in imports. */
+
+    /* Type Checking */
+    "strict": true,
+    /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
+    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
+    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
+    "alwaysStrict": true,
+    /* Ensure 'use strict' is always emitted. */
+    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
+    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
+    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
+    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
+    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
+    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  }
+}
--- a/PackageSources/js-bundle/yarn.lock
+++ b/PackageSources/js-bundle/yarn.lock
--- a/PackageSources/module/Base64.hpp
+++ b/PackageSources/module/Base64.hpp
@ -0,0 +1,71 @@
+#pragma once
+
+/**
+ * The MIT License (MIT)
+ * Copyright (c) 2016 tomykaira
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining
+ * a copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to
+ * permit persons to whom the Software is furnished to do so, subject to
+ * the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be
+ * included in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+ * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+ * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+ * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+ * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+#include <string>
+
+namespace macaron {
+    class Base64 {
+    public:
+        static std::string Encode(const char* data, size_t length) {
+            static constexpr char sEncodingTable[] = {
+              'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H',
+              'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
+              'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
+              'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',
+              'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n',
+              'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
+              'w', 'x', 'y', 'z', '0', '1', '2', '3',
+              '4', '5', '6', '7', '8', '9', '+', '/'
+            };
+
+            size_t out_len = 4 * ((length + 2) / 3);
+            std::string ret(out_len, '\0');
+            size_t i;
+            char* p = const_cast<char*>(ret.c_str());
+
+            for (i = 0; i < length - 2; i += 3) {
+                *p++ = sEncodingTable[(data[i] >> 2) & 0x3F];
+                *p++ = sEncodingTable[((data[i] & 0x3) << 4) | ((int)(data[i + 1] & 0xF0) >> 4)];
+                *p++ = sEncodingTable[((data[i + 1] & 0xF) << 2) | ((int)(data[i + 2] & 0xC0) >> 6)];
+                *p++ = sEncodingTable[data[i + 2] & 0x3F];
+            }
+            if (i < length) {
+                *p++ = sEncodingTable[(data[i] >> 2) & 0x3F];
+                if (i == (length - 1)) {
+                    *p++ = sEncodingTable[((data[i] & 0x3) << 4)];
+                    *p++ = '=';
+                }
+                else {
+                    *p++ = sEncodingTable[((data[i] & 0x3) << 4) | ((int)(data[i + 1] & 0xF0) >> 4)];
+                    *p++ = sEncodingTable[((data[i + 1] & 0xF) << 2)];
+                }
+                *p++ = '=';
+            }
+
+            return ret;
+        }
+    };
+}
--- a/PackageSources/module/Module.cpp
+++ b/PackageSources/module/Module.cpp
@ -0,0 +1,188 @@
+#include <MSFS\MSFS.h>
+#include <MSFS\Legacy\gauges.h>
+#include <MSFS\MSFS_CommBus.h>
+
+#include "rapidjson/document.h"
+#include "rapidjson/stringbuffer.h"
+#include "rapidjson/writer.h"
+
+#include <string>
+#include <vector>
+#include <iterator>
+
+#include <string.h>
+#include <dirent.h> 
+#include <stdio.h>
+#include <stdlib.h>
+
+#include "Base64.hpp"
+#include "Module.h"
+
+#define COMMANDS "KHOFMANN_PDF_READER_COMMANDS"
+#define DATA "KHOFMANN_PDF_READER_DATA"
+
+FILE* logFile;
+
+static void CommandWasmCallback(const char* args, unsigned int size, void* ctx);
+void log(FILE *file, const char *format, void* optionalElement = NULL);
+std::string readFile(const char* path);
+
+extern "C" MSFS_CALLBACK void module_init(void)
+{
+	log(stdout, "[PDF-Reader Module] Starting init\n");
+
+	logFile = fopen("\\work\\log.txt", "w");
+	if (logFile == NULL)
+	{
+		log(stderr, "[PDF-Reader Module] Error creating logfile\n");
+	}
+
+	if (!fsCommBusRegister(COMMANDS, CommandWasmCallback))
+	{
+		log(stderr, "[PDF-Reader Module] Error registering command CommBus\n");
+	}
+
+	log(stdout, "[PDF-Reader Module] Inited\n");
+}
+
+extern "C" MSFS_CALLBACK void module_deinit(void)
+{
+	log(stdout, "[PDF-Reader Module] Starting deinit\n");
+
+	int c = fsCommBusUnregister(COMMANDS, CommandWasmCallback);
+	log(stdout, "%i unregistered", &c);
+
+	log(stdout, "[PDF-Reader Module] Deinited\n");
+}
+
+static void CommandWasmCallback(const char* args, unsigned int size, void* ctx)
+{
+	if (strcmp(args, "LIST") == 0)
+	{
+		rapidjson::Document jsonDoc;
+		rapidjson::Document::AllocatorType& allocator = jsonDoc.GetAllocator();
+
+		jsonDoc.SetObject();
+		jsonDoc.AddMember("id", "LIST", allocator);
+
+		rapidjson::Value files;
+		files.SetArray();
+
+		DIR* d;
+		struct dirent* dir;
+		d = opendir("\\work\\Files");
+		if (d)
+		{
+			log(stdout, "Found files:\n");
+			while ((dir = readdir(d)) != NULL)
+			{
+				if (dir->d_type == DT_DIR && strcmp(dir->d_name, ".") && strcmp(dir->d_name, ".."))
+				{
+					log(stdout, "%s\n", dir->d_name);
+
+					std::string path("\\work\\Files\\");
+					path += dir->d_name;
+
+					int count = 0;
+					DIR* s;
+					struct dirent* dir_s;
+					s = opendir(path.c_str());
+					if (s)
+					{
+						while ((dir_s = readdir(s)) != NULL)
+						{
+							if (dir_s->d_type == DT_REG)
+							{
+								count++;
+							}
+						}
+
+					}
+					closedir(s);
+					
+					std::string thumb(dir->d_name);
+					thumb += "\\thumb.png";
+
+					rapidjson::Value name(dir->d_name, allocator);
+					rapidjson::Value _thumb(readFile(thumb.c_str()).c_str(), allocator);
+					
+					rapidjson::Value entry;
+					entry.SetObject();
+					entry.AddMember("name", name.Move(), allocator);
+					entry.AddMember("thumb", _thumb.Move(), allocator);
+					entry.AddMember("pages", count - 1, allocator);
+
+					files.PushBack(entry.Move(), allocator);
+				}
+			}
+
+			jsonDoc.AddMember("data", files, allocator);
+
+			rapidjson::StringBuffer strbuf;
+			rapidjson::Writer<rapidjson::StringBuffer> writer(strbuf);
+			jsonDoc.Accept(writer);
+
+			fsCommBusCall(DATA, strbuf.GetString(), strbuf.GetSize(), FsCommBusBroadcast_JS);
+
+			closedir(d);
+		}
+	}
+	else
+	{
+		rapidjson::Document inDoc;
+		inDoc.Parse(args);
+
+		const char* cmd = inDoc["cmd"].GetString();
+
+		if (strcmp(cmd, "LOAD") == 0) {
+			const char* data = inDoc["file"].GetString();
+
+			log(stdout, "Loading file %s\n", (void*)data);
+
+			rapidjson::Document outDoc;
+			rapidjson::Document::AllocatorType& allocator = outDoc.GetAllocator();
+
+			outDoc.SetObject();
+			outDoc.AddMember("id", "LOAD", allocator);
+			outDoc.AddMember("data", rapidjson::Value(readFile(data).c_str(), allocator).Move(), allocator);
+
+			rapidjson::StringBuffer strbuf;
+			rapidjson::Writer<rapidjson::StringBuffer> writer(strbuf);
+			outDoc.Accept(writer);
+
+			fsCommBusCall(DATA, strbuf.GetString(), strbuf.GetSize(), FsCommBusBroadcast_JS);
+		}
+	}
+}
+
+std::string readFile(const char* path)
+{
+	std::string _path;
+	_path += "\\work\\Files\\";
+	_path += path;
+
+	FILE* file = fopen(_path.c_str(), "r");
+	if (file) {
+		fseek(file, 0, SEEK_END);
+		long fsize = ftell(file);
+		fseek(file, 0, SEEK_SET);  /* same as rewind(f); */
+
+		char* string = (char*)calloc(sizeof(char), fsize + 1);
+		fread(string, fsize, 1, file);
+		fclose(file);
+
+		return macaron::Base64::Encode(string, fsize);
+	}
+
+	return "";
+}
+
+void log(FILE* file, const char* format, void* optionalElement)
+{
+	if (logFile != NULL)
+	{
+		fprintf(logFile, format, optionalElement);
+		fflush(logFile);
+	}
+	fprintf(file, format, optionalElement);
+}
--- a/PackageSources/module/Module.h
+++ b/PackageSources/module/Module.h
@ -0,0 +1 @@
+#pragma once
--- a/PackageSources/module/PDF-Reader.sln
+++ b/PackageSources/module/PDF-Reader.sln
@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.29806.167
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "PDF-Reader", "PDF-Reader.vcxproj", "{691392AC-AECF-4197-8F7F-37B7AEB41D4B}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|MSFS = Debug|MSFS
+		Release|MSFS = Release|MSFS
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{691392AC-AECF-4197-8F7F-37B7AEB41D4B}.Debug|MSFS.ActiveCfg = Debug|MSFS
+		{691392AC-AECF-4197-8F7F-37B7AEB41D4B}.Debug|MSFS.Build.0 = Debug|MSFS
+		{691392AC-AECF-4197-8F7F-37B7AEB41D4B}.Release|MSFS.ActiveCfg = Release|MSFS
+		{691392AC-AECF-4197-8F7F-37B7AEB41D4B}.Release|MSFS.Build.0 = Release|MSFS
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {C85F0220-E6FA-45B8-AA53-16165653C28C}
+	EndGlobalSection
+EndGlobal
--- a/PackageSources/module/PDF-Reader.vcxproj
+++ b/PackageSources/module/PDF-Reader.vcxproj
@ -0,0 +1,127 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project DefaultTargets="Build" ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <ItemGroup Label="ProjectConfigurations">
+    <ProjectConfiguration Include="Debug|MSFS">
+      <Configuration>Debug</Configuration>
+      <Platform>MSFS</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|MSFS">
+      <Configuration>Release</Configuration>
+      <Platform>MSFS</Platform>
+    </ProjectConfiguration>
+  </ItemGroup>
+  <PropertyGroup Label="Globals">
+    <VCProjectVersion>15.0</VCProjectVersion>
+    <ProjectGuid>{691392AC-AECF-4197-8F7F-37B7AEB41D4B}</ProjectGuid>
+    <Keyword>Win32Proj</Keyword>
+    <RootNamespace>PDF-Reader</RootNamespace>
+    <WindowsTargetPlatformVersion>10.0</WindowsTargetPlatformVersion>
+    <ProjectName>PDF-Reader</ProjectName>
+  </PropertyGroup>
+  <Import Project="$(VCTargetsPath)\Microsoft.Cpp.Default.props" />
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|MSFS'" Label="Configuration">
+    <ConfigurationType>Application</ConfigurationType>
+    <UseDebugLibraries>true</UseDebugLibraries>
+    <PlatformToolset>MSFS</PlatformToolset>
+    <CharacterSet>MultiByte</CharacterSet>
+  </PropertyGroup>
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|MSFS'" Label="Configuration">
+    <ConfigurationType>Application</ConfigurationType>
+    <UseDebugLibraries>false</UseDebugLibraries>
+    <PlatformToolset>MSFS</PlatformToolset>
+    <WholeProgramOptimization>true</WholeProgramOptimization>
+    <CharacterSet>MultiByte</CharacterSet>
+  </PropertyGroup>
+  <Import Project="$(VCTargetsPath)\Microsoft.Cpp.props" />
+  <ImportGroup Label="ExtensionSettings">
+  </ImportGroup>
+  <ImportGroup Label="Shared">
+  </ImportGroup>
+  <ImportGroup Condition="'$(Configuration)|$(Platform)'=='Debug|MSFS'" Label="PropertySheets">
+    <Import Project="$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props" Condition="exists('$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props')" Label="LocalAppDataPlatform" />
+  </ImportGroup>
+  <ImportGroup Condition="'$(Configuration)|$(Platform)'=='Release|MSFS'" Label="PropertySheets">
+    <Import Project="$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props" Condition="exists('$(UserRootDir)\Microsoft.Cpp.$(Platform).user.props')" Label="LocalAppDataPlatform" />
+  </ImportGroup>
+  <PropertyGroup Label="UserMacros" />
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|MSFS'">
+    <TargetName>$(ProjectName)</TargetName>
+    <LinkIncremental>true</LinkIncremental>
+    <TargetExt>.wasm</TargetExt>
+    <IncludePath>$(MSFS_IncludePath)</IncludePath>
+    <OutDir>$(SolutionDir)$(Platform)\</OutDir>
+  </PropertyGroup>
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|MSFS'">
+    <LinkIncremental>false</LinkIncremental>
+    <TargetExt>.wasm</TargetExt>
+    <IncludePath>$(MSFS_IncludePath)</IncludePath>
+    <OutDir>$(SolutionDir)$(Platform)\</OutDir>
+  </PropertyGroup>
+  <ItemDefinitionGroup Condition="'$(Configuration)|$(Platform)'=='Debug|MSFS'">
+    <ClCompile>
+      <WarningLevel>Level3</WarningLevel>
+      <Optimization>Disabled</Optimization>
+      <SDLCheck>true</SDLCheck>
+      <PreprocessorDefinitions>
+        _DEBUG;_MSFS_WASM;_STRING_H_CPLUSPLUS_98_CONFORMANCE_;_WCHAR_H_CPLUSPLUS_98_CONFORMANCE_;_LIBCPP_NO_EXCEPTIONS;_LIBCPP_HAS_NO_THREADS;%(PreprocessorDefinitions)</PreprocessorDefinitions>
+      <ConformanceMode>true</ConformanceMode>
+      <AdditionalIncludeDirectories>
+      </AdditionalIncludeDirectories>
+      <BufferSecurityCheck>false</BufferSecurityCheck>
+      <ExceptionHandling>false</ExceptionHandling>
+      <DebugInformationFormat>ProgramDatabase</DebugInformationFormat>
+      <SupportJustMyCode />
+      <MultiProcessorCompilation>true</MultiProcessorCompilation>
+      <LanguageStandard>stdcpp14</LanguageStandard>
+    </ClCompile>
+    <Link>
+      <SubSystem>Windows</SubSystem>
+      <GenerateDebugInformation>true</GenerateDebugInformation>
+      <NoEntryPoint>true</NoEntryPoint>
+      <OutputFile>$(OutDir)$(TargetName)-$(Configuration)$(TargetExt)</OutputFile>
+    </Link>
+    <PostBuildEvent />
+  </ItemDefinitionGroup>
+  <ItemDefinitionGroup Condition="'$(Configuration)|$(Platform)'=='Release|MSFS'">
+    <ClCompile>
+      <WarningLevel>Level3</WarningLevel>
+      <Optimization>MaxSpeed</Optimization>
+      <FunctionLevelLinking>true</FunctionLevelLinking>
+      <IntrinsicFunctions>true</IntrinsicFunctions>
+      <SDLCheck>true</SDLCheck>
+      <PreprocessorDefinitions>
+        NDEBUG;_MSFS_WASM;_STRING_H_CPLUSPLUS_98_CONFORMANCE_;_WCHAR_H_CPLUSPLUS_98_CONFORMANCE_;_LIBCPP_NO_EXCEPTIONS;_LIBCPP_HAS_NO_THREADS;%(PreprocessorDefinitions)</PreprocessorDefinitions>
+      <ConformanceMode>true</ConformanceMode>
+      <AdditionalIncludeDirectories>
+      </AdditionalIncludeDirectories>
+      <BufferSecurityCheck>false</BufferSecurityCheck>
+      <ExceptionHandling>false</ExceptionHandling>
+      <DebugInformationFormat />
+      <MultiProcessorCompilation>true</MultiProcessorCompilation>
+      <LanguageStandard>stdcpp14</LanguageStandard>
+    </ClCompile>
+    <Link>
+      <SubSystem>Windows</SubSystem>
+      <EnableCOMDATFolding>true</EnableCOMDATFolding>
+      <OptimizeReferences>true</OptimizeReferences>
+      <GenerateDebugInformation>false</GenerateDebugInformation>
+      <NoEntryPoint>true</NoEntryPoint>
+      <OutputFile>$(OutDir)$(TargetName)-$(Configuration)$(TargetExt)</OutputFile>
+    </Link>
+    <PostBuildEvent />
+    <PostBuildEvent>
+      <Command>
+      </Command>
+    </PostBuildEvent>
+  </ItemDefinitionGroup>
+  <ItemGroup>
+    <ClCompile Include="Module.cpp" />
+  </ItemGroup>
+  <ItemGroup>
+    <ClInclude Include="Base64.hpp" />
+    <ClInclude Include="Module.h" />
+  </ItemGroup>
+  <Import Project="$(VCTargetsPath)\Microsoft.Cpp.targets" />
+  <ImportGroup Label="ExtensionTargets">
+  </ImportGroup>
+</Project>
--- a/PackageSources/module/PDF-Reader.vcxproj.filters
+++ b/PackageSources/module/PDF-Reader.vcxproj.filters
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <ItemGroup>
+    <ClCompile Include="Module.cpp" />
+  </ItemGroup>
+  <ItemGroup>
+    <ClInclude Include="Module.h" />
+    <ClInclude Include="Base64.h" />
+  </ItemGroup>
+</Project>
--- a/PackageSources/module/PDF-Reader.vcxproj.user
+++ b/PackageSources/module/PDF-Reader.vcxproj.user
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup />
+</Project>
--- a/PackageSources/pdf-reader-panel/pdf-reader-panel.xml
+++ b/PackageSources/pdf-reader-panel/pdf-reader-panel.xml
@ -0,0 +1,17 @@
+<SimBase.Document Type="InGamePanels" version="1,0">
+  <Filename>pdf-reader.spb</Filename>
+  <InGamePanels.InGamePanelDefinition
+    id="PDF_READER_PANEL"
+    Name="pdf-reader"
+    url="html_UI/InGamePanels/pdf-reader-panel/index.html"
+    resizeDirections="both"
+    minWidth="100"
+    minHeight="60"
+    defaultWidth="100"
+    defaultHeight="60"
+    defaultTop="10"
+    defaultLeft="10"
+    icon="ICON_PDF_READER"
+    buttonVisible="true">
+  </InGamePanels.InGamePanelDefinition>
+</SimBase.Document>