A front-end only implementation of linked template cards for Lovelace

Overview

Linked Lovelace by @daredoes

Linked Lovelace Demo

A Javascript/Websocket way to do templating in the Lovelace UI

GitHub Release License hacs_badge

Project Maintenance GitHub Activity

Support

Hey you! Help me out for a couple of 🍻 or a !

coffee


Features

  • Create cards in the Lovelace UI that can be linked to multiple dashboards
  • Provide basic templating when creating linked cards

Installation

Add through HACS


Options

Name Type Requirement Description Default
type string Required custom:linked-lovelace-ui
name string Optional Card name ``

Templates


Creating a template dashboard

The first thing needed when creating a template card is a dashboard to hold these templates.

Create a dashboard inside of Hassio at http://YOUR_INSTANCE.local:8123/config/lovelace/dashboards

Add New Dashboard

For our example, we'll create a Templates dashboard with the path lovelace-templates. The settings here don't really matter, it only matters that we have a dashboard.

Add Template Dashboard

  1. On the Templates dashboard, click the to access a menu, and click Edit Dashboard.

    Edit Dashboard

  2. Once again, click the to access another menu, and click Raw configuration editor.

    Edit Dashboard Header

  3. Add template: true to the top of the configuration file

    Configuration

That's it! Any view in this dashboard that has exactly one card in it will now be converted into a template.

Remember, the path of each view in the dashboard will be the name of the template.

What is a template?

A template is a 'view' that contains exactly one 'card'. The 'path' of the view determines the 'key' we use to identify the template in other cards.

What can be in a template?

So, amateur hour here, a template can be any valid card, where any term surrounded by the $ character can be used as a key for replacement.

How does data make it into the template to be replaced? template_data duh?

Need an example? Okay!

First, we'll create a view called Version Card with the path version-card.

Next, we'll make a card that has a version in the bottom-right corner. Create a new card, and throw this YAML into it.

type: custom:mushroom-template-card
primary: ''
secondary: $version$
icon: ''
badge_icon: ''
badge_color: ''
fill_container: false
layout: horizontal
multiline_secondary: false
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
card_mod:
  style: |
    ha-card.type-custom-mushroom-template-card {
      background-color: rgba(0,0,0,0);
      text-align: right;
      padding-top: 0px;
      margin-top: -26px;
      z-index: 0;
    }

Now, let's use that version-card in something! How about another template!?

First, we'll create a view called Update Button with the path update-button.

Next, we'll make a card that contains a vertical stack, with the button and our version as the two elements in the stack.

Here's the YAML

type: vertical-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:linked-lovelace-ui
  - type: custom:mushroom-template-card
    template_data:
      version: v0.0.1
    template: version-card

Broken Template Card

Wait, that doesn't look like a very useful card. Maybe it'll be more useful once we render it. Save the card, and then click it! You may be prompted to refresh the page, if not, refresh anyways since the changes won't appear until we do.

Click edit, and look that that filled in YAML.

type: vertical-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:linked-lovelace-ui
  - type: custom:mushroom-template-card
    primary: ''
    secondary: v0.0.1
    icon: ''
    badge_icon: ''
    badge_color: ''
    fill_container: false
    layout: horizontal
    multiline_secondary: false
    tap_action:
      action: none
    hold_action:
      action: none
    double_tap_action:
      action: none
    card_mod:
      style: |
        ha-card.type-custom-mushroom-template-card {
          background-color: rgba(0,0,0,0);
          text-align: right;
          padding-top: 0px;
          margin-top: -26px;
          z-index: 0;
        }
    template_data:
      version: v0.0.1
    template: version-card

Working Template Card

The main takeaway here is where template_data, version, and $version$ are used.

Card Using Template

template: version-card
template_data:
    version: v0.0.1

Card Using Template Data

type: custom:mushroom-template-card
secondary: $version$
You might also like...

It consists of a recreation of Twitter, to put into practice both Front-end and Back-end knowledge by implementing the MERN Stack together with other technologies to add more value to the project.

Twitter-Clone_Back-end ✨ Demo. 💻 About the project. 📜 Descriptions. It consists of a recreation of Twitter, to put into practice knowledge of both F

Apr 12, 2022

It consists of a recreation of Twitter, to put into practice knowledge of both Front-end and Back-end implementing the MERN Stack along with other technologies to add more value to the project.

It consists of a recreation of Twitter, to put into practice knowledge of both Front-end and Back-end implementing the MERN Stack along with other technologies to add more value to the project.

Twitter-Clone_Front-end ✨ Demo. Login Home Profile Message Notifications Deployed in: https://twitter-clone-front-end.vercel.app/ 💻 About the project

Jun 26, 2022

Web-Technology with Aj Zero Coding. In this tutorial we learn front-end and back-end development.

Installation through NPM: The jQWidgets framework is available as NPM package: jQuery, Javascript, Angular, Vue, React, Web Components: https://www

Nov 19, 2022

An inheritable and strong logic template front-end mvvm framework.

