ftui

FHEM Tablet UI (FTUI)

UI Builder Framework for FHEM

A modern, flexible UI builder framework for FHEM home automation.
Built with a clear intention: Keep it short and simple!

Version 3 - Built with Web Components using pure ES2020 JavaScript.

⚠️ Important Notes:

FTUI Screenshot

Table of Contents

Installation

Quick Install

  1. Download and extract FTUI: 
    wget https://github.com/knowthelist/ftui/tarball/master -O /tmp/ftui.tar
cd /tmp && tar xvzf /tmp/ftui.tar
mv /tmp/knowthelist-ftui-*/www/ftui /opt/fhem/www
  2. Customize your page:
    • Edit index.html according to your needs
    • Add your FHEM devices and readings
  3. Access your UI:
    • Open in browser: http://<fhem-url>:8083/fhem/ftui/index.html

Backend Configuration

FTUI supports two powerful backends that can be used independently or simultaneously:

FHEM Backend

FTUI works out-of-the-box with FHEM. Simply ensure your FHEM instance is running and accessible.

FHEMWEB Authentication

If your FHEMWEB instance is protected by HTTP authentication and FTUI shows an error like GET https://<servername>:8083/fhem/?XHR=1 401 (Authorization Required), then the browser is not authenticated for the FHEMWEB endpoint that FTUI is using.

FTUI does not currently send a custom Authorization header for FHEM requests on its own. In practice that means one of these setups is required:

  1. Open the FHEMWEB URL in the browser first and complete the authentication challenge there, then load the FTUI page in the same browser session.
  2. Serve FTUI from the same authenticated FHEMWEB origin so the browser can reuse that authenticated session.
  3. Put FTUI/FHEMWEB behind a reverse proxy that handles authentication before the request reaches FTUI.
  4. Expose a dedicated FHEMWEB instance or path for FTUI that is reachable without HTTP auth but still protected appropriately at the network level.

If FTUI should talk to a specific FHEMWEB path, set it explicitly in the page header:

<meta name="fhemweb_url" content="https://servername:8083/fhem/">

Important notes:

Home Assistant support stays dormant unless FTUI sees valid Home Assistant configuration and actual HA bindings.

If you are a FHEM-only user, leave homeAssistant.enabled at false or omit the homeAssistant block entirely in config.local.js.

Example usage:

<ftui-label [text]="WeatherDevice:temperature" unit="°C"></ftui-label>
<ftui-switch [(value)]="lamp1"></ftui-switch>
<ftui-button (value)="dummy1">Toggle</ftui-button>

Home Assistant Backend

To connect FTUI to Home Assistant, you need to configure CORS and create an access token.

Activation checklist:

Setup Steps:

  1. Configure CORS in Home Assistant

    Add the following to your configuration.yaml:

    http:
  cors_allowed_origins:
    - http://fhem.home.arpa:8083
    - http://fhem:8083
    - http://localhost:8083
  use_x_forwarded_for: true
  trusted_proxies:
    - 172.168.101.0/24
  2. Create a Long-Lived Access Token
    • In Home Assistant, go to: Profile → Security → Long-lived access tokens
    • Click “Create Token”
    • Give it a meaningful name (e.g., “FTUI Access”)
    • Copy the generated token
  3. Configure FTUI

Create a config.local.js file in your FTUI installation directory (www/ftui/config.local.js):

   export const config = {
       homeAssistant: {
           enabled: true,
           url: 'http://homeassistant:8123',
           token: 'YOUR_LONG_LIVED_ACCESS_TOKEN_HERE',
       },
   };

Note: You can also edit config.js directly, but using config.local.js is recommended to avoid conflicts during updates. After changing config.local.js, reload the browser page.

Required switches:

  1. Use Home Assistant in HTML

    Prefix all Home Assistant entities with ha::

    <ftui-label [text]="ha:weather.forecast_home:temperature" size="3" unit="°C"></ftui-label>
   
<ftui-label [text]="ha:weather.forecast_home:humidity" size="3" unit="%"></ftui-label>
   
<ftui-switch [(value)]="ha:light.living_room"></ftui-switch>
   
