HA Network Connections Card 3D ORB – Interactive 3D Visualization for Home Assistant

Share your Projects! Dashboards & Frontend
, , ,
1

HA Network Connections Card 3D – Interactive 3D Visualization for Home Assistant

Hello Home Assistant enthusiasts!

I’m excited to introduce HA Network Connections Card 3D, a custom Lovelace card that takes network monitoring to a new dimension! I needed some time to remove some personal code it was pointing to. If you’ve ever wanted to see your network connections come to life in an interactive 3D scene, this project is for you.

preview
preview500×464 90.8 KB

What Is It?

HA Network Connections Card 3D is a Home Assistant custom card that visualizes your network connections in a dynamic 3D orb graph using three.js. Instead of a typical force-directed graph, this card uses a 3D orb layout to give you a fresh perspective on your network activity:

  • Central Hub: The heart of your network, represented as a central node (e.g., your router or main host).
  • Ports: Evenly distributed around the hub using a spherical layout with the golden angle for a naturally balanced view.
  • IP Addresses: These “bloom” out from each port, with collision avoidance ensuring a clear and organized display.
  • Dynamic Labels: As you navigate the 3D scene, labels adjust their size and position based on their distance from the camera.
  • Interactive Navigation: Orbit, zoom, and pan using your mouse or touch gestures—explore your network graph like never before!

How It Works

The project is built around three main components:

1. Custom Command-Line Sensor

A YAML-based sensor collects real-time network connection data using a command chain that leverages netstat, awk, grep, and jq. The sensor outputs a JSON object containing an array of connection objects. Each connection details the source IP/port and target IP/port, which the card then uses for visualization.

2. Custom Lovelace Card (JavaScript)

Written in plain JavaScript and leveraging three.js, the custom card sets up a 3D scene with a central hub. Port nodes are distributed on a sphere around this hub, and individual IP nodes attach to these ports. The card continuously updates based on sensor data and features smooth animations with OrbitControls for a responsive user experience.

3. Lovelace Dashboard Integration

A simple YAML snippet adds the card to your Home Assistant dashboard. Just point the card to your network connection sensor, and you’re all set.

Key Features

  • 3D Orb Visualization: Enjoy a visually engaging 3D representation of your network, where nodes dynamically update in real time.
  • Real-Time Updates: As your network connections change, so does the graph—ensuring you always have an up-to-date picture of your network activity.
  • Interactive Controls: Use mouse or touch gestures to rotate, zoom, and pan around the scene. The controls are powered by OrbitControls from three.js, providing smooth and intuitive interaction.
  • Dynamic Labels: Node labels scale and reposition automatically, so even when you zoom out, every detail remains clear.

Installation

HACS Installation

  1. Add this repository to HACS:
    Add the repository as a custom repository with the type Dashboard.

  2. Install the Card:
    Install the card directly through HACS.

  3. Add the Resource to Home Assistant:
    In your Lovelace resources, add the following:

    url: /local/network-connections-card-3d.js
type: module

  4. Configure Your Lovelace Dashboard Card:
    Create a Manual Card in your Lovelace UI:

    type: custom:network-connections-card-3d
title: Active Network Connections (3D)
entity: sensor.network_connections

Manual Installation

  1. Download the File:
    Download network-connections-card-3d.js from the GitHub repository and place it in your Home Assistant www/ directory (typically <config>/www/).

  2. Add Lovelace Resource:
    In Home Assistant, navigate to Settings → Dashboards → Resources and add the following resource:

    url: /local/network-connections-card-3d.js
type: module

  3. Add the Card to Your Dashboard:
    Create a Manual Card in your Lovelace UI:

    type: custom:network-connections-card-3d
title: Active Network Connections (3D)
entity: sensor.network_connections

Enjoy the New Dimension!

Dive into your network in a whole new way with HA Network Connections Card 3D. Whether you’re monitoring a busy network or just curious about your device connections, this card brings clarity and visual appeal to network management.

Happy monitoring, and enjoy your interactive 3D network visualization!

1 Like