Custom pages for the Victron HTML5 MFD app, adding weather, tides, tracking, and generator dashboards. Designed for the Raymarine Axiom but works with any MFD that loads the Victron HTML5 app.

Custom Pages

Mooring View - Combined dashboard with weather, tides, generator, and 7-day forecast
Weather Station - Wind speed/gust/direction, temperature, pressure (from Windy Station)
Tides - Tide predictions, charts, and current depth tracking (from dbus-tides)
Tide Analysis - Detailed tide analysis with historical data
NFL Tracking - GPS position, track points, reporting status (from No Foreign Land)
Generator Ramp - Ramp state, current limit, power monitoring, overload detection

The Mooring View includes a Forecast Strip with 7-day Meteoblue weather forecasts, day/night overlays, wind arrows, and moon phase visualizations.

Access via the Settings menu (gear icon) > Custom Pages section.

Target Device

Raymarine Axiom (1280x800, Chrome 106)
Works at both 640x800 (half-screen) and 1280x800 (full-screen)
Compatible with light, dark, and night mode themes

Prerequisites

Node.js 20+ and npm installed on your build machine
SSH access to the Cerbo GX (root@cerbo)
Docker (optional, for containerized builds)

Building Locally (Linux)

Install Dependencies

From the venus-html5-app/ directory:

cd venus-html5-app
CYPRESS_INSTALL_BINARY=0 npm install

Setting CYPRESS_INSTALL_BINARY=0 skips the large Cypress binary download (not needed for builds or dev server).

Build for Production

CI=false npm run build

The built app is output to venus-html5-app/dist/ (static HTML/JS/CSS files).

Full Package (tarball + USB zip)

From the mfd-custom-app/ directory:

./package.sh

This runs the local build and creates:

mfd-custom-app.tar.gz - For SSH deployment
venus-data.zip - For USB stick deployment

Building with Docker (alternative)

If you prefer a containerized build:

cd venus-html5-app
docker build -f Dockerfile.build -t mfd-custom-app-builder .

Extract the build output:

docker create --name mfd-extract mfd-custom-app-builder
docker cp mfd-extract:/app/dist ./dist
docker rm mfd-extract

Development Server (Live Reload)

The webpack dev server recompiles and refreshes the browser automatically when you edit source files. This is the recommended workflow for active development.

Start the dev server

From the venus-html5-app/ directory:

npm start

This starts a webpack-dev-server on http://0.0.0.0:3000/app/ with hot module replacement (HMR). Changes to .tsx, .ts, .css, and .scss files are reflected in the browser instantly without a full page reload.

To test with live Cerbo data, add your Cerbo IP as a query parameter:

http://localhost:3000/app/?host=CERBO_IP&port=9001

Note: Your Cerbo must have MQTT on LAN enabled (Settings > Services > MQTT on LAN) and port 9001 (WebSocket) must be reachable from your browser.

Stop the dev server

Press Ctrl+C in the terminal where it's running.

Serving a Production Build Locally

You can serve the built app locally to verify the production build before deploying to the Cerbo.

Start the test server

From the venus-html5-app/ directory (after building):

npm run serve

This serves the dist/ directory on http://0.0.0.0:3001/app/.

To use Docker instead:

docker-compose -f docker-compose.test.yaml up -d

Open in browser

http://localhost:3001/app/

The app will load but won't connect to MQTT (no Cerbo available). To test with live data, pass your Cerbo IP as a query parameter:

http://localhost:3001/app/?host=CERBO_IP&port=9001

Stop the test server

For the Node server, press Ctrl+C in the terminal. For Docker:

docker-compose -f docker-compose.test.yaml down

Installation on Cerbo GX

The custom app installs to /data/www/app/ which overrides the stock Victron app. The stock app at /var/www/venus/app/ is never modified and remains available.

Option 1: SSH Deployment

Step 1 - Copy the tarball to the Cerbo:

scp mfd-custom-app.tar.gz root@cerbo:/data/