<ftui-knob 
    [value]="ha:sensor.outdoor_temperature"
    [color]="ha:sensor.outdoor_temperature | step('-99: blue, 10: ok, 20: warning, 25: danger')"
    width="130" 
    offset-y="10"
    type="handle" 
    min="-10" 
    max="40" 
    decimals="1" 
    unit="°C" 
    readonly 
    has-value-text>
</ftui-knob>

  2. Access Your Page:

    • Open the dedicated HA example: http://fhem:8083/fhem/ftui/examples/ha.html
    • Additional generic HA examples: http://fhem:8083/fhem/ftui/examples/ha-basic.html and http://fhem:8083/fhem/ftui/examples/ha-mobile.html
    • Pages with ha: bindings require enabled: true, url, and token.
    • Private local dashboards should use the underscore convention in the FTUI root, for example http://fhem:8083/fhem/ftui/_mobile_full.html.
    • Private partials can also use underscore names, for example _mobile-solar.html.
    • If you see Home Assistant support is disabled, then enabled: true is missing.
    • If you see Home Assistant is not fully configured, then url or token is missing or invalid.

Dual Backend Setup

FTUI can communicate with both FHEM and Home Assistant simultaneously! This is perfect if you’re migrating between systems or want to use the best features of both platforms.

Configuration Example:

export const config = {
    homeAssistant: {
    enabled: true,
        url: 'http://homeassistant:8123',
        token: 'YOUR_HA_TOKEN_HERE',
    },
    // FHEM is automatically detected from the web server
};

Usage Example - Mixed Backends:

<!-- FHEM devices -->
<ftui-label [text]="FHEMWeather:temperature" unit="°C"></ftui-label>
<ftui-button (value)="FHEMDummy">FHEM Device</ftui-button>

<!-- Home Assistant devices -->
<ftui-switch [(value)]="ha:light.bedroom"></ftui-switch>
<ftui-label [text]="ha:sensor.temperature" unit="°C"></ftui-label>

<!-- Combined example -->
<ftui-grid base-width="100" base-height="100">
    <ftui-grid-tile row="1" col="1">
        <ftui-row>
            <ftui-column>
                <h3>FHEM Devices</h3>
                <ftui-button (value)="lamp1">FHEM Lamp</ftui-button>
            </ftui-column>
            <ftui-column>
                <h3>Home Assistant</h3>
                <ftui-switch [(value)]="ha:light.kitchen"></ftui-switch>
            </ftui-column>
        </ftui-row>
    </ftui-grid-tile>
</ftui-grid>

Key Points:

Update

To update FTUI to the latest version via FHEM:

update all https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt

Enter this command in the FHEM command field of FHEMWEB.

Docker Setup

You can host FTUI on your own web server using Docker instead of via FHEMWEB.

Steps:

  1. Pull the Docker image: 
    docker pull knowthelist/ftui
  2. Prepare your index.html:
    • Place your customized index.html in an accessible location
    • Add the FHEMWEB URL to the <head> section: 
      <meta name="fhemweb_url" content="http://<your_fhem_url>:8083/fhem/">
  3. Run the container: 
    docker run -d \
  -p 8080:80 \
  -v <path>/index.html:/usr/share/nginx/html/index.html \
  --name ftui3 \
  knowthelist/ftui
  4. Access your UI:
    • Open in browser: http://<docker_host>:8080

Docker Compose Example:

version: '3.8'
services:
  ftui:
    image: knowthelist/ftui
    container_name: ftui3
    ports:
      - "8080:80"
    volumes:
      - ./index.html:/usr/share/nginx/html/index.html
    restart: unless-stopped

Development

For developers who want to contribute or customize FTUI:

  1. Clone the repository: 
    cd ~
git clone https://github.com/knowthelist/ftui.git
  2. Link to FHEM’s www directory: 
    ln -s $HOME/ftui/www/ftui /opt/fhem/www/ftui_dev
  3. Access the development version:
    • Open: http://<fhem-url>:8083/fhem/ftui_dev/index.html
  4. Snippet Tester:
    • Test components live: http://<fhem-url>:8083/fhem/ftui_dev/ftui-snippet-tester.html
    • Paste HTML snippets and see them rendered in real-time

Usage

Add FTUI web components to your HTML code. Components support powerful data binding and real-time updates.

Basic Examples:

Button:

<ftui-button (value)="dummy1">on/off</ftui-button>

Label:

