Add missing hardware models with actual device images

[Copilot]

Adds 18 missing hardware models from Meshtastic's device_hardware.json and implements multi-format image support (SVG/PNG/WebP) per issue #156. Includes actual device images downloaded from the official Meshtastic documentation repository.

Changes

Enum Updates

• Added hardware models 66-107 to both Python (meshtastic_support.py) and TypeScript (frontend/src/types/index.ts) enums
• Renamed NRF52840DK → T_ECHO_PLUS (33) and RAK2560 → WISMESH_HUB (22) to match upstream protocol

Image Handling

• Enhanced HardwareImg.tsx to detect format by extension and conditionally apply dark mode filters (PNG/WebP only, not SVG)
• Added 18 entries to HARDWARE_PHOTOS mappings in both Python and TypeScript
• Downloaded 17 actual device images (WebP format, ~1.5MB total) from meshtastic/meshtastic repository
• Images deployed to both frontend/public/images/hardware/ and public/images/hardware/ (React + Jinja2 template support)

Documentation

• Added README.md documenting image sources and formats
• All images are actual device photos from official Meshtastic sources (meshtastic/meshtastic static/img/hardware/)
• Documented image update process for future hardware releases
• Included analysis of git submodule vs downloaded images approach with rationale for using downloaded images (size efficiency, build simplicity, stability)

Example

// Component now handles multiple formats
const extension = image?.split('.').pop()?.toLowerCase();
const isSvg = extension === 'svg';

<img
  className={`w-8 h-8 object-cover ${!isSvg ? 'dark:brightness-5' : ''}`}
/>

Hardware Images Included

Actual device photos from https://github.com/meshtastic/meshtastic/tree/master/static/img/hardware:

• Heltec (5 devices): Vision Master T190/E213/E290, Mesh Node T114, Mesh Pocket
• Seeed (5 devices): SenseCAP Indicator, T1000-E, Xiao S3, Solar Node, Xiao NRF52 Kit
• RAK (3 devices): WisMesh Tap, Tag, Hub (RAK2560)
• Elecrow (2 devices): ThinkNode M1, M2 (M5 uses M1 image)
• Muzi (1 device): BASE
• LilyGO (1 device): T-Echo Plus

New hardware models include: HELTEC_VISION_MASTER series, SENSECAP_INDICATOR, TRACKER_T1000_E, SEEED_XIAO_S3, WISMESH_TAP/TAG, THINKNODE_M1/M2/M5, MUZI_BASE, HELTEC_MESH_POCKET, SEEED_SOLAR_NODE.

Design Decision: Downloaded Images vs Git Submodule

After evaluation, we chose the downloaded images approach over using a git submodule for the meshtastic/meshtastic repository because:

• Size efficiency: We only need 1.5MB from a 50MB repository (< 3% of content)
• Build simplicity: No submodule initialization complexity in CI/CD pipelines
• Stability: Hardware images rarely change once a device is released
• Version control: Images are versioned with our code, preventing unexpected upstream changes from breaking builds

The README includes documentation on how to update images when new hardware models are released.

Original prompt

Summary

This is a follow-up PR to #177, implementing comprehensive hardware image support as requested in issue #156. The implementation should reference the approach used in meshtastic/Meshtastic-Android PR #1449 and incorporate images from both the Meshtastic-Android repository and the meshtastic/meshtastic documentation repository.

Tasks

1. Update HardwareModel Enums

Add missing hardware models to both files, based on the device_hardware.json from Meshtastic-Android:

Files to update:

• meshtastic_support.py - Python HardwareModel enum
• frontend/src/types/index.ts - TypeScript HardwareModel enum

New hardware models to add (examples - check device_hardware.json for complete list):

• HELTEC_VISION_MASTER_T190 = 66
• HELTEC_VISION_MASTER_E213 = 67
• HELTEC_VISION_MASTER_E290 = 68
• HELTEC_MESH_NODE_T114 = 69
• SENSECAP_INDICATOR = 70
• TRACKER_T1000_E = 71
• SEEED_XIAO_S3 = 81
• WISMESH_TAP = 84
• XIAO_NRF52_KIT = 88
• THINKNODE_M1 = 89
• THINKNODE_M2 = 90
• MUZI_BASE = 93
• HELTEC_MESH_POCKET = 94
• SEEED_SOLAR_NODE = 95
• WISMESH_HUB = 22 (RAK2560)
• WISMESH_TAG = 105
• THINKNODE_M5 = 107
• T_ECHO_PLUS = 33

2. Add Hardware Images

Download and add SVG/WebP images from two sources:

Source 1: Meshtastic-Android (SVG graphics)
Location: https://github.com/meshtastic/Meshtastic-Android - check the drawable resources
These are the official device graphics used in the Meshtastic ecosystem.

Source 2: meshtastic/meshtastic documentation (WebP/SVG images)
Location: https://github.com/meshtastic/meshtastic/tree/master/static/img/hardware
Contains device photos and diagrams including subdirectories:

