A different take on designing a Lovelace UI

Mattias_Persson · September 3, 2020, 4:03pm

matt8707/hass-config/blob/348dcbdbfa65eb95dac0bd242676263896c1a9a0/ui-lovelace.yaml#L590


    top: 9.15%
    left: 25.4%
    <<: *title-style

#################################################
#                                               #
#                   BELYSNING                   #
#                                               #
#################################################

- type: custom:button-card
  entity: light.belysning
  style:
    top: 20.35%
    left: 30.31%
    width: 10%
  custom_fields:
    icon_hue: &icon_hue >
      [[[ const state = entity.state === 'on' ? 'animate' : null;
      return `<svg viewBox="0 0 50 50"><style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
      <path fill="#9da0a2" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>

idarius · September 3, 2020, 5:02pm

i Get this in the template dev tools.

[{"title_default": "$title", "line1_default": "$genres", "line2_default": "$release", "line3_default": "$rating - $runtime", "line4_default": "$studio", "icon": "mdi:arrow-down-bold"}, {"aired": "2020-03-05", "airdate": "2020-08-16T01:19:07Z", "flag": true, "genres": "Drame", "rating": "\u2605 6.7", "release": "$date", "runtime": 108, "title": "The Way Back", "studio": "Warner Bros. Pictures", "fanart": "http://image.tmdb.org/t/p/original/5mubFanEHVFJff4jLQH0uIOThMz.jpg", "poster": "http://image.tmdb.org/t/p/original/ylPnfaphW3FrLBUVwAREVtiL9My.jpg"}, {"aired": "2020-03-11", "airdate": "2020-08-16T01:19:07Z", "flag": true, "genres": "Drame,Romance,Histoire", "rating": "\u2605 6.3", "release": "$date", "runtime": 109, "title": "Radioactive", "studio": "Working Title Films", "fanart": "http://image.tmdb.org/t/p/original/e7tjpKP36Xd6BzyTMZo4AUe86VM.jpg", "poster": "http://image.tmdb.org/t/p/original/eTUBqUBLGx0LUY8HWBXD5zyLkOf.jpg"}, {"aired": "1992-05-22", "airdate": "2020-08-15T23:07:45Z", "flag": true, "genres": "Science-Fiction,Action,Horreur", "rating": "\u2605 6.3", "release": "$date", "runtime": 144, "title": "Alien\u00b3", "studio": "Brandywine Productions", "fanart": "http://image.tmdb.org/t/p/original/9WO0CELoWq6tSdjqCs34Y0qek7l.jpg", "poster": "http://image.tmdb.org/t/p/original/6vWHGE0IZCkp1o4cqJ7PqqlYC1s.jpg"}, {"aired": "1986-07-18", "airdate": "2020-08-15T23:06:24Z", "flag": true, "genres": "Action,Thriller,Science-Fiction", "rating": "\u2605 7.9", "release": "$date", "runtime": 154, "title": "Aliens, le retour", "studio": "Brandywine Productions", "fanart": "http://image.tmdb.org/t/p/original/jMBpJFRtrtIXymer93XLavPwI3P.jpg", "poster": "http://image.tmdb.org/t/p/original/3eHFrdmBENZMbutlNMguqTAl3bf.jpg"}, {"aired": "1979-05-25", "airdate": "2020-08-15T23:04:23Z", "flag": true, "genres": "Horreur,Science-Fiction", "rating": "\u2605 8.1", "release": "$date", "runtime": 115, "title": "Alien, le huiti\u00e8me passager", "studio": "Brandywine Productions", "fanart": "http://image.tmdb.org/t/p/original/AmR3JG1VQVxU8TfAvljUhfSFUOx.jpg", "poster": "http://image.tmdb.org/t/p/original/l8CES84JndFlNfBNMxdLRYaLvI6.jpg"}, {"aired": "2020-08-14", "airdate": "2020-08-15T23:04:23Z", "flag": true, "genres": "Action,Crime,Science-Fiction", "rating": "\u2605 6.7", "release": "$date", "runtime": 113, "title": "Project Power", "studio": "Screen Arcade", "fanart": "http://image.tmdb.org/t/p/original/qVygtf2vU15L2yKS4Ke44U4oMdD.jpg", "poster": "http://image.tmdb.org/t/p/original/fjCezXiQWfGuNf4t7LruKky7kwV.jpg"}, {"aired": "2020-07-22", "airdate": "2020-08-15T23:01:59Z", "flag": true, "genres": "Com\u00e9die,Drame", "rating": "\u2605 6.8", "release": "$date", "runtime": 137, "title": "The King of Staten Island", "studio": "Universal Pictures", "fanart": "http://image.tmdb.org/t/p/original/5rwcd24GGltKiqdPT4G2dmchLr9.jpg", "poster": "http://image.tmdb.org/t/p/original/wIYkb0mS9WY53a2dOqCrg0xaSpt.jpg"}, {"aired": "1997-11-12", "airdate": "2020-08-15T22:55:45Z", "flag": true, "genres": "Science-Fiction,Horreur,Action", "rating": "\u2605 6.1", "release": "$date", "runtime": 116, "title": "Alien, la r\u00e9surrection", "studio": "Brandywine Productions", "fanart": "http://image.tmdb.org/t/p/original/zQI8yxl61JTpjCB3MrTbcQBOT82.jpg", "poster": "http://image.tmdb.org/t/p/original/ePPdAnGJk9mR1qNxHhGrIhLAo4Q.jpg"}, {"aired": "2020-06-19", "airdate": "2020-08-15T22:49:16Z", "flag": true, "genres": "Guerre,Action,Drame", "rating": "\u2605 7.5", "release": "$date", "runtime": 91, "title": "USS Greyhound - La bataille de l'Atlantique", "studio": "Playtone", "fanart": "http://image.tmdb.org/t/p/original/xXBnM6uSTk6qqCf0SRZKXcga9Ba.jpg", "poster": "http://image.tmdb.org/t/p/original/stfW5cfX0A5Fvo2SBcXAazlWihg.jpg"}, {"aired": "2020-07-08", "airdate": "2020-08-15T08:33:44Z", "flag": true, "genres": "Familial,Animation,Com\u00e9die,Aventure", "rating": "\u2605 7.5", "release": "$date", "runtime": 93, "title": "Scooby !", "studio": "Warner Animation Group", "fanart": "http://image.tmdb.org/t/p/original/fKtYXUhX5fxMxzQfyUcQW9Shik6.jpg", "poster": "http://image.tmdb.org/t/p/original/4xiq5NpooMCBFjQhGQjx8LqmhTy.jpg"}, {"aired": "2020-02-19", "airdate": "2020-07-07T16:49:30Z", "flag": true, "genres": "Com\u00e9die", "rating": "\u2605 5.8", "release": "$date", "runtime": 97, "title": "10 jours sans maman", "studio": "Soyouz Films", "fanart": "http://image.tmdb.org/t/p/original/5xYyXBhcRfXmZMQ9gCr0a4W2lpu.jpg", "poster": "http://image.tmdb.org/t/p/original/xEbSztKAAwIljX8A537HeZDKXUS.jpg"}, {"aired": "2020-03-04", "airdate": "2020-07-07T16:44:16Z", "flag": true, "genres": "Histoire,Drame", "rating": "\u2605 6.2", "release": "$date", "runtime": 108, "title": "De Gaulle", "studio": "Vertigo Productions", "fanart": "http://image.tmdb.org/t/p/original/gQV3joTmJmqN7I5G6Cpjvy84WWd.jpg", "poster": "http://image.tmdb.org/t/p/original/lfxs2YnuuLR037Ad4wesW5O9oUW.jpg"}, {"aired": "2019-11-27", "airdate": "2020-07-07T16:43:23Z", "flag": true, "genres": "Com\u00e9die,Drame", "rating": "\u2605 4.5", "release": "$date", "runtime": 83, "title": "Toute ressemblance\u2026", "studio": "Les Films du 24", "fanart": "http://image.tmdb.org/t/p/original/ofZaU8KxCjWMZ6dz8uL5lbxuxre.jpg", "poster": "http://image.tmdb.org/t/p/original/pqSaIXltXdFKsu8dt4ppNmuBPWs.jpg"}, {"aired": "2019-12-19", "airdate": "2020-06-29T17:11:02Z", "flag": true, "genres": "Fantastique,Familial,Aventure,Drame", "rating": "\u2605 6.9", "release": "$date", "runtime": 125, "title": "Pinocchio", "studio": "Fonds Eurimages du Conseil de l'Europe", "fanart": "http://image.tmdb.org/t/p/original/AdqOBPw4PdtzOcfEuQuZ8MNeTKb.jpg", "poster": "http://image.tmdb.org/t/p/original/xoYcb037L7JQw6MZo1fhM16mfJ7.jpg"}, {"aired": "2018-01-27", "airdate": "2020-06-29T17:08:49Z", "flag": true, "genres": "", "rating": 0.0, "release": "$date", "runtime": 11, "title": "Bluebird", "studio": "", "fanart": "", "poster": "http://image.tmdb.org/t/p/original/c97uq80B1A3JxNS3SiVsK9xWoBM.jpg"}, {"aired": "2020-03-06", "airdate": "2020-06-13T16:58:23Z", "flag": true, "genres": "Drame", "rating": "\u2605 7.6", "release": "$date", "runtime": 120, "title": "The Banker", "studio": "Romulus Entertainment", "fanart": "http://image.tmdb.org/t/p/original/jqz8FwISQfyum47PUqgPTGtmiMk.jpg", "poster": "http://image.tmdb.org/t/p/original/biXzsw22U6vSd0XktmZwAOc4uik.jpg"}, {"aired": "1998-10-30", "airdate": "2020-06-13T16:55:41Z", "flag": true, "genres": "Drame", "rating": "\u2605 8.4", "release": "$date", "runtime": 118, "title": "American History X", "studio": "New Line Cinema", "fanart": "http://image.tmdb.org/t/p/original/9LSsSPbP715XT9B7acIZzantPyX.jpg", "poster": "http://image.tmdb.org/t/p/original/yygSRdHdcIVPRNC0rDv658ZdJiD.jpg"}, {"aired": "2019-07-19", "airdate": "2020-06-13T16:54:41Z", "flag": true, "genres": "Animation,Romance,Fantastique,Drame,Aventure", "rating": "\u2605 8.0", "release": "$date", "runtime": 113, "title": "Les Enfants du Temps", "studio": "Toho Company, Ltd.", "fanart": "http://image.tmdb.org/t/p/original/ize3ZieqSy0TCWljmVoEiy8fSFS.jpg", "poster": "http://image.tmdb.org/t/p/original/k0tHYSbzOEkxOYoVLLstLg4Gdkd.jpg"}, {"aired": "2019-07-10", "airdate": "2020-06-03T17:14:01Z", "flag": true, "genres": "Horreur", "rating": "\u2605 6.4", "release": "$date", "runtime": 95, "title": "The Wretched", "studio": "", "fanart": "http://image.tmdb.org/t/p/original/su0huGwZfAmzPvUjnlG42LO9GFl.jpg", "poster": "http://image.tmdb.org/t/p/original/7Jk4pDMM3G9h29lWshEZjX711wg.jpg"}, {"aired": "2018-01-25", "airdate": "2020-06-03T17:13:32Z", "flag": true, "genres": "Drame", "rating": 0.0, "release": "$date", "runtime": 71, "title": "Tranquillo", "studio": "Letterbox Collective Filmproduktion", "fanart": "", "poster": "http://image.tmdb.org/t/p/original/y6frInBbBht833Y40JSWiOfPMxu.jpg"}, {"aired": "2007-01-24", "airdate": "2020-06-03T17:13:06Z", "flag": true, "genres": "Com\u00e9die,Drame", "rating": "\u2605 6.5", "release": "$date", "runtime": 93, "title": "King of California", "studio": "Nu Image", "fanart": "http://image.tmdb.org/t/p/original/dp3SyjDLboXzyYHOciPGdAWemX7.jpg", "poster": "http://image.tmdb.org/t/p/original/zLoa3oJ83zo9g3mV9LNCHbqO7jH.jpg"}, {"aired": "2020-04-16", "airdate": "2020-05-29T14:41:41Z", "flag": true, "genres": "Science-Fiction,Drame,Thriller", "rating": "\u2605 6.3", "release": "$date", "runtime": 113, "title": "Spoutnik", "studio": "Vodorod", "fanart": "http://image.tmdb.org/t/p/original/lGydLXSaDLxN8WoAdubHCnhAgfd.jpg", "poster": "http://image.tmdb.org/t/p/original/tBi5xW9Rd0YoGB0aAggV0EN5LDP.jpg"}, {"aired": "2020-02-06", "airdate": "2020-05-29T14:39:36Z", "flag": true, "genres": "Horreur", "rating": "\u2605 5.2", "release": "$date", "runtime": 104, "title": "A Night of Horror: Nightmare Radio", "studio": "Black Mandala", "fanart": "http://image.tmdb.org/t/p/original/bs7mYckE4BeVRtxK9MRYhNZTTqg.jpg", "poster": "http://image.tmdb.org/t/p/original/g7EYDfGgNEF1IQymS7EvDLKnpxT.jpg"}, {"aired": "1986-05-16", "airdate": "2020-05-26T11:17:43Z", "flag": true, "genres": "Action,Drame", "rating": "\u2605 6.9", "release": "$date", "runtime": 109, "title": "Top Gun", "studio": "Paramount", "fanart": "http://image.tmdb.org/t/p/original/vSZtQrlJqgjz4GIbnF3kBDkzJFE.jpg", "poster": "http://image.tmdb.org/t/p/original/oBe6dugbK95jabwiIo5uwMU7DYJ.jpg"}, {"aired": "2020-01-01", "airdate": "2020-05-22T09:13:18Z", "flag": true, "genres": "Drame", "rating": "\u2605 8.0", "release": "$date", "runtime": 144, "title": "S\u00e9jour dans les monts Fuchun", "studio": "Dadi Film Group", "fanart": "http://image.tmdb.org/t/p/original/AsDanXphy2uvK227rIZP1BiUWEr.jpg", "poster": "http://image.tmdb.org/t/p/original/7vSuF1621x63Zc5OOyCAx5sxtu.jpg"}]

<built-in method title of str object at 0x7f788f6e89b0>

I tried to remove the state display part, but it is the same behavior.

i think if you dont have another idea on the subject, i will put this in the end of my todo list

Thx a lot for your time and your awesome UI !

Mattias_Persson · September 3, 2020, 5:40pm

{% set data = [{"title_default": "$title", "line1_default": "$genres", "line2_default": "$release", "line3_default": "$rating - $runtime", "line4_default": "$studio", "icon": "mdi:arrow-down-bold"}, {"aired": "2020-03-05", "airdate": "2020-08-16T01:19:07Z", "flag": true, "genres": "Drame", "rating": "\u2605 6.7", "release": "$date", "runtime": 108, "title": "The Way Back", "studio": "Warner Bros. Pictures", "fanart": "http://image.tmdb.org/t/p/original/5mubFanEHVFJff4jLQH0uIOThMz.jpg", "poster": "http://image.tmdb.org/t/p/original/ylPnfaphW3FrLBUVwAREVtiL9My.jpg"}, {"aired": "2020-03-11", "airdate": "2020-08-16T01:19:07Z", "flag": true, "genres": "Drame,Romance,Histoire", "rating": "\u2605 6.3", "release": "$date", "runtime": 109, "title": "Radioactive", "studio": "Working Title Films", "fanart": "http://image.tmdb.org/t/p/original/e7tjpKP36Xd6BzyTMZo4AUe86VM.jpg", "poster": "http://image.tmdb.org/t/p/original/eTUBqUBLGx0LUY8HWBXD5zyLkOf.jpg"}, {"aired": "1992-05-22", "airdate": "2020-08-15T23:07:45Z", "flag": true, "genres": "Science-Fiction,Action,Horreur", "rating": "\u2605 6.3", "release": "$date", "runtime": 144, "title": "Alien\u00b3", "studio": "Brandywine Productions", "fanart": "http://image.tmdb.org/t/p/original/9WO0CELoWq6tSdjqCs34Y0qek7l.jpg", "poster": "http://image.tmdb.org/t/p/original/6vWHGE0IZCkp1o4cqJ7PqqlYC1s.jpg"}, {"aired": "1986-07-18", "airdate": "2020-08-15T23:06:24Z", "flag": true, "genres": "Action,Thriller,Science-Fiction", "rating": "\u2605 7.9", "release": "$date", "runtime": 154, "title": "Aliens, le retour", "studio": "Brandywine Productions", "fanart": "http://image.tmdb.org/t/p/original/jMBpJFRtrtIXymer93XLavPwI3P.jpg", "poster": "http://image.tmdb.org/t/p/original/3eHFrdmBENZMbutlNMguqTAl3bf.jpg"}, {"aired": "1979-05-25", "airdate": "2020-08-15T23:04:23Z", "flag": true, "genres": "Horreur,Science-Fiction", "rating": "\u2605 8.1", "release": "$date", "runtime": 115, "title": "Alien, le huiti\u00e8me passager", "studio": "Brandywine Productions", "fanart": "http://image.tmdb.org/t/p/original/AmR3JG1VQVxU8TfAvljUhfSFUOx.jpg", "poster": "http://image.tmdb.org/t/p/original/l8CES84JndFlNfBNMxdLRYaLvI6.jpg"}, {"aired": "2020-08-14", "airdate": "2020-08-15T23:04:23Z", "flag": true, "genres": "Action,Crime,Science-Fiction", "rating": "\u2605 6.7", "release": "$date", "runtime": 113, "title": "Project Power", "studio": "Screen Arcade", "fanart": "http://image.tmdb.org/t/p/original/qVygtf2vU15L2yKS4Ke44U4oMdD.jpg", "poster": "http://image.tmdb.org/t/p/original/fjCezXiQWfGuNf4t7LruKky7kwV.jpg"}, {"aired": "2020-07-22", "airdate": "2020-08-15T23:01:59Z", "flag": true, "genres": "Com\u00e9die,Drame", "rating": "\u2605 6.8", "release": "$date", "runtime": 137, "title": "The King of Staten Island", "studio": "Universal Pictures", "fanart": "http://image.tmdb.org/t/p/original/5rwcd24GGltKiqdPT4G2dmchLr9.jpg", "poster": "http://image.tmdb.org/t/p/original/wIYkb0mS9WY53a2dOqCrg0xaSpt.jpg"}, {"aired": "1997-11-12", "airdate": "2020-08-15T22:55:45Z", "flag": true, "genres": "Science-Fiction,Horreur,Action", "rating": "\u2605 6.1", "release": "$date", "runtime": 116, "title": "Alien, la r\u00e9surrection", "studio": "Brandywine Productions", "fanart": "http://image.tmdb.org/t/p/original/zQI8yxl61JTpjCB3MrTbcQBOT82.jpg", "poster": "http://image.tmdb.org/t/p/original/ePPdAnGJk9mR1qNxHhGrIhLAo4Q.jpg"}, {"aired": "2020-06-19", "airdate": "2020-08-15T22:49:16Z", "flag": true, "genres": "Guerre,Action,Drame", "rating": "\u2605 7.5", "release": "$date", "runtime": 91, "title": "USS Greyhound - La bataille de l'Atlantique", "studio": "Playtone", "fanart": "http://image.tmdb.org/t/p/original/xXBnM6uSTk6qqCf0SRZKXcga9Ba.jpg", "poster": "http://image.tmdb.org/t/p/original/stfW5cfX0A5Fvo2SBcXAazlWihg.jpg"}, {"aired": "2020-07-08", "airdate": "2020-08-15T08:33:44Z", "flag": true, "genres": "Familial,Animation,Com\u00e9die,Aventure", "rating": "\u2605 7.5", "release": "$date", "runtime": 93, "title": "Scooby !", "studio": "Warner Animation Group", "fanart": "http://image.tmdb.org/t/p/original/fKtYXUhX5fxMxzQfyUcQW9Shik6.jpg", "poster": "http://image.tmdb.org/t/p/original/4xiq5NpooMCBFjQhGQjx8LqmhTy.jpg"}, {"aired": "2020-02-19", "airdate": "2020-07-07T16:49:30Z", "flag": true, "genres": "Com\u00e9die", "rating": "\u2605 5.8", "release": "$date", "runtime": 97, "title": "10 jours sans maman", "studio": "Soyouz Films", "fanart": "http://image.tmdb.org/t/p/original/5xYyXBhcRfXmZMQ9gCr0a4W2lpu.jpg", "poster": "http://image.tmdb.org/t/p/original/xEbSztKAAwIljX8A537HeZDKXUS.jpg"}, {"aired": "2020-03-04", "airdate": "2020-07-07T16:44:16Z", "flag": true, "genres": "Histoire,Drame", "rating": "\u2605 6.2", "release": "$date", "runtime": 108, "title": "De Gaulle", "studio": "Vertigo Productions", "fanart": "http://image.tmdb.org/t/p/original/gQV3joTmJmqN7I5G6Cpjvy84WWd.jpg", "poster": "http://image.tmdb.org/t/p/original/lfxs2YnuuLR037Ad4wesW5O9oUW.jpg"}, {"aired": "2019-11-27", "airdate": "2020-07-07T16:43:23Z", "flag": true, "genres": "Com\u00e9die,Drame", "rating": "\u2605 4.5", "release": "$date", "runtime": 83, "title": "Toute ressemblance\u2026", "studio": "Les Films du 24", "fanart": "http://image.tmdb.org/t/p/original/ofZaU8KxCjWMZ6dz8uL5lbxuxre.jpg", "poster": "http://image.tmdb.org/t/p/original/pqSaIXltXdFKsu8dt4ppNmuBPWs.jpg"}, {"aired": "2019-12-19", "airdate": "2020-06-29T17:11:02Z", "flag": true, "genres": "Fantastique,Familial,Aventure,Drame", "rating": "\u2605 6.9", "release": "$date", "runtime": 125, "title": "Pinocchio", "studio": "Fonds Eurimages du Conseil de l'Europe", "fanart": "http://image.tmdb.org/t/p/original/AdqOBPw4PdtzOcfEuQuZ8MNeTKb.jpg", "poster": "http://image.tmdb.org/t/p/original/xoYcb037L7JQw6MZo1fhM16mfJ7.jpg"}, {"aired": "2018-01-27", "airdate": "2020-06-29T17:08:49Z", "flag": true, "genres": "", "rating": 0.0, "release": "$date", "runtime": 11, "title": "Bluebird", "studio": "", "fanart": "", "poster": "http://image.tmdb.org/t/p/original/c97uq80B1A3JxNS3SiVsK9xWoBM.jpg"}, {"aired": "2020-03-06", "airdate": "2020-06-13T16:58:23Z", "flag": true, "genres": "Drame", "rating": "\u2605 7.6", "release": "$date", "runtime": 120, "title": "The Banker", "studio": "Romulus Entertainment", "fanart": "http://image.tmdb.org/t/p/original/jqz8FwISQfyum47PUqgPTGtmiMk.jpg", "poster": "http://image.tmdb.org/t/p/original/biXzsw22U6vSd0XktmZwAOc4uik.jpg"}, {"aired": "1998-10-30", "airdate": "2020-06-13T16:55:41Z", "flag": true, "genres": "Drame", "rating": "\u2605 8.4", "release": "$date", "runtime": 118, "title": "American History X", "studio": "New Line Cinema", "fanart": "http://image.tmdb.org/t/p/original/9LSsSPbP715XT9B7acIZzantPyX.jpg", "poster": "http://image.tmdb.org/t/p/original/yygSRdHdcIVPRNC0rDv658ZdJiD.jpg"}, {"aired": "2019-07-19", "airdate": "2020-06-13T16:54:41Z", "flag": true, "genres": "Animation,Romance,Fantastique,Drame,Aventure", "rating": "\u2605 8.0", "release": "$date", "runtime": 113, "title": "Les Enfants du Temps", "studio": "Toho Company, Ltd.", "fanart": "http://image.tmdb.org/t/p/original/ize3ZieqSy0TCWljmVoEiy8fSFS.jpg", "poster": "http://image.tmdb.org/t/p/original/k0tHYSbzOEkxOYoVLLstLg4Gdkd.jpg"}, {"aired": "2019-07-10", "airdate": "2020-06-03T17:14:01Z", "flag": true, "genres": "Horreur", "rating": "\u2605 6.4", "release": "$date", "runtime": 95, "title": "The Wretched", "studio": "", "fanart": "http://image.tmdb.org/t/p/original/su0huGwZfAmzPvUjnlG42LO9GFl.jpg", "poster": "http://image.tmdb.org/t/p/original/7Jk4pDMM3G9h29lWshEZjX711wg.jpg"}, {"aired": "2018-01-25", "airdate": "2020-06-03T17:13:32Z", "flag": true, "genres": "Drame", "rating": 0.0, "release": "$date", "runtime": 71, "title": "Tranquillo", "studio": "Letterbox Collective Filmproduktion", "fanart": "", "poster": "http://image.tmdb.org/t/p/original/y6frInBbBht833Y40JSWiOfPMxu.jpg"}, {"aired": "2007-01-24", "airdate": "2020-06-03T17:13:06Z", "flag": true, "genres": "Com\u00e9die,Drame", "rating": "\u2605 6.5", "release": "$date", "runtime": 93, "title": "King of California", "studio": "Nu Image", "fanart": "http://image.tmdb.org/t/p/original/dp3SyjDLboXzyYHOciPGdAWemX7.jpg", "poster": "http://image.tmdb.org/t/p/original/zLoa3oJ83zo9g3mV9LNCHbqO7jH.jpg"}, {"aired": "2020-04-16", "airdate": "2020-05-29T14:41:41Z", "flag": true, "genres": "Science-Fiction,Drame,Thriller", "rating": "\u2605 6.3", "release": "$date", "runtime": 113, "title": "Spoutnik", "studio": "Vodorod", "fanart": "http://image.tmdb.org/t/p/original/lGydLXSaDLxN8WoAdubHCnhAgfd.jpg", "poster": "http://image.tmdb.org/t/p/original/tBi5xW9Rd0YoGB0aAggV0EN5LDP.jpg"}, {"aired": "2020-02-06", "airdate": "2020-05-29T14:39:36Z", "flag": true, "genres": "Horreur", "rating": "\u2605 5.2", "release": "$date", "runtime": 104, "title": "A Night of Horror: Nightmare Radio", "studio": "Black Mandala", "fanart": "http://image.tmdb.org/t/p/original/bs7mYckE4BeVRtxK9MRYhNZTTqg.jpg", "poster": "http://image.tmdb.org/t/p/original/g7EYDfGgNEF1IQymS7EvDLKnpxT.jpg"}, {"aired": "1986-05-16", "airdate": "2020-05-26T11:17:43Z", "flag": true, "genres": "Action,Drame", "rating": "\u2605 6.9", "release": "$date", "runtime": 109, "title": "Top Gun", "studio": "Paramount", "fanart": "http://image.tmdb.org/t/p/original/vSZtQrlJqgjz4GIbnF3kBDkzJFE.jpg", "poster": "http://image.tmdb.org/t/p/original/oBe6dugbK95jabwiIo5uwMU7DYJ.jpg"}, {"aired": "2020-01-01", "airdate": "2020-05-22T09:13:18Z", "flag": true, "genres": "Drame", "rating": "\u2605 8.0", "release": "$date", "runtime": 144, "title": "S\u00e9jour dans les monts Fuchun", "studio": "Dadi Film Group", "fanart": "http://image.tmdb.org/t/p/original/AsDanXphy2uvK227rIZP1BiUWEr.jpg", "poster": "http://image.tmdb.org/t/p/original/7vSuF1621x63Zc5OOyCAx5sxtu.jpg"}] %}

{{ data[1].title }}
{{ data[1].poster }}

Should output

The Way Back
http://image.tmdb.org/t/p/original/ylPnfaphW3FrLBUVwAREVtiL9My.jpg

But you get

<built-in method title of str object at 0x7f788f6e89b0>

So I don’t know what’s wrong.

Just guessing here…

{% set data = state_attr('sensor.kodi_recently_added_movies', 'data') | from_json %} 
{{ data[1].title }}

or worst case

{% set data = state_attr('sensor.kodi_recently_added_movies', 'data') %}
{{ data | regex_findall_index('(?:"title": ")(.*?)(?:",)') }}

idarius · September 3, 2020, 6:28pm

mmmh the first template output the right thing :

{% set data = [{"title_default": "$title", "line1_default": "$genres", "line2_default": "$release", "line3_default": "$rating - $runtime", "line4_default": "$studio", "icon": "mdi:arrow-down-bold"}, {"aired": "2020-03-05", "airdate": "2020-08-16T01:19:07Z", "flag": true, "genres": "Drame", "rating": "\u2605 6.7", "release": "$date", "runtime": 108, "title": "The Way Back", "studio": "Warner Bros. Pictures", "fanart": "http://image.tmdb.org/t/p/original/5mubFanEHVFJff4jLQH0uIOThMz.jpg", "poster": "http://image.tmdb.org/t/p/original/ylPnfaphW3FrLBUVwAREVtiL9My.jpg"}, {"aired": "2020-03-11", "airdate": "2020-08-16T01:19:07Z", "flag": true, "genres": "Drame,Romance,Histoire", "rating": "\u2605 6.3", "release": "$date", "runtime": 109, "title": "Radioactive", "studio": "Working Title Films", "fanart": "http://image.tmdb.org/t/p/original/e7tjpKP36Xd6BzyTMZo4AUe86VM.jpg", "poster": "http://image.tmdb.org/t/p/original/eTUBqUBLGx0LUY8HWBXD5zyLkOf.jpg"}, {"aired": "1992-05-22", "airdate": "2020-08-15T23:07:45Z", "flag": true, "genres": "Science-Fiction,Action,Horreur", "rating": "\u2605 6.3", "release": "$date", "runtime": 144, "title": "Alien\u00b3", "studio": "Brandywine Productions", "fanart": "http://image.tmdb.org/t/p/original/9WO0CELoWq6tSdjqCs34Y0qek7l.jpg", "poster": "http://image.tmdb.org/t/p/original/6vWHGE0IZCkp1o4cqJ7PqqlYC1s.jpg"}, {"aired": "1986-07-18", "airdate": "2020-08-15T23:06:24Z", "flag": true, "genres": "Action,Thriller,Science-Fiction", "rating": "\u2605 7.9", "release": "$date", "runtime": 154, "title": "Aliens, le retour", "studio": "Brandywine Productions", "fanart": "http://image.tmdb.org/t/p/original/jMBpJFRtrtIXymer93XLavPwI3P.jpg", "poster": "http://image.tmdb.org/t/p/original/3eHFrdmBENZMbutlNMguqTAl3bf.jpg"}, {"aired": "1979-05-25", "airdate": "2020-08-15T23:04:23Z", "flag": true, "genres": "Horreur,Science-Fiction", "rating": "\u2605 8.1", "release": "$date", "runtime": 115, "title": "Alien, le huiti\u00e8me passager", "studio": "Brandywine Productions", "fanart": "http://image.tmdb.org/t/p/original/AmR3JG1VQVxU8TfAvljUhfSFUOx.jpg", "poster": "http://image.tmdb.org/t/p/original/l8CES84JndFlNfBNMxdLRYaLvI6.jpg"}, {"aired": "2020-08-14", "airdate": "2020-08-15T23:04:23Z", "flag": true, "genres": "Action,Crime,Science-Fiction", "rating": "\u2605 6.7", "release": "$date", "runtime": 113, "title": "Project Power", "studio": "Screen Arcade", "fanart": "http://image.tmdb.org/t/p/original/qVygtf2vU15L2yKS4Ke44U4oMdD.jpg", "poster": "http://image.tmdb.org/t/p/original/fjCezXiQWfGuNf4t7LruKky7kwV.jpg"}, {"aired": "2020-07-22", "airdate": "2020-08-15T23:01:59Z", "flag": true, "genres": "Com\u00e9die,Drame", "rating": "\u2605 6.8", "release": "$date", "runtime": 137, "title": "The King of Staten Island", "studio": "Universal Pictures", "fanart": "http://image.tmdb.org/t/p/original/5rwcd24GGltKiqdPT4G2dmchLr9.jpg", "poster": "http://image.tmdb.org/t/p/original/wIYkb0mS9WY53a2dOqCrg0xaSpt.jpg"}, {"aired": "1997-11-12", "airdate": "2020-08-15T22:55:45Z", "flag": true, "genres": "Science-Fiction,Horreur,Action", "rating": "\u2605 6.1", "release": "$date", "runtime": 116, "title": "Alien, la r\u00e9surrection", "studio": "Brandywine Productions", "fanart": "http://image.tmdb.org/t/p/original/zQI8yxl61JTpjCB3MrTbcQBOT82.jpg", "poster": "http://image.tmdb.org/t/p/original/ePPdAnGJk9mR1qNxHhGrIhLAo4Q.jpg"}, {"aired": "2020-06-19", "airdate": "2020-08-15T22:49:16Z", "flag": true, "genres": "Guerre,Action,Drame", "rating": "\u2605 7.5", "release": "$date", "runtime": 91, "title": "USS Greyhound - La bataille de l'Atlantique", "studio": "Playtone", "fanart": "http://image.tmdb.org/t/p/original/xXBnM6uSTk6qqCf0SRZKXcga9Ba.jpg", "poster": "http://image.tmdb.org/t/p/original/stfW5cfX0A5Fvo2SBcXAazlWihg.jpg"}, {"aired": "2020-07-08", "airdate": "2020-08-15T08:33:44Z", "flag": true, "genres": "Familial,Animation,Com\u00e9die,Aventure", "rating": "\u2605 7.5", "release": "$date", "runtime": 93, "title": "Scooby !", "studio": "Warner Animation Group", "fanart": "http://image.tmdb.org/t/p/original/fKtYXUhX5fxMxzQfyUcQW9Shik6.jpg", "poster": "http://image.tmdb.org/t/p/original/4xiq5NpooMCBFjQhGQjx8LqmhTy.jpg"}, {"aired": "2020-02-19", "airdate": "2020-07-07T16:49:30Z", "flag": true, "genres": "Com\u00e9die", "rating": "\u2605 5.8", "release": "$date", "runtime": 97, "title": "10 jours sans maman", "studio": "Soyouz Films", "fanart": "http://image.tmdb.org/t/p/original/5xYyXBhcRfXmZMQ9gCr0a4W2lpu.jpg", "poster": "http://image.tmdb.org/t/p/original/xEbSztKAAwIljX8A537HeZDKXUS.jpg"}, {"aired": "2020-03-04", "airdate": "2020-07-07T16:44:16Z", "flag": true, "genres": "Histoire,Drame", "rating": "\u2605 6.2", "release": "$date", "runtime": 108, "title": "De Gaulle", "studio": "Vertigo Productions", "fanart": "http://image.tmdb.org/t/p/original/gQV3joTmJmqN7I5G6Cpjvy84WWd.jpg", "poster": "http://image.tmdb.org/t/p/original/lfxs2YnuuLR037Ad4wesW5O9oUW.jpg"}, {"aired": "2019-11-27", "airdate": "2020-07-07T16:43:23Z", "flag": true, "genres": "Com\u00e9die,Drame", "rating": "\u2605 4.5", "release": "$date", "runtime": 83, "title": "Toute ressemblance\u2026", "studio": "Les Films du 24", "fanart": "http://image.tmdb.org/t/p/original/ofZaU8KxCjWMZ6dz8uL5lbxuxre.jpg", "poster": "http://image.tmdb.org/t/p/original/pqSaIXltXdFKsu8dt4ppNmuBPWs.jpg"}, {"aired": "2019-12-19", "airdate": "2020-06-29T17:11:02Z", "flag": true, "genres": "Fantastique,Familial,Aventure,Drame", "rating": "\u2605 6.9", "release": "$date", "runtime": 125, "title": "Pinocchio", "studio": "Fonds Eurimages du Conseil de l'Europe", "fanart": "http://image.tmdb.org/t/p/original/AdqOBPw4PdtzOcfEuQuZ8MNeTKb.jpg", "poster": "http://image.tmdb.org/t/p/original/xoYcb037L7JQw6MZo1fhM16mfJ7.jpg"}, {"aired": "2018-01-27", "airdate": "2020-06-29T17:08:49Z", "flag": true, "genres": "", "rating": 0.0, "release": "$date", "runtime": 11, "title": "Bluebird", "studio": "", "fanart": "", "poster": "http://image.tmdb.org/t/p/original/c97uq80B1A3JxNS3SiVsK9xWoBM.jpg"}, {"aired": "2020-03-06", "airdate": "2020-06-13T16:58:23Z", "flag": true, "genres": "Drame", "rating": "\u2605 7.6", "release": "$date", "runtime": 120, "title": "The Banker", "studio": "Romulus Entertainment", "fanart": "http://image.tmdb.org/t/p/original/jqz8FwISQfyum47PUqgPTGtmiMk.jpg", "poster": "http://image.tmdb.org/t/p/original/biXzsw22U6vSd0XktmZwAOc4uik.jpg"}, {"aired": "1998-10-30", "airdate": "2020-06-13T16:55:41Z", "flag": true, "genres": "Drame", "rating": "\u2605 8.4", "release": "$date", "runtime": 118, "title": "American History X", "studio": "New Line Cinema", "fanart": "http://image.tmdb.org/t/p/original/9LSsSPbP715XT9B7acIZzantPyX.jpg", "poster": "http://image.tmdb.org/t/p/original/yygSRdHdcIVPRNC0rDv658ZdJiD.jpg"}, {"aired": "2019-07-19", "airdate": "2020-06-13T16:54:41Z", "flag": true, "genres": "Animation,Romance,Fantastique,Drame,Aventure", "rating": "\u2605 8.0", "release": "$date", "runtime": 113, "title": "Les Enfants du Temps", "studio": "Toho Company, Ltd.", "fanart": "http://image.tmdb.org/t/p/original/ize3ZieqSy0TCWljmVoEiy8fSFS.jpg", "poster": "http://image.tmdb.org/t/p/original/k0tHYSbzOEkxOYoVLLstLg4Gdkd.jpg"}, {"aired": "2019-07-10", "airdate": "2020-06-03T17:14:01Z", "flag": true, "genres": "Horreur", "rating": "\u2605 6.4", "release": "$date", "runtime": 95, "title": "The Wretched", "studio": "", "fanart": "http://image.tmdb.org/t/p/original/su0huGwZfAmzPvUjnlG42LO9GFl.jpg", "poster": "http://image.tmdb.org/t/p/original/7Jk4pDMM3G9h29lWshEZjX711wg.jpg"}, {"aired": "2018-01-25", "airdate": "2020-06-03T17:13:32Z", "flag": true, "genres": "Drame", "rating": 0.0, "release": "$date", "runtime": 71, "title": "Tranquillo", "studio": "Letterbox Collective Filmproduktion", "fanart": "", "poster": "http://image.tmdb.org/t/p/original/y6frInBbBht833Y40JSWiOfPMxu.jpg"}, {"aired": "2007-01-24", "airdate": "2020-06-03T17:13:06Z", "flag": true, "genres": "Com\u00e9die,Drame", "rating": "\u2605 6.5", "release": "$date", "runtime": 93, "title": "King of California", "studio": "Nu Image", "fanart": "http://image.tmdb.org/t/p/original/dp3SyjDLboXzyYHOciPGdAWemX7.jpg", "poster": "http://image.tmdb.org/t/p/original/zLoa3oJ83zo9g3mV9LNCHbqO7jH.jpg"}, {"aired": "2020-04-16", "airdate": "2020-05-29T14:41:41Z", "flag": true, "genres": "Science-Fiction,Drame,Thriller", "rating": "\u2605 6.3", "release": "$date", "runtime": 113, "title": "Spoutnik", "studio": "Vodorod", "fanart": "http://image.tmdb.org/t/p/original/lGydLXSaDLxN8WoAdubHCnhAgfd.jpg", "poster": "http://image.tmdb.org/t/p/original/tBi5xW9Rd0YoGB0aAggV0EN5LDP.jpg"}, {"aired": "2020-02-06", "airdate": "2020-05-29T14:39:36Z", "flag": true, "genres": "Horreur", "rating": "\u2605 5.2", "release": "$date", "runtime": 104, "title": "A Night of Horror: Nightmare Radio", "studio": "Black Mandala", "fanart": "http://image.tmdb.org/t/p/original/bs7mYckE4BeVRtxK9MRYhNZTTqg.jpg", "poster": "http://image.tmdb.org/t/p/original/g7EYDfGgNEF1IQymS7EvDLKnpxT.jpg"}, {"aired": "1986-05-16", "airdate": "2020-05-26T11:17:43Z", "flag": true, "genres": "Action,Drame", "rating": "\u2605 6.9", "release": "$date", "runtime": 109, "title": "Top Gun", "studio": "Paramount", "fanart": "http://image.tmdb.org/t/p/original/vSZtQrlJqgjz4GIbnF3kBDkzJFE.jpg", "poster": "http://image.tmdb.org/t/p/original/oBe6dugbK95jabwiIo5uwMU7DYJ.jpg"}, {"aired": "2020-01-01", "airdate": "2020-05-22T09:13:18Z", "flag": true, "genres": "Drame", "rating": "\u2605 8.0", "release": "$date", "runtime": 144, "title": "S\u00e9jour dans les monts Fuchun", "studio": "Dadi Film Group", "fanart": "http://image.tmdb.org/t/p/original/AsDanXphy2uvK227rIZP1BiUWEr.jpg", "poster": "http://image.tmdb.org/t/p/original/7vSuF1621x63Zc5OOyCAx5sxtu.jpg"}] %}

{{ data[1].title }}
{{ data[1].poster }}

The Way Back
http://image.tmdb.org/t/p/original/ylPnfaphW3FrLBUVwAREVtiL9My.jpg

the last 2 templates just output “The Way Back” without the url.

but i dont know what to do with this information

Mattias_Persson · September 3, 2020, 7:12pm

Well there you go

“from_json … de-serializing a JSON string back into an object.”

I have no way of testing it but I guess something like JSON.parse() in js

state_display: >
  [[[ const data = JSON.parse(states[entity.entity_id].attributes.data);
  return `${data[1].title} (${data[1].aired.split('-')[0]})`; ]]]

media_image: &plex_poster
  [background-position: center center, background-image: 
  "[[[ return 'url(' + JSON.parse(states[entity.entity_id].attributes.data[1].fanart) + ')'; ]]]"]

idarius · September 3, 2020, 8:26pm

lovelace :

                  - type: conditional
                    conditions:
                      - entity: light.salon
                        state: 'on'
                    elements:
                      - type: custom:button-card
                        entity: sensor.kodi_recently_added_movies
                        triggers_update:
                          ['sensor.kodi_recently_added_movies']
                        name: Derniers Films
                        state_display: >
                          [[[ const data = JSON.parse(states[entity.entity_id].attributes.data);
                          return `${data[1].title} (${data[1].aired.split('-')[0]})`; ]]]
                        custom_fields:
                          icon: >
                            <svg viewBox="0 0 50 50"><path d="M7.7.3h34.6c4.1 0 7.4 3.3 7.4 7.4v34.6c0 4.1-3.3 7.4-7.4 7.4H7.7c-4.1 0-7.4-3.3-7.4-7.4V7.7C.3 3.6 3.6.3 7.7.3z" fill="#282a2d"/><path d="M25,7.1H14.6L25,25L14.6,42.9H25L35.4,25L25,7.1z" fill="#e5a00d"/></svg>
                          blur: >
                            <svg viewBox="0 0 50 50" />
                        styles:
                          custom_fields:
                            media_image: &plex_poster
                              [background-position: center center, background-image:
                              "[[[ return 'url(' + JSON.parse(states[entity.entity_id].attributes.data[1].fanart) + ')'; ]]]"]
                            blur: *plex_poster
                            overlay: [background: 'rgba(0, 0, 0, 0.4)']
                          card:
                            [color: '#efefef', text-shadow: '1px 1px 5px rgba(18, 22, 23, 0.9)']
                        tap_action:
                          action: none
                        style:
                          top: 50%
                          left: 50%
                          width: 100%
                        template: conditional_media

error in the card :

errors in chrome develloper mode :

button-card.js:1643 Uncaught (in promise) TypeError: e.setConfig is not a function

button-card.js:1643 ButtonCardJSTemplateError: SyntaxError: Unexpected token u in JSON at position 0 in 'return 'url(' + JSON.parse(states[entity.entity_id].attributes.data[1].fanart) + ')';'
    at JSON.parse (<anonymous>)
    at HTMLElement.eval (eval at _evalTemplate (http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1693:14), <anonymous>:3:37)
    at HTMLElement._evalTemplate (http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1693:106)
    at HTMLElement._getTemplateOrValue (http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1702:97)
    at http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1736:19
    at Array.forEach (<anonymous>)
    at HTMLElement._buildCustomStyleGeneric (http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1735:28)
    at http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1766:56
    at Array.forEach (<anonymous>)
    at HTMLElement._buildCustomFields (http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1764:24)



button-card.js:1643 ButtonCardJSTemplateError: SyntaxError: Unexpected token u in JSON at position 0 in 'return 'url(' + JSON.parse(states[entity.entity_id].attributes.data[1].fanart) + ')';'
    at JSON.parse (<anonymous>)
    at HTMLElement.eval (eval at _evalTemplate (http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1693:14), <anonymous>:3:37)
    at HTMLElement._evalTemplate (http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1693:106)
    at HTMLElement._getTemplateOrValue (http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1702:97)
    at http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1736:19
    at Array.forEach (<anonymous>)
    at HTMLElement._buildCustomStyleGeneric (http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1735:28)
    at http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1766:56
    at Array.forEach (<anonymous>)
    at HTMLElement._buildCustomFields (http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1764:24)



button-card.js:1643 ButtonCardJSTemplateError: SyntaxError: Unexpected token u in JSON at position 0 in 'return 'url(' + JSON.parse(states[entity.entity_id].attributes.data[1].fanart) + ')';'
    at JSON.parse (<anonymous>)
    at HTMLElement.eval (eval at _evalTemplate (http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1693:14), <anonymous>:3:37)
    at HTMLElement._evalTemplate (http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1693:106)
    at HTMLElement._getTemplateOrValue (http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1702:97)
    at http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1736:19
    at Array.forEach (<anonymous>)
    at HTMLElement._buildCustomStyleGeneric (http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1735:28)
    at http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1766:56
    at Array.forEach (<anonymous>)
    at HTMLElement._buildCustomFields (http://192.168.0.20:8123/hacsfiles/button-card/button-card.js:1764:24)

i checked all i could to find the error by myself, but i’m out of competence here

Thx for your help

idarius · September 4, 2020, 4:28am

It work for the image !
changed

  "[[[ return 'url(' + JSON.parse(states[entity.entity_id].attributes.data[1].fanart) + ')'; ]]]"]

to

  "[[[ return 'url(' + JSON.parse(states[entity.entity_id].attributes.data)[1].fanart + ')'; ]]]"]

Thx a lot

A last thing, state display dont work the way it does in your screenshot, it dont display anything.
I managed to display the film’s name with

                        name: >
                          [[[ const data = JSON.parse(states[entity.entity_id].attributes.data);
                          return `${data[1].title} (${data[1].aired.split('-')[0]})`; ]]]

but it seems a little hacky
all in all, your guessing was right, you’re a master !

fastender · September 4, 2020, 4:34am

Many Thanks.

xADDRx · September 4, 2020, 1:58pm

thank YOU Mattias!

when i click the button, doosent work:

grafik

when i hold a button works fine:

Why dosent word with click? Any Idea?

LOG:2020-09-05 21:20:14 ERROR (MainThread) [frontend.js.latest.202008110] http://ip adress/hacsfiles/button-card/button-card.js line 1693 > Function:3:20 ButtonCardJSTemplateError: TypeError: states['switch.fullykiosk_screensaver'] is undefined in 'if (entity.state === 'off' && states['switch.fullykiosk_screensaver'].state === 'off') { hass.call...'

xADDRx · September 5, 2020, 7:23pm

i must remove:ui_sound: |

        [[[ if (entity.state === 'off' && states['switch.fullykiosk_screensaver'].state === 'off') {
        hass.callService('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/on.m4a', media_content_type: 'music'}); }
        else if (entity.state === 'on' && states['switch.fullykiosk_screensaver'].state === 'off') {
        hass.callService('media_player', 'play_media', {entity_id: 'media_player.tablet', media_content_id: '/local/sound/off.m4a', media_content_type: 'music'}); } ]]].

then it works

xADDRx · September 5, 2020, 8:16pm

hi,

where you get the icons?

marnikvde · September 5, 2020, 8:18pm

Wow, great work!

xADDRx · September 10, 2020, 9:45am

Hi Mattias,

I just wanted to thank you again for helping me (a beginner) so much. Is not a matter of course!

I just got to the sidebar. Somehow the formatting doesn’t quite fit. I also have such a black bar in the background:

grafik

xADDRx · September 10, 2020, 4:10pm

OMG, just a theme… sorry

Stave89 · September 13, 2020, 6:57am

Hello @Mattias_Persson
Your setup has inspired me to try to do something like this on my own.
But i have a problem. I try to use the ‘!include popup/xxxxxx.yaml’ inside the lovelace card, but i can not get it to work. Do you have any idea?

Beershaker · September 13, 2020, 7:26am

hey, can you share your Lovelace.yaml please? is looks really great for me.

thx

Mattias_Persson · September 13, 2020, 1:20pm

You need browser_mod and include doesn’t work with raw config editor.

ernout · September 13, 2020, 2:34pm

Really cool layout - one thing I’m trying to do is to have the close button show above the popup panels title, instead of the X in front of the title. Like you have, with ‘Stang’ next to it.

How is this done? I might be overlooking something here.

Martin_Pejstrup · September 14, 2020, 7:24pm

Hi Mattias

Still loving the setup and really getting to a nice setup.

I would like my Velux window buttons to show the opening position. I have a made a sensor and is trying to use som of your stuff, but I’m doing something wrong (d’oh)

Below I have tried 2 different takes on it. Without success…
Can you spot my mistake in the “custom_fields” part, rest is working fine?

          - type: custom:button-card
            entity: switch.cover_kokken
            style:
              top: 16.35%
              left: 66.14%
              width: 10%
            tap_action:
              action: call-service
              service: cover.toggle
              service_data: 
                entity_id: cover.velux_window_2
            hold_action: !include popup/cover_kokken.yaml
            custom_fields:
              circle: >
                [[[ if (entity.state === 'on' && entity.attributes.position) {
                const position = states['sensor.cover_position_kokken'].state;
                const radius = 20.5; const circumference = radius * 2 * Math.PI;
                return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" style="
                transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: ${circumference}; stroke-dashoffset: ${circumference - position / 100 * circumference};" />
                <text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${position}<tspan font-size="10">%</tspan></text></svg>`; } ]]]
            icon: mdi:window-closed
            template: switch

          - type: custom:button-card
            entity: switch.cover_gang
            style:
              top: 16.35%
              left: 55.18%
              width: 10%
            tap_action:
              action: call-service
              service: cover.toggle
              service_data: 
                entity_id: cover.velux_window
            hold_action: !include popup/cover_gang.yaml
            custom_fields:
              circle: >
                [[[ if (entity.state === 'on') {
                const volume = states['sensor.cover_position_gang'].state;
                const radius = 20.5; const circumference = radius * 2 * Math.PI;
                return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" style="
                transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: ${circumference}; stroke-dashoffset: ${circumference - volume / 100 * circumference};" />
                <text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${volume}<tspan font-size="10">%</tspan></text></svg>`; } ]]]                      
            icon: mdi:window-closed
            template: switch

Thanks in advance
Martin

spudje · September 15, 2020, 1:24pm

It’s too big to fit in a forum post. No time to upload it somewhere and share (at the moment).