Added WiFi signal status and settings

.vscode/settings.json

@@ -1,6 +1,5 @@
 {
-    "i18n-ally.localesPaths": [
-        "src/lib/locales"
-    ],
-    "i18n-ally.keystyle": "nested"
-}
+	"i18n-ally.localesPaths": ["src/lib/locales"],
+	"i18n-ally.keystyle": "nested",
+	"i18n-ally.sourceLanguage": "en"
+}

src/lib/locales/en.json

@@ -20,7 +20,9 @@
 			"fetchEuroPrice": "Fetch € price",
 			"shortAmountsWarning": "Short amounts might shorten lifespan.",
 			"tzOffsetHelpText": "A restart is required to apply TZ offset.",
-			"screens": "Screens"
+			"screens": "Screens",
+			"wifiTxPowerText": "In most cases this does not need to be set.",
+			"wifiTxPower": "WiFi TX power"
 		},
 		"control": {
 			"systemInfo": "System info",
@@ -41,7 +43,8 @@
 			"wsPriceConnection": "WS Price connection",
 			"wsMempoolConnection": "WS Mempool.space connection",
 			"fetchEuroNote": "If you use \"Fetch € price\" the WS Price connection will show ❌  since it uses another data source.",
-			"uptime": "Uptime"
+			"uptime": "Uptime",
+			"wifiSignalStrength": "WiFi Signal strength"
 		}
 	},
 	"colors": {
@@ -67,5 +70,8 @@
 		"control": {
 			"keepSameColor": "Keep same color"
 		}
+	},
+	"rssiBar": {
+		"tooltip": "Values > -67 dBm are considered good. > -30 dBm is amazing"
 	}
 }

src/lib/locales/es.json

@@ -20,7 +20,8 @@
 			"enableMdns": "mDNS",
 			"hostnamePrefix": "Prefijo de nombre de host",
 			"mempoolnstance": "Instancia de Mempool",
-			"otaUpdates": "Actualización por aire"
+			"otaUpdates": "Actualización por aire",
+			"wifiTxPowerText": "En la mayoría de los casos no es necesario configurar esto."
 		},
 		"control": {
 			"turnOff": "Apagar",
@@ -41,7 +42,8 @@
 			"screenCycle": "Ciclo de pantalla",
 			"uptime": "Tiempo de funcionamiento",
 			"fetchEuroNote": "Si utiliza \"Obtener precio en €\", la conexión de Precio WS mostrará ❌ ya que utiliza otra fuente de datos.",
-			"title": "Estado"
+			"title": "Estado",
+			"wifiSignalStrength": "Fuerza de la señal WiFi"
 		}
 	},
 	"button": {
@@ -67,5 +69,8 @@
 		"control": {
 			"keepSameColor": "Mantén el mismo color"
 		}
+	},
+	"rssiBar": {
+		"tooltip": "Se consideran buenos valores > -67 dBm. > -30 dBm es increíble"
 	}
 }

src/lib/locales/nl.json

@@ -20,7 +20,9 @@
 			"screens": "Schermen",
 			"hostnamePrefix": "Hostnaam voorvoegsel",
 			"mempoolnstance": "Mempool instantie",
-			"otaUpdates": "OTA updates"
+			"otaUpdates": "OTA updates",
+			"wifiTxPower": "WiFi TX power",
+			"wifiTxPowerText": "Meestal hoeft dit niet aangepast te worden."
 		},
 		"control": {
 			"systemInfo": "Systeeminformatie",
@@ -40,7 +42,8 @@
 			"wsPriceConnection": "WS Prijs verbinding",
 			"wsMempoolConnection": "WS Mempool.space verbinding",
 			"fetchEuroNote": "Wanneer je \"Toon € prijs\" aanzet, zal de prijsverbinding als ❌ verbroken getoond worden vanwege het gebruik van een andere bron.",
-			"uptime": "Uptime"
+			"uptime": "Uptime",
+			"wifiSignalStrength": "WiFi signaalsterkte"
 		}
 	},
 	"colors": {
@@ -66,5 +69,8 @@
 		"control": {
 			"keepSameColor": "Behoud zelfde kleur"
 		}
+	},
+	"rssiBar": {
+		"tooltip": "Waarden > -67 dBm zijn goed. > -30 dBm is verbazingwekkend"
 	}
 }

src/lib/style/app.scss

@@ -38,6 +38,7 @@ $input-font-size-sm: $font-size-base * 0.875;
 @import '../node_modules/bootstrap/scss/nav';
 @import '../node_modules/bootstrap/scss/card';
 @import '../node_modules/bootstrap/scss/progress';