<ftui-label [text]="dummy1"></ftui-label>

Icon with dynamic properties:

<ftui-icon 
    [name]="dummy1 | map('on: lightbulb-on, off: lightbulb')"
    [color]="temperature | step('0: success, 50: warning, 80: danger')">
</ftui-icon>

Binding

FTUI uses a powerful data binding system inspired by modern frameworks. Bindings connect your HTML elements to FHEM/Home Assistant data sources.

No Binding - Fixed Value

<ftui-label color="danger">demo</ftui-label>

Input Binding (One-Way: Backend → UI)

Updates the UI when the backend reading changes.

Long format:

<ftui-label get-color="dummy1:color">demo</ftui-label>

Short format (recommended):

<ftui-label [color]="dummy1:color">demo</ftui-label>

Reading Format:

[attribute]="DEVICE:READING:PROPERTY"

Example - Show timestamp:

<ftui-label [text]="WeatherLocal:state:time | toDate() | format('HH:mm:ss')"></ftui-label>

Attribute Binding

Set HTML attributes dynamically:

<ftui-label [attr.data-my]="dummy1:status">demo</ftui-label>

Output Binding (One-Way: UI → Backend)

Updates the backend when UI changes.

Long format:

<ftui-button set-value="dummy1"></ftui-button>

Short format (recommended):

<ftui-button (value)="dummy1"></ftui-button>

Two-Way Binding (Bidirectional)

Synchronizes both directions automatically.

Long format:

<ftui-button getset-value="dummy1"></ftui-button>

Short format - “Banana in a Box” (recommended):

<ftui-button [(value)]="dummy1"></ftui-button>

Local Binding

The device name local is reserved for client-side binding that doesn’t sync with backends.

<link href="themes/mobile-dark-theme.css" rel="stylesheet"
      ftui-binding [disabled]="local:dark">

Built-in local variables:

Events

Components provide events that trigger on attribute changes. The $event object contains a detail property with the changed data.

<ftui-colorpicker @color-change="console.log($event.detail.hexString)"></ftui-colorpicker>

<ftui-dropdown 
    [list]="deviceList:list" 
    [(value)]="selectedDevice" 
    @value-change="console.log('Selected:', $event.detail)">
</ftui-dropdown>

<ftui-dropdown
  list="Living Room,Kitchen,Bedroom"
  vallist="living,kitchen,bedroom"
  value="kitchen">
</ftui-dropdown>

Use events to communicate between components and trigger custom JavaScript.

Pipes

Binding values can be transformed using pipe functions. Multiple pipes can be chained together.

Available Pipes:

Pipe Description Example
part(number) Extract part of string by index "one two three" \| part(1) → "two"
toDate(format) Convert to date object "2024-01-15" \| toDate()
toBool() Convert to boolean "1" \| toBool() → true
toInt() Convert to integer "3.14" \| toInt() → 3
toNumber() Convert to float "3.14" \| toNumber() → 3.14
format(string) Format date/time date \| format('YYYY-MM-DD HH:mm')
humanized() Human-readable duration 3600 \| humanized() → "1 hour"
round(decimals) Round number 3.14159 \| round(2) → 3.14
fix(decimals) Fixed decimal places 3.1 \| fix(2) → "3.10"
roundMoney() Format as currency 1234.5 \| roundMoney() → "1,234.50"
slice(start, end) Extract substring "hello" \| slice(0,2) → "he"
encode() URL encode "hello world" \| encode() → "hello%20world"
add(number) Add to value 10 \| add(5) → 15
multiply(number) Multiply value 5 \| multiply(2) → 10
divide(number) Divide value 10 \| divide(2) → 5
replace(find, replace) Replace text "hello" \| replace('h', 'H') → "Hello"
map('in:out,...') Map values "on" \| map('on:green,off:red') → "green"
filter('val,val,...') Filter matching values "test" \| filter('test,demo') → "test"
step('val:out,...') Step-based mapping 15 \| step('0:cold,10:ok,20:warm') → "ok"
scale(minIn,maxIn,minOut,maxOut) Scale value range, clamped to bounds 50 \| scale(0,100,0,255) → 127.5
ago() Time ago timestamp \| ago() → "2 hours ago"
till() Time until timestamp \| till() → "in 3 hours"
timeFormat(format,inputMode,formatMode) Format time 3661 \| timeFormat('HH:mm:ss') → "01:01:01"
minusBlue(threshold) Return blue if below threshold 5 \| minusBlue(10) → "blue"
contains(value) Check if contains value "hello" \| contains('ell') → true
not() Logical NOT true \| not() → false
is(value) Check equality "on" \| is('on') → true
isNot(value) Check inequality "on" \| isNot('off') → true
pad(count, char) Pad string with character "5" \| pad(3,'0') → "005"
append(text) Append text "hello" \| append(' world') → "hello world"
prepend(text) Prepend text "world" \| prepend('hello ') → "hello world"
capitalize() Capitalize first letter "hello" \| capitalize() → "Hello"

