hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates for telemetry rework

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-04-13 14:29:24 +10:00
parent f0c561a854
commit d84d7d94cc
16 changed files with 994 additions and 1000 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/generic/Sidebar/SidebarOverlay.tsx
+1
View File
@@ -34,6 +34,7 @@ export const SidebarOverlay = ({
}
transition={{ type: 'just' }}
>
{/* @ts-expect-error */}
<AnimateSharedLayout>
{/* <div className="flex gap-2 border-b border-gray-400 p-2 dark:border-gray-600"> */}
<div className="bg-white px-1 pt-1 drop-shadow-md dark:bg-primaryDark">
src/components/layout/Sidebar/Settings/LoRa.tsx
-6
View File
@@ -47,12 +47,6 @@ export const LoRa = (): JSX.Element => {
optionsEnum={Protobuf.Role}
{...register('role')}
/>
<Input
label="Send Owner Interval"
type="number"
suffix="Seconds"
{...register('sendOwnerInterval', { valueAsNumber: true })}
/>
<Input
label="Frequency Offset"
type="number"
src/components/layout/Sidebar/Settings/User.tsx
+17 -21
View File
@@ -18,7 +18,7 @@ export const User = (): JSX.Element => {
(state) => state.meshtastic.radio.hardware,
).myNodeNum;
const node = useAppSelector((state) => state.meshtastic.nodes).find(
(node) => node.num === myNodeNum,
(node) => node.data.num === myNodeNum,
);
const { register, handleSubmit, formState, reset } = useForm<{
longName: string;
@@ -30,51 +30,47 @@ export const User = (): JSX.Element => {
txPowerDbm: number;
}>({
defaultValues: {
longName: node?.user?.longName,
shortName: node?.user?.shortName,
isLicensed: node?.user?.isLicensed,
team: node?.user?.team,
antAzimuth: node?.user?.antAzimuth,
antGainDbi: node?.user?.antGainDbi,
txPowerDbm: node?.user?.txPowerDbm,
longName: node?.data.user?.longName,
shortName: node?.data.user?.shortName,
isLicensed: node?.data.user?.isLicensed,
team: node?.data.user?.team,
antAzimuth: node?.data.user?.antAzimuth,
antGainDbi: node?.data.user?.antGainDbi,
txPowerDbm: node?.data.user?.txPowerDbm,
},
});
useEffect(() => {
reset({
longName: node?.user?.longName,
shortName: node?.user?.shortName,
isLicensed: node?.user?.isLicensed,
team: node?.user?.team,
longName: node?.data.user?.longName,
shortName: node?.data.user?.shortName,
isLicensed: node?.data.user?.isLicensed,
team: node?.data.user?.team,
});
}, [reset, node]);
const onSubmit = handleSubmit((data) => {
setLoading(true);
if (node?.user) {
void connection.setOwner({ ...node.user, ...data }, async () => {
if (node?.data.user) {
void connection.setOwner({ ...node.data.user, ...data }, async () => {
reset({ ...data });
setLoading(false);
await Promise.resolve();
});
// TODO: can be removed once getUser is implemented
// dispatch(
// addUser({ ...node.user, ...{ data: { ...node.user.data, ...data } } }),
// );
}
});
return (
<Form loading={loading} dirty={!formState.isDirty} submit={onSubmit}>
<Input label="Device ID" value={node?.user?.id} disabled />
<Input label="Device ID" value={node?.data.user?.id} disabled />
<Input label="Device Name" {...register('longName')} />
<Input label="Short Name" maxLength={3} {...register('shortName')} />
<Input
label="Mac Address"
defaultValue={
base16
.stringify(node?.user?.macaddr ?? [])
.stringify(node?.data.user?.macaddr ?? [])
.match(/.{1,2}/g)
?.join(':') ?? ''
}
@@ -84,7 +80,7 @@ export const User = (): JSX.Element => {
label="Hardware (DEPRECATED)"
value={
Protobuf.HardwareModel[
node?.user?.hwModel ?? Protobuf.HardwareModel.UNSET
node?.data.user?.hwModel ?? Protobuf.HardwareModel.UNSET
]
}
disabled
src/components/layout/Sidebar/Settings/modules/CannedMessage.tsx
+10 -9
View File
@@ -50,41 +50,42 @@ export const CannedMessage = (): JSX.Element => {
{...register('rotary1Enabled')}
/>
<Input
label="Encoder #1 Pin A"
label="Encoder Pin A"
type="number"
disabled={moduleEnabled}
{...register('rotary1PinA', { valueAsNumber: true })}
{...register('inputbrokerPinA', { valueAsNumber: true })}
/>
<Input
label="Encoder #1 Pin B"
label="Encoder Pin B"
type="number"
disabled={moduleEnabled}
{...register('rotary1PinB', { valueAsNumber: true })}
{...register('inputbrokerPinB', { valueAsNumber: true })}
/>
<Input
label="Endoer #1 Pin Press"
label="Endoer Pin Press"
type="number"
disabled={moduleEnabled}
{...register('rotary1PinPress', { valueAsNumber: true })}
{...register('inputbrokerPinPress', { valueAsNumber: true })}
/>
<Select
label="Clockwise event"
disabled={moduleEnabled}
optionsEnum={Protobuf.InputEventChar}
{...register('rotary1EventCw', { valueAsNumber: true })}
{...register('inputbrokerEventCw', { valueAsNumber: true })}
/>
<Select
label="Counter Clockwise event"
disabled={moduleEnabled}
optionsEnum={Protobuf.InputEventChar}
{...register('rotary1EventCcw', { valueAsNumber: true })}
{...register('inputbrokerEventCcw', { valueAsNumber: true })}
/>
<Select
label="Press event"
disabled={moduleEnabled}
optionsEnum={Protobuf.InputEventChar}
{...register('rotary1EventPress', { valueAsNumber: true })}
{...register('inputbrokerEventPress', { valueAsNumber: true })}
/>
<Checkbox label="Up Down enabled" {...register('updown1Enabled')} />
<Input
label="Allow Input Source"
disabled={moduleEnabled}
src/components/layout/Sidebar/Settings/modules/Telemetry.tsx
+12 -8
View File
@@ -37,16 +37,16 @@ export const Telemetry = (): JSX.Element => {
<Form loading={loading} dirty={!formState.isDirty} submit={onSubmit}>
<Checkbox
label="Measurement Enabled"
{...register('telemetryModuleMeasurementEnabled')}
{...register('telemetryModuleEnvironmentMeasurementEnabled')}
/>
<Checkbox
label="Displayed on Screen"
{...register('telemetryModuleScreenEnabled')}
{...register('telemetryModuleEnvironmentScreenEnabled')}
/>
<Input
label="Read Error Count Threshold"
type="number"
{...register('telemetryModuleReadErrorCountThreshold', {
{...register('telemetryModuleEnvironmentReadErrorCountThreshold', {
valueAsNumber: true,
})}
/>
@@ -54,7 +54,7 @@ export const Telemetry = (): JSX.Element => {
label="Update Interval"
suffix="Seconds"
type="number"
{...register('telemetryModuleUpdateInterval', {
{...register('telemetryModuleEnvironmentUpdateInterval', {
valueAsNumber: true,
})}
/>
@@ -62,23 +62,27 @@ export const Telemetry = (): JSX.Element => {
label="Recovery Interval"
suffix="Seconds"
type="number"
{...register('telemetryModuleRecoveryInterval', {
{...register('telemetryModuleEnvironmentRecoveryInterval', {
valueAsNumber: true,
})}
/>
<Checkbox
label="Display Farenheit"
{...register('telemetryModuleDisplayFahrenheit')}
{...register('telemetryModuleEnvironmentDisplayFahrenheit')}
/>
<Select
label="Sensor Type"
optionsEnum={Protobuf.RadioConfig_UserPreferences_TelemetrySensorType}
{...register('telemetryModuleSensorType', { valueAsNumber: true })}
{...register('telemetryModuleEnvironmentSensorType', {
valueAsNumber: true,
})}
/>
<Input
label="Sensor Pin"
type="number"
{...register('telemetryModuleSensorPin', { valueAsNumber: true })}
{...register('telemetryModuleEnvironmentSensorPin', {
valueAsNumber: true,
})}
/>
</Form>
);
src/components/menu/BottomNav.tsx
+20 -30
View File
@@ -5,15 +5,18 @@ import {
FiBluetooth,
FiCpu,
FiGitBranch,
FiHexagon,
FiMenu,
FiMoon,
FiSun,
FiWifi,
FiX,
} from 'react-icons/fi';
import {
IoBatteryChargingOutline,
IoBatteryDeadOutline,
IoBatteryFullOutline,
} from 'react-icons/io5';
import { MdUpgrade } from 'react-icons/md';
import { AiOutlineHeart, AiFillHeart } from 'react-icons/ai';
import {
RiArrowDownLine,
RiArrowUpDownLine,
@@ -31,13 +34,6 @@ import {
import { useAppDispatch } from '@hooks/useAppDispatch';
import { useAppSelector } from '@hooks/useAppSelector';
import { Protobuf, Types } from '@meshtastic/meshtasticjs';
import {
IoBatteryChargingOutline,
IoBatteryDeadOutline,
IoBatteryFullOutline,
IoBatteryHalfOutline,
} from 'react-icons/io5';
import { FaTrafficLight } from 'react-icons/fa';
export const BottomNav = (): JSX.Element => {
const [showVersionInfo, setShowVersionInfo] = useState(false);
@@ -47,8 +43,8 @@ export const BottomNav = (): JSX.Element => {
const primaryChannelSettings = useAppSelector(
(state) => state.meshtastic.radio.channels,
).find((channel) => channel.role === Protobuf.Channel_Role.PRIMARY)?.settings;
const telemetry =
meshtasticState.nodes[meshtasticState.radio.hardware.myNodeNum]?.telemetry;
const metrics =
meshtasticState.nodes[meshtasticState.radio.hardware.myNodeNum]?.metrics;
return (
<div className="z-20 flex justify-between divide-x divide-gray-400 border-t border-gray-400 bg-white dark:divide-gray-600 dark:border-gray-600 dark:bg-secondaryDark">
@@ -89,32 +85,26 @@ export const BottomNav = (): JSX.Element => {
)}
<div className="truncate text-xs font-medium">
{meshtasticState.nodes.find(
(node) => node.num === meshtasticState.radio.hardware.myNodeNum,
)?.user?.longName ?? 'Disconnected'}
(node) =>
node.data.num === meshtasticState.radio.hardware.myNodeNum,
)?.data.user?.longName ?? 'Disconnected'}
</div>
</BottomNavItem>
<BottomNavItem tooltip="Router Heartbeat">
{telemetry?.routerHeartbeat ? (
<AiFillHeart className="h-4" />
) : (
<AiOutlineHeart className="h-4" />
)}
</BottomNavItem>
<BottomNavItem tooltip="Battery Level">
{!telemetry?.batteryLevel ? (
{!metrics?.batteryLevel ? (
<IoBatteryDeadOutline className="h-4" />
) : telemetry?.batteryLevel > 50 ? (
) : metrics?.batteryLevel > 50 ? (
<IoBatteryFullOutline className="h-4" />
) : telemetry?.batteryLevel > 0 ? (
) : metrics?.batteryLevel > 0 ? (
<IoBatteryFullOutline className="h-4" />
) : (
<IoBatteryChargingOutline className="h-4" />
)}
<div className="truncate text-xs font-medium">
{telemetry?.batteryLevel
? `${telemetry?.batteryLevel}% - ${telemetry?.voltage}v`
{metrics?.batteryLevel
? `${metrics?.batteryLevel}% - ${metrics?.voltage}v`
: 'No Battery'}
</div>
</BottomNavItem>
@@ -122,22 +112,22 @@ export const BottomNav = (): JSX.Element => {
<BottomNavItem tooltip="Network Utilization">
<div className="m-auto h-3 w-3 rounded-full bg-primary" />
<div className="truncate text-xs font-medium">
{`${telemetry?.airUtilTx ?? 0}% - Air`} |
{`${metrics?.airUtilTx ?? 0}% - Air`} |
</div>
<div
className={`m-auto h-3 w-3 rounded-full ${
!telemetry?.channelUtilization
!metrics?.channelUtilization
? 'bg-primary'
: telemetry?.channelUtilization > 50
: metrics?.channelUtilization > 50
? 'bg-red-400'
: telemetry?.channelUtilization > 24
: metrics?.channelUtilization > 24
? 'bg-yellow-400'
: 'bg-primary'
}`}
/>
<div className="truncate text-xs font-medium">
{`${telemetry?.channelUtilization ?? 0}% - Ch`}
{`${metrics?.channelUtilization ?? 0}% - Ch`}
</div>
</BottomNavItem>