feat: display & brightness settings

package.json

@@ -46,6 +46,7 @@
         "react-indiana-drag-scroll": "^2.2.0",
         "react-leaflet": "^3.2.2",
         "react-msfs": "^0.2.0",
+        "react-range": "^1.10.0",
         "react-router-dom": "^6.2.1",
         "react-spinners": "^0.13.8",
         "react-zoom-pan-pinch": "^3.0.6",

salty-747/SimObjects/Airplanes/Salty_B747_8i/model/747_8I_INTERIOR.xml

@@ -27,7 +27,7 @@
 			</DefaultTemplateParameters>
 
 			<UseTemplate Name="ASOBO_GT_Material_Emissive_Code">
-				<EMISSIVE_CODE>5</EMISSIVE_CODE>
+				<EMISSIVE_CODE>(L:SALTY_EFB_BRIGHTNESS)</EMISSIVE_CODE>
 			</UseTemplate>
 		</Component>
 

src/instruments/src/EFB/apps/Settings/DisplayAndBrightness.tsx

@@ -0,0 +1,117 @@
+import React, { FC, useContext } from "react";
+
+import { ContentPageContainer } from "./components/ContentPageContainer";
+import { ItemGroup } from "../../components/ItemGroup";
+import { ListItem } from "../../components/ListItem";
+import styled from "styled-components";
+import { Range, getTrackBackground } from "react-range";
+import { BsBrightnessHighFill, BsBrightnessLowFill } from "react-icons/bs";
+import { Toggle } from "./components/Toggle";
+import { Checkmark } from "./components/Checkmark";
+import { SettingsContext } from "./SettingsContext";
+
+export const DisplayAndBrightness: FC = () => {
+    const { brightness, setBrightness } = useContext(SettingsContext);
+
+    const min = 0.1;
+    const max = 6;
+    const step = 0.05;
+
+    return (
+        <ContentPageContainer title="Display & Brightness">
+            <ItemGroup label="APPEARANCE">
+                <ListItem noMouseDownEffect grow>
+                    <ThemeContainer>
+                        <Theme>
+                            <ThemeExample bg="lightgray" />
+                            <div>Light</div>
+                            <Checkmark selected={true} />
+                        </Theme>
+                        <Theme>
+                            <ThemeExample bg="#2e2e30" />
+                            <div>Dark</div>
+                            <Checkmark selected={false} />
+                        </Theme>
+                    </ThemeContainer>
+                </ListItem>
+                <Toggle label="Automatic" enabled={false} onClick={() => {}} />
+            </ItemGroup>
+            <ItemGroup label="BRIGHTNESS">
+                <ListItem noMouseDownEffect>
+                    <BsBrightnessLowFill fill="gray" size={42} style={{ margin: "20px" }} />
+                    <Range
+                        step={step}
+                        min={min}
+                        max={max}
+                        values={[brightness]}
+                        onChange={(values) => setBrightness(values[0])}
+                        renderTrack={({ props, children }) => (
+                            <TrackContainer onMouseDown={props.onMouseDown} onTouchStart={props.onTouchStart}>
+                                <Track
+                                    ref={props.ref}
+                                    bg={getTrackBackground({
+                                        values: [brightness],
+                                        colors: ["#4FA0FC", "#e9e9eb"],
+                                        min,
+                                        max,
+                                    })}
+                                >
+                                    {children}
+                                </Track>
+                            </TrackContainer>
+                        )}
+                        renderThumb={({ props }) => <Thumb {...props} key={props.key} />}
+                    />
+                    <BsBrightnessHighFill fill="gray" size={42} style={{ margin: "20px" }} />
+                </ListItem>
+                <Toggle label="Automatic" enabled={false} onClick={() => {}} />
+            </ItemGroup>
+        </ContentPageContainer>
+    );
+};
+
+const ThemeExample = styled.div<{ bg: string }>`
+    width: 120px;
+    height: 170px;
+    background: ${({ bg }) => bg};
+    border-radius: 15px;
+`;
+
+const Theme = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    * {
+        margin: 10px 0;
+    }
+`;
+
+const ThemeContainer = styled.div`
+    flex: 1;
+    padding: 15px 50px;
+    display: flex;
+    justify-content: space-around;
+`;
+
+const Thumb = styled.div`
+    height: 40px;
+    width: 40px;
+    background-color: white;
+    border-radius: 50%;
+    box-shadow: 2px 2px 13.5px 7px rgba(0, 0, 0, 0.1);
+`;
+
+const Track = styled.div<{ bg: string }>`
+    height: 7px;
+    width: 100%;
+    border-radius: 10px;
+    background: ${({ bg }) => bg};
+`;
+
+const TrackContainer = styled.div`
+    height: 36px;
+    display: flex;
+    flex: 1;
+    align-items: center;
+`;

src/instruments/src/EFB/apps/Settings/SettingsContext.tsx

@@ -1,5 +1,5 @@
-import React, { FC, ReactNode, useState } from "react";
-import { usePersistentProperty, usePersistentPropertyWithDefault } from "react-msfs";
+import React, { FC, ReactNode, useEffect } from "react";
+import {usePersistentPropertyWithDefault, useSimVarSyncedPersistentProperty } from "react-msfs";
 import { AtisSource, MetarSource, TafSource } from "../../lib/weather";
 
 type SettingsContextProps = {
@@ -46,6 +46,8 @@ export const SettingsContextProvider: FC<{ children: ReactNode | ReactNode[] }>
     ];
 
     const [simbridgePort, setSimbridgePort] = usePersistentPropertyWithDefault("SALTY_SIMBRIDGE_PORT", defaults.simbridgePort.toString());
+
+
     return (
         <SettingsContext.Provider
             value={{

src/instruments/src/EFB/apps/Settings/components/Checkmark.tsx

@@ -0,0 +1,24 @@
+import React, { FC } from "react";
+import { IoIosCheckmark } from "react-icons/io";
+import styled from "styled-components";
+
+type ChechmarkProps = {
+    selected: boolean;
+};
+
+export const Checkmark: FC<ChechmarkProps> = ({ selected }) => (
+    <StyledCheckmark selected={selected}>
+        <IoIosCheckmark size={50} fill="white" />
+    </StyledCheckmark>
+);
+
+const StyledCheckmark = styled.div<{ selected: boolean }>`
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    border: 1px solid lightgray;
+    background: ${({ selected }) => selected ? "#4FA0FC" : "white"};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;