Input Examples (Backend → UI):

<!-- Chain multiple pipes -->
<ftui-label [text]="WeatherLocal:state | part(4) | toInt() | multiply(2) | round(1)"></ftui-label>

<!-- Map values to text -->
<ftui-icon [name]="lamp:state | map('on:lightbulb-on,off:lightbulb')"></ftui-icon>

<!-- Step-based color -->
<ftui-label 
    [text]="temperature" 
    [color]="temperature | step('0:blue,10:green,20:yellow,30:red')">
</ftui-label>

<!-- Format timestamp -->
<ftui-label [text]="sensor:state:time | toDate() | format('DD.MM.YYYY HH:mm')"></ftui-label>

Output Examples (UI → Backend):

<!-- Remove # from color before sending -->
<ftui-colorpicker (hex)="HUEDevice:rgb | replace('#','')"></ftui-colorpicker>

<!-- Scale slider value -->
<ftui-slider (value)="dimmer:pct | scale(0,100,0,255)"></ftui-slider>

Colors

FTUI provides a comprehensive color palette with named colors for consistent theming.

Color Categories

Color values shown are from the default ftui-theme. Available themes may use different values.

Main Colors:

Status Colors:

Alternative Status:

Spectrum Colors:

Neutral Colors:

Available Themes

FTUI includes several pre-built themes. Include them in your HTML <head>:

Default Theme (Dark):

<link href="themes/ftui-theme.css" rel="stylesheet">

Bright Theme (Light):

<link href="themes/bright-theme.css" rel="stylesheet">

Clean, bright interface with light backgrounds. Colors: Primary #3880ff, Success #32a054, Danger #ed553b

Vivid Theme (Vibrant):

<link href="themes/vivid-theme.css" rel="stylesheet">

High-contrast vibrant colors. Colors: Primary #007bff, Success #28a745, Warning #ffc107

Retro Theme:

<link href="themes/retro-theme.css" rel="stylesheet">

Classic retro styling with warm tones.

Mobile Themes:

<!-- Light mobile theme -->
<link href="themes/mobile-theme.css" rel="stylesheet">

<!-- Dark mobile theme -->
<link href="themes/mobile-dark-theme.css" rel="stylesheet">

<!-- iOS-inspired theme -->
<link href="themes/mobile-ios.css" rel="stylesheet">

Usage Examples

<ftui-button color="primary">Primary Button</ftui-button>
<ftui-label color="danger">Error Message</ftui-label>
<ftui-icon name="warning" color="warning"></ftui-icon>

<!-- Dynamic color based on value -->
<ftui-label 
    [text]="temperature" 
    [color]="temperature | step('0:blue,15:green,25:yellow,30:red')">
</ftui-label>

<!-- Multiple colored components -->
<ftui-row>
  <ftui-button color="success">Success</ftui-button>
  <ftui-button color="warning">Warning</ftui-button>
  <ftui-button color="danger">Danger</ftui-button>
</ftui-row>

View Color Examples

Components

FTUI provides a rich set of web components for building interactive UIs.

Layout Components

Display Components

Input Components

Data Visualization

Special Components

Note: All components support the following common attributes:

Mobile UI

FTUI is perfect for creating responsive mobile interfaces using the ftui-view component.

Mobile Screenshot

View Mobile Demo

Component Reference

Button

Interactive buttons with multiple states and styles.