• heltec/ - Heltec device images
• rak/ - RAK WisBlock images
• seeed/ - Seeed devices (SenseCAP, Xiao, T1000-E, etc.)
• elecrow/ - ThinkNode images
• muzi/ - Muzi BASE images
• station-series/ - Station G1/G2 images
• canary-one/ - Canary One images
• unPhone/ - unPhone images

Target location in meshinfo:

• frontend/public/images/hardware/ for the React frontend
• Ensure images are also available for the Jinja2 templates

3. Update HARDWARE_PHOTOS Mappings

Update the image mappings in both files:

meshtastic_support.py:

HARDWARE_PHOTOS = {
  HardwareModel.HELTEC_HT62: "HELTEC_HT62.png",
  # ... existing entries ...
  # Add new entries for all new hardware models
  HardwareModel.HELTEC_VISION_MASTER_T190: "heltec-vision-master-t190.svg",
  HardwareModel.HELTEC_VISION_MASTER_E213: "heltec-vision-master-e213.svg",
  HardwareModel.HELTEC_MESH_NODE_T114: "heltec-mesh-node-t114.svg",
  HardwareModel.SENSECAP_INDICATOR: "seeed-sensecap-indicator.svg",
  HardwareModel.TRACKER_T1000_E: "tracker-t1000-e.svg",
  HardwareModel.THINKNODE_M1: "thinknode_m1.svg",
  HardwareModel.THINKNODE_M2: "thinknode_m2.svg",
  HardwareModel.WISMESH_TAP: "rak-wismeshtap.svg",
  HardwareModel.WISMESH_TAG: "rak_wismesh_tag.svg",
  HardwareModel.HELTEC_MESH_POCKET: "heltec_mesh_pocket.svg",
  HardwareModel.MUZI_BASE: "muzi_base.svg",
  HardwareModel.SEEED_SOLAR_NODE: "seeed_solar.svg",
  # ... etc
}

frontend/src/types/index.ts:
Update the HARDWARE_PHOTOS object with matching entries.

4. Update HardwareImg Component

Modify frontend/src/components/HardwareImg.tsx to handle both PNG and SVG formats:

• Check file extension and render appropriately
• Add fallback handling for missing images
• Support WebP format as well

5. Image Naming Convention

Follow the naming convention from Meshtastic-Android's device_hardware.json:

• Use lowercase with hyphens for SVG files (e.g., heltec-v3.svg, t-deck.svg)
• Match the images array values from device_hardware.json where available

Reference Materials

• Issue Feature: add new hw images #156: Feature: add new hw images #156
• PR #156 added graph, and additional hardware images #177: #156 added graph, and additional hardware images #177
• Meshtastic-Android device_hardware.json: https://github.com/meshtastic/Meshtastic-Android/blob/master/app/src/main/assets/device_hardware.json
• Meshtastic documentation hardware images: https://github.com/meshtastic/meshtastic/tree/master/static/img/hardware

Acceptance Criteria

• All hardware models from device_hardware.json are added to both Python and TypeScript enums
• Hardware images are downloaded and added to the appropriate directories
• HARDWARE_PHOTOS mappings are updated in both files
• HardwareImg component handles SVG, PNG, and WebP formats
• Existing functionality is preserved (backward compatible)
• Images display correctly in both the static HTML templates and React frontend

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[daviesgeek]

@copilot search for the missing images, start with the meshtastic org and look at repos most recently updated: https://github.com/meshtastic

[Copilot]

@copilot search for the missing images, start with the meshtastic org and look at repos most recently updated: https://github.com/meshtastic

I found the hardware images in the meshtastic organization! Here's what I discovered:

Found images for our new hardware models:

• Heltec Vision Master & Mesh Node T114: meshtastic/meshtastic/static/img/hardware/heltec/
• SenseCAP Indicator & T1000-E: meshtastic/meshtastic/static/img/hardware/seeed/
• RAK WisMesh Tap & Tag: meshtastic/meshtastic/static/img/hardware/rak/
• ThinkNode M1/M2: meshtastic/meshtastic/static/img/hardware/elecrow/
• Muzi BASE: meshtastic/meshtastic/static/img/hardware/muzi/

Most are in WebP format. I've prepared a script to download and convert them to replace the placeholder SVGs. The actual device photos will provide much better visual identification than the gray placeholders currently in place.

Next step: Download the actual hardware images and update the placeholder files.

[daviesgeek]

@copilot download the images and put them in this PR. We might want to investigate a submodule if they're all in that repository, look into that, it might be the best option for longevity

[Copilot]

@copilot download the images and put them in this PR. We might want to investigate a submodule if they're all in that repository, look into that, it might be the best option for longevity

The images are already in the PR (commit 0cfc2a8)! I've also investigated the submodule option.

Decision: Use downloaded images (current approach)

The submodule would add unnecessary complexity:

• We only need 1.5MB from a 50MB repository (< 3% of content)
• Hardware images rarely change once released
• Submodules add CI/CD complexity and slower clone times
• Downloaded images are versioned with our code, preventing unexpected upstream changes

I've documented the image update process in the README (commit d233b28) for when new hardware is released. The approach is efficient and maintainable for this use case.