Tiles

Tiles are the fundamental building blocks of ZeroDash.

Each tile occupies a fixed position in a grid and represents either:

• Navigation
• An action
• A stateful control
• An embedded view

All tiles share a common layout structure, while behavior is defined by the tile type.

Common Tile Structure

{
  type: "app",
  layout: {
    x: 1,
    y: 1,
    width: 1,
    height: 1
  },
  config: {
    // type-specific configuration
  }
}

Field	Presence	Description
x	Required	Column position
y	Required	Row position
width	Required	Width in grid cells
height	Required	Height in grid cells

ZeroDash does not dynamically resize or rearrange tiles. Users are expected to define layouts explicitly.

Tile Types

Application (app)

Used to open applications or services.

Configuration Fields

Field	Presence	Description
label	Required	Display name of the application
url	Required	URL opened on click
image	Optional	Icon image URL
statusCheckUrl	Optional	Endpoint used to determine reachability

Behavior

• Clicking opens url
• If statusCheckUrl is provided:
  • It is checked periodically
  • Icon is greyed out when unreachable
• Status checking does not affect navigation

Minimal Example

{
  type: "app",
  layout: { x: 1, y: 1, width: 1, height: 1 },
  config: {
    label: "myApp",
    url: "https://myApp.example.com",
    statusCheckUrl: "https://myApp.example.com/health",
    image: "/icons/myApp.svg"
  }
}

Link (link)

Simple Navigation Shortcut

Configuration fields

Field	Presence	Description
label	Required	Display name
url	Required	Destination URL
image	Optional	Icon image URL

Behavior

• Always navigable
• No reachability checks
• Never greyed out

Minimal Example

{
  type: "link",
  layout: { x: 2, y: 1, width: 1, height: 1 },
  config: {
    label: "Docs",
    url: "https://docs.example.com"
  }
}

Button (button)

Stateless action trigger

Configuration Fields

Field	Presence	Description
label	Required	Display name
url	Required	Endpoint triggered on click
method	Optional	HTTP method (GET or POST)
payload	Optional	JSON body for POST requests

Behavior

• Executes an HTTP request on click
• No state is stored or tracked
• Visual feedback indicates click success only

Minimal Example

{
  type: "button",
  layout: { x: 1, y: 3, width: 1, height: 1 },
  config: {
    label: "Restart",
    url: "/webhook/restart",
    method: "POST"
  }
}

Toggle (toggle)

Stateful control backed by an external system

Configuration Fields

Field	Presence	Description
label	Required	Display name
statusCheckUrl	Required	Endpoint returning current state
targetUrl.trueUrl	Required	Endpoint to enable state
targetUrl.falseUrl	Required	Endpoint to disable state
targetUrl.trueImage	Required	Icon when state is ON
targetUrl.falseImage	Required	Icon when state is OFF
tag	Optional	Group identifier for synchronized toggles

Behavior

• State is determined via statusCheckUrl
• Clicking toggles state using targetUrl
• Visual state always reflects backend state

Toggle Tags

• Toggles sharing the same non-empty tag behave like radio buttons
• Clicking one toggle:
  • Executes its action
  • Refreshes all toggles with the same tag
• Empty or missing tag → no synchronization

Typical use-case: CPU governor selection.

{
  type: "toggle",
  tag: "cpu-governor",
  layout: { x: 1, y: 5, width: 1, height: 1 },
  config: {
    label: "Performance",
    statusCheckUrl: "example.com/status/performance",
    targetUrl: {
      trueUrl: "example.com/set/performance",
      falseUrl: "example.com/unset/performance",
      trueImage: "/user/icons/generic-on.png",
      falseImage: "/user/icons/generic-off.png",
    }
  }
}
... // Similar tiles for Schedutil, PowerSave & Conservative all sharing the same tag - "cpu-governor"

Widget (widget)

Embedded iframe content

Configuration Fields

Field	Presence	Description
url	Required	URL loaded inside the iframe
refreshInterval	Optional	Auto-refresh interval (seconds)

Behavior

• Content is loaded in an iframe
• If refreshInterval > 0, iframe reloads periodically
• Designed for static or generated dashboards

A typical example would be a CPU Widget like Dashdot. Widgets are excluded from search.

Minimal Example

{
  type: "widget",
  layout: { x: 1, y: 7, width: 4, height: 2 },
  config: {
    url: "https://status.example.com/widget",
    refreshInterval: 30
  }
}

Performance Notes

• Prefer backend aggregation over frequent widget refresh (might slow down the browser)
• Avoid unnecessary auto-refresh on low power client-devices
• ZeroDash itself performs minimal work by design

Summary

• All tiles share a common layout model
• Behavior is determined solely by tile type
• Backend logic is always user-controller
• ZeroDash remains lightweight & predictable