Attribute Description Type Default
color Color palette selection "primary" | "secondary" | "success" | "warning" | "danger" | "light" | "medium" | "dark" "primary"
fill Button fill style "clear" | "outline" | "solid" "solid"
size Button size "small" | "normal" | "large" "normal"
shape Button shape "round" | "normal" | "circle" "normal"
value Current state value String "off"
states Available states (comma-separated) String "on,off"

Example:

<ftui-button color="success" fill="solid" shape="round" [(value)]="lamp1">
    Toggle Light
</ftui-button>

Label

Display text with formatting options.

Attribute Description Type Default Example
text Text to display String ""  
color Text color Color name "" "danger"
unit Unit suffix String "" "°C"
interval Auto-reload interval (seconds) Number 0 60
size Font size Number | String 0 3 or "80%" or "12px"

Size Mapping

When size is a number, it maps to these font sizes:

Size Font Size Size Font Size
-4 0.125em 0 1em
-3 0.25em 1 1.25em
-2 0.5em 2 1.5em
-1 0.75em 3 1.75em
    4 2em
    5 2.5em
    6-12 3em-12em

Size can also be specified as %, px, or em strings.

Examples:

<ftui-label [text]="temperature" size="3" unit="°C" color="primary"></ftui-label>
<ftui-label text="System Status" size="80%" color="success"></ftui-label>
<ftui-label [text]="sensor:state" size="12px"></ftui-label>

Image

Display images with refresh capabilities.

Attribute Description Type Default
base Base URL path String ""
src Image filename or full URL String ""
width Image width Number | "auto" "auto"
height Image height Number | "auto" "auto"
interval Auto-reload interval (seconds) Number 0
refresh Reload trigger attribute String ""
nocache Bypass cache Boolean false

Examples:

<!-- Simple image -->
<ftui-image src="weather.png" width="200"></ftui-image>

<!-- Auto-refresh every 30 seconds -->
<ftui-image src="camera/snapshot.jpg" interval="30" nocache></ftui-image>

<!-- Refresh on device change -->
<ftui-image 
    base="/fhem/images/" 
    src="floorplan.png" 
    [refresh]="motion_sensor:state">
</ftui-image>

Solar Flow

Visualize power flow between solar input, battery, inverter, home, and grid.

Use kebab-case HTML attributes for component properties. For example, maxInverterPower in the component is configured as max-inverter-power in markup, and maxGridPower is configured as max-grid-power.

The soc attribute now renders correctly even when the value is exactly 100, so no binding workaround like | add(1) is needed.

Example:

<ftui-solar-flow
  [solar-power]="Zendure_Hub2000:properties_solarInputPower"
  [soc]="Zendure_Hub2000:properties_electricLevel"
  [inverter-power]="Zendure_Hub2000:properties_outputHomePower"
  max-inverter-power="6000"
  [home-power]="LeistungGesamt:state"
  [grid-power]="SmartMeter:GS303_Power_cur"
  max-grid-power="5000"
  [battery-current]="Zendure_Hub2000:BatCurrent"
  [grid-input-power]="Zendure_Hub2000:properties_gridInputPower">
</ftui-solar-flow>

Badge

Display notification badges that disappear when empty.

Attribute Description Type Default
color Badge color Color name "primary"
text Badge content String ""

Examples:

<!-- Static badge -->
<ftui-badge text="5" color="danger"></ftui-badge>

<!-- Dynamic notification count -->
<ftui-badge [text]="notifications:count" color="warning"></ftui-badge>

Speak

Text-to-speech synthesis using the Web Speech API.

Attribute Description Type Default
lang Language code "en-US" | "de-DE" | etc. User agent default
pitch Voice pitch (0.0-2.0) Float 0.9
rate Speech rate (0.1-10) Float 1.0
volume Volume (0.0-1.0) Float 1.0
text Text to speak String ""

Examples:

<!-- Announce temperature changes -->
<ftui-speak 
    lang="en-US" 
    rate="1.2" 
    [text]="temperature | format('Temperature is now {0} degrees')">
</ftui-speak>

<!-- German announcement -->
<ftui-speak 
    lang="de-DE" 
    pitch="1.0" 
    [text]="doorbell:state | map('on:Jemand ist an der Tür')">
</ftui-speak>

Colorpicker

Advanced color selection supporting RGB, HSL, and hex formats.