+@import '../node_modules/bootstrap/scss/tooltip';
 
 @import '../node_modules/bootstrap/scss/helpers';
 @import '../node_modules/bootstrap/scss/utilities/api';

src/routes/Control.svelte

@@ -83,8 +83,8 @@
 		<CardBody>
 			<Form>
 				<Row>
-					<Label md={6} for="customText">{$_('section.control.text')}</Label>
-					<Col md="6">
+					<Label md={4} for="customText">{$_('section.control.text')}</Label>
+					<Col md="8">
 						<Input
 							type="text"
 							id="customText"
@@ -100,8 +100,8 @@
 			<h3>LEDs</h3>
 			<Form>
 				<Row>
-					<Label md={6} for="ledColorPicker" size="sm">{$_('section.control.ledColor')}</Label>
-					<Col md="6">
+					<Label md={4} for="ledColorPicker" size="sm">{$_('section.control.ledColor')}</Label>
+					<Col md="8">
 						<Row class="justify-content-between">
 							{#if ledStatus}
 								{#each ledStatus as led, i}
@@ -116,6 +116,8 @@
 									</Col>
 								{/each}
 							{/if}
+						</Row>
+						<Row class="justify-content-between">
 							<Col>
 								<Input
 									bind:checked={keepLedsSameColor}

src/routes/Settings.svelte

@@ -20,6 +20,20 @@
 
 	export let settings;
 
+	const wifiTxPowerMap = new Map<string, number>([
+		['Default', 80],
+		['19.5dBm', 78], // 19.5dBm
+		['19dBm', 76], // 19dBm
+		['18.5dBm', 74], // 18.5dBm
+		['17dBm', 68], // 17dBm
+		['15dBm', 60], // 15dBm
+		['13dBm', 52], // 13dBm
+		['11dBm', 44], // 11dBm
+		['8.5dBm', 34], // 8.5dBm
+		['7dBm', 28], // 7dBm
+		['5dBm', 20] // 5dBm
+	]);
+
 	const onSave = async (e: Event) => {
 		e.preventDefault();
 		let formSettings = $settings;
@@ -170,6 +184,26 @@
 						></Input>
 					</Col>
 				</Row>
+				<Row>
+					<Label md={6} for="wifiTxPower" size="sm"
+						>{$_('section.settings.wifiTxPower', { default: 'WiFi Tx Power' })}</Label
+					>
+					<Col md="6">
+						<Input
+							type="select"
+							bind:value={$settings.txPower}
+							name="select"
+							id="fgColor"
+							bsSize="sm"
+							class="form-select-sm"
+						>
+							{#each wifiTxPowerMap as [key, value]}
+								<option {value}>{key}</option>
+							{/each}
+						</Input>
+						<FormText>{$_('section.settings.wifiTxPowerText')}</FormText>
+					</Col>
+				</Row>
 				<Row>
 					<Col md="6">
 						<Input

src/routes/Status.svelte

@@ -13,6 +13,7 @@
 		Col,
 		Input,
 		Progress,
+		Tooltip,
 		Row
 	} from 'sveltestrap';
 	import Rendered from './Rendered.svelte';
@@ -44,10 +45,22 @@
 	};
 
 	let memoryFreePercent: number = 50;
+	let rssiPercent: number = 50;
+	let wifiStrengthColor: string = 'info';
 	let lightMode: boolean = false;
 
 	status.subscribe((value: object) => {
 		memoryFreePercent = Math.round((value.espFreeHeap / value.espHeapSize) * 100);
+
+		rssiPercent = Math.round(((value.rssi + 120) / (-30 + 120)) * 100);
+
+		if (value.rssi > -55) {
+			wifiStrengthColor = 'success';
+		} else if (value.rssi < -87) {
+			wifiStrengthColor = 'warning';
+		} else {
+			wifiStrengthColor = 'info';
+		}
 	});
 
 	settings.subscribe((value: object) => {
@@ -130,6 +143,18 @@
 				</div>
 			</div>
 			<hr />
+			<Progress striped id="rssiBar" color={wifiStrengthColor} value={rssiPercent}
+				>{rssiPercent}%</Progress
+			>
+			<Tooltip target="rssiBar" placement="bottom">{$_('rssiBar.tooltip')}</Tooltip>
+
+			<div class="d-flex justify-content-between">
+				<div>{$_('section.status.wifiSignalStrength')}</div>
+				<div>
+					{$status.rssi} dBm
+				</div>
+			</div>
+			<hr />
 			{$_('section.status.uptime')}: {toUptimestring($status.espUptime)}
 			<br />
 			<p>