🏭Foundry Card

A collection of custom dashboard cards for Home Assistant that are designed with industrial and vintage aesthetics.

Table of Contents

1. Cards Included
2. Installation
3. Usage
   • Foundry Gauge Card
   • Foundry Analog Clock
   • Foundry Digital Clock
   • Foundry Button Card
   • Foundry Thermometer
   • Foundry Entities Card
   • Foundry Uptime Card
   • Foundry Chart Card
   • Foundry Bar Chart Card
   • Foundry Home Thermostat
   • Foundry Slider Card
   • Foundry Title Card
   • Foundry Analog Meter Card
   • Foundry Digital Meter Card
4. Dynamic Entity Themes
5. Custom Themes
6. Development
7. Roadmap
8. Support
9. License
10. Credits

Cards Included

⏱️ Foundry Gauge Card

Display your sensor data with a beautiful foundry gauge visualization featuring:

• Customizable min/max values
• Smooth needle animation
• Theme-aware colors
• Responsive design

🕰️ Foundry Analog Clock

A skeuomorphic analog clock with:

• Realistic hand movements
• Multiple ring styles (Brass, Silver, Copper, etc.)
• Time zone support
• Second hand toggling

📟 Foundry Digital Clock

A vintage industrial digital display featuring:

• Retro LCD/LED aesthetics
• 12h/24h formats
• Custom backlight and digit colors
• Wear and age effects

🔘 Foundry Button Card

A tactile industrial push-button:

• Realistic press animation
• Configurable indicator light
• Everything Customizable
• Jinja2 templating support

🌡️ Foundry Thermometer

An industrial liquid thermometer card:

• Realistic liquid column animation
• Color-coded temperature segments
• Vintage glass tube effects
• Customizable range and units

📋 Foundry Entities Card

A digital list display for multiple entities:

• Supports secondary info (last-updated, last-changed, etc.)
• Configurable decimal places for numeric entities
• time_since / time_since_verbose display for timestamp entities
• Configurable 12-hour / 24-hour clock display for timestamp entities
• Vintage digital VFD/LCD aesthetic
• Customizable fonts and colors
• Same industrial casing options

⚡ Foundry Uptime Card

A vintage uptime monitor:

• Industrial tube visualization
• Metallic dividers and bezels
• Color-coded status thresholds
• Detailed history tracking

📈 Foundry Chart Card

A steampunk-styled line chart for entity history:

• Configurable time range and per-hour data-point density
• Optional min/max scale and filled area
• Theme-aware styling with grid overlays
• Footer start/end labels

📊 Foundry Bar Chart Card

A steampunk-styled bar chart for entity history:

• Configurable time range and per-hour data-point density
• Segment-based bar coloring with optional gradient blending
• Theme-aware styling with grid overlays
• Inspectable values and optional axis min/max labels

🌡️ Foundry Home Thermostat

A vintage-style thermostat controller featuring:

• Odometer-style displays for modes and values
• Interactive controls for temperature, fan, and presets
• Dual setpoint support for Heat/Cool mode
• Rich industrial design with wear and glass effects

🎚️ Foundry Slider Card

A vertical retro-style slider control:

• Industrial knob with metallic finish
• Adjustable track with tick marks
• LED-style digital display
• Customizable knob shapes and sizes
• Multiple ring styles and themes

🏷️ Foundry Title Card

A decorative metallic title plate for grouping dashboard sections:

• Clean minimal design: plate, title, and 2 rivets only
• No ring, no screen, no entity data
• Full theme support with aged texture effects
• Transparent plate mode supported

📊 Foundry Analog Meter Card

A vintage VU-style analog meter:

• Landscape Design: Wide rectangular form factor with a rectangular rim, matching the entities card style.
• VU Meter Arc: Numbers displayed below tick marks with thin connecting lines, like a classic VU meter.
• PEAK LED: Indicator that lights up with the highest color segment when the value meets its threshold.
• Shake Action: Custom tap/hold/double-tap action for a fun meter shake animation.
• Full Theming: Supports all standard Foundry ring styles, plate colors, aged textures, and custom themes.