Attribute Description Type Default
hex RGB hex value (#ffffff) String ""
hue Hue (0-360) Number 0
saturation Saturation (0-100) Number 0
brightness Brightness (0-100) Number 0

Examples:

<!-- Simple hex color picker -->
<ftui-colorpicker [(hex)]="rgbLamp:rgb"></ftui-colorpicker>

<!-- HSL color picker for Hue lights -->
<ftui-colorpicker 
    [(hue)]="ha:light.bedroom:hs_color[0]"
    [(saturation)]="ha:light.bedroom:hs_color[1]">
</ftui-colorpicker>

<!-- With change event -->
<ftui-colorpicker 
    [(hex)]="colorLight:hex"
    @color-change="console.log('New color:', $event.detail.hexString)">
</ftui-colorpicker>

Chart

Powerful charting component powered by Chart.js.

Supported Chart Types:

Main Component: ftui-chart

Attribute Description Type Default
title Chart title String ""
type Chart type String "line"
width Chart width String ""
height Chart height String ""
unit Time unit "day" | "hour" | "minute" "day"
offset Time offset Number 0
prefetch Data prefetch amount Number 0
extend Extend data range Boolean false
noscale Disable auto-scaling Boolean false
no-y Hide Y-axis Boolean false
no-y1 Hide secondary Y-axis Boolean false
no-x Hide X-axis Boolean false
y-min Y-axis minimum Number 0
y-max Y-axis maximum Number 0
y1-min Y1-axis minimum Number 0
y1-max Y1-axis maximum Number 0
y-label Y-axis label String ""
y1-label Y1-axis label String ""

Child Component: ftui-chart-data

Attribute Description Type Default
label Data series label String ""
type Chart type override String "line"
fill Fill under line Boolean false
hidden Hide series Boolean false
background-color Fill color Color ""
border-color Line/border color Color Primary color
border-width Line width Number 1.2
point-radius Point size Number 2
log FHEM DbLog device String "-"
file Log file type String "-"
spec Reading specification String "4:.*"
unit Data unit String "°C"
start-date Start date Date ""
end-date End date Date ""
update Update trigger String ""
tension Line curve tension Number 0.0
stepped Stepped line Boolean false
y-axis-id Y-axis assignment Number 0

Examples:

<!-- Simple temperature chart -->
<ftui-chart title="Temperature History" height="300px">
    <ftui-chart-data 
        label="Living Room"
        log="DBLogDevice" 
        file="history" 
        spec="TempSensor:temperature"
        border-color="red"
        fill>
    </ftui-chart-data>
</ftui-chart>

<!-- Multi-series chart with auto-update -->
<ftui-chart title="Climate Data" type="line" height="400px">
    <ftui-chart-data 
        label="Temperature"
        log="DBLog" 
        file="history" 
        spec="Climate:temperature"
        unit="°C"
        border-color="orange"
        [update]="Climate:temperature:time">
    </ftui-chart-data>
    
    <ftui-chart-data 
        label="Humidity"
        log="DBLog" 
        file="history" 
        spec="Climate:humidity"
        unit="%"
        border-color="blue"
        y-axis-id="1">
    </ftui-chart-data>
</ftui-chart>

<!-- Mixed chart types -->
<ftui-chart title="Energy Consumption">
    <ftui-chart-data 
        label="Daily Usage"
        type="bar"
        log="DBLog" 
        file="history" 
        spec="Power:daily"
        background-color="green">
    </ftui-chart-data>
    
    <ftui-chart-data 
        label="Average"
        type="line"
        log="DBLog" 
        file="history" 
        spec="Power:average"
        border-color="red"
        tension="0.4">
    </ftui-chart-data>
</ftui-chart>

Icon

Display icons from the built-in icon library.

Attribute Description Type Default
type Icon type String ""
path Icon path String ""
name Icon name String ""
color Icon color Color name ""
rgb RGB color value String ""
size Icon size Number | String 0
height Icon height String ""
width Icon width String ""
rotate Rotation in degrees Number 0

Size Mapping (same as Label)

When size is a number, it maps to font sizes from 0.125em to 12em.

Examples:

<!-- Simple icon -->
<ftui-icon name="lightbulb" color="yellow" size="3"></ftui-icon>

<!-- Dynamic icon based on state -->
<ftui-icon 
    [name]="lamp:state | map('on:lightbulb-on,off:lightbulb')"
    [color]="lamp:state | map('on:yellow,off:gray')"
    size="4">
</ftui-icon>

<!-- Rotated icon -->
<ftui-icon name="arrow-up" rotate="45" color="primary" size="2"></ftui-icon>

View All Icons

Layout Components

Build complex layouts with Row, Column, and Cell components using a flexible CSS Flexbox-based system.

Component Overview

Common Attributes

All layout components support:

Attribute Values Description
align-items left, right, top, bottom, center, around, stretch Flexbox alignment control
margin CSS value (e.g., "1", "1em", "0 0 0 10px") Outer spacing
padding CSS value Inner spacing
width CSS value (e.g., "50%", "200px") Component width
height CSS value (e.g., "70%", "600px") Component height
gap CSS value (e.g., "0.5") Spacing between child elements

Practical Examples

Basic Row Layout - Horizontal button arrangement:

<ftui-row align-items="stretch">
  <ftui-button [(value)]="device1">Device 1</ftui-button>
  <ftui-button [(value)]="device2">Device 2</ftui-button>
  <ftui-button [(value)]="device3">Device 3</ftui-button>
</ftui-row>

Nested Row & Column - Multi-room light controls:

<ftui-row>
  <ftui-column>
    <ftui-row>
      <ftui-label text="Living Room"></ftui-label>
      <ftui-button shape="circle" [(value)]="room1">
        <ftui-icon name="lightbulb"></ftui-icon>
      </ftui-button>
    </ftui-row>
    <ftui-row>
      <ftui-label text="Kitchen"></ftui-label>
      <ftui-button shape="circle" [(value)]="room2">
        <ftui-icon name="lightbulb"></ftui-icon>
      </ftui-button>
    </ftui-row>
  </ftui-column>
  <ftui-column>
    <ftui-row>
      <ftui-label text="Bedroom"></ftui-label>
      <ftui-button shape="circle" [(value)]="room3">
        <ftui-icon name="lightbulb"></ftui-icon>
      </ftui-button>
    </ftui-row>
  </ftui-column>
</ftui-row>

Column with Alignment - Sensor data display:

<ftui-row>
  <ftui-column align-items="left" margin="1">
    <ftui-label text="Thermostat"></ftui-label>
    <ftui-label text="Radiator"></ftui-label>
    <ftui-label text="Heater"></ftui-label>
  </ftui-column>
  <ftui-column align-items="left" margin="1">
    <ftui-label [text]="device:temp1" unit="°C"></ftui-label>
    <ftui-label [text]="device:temp2" unit="°C"></ftui-label>
    <ftui-label [text]="device:temp3" unit="°C"></ftui-label>
  </ftui-column>
</ftui-row>

Cell for Content Grouping - Weather display with gap spacing:

<ftui-cell align-items="left" gap="0.5">
  <ftui-label color="medium" size="1">Temperature</ftui-label>
  <ftui-label [text]="weather:temp | fix(1)" unit="°" size="8" thin></ftui-label>
</ftui-cell>
<ftui-cell align-items="left" margin="1em 0 0" gap="0.5">
  <ftui-label color="medium">Rain</ftui-label>
  <ftui-label [text]="weather:rain" size="3" unit="mm" thin></ftui-label>
</ftui-cell>

Responsive Height - Full-height column:

<ftui-column height="70%">
  <ftui-button>Button 1</ftui-button>
  <ftui-button>Button 2</ftui-button>
</ftui-column>

Tips

Examples

Explore the full capabilities of FTUI with these live examples:

Layout & Structure

Display Components

Input & Control

Advanced Components

Mobile UIs

Files prefixed with _ are private/local dashboard variants and are intentionally not part of the public example set.

Theming

Troubleshooting

Common Issues

Backend Connection Errors:

Components Not Rendering:

Updates Not Working:

Contributing

Contributions are welcome! If you’d like to contribute:

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Test thoroughly
  5. Submit a pull request

Report bugs and feature requests on the GitHub Issues page.

Donation

Support the continued development of this versatile UI framework:

Donate via PayPal

Many thanks to all donors and contributors!

License

This project is licensed under the MIT License.

Community & Support

Built with ❤️ for the FHEM and Home Assistant communities

This site is open source. Improve this page.