Intact 文档 Documents 简介 Intact作为一个可继承,并且拥有强逻辑模板的前端MVVM框架,有着如下特色: 充分利用组合与继承的思想,来最高限度地复用代码 同时支持数据驱动和组件实例化调用,来最便捷地实现功能 强逻辑模板,赋予模板更多功能和职责,来完成业务逻辑和表现逻辑分离 安装

Oct 21, 2022

A card for Home Assistant Lovelace for exploring the history of your entities interactively and in real time.

A card for Home Assistant Lovelace for exploring the history of your entities interactively and in real time.

History explorer card This is a custom history card for Home Assistant. This card offers a highly interactive and configurable way to view the history

Nov 24, 2022

LINCD.js - Linked Interoperable Code & Data

LINCD.js - Linked Interoperable Code & Data

LINCD.js Javascript library implementing the LINCD protocol. About LINCD Even today, most projects use their own data structures, thus creating data s

Apr 1, 2022

Light-weight Linked Open Data native cataloguing and crowdsourcing platform

id name brief-description type release-date release-number work-package keywords licence release link demo running-instance credits clef CLEF, Crowdso

Apr 26, 2022

This is email scheduler made using MERN. This repo contains server code, client repo is linked in readme.

Email Scheduler Client This is an email scheduler server (client in different repository). It is made using node.js/express.js. Overview User can sign

Apr 14, 2022

This is an email scheduler made using MERN stack. This repo contains client, server side is linked in readme

Email Scheduler Client This is an email scheduler client (server in different repository). It is made using react. Overview User can sign-up/sign-in,

Apr 14, 2022
Comments
  • Add Template card

    Add Template card

    Adds a card type: custom:linked-lovelace-template that allows for easier selection of existing templates when adding a new card. image The config also is populated in the card editor with the template data for a card when a valid name is put in the text field image

    opened by daredoes 0
  • Increase detail of cards, add better template data handling

    Increase detail of cards, add better template data handling

    • Refactors the codebase
    • Increases the detail of the linked-lovelace-ui card
    • Allows child template cards to receive template_data from parents
    • Puts variables used in a template into a card after updating a card using a template (confusing I know)
    • Adds experimental code for converting YAML to json to import cards over URL
    opened by daredoes 0
  • works only for additional dashboards but not the original one (/lovelace)

    works only for additional dashboards but not the original one (/lovelace)

    Checklist:

    • [X] I updated to the latest version available
    • [X] I cleared the cache of my browser

    Release with the issue: 1.2.5

    Last working release (if known):

    Browser and Operating System: mac os firefox

    windows 10 - edge

    Description of problem: my default dashboard (overview) is not listed in the dashboards of the plugin. all other dashboards work great.

    Javascript errors shown in the web inspector (if applicable):

    
    

    Additional information:

    bug wontfix 
    opened by stefanschaedeli 2
Releases(1.2.5)
Owner
Daniel Evans
Software Engineer with Social Skills.
Daniel Evans
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 13 Jul 1, 2022
🎮 The only Front-End Performance Checklist that runs faster than the others

Front-End Performance Checklist ?? The only Front-End Performance Checklist that runs faster than the others. One simple rule: "Design and code with p

David Dias 15.3k Nov 23, 2022
Dweon, a community platform for gamers. This is front-end only. Inspired by Discord, Spotify, Twitch. (Not finished yet)

What's Dweon? Dweon is a community platform that has Music+, Stream+, Chat+ for gamers. Dweon is not a real project. It has nothing but user interface

Eren Oğuz 8 Sep 4, 2022
Front-End for the RESTful implementation of Texta Toolkit

TEXTA This project was generated with Angular CLI version 7.3.8. Configuration Configuration properties Name Description apiHost texta-rest API Host (

TEXTA 5 Nov 23, 2022
End-to-End type safety for REST APIs written in Fastify. Only problem is you have to explicity export and register route handlers. LOL

Chino intelligence in japaneese End-to-End type safety for REST APIs written in Fastify. Only problem is you have to explicity export and register rou

sambit sahoo 2 Sep 12, 2022
A service for sharing encrypted Markdown notes from Obsidian. Notes are end-to-end-encrypted and are only stored temporarily.

?? Noteshare.space Noteshare.space is a service for sharing encrypted Markdown notes from Obsidian. Notes are end-to-end-encrypted and are only stored

Maxime Cannoodt 51 Nov 23, 2022
Personal Blog - a project developed with Angular for the front-end interface and Wordpress for the back-end API served with Docker containers

PersonalBlog This project was generated with Angular CLI version 13.0.1. Front-end Interface Development server Run ng serve or ng serve --configurati

null 9 Oct 5, 2022
Pass trust from a front-end Algorand WalletConnect session, to a back-end web service

AlgoAuth Authenticate to a website using only your Algorand wallet Pass trust from a front-end Algorand WalletConnect session, to a back-end web servi

Nullable Labs 16 Oct 17, 2022