-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
@@ -148,13 +148,13 @@ In MSFS, when operating the above panels with pop outs, there are currently 2 li - Bug - If the pop out panel is also display on the main screen, a click through at incorrect coordinate will occur at the relative position where the pop out panel is located. If you click at this particular location in the pop out panel, the click event will register at the wrong coordinate. I haven’t been able to figure out how to work around this issue yet since the bug is deep in the closed source CoherentGT code in how MSFS implements the internal browser control to display to pop out panel. So touch will not work in the relative position of the pop out panel where panel appears on the main screen. This only affects instrumentation pop outs. The built-in ones such as ATC and checklist are fine since once they’re popped out, they no longer appear on the main screen. Below is the screenshot where click through at incorrect coordinate occurs. See the relative position (red box) in the pop out where the same instrumentation appears on the main screen.
-
+
-
+
+
+
+
+
+
+
+
+
+ {panelProfile.enableMap &&
+ mapOpenChanged()}>
+
+ }
+
+
+
+
+
+ Sim Rate:
+ x{displaySimRate(SIM_RATE)}
+
+
+
+
+
+
+ ), [classes, networkStatus, arduinoStatus, panelProfile, mapOpenChanged, SIM_RATE]);
+}
+
+export default ApplicationBar;
\ No newline at end of file
diff --git a/ReactClient/src/App/InteractiveControlTemplate.js b/ReactClient/src/App/InteractiveControlTemplate.js
new file mode 100644
index 0000000..4c944c4
--- /dev/null
+++ b/ReactClient/src/App/InteractiveControlTemplate.js
@@ -0,0 +1,290 @@
+import React, { useMemo, useRef, useEffect } from 'react';
+import IconButton from '@mui/material/IconButton';
+import makeStyles from '@mui/styles/makeStyles';
+import { useSimConnectData } from '../Services/SimConnectDataProvider';
+import { useLocalStorageData } from '../Services/LocalStorageProvider';
+import { simConnectPost } from '../Services/simConnectPost';
+import { useWindowDimensions } from '../Components/Util/hooks';
+import { Typography } from '@mui/material';
+import SevenSegmentDisplay from '../Components/Control/SevenSegmentDisplay';
+
+const useStyles = makeStyles(() => ({
+ iconButton: {
+ width: '100%',
+ height: '100%'
+ },
+ iconImageHighlight: {
+ filter: 'sepia(80%)'
+ },
+ controlBase: {
+ position: 'absolute',
+ backgroundRepeat: 'no-repeat',
+ backgroundSize: '100%',
+ paddingRight: '0.1em'
+ }
+}));
+
+const getImagePath = (panelInfo) => {
+ return `/config/profiles/${panelInfo.parentRootPath}/${panelInfo.rootPath}/img/`;
+}
+
+const playSound = (isEnabledSound) => {
+ if (isEnabledSound) {
+ let audio = new Audio('/sound/button-click.mp3');
+ audio.play();
+ }
+}
+
+const execActions = (event, action, simConnectData, showEncoder) => {
+ for (let i = 0; i < action.touchActions.length; i++) {
+ let curAction = action.touchActions[i];
+ let actionValue;
+
+ if (curAction.actionValueVariable !== undefined)
+ actionValue = simConnectData[curAction.actionValueVariable];
+ else
+ actionValue = curAction.actionValue === undefined ? 1 : curAction.actionValue
+
+ if (curAction.action !== undefined && curAction.action !== null)
+ setTimeout(() =>
+ simConnectPost({
+ action: curAction.action,
+ actionValue: actionValue,
+ actionType: curAction.actionType,
+ encoderAction: action.encoderAction === undefined ? null : action.encoderAction
+ }), 200 * i);
+
+
+ if(action.useEncoder)
+ {
+ showEncoder(event, false);
+ return;
+ }
+
+ if(action.useDualEncoder)
+ showEncoder(event, action.useDualEncoder);
+ }
+}
+
+const setupControlLocationStyle = (ctrl, panelInfo) => {
+ if(panelInfo === undefined || panelInfo === null)
+ return {};
+
+ return { left: (ctrl.left / panelInfo.panelSize.width * 100.0) + '%', top: (ctrl.top / panelInfo.panelSize.height * 100.0) + '%' };
+}
+
+const setupControlWidthHeightStyle = (ctrl, panelInfo) => {
+ if (ctrl.controlSize === undefined)
+ return;
+
+ return { width: `calc(100% * ${ctrl.controlSize.width} / ${panelInfo.panelSize.width})`, height: `calc(100% * ${ctrl.controlSize.height} / ${panelInfo.panelSize.height})` };
+}
+
+const ImageControl = ({ctrl, panelInfo}) => {
+ const classes = useStyles();
+ const imagePath = getImagePath(panelInfo);
+ const isHighlighted = useRef(false);
+
+ const setupBackgroundImageStyle = () => {
+ if (ctrl.image === undefined) {
+ console.log('Missing image value for image control... Button Id: ' + ctrl.id);
+ return {};
+ }
+
+ return { backgroundImage: `url(${imagePath}${ctrl.image})` };
+ }
+
+ return useMemo(() =>(
+
+
+ ), [ctrl, isHighlighted.current])
+}
+
+const ImageButton = ({ctrl, panelInfo, showEncoder}) => {
+ const classes = useStyles();
+ const { simConnectData } = useSimConnectData();
+ const { isUsedArduino, isEnabledSound } = useLocalStorageData().configurationData;
+ const imagePath = getImagePath(panelInfo);
+ const isHighlighted = useRef(false);
+
+ const setupBackgroundImageStyle = () => {
+ if (ctrl.image === undefined) {
+ console.log('Missing image value for image button control... Button Id: ' + ctrl.id);
+ return {};
+ }
+
+ return { backgroundImage: `url(${imagePath}${ctrl.image})` };
+ }
+
+ const handleOnClick = (event) => {
+ if (ctrl.highlight === undefined || ctrl.highlight) {
+ isHighlighted.current = true;
+ setTimeout(() => { isHighlighted.current = false; }, 2000);
+ }
+
+ if (ctrl.actions != null && ctrl.actions.length > 0)
+ playSound(isEnabledSound);
+
+ if (!isUsedArduino && (ctrl.action.useEncoder || ctrl.action.useDualEncoder))
+ showEncoder(event, ctrl.action.useDualEncoder === undefined ? false : ctrl.action.useDualEncoder);
+
+ execActions(event, ctrl.action, simConnectData, showEncoder);
+ }
+
+ return useMemo(() =>(
+
+ handleOnClick(event)} />
+
+ ), [ctrl, isHighlighted.current, isUsedArduino, isEnabledSound])
+}
+
+const BindableImageButton = ({ctrl, panelInfo, showEncoder}) => {
+ const classes = useStyles();
+ const { simConnectData } = useSimConnectData();
+ const { isUsedArduino, isEnabledSound } = useLocalStorageData().configurationData;
+ const imagePath = getImagePath(panelInfo);
+ const isHighlighted = useRef(false);
+ const dataBindingValue = simConnectData[ctrl.binding?.variable];
+
+ const setupBackgroundImageStyle = () => {
+ if (ctrl.binding !== undefined && ctrl.binding.images !== undefined) {
+ let image = ctrl.binding.images.find(x => x.val === dataBindingValue);
+
+ if(dataBindingValue === undefined)
+ {
+ image = ctrl.binding.images[0];
+ }
+ else if (image === undefined && dataBindingValue !== undefined)
+ {
+ console.log('Missing binding value for bindable image button control... Button Id: ' + ctrl.id + ' Data Value: ' + dataBindingValue);
+ image = ctrl.binding.images[0];
+ }
+
+ if (image.rotate !== undefined)
+ return { backgroundImage: `url(${imagePath}${image.url})`, transform: `rotate(${image.rotate}deg)` };
+ else
+ return { backgroundImage: `url(${imagePath}${image.url})` };
+ }
+
+ return {};
+ }
+
+ const handleOnClick = (event) => {
+ if (ctrl.highlight === undefined || ctrl.highlight) {
+ isHighlighted.current = true;
+ setTimeout(() => { isHighlighted.current = false; }, 2000);
+ }
+
+ if (ctrl.actions != null && ctrl.actions.length > 0)
+ playSound(isEnabledSound);
+
+ if (!isUsedArduino && (ctrl.action.useEncoder || ctrl.action.useDualEncoder))
+ showEncoder(event, ctrl.action.useDualEncoder === undefined ? false : ctrl.action.useDualEncoder);
+
+ execActions(event, ctrl.action, simConnectData, showEncoder);
+ }
+
+ return useMemo(() =>(
+
+ handleOnClick(event)} />
+
+ ), [ctrl, dataBindingValue, isHighlighted.current, isUsedArduino, isEnabledSound])
+}
+
+const DigitDisplay = ({ctrl, panelInfo}) => {
+ const classes = useStyles();
+ const windowHeight = useWindowDimensions().windowHeight;
+ const dataBindingValue = useSimConnectData().simConnectData[ctrl.binding?.variable];
+
+ return useMemo(() =>(
+
+
+
+
+ ), [ctrl, dataBindingValue, windowHeight])
+}
+
+const WebBrowser = ({ctrl, panelInfo}) => {
+ const classes = useStyles();
+
+ return useMemo(() =>(
+
+
+
+ ), [ctrl])
+}
+
+const TextBlock = ({ctrl, panelInfo}) => {
+ const classes = useStyles();
+ const dataBindingValue = useSimConnectData().simConnectData[ctrl.binding?.variable];
+
+ const getTextBlockBindingValue = (ctrl) => {
+ if (ctrl.binding !== undefined && ctrl.binding.variable !== undefined && ctrl.binding.bindingValues !== undefined) {
+ var bindingValue = ctrl.binding.bindingValues.find(x => x.val === dataBindingValue);
+
+ if (bindingValue !== undefined)
+ return bindingValue.text;
+
+ return null;
+ }
+
+ return ctrl.binding.text;
+ }
+
+ return useMemo(() =>(
+
+ {getTextBlockBindingValue(ctrl)}
+
+ ), [ctrl, dataBindingValue])
+}
+
+
+const InteractiveControlTemplate = ({ ctrl, panelInfo, showEncoder }) => {
+ // preload all dynamic bindable images for control
+ useEffect(() => {
+ let imagePath = getImagePath(panelInfo);
+
+ if(ctrl?.binding?.images !== undefined)
+ {
+ ctrl.binding.images.forEach((p)=>{
+ let img = new Image();
+ img.src = imagePath + p.url;
+ img.onload = () => {};
+ });
+ }
+ }, [])
+
+ return (
+ <>
+ {ctrl.type === 'image' &&
+
+ { reload &&
+
+
+ }
+
+ )
+}
+
+export default MapPanel;
+
diff --git a/ReactClient/src/App/PopoutPanelContainer.js b/ReactClient/src/App/PopoutPanelContainer.js
new file mode 100644
index 0000000..351986f
--- /dev/null
+++ b/ReactClient/src/App/PopoutPanelContainer.js
@@ -0,0 +1,100 @@
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import { useSimConnectData } from '../Services/SimConnectDataProvider';
+import { useLocalStorageData } from '../Services/LocalStorageProvider';
+import KnobPadOverlay from '../Components/ControlDialog/KnobOverlay';
+import InteractiveControlTemplate from './InteractiveControlTemplate';
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ position: 'relative',
+ width: '100%',
+ height: '100%',
+ margin: '0 auto'
+ },
+ backgroundOverlay:
+ {
+ position: 'relative',
+ backgroundColor: theme.palette.background,
+ backgroundImage: (props) => `url(/config/profiles/${props.parentRootPath}/${props.rootPath}/img/${props.backgroundImage})`,
+ aspectRatio: (props) => `${props.panelSize.width}/${props.panelSize.height}`,
+ backgroundRepeat: 'no-repeat',
+ backgroundSize: '100% 100%',
+ zIndex: 1000
+ },
+ iframe: {
+ width: '100%',
+ height: '100%',
+ }
+}));
+
+const PopoutPanelContainer = ({panelInfo}) => {
+ const { simConnectSystemEvent } = useSimConnectData();
+ const { isUsedArduino } = useLocalStorageData().configurationData;
+ const classes = useStyles(panelInfo);
+ const [reload, setReload] = useState(true);
+ const [keyPadOpen, setKeyPadOpen] = useState(false);
+ const [showDualKnob, setShowDualKnob] = useState(false);
+ const [anchorEl, setAnchorEl] = useState(null);
+ const knobPadTimeout = useRef();
+
+ const handleKeyPadClose = () => {
+ setKeyPadOpen(false);
+ }
+
+ const handleShowEncoder = (event, useDualEncoder) => {
+ setShowDualKnob(useDualEncoder)
+
+ setAnchorEl(event.currentTarget);
+ if (!isUsedArduino)
+ setKeyPadOpen(true);
+
+ clearTimeout(knobPadTimeout.current);
+ knobPadTimeout.current = setTimeout(() => setKeyPadOpen(false), 2000);
+ }
+
+ const handleOnKnobPadActivate = () => {
+ clearTimeout(knobPadTimeout.current);
+ knobPadTimeout.current = setTimeout(() => setKeyPadOpen(false), 2000);
+ }
+
+ useEffect(() =>{
+ if(simConnectSystemEvent !== null)
+ {
+ if(simConnectSystemEvent === 'SIMSTART')
+ setReload(true);
+ else if(simConnectSystemEvent === 'SIMSTOP')
+ setReload(false);
+ }
+ }, [simConnectSystemEvent])
+
+
+ return useMemo(() => (
+
+ { reload &&
+ handleOnKnobPadActivate()}>
+
+ }
+
+ ), [panelInfo, keyPadOpen, isUsedArduino])
+}
+
+export default PopoutPanelContainer;
\ No newline at end of file
diff --git a/ReactClient/src/App/SettingConfiguration.js b/ReactClient/src/App/SettingConfiguration.js
new file mode 100644
index 0000000..6145b8f
--- /dev/null
+++ b/ReactClient/src/App/SettingConfiguration.js
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import { useLocalStorageData } from '../Services/LocalStorageProvider';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import SettingsIcon from '@mui/icons-material/Settings';
+import SwipeableDrawer from '@mui/material/SwipeableDrawer';
+import BooleanItem from '../Components/Control/BooleanItem';
+import NumericItem from '../Components/Control/NumericItem';
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ panel: {
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'flex-start',
+ alignItems: 'center',
+ width: '300px'
+ },
+ grid: {
+ padding: '8px'
+ },
+ gridTitle: {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ padding: '8px 0em',
+ marginTop: '8px',
+ borderTop: '1px solid ' + theme.palette.border,
+ borderBottom: '1px solid ' + theme.palette.border
+ },
+ gridItemKey: {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'flex-Start',
+ alignItems: 'center',
+ padding: '0 0 0 8px'
+ },
+ gridItemValueLabel: {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ padding: '0 8px 0 0'
+ }
+}));
+
+const SettingConfiguration = () => {
+ const classes = useStyles();
+ const { configurationData } = useLocalStorageData();
+ const [configSettingsIsOpen, setConfigSettingsIsOpen] = useState(false);
+
+ return (
+
+ { Array.isArray(panelInfo.definitions) && panelInfo.definitions !== undefined && panelInfo.definitions.map(ctrl =>
+ handleShowEncoder(e, useDualEncoder)}>
+
+
+ )}
+
+ }
+ {!isUsedArduino && keyPadOpen &&
+
+ setConfigSettingsIsOpen(true)} />
+ setConfigSettingsIsOpen(false)}
+ onOpen={() => setConfigSettingsIsOpen(true)}>
+
+
+ )
+}
+
+export default SettingConfiguration;
diff --git a/ReactClient/src/App/Telemetry.js b/ReactClient/src/App/Telemetry.js
new file mode 100644
index 0000000..a3e3f78
--- /dev/null
+++ b/ReactClient/src/App/Telemetry.js
@@ -0,0 +1,112 @@
+import React, { useMemo } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import { useSimConnectData } from '../Services/SimConnectDataProvider';
+import { Typography } from '@mui/material';
+import Grid from '@mui/material/Grid';
+import StopWatch from '../Components/Control/StopWatch';
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between'
+ },
+ sectionTelemetry: {
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ },
+ sectionSmall: {
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ paddingLeft: '30px',
+ paddingRight: '30px',
+ minHeight: '1.5em',
+ borderLeft: '1px solid gray',
+ borderRight: '1px solid gray',
+ },
+ telemetryDisplay: {
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center'
+ },
+ segmentDisplay:
+ {
+ display: 'flex',
+ justifyContent: 'center'
+ },
+ dataLabel:
+ {
+ color: 'rgb(32, 217, 32, 1)',
+ }
+}));
+
+const Telemetry = () => {
+ const classes = useStyles();
+
+ const { ELEVATOR_TRIM, AILERON_TRIM, FLAPS, RUDDER_TRIM, BRAKE_PARKING_INDICATOR,
+ GEAR_CENTER_POSITION, GEAR_LEFT_POSITION, GEAR_RIGHT_POSITION } = useSimConnectData().simConnectData;
+
+ const gearColor = (gear) => {
+ if (gear === 0)
+ return 'rgb(97, 99, 105, 1)';
+ else if (gear === 100)
+ return 'rgb(32, 217, 32, 1)';
+
+ return 'rgb(250, 186, 57, 1)';
+ }
+
+ const brakeColor = (brake) => {
+ if (brake === 1)
+ return 'rgb(255, 0, 0, 1)';
+
+ return 'rgb(32, 217, 32, 1)';
+ }
+
+ return useMemo(() => (
+
+
+
+ Settings
+
+
+
+
+ setMapOpen(!mapOpen)} panelProfile={panelProfile}>
+
+ }
+
+
+
+
+ {panelProfile.subPanels.map(subPanel =>
+
+
+ )}
+
+
+ }
+
+ Loading panel....................
+Panel: {panelId}
+- history.push(`/${plane.planeId}/${panel.panelId}`)}>
+
+
+ );
+}
+
+export default WebPanelSelection
+
diff --git a/ReactClient/src/Components/Control/BooleanItem.js b/ReactClient/src/Components/Control/BooleanItem.js
new file mode 100644
index 0000000..0b1baff
--- /dev/null
+++ b/ReactClient/src/Components/Control/BooleanItem.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import Switch from '@mui/material/Switch';
+import { useLocalStorageData } from '../../Services/LocalStorageProvider';
+
+const useStyles = makeStyles((theme) => ({
+ gridItemKey: {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'flex-Start',
+ alignItems: 'center',
+ padding: '0 0 0 8px'
+ },
+ gridItemValueLabel: {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ padding: '0 8px 0 0'
+ }
+}));
+
+const BooleanItem = (props) => {
+ const classes = useStyles();
+ const { configurationData, updateConfigurationData, planeProfile } = useLocalStorageData();
+
+ const handleChange = (key, value = null) => {
+ let updatedData = { ...configurationData };
+
+ switch (key) {
+ case 'dataRefreshInterval':
+ case 'mapRefreshInterval':
+ updatedData[key] = value;
+ break;
+ case 'isUsedArduino':
+ case 'isEnabledSound':
+ case 'showLog':
+ updatedData[key] = !configurationData[key];
+ break;
+ default:
+ updatedData.panelVisibility[planeProfile][key] = !configurationData.panelVisibility[planeProfile][key]
+ break;
+ }
+
+ updateConfigurationData(updatedData);
+ }
+
+
+ return (
+ -
+ Please select a plane profile to open the corresponding panel
+
+ }>
+ { planePanelProfileInfo !== undefined && planePanelProfileInfo.map((plane) =>
+
+
+ )
+}
+
+DualKnob.propTypes = {
+ width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired,
+};
+
+export default withWidth()(DualKnob);
\ No newline at end of file
diff --git a/ReactClient/src/Components/Control/MapDisplay.js b/ReactClient/src/Components/Control/MapDisplay.js
new file mode 100644
index 0000000..4f27dea
--- /dev/null
+++ b/ReactClient/src/Components/Control/MapDisplay.js
@@ -0,0 +1,278 @@
+import React, { useEffect, useState, useRef, useMemo } from 'react';
+import { useSimConnectData } from '../../Services/SimConnectDataProvider';
+import { useLocalStorageData } from '../../Services/LocalStorageProvider';
+import { useInterval } from '../Util/hooks';
+import { LayersControl, TileLayer, useMapEvents } from 'react-leaflet'
+import L from 'leaflet';
+import 'leaflet.marker.slideto';
+import 'leaflet-marker-rotation';
+import 'leaflet-easybutton';
+import '@elfalem/leaflet-curve';
+import {BingLayer} from 'react-leaflet-bing-v2';
+
+const MAP_TYPE_DEFAULTS = { zoomLevel: 12, flightFollowing: true, showFlightPlan: true, uiZoomFactor: 1, planeRadiusCircleRange: 2.5};
+
+const MAP_PROVIDER = {
+ openTopo: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
+ openStreet: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+ dark: 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png',
+ googleStreet: 'http://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}',
+ googleTerrain: 'http://mt0.google.com/vt/lyrs=p&hl=en&x={x}&y={y}&z={z}',
+ googleSatellite: 'http://mt0.google.com/vt/lyrs=s&hl=en&x={x}&y={y}&z={z}',
+ googleHybrid: 'http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}',
+ aviation: 'http://{s}.tile.maps.openaip.net/geowebcache/service/tms/1.0.0/openaip_basemap@EPSG%3A900913@png/{z}/{x}/{y}.png',
+}
+
+const getPlaneRadiusCircleTooltip = (text) =>
+{
+ let tooltip = `
+
+
+ { handleLowerKnobChanged(value) }}
+ value={lowerKnob}
+ ariaLabelledBy={'lowerknob'}>
+
+
+ {showDualKnob &&
+
+ { handleUpperKnobChanged(value) }}
+ value={upperKnob}
+ ariaLabelledBy={'upperknob'}>
+
+
+ }
+ { showKnobButton &&
+
+
+ }
+ ${text}
`;
+ return tooltip;
+}
+
+const drawPlaneCircleRadius = (map, planePosition, scaleInNm = 2.5, isCreated, marker) => {
+ // About radius of 178 pixels for a zoom level of 12 has the desire 2.5nm circle radius on screen size
+ // Zoom level of 12 is equal to 2.5nm
+ // ** Since I can't control exact zoom level in small fractionin leaflet, the radius numbers won't be nicely rounded
+
+ let scale = 2.5 / scaleInNm;
+ let circlePixelRadius = 178 * scale;
+ let rangeRadius = 2.5 * Math.pow(2, 12 - map.getZoom()) * scale ;
+ let formattedRangeRadius;
+ let rangeUnit;
+
+ if(rangeRadius >= 5)
+ {
+ rangeUnit = 'NM';
+ formattedRangeRadius = rangeRadius.toFixed(0);
+ }
+ else if(rangeRadius >= 2.5)
+ {
+ rangeUnit = 'NM';
+ formattedRangeRadius = rangeRadius.toFixed(1);
+ }
+ else if(rangeRadius >= 1.25)
+ {
+ rangeUnit = 'NM';
+ formattedRangeRadius = rangeRadius.toFixed(2);
+ }
+ else if(rangeRadius <= 0.625)
+ {
+ rangeUnit = 'FT';
+ formattedRangeRadius = (rangeRadius * 6076.12).toFixed(0)
+ }
+
+ // draw a range circle
+ if(isCreated)
+ {
+ return L.circleMarker(planePosition, {radius: circlePixelRadius, color: 'white', fill: false}).bindTooltip(toolTip, { permanent: true, direction: 'right', offset: [-155 * scale, -130 * scale] });
+ }
+
+ let toolTip = getPlaneRadiusCircleTooltip(formattedRangeRadius + rangeUnit);
+ marker.radius = circlePixelRadius;
+ marker.unbindTooltip();
+ marker.bindTooltip(toolTip, { permanent: true, direction: 'right', offset: [-155 * scale, -130 * scale] });
+ return marker;
+}
+
+const centerPlaneToMap = (map, mapPosition, planePosition) => {
+ mapPosition.current = planePosition.current;
+ if (mapPosition.current !== null)
+ map.panTo(mapPosition.current);
+}
+
+const PLANE_ICON_DARK = L.icon({
+ iconUrl: '/img/airplane-dark.png',
+ iconSize: [36, 36],
+ iconAnchor: [18, 18]
+});
+
+const PLANE_ICON_LIGHT = L.icon({
+ iconUrl: '/img/airplane-light.png',
+ iconSize: [36, 36],
+ iconAnchor: [18, 18]
+});
+
+const formatLatLong = (lat, lon) => {
+ if(lat === undefined || lon === undefined)
+ return [0,0];
+
+ return [lat, lon]
+ //return [lat * 180 / Math.PI, lon * 180 / Math.PI]
+}
+
+let centerPlaneIcon, flightFollowingIcon, showFlightPlanIcon;
+
+const MapDisplay = ({refresh}) => {
+ const { simConnectData } = useSimConnectData();
+ const { PLANE_HEADING_TRUE, GPS_LAT, GPS_LON } = simConnectData;
+ const { mapConfig, configurationData } = useLocalStorageData();
+ const { mapRefreshInterval } = configurationData;
+
+ const [ mapDefaults ] = useState(MAP_TYPE_DEFAULTS);
+ const [ flightFollowing, setFlightFollowing ] = useState(MAP_TYPE_DEFAULTS.flightFollowing);
+ const [ showFlightPlan, setShowFlightPlan ] = useState(MAP_TYPE_DEFAULTS.showFlightPlan);
+
+ const planePosition = useRef(formatLatLong(GPS_LAT, GPS_LON));
+ const mapPosition = useRef(formatLatLong(GPS_LAT, GPS_LON));
+
+ //const map = useMap();
+ const layerGroupFlightPlan = useRef();
+ const layerGroupPlanePosition = useRef();
+ const layerGroupPlaneMarker = useRef();
+ const layerGroupPlaneMarkerLegend = useRef();
+ const layerGroupPlaneCircle = useRef();
+ const layerGroupPlaneKeepAtCenter = useRef(false);
+ const waypointLegend = useRef();
+ const activeMapLayer = useRef('Bing Roads');
+ const bingKey = window._BINGKEY;
+
+ const map = useMapEvents({
+ dragstart: (e) => {
+ setFlightFollowing(false);
+ },
+ click: (e) => {
+ layerGroupPlaneKeepAtCenter.current = false;
+ }
+ });
+
+ useEffect(() => {
+ // configure map container
+ map.attributionControl.setPrefix(); // remove leaflet logo
+
+ layerGroupFlightPlan.current = L.layerGroup();
+ map.addLayer(layerGroupFlightPlan.current);
+
+ layerGroupPlanePosition.current = L.layerGroup();
+ map.addLayer(layerGroupPlanePosition.current);
+
+ layerGroupPlaneMarker.current = L.rotatedMarker([0, 0], { icon: PLANE_ICON_DARK, rotationAngle: 0, rotationOrigin: 'center' });
+ map.addLayer(layerGroupPlaneMarker.current);
+
+ layerGroupPlaneCircle.current = drawPlaneCircleRadius(map, [0,0], mapDefaults.planeRadiusCircleRange, true, null);
+ layerGroupPlanePosition.current.addLayer(layerGroupPlaneCircle.current);
+
+ layerGroupPlaneKeepAtCenter.current = true;
+
+ layerGroupPlaneMarkerLegend.current = L.layerGroup();
+ map.addLayer(layerGroupPlaneMarkerLegend.current);
+
+ waypointLegend.current = L.control({ position: 'topright' });
+ waypointLegend.current.onAdd = () => {
+ var div = L.DomUtil.create('div', 'waypointLegend');
+ div.setAttribute('id', 'waypointLegend');
+ div.style.display = 'none';
+ return div;
+ };
+ waypointLegend.current.addTo(map);
+
+ map.setZoom(mapDefaults.zoomLevel);
+
+ map.setView(planePosition.current);
+
+ document.getElementsByClassName('leaflet-container')[0].style.zoom = mapDefaults.uiZoomFactor;
+ }, [])
+
+ useEffect(() => {
+ map.invalidateSize();
+ }, [refresh])
+
+ useEffect(() => {
+ map.on("baselayerchange", e => {
+ switch (e.name) {
+ case 'Dark':
+ case 'Google Satellite':
+ case 'Google Hybrid':
+ case 'Bing Aerial':
+ case 'Bing Aerial with Labels':
+ layerGroupPlaneMarker.current.setIcon(PLANE_ICON_LIGHT);
+ break;
+ default:
+ layerGroupPlaneMarker.current.setIcon(PLANE_ICON_DARK);
+ break;
+ }
+
+ activeMapLayer.current = mapConfig.currentLayer;
+ });
+ }, [map])
+
+ useEffect(() => {
+ if(centerPlaneIcon !== undefined) map.removeControl(centerPlaneIcon);
+ if(flightFollowingIcon !== undefined) map.removeControl(flightFollowingIcon);
+ if(showFlightPlanIcon !== undefined) map.removeControl(showFlightPlanIcon);
+
+ centerPlaneIcon = L.easyButton('', () => {
+ centerPlaneToMap(map, mapPosition, planePosition);
+ }).addTo(map);
+
+ flightFollowingIcon = L.easyButton(``, () => {
+ setFlightFollowing(!flightFollowing);
+ layerGroupPlaneKeepAtCenter.current = !flightFollowing;
+ }).addTo(map);
+
+ showFlightPlanIcon = L.easyButton(``, () => {
+ setShowFlightPlan(!showFlightPlan);
+ }).addTo(map);
+
+ }, [map, flightFollowing, showFlightPlan])
+
+
+ useInterval(() => {
+ let newPosition = formatLatLong(GPS_LAT, GPS_LON);
+ planePosition.current = newPosition;
+ }, mapRefreshInterval);
+
+ useEffect(() => {
+ if (flightFollowing)
+ {
+ map.panTo(planePosition.current, {animate: false});
+
+ layerGroupPlaneCircle.current = drawPlaneCircleRadius(map, planePosition.current, mapDefaults.planeRadiusCircleRange, false, layerGroupPlaneCircle.current);
+ layerGroupPlaneCircle.current.slideTo(planePosition.current, { duration: mapRefreshInterval, keepAtCenter: layerGroupPlaneKeepAtCenter.current });
+
+ if (planePosition.current !== null) {
+ layerGroupPlaneMarker.current.setRotationAngle(PLANE_HEADING_TRUE);
+ layerGroupPlaneMarker.current.slideTo(planePosition.current, { duration: mapRefreshInterval, keepAtCenter: layerGroupPlaneKeepAtCenter.current });
+ }
+ }
+ }, [flightFollowing, planePosition.current])
+
+ return useMemo(() => (
+
+
+
+
+
+ )
+}
+
+NumericEntryDisplay.defaultProps = {
+ initialValue: 0,
+ labelLeft: null,
+ labelRight: null,
+ numberOfDigit: 0,
+ numberOfDisplayDigit: 1,
+ decimalPlaces: 0,
+ minValue: 0,
+ maxValue: 0,
+ disabled: false,
+ disableNumPadKeys: [],
+ disableEntry: false,
+ usedByArduino: true
+};
+
+export default NumericEntryDisplay;
\ No newline at end of file
diff --git a/ReactClient/src/Components/Control/NumericItem.js b/ReactClient/src/Components/Control/NumericItem.js
new file mode 100644
index 0000000..bebf194
--- /dev/null
+++ b/ReactClient/src/Components/Control/NumericItem.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import NumericEntryDisplay from './NumericEntryDisplay';
+import { useLocalStorageData } from '../../Services/LocalStorageProvider';
+
+const useStyles = makeStyles((theme) => ({
+ gridItemKey: {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'flex-Start',
+ alignItems: 'center',
+ padding: '0 0 0 8px'
+ },
+ gridItemValueLabel: {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ padding: '0 8px 0 0'
+ }
+}));
+
+const NumericItem = (props) => {
+ const classes = useStyles();
+ const { configurationData, updateConfigurationData, planeProfile } = useLocalStorageData();
+
+ const handleChange = (key, value = null) => {
+ let updatedData = { ...configurationData };
+
+ switch (key) {
+ case 'dataRefreshInterval':
+ case 'mapRefreshInterval':
+ updatedData[key] = value;
+ break;
+ case 'isUsedArduino':
+ case 'showLog':
+ updatedData[key] = !configurationData[key];
+ break;
+ default:
+ updatedData.panelVisibility[planeProfile][key] = !configurationData.panelVisibility[planeProfile][key]
+ break;
+ }
+
+ updateConfigurationData(updatedData);
+ }
+
+ return (
+
+ {labelLeft !== null &&
+ {labelLeft}
+ }
+ {labelRight}
+ }
+
+
+
+
+
+ {labelRight !== null &&
+
+ handleChange(props.itemKey, (Number(value)))}
+ />
+
+
+ {parseDigits(value).map((v, index) => {
+ return (
+
+ )
+}
+
+SevenSegmentDisplay.defaultProps = {
+ heightRatio: 12,
+ numberOfDisplayDigit: 1,
+ decimalPlaces: 0,
+ value: '',
+ onColor: 'rgb(255, 255, 255, 1)',
+ offColor: 'rgb(40, 44, 57, 0.4)'
+};
+
+export default SevenSegmentDisplay;
\ No newline at end of file
diff --git a/ReactClient/src/Components/Control/SevenSegmentDisplay/Arrow.js b/ReactClient/src/Components/Control/SevenSegmentDisplay/Arrow.js
new file mode 100644
index 0000000..2691266
--- /dev/null
+++ b/ReactClient/src/Components/Control/SevenSegmentDisplay/Arrow.js
@@ -0,0 +1,39 @@
+import React from 'react';
+
+const INVERSE_DIRECTION = {
+ left: 'right',
+ right: 'left',
+ top: 'bottom',
+ bottom: 'top'
+}
+
+const BORDER_COLOR_PROP = {
+ left: 'borderLeftColor',
+ right: 'borderRightColor',
+ top: 'borderTopColor',
+ bottom: 'borderBottomColor'
+}
+
+const Arrow = (props) => {
+ return (
+
+ )
+}
+
+export default Arrow;
\ No newline at end of file
diff --git a/ReactClient/src/Components/Control/SevenSegmentDisplay/HSegment.js b/ReactClient/src/Components/Control/SevenSegmentDisplay/HSegment.js
new file mode 100644
index 0000000..f618c02
--- /dev/null
+++ b/ReactClient/src/Components/Control/SevenSegmentDisplay/HSegment.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import Arrow from './Arrow';
+
+const HSegment = ({ width, height, color }) => {
+ return (
+
+
+ )
+ })}
+
+
+ )
+}
+
+export default HSegment;
\ No newline at end of file
diff --git a/ReactClient/src/Components/Control/SevenSegmentDisplay/README.md b/ReactClient/src/Components/Control/SevenSegmentDisplay/README.md
new file mode 100644
index 0000000..b151664
--- /dev/null
+++ b/ReactClient/src/Components/Control/SevenSegmentDisplay/README.md
@@ -0,0 +1,11 @@
+Credit goes to Mazhar Shaikh with the base UI segment code.
+
+https://github.com/z0h4n/react-seven-segment-display
+
+- Update code structure and algorithm
+- Update segment map to use bit calculation
+- Update code to use material UI
+- Update code to use responsive design 'em' unit instead of 'px'
+- Add addition segments and characters and default values
+- Create wrapper class to display multiple number of digit panels instead of one digit at a time
+- Add decimal and number padding capabilities
diff --git a/ReactClient/src/Components/Control/SevenSegmentDisplay/SevenSegmentDisplayDigit.js b/ReactClient/src/Components/Control/SevenSegmentDisplay/SevenSegmentDisplayDigit.js
new file mode 100644
index 0000000..e8c6a52
--- /dev/null
+++ b/ReactClient/src/Components/Control/SevenSegmentDisplay/SevenSegmentDisplayDigit.js
@@ -0,0 +1,83 @@
+import React from 'react';
+import HSegment from './HSegment';
+import VSegment from './VSegment';
+
+// Segment map uses bit based algorithm
+// References: http://www.uize.com/examples/seven-segment-display.html
+
+const bitReadAll = (value) => {
+ return [6, 5, 4, 3, 2, 1, 0].map(function (bit) { return Boolean((value >> bit) & 0x01); });
+}
+
+const segmentMap = {
+ 0: bitReadAll(0x7e),
+ 1: bitReadAll(0x30),
+ 2: bitReadAll(0x6d),
+ 3: bitReadAll(0x79),
+ 4: bitReadAll(0x33),
+ 5: bitReadAll(0x5b),
+ 6: bitReadAll(0x5f),
+ 7: bitReadAll(0x70),
+ 8: bitReadAll(0x7f),
+ 9: bitReadAll(0x7b),
+ '_': bitReadAll(0x08),
+ '': bitReadAll(0x00),
+ ' ': bitReadAll(0x00),
+ '-': bitReadAll(0x01)
+}
+
+const SevenSegmentDisplayDigit = ({ onColor, offColor, heightRatio, value }) => {
+ let width;
+ let height;
+ if(heightRatio < 0.3) {
+ width = Number((heightRatio).toFixed(2));
+ height = Number((heightRatio / 5).toFixed(2));
+ }
+ else {
+ width = Number((heightRatio).toFixed(1));
+ height = Number((heightRatio / 5).toFixed(1));
+ }
+
+ if (!isNaN(value) && value !== '' && value !== ' ') value = Number(value);
+
+ const [a, b, c, d, e, f, g] = value in segmentMap ? segmentMap[value] : bitReadAll(Number(value));
+
+ if (value === '.') {
+ return (
+
+
+ )
+ }
+
+ return (
+
+
+ )
+}
+
+SevenSegmentDisplayDigit.defaultProps = {
+ value: '',
+ onColor: 'rgb(32, 217, 32, 1)',
+ offColor: 'rgb(40, 44, 57, 0.3)'
+};
+
+export default SevenSegmentDisplayDigit;
\ No newline at end of file
diff --git a/ReactClient/src/Components/Control/SevenSegmentDisplay/VSegment.js b/ReactClient/src/Components/Control/SevenSegmentDisplay/VSegment.js
new file mode 100644
index 0000000..bef5c49
--- /dev/null
+++ b/ReactClient/src/Components/Control/SevenSegmentDisplay/VSegment.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import Arrow from './Arrow'
+
+const VSegment = ({ width, height, color, align }) => {
+ return (
+
+
+
+
+
+
+ )
+}
+
+export default VSegment;
diff --git a/ReactClient/src/Components/Control/SimRate.js b/ReactClient/src/Components/Control/SimRate.js
new file mode 100644
index 0000000..6c691f4
--- /dev/null
+++ b/ReactClient/src/Components/Control/SimRate.js
@@ -0,0 +1,57 @@
+import React, { useMemo } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import { useSimConnectData } from '../../Services/SimConnectDataProvider';
+import { simActions } from '../../Services/ActionProviders/simConnectActionHandler';
+import { Typography } from '@mui/material';
+import NumericEntryDisplay from '../Control/NumericEntryDisplay';
+
+const useStyles = makeStyles((theme) => ({
+ section: theme.custom.panelSection,
+ simrateEntry: {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-around',
+ alignItems: 'center'
+ }
+}));
+
+const postSimRateChangeAction = (currentSimRate, newSimRate) => {
+ let step = Math.log2(newSimRate) - Math.log2(currentSimRate);
+
+ for (let i = 0; i < Math.abs(step); i++) {
+ Math.sign(step) === 1 ? simActions.SimRate.increase() : simActions.SimRate.decrease();
+ }
+}
+
+const SimRate = () => {
+ const classes = useStyles();
+ const { SIMULATION_RATE } = useSimConnectData().simConnectData;
+
+ const handleOnSet = (newSimRate, currentSimRate) => {
+ postSimRateChangeAction(currentSimRate, newSimRate);
+ }
+
+ return useMemo(() => (
+
+ SIM RATE
+
+ ), [classes, SIMULATION_RATE])
+}
+
+export default SimRate;
\ No newline at end of file
diff --git a/ReactClient/src/Components/Control/StopWatch.js b/ReactClient/src/Components/Control/StopWatch.js
new file mode 100644
index 0000000..03eebb7
--- /dev/null
+++ b/ReactClient/src/Components/Control/StopWatch.js
@@ -0,0 +1,93 @@
+import React, { useState, useRef } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import Button from '@mui/material/Button';
+
+const useStyles = makeStyles({
+ root: {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'left',
+ alignItems: 'center'
+ },
+ displayActive: {
+ fontSize: '0.7em',
+ color: 'rgb(32, 217, 32, 1)',
+ marginRight: '0.5em',
+
+ },
+ displayInactive: {
+ fontSize: '0.7em',
+ color: 'rgb(255, 255, 255, 1)',
+ marginRight: '0.5em'
+ },
+ button: {
+ width: '5em',
+ minHeight: '3em',
+ fontSize: '0.5em',
+ padding: 0,
+ margin: '0 0 0 1.5em'
+ }
+});
+
+const StopWatch = () => {
+ const classes = useStyles();
+ const [startLabel, setStartLabel] = useState('Start');
+ const [isActive, setIsActive] = useState(false)
+ const [timer, setTimer] = useState(0);
+ const timerInterval = useRef(null);
+
+ const handleOnStart = () => {
+ if (isActive) {
+ setStartLabel('Start');
+ clearInterval(timerInterval.current);
+ setIsActive(false);
+ }
+ else {
+ setStartLabel('Stop')
+ setIsActive(true);
+ timerInterval.current = setInterval(() => {
+ setTimer((timer) => timer + 1);
+ }, 1000);
+ }
+ }
+
+ const handleOnReset = () => {
+ clearInterval(timerInterval.current);
+ setTimer(0);
+ setIsActive(false);
+ setStartLabel('Start');
+ }
+
+ const formatTime = () => {
+ const getSeconds = `0${(timer % 60)}`.slice(-2)
+ const minutes = `${Math.floor(timer / 60)}`
+ const getMinutes = `0${minutes % 60}`.slice(-2)
+ const getHours = `0${Math.floor(timer / 3600)}`.slice(-2)
+
+ return `${getHours} : ${getMinutes} : ${getSeconds}`
+ }
+
+ return (
+
+ handleOnSet(value, SIMULATION_RATE)} />
+
+
+
+ X
+
+
+
+ )
+}
+
+export default StopWatch;
+
+
diff --git a/ReactClient/src/Components/ControlDialog/KnobOverlay.js b/ReactClient/src/Components/ControlDialog/KnobOverlay.js
new file mode 100644
index 0000000..1563b8b
--- /dev/null
+++ b/ReactClient/src/Components/ControlDialog/KnobOverlay.js
@@ -0,0 +1,125 @@
+import React from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import DualKnob from '../Control/DualKnob';
+import Popover from '@mui/material/Popover';
+import { simActions } from '../../Services/simConnectActionHandler';
+
+const useStyles = makeStyles((theme) => ({
+ dialog: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ touchAction: 'none',
+ backgroundColor: 'transparent',
+ opacity: 0.5,
+ '& .MuiPopover-paper':
+ {
+ backgroundImage: 'none !important',
+ backgroundColor: 'transparent',
+ border: '0 !important',
+ boxShadow: 'none'
+ }
+ },
+ paper: {
+ ...theme.custom.defaultDialog,
+ width: '255px',
+ height: '255px',
+ backgroundColor: 'transparent',
+ border: '1px solid transparent'
+ },
+ controlBar: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ height: '3em',
+ padding: '0 8px'
+ },
+ directInputSwitch: {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center'
+ },
+ numericDisplay: {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ background: 'transparent',
+ border: '1px solid ' + theme.palette.border
+ },
+ knob: {
+ [theme.breakpoints.up('sm')]: { marginTop: '100px' },
+ [theme.breakpoints.up('md')]: { marginTop: '125px' }
+ },
+
+}));
+
+const KnobOverlay = ({ open, onClose, anchorEl, showDualKnob = false, onKnobPadActivate }) => {
+ const classes = useStyles();
+
+ const handleClose = () => {
+ if (onClose !== undefined)
+ onClose();
+ }
+
+ const HandleUpperKnobIncrease = () => {
+ simActions.Encoder.upperIncrease();
+ onKnobPadActivate();
+ }
+
+ const HandleUpperKnobDecrease = () => {
+ simActions.Encoder.upperDecrease();
+ onKnobPadActivate();
+ }
+
+ const HandleLowerKnobIncrease = () => {
+ simActions.Encoder.lowerIncrease();
+ onKnobPadActivate();
+ }
+
+ const HandleLowerKnobDecrease = () => {
+ simActions.Encoder.lowerDecrease();
+ onKnobPadActivate();
+ }
+
+ const HandleEncoderPush = () => {
+ simActions.Encoder.push();
+ onKnobPadActivate();
+ }
+
+ return (
+ {formatTime()}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {String(keyPadValue).replace(/^0\.[0]*/, '')}
+
+
+
+ {[1, 2, 3, 4, 5, 6, 7, 8, 9, '-', 0].map((v, index) => {
+ return (
+
+
+
+ )
+ })}
+
+
+