Step 2 - Extract and install:

ssh root@cerbo
cd /data
tar xzf mfd-custom-app.tar.gz
cd mfd-custom-app
./install.sh

The install script will:

Back up any existing custom app at /data/www/app/
Copy the built app files to /data/www/app/
Add an entry to /data/rc.local so the app is restored after firmware updates
Copy the full package to /data/mfd-custom-app/ for persistence

Step 3 - Verify:

Open your MFD or navigate to http://CERBO_IP/app/ in a browser. The custom pages should be accessible from the Settings menu (gear icon).

Option 2: Quick Deploy (no tarball)

If you already extracted the build output to mfd-custom-app/app/:

scp -r mfd-custom-app root@cerbo:/data/
ssh root@cerbo "cd /data/mfd-custom-app && ./install.sh"

Option 3: USB Stick

Copy venus-data.zip to a FAT32-formatted USB drive
Insert the USB drive into the Cerbo GX
Reboot the Cerbo
The Cerbo auto-extracts the zip contents to /data/

Uninstallation

ssh root@cerbo
cd /data/mfd-custom-app
./uninstall.sh

The uninstall script will:

Remove /data/www/app/ (the custom override)
Restore any previously backed-up custom app
Remove the rc.local entry
Remove /data/mfd-custom-app/

The stock Victron app is immediately restored at http://CERBO_IP/app/.

Quick Restore (without uninstall script)

If something goes wrong and you just need the stock app back:

ssh root@cerbo "rm -rf /data/www/app"

That's all it takes. Removing the override directory restores the stock app instantly. No reboot needed - just refresh the MFD page.

File Layout

venus-html5-app/              # Forked Victron HTML5 app (source)
  Dockerfile.build             # Docker build environment (Node 20)
  docker-compose.test.yaml     # Local test server
  src/app/Marine2/
    modules/AppViews/          # Modified: custom view enum values
    components/
      ui/SettingsMenu/         # Modified: custom page navigation buttons
      views/custom/            # New: all custom view components
        CombinedView.tsx       # Mooring View (combined dashboard)
        WeatherView.tsx        # Windy Station weather data
        TideView.tsx           # Tide predictions and charts
        TideAnalysisView.tsx   # Detailed tide analysis
        NflTrackingView.tsx    # No Foreign Land GPS tracking
        GeneratorRampView.tsx  # Generator ramp control
        ForecastStrip.tsx      # 7-day forecast timeline with moon phases
        CompactTideCard.tsx    # Compact tide summary card
        WindCompass.tsx         # Wind direction compass
        tide-helpers.ts        # Tide calculation utilities
    utils/hooks/
      use-custom-mqtt.ts       # New: MQTT hooks for custom D-Bus services

mfd-custom-app/                # Deployment package
  install.sh                   # Install on Cerbo GX
  uninstall.sh                 # Remove from Cerbo GX
  package.sh                   # Build + package tarball and USB zip
  README.md                    # This file

Architecture

The custom pages integrate into the existing venus-html5-app (Marine2 variant):

New views added to AppViews enum for routing
MQTT subscriptions to custom D-Bus services via use-custom-mqtt.ts
Navigation via the Settings menu (gear icon)
Uses existing Tailwind breakpoints and Victron color system
Responsive: works at 640x800 (half-screen) and 1280x800 (full-screen)

MQTT Topics

The custom views subscribe to these D-Bus services bridged to MQTT:

Service	MQTT Prefix	Data
Windy Station	`N/{id}/windystation/0/`	Wind, temp, pressure
Tides	`N/{id}/tides/0/`	Tide predictions, depth, harmonic data
Meteoblue Forecast	`N/{id}/meteoblueforecast/0/`	7-day weather, sun/moon times, moon phases
NFL Tracking	`N/{id}/nfltracking/0/`	GPS, track points, status
Generator Ramp	`N/{id}/generatorramp/0/`	State, current, power, overloads