Kilian/xkhofmann-fss-aircraft-boeing-727-200f-sb-fplan
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Split 2020 and 2024 packages due to Avionics framework package

Browse Source
This commit is contained in:
Kilian Hofmann
2025-02-22 02:49:51 +01:00
parent 7112433747
commit 2604fbb75d
113 changed files with 6147 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Gauge/src/assets/fonts/Consolas.ttf
BIN
View File
Binary file not shown.
Gauge/src/assets/img/compass.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.4 KiB

Gauge/src/assets/img/wrench.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 KiB

Gauge/src/components/controls/controls.scss
-30
View File
@@ -1,30 +0,0 @@
#KH_CTRL {
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
.button {
border-radius: 5px;
border: solid 1px #000;
padding-left: 7px;
padding-right: 7px;
.icon {
width: 30px;
margin-top: 6px;
}
&:hover:not([disabled]) {
background-color: var(--buttonHoverColor);
}
&.d180 {
transform: rotate(180deg);
}
&.d90 {
transform: rotate(90deg);
}
}
}
Gauge/src/components/controls/controls.tsx
-83
View File
@@ -1,83 +0,0 @@
import {
ComponentProps,
ComputedSubject,
DisplayComponent,
FSComponent,
NodeReference,
Subscribable,
VNode,
} from '@microsoft/msfs-sdk';
import './controls.scss';
interface ControlsProps extends ComponentProps {
containerRef: NodeReference<HTMLDivElement>;
reload: () => void;
position: Subscribable<number>;
page: number;
}
export class Controls extends DisplayComponent<ControlsProps> {
private cycleRef = FSComponent.createRef<HTMLDivElement>();
private toTopRef = FSComponent.createRef<HTMLDivElement>();
private reloadRef = FSComponent.createRef<HTMLDivElement>();
private switchPosRef = FSComponent.createRef<HTMLDivElement>();
private buttonName = ComputedSubject.create<number, string>(0, (val) => {
if (val === 1) return '/Pages/VCockpit/Instruments/FSS_B727/KH_FE_FPLAN/assets/img/compass.png';
else if (val === 2) return '/Pages/VCockpit/Instruments/FSS_B727/KH_FE_FPLAN/assets/img/wrench.png';
return '';
});
constructor(props: ControlsProps) {
super(props);
props.position.sub((p) => this.buttonName.set(p));
}
private cycle = (): void => {
if (this.props.page === 0) SimVar.SetSimVarValue('L:KH_FE_FPLAN_P1', 'bool', true);
else if (this.props.page === 1) SimVar.SetSimVarValue('L:KH_FE_FPLAN_P1', 'bool', false);
};
private toTop = (): void => {
if (!this.props.containerRef.instance) return;
this.props.containerRef.instance.scrollTop = 0;
};
private switchPosition = (): void => {
if (this.props.position.get() === 1) SimVar.SetSimVarValue('L:KH_FE_FPLAN_BOARD', 'number', 2);
else if (this.props.position.get() === 2) SimVar.SetSimVarValue('L:KH_FE_FPLAN_BOARD', 'number', 1);
};
public render = (): VNode => (
<div id="KH_CTRL">
{this.props.page === 1 && (
<div ref={this.cycleRef} class="button">
<img class="icon" src="/Pages/VCockpit/Instruments/FSS_B727/EFB/Images/get.png" />
</div>
)}
<div ref={this.toTopRef} class="button d90">
<img class="icon" src="/Pages/VCockpit/Instruments/FSS_B727/EFB/Images/get.png" />
</div>
<div ref={this.reloadRef} class="button">
<img class="icon" src="/Pages/VCockpit/Instruments/FSS_B727/EFB/Images/cloud.png" />
</div>
<div ref={this.switchPosRef} class="button">
<img class="icon" src={this.buttonName} />
</div>
{this.props.page === 0 && (
<div ref={this.cycleRef} class="button d180">
<img class="icon" src="/Pages/VCockpit/Instruments/FSS_B727/EFB/Images/get.png" />
</div>
)}
</div>
);
public onAfterRender = (): void => {
this.cycleRef.instance.onclick = this.cycle;
this.toTopRef.instance.onclick = this.toTop;
this.reloadRef.instance.onclick = this.props.reload;
this.switchPosRef.instance.onclick = this.switchPosition;
};
}
Gauge/src/components/ofp/ofp.tsx
-72
View File
@@ -1,72 +0,0 @@
import { ComponentProps, DisplayComponent, FSComponent, Subscribable, VNode } from '@microsoft/msfs-sdk';
import { Controls } from '../controls/controls';
interface OFPProps extends ComponentProps {
content: Subscribable<string>;
reload: () => void;
position: Subscribable<number>;
}
export class OFP extends DisplayComponent<OFPProps> {
private containerRef = FSComponent.createRef<HTMLDivElement>();
private ofpRef = FSComponent.createRef<HTMLDivElement>();
constructor(props: OFPProps) {
super(props);
}
private defineDragScroll = (horizontalScroll = true, verticalScroll = true): void => {
if (!this.containerRef.instance) return;
let pos = { top: 0, left: 0, x: 0, y: 0 };
const mouseDownHandler = (e: MouseEvent) => {
pos = {
left: this.containerRef.instance.scrollLeft,
top: this.containerRef.instance.scrollTop,
x: e.clientX,
y: e.clientY,
};
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
document.removeEventListener('mouseleave', mouseUpHandler);
};
const mouseMoveHandler = (e: MouseEvent) => {
const dx = e.clientX - pos.x;
const dy = e.clientY - pos.y;
if (verticalScroll) {
this.containerRef.instance.scrollTop = pos.top - dy;
}
if (horizontalScroll) {
this.containerRef.instance.scrollLeft = pos.left - dx;
}
};
const mouseUpHandler = (e: MouseEvent) => {
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
document.removeEventListener('mouseleave', mouseUpHandler);
};
this.containerRef.instance.addEventListener('mousedown', mouseDownHandler);
};
public render = (): VNode => (
<>
<div ref={this.containerRef} id="KH_FE_FPLAN">
<div ref={this.ofpRef} id="OFP" />
</div>
<Controls containerRef={this.containerRef} position={this.props.position} reload={this.props.reload} page={0} />
</>
);
public onAfterRender = (): void => {
this.defineDragScroll();
this.props.content.sub((content) => {
this.ofpRef.instance.innerHTML = content;
});
};
}
Gauge/src/components/tlr/tlr.tsx
-71
View File
@@ -1,71 +0,0 @@
import { ComponentProps, DisplayComponent, FSComponent, Subscribable, VNode } from '@microsoft/msfs-sdk';
import { Controls } from '../controls/controls';
interface TLRProps extends ComponentProps {
content: Subscribable<string>;
reload: () => void;
position: Subscribable<number>;
}
export class TLR extends DisplayComponent<TLRProps> {
private containerRef = FSComponent.createRef<HTMLDivElement>();
constructor(props: TLRProps) {
super(props);
}
private defineDragScroll = (horizontalScroll = true, verticalScroll = true): void => {
if (!this.containerRef.instance) return;
let pos = { top: 0, left: 0, x: 0, y: 0 };
const mouseDownHandler = (e: MouseEvent) => {
pos = {
left: this.containerRef.instance.scrollLeft,
top: this.containerRef.instance.scrollTop,
x: e.clientX,
y: e.clientY,
};
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
document.addEventListener('mouseleave', mouseUpHandler);
};
const mouseMoveHandler = (e: MouseEvent) => {
const dx = e.clientX - pos.x;
const dy = e.clientY - pos.y;
if (verticalScroll) {
this.containerRef.instance.scrollTop = pos.top - dy;
}
if (horizontalScroll) {
this.containerRef.instance.scrollLeft = pos.left - dx;
}
};
const mouseUpHandler = (e: MouseEvent) => {
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
document.removeEventListener('mouseleave', mouseUpHandler);
};
this.containerRef.instance.addEventListener('mousedown', mouseDownHandler);
};
public render = (): VNode => (
<>
<div ref={this.containerRef} id="KH_FE_FPLAN" class="p2">
<div id="TLR">
<div>
<pre>{this.props.content}</pre>
</div>
</div>
</div>
<Controls containerRef={this.containerRef} position={this.props.position} reload={this.props.reload} page={1} />
</>
);
public onAfterRender = (): void => {
this.defineDragScroll();
};
}
Gauge/src/index.html
-7
View File
@@ -1,7 +0,0 @@
<link rel="stylesheet" href="index.css" />
<script type="text/html" import-script="/Pages/VCockpit/Instruments/FSS_B727/KH_FE_FPLAN/index.js"></script>
<script type="text/html" import-script="/JS/dataStorage.js"></script>
<script type="text/html" id="kh-fe-fplan">
<div id="root"></div>
</script>
Gauge/src/index.scss
-68
View File
@@ -1,68 +0,0 @@
@font-face {
font-family: 'Consolas';
src: url('./assets/fonts/Consolas.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: lightgray;
}
::-webkit-scrollbar-thumb {
background: gray;
height: 200px;
}
::-webkit-scrollbar-thumb:hover {
background: darkgray;
}
#root {
--buttonHoverColor: lightgray;
--fss-select-hover: lightgray;
/* No idea why, zero. I looked at the EFB.css and it has 100%, but doing so screws this over hard */
width: 594px;
height: 100%;
background-image: url(../EFB/Images/bg.png);
background-size: 100% 100%;
color: #000;
font-size: 25px;
padding: 3vw;
#KH_FE_FPLAN {
height: calc(100vh - 6vw - 180px);
width: 100%;
margin-top: 100px;
margin-bottom: 3vw;
overflow-y: scroll;
overflow-x: hidden;
#TLR div,
#OFP div {
line-height: unset !important;
font-size: unset !important;
}
#TLR pre,
#OFP pre {
white-space: pre;
line-height: 14px;
font-size: 13px;
font-family: 'Consolas' !important;
}
#OFP img {
width: 100%;
}
&.p2 {
height: calc(100vh - 6vw - 240px);
margin-top: 160px;
}
}
}
Gauge/src/index.tsx
-107
View File
@@ -1,107 +0,0 @@
/// <reference types="@microsoft/msfs-types/Pages/VCockpit/Core/VCockpit" />
/// <reference types="@microsoft/msfs-types/JS/dataStorage" />
import { EventBus, FSComponent, SimVarPublisher, SimVarValueType, Subject } from '@microsoft/msfs-sdk';
import { OFP } from './components/ofp/ofp';
import { TLR } from './components/tlr/tlr';
import './index.scss';
export interface NewDataEvents {
newData: boolean;
position: number;
}
class KH_FE_FPLAN extends BaseInstrument {
private readonly bus = new EventBus();
private readonly newDataPublisher = new SimVarPublisher<NewDataEvents>(
new Map([
['newData', { name: 'L:KH_FE_FPLAN_NEW_DATA', type: SimVarValueType.Bool }],
['position', { name: 'L:KH_FE_FPLAN_BOARD', type: SimVarValueType.Number }],
]),
this.bus
);
private contentOFP = Subject.create<string>('');
private contentTLR = Subject.create<string>('');
private position = Subject.create<number>(0);
private sbID = '';
get templateID(): string {
return 'kh-fe-fplan';
}
get isInteractive() {
return true;
}
constructor() {
super();
const config = GetStoredData('FSS_B727_EFB_CONFIG_PREFLIGHT');
try {
this.sbID = JSON.parse(config).simBriefId;
} catch (e) {
console.error('Failed loading config.', e);
}
}
private getSB = async (): Promise<void> => {
try {
const res = await fetch(`https://www.simbrief.com/api/xml.fetcher.php?username=${this.sbID}&json=1`);
if (res.ok) {
try {
const data = await res.json();
let ofp: string = data.text.plan_html;
ofp = ofp.replace(/href=".*?"/g, '');
this.contentOFP.set(ofp);
this.contentTLR.set(data.text.tlr_section);
} catch (e) {
console.error('JSON DECODE ERR', e);
}
}
} catch (e) {
console.error('FETCH ERR', e);
}
};
private reloadSB = (): void => {
SimVar.SetSimVarValue('L:KH_FE_FPLAN_NEW_DATA', 'bool', 1);
};
protected Update(): void {
super.Update();
this.newDataPublisher.onUpdate();
}
public connectedCallback(): void {
super.connectedCallback();
this.newDataPublisher.startPublish();
const sub = this.bus.getSubscriber<NewDataEvents>();
sub.on('newData').handle((flag) => {
if (!flag) return;
SimVar.SetSimVarValue('L:KH_FE_FPLAN_NEW_DATA', 'bool', 0);
this.getSB();
});
sub.on('position').handle((position) => {
this.position.set(position);
});
const url = new URL(this.getAttribute('Url') ?? '');
const type = url.searchParams.get('type');
FSComponent.render(
<>
{type === 'ofp' && <OFP content={this.contentOFP} position={this.position} reload={this.reloadSB} />}
{type === 'tlr' && <TLR content={this.contentTLR} position={this.position} reload={this.reloadSB} />}
</>,
document.getElementById('root')
);
}
}
registerInstrument('kh-fe-fplan', KH_FE_FPLAN);