Skip to content

Commit

Permalink
refactor(efb): flyPad OS 3.2 Throttle Configuration Refactor (flybywi…
Browse files Browse the repository at this point in the history 
…resim#8180)

* refactor(efb): new throttle settings

* fix: removed border and reduced margins

* fix: localisation and params

* feat: 4/2/1 throttle config for quadjet

* fix: throttle mapping

* feat: big related svgs and figures

* fix: throttle config

* fix: reverser on axis

* fix: reverser on axis 2 and 3 only

* feat: changelog.md
  • Loading branch information
@2hwk
2hwk authored Sep 11, 2023
1 parent 8feee4e commit f3e5f89
Show file tree
Hide file tree
Showing 10 changed files with 799 additions and 208 deletions.
1 change: 1 addition & 0 deletions .github/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
1. [BLEED] Allow engine start from crossbleed air - @BlueberryKing (BlueberryKing)
1. [BLEED] Improve bleed page visuals on the SD - @BlueberryKing (BlueberryKing)
1. [BLEED] Use more accurate pneumatic valves and sensors - @BlueberryKing (BlueberryKing)
1. [EFB] flyPad OS 3.2 - Cosmetic changes for throttle configuration settings and support for multiple airframes - @2hwk (2cas)

## 0.10.0

Expand Down
210 changes: 210 additions & 0 deletions fbw-a32nx/src/systems/instruments/src/EFB/Assets/A380X_FULL.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
204 changes: 203 additions & 1 deletion fbw-a32nx/src/systems/instruments/src/EFB/Assets/GroundServiceOutline.tsx
View file

Large diffs are not rendered by default.

14 changes: 8 additions & 6 deletions fbw-a32nx/src/systems/instruments/src/EFB/Dashboard/Widgets/FlightWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { useAppSelector, useAppDispatch } from '../../Store/store';

import { ScrollableContainer } from '../../UtilComponents/ScrollableContainer';
import { t } from '../../translation';
import { getAirframeType } from '../../Efb';

interface InformationEntryProps {
title: string;
Expand Down Expand Up @@ -51,7 +52,7 @@ const NoSimBriefDataOverlay = ({ simbriefDataLoaded, simbriefDataPending, fetchD
<button
type="button"
onClick={fetchData}
className="flex justify-center items-center p-2 space-x-4 w-full text-theme-body hover:text-theme-highlight bg-theme-highlight hover:bg-theme-body rounded-md border-2 border-theme-highlight transition duration-100"
className="flex justify-center items-center p-2 space-x-4 w-full rounded-md border-2 transition duration-100 text-theme-body hover:text-theme-highlight bg-theme-highlight hover:bg-theme-body border-theme-highlight"
>
<CloudArrowDown size={26} />
<p className="text-current">{t('Dashboard.YourFlight.ImportSimBriefData')}</p>
Expand All @@ -68,6 +69,7 @@ export const FlightWidget = () => {
const { data } = useAppSelector((state) => state.simbrief);
const [simbriefDataPending, setSimbriefDataPending] = useState(false);
const [simbriefUserId] = usePersistentProperty('CONFIG_SIMBRIEF_USERID');
const [airframe] = useState(getAirframeType());

const {
schedIn,
Expand Down Expand Up @@ -134,11 +136,11 @@ export const FlightWidget = () => {
{' '}
|
{' '}
A320-251N
{airframe === 'A380_842' ? 'A380-842' : 'A320-251N'}
</h1>
)}
</div>
<div className="overflow-hidden relative p-6 w-full h-content-section-reduced rounded-lg border-2 border-theme-accent">
<div className="overflow-hidden relative p-6 w-full rounded-lg border-2 h-content-section-reduced border-theme-accent">
<div className="flex flex-col justify-between h-full">
<div className="space-y-8">
<div className="flex flex-row justify-between">
Expand All @@ -157,12 +159,12 @@ export const FlightWidget = () => {
{schedOutParsed}
</p>
<div className="flex relative flex-row mx-6 w-full h-1">
<div className="absolute inset-x-0 border-b-4 border-theme-text border-dashed" />
<div className="absolute inset-x-0 border-b-4 border-dashed border-theme-text" />

<div className="relative w-full bg-theme-highlight" style={{ width: `${flightPlanProgress}%` }}>
{!!flightPlanProgress && (
<IconPlane
className="absolute right-0 text-theme-highlight transform translate-x-1/2 -translate-y-1/2 fill-current"
className="absolute right-0 transform translate-x-1/2 -translate-y-1/2 fill-current text-theme-highlight"
size={50}
strokeLinejoin="miter"
/>
Expand Down Expand Up @@ -215,7 +217,7 @@ export const FlightWidget = () => {
<button
type="button"
onClick={fetchData}
className="flex justify-center items-center p-2 space-x-4 w-full text-theme-body hover:text-theme-highlight bg-theme-highlight hover:bg-theme-body rounded-lg border-2 border-theme-highlight transition duration-100"
className="flex justify-center items-center p-2 space-x-4 w-full rounded-lg border-2 transition duration-100 text-theme-body hover:text-theme-highlight bg-theme-highlight hover:bg-theme-body border-theme-highlight"
>
<CloudArrowDown size={26} />
<p className="text-current">{t('Dashboard.YourFlight.ImportSimBriefData')}</p>
Expand Down
147 changes: 100 additions & 47 deletions fbw-a32nx/src/systems/instruments/src/EFB/Dispatch/Pages/OverviewPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@
//
// SPDX-License-Identifier: GPL-3.0

import React, { FC } from 'react';
import React, { FC, useState } from 'react';
import { IconPlane } from '@tabler/icons';
import { Box, LightningFill, PeopleFill, Rulers, Speedometer2 } from 'react-bootstrap-icons';
import { useSimVar, Units } from '@flybywiresim/fbw-sdk';
import { t } from '../../translation';
import { NoseOutline } from '../../Assets/NoseOutline';
import { getAirframeType } from '../../Efb';

interface InformationEntryProps {
title: string;
Expand All @@ -26,6 +27,7 @@ const InformationEntry: FC<InformationEntryProps> = ({ children, title, info })

export const OverviewPage = () => {
let [airline] = useSimVar('ATC AIRLINE', 'String', 1_000);
const [airframe] = useState(getAirframeType());

airline ||= 'FlyByWire Simulations';
const [actualGrossWeight] = useSimVar('TOTAL WEIGHT', 'kilograms', 5_000);
Expand All @@ -44,59 +46,110 @@ export const OverviewPage = () => {
}
};

const A320 = (
<div className="flex flex-row mt-8 space-x-16">
<div className="flex flex-col space-y-8">
<InformationEntry title={t('Dispatch.Overview.Model')} info="A320-251N [A20N]">
<IconPlane className="fill-current" size={23} stroke={1.5} strokeLinejoin="miter" />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.Range')} info={getConvertedInfo(3400, 'distance')}>
<Rulers size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.ActualGW')} info={getConvertedInfo(actualGrossWeight, 'weight')}>
<Box size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MZFW')} info={getConvertedInfo(64300, 'weight')}>
<Box size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MaximumPassengers')} info="174 passengers">
<PeopleFill size={23} />
</InformationEntry>
</div>
<div className="flex flex-col space-y-8">
<InformationEntry title={t('Dispatch.Overview.Engines')} info="CFM LEAP 1A-26">
<LightningFill size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MMO')} info="0.82">
<Speedometer2 size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MTOW')} info={getConvertedInfo(79000, 'weight')}>
<Box size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MaximumFuelCapacity')} info={getConvertedInfo(23721, 'volume')}>
<Box size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MaximumCargo')} info={getConvertedInfo(9435, 'weight')}>
<Box size={23} />
</InformationEntry>
</div>
</div>
);

const A380 = (
<div className="flex flex-row mt-8 space-x-16">
<div className="flex flex-col space-y-8">
<InformationEntry title={t('Dispatch.Overview.Model')} info="A380-842 [A388]">
<IconPlane className="fill-current" size={23} stroke={1.5} strokeLinejoin="miter" />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.Range')} info={getConvertedInfo(8000, 'distance')}>
<Rulers size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.ActualGW')} info={getConvertedInfo(actualGrossWeight, 'weight')}>
<Box size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MZFW')} info={getConvertedInfo(373000, 'weight')}>
<Box size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MaximumPassengers')} info="519 passengers">
<PeopleFill size={23} />
</InformationEntry>
</div>
<div className="flex flex-col space-y-8">
<InformationEntry title={t('Dispatch.Overview.Engines')} info="RR Trent 972B-84">
<LightningFill size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MMO')} info="0.89">
<Speedometer2 size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MTOW')} info={getConvertedInfo(510000, 'weight')}>
<Box size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MaximumFuelCapacity')} info={getConvertedInfo(323546, 'volume')}>
<Box size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MaximumCargo')} info={getConvertedInfo(51400, 'weight')}>
<Box size={23} />
</InformationEntry>
</div>
</div>
);

return (
<div className="overflow-hidden p-6 mr-3 w-min h-content-section-reduced rounded-lg border-2 border-theme-accent">
<h1 className="font-bold">Airbus A320neo</h1>
<div className="overflow-hidden p-6 mr-3 w-min rounded-lg border-2 h-content-section-reduced border-theme-accent">
{airframe === 'A380_842' ? <h1 className="font-bold">Airbus A380</h1> : <h1 className="font-bold">Airbus A320neo</h1>}
<p>{airline}</p>

<div className="flex justify-center items-center mt-6">
<NoseOutline className="mr-32 -ml-96 h-64 text-theme-text flip-horizontal" />
</div>

<div className="flex flex-row mt-8 space-x-16">
<div className="flex flex-col space-y-8">
<InformationEntry title={t('Dispatch.Overview.Model')} info="A320-251N [A20N]">
<IconPlane className="fill-current" size={23} stroke={1.5} strokeLinejoin="miter" />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.Range')} info={getConvertedInfo(3400, 'distance')}>
<Rulers size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.ActualGW')} info={getConvertedInfo(actualGrossWeight, 'weight')}>
<Box size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MZFW')} info={getConvertedInfo(64300, 'weight')}>
<Box size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MaximumPassengers')} info="174 passengers">
<PeopleFill size={23} />
</InformationEntry>
</div>
<div className="flex flex-col space-y-8">
<InformationEntry title={t('Dispatch.Overview.Engines')} info="CFM LEAP 1A-26">
<LightningFill size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MMO')} info="0.82">
<Speedometer2 size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MTOW')} info={getConvertedInfo(79000, 'weight')}>
<Box size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MaximumFuelCapacity')} info={getConvertedInfo(23721, 'volume')}>
<Box size={23} />
</InformationEntry>

<InformationEntry title={t('Dispatch.Overview.MaximumCargo')} info={getConvertedInfo(9435, 'weight')}>
<Box size={23} />
</InformationEntry>
</div>
</div>
{airframe === 'A380_842' ? A380 : A320}
</div>
);
};
10 changes: 7 additions & 3 deletions fbw-a32nx/src/systems/instruments/src/EFB/Ground/Pages/ServicesPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// SPDX-License-Identifier: GPL-3.0

/* eslint-disable no-console */
import React, { FC, useEffect, useRef } from 'react';
import React, { FC, useEffect, useRef, useState } from 'react';
import { useSimVar } from '@flybywiresim/fbw-sdk';
import {
ArchiveFill,
Expand All @@ -17,7 +17,7 @@ import {
} from 'react-bootstrap-icons';
import { ActionCreatorWithOptionalPayload } from '@reduxjs/toolkit';
import { t } from '../../translation';
import { GroundServiceOutline } from '../../Assets/GroundServiceOutline';
import { A380GroundServiceOutline, GroundServiceOutline } from '../../Assets/GroundServiceOutline';
import { useAppDispatch, useAppSelector } from '../../Store/store';
import {
setAftDoorButtonState,
Expand All @@ -29,6 +29,7 @@ import {
setGpuButtonState,
setJetWayButtonState,
} from '../../Store/features/groundServicePage';
import { getAirframeType } from '../../Efb';

interface ServiceButtonWrapperProps {
className?: string,
Expand Down Expand Up @@ -105,6 +106,8 @@ const GroundServiceButton: React.FC<GroundServiceButtonProps> = ({ children, nam
export const ServicesPage = () => {
const dispatch = useAppDispatch();

const [airframe] = useState(getAirframeType());

// Flight state
const [simOnGround] = useSimVar('SIM ON GROUND', 'bool', 250);
const [aircraftIsStationary] = useSimVar('L:A32NX_IS_STATIONARY', 'bool', 250);
Expand Down Expand Up @@ -478,7 +481,8 @@ export const ServicesPage = () => {

return (
<div className="relative h-content-section-reduced">
<GroundServiceOutline className="inset-x-0 mx-auto w-full h-full text-theme-text" />
{airframe === 'A380_842' ? <A380GroundServiceOutline className="inset-x-0 mx-auto w-full h-full text-theme-text" />
: <GroundServiceOutline className="inset-x-0 mx-auto w-full h-full text-theme-text" /> }

<ServiceButtonWrapper xr={880} y={64}>

Expand Down
47 changes: 35 additions & 12 deletions fbw-a32nx/src/systems/instruments/src/EFB/Settings/ThrottleConfig/BaseThrottleConfig.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,27 @@ import React, { FC, useState } from 'react';
import { PencilSquare } from 'react-bootstrap-icons';
import { useSimVar } from '@flybywiresim/fbw-sdk';
import { t } from '../../translation';
import DetentConfig from './DetentConfig';
import { DetentConfig, DummyDetentConfig } from './DetentConfig';
import { ThrottleSimvar } from './ThrottleSimVar';

interface BaseThrottleConfigProps {
className?: string;
throttleNumber: number;
throttleCount: number;
displayNumber: boolean;
mappingsAxisOne: ThrottleSimvar[];
mappingsAxisTwo?: ThrottleSimvar[];
activeIndex: number;
reverseDisabled?: boolean;
}

export const BaseThrottleConfig: FC<BaseThrottleConfigProps> = ({
className,
throttleNumber,
throttleCount,
displayNumber,
mappingsAxisOne,
mappingsAxisTwo,
activeIndex,
reverseDisabled,
}) => {
const [throttlePosition] = useSimVar(`L:A32NX_THROTTLE_MAPPING_INPUT:${throttleNumber}`, 'number', 30);
const [expertMode, setExpertMode] = useState(false);
Expand All @@ -31,7 +35,25 @@ export const BaseThrottleConfig: FC<BaseThrottleConfigProps> = ({
<DetentConfig
key={activeIndex}
index={activeIndex}
barPosition={throttleNumber === 1 ? 'right' : 'left'}
throttlePosition={throttlePosition}
upperBoundDetentSetter={mappingsAxisTwo
? [mappingsAxisOne[activeIndex].getHiSetter(), mappingsAxisTwo[activeIndex].getHiSetter()]
: [mappingsAxisOne[activeIndex].getHiSetter()]}
lowerBoundDetentSetter={mappingsAxisTwo
? [mappingsAxisOne[activeIndex].getLowSetter(), mappingsAxisTwo[activeIndex].getLowSetter()]
: [mappingsAxisOne[activeIndex].getLowSetter()]}
lowerBoundDetentGetter={mappingsAxisOne[activeIndex].getLowGetter()}
upperBoundDetentGetter={mappingsAxisOne[activeIndex].getHiGetter()}
detentValue={mappingsAxisOne[activeIndex].getLowGetter()}
throttleNumber={throttleNumber}
expertMode={expertMode}
/>
);

const dummyDetent = (
<DummyDetentConfig
key={activeIndex}
index={activeIndex}
throttlePosition={throttlePosition}
upperBoundDetentSetter={mappingsAxisTwo
? [mappingsAxisOne[activeIndex].getHiSetter(), mappingsAxisTwo[activeIndex].getHiSetter()]
Expand All @@ -48,26 +70,27 @@ export const BaseThrottleConfig: FC<BaseThrottleConfigProps> = ({
);

return (
<div className="w-50">
<h1 className="mb-4 text-center">
<div className={className}>
<h1 className="mb-2 text-center">
{t('Settings.ThrottleConfig.Axis')}
{' '}
{throttleCount === 1 ? throttleNumber : '1 & 2'}
{displayNumber ? throttleNumber : ''}
</h1>
<div className="px-4 pt-5 mt-4 rounded-lg border-2 border-theme-accent">
<div className="flex flex-row justify-center items-center space-x-2">
<div className="flex flex-col justify-center items-center px-2 pt-5 mt-4">
<div className="flex flex-row justify-center items-center space-x-2 w-60">
<p>
{t('Settings.ThrottleConfig.CurrentValue')}
:
{' '}
{throttlePosition.toFixed(2)}
</p>
<PencilSquare className="text-theme-highlight" onMouseDown={() => setExpertMode(!expertMode)} size="1.5rem" stroke="1.5" />
{!reverseDisabled || activeIndex >= 2 ? (
<PencilSquare className="text-theme-highlight" onMouseDown={() => setExpertMode(!expertMode)} stroke="1.5" />
) : null}
</div>

<div className="flex flex-row">
<div className="flex flex-col justify-between items-center">
{currentDetent}
{(!reverseDisabled) || (activeIndex >= 2) ? currentDetent : dummyDetent}
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit f3e5f89

Please sign in to comment.