template

Overview

The template node creates fully custom dashboard widgets. Write your own HTML, CSS, and JavaScript for complete control over appearance and behavior. Access Angular scope for data binding and message handling.

Properties

Available Scope Variables

{"{{msg.payload}}"}
{"{{msg.topic}}"}

this.send({payload: value})

Example: Custom Sensor Card

<style>
.sensor-card {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 12px;
    padding: 20px;
    color: white;
}
.sensor-value {
    font-size: 48px;
    font-weight: bold;
    color: #22c55e;
}
.sensor-label {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
}
</style>

<div class="sensor-card">
    <div class="sensor-label">Temperature</div>
    <div class="sensor-value">{"{{msg.payload}}"}°C</div>
    <div class="sensor-label">Last update: {"{{msg.timestamp | date:'HH:mm:ss'}}"}</div>
</div>

Example: Interactive Controls

<style>
.control-panel { padding: 15px; }
.btn {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.btn-on { background: #22c55e; color: white; }
.btn-off { background: #ef4444; color: white; }
</style>

<div class="control-panel">
    <h3>Device Control</h3>
    <button class="btn btn-on" ng-click="send({payload: 'on'})">
        Turn ON
    </button>
    <button class="btn btn-off" ng-click="send({payload: 'off'})">
        Turn OFF
    </button>
    <p>Current state: <strong>{"{{msg.payload}}"}</strong></p>
</div>

Example: Animated SVG Gauge

<style>
.gauge-container { text-align: center; }
.gauge-value { font-size: 24px; font-weight: bold; }
</style>

<div class="gauge-container">
    <svg width="150" height="100" viewBox="0 0 150 100">
        <!-- Background arc -->
        <path d="M 20 80 A 55 55 0 0 1 130 80"
              fill="none" stroke="#333" stroke-width="12"/>
        <!-- Value arc -->
        <path d="M 20 80 A 55 55 0 0 1 130 80"
              fill="none" stroke="#22c55e" stroke-width="12"
              stroke-dasharray="{"{{msg.payload * 1.73}}"} 173"/>
    </svg>
    <div class="gauge-value">{"{{msg.payload}}"}%</div>
</div>