Dashboard Tiles

This page is a stub. Help us expand it!

Overview

Plugins can add custom tiles to the Unraid dashboard to display status information, quick actions, or key metrics at a glance.

📷 Screenshot needed: Dashboard showing plugin tiles

Dashboard Tile Basics

TODO: Document the structure for adding dashboard tiles

File Location

/usr/local/emhttp/plugins/yourplugin/dashboard/YourTile.page

Basic Tile Structure

<?
// YourTile.page
?>

Menu="Dashboard"
Title="Your Plugin Status"
Icon="your-icon"
---
<?
// PHP code for tile content
$status = getPluginStatus();
?>

<div class="dashboard-tile">
    <div class="tile-header">
        <i class="fa fa-cog"></i>
        <span>Your Plugin</span>
    </div>
    <div class="tile-content">
        <p>Status: <?=$status?></p>
    </div>
</div>

Tile Types

TODO: Document different tile types available

Status Tile

<div class="dashboard-tile status-tile">
    <div class="tile-icon <?=$running ? 'online' : 'offline'?>">
        <i class="fa fa-server"></i>
    </div>
    <div class="tile-info">
        <span class="title">Service Name</span>
        <span class="status"><?=$running ? 'Running' : 'Stopped'?></span>
    </div>
</div>

Metric Tile

<div class="dashboard-tile metric-tile">
    <div class="metric-value">42</div>
    <div class="metric-label">Active Tasks</div>
</div>

Action Tile

<div class="dashboard-tile action-tile">
    <button onclick="performAction()">
        <i class="fa fa-play"></i>
        Start Service
    </button>
</div>

Real-time Updates

Use nchan for live dashboard updates:

// Subscribe to updates
var eventSource = new EventSource('/sub/yourplugin/dashboard');

eventSource.onmessage = function(event) {
    var data = JSON.parse(event.data);
    updateTile(data);
};

function updateTile(data) {
    $('.yourplugin-status').text(data.status);
    $('.yourplugin-value').text(data.value);
}

Tile Sizing

TODO: Document tile size options

/* Small tile */
.dashboard-tile.small {
    width: 200px;
    height: 100px;
}

/* Medium tile */
.dashboard-tile.medium {
    width: 300px;
    height: 150px;
}

/* Large tile */
.dashboard-tile.large {
    width: 400px;
    height: 200px;
}

Conditional Display

Show tiles only when relevant:

<?
// Only show tile if plugin is configured
$cfg = parse_plugin_cfg('yourplugin');
if (empty($cfg['enabled']) || $cfg['enabled'] !== 'yes') {
    return; // Don't render tile
}
?>

<!-- Tile content -->

Dashboard Permissions

TODO: Document how to respect user permissions on dashboard tiles

Styling Guidelines

Match Unraid’s visual style
Use appropriate colors for status
Keep information concise
Ensure readability on all themes

Best Practices

Only show essential information
Update in real-time when appropriate
Provide links to full plugin pages
Consider mobile/responsive display
Don’t overload the dashboard