GithubHelp home page GithubHelp logo

Comments (2)

MEKadan avatar MEKadan commented on August 27, 2024

This is a mod of a pop-up card I have. Includes some sample sensors and also markdown.

For me it works

show_name: true
show_icon: true
type: button
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: Tank heater contactor control
      content:
        type: vertical-stack
        cards:
          - type: entities
            title: Title 1
            show_header_toggle: false
            theme: my_theme
            entities:
              - entity: sensor.sensor_1
                name: Name for sensor 1
                secondary_info: last-updated
              - entity: sensor.sensor_2
                name: Name for sensor 2
                secondary_info: last-updated
          - type: markdown
            title: My markdown name
            content: >-
              Your markdown text goes here
              Your markdown text goes here
              Your markdown text goes here                           
       
name: Name for the card
show_state: true
icon: mdi:something
icon_height: 40px

from hass-browser_mod.

xbmcnut avatar xbmcnut commented on August 27, 2024

@LDprg I was having an issue recently where content in my markdown card would be blank when executed from a script in a pop-up. If I ran the script manually, the pop-up would appear and the markdown would be displayed. Drove me nuts for several days and when the automation ran (to launch the pop-up service), all I got was this:

image

I found a closed bug here that mentioned wrapping the markdown in {% raw %} and {% endraw %} and that worked!
N.B It was working without the raw wrapping until a recent Home Assistant update sometime in April I think so don't know what changed.

  - type: conditional
    conditions:
      - condition: numeric_state
        entity: sensor.flightradar24_current_in_area
        above: 0
    card:
      type: markdown
      content: >-
        {% raw %} {% set data =
        state_attr('sensor.flightradar24_current_in_area', 'flights') %} {% for
        flight in data %}
          <ha-icon icon="mdi:airplane"></ha-icon>{{ flight.flight_number }}({{ flight.aircraft_registration }}) - {{ flight.airline_short }} - {{ flight.aircraft_model }}
          {{ flight.airport_origin_city }}{%if flight.airport_origin_city %}<img src="https://flagsapi.com/{{ flight.airport_origin_country_code }}/shiny/16.png" title='{{ flight.airport_origin_country_name }}'/>{% endif %} -> {{ flight.airport_destination_city }}{%
          if flight.airport_destination_country_code %}<img src="https://flagsapi.com/{{ flight.airport_destination_country_code }}/shiny/16.png" title='{{ flight.airport_destination_country_name }}'/>{% endif %}
          {%if flight.time_scheduled_departure %}Departure - {{ flight.time_scheduled_departure | timestamp_custom('%H:%M') }}; {% endif %}{%if flight.time_scheduled_arrival%}Arrival - {{ flight.time_scheduled_arrival | timestamp_custom('%H:%M') }}{% endif %}
          Altitude - {{ flight.altitude }} ft{%if flight.altitude > 0 %} ({{(flight.altitude * 0.3048)| round(0)}} m){% endif%}; Gr. speed - {{ flight.ground_speed }} kts{%if flight.ground_speed > 0 %} ({{(flight.ground_speed * 1.852)| round(0)}} km/h){% endif%}
          {% endfor %}
          {% endraw %}

from hass-browser_mod.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.