Skip to content

Horizontal Forecast Card v1.0.1

Choose a tag to compare

View all tags
@Matbe34 Matbe34 released this 14 Jul 22:50
· 5 commits to master since this release
v1.0.1
e44241f

🚀 What's New in v1.0.1

✨ Features & Improvements

  • Local SVG Weather Icons: Added embedded SVG icons for better reliability and offline functionality
  • Enhanced Drag-to-Scroll: Improved horizontal scrolling with smooth drag interactions
  • Visual Enhancements: Added vertical bar separators between forecast items for better clarity
  • Production-Ready Build: Optimized build system with modern tooling and dependencies
  • HACS Compliance: Full HACS integration with validation workflows and proper metadata

🛠️ Technical Improvements

  • Updated build system with Rollup, TypeScript, and Babel optimization
  • Minimized external dependencies for better performance
  • Added comprehensive TypeScript types and interfaces
  • Implemented proper error handling and validation
  • Optimized bundle size with tree-shaking and minification

📚 Documentation & Developer Experience

  • Comprehensive README with configuration examples
  • Added preview images for HACS validation
  • GitHub Actions workflow for automated HACS validation
  • Proper issue templates for bug reports and feature requests
  • Clear installation and configuration instructions

🔧 Configuration Options

  • show_current: Display current weather conditions
  • show_forecast: Show forecast data
  • forecast_days: Number of forecast days to display
  • name: Custom card title
  • Full entity and styling customization support

📦 Installation

Via HACS (Recommended)

  1. Install HACS if you haven't already
  2. Go to HACS > Frontend
  3. Click the three dots in the top right corner
  4. Select "Custom repositories"
  5. Add this repository URL: https://github.com/Matbe34/Horizontal-Forecast-Card
  6. Select "Lovelace" as the category
  7. Click "Add"
  8. Install the card from HACS

Manual Installation

  1. Download the horizontal-forecast-card.js file from this release
  2. Copy it to your www folder in your Home Assistant configuration directory
  3. Add the resource to your Lovelace configuration: 
    resources:
  - url: /local/horizontal-forecast-card.js
    type: module

🎯 Basic Configuration

type: custom:horizontal-forecast-card
entity: weather.your_weather_entity
name: Weather Forecast
show_current: true
show_forecast: true
forecast_days: 5

🖼️ Preview

The card provides a clean, horizontal layout perfect for displaying weather forecasts with intuitive drag-to-scroll functionality and clear visual separators.

🔗 Links

  • Documentation
  • Configuration Guide
  • Report Issues
  • HACS Integration

🏷️ What's Included

  • Production-ready JavaScript bundle (horizontal-forecast-card.js)
  • Complete source code with TypeScript definitions
  • HACS configuration and validation
  • Comprehensive documentation and examples
Assets 3
Loading