mirror of
https://github.com/emsesp/EMS-ESP32.git
synced 2025-12-06 15:59:52 +03:00
optimizations
This commit is contained in:
@@ -1,3 +1,5 @@
|
||||
import { ReactElement } from 'react';
|
||||
|
||||
import AppsIcon from '@mui/icons-material/Apps';
|
||||
import DeveloperBoardIcon from '@mui/icons-material/DeveloperBoard';
|
||||
import DevicesIcon from '@mui/icons-material/Devices';
|
||||
@@ -24,10 +26,61 @@ import { useInterval } from 'utils';
|
||||
|
||||
import BBQKeesIcon from './bbqkees.svg';
|
||||
|
||||
// Constants
|
||||
const AVATAR_COLORS = {
|
||||
DEFAULT: '#5f9a5f',
|
||||
BBQKEES: '#003289'
|
||||
} as const;
|
||||
|
||||
const TEMP_THRESHOLD_CELSIUS = 90; // Temperature threshold to determine F vs C
|
||||
|
||||
function formatNumber(num: number) {
|
||||
return new Intl.NumberFormat().format(num);
|
||||
}
|
||||
|
||||
function formatTemperature(temp?: number): string {
|
||||
if (!temp) return '';
|
||||
const unit = temp > TEMP_THRESHOLD_CELSIUS ? 'F' : 'C';
|
||||
return `, T: ${temp} °${unit}`;
|
||||
}
|
||||
|
||||
function formatFlashSpeed(speed: number): string {
|
||||
return (speed / 1000000).toFixed(0) + ' MHz';
|
||||
}
|
||||
|
||||
function formatCPUCores(cores: number): string {
|
||||
return cores === 1 ? 'single-core)' : 'dual-core)';
|
||||
}
|
||||
|
||||
// Reusable component for hardware status list items
|
||||
interface HardwareListItemProps {
|
||||
icon: ReactElement;
|
||||
primary: string;
|
||||
secondary: string;
|
||||
avatarColor?: string;
|
||||
customIcon?: ReactElement | undefined;
|
||||
}
|
||||
|
||||
const HardwareListItem = ({
|
||||
icon,
|
||||
primary,
|
||||
secondary,
|
||||
avatarColor = AVATAR_COLORS.DEFAULT,
|
||||
customIcon
|
||||
}: HardwareListItemProps) => (
|
||||
<>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{ bgcolor: avatarColor, color: 'white' }}>
|
||||
{customIcon || icon}
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary={primary} secondary={secondary} />
|
||||
</ListItem>
|
||||
<Divider variant="inset" component="li" />
|
||||
</>
|
||||
);
|
||||
|
||||
const HardwareStatus = () => {
|
||||
const { LL } = useI18nContext();
|
||||
|
||||
@@ -39,175 +92,72 @@ const HardwareStatus = () => {
|
||||
void loadData();
|
||||
});
|
||||
|
||||
const content = () => {
|
||||
if (!data) {
|
||||
return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<List>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
{data.model ? (
|
||||
<Avatar sx={{ bgcolor: '#003289', color: 'white' }}>
|
||||
<img
|
||||
alt="BBQKees"
|
||||
src={BBQKeesIcon}
|
||||
style={{ width: 16, verticalAlign: 'middle' }}
|
||||
/>
|
||||
</Avatar>
|
||||
) : (
|
||||
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
|
||||
<TapAndPlayIcon />
|
||||
</Avatar>
|
||||
)}
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={LL.HARDWARE() + ' ' + LL.DEVICE()}
|
||||
secondary={data.model ? data.model : data.cpu_type}
|
||||
/>
|
||||
</ListItem>
|
||||
<Divider variant="inset" component="li" />
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
|
||||
<DevicesIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary="SDK"
|
||||
secondary={data.arduino_version + ' / ESP-IDF ' + data.sdk_version}
|
||||
/>
|
||||
</ListItem>
|
||||
<Divider variant="inset" component="li" />
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
|
||||
<DeveloperBoardIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary="CPU"
|
||||
secondary={
|
||||
data.esp_platform +
|
||||
'/' +
|
||||
data.cpu_type +
|
||||
' (rev.' +
|
||||
data.cpu_rev +
|
||||
', ' +
|
||||
(data.cpu_cores === 1 ? 'single-core)' : 'dual-core)') +
|
||||
' @ ' +
|
||||
data.cpu_freq_mhz +
|
||||
' Mhz' +
|
||||
// bit of a hack : if the CPU temp is higher than 90 (=32 Fahrenheit if using Celsius), show F, otherwise C
|
||||
(data.temperature
|
||||
? ', T: ' +
|
||||
data.temperature +
|
||||
' °' +
|
||||
(data.temperature > 90 ? 'F' : 'C')
|
||||
: '')
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
<Divider variant="inset" component="li" />
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
|
||||
<MemoryIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={LL.FREE_MEMORY()}
|
||||
secondary={
|
||||
formatNumber(data.free_heap) +
|
||||
' KB (' +
|
||||
formatNumber(data.max_alloc_heap) +
|
||||
' KB max alloc, ' +
|
||||
formatNumber(data.free_caps) +
|
||||
' KB caps)'
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
{data.psram_size !== undefined && data.free_psram !== undefined && (
|
||||
<>
|
||||
<Divider variant="inset" component="li" />
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
|
||||
<AppsIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={LL.PSRAM()}
|
||||
secondary={
|
||||
formatNumber(data.psram_size) +
|
||||
' KB / ' +
|
||||
formatNumber(data.free_psram) +
|
||||
' KB'
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
</>
|
||||
)}
|
||||
<Divider variant="inset" component="li" />
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
|
||||
<SdStorageIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={LL.FLASH()}
|
||||
secondary={
|
||||
formatNumber(data.flash_chip_size) +
|
||||
' KB , ' +
|
||||
(data.flash_chip_speed / 1000000).toFixed(0) +
|
||||
' MHz'
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
<Divider variant="inset" component="li" />
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
|
||||
<SdCardAlertIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={LL.APPSIZE()}
|
||||
secondary={
|
||||
data.partition +
|
||||
': ' +
|
||||
formatNumber(data.app_used) +
|
||||
' KB / ' +
|
||||
formatNumber(data.app_free) +
|
||||
' KB'
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
<Divider variant="inset" component="li" />
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
|
||||
<FolderIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={LL.FILESYSTEM()}
|
||||
secondary={
|
||||
formatNumber(data.fs_used) +
|
||||
' KB / ' +
|
||||
formatNumber(data.fs_free) +
|
||||
' KB'
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
<Divider variant="inset" component="li" />
|
||||
</List>
|
||||
<SectionContent>
|
||||
<FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
|
||||
</SectionContent>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
return <SectionContent>{content()}</SectionContent>;
|
||||
return (
|
||||
<SectionContent>
|
||||
<List>
|
||||
<HardwareListItem
|
||||
icon={<TapAndPlayIcon />}
|
||||
primary={`${LL.HARDWARE()} ${LL.DEVICE()}`}
|
||||
secondary={data.model || data.cpu_type}
|
||||
avatarColor={data.model ? AVATAR_COLORS.BBQKEES : AVATAR_COLORS.DEFAULT}
|
||||
customIcon={
|
||||
data.model ? (
|
||||
<img
|
||||
alt="BBQKees"
|
||||
src={BBQKeesIcon}
|
||||
style={{ width: 16, verticalAlign: 'middle' }}
|
||||
/>
|
||||
) : undefined
|
||||
}
|
||||
/>
|
||||
<HardwareListItem
|
||||
icon={<DevicesIcon />}
|
||||
primary="SDK"
|
||||
secondary={`${data.arduino_version} / ESP-IDF ${data.sdk_version}`}
|
||||
/>
|
||||
<HardwareListItem
|
||||
icon={<DeveloperBoardIcon />}
|
||||
primary="CPU"
|
||||
secondary={`${data.esp_platform}/${data.cpu_type} (rev.${data.cpu_rev}, ${formatCPUCores(data.cpu_cores)} @ ${data.cpu_freq_mhz} Mhz${formatTemperature(data.temperature)}`}
|
||||
/>
|
||||
<HardwareListItem
|
||||
icon={<MemoryIcon />}
|
||||
primary={LL.FREE_MEMORY()}
|
||||
secondary={`${formatNumber(data.free_heap)} KB (${formatNumber(data.max_alloc_heap)} KB max alloc, ${formatNumber(data.free_caps)} KB caps)`}
|
||||
/>
|
||||
{data.psram_size !== undefined && data.free_psram !== undefined && (
|
||||
<HardwareListItem
|
||||
icon={<AppsIcon />}
|
||||
primary={LL.PSRAM()}
|
||||
secondary={`${formatNumber(data.psram_size)} KB / ${formatNumber(data.free_psram)} KB`}
|
||||
/>
|
||||
)}
|
||||
<HardwareListItem
|
||||
icon={<SdStorageIcon />}
|
||||
primary={LL.FLASH()}
|
||||
secondary={`${formatNumber(data.flash_chip_size)} KB , ${formatFlashSpeed(data.flash_chip_speed)}`}
|
||||
/>
|
||||
<HardwareListItem
|
||||
icon={<SdCardAlertIcon />}
|
||||
primary={LL.APPSIZE()}
|
||||
secondary={`${data.partition}: ${formatNumber(data.app_used)} KB / ${formatNumber(data.app_free)} KB`}
|
||||
/>
|
||||
<HardwareListItem
|
||||
icon={<FolderIcon />}
|
||||
primary={LL.FILESYSTEM()}
|
||||
secondary={`${formatNumber(data.fs_used)} KB / ${formatNumber(data.fs_free)} KB`}
|
||||
/>
|
||||
</List>
|
||||
</SectionContent>
|
||||
);
|
||||
};
|
||||
|
||||
export default HardwareStatus;
|
||||
|
||||
Reference in New Issue
Block a user