🎚️ Foundry Digital Meter Card

A vintage digital LED bar meter in a landscape rectangular chassis.

• Dual Entity Support: Can display two separate entities (e.g., L and R audio channels) simultaneously on top and bottom LED bars.
• Dynamic Scale: A detailed dual-line scale with numbers automatically calculates major/minor ticks between the bars.
• Custom Segments: Map value ranges to custom LED colors.
• Full Theming: Matches analog meter face and plate styling perfectly, along with all standard Foundry ring styles and aged textures.

Installation

HACS (Home Assistant Community Store)

Foundry card is available in HACS.

Use this link to directly go to the repository in HACS

or

1. If HACS is not installed yet, download it following the instructions on https://hacs.xyz/docs/use/#getting-started-with-hacs
2. Open HACS in Home Assistant
3. Search for Foundry Card
4. Click the download button. ⬇️
5. Force refresh the Home Assistant page Ctrl + F5 / Shift + ⌘ + R
6. Add any foundry card to your dashboard

Manual Installation

1. Download foundry-card.js and themes.yaml from the latest release
2. Copy foundry-card.js to <config>/www/ directory (create the www folder if it doesn't exist)
3. Copy themes.yaml to <config>/www/ directory (same location as the .js file)
4. Add the resource to your Lovelace dashboard:
   • Go to Settings → Dashboards → Resources
   • Click "Add Resource"
   • URL: /local/foundry-card.js
   • Resource type: JavaScript Module
5. Refresh your browser

Usage

Foundry Gauge Card

Add the card to your dashboard:

type: custom:foundry-gauge-card
entity: sensor.temperature
name: 'Temperature'
min: 0
max: 100
unit: '°C'

Design Features

• Vintage Aesthetic: Aged beige/cream background with subtle texture
• Aged Texture System: Procedural noise-based texture that can be applied to gauge face only or everywhere
  • Three modes: none, glass_only (default), or everywhere
  • Adjustable intensity (0-100) for fine control over the vintage appearance
  • High-quality filtering prevents washed-out colors
• Brass Rim: Gradient brass border with realistic metallic sheen
• Rivets: Decorative corner rivets for industrial look
• Wear Marks: Configurable age spots and wear marks (0-100 wear level) for authenticity
• Glass Effect: Optional subtle highlight overlay simulating glass cover
• Transparent Plate Option: Can make the background transparent to show dashboard background
• Red Needle: Bold red needle with shadow and highlight
• Flip Display: Digital odometer-style display with smooth rolling animation
• Configurable Odometer: Adjustable size (25-200) and vertical position (50-150px)
• Smooth Animation: Configurable animation duration (default 1.2s) with ease-out transition
• High Needle Tracking: Optional high value needle that tracks peak values for a configurable duration
• Multi-line Titles: Support for up to 3 lines of text in title using \n
• Decorative Rings: Choice of brass (default), silver, or no ring styles
• Customizable Plate: Adjustable plate color for the gauge face

Configuration Options

Example Configurations

Click to see examples

Temperature Sensor:

Using the gauge as a temperature sensor

type: custom:foundry-gauge-card
entity: sensor.living_room_temperature
title: Living Room
min: 50
max: 90
unit: °F
segments:
  - from: 50
    to: 68
    color: '#1100ff'
  - from: 68
    to: 78
    color: '#44ff00'
  - from: 78
    to: 90
    color: '#F44336'

Humidity Sensor:

type: custom:foundry-gauge-card
entity: sensor.bathroom_humidity
title: Bathroom\nHumidity
min: 0
max: 100
unit: '%'
segments:
  - from: 0
    to: 30
    color: '#1100ff'
  - from: 30
    to: 50
    color: '#44ff00'
  - from: 50
    to: 85
    color: '#f9bc39'
  - from: 85
    to: 100
    color: '#F44336'

Heavily weathered industrial gauge

type: custom:Foundry-Card
entity: sensor.sumppump_fill_rate
title: Sump Pump\nFill Rate
aged_texture: everywhere
aged_texture_intensity: 80
plate_transparent: false
plate_color: '#d4d4c8'
unit: cm/min
decimals: 1
min: -3
max: 3
rivet_color: '#6a5816'
high_needle_color: '#0040ff'
high_needle_enabled: true
high_needle_length: 75
high_needle_duration: 720
segments:
  - from: -3
    to: 1.3
    color: '#00ff11'
  - from: 1.3
    to: 2
    color: '#fff700'
  - from: 2
    to: 2.5
    color: '#f9bc39'
  - from: 2.5
    to: 3
    color: '#F44336'

Segment Options

Each segment in the segments array can have:

Angle Configuration

The gauge arc can be customized using start_angle and end_angle:

• Angle System: 0° = top of gauge, angles increase clockwise
• start_angle: Where the gauge arc begins (default: 200°)
• end_angle: Where the gauge arc ends (default: 160°)
• The gauge automatically handles wrapping around 360°
• The needle will always travel along the shortest arc and never cross the "dead zone"

Common angle configurations:

• Default (200° to 160°): Classic lower 3/4 arc
• Full semicircle (270° to 90°): Bottom half
• Upper arc (180° to 0°): Top half
• Custom ranges for specific aesthetic needs

Actions

The card supports tap, hold, and double-tap actions like standard Home Assistant cards. Actions can be configured using tap_action, hold_action, and double_tap_action.

Available action types:

• more-info: Show entity more-info dialog (default)
• navigate: Navigate to a different view
• call-service: Call a Home Assistant service
• toggle: Toggle the entity
• shake: Custom shake animation (needle moves away and returns)
• none: No action

Shake Action Example:

type: custom:steam-gauge-card
entity: sensor.temperature
title: Temperature
tap_action:
  action: shake # Tap to shake the gauge

Standard Action Examples:

# Navigate to another view
tap_action:
  action: navigate
  navigation_path: /lovelace/energy

# Call a service
tap_action:
  action: call-service
  service: light.turn_on
  service_data:
    entity_id: light.living_room

# Toggle an entity
tap_action:
  action: toggle

# No action on tap
tap_action:
  action: none

High Needle Tracking

The high needle feature tracks the highest (peak) value reached over a configurable time period. This is useful for monitoring maximum temperatures, peak power usage, or any metric where you want to see how high the value has climbed.

Features:

• High value tracking needle (customizable color) that marks the highest value
• Automatically resets after the configured duration (default 60 seconds)
• Adjustable needle length (25-150% of standard needle)
• Smooth animations synchronized with main needle

Aged Texture Effects

The gauge features a realistic aged texture system that adds vintage character to the display. The texture uses procedural noise to simulate the appearance of aged, weathered gauges from the steam era.

Configuration Options:

• aged_texture: Controls where the texture is applied
  • 'none': No aged texture effect
  • 'glass_only': Applies texture only to the gauge face (default) - creates a subtle aged glass appearance
  • 'everywhere': Applies texture to both the background plate and gauge face - creates a fully weathered vintage look
• aged_texture_intensity: Controls the strength of the texture effect (0-100)
  • 0: No visible texture (clean, modern look)
  • 50: Moderate texture (default) - balanced vintage appearance
  • 100: Maximum texture - heavily aged, weathered appearance
  • Higher values make the texture more prominent and visible

Foundry Analog Clock

Add a vintage analog clock to your dashboard:

Configuration Options

Click to see examples

type: custom:foundry-analog-clock-card
entity: sun.sun
title: Local Time
title_font_size: 12
ring_style: brass
rivet_color: '#6a5816'
plate_color: '#8c7626'
plate_transparent: false
wear_level: 50
glass_effect_enabled: true
aged_texture: everywhere
aged_texture_intensity: 50
second_hand_enabled: true
tap_action:
  action: more-info
hold_action:
  action: more-info
double_tap_action:
  action: more-info
time_zone: America/New_York

Foundry Digital Clock

A retro digital timepiece:

Configuration Options

Click to see examples

type: custom:foundry-digital-clock-card
entity: sun.sun
title: Local
title_font_size: 12
ring_style: brass
rivet_color: '#6a5816'
plate_color: '#8c7626'
plate_transparent: false
font_bg_color: '#ffffff'
font_color: '#000000'
show_seconds: true
wear_level: 50
glass_effect_enabled: true
aged_texture: everywhere
aged_texture_intensity: 50
use_24h_format: false
time_zone: America/New_York

Foundry Button Card

A robust industrial push-button with integrated status text and icon.

Configuration Options

type: custom:foundry-button-card
entity: light.basement_cans_group
icon: mdi:lightbulb
primary_info: Basement
secondary_info: "{{states('light.basement_cans_group')}}"
ring_style: brass
plate_color: '#8c7626'
font_bg_color: '#ffffff'
font_color: '#000000'
wear_level: 50
glass_effect_enabled: true
aged_texture: everywhere
aged_texture_intensity: 50
plate_transparent: false
secondary_info_2: >-
  {{ (state_attr('light.basement_cans_group', 'brightness') | int(0) / 2.55) |
  round(0) | int }}%
icon_color: |-
  {% set rgb = state_attr('light.basement_cans_group', 'rgb_color') %}
  {% if rgb %}
    #{{ '%02x%02x%02x' | format(rgb[0], rgb[1], rgb[2]) }}
  {% else %}
    grey
  {% endif %}
card_width: 240
tap_action:
  action: more-info

Foundry Thermometer

An industrial liquid-in-glass thermometer:

Configuration Options

Click to see examples

type: custom:foundry-thermometer-card
entity: sensor.outside_temperature
min: 0
max: 100
ring_style: brass
title: Temp
mercury_width: 50
segments_under_mercury: true
animation_duration: 1.5
plate_color: '#8c7626'
rivet_color: '#ffffff'
font_bg_color: '#fcfcfc'
font_color: '#000000'
primary_tick_color: '#000000'
secondary_tick_color: '#444444'
segments:
  - from: 0
    to: 33
    color: '#4CAF50'
  - from: 33
    to: 66
    color: '#FFC107'
  - from: 66
    to: 100
    color: '#F44336'
liquid_color: '#cc0000'
plate_transparent: false
wear_level: 50
aged_texture: everywhere
aged_texture_intensity: 50
unit: °C

Foundry Entities Card

A digital display for a list of entities.

Configuration Options

Click to see examples

type: custom:foundry-entities-card
entities:
  - entity: input_number.testlargenumber1
    name: Large Number
    secondary_info: none
    decimals: 1
  - entity: input_number.testlargenumber2
    name: Large Number 2
    secondary_info: none
    decimals: 2
title: Entities
title_font_size: 14
ring_style: brass
rivet_color: '#6a5816'
plate_color: '#8c7626'
plate_transparent: false
font_bg_color: '#ffffff'
font_color: '#0a0000'
wear_level: 50
glass_effect_enabled: true
aged_texture: everywhere
aged_texture_intensity: 50

Foundry Uptime Card

A detailed uptime monitoring card simulating an industrial vacuum tube display.

Configuration Options

Click to see examples

type: custom:foundry-uptime-card
entity: binary_sensor.google_com
title: Uptime Monitor
hours_to_show: 24
ok: 'on'
ko: 'off'
ring_style: brass
rivet_color: '#6a5816'
plate_color: '#8c7626'
plate_transparent: false
font_bg_color: '#ffffff'
font_color: '#000000'
wear_level: 50
glass_effect_enabled: true
color_thresholds:
  - value: 20
    color: '#c229b5'
  - value: 60
    color: '#F44336'
  - value: 99.9
    color: '#FF9800'
  - value: 100
    color: '#4CAF50'

Foundry Chart Card

Show entity history in a compact chart:

Configuration Options

type: custom:foundry-chart-card
entity: sensor.outside_temperature
title: Outside Temp
hours_to_show: 24
bucket_count: 60
update_interval: 60
aggregation: avg
show_inspect_value: true
show_x_axis_minmax: false
show_y_axis_minmax: false
segment_blend_width: 4
segments:
  - from: 10
    to: 20
    color: '#F44336'
  - from: 20
    to: 30
    color: '#4CAF50'
  - from: 30
    to: 60
    color: '#2196F3'
line_color: '#d32f2f'
line_width: 2
fill_under_line: true
grid_minor_color: '#cfead6'
grid_major_color: '#8fc79d'
grid_opacity: 0.6
ring_style: brass
plate_color: '#f5f5f5'
rivet_color: '#6d5d4b'
font_bg_color: '#ffffff'
font_color: '#000000'
title_color: '#3e2723'
wear_level: 50
glass_effect_enabled: true
aged_texture: everywhere
aged_texture_intensity: 50

Foundry Bar Chart Card

Show entity history as a segmented bar chart:

Configuration Options

type: custom:foundry-bar-chart-card
entity: sensor.outside_temperature
title: Outside Temp
hours_to_show: 24
bucket_count: 60
update_interval: 60
aggregation: avg
show_inspect_value: true
show_x_axis_minmax: false
show_y_axis_minmax: false
x_axis_time_format: local
segment_blend_width: 4
segments:
  - from: 10
    to: 20
    color: '#F44336'
  - from: 20
    to: 30
    color: '#4CAF50'
  - from: 30
    to: 60
    color: '#2196F3'
bar_color: '#d32f2f'
bar_padding: 2
bar_range_blend: single
grid_minor_color: '#cfead6'
grid_major_color: '#8fc79d'
grid_opacity: 0.6
ring_style: brass
plate_color: '#f5f5f5'
rivet_color: '#6d5d4b'
font_bg_color: '#ffffff'
font_color: '#000000'
wear_level: 50
glass_effect_enabled: true
aged_texture: everywhere
aged_texture_intensity: 50

Foundry Home Thermostat

A vintage-style thermostat controller with odometer-style displays and interactive controls.

Configuration Options

Click to see examples

type: custom:foundry-homethermostat-card
entity: climate.t6_pro_z_wave_programmable_thermostat_with_smartstart
title: Thermostat
ring_style: brass
plate_color: '#8c7626'
title_color: '#3e2723'
font_bg_color: '#ffffff'
font_color: '#000000'
rivet_color: '#6d5d4b'
plate_transparent: false
wear_level: 50
glass_effect_enabled: true
aged_texture: everywhere
aged_texture_intensity: 50

Foundry Slider Card

A vertical slider control with vintage industrial aesthetics.

Configuration Options

type: custom:foundry-slider-card
title: Volume
min: 0
max: 100
step: 1
value: 50
ring_style: brass
background_style: gradient
face_color: '#8c7626'
plate_color: '#8c7626'
plate_transparent: false
rivet_color: '#6a5816'
slider_color: '#444444'
knob_shape: square
knob_size: 100
primary_tick_color: 'rgba(0,0,0,0.22)'
secondary_tick_color: 'rgba(0,0,0,0.22)'
font_bg_color: '#ffffff'
font_color: '#000000'
number_color: '#3e2723'
title_font_size: 14
value_font_size: 36
show_value: true
wear_level: 50
aged_texture: everywhere
aged_texture_intensity: 50

Foundry Title Card

A minimal decorative title plate for labelling sections of your dashboard.

Configuration Options

type: custom:foundry-title-card
title: Living Room
title_font_size: 18
title_color: '#3e2723'
plate_color: '#8c7626'
rivet_color: '#6a5816'
plate_transparent: false
aged_texture: everywhere
aged_texture_intensity: 50
theme: industrial

Foundry Analog Meter Card

A vintage VU-style analog meter in a landscape rectangular chassis.

Configuration Options

type: custom:foundry-analog-meter-card
entity: sensor.temperature
title: Analog Meter
title_font_size: 12
ring_style: brass
rivet_color: '#6a5816'
plate_color: '#8c7626'
plate_transparent: false
min: 0
max: 100
unit: ''
animation_duration: 1.2
wear_level: 50
glass_effect_enabled: true
aged_texture: everywhere
aged_texture_intensity: 50
segments:
  - from: 80
    to: 100
    color: '#F44336'
number_color: '#3e2723'
primary_tick_color: '#3e2723'
secondary_tick_color: '#5d4e37'
needle_color: '#1a1a1a'

Foundry Digital Meter Card

A vintage digital LED bar meter in a landscape rectangular chassis.

Configuration Options

type: custom:foundry-digital-meter-card
entity: sensor.audio_level_left
bottom_entity: sensor.audio_level_right
card_title: Digital Meter
title: L
bottom_title: R
min: 0
max: 100
unit: dB
theme: industrial
segments:
  - from: 0
    to: 50
    color: '#4caf50'
  - from: 50
    to: 60
    color: '#8bc34a'
  - from: 60
    to: 80
    color: '#ffeb3b'
  - from: 80
    to: 100
    color: '#f44336'

Dynamic Entity Themes

Foundry Cards allow you to dynamically change a card's theme based on the state of a Home Assistant entity (like an input_select dropdown helper). This means you can create a single dropdown on your dashboard that instantly changes the theme of your cards!

How to Create a Theme Selector Helper

1. Open the Helpers Page

   • Go to Settings
   • Click Devices & Services
   • Select the Helpers tab at the top
   • Click ➕ Create Helper

2. Choose the Correct Helper Type

   • Select: Dropdown (This creates an input_select entity).

3. Configure the Helper

   • Fill in the fields:
     • Name: Gauge Theme (or any name you prefer)
     • Icon (optional): mdi:palette
     • Options: Paste each theme on its own line:

       industrial
       racing
       warm
       cool
       vintage
       midnight
       steampunk
       military
       retro
       arctic
       copper
       neon
       pink
       blue
       green
       spring
       summer
       autumn
       winter
       purple
       orange
       yellow
       teal
       aerospace
       cherry_blossom
       deep_sea
       mediterranean
       stealth_black
       pine_forest
       

Once your helper is created, open the visual editor for any Foundry Card, set the Theme dropdown to Entity, and select your new entity (e.g., input_select.gauge_theme)!

Custom Themes

Foundry Cards include built-in themes (industrial, racing, warm, cool) that can be applied through the visual editor. You can also create your own custom themes using a UserThemes.yaml file.

Creating Custom Themes

1. Create a file named userthemes.yaml (case-sensitive) in your <config>/www/ directory (same location as foundry-card.js and themes.yaml)

2. Define your custom themes using the YAML format shown below

3. Refresh your browser - your custom themes will automatically appear in the theme dropdown in the card editor

Theme File Format

Each theme is defined with a name followed by its properties. Here's the structure:

theme_name:
  plate_color: '#8c7626' # Background plate color
  rivet_color: '#6a5816' # Corner rivet color
  title_color: '#3e2723' # Title text color
  font_color: '#3e2723' # Digital display text color
  font_bg_color: '#f8f8f0' # Digital display background
  ring_style: 'brass' # Ring style: brass, silver, chrome, copper, black, white, blue, green, red
  number_color: '#3e2723' # Gauge numbers color
  primary_tick_color: '#3e2723' # Major tick marks color
  secondary_tick_color: '#5d4e37' # Minor tick marks color
  needle_color: '#C41E3A' # Gauge needle color
  plate_transparent: false # true/false - transparent background
  glass_effect_enabled: true # true/false - glass overlay effect
  wear_level: 50 # 0-100 - amount of wear marks
  aged_texture: 'everywhere' # none, glass_only, or everywhere
  aged_texture_intensity: 50 # 0-100 - texture intensity
  face_color: '#929090' # Gauge/clock face color
  background_style: 'gradient' # gradient or solid

Example Custom Theme

Here's an example userthemes.yaml with two custom themes:

midnight:
  plate_color: '#1a1a2e'
  rivet_color: '#16213e'
  title_color: '#eee'
  font_color: '#00ff41'
  font_bg_color: '#0a0e27'
  ring_style: 'black'
  number_color: '#eee'
  primary_tick_color: '#eee'
  secondary_tick_color: '#888'
  needle_color: '#00ff41'
  plate_transparent: false
  glass_effect_enabled: true
  wear_level: 20
  aged_texture: 'glass_only'
  aged_texture_intensity: 30
  face_color: '#0f3460'
  background_style: 'solid'

steampunk:
  plate_color: '#8b4513'
  rivet_color: '#654321'
  title_color: '#f4e4c1'
  font_color: '#f4e4c1'
  font_bg_color: '#3e2723'
  ring_style: 'copper'
  number_color: '#f4e4c1'
  primary_tick_color: '#f4e4c1'
  secondary_tick_color: '#cd853f'
  needle_color: '#ff6347'
  plate_transparent: false
  glass_effect_enabled: true
  wear_level: 80
  aged_texture: 'everywhere'
  aged_texture_intensity: 70
  face_color: '#d2691e'
  background_style: 'gradient'

Notes

• Theme names must be unique and use lowercase letters, numbers, and underscores only
• Not all properties are used by all cards (e.g., needle_color only applies to gauge cards)
• Custom themes will appear in the theme dropdown alongside built-in themes
• If a property is omitted, the card will use its default value
• If you change a value in a card that is controlled by the themes it will change your card to no theme.

Theme Caching

To ensure your dashboard loads as quickly as possible, Foundry Cards aggressively cache your themes.yaml and userthemes.yaml files.

• 10-Minute Cache: Once loaded, themes are cached in your browser's Local Storage for 10 minutes. During this time, navigating around your dashboard will instantly load themes without making any network requests to the server.
• Forcing a Refresh: If you edit your theme files and want to see the changes immediately (without waiting 10 minutes or clearing your browser data), simply append ?refreshcache=true to your Home Assistant URL and hit Enter.
  • Example: http://homeassistant.local:8123/lovelace/home?refreshcache=true
  • (If your URL already has ? parameters, use &refreshcache=true instead)
  • This forces the cards to bypass all local caches, download the freshest copy of the theme files directly from the server, and restart the 10-minute timer.

Development

Want to contribute or customize the cards?

Prerequisites

1. Install Node.js
   • Download and install Node.js from nodejs.org, which includes npm.

Setting Up Your Development Environment

1. Clone the Repository

   git clone https://github.com/dprischak/Foundry-Card.git
   cd Foundry-Card

2. Install Dependencies

   npm install

Development Workflow

1. Create a branch and make the changes into that branch

   git checkout -b feature/your-feature-name
   # or
   git checkout -b fix/your-bug-fix

2. Make Your Changes:

   • Write clean, readable code
   • Follow the existing code style
   • Add comments for complex logic
   • Update documentation if needed

3. Build the Project

   npm run build

4. Code Quality

   The project enforces code quality through linting and formatting. These checks run automatically on Pull Requests and must pass.

   Run checks locally:

   # Check for linting errors
   npm run lint
   
   # Check for formatting issues
   npm run format

   Fix issues automatically:

   # Fix linting errors
   npm run lint:fix
   
   # Fix formatting issues
   npm run format:fix

5. Commit your changes

   git add .
   git commit -m "feat: add new feature" # or "fix: resolve bug"

6. Push and Create a Pull Request

   git push origin feature/your-feature-name

Then open a pull request on GitHub with a clear description of your changes.

Ways to Contribute

• Report Bugs: Open an issue with detailed steps to reproduce
• Suggest Features: Share your ideas for improvements
• Fix Issues: Look for open issues and submit fixes
• Improve Documentation: Help make the docs clearer and more comprehensive

Roadmap

Future cards planned for the Foundry Card collection:

2023.3.2

• Bar Chart

2023.3.3

• Digital VU Meter

Future

• Standard Odometer
• Industrial Energy Map
• Automated Unit Testing

Support

If you encounter any issues or have feature requests:

• Open an issue
• Start a discussion

License

This project is licensed under the MIT License - see the LICENSE file for details.

Credits

Created by dprischak and KeithSobo

If you find this project useful, consider giving it a ⭐ on GitHub!

Support the development of this project:

Even a symbolic gesture makes a difference. Thank you so much for your support ❤️