src/instruments/src/EFB/apps/Weather/index.tsx

@@ -50,6 +50,8 @@ export const Weather: FC = () => {
         setLoading(false);
     };
 
+    console.log("øtt")
+
     const onUplink = async () => {
         try {
             const newOfp = await SimbriefClient.getOfp(await SimbriefClient.getSimbriefUserIDFromUsername(simbriefUsername as string));

src/instruments/src/EFB/components/ItemGroup.tsx

@@ -1,16 +1,24 @@
 import React, { FC, Children } from "react";
 import styled from "styled-components";
 
-export const ItemGroup: FC<{ children: React.ReactNode | React.ReactNode[], style?: React.CSSProperties}> = ({ children, style }) => (
-    <StyledItemGroup single={Children.count(children) === 1} style={style}>{children}</StyledItemGroup>
+export const ItemGroup: FC<{ children: React.ReactNode | React.ReactNode[]; style?: React.CSSProperties; label?: string }> = ({
+    children,
+    style,
+    label,
+}) => (
+    <ItemGroupContainer>
+        {label && <Label>{label}</Label>}
+        <StyledItemGroup single={Children.count(children) === 1} style={style}>
+            {children}
+        </StyledItemGroup>
+    </ItemGroupContainer>
 );
 
 export const StyledItemGroup = styled.div`
     width: 100%;
     display: flex;
     flex-direction: column;
     border-radius: 15px;
-    margin: 55px 0;
 
     .item:nth-child(1) {
         border-radius: 15px 15px 0 0;
@@ -20,3 +28,15 @@ export const StyledItemGroup = styled.div`
         border-radius: ${(props: { single?: boolean }) => (props.single ? "15px" : "0 0 15px 15px")};
     }
 `;
+
+const ItemGroupContainer = styled.div`
+    width: 100%;
+    margin: 55px 0;
+`;
+
+const Label = styled.div`
+    font-size: 20px;
+    color: gray;
+    font-weight: 300;
+    padding: 10px 20px;
+`;

src/instruments/src/EFB/components/ListItem.tsx

@@ -1,9 +1,9 @@
 import React, { FC, useState, useEffect } from "react";
 import styled from "styled-components";
 
-type ItemProps = { gray?: boolean; noMouseDownEffect?: boolean; onClick?: () => void; children: React.ReactNode[] | React.ReactNode };
+type ItemProps = { gray?: boolean; noMouseDownEffect?: boolean; grow?: boolean; onClick?: () => void; children: React.ReactNode[] | React.ReactNode };
 
-export const ListItem: FC<ItemProps> = ({ gray, noMouseDownEffect, onClick = () => null, children }) => {
+export const ListItem: FC<ItemProps> = ({ gray, noMouseDownEffect, grow, onClick = () => null, children }) => {
     const [clicked, setClicked] = useState<boolean>(false);
 
     useEffect(() => {
@@ -21,6 +21,7 @@ export const ListItem: FC<ItemProps> = ({ gray, noMouseDownEffect, onClick = ()
             className="item"
             gray={gray}
             clicked={noMouseDownEffect ? false : clicked}
+            grow={grow}
             onClick={() => onClick()}
             onMouseDown={() => setClicked(true)}
         >
@@ -29,17 +30,17 @@ export const ListItem: FC<ItemProps> = ({ gray, noMouseDownEffect, onClick = ()
     );
 };
 
-type StyledItemProps = { gray?: boolean; clicked: boolean };
+type StyledItemProps = { gray?: boolean; clicked: boolean; grow?: boolean };
 
-const StyledItem = styled.div`
+const StyledItem = styled.div<StyledItemProps>`
     width: 100%;
-    height: 70px;
+    height: ${(props) => (props.grow ? "auto" : "70px")};
     display: flex;
-    background: ${(props: StyledItemProps) => (props.clicked ? "#b9b9bb" : "white")};
+    background: ${(props) => (props.clicked ? "#b9b9bb" : "white")};
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid #b9b9bb;
-    color: ${(props: StyledItemProps) => (props.gray ? "#b9b9bb" : "black")};
+    color: ${(props) => (props.gray ? "#b9b9bb" : "black")};
     transition: background 0.1s linear;
 
     .side {