Nolu - another take on Lovelace UI (WIP)

Another small question!

I’m trying to implement following: Custom component Afvalbeheer - Support for multiple waste collectors - #420 by geertmeersman

Now i tried this with custom_entities like this:

        - type: 'custom_entities'
          entity_list:
            - entity_item:
              -  entity: sensor.recycleapp_gft
                 name: 'GFT'
                  
            - entity_item:
              -  entity: sensor.recycleapp_papier
                 name: 'Papier'

basically i would just want to have a button view or markdown where I can see whatever is being picked up, and when. But right now it is showing following:

chrome_qcomot1RP5

You got any ideas on how to make this work?

Thanks in advance! Really loving the layout!

Hi,

what I have done is I created some custom sensors:

    recycleapp_custom_gft:
      friendly_name: GFT
      value_template: '{{ states("sensor.recycleapp_gft") }}'
      entity_picture_template: '/local/icons/recycle/gft.png'
      attribute_templates:
        Days-until: '{{ state_attr("sensor.recycleapp_gft","Days-until") }}'
        wanneer: >-
            {% if state_attr('sensor.recycleapp_gft','Days-until') | int == 0 %}
              Vandaag
            {% elif state_attr('sensor.recycleapp_gft','Days-until') | int == 1 %}
              Morgen
            {% else %}
             Nog {{ state_attr('sensor.recycleapp_gft','Days-until') }} dagen
            {% endif %}
    recycleapp_custom_papier:
      friendly_name: Papier en karton
      value_template: '{{ states("sensor.recycleapp_papier") }}'
      entity_picture_template: '/local/icons/recycle/box.png'
      attribute_templates:
        Days-until: '{{ state_attr("sensor.recycleapp_papier","Days-until") }}'
        wanneer: >-
            {% if state_attr('sensor.recycleapp_papier','Days-until') | int == 0 %}
              Vandaag
            {% elif state_attr('sensor.recycleapp_papier','Days-until') | int == 1 %}
              Morgen
            {% else %}
             Nog {{ state_attr('sensor.recycleapp_papier','Days-until') }} dagen
            {% endif %}

Which I then use in the Lovelace interface as follows:

type: vertical-stack
cards:
  - type: custom:auto-entities
    card:
      type: horizontal-stack
    card_param: cards
    filter:
      include:
        - entity_id: sensor.recycleapp_custom_*
          options:
            type: custom:button-card
            show_entity_picture: true
            show_state: false
            show_label: false
            show_name: true
            name: >
              [[[ return
              (entity.attributes['Days-until']==0?'vandaag':(entity.attributes['Days-until']==1?'morgen':entity.attributes['Days-until']+'
              dagen')); ]]]
      exclude:
        - state: unknown
    show_empty: false
    sort:
      method: attribute
      numeric: true
      attribute: Days-until
  - card:
      show_header_toggle: false
      type: entities
    filter:
      include:
        - entity_id: sensor.recycleapp_custom_*
          options:
            secondary_info: '[[ {entity}.attributes.wanneer ]]'
            type: custom:secondaryinfo-entity-row
            tap_action:
              action: navigate
              navigation_path: /lovelace/afvalophaling
      exclude:
        - state: unknown
    show_empty: false
    sort:
      method: attribute
      numeric: true
      attribute: Days-until
    type: custom:auto-entities

Which results in:
image

And on my main screen I have this:
image

card:
  show_header_toggle: false
  type: entities
filter:
  include:
    - attributes:
        Days-until: < 3
      entity_id: sensor.recycleapp_custom_*
      options:
        secondary_info: '[[ {entity}.attributes.wanneer ]]'
        type: custom:secondaryinfo-entity-row
        tap_action:
          action: navigate
          navigation_path: /lovelace/afvalophaling
  exclude:
    - state: unknown
show_empty: false
sort:
  method: attribute
  numeric: true
  attribute: Days-until
type: custom:auto-entities

Hope it gives you some inspiration :wink:

I don’t know if this will work for Nolu. I actually don’t think so.

There is a markdown component at your disposal. Will this work for you?

thanks both for ur suggestions! I will try a little bit more and keep you posted here :slight_smile:

Hi all,
I installed Nolu and it’s very cool!
But every time I make changes in custom.config.yaml, I have to completely restart the home assistant to see my changes on the dashboard.
Is there a way to view my changes without restarting HA?

thank for your help

Unfortunately, you can’t. This is a short coming of the lovelace_gen, see 🔹 Lovelace_gen - Add abilities to ui_lovelace.yaml - #33 by thomasloven for more info

can you share your config ?

Hej @timoerti, You asking me?

Nice one! I did the following, since I just wanted to know which garbage container is the next one:

- platform: template
  sensors:
    ####################################################################
    #         WASTE COLLECTION
    ####################################################################
    waste_collection_upcoming:
      friendly_name: Upcoming waste collection
      unit_of_measurement: ''
      attribute_templates:
        upcoming_list: |
          {% if state_attr('sensor.waste_collection_upcoming_key', 'upcoming_list') %}
            {{ state_attr('sensor.waste_collection_upcoming_key', 'upcoming_list') }}
          {% endif %}
        Sort-date: |
          {% if states('sensor.waste_collection_upcoming_key') is defined %}
            {% set waste_upcoming_key = states('sensor.waste_collection_upcoming_key') %}
            {{ state_attr('sensor.' + waste_upcoming_key, 'Sort-date') }}
          {% endif %}
        entity_picture: |
          {% if states('sensor.waste_collection_upcoming_key') is defined %}
            {% set waste_upcoming_key = states('sensor.waste_collection_upcoming_key') %}
            {{ state_attr('sensor.' + waste_upcoming_key, 'entity_picture') }}
          {% endif %}
        Days-until: |
          {% if states('sensor.waste_collection_upcoming_key') is defined %}
            {% set waste_upcoming_key = states('sensor.waste_collection_upcoming_key') %}
            {{ state_attr('sensor.' + waste_upcoming_key, 'Days-until') }}
          {% endif %}
        container_color: |
          {% if states('sensor.waste_collection_upcoming_key') is defined %}
            {% if states('sensor.waste_collection_upcoming_key') == 'gad_gft' %}
              green
            {% endif %}

            {% if states('sensor.waste_collection_upcoming_key') == 'gad_papier' %}
              blue
            {% endif %}

            {% if states('sensor.waste_collection_upcoming_key') == 'gad_pmd' %}
              orange
            {% endif %}

            {% if states('sensor.waste_collection_upcoming_key') == 'gad_restafval' %}
              gray
            {% endif %}
          {% endif %}
        waste_name: |
          {% if states('sensor.waste_collection_upcoming_key') is defined %}
            {% if states('sensor.waste_collection_upcoming_key') == 'gad_gft' %}
              GFT
            {% endif %}

            {% if states('sensor.waste_collection_upcoming_key') == 'gad_papier' %}
              Paper
            {% endif %}

            {% if states('sensor.waste_collection_upcoming_key') == 'gad_pmd' %}
              PMD
            {% endif %}

            {% if states('sensor.waste_collection_upcoming_key') == 'gad_restafval' %}
              General
            {% endif %}
          {% endif %}
      value_template: |
        {% if (states('sensor.waste_collection_upcoming_key') is defined)
          and (state_attr('sensor.' + states('sensor.waste_collection_upcoming_key'), 'Sort-date') is defined) %}

          {% set waste_upcoming_key = states('sensor.waste_collection_upcoming_key') %}
          {% if (waste_upcoming_key is defined) %}

            {% set t = state_attr('sensor.' + waste_upcoming_key, 'Sort-date') %}
            {# set t = strptime(t+"-+0000", "%Y-%m-%d,%H:%M:%S-%z") #}
            {% set long_date = (as_timestamp(t) | timestamp_custom('%a, %d %B %Y')) %}
            {% set full_day = (as_timestamp(t) | timestamp_custom('%A')) %}

            {% if (state_attr('sensor.' + waste_upcoming_key, 'Days-until') is defined) and ((state_attr('sensor.' + waste_upcoming_key, 'Days-until') | int) < 7) %}
              {% set days_until = state_attr('sensor.' + waste_upcoming_key, 'Days-until') | int %}
              {% if days_until < 1 %}
                Today
              {% elif days_until < 2 %}
                Tomorrow
              {% elif days_until < 6 %}
                This {{ full_day }}
              {% endif %}
            {% else %}
              {{ long_date }}
            {% endif %}

          {% else %}
            ?
          {% endif %}
        {% else %}
          ?
        {% endif %}

    # Variable to use in `waste_collection_upcoming`
    waste_collection_upcoming_key:
      friendly_name: Upcoming waste collection key of sensor
      unit_of_measurement: ''
      attribute_templates:
        upcoming_list: |
          {% if (states('sensor.gad_gft') is defined) and (state_attr('sensor.gad_gft', 'Days-until') is defined) %}
            {% set days_until_gft = state_attr('sensor.gad_gft', 'Days-until') %}
          {% endif %}

          {% if (states('sensor.gad_papier') is defined) and (state_attr('sensor.gad_papier', 'Days-until') is defined) %}
            {% set days_until_papier = state_attr('sensor.gad_papier', 'Days-until') %}
          {% endif %}

          {% if (states('sensor.gad_pmd') is defined) and (state_attr('sensor.gad_pmd', 'Days-until') is defined) %}
            {% set days_until_pmd = state_attr('sensor.gad_pmd', 'Days-until') %}
          {% endif %}

          {% if (states('sensor.gad_restafval') is defined) and (state_attr('sensor.gad_restafval', 'Days-until') is defined) %}
            {% set days_until_restafval = state_attr('sensor.gad_restafval', 'Days-until') %}
          {% endif %}

          {{ [{
              "name": "gad_gft",
              "days_until": (days_until_gft | default(999, true)) | int
            }, {
              "name": "gad_papier",
              "days_until": (days_until_papier | default(999, true)) | int
            }, {
              "name": "gad_pmd",
              "days_until": (days_until_pmd | default(999, true)) | int
            }, {
              "name": "gad_restafval",
              "days_until": (days_until_restafval | default(999, true)) | int
            }] | sort(attribute="days_until") }}
      value_template: |
        {% if (states('sensor.gad_gft') is defined) and (state_attr('sensor.gad_gft', 'Days-until') is defined) %}
          {% set days_until_gft = state_attr('sensor.gad_gft', 'Days-until') %}
        {% endif %}

        {% if (states('sensor.gad_papier') is defined) and (state_attr('sensor.gad_papier', 'Days-until') is defined) %}
          {% set days_until_papier = state_attr('sensor.gad_papier', 'Days-until') %}
        {% endif %}

        {% if (states('sensor.gad_pmd') is defined) and (state_attr('sensor.gad_pmd', 'Days-until') is defined) %}
          {% set days_until_pmd = state_attr('sensor.gad_pmd', 'Days-until') %}
        {% endif %}

        {% if (states('sensor.gad_restafval') is defined) and (state_attr('sensor.gad_restafval', 'Days-until') is defined) %}
          {% set days_until_restafval = state_attr('sensor.gad_restafval', 'Days-until') %}
        {% endif %}

        {% set waste_list = [{
            "name": "gad_gft",
            "days_until": (days_until_gft | default(999, true)) | int
          }, {
            "name": "gad_papier",
            "days_until": (days_until_papier | default(999, true)) | int
          }, {
            "name": "gad_pmd",
            "days_until": (days_until_pmd | default(999, true)) | int
          }, {
            "name": "gad_restafval",
            "days_until": (days_until_restafval | default(999, true)) | int
          }] %}

        {{ (waste_list | sort(attribute="days_until"))[0].name }}

waste_collection_upcoming should give the first one that will be collected. I’ve noticed some warnings in my logs about this ‘old’ code, so don’t know if this will keep working. When I check devtools I still get correct returns for this one. I use the afvalbeheer integration that provides me with the base information.

no i need the config from the dashbaord I’m struggling wit the dashbaord

Is it a dashboard using Nolu theme?

yes i use nolu

Can you give me some details on the problems. There is an example config you should check:

#################################################
#
#         CUSTOM CONFIG
#
#################################################
home:
  title: 'Home'
  icon: 'mdi:home-assistant'
  url: 'home'

  # `show_header`
  # Show the Nolu header. This consists of a menu bar, generated by the
  # user defined views (where `show_in_navbar is true`)
  show_header: true

  # `show_in_navbar`
  # Determines if the menu item is showed in native tabs AND nolu menubar
  show_in_navbar: true

  # `greeting`
  # Shows a custom greeting text
  greeting:
    # !IMPORTANT! For some strange reason when starting with a `states(....)`
    # method this will throw an error. When a character is placed in front of
    # it the error doesn't occur. So thats why I placed it in a <span>-tag
    title: |
      <span>{{ states('sensor.greeting') }}</span> {{ user }},
    # `sunny` can be replaced by templating language e.g. {{ states('weather.xxxx') }}
    subtitle: 'It will be a sunny day...'

  rows:
    - widgets:
        #################################################
        #         BINARY SENSOR (motion & contact sensors)
        #################################################
        # `type`
        # string - The type of widget
        # required - no default
        - type: 'binary'

          # `entity`
          # string - Entity to use
          # required - no default
          entity: 'binary_sensor.xxxxxxx'

          # `name`
          # string - Name to show in the widget
          # optional - no default
          name: 'Frontdoor'

          # `battery`
          # object - Contains properties to show a battery indicator
          # optional - no default
          battery:
            # `entity`
            # string - Entity to use
            # required - no default
            entity: 'sensor.xxxxxxx_battery'

            # `visibility`
            # string - The visiblity of the battery indicator
            # Optional - 'always' | 'low' | 'never' - default = 'low' - will be shown only when under 10% (blinking red)
            visibility: 'always'

            # `show_percentage`
            # boolean - Show the battery percentage or not
            # optional - default = false
            show_percentage: true

          # `graph`
          # object - Contains properties for the graph
          # optional - no default
          graph:
            # `entity`
            # string - The entity that is used for the graph
            # required - no default
            entity: 'sensor.xxxxxxx'

            # `hours_to_show`
            # string - The amount of hours to show the values for
            # optional - default = 24
            hours_to_show: 72

            # `line_color`
            # string - The color the line of the graph should be
            # optional - default = 'orange'
            line_color: 'blue'

          # `template`
          # list - Template definitions to use. This will determine which icon is shown
          # optional - no default (use one of the below examples)
          template:
            - 'contact_door'
            # OR
            - 'contact_window'
            # OR
            - 'motion'

        #################################################
        #         CAMERA EXAMPLE
        #################################################
        # `type`
        # string - The type of widget
        # required - no default
        - type: 'camera'

          # `entity`
          # string - Entity to use
          # required - no default
          entity: 'camera.front_door'

          # `template`
          # list - Template definitions to use. This will determine which icon is shown
          # optional - no default (use one of the below examples)
          template:
            - 'camera'

        #################################################
        #         CLIMATE EXAMPLE
        #################################################
        # `type`
        # string - The type of widget
        # required - no default
        - type: 'climate' # string | required - widget type

          # `entity`
          # string - Entity to use
          # required - no default
          entity: 'climate.xxxxxxx'

          # `name`
          # string - Name to show in the widget
          # optional - no default
          name: 'Living room thermostat'

          # `template`
          # list - Template definitions to use. This will determine which icon is shown
          # optional - no default (use one of the below examples)
          template:
            - 'climate_thermostat'
            # OR
            - 'climate_airco'

        #################################################
        #         ENERGY EXAMPLE
        #################################################
        # `type`
        # string - The type of widget
        # required - no default
        - type: 'energy' # string | required - widget type

          # `entity`
          # string - Entity to use
          # required - no default
          entity: 'sensor.xxxxxxx'

          # `name`
          # string - Name to show in the widget
          # optional - no default
          name: 'Current electricity usage' # string | required - name to show

          # `icon`
          # string - Icon to use (see https://materialdesignicons.com/)
          # optional - no default
          icon: 'mdi:lightning-bolt-outline'

        #################################################
        #         FAN EXAMPLE
        #################################################
        # `type`
        # string - The type of widget
        # required - no default
        - type: 'fan' # string | required - widget type

          # `entity`
          # string - Entity to use
          # required - no default
          entity: 'switch.xxxxxxx'

          # `name`
          # string - Name to show in the widget
          # optional - no default
          name: 'Bathroom Fan'

          # `graph`
          # object - Contains properties for the graph
          # optional - no default
          graph:
            # `entity`
            # string - The entity that is used for the graph
            # required - no default
            entity: 'sensor.xxxxxxx'

            # `hours_to_show`
            # string - The amount of hours to show the values for
            # optional - default = 24
            hours_to_show: 72

            # `line_color`
            # string - The color the line of the graph should be
            # optional - default = 'orange'
            line_color: 'blue'

          # `template`
          # list - Template definitions to use. This will determine which icon is shown
          # optional - no default (use one of the below examples)
          template:
            - 'icon_fan'

        #################################################
        #         HUMIDITY SENSOR EXAMPLE
        #################################################
        # `type`
        # string - The type of widget
        # required - no default
        - type: 'humidity' # string | required - widget

          # `entity`
          # string - Entity to use
          # required - no default
          entity: 'sensor.xxxxxxx'

          # `name`
          # string - Name to show in the widget
          # optional - no default
          name: 'Baby Room'

          # `battery`
          # object - Contains properties to show a battery indicator
          # optional - no default
          battery:
            # `entity`
            # string - Entity to use
            # required - no default
            entity: 'sensor.xxxxxxx_battery'

            # `visibility`
            # string - The visiblity of the battery indicator
            # Optional - 'always' | 'low' | 'never' - default = 'low' - will be shown only when under 10% (blinking red)
            visibility: 'always'

            # `show_percentage`
            # boolean - Show the battery percentage or not
            # optional - default = false
            show_percentage: true

          # `graph`
          # object - Contains properties for the graph
          # optional - no default
          graph:
            # `entity`
            # string - The entity that is used for the graph
            # required - no default
            entity: 'sensor.xxxxxxx'

            # `hours_to_show`
            # string - The amount of hours to show the values for
            # optional - default = 24
            hours_to_show: 72

            # `line_color`
            # string - The color the line of the graph should be
            # optional - default = 'orange'
            line_color: 'blue'

        #################################################
        #         LIGHT EXAMPLE
        #################################################
        # `type`
        # string - The type of widget
        # required - no default
        - type: 'light' # string | required - widget type

          # `entity`
          # string - Entity to use
          # required - no default
          entity: 'light.xxxxxxx'

          # `name`
          # string - Name to show in the widget
          # optional - no default
          name: 'Ceiling Spots'

          # `template`
          # list - Template definitions to use. This will determine which icon is shown
          # optional - no default (use one of the below examples)
          template:
            - 'icon_hue_bulb_spot'
            # OR
            - 'icon_hue_wall_lantern'
            # OR
            - 'icon_hue_iris'
            # OR
            - 'icon_hue_lightstrip'
            # OR
            - 'icon_hue_bulb_candle'
            # OR
            - 'icon_hue_floor_shade'
            # OR
            - 'icon_hue_floor_spot'
            # OR
            - 'icon_hue'

        #################################################
        #         MARKDOWN EXAMPLE
        #################################################
        # `type`
        # string - The type of widget
        # required - no default
        - type: 'markdown' # string | required - widget type

          # `content`
          # string - The markdown content
          # required - no default
          content: 'Just a markdown card' # string | required - content of the markdown card

        #################################################
        #         PERSON
        #################################################
        # `type`
        # string - The type of widget
        # required - no default
        - type: 'person'

          # `entity`
          # string - Entity to use
          # required - no default
          entity: 'person.xxxxxxx'

          # `name`
          # string - Name to show in the widget
          # optional - no default
          name: 'Person'

          # `background`
          # object - Defines the options for the person image
          # required - no default
          background:
            # `image`
            # string - The url of the image
            # required - no default
            image: '/local/nolu/profile_images/profile.png'

            # `cover`
            # boolean - Covers the complete widget
            # optional - default = false
            cover: true

        #################################################
        #         POWER PLUG EXAMPLE
        #################################################
        # `type`
        # string - The type of widget
        # required - no default
        - type: 'power_plug'

          # `entity`
          # string - Entity to use
          # required - no default
          entity: 'switch.xxxxxxx'

          # `name`
          # string - Name to show in the widget
          # optional - no default
          name: 'Power plug'

          # `battery`
          # object - Contains properties to show a battery indicator
          # optional - no default
          battery:
            # `entity`
            # string - Entity to use
            # required - no default
            entity: 'sensor.xxxxxxx_battery'

            # `visibility`
            # string - The visiblity of the battery indicator
            # Optional - 'always' | 'low' | 'never' - default = 'low' - will be shown only when under 10% (blinking red)
            visibility: 'always'

            # `show_percentage`
            # boolean - Show the battery percentage or not
            # optional - default = false
            show_percentage: true

          # `graph`
          # object - Contains properties for the graph
          # optional - no default
          graph:
            # `entity`
            # string - The entity that is used for the graph
            # required - no default
            entity: 'sensor.xxxxxxx'

            # `hours_to_show`
            # string - The amount of hours to show the values for
            # optional - default = 24
            hours_to_show: 72

            # `line_color`
            # string - The color the line of the graph should be
            # optional - default = 'orange'
            line_color: 'blue'

        #################################################
        #         TEMPERATURE SENSOR EXAMPLE
        #################################################
        # `type`
        # string - The type of widget
        # required - no default
        - type: 'temperature'

          # `entity`
          # string - Entity to use
          # required - no default
          entity: 'sensor.xxxxxxx'

          # `name`
          # string - Name to show in the widget
          # optional - no default
          name: 'Baby Room'

          # `battery`
          # object - Contains properties to show a battery indicator
          # optional - no default
          battery:
            # `entity`
            # string - Entity to use
            # required - no default
            entity: 'sensor.xxxxxxx_battery'

            # `visibility`
            # string - The visiblity of the battery indicator
            # Optional - 'always' | 'low' | 'never' - default = 'low' - will be shown only when under 10% (blinking red)
            visibility: 'always'

            # `show_percentage`
            # boolean - Show the battery percentage or not
            # optional - default = false
            show_percentage: true

          # `graph`
          # object - Contains properties for the graph
          # optional - no default
          graph:
            # `entity`
            # string - The entity that is used for the graph
            # required - no default
            entity: 'sensor.xxxxxxx'

            # `hours_to_show`
            # string - The amount of hours to show the values for
            # optional - default = 24
            hours_to_show: 72

            # `line_color`
            # string - The color the line of the graph should be
            # optional - default = 'orange'
            line_color: 'blue'

        #################################################
        #         WEATHER EXAMPLE
        #################################################
        # `type`
        # string - The type of widget
        # required - no default
        - type: 'default_weather'

          # `entity`
          # string - Entity to use
          # required - no default
          entity: 'weather.noluhass'

        #################################################
        #         BATTERIES
        #################################################
        # `type`
        # string - The type of widget
        # required - no default
        - type: 'batteries'
          # `icons_list`
          # The icons to show, maximum of 4 icons can be
          # shown. The first 4 will be shown
          icons_list:
            # `name`
            # string - Name to show in the widget
            # optional - no default
            - name: 'Hue Motion'
              # `type`
              # string - The type of widget
              # required - no default
              entity: 'sensor.xxxxx_battery'
              # `icon`
              # string - Icon to use (see https://materialdesignicons.com/)
              # optional - no default - If `icon` is not defined it will show the
              # percentage in its place
              icon: 'mdi:motion-sensor'

            - name: 'Temperature'
              entity: 'sensor.xxxxx_battery'

            - name: 'Window'
              entity: 'sensor.xxxxx_battery'
              icon: 'mdi:window-open'

            - name: 'Patio Doors'
              entity: 'sensor.xxxxx_battery'

        #################################################
        #         ICONS EXAMPLE
        #################################################
        # `type`
        # string - The type of widget
        # required - no default
        - type: 'icons' # string | required - widget type
          # `icons_list`
          # The icons to show, maximum of 4 icons can be
          # shown. The first 4 will be shown
          icons_list:
            # `name`
            # string - Name to show in the widget
            # optional - no default
            - name: 'Whatsapp'

              # `icon`
              # string - Icon to use (see https://materialdesignicons.com/)
              # optional - no default
              icon: 'mdi:whatsapp'

              # `entity`
              # string - Entity to use
              # optional - no default - entity is optional since this can also be a link or other type of icon
              entity: 'weather.noluhass'

              # `tap_action`
              # see for supported properties https://github.com/custom-cards/button-card#action
              tap_action:
                action: 'url'
                url_path: 'https://www.whatsapp.com'

              # `variables`
              # object - In the variables section you can define the colors and gradients for your icon
              #
              # !IMPORTANT! No HEX values can be used since they get interpreted as comments in yaml
              # `active` state depends on the defined `entity`. For the active state the following state
              # values are checked:
              # 'on', 'home', 'active', 'enabled', 'heat', 'cool', 'heat_cool', 'fan', 'open'
              #
              # optional - default colors are used
              variables:
                icon_color: 'rgb(255, 255, 255)' # string | optional - defines the icon color
                bg_color_default: 'rgb(37, 211, 102)' # string | optional - defines the default background color
                # bg_color_active: ... - string | optional - defines the active background color
                # bg_gradient_default: ... - string | optional - defines the default gradient background color
                # bg_gradient_active: ... - string | optional - defines the active gradient background color

            - name: 'Instagram'
              icon: 'mdi:instagram'
              tap_action:
                action: 'url'
                url_path: 'https://www.instagram.com'
              variables:
                icon_color: 'rgb(255, 255, 255)'
                bg_gradient_default: 'linear-gradient(45deg, rgb(64, 93, 230), rgb(88, 81, 219), rgb(131, 58, 180), rgb(193, 53, 132), rgb(225, 48, 108), rgb(253, 29, 29))'

            - name: 'Facebook'
              icon: 'mdi:facebook'
              tap_action:
                action: 'url'
                url_path: 'https://www.facebook.com'
              variables:
                icon_color: 'rgb(255, 255, 255)'
                bg_color_default: 'rgb(59, 89, 152)'

            - name: 'Twitter'
              icon: 'mdi:twitter'
              tap_action:
                action: 'url'
                url_path: 'https://www.twitter.com'
              variables:
                icon_color: 'rgb(255, 255, 255)'
                bg_color_default: 'rgb(29,161,242)'

        #################################################
        #         TEMPERATURE SENSOR EXAMPLE
        #################################################
        # `type`
        # string - The type of widget
        # required - no default
        - type: 'temperature'

          # `entity`
          # string - Entity to use
          # required - no default
          entity: 'sensor.xxxxxxx'

          # `name`
          # string - Name to show in the widget
          # optional - no default
          name: 'Baby Room'

          # `battery`
          # object - Contains properties to show a battery indicator
          # optional - no default
          battery:
            # `entity`
            # string - Entity to use
            # required - no default
            entity: 'sensor.xxxxxxx_battery'

            # `visibility`
            # string - The visiblity of the battery indicator
            # Optional - 'always' | 'low' | 'never' - default = 'low' - will be shown only when under 10% (blinking red)
            visibility: 'always'

            # `show_percentage`
            # boolean - Show the battery percentage or not
            # optional - default = false
            show_percentage: true

          # `graph`
          # object - Contains properties for the graph
          # optional - no default
          graph:
            # `entity`
            # string - The entity that is used for the graph
            # required - no default
            entity: 'sensor.xxxxxxx'

            # `hours_to_show`
            # string - The amount of hours to show the values for
            # optional - default = 24
            hours_to_show: 72

            # `line_color`
            # string - The color the line of the graph should be
            # optional - default = 'orange'
            line_color: 'blue'

        #################################################
        #         SEPARATOR EXAMPLE
        #################################################
        # `type`
        # string - The type of widget
        # required - no default
        - type: 'separator'

        #################################################
        #         WEATHER EXAMPLE
        #################################################
        # `type`
        # string - The type of widget
        # required - no default
        - type: 'default_weather'

          # `entity`
          # string - Entity to use
          # required - no default
          entity: 'weather.noluhass'

#################################################
#
#         NOT-FOUND - 404
#         !DON'T TOUCH!
#
#################################################
not-found:
  title: '404 not found'
  icon: 'mdi:motion'
  url: 'not-found'
  show_in_navbar: false
  show_header: true
  widgets:
    - type: 'text'
      content: |
        ## 404
        Sorry, the page you requested could not be found

I want more buttons in the menu like the Picturs. But I dont now how

1 Like

So how the menu bar works is that you have a custom.config.yaml in which you define your pages or views. A view looks something like this:

home:
  title: 'Home'
  icon: 'mdi:home-assistant'
  url: 'home'
  show_in_navbar: true # <------ this indicates that it should be shown in the navbar
  show_header: true # <------ this indicates that the header should be shown
  greeting:
    title: |
      <span>{{ states('sensor.greeting') }}</span> {{ user }},
    subtitle: |
      Today will be a <b>{{ states('weather.buienradar') }}</b> day...

Notice the show_in_navbar property? You should use that for every custom view, and thus button you want to add.

I like the font style in your greeting screenshots. Could you show me the config for this?

Hej @akra,

Sure I can, however I think the screenshot is taken from on a Windows PC and it may differ on other Operating Systems. You can find the Greeting code in nolu/core/includes/views/includes/greeting/greeting.llg.yaml. I’ve added the code of this component below, but as you can see I’m not doing anything special with the font-family or other fancy stuff :wink::

# lovelace_gen

type: 'markdown'
style:
  .: |
    ha-card {
      background: transparent;
      border-radius: 0;
      box-shadow: none;
      margin-top: 2.5rem;
      padding: 0;
    }
    ha-markdown {
      padding: 0!important;
    }
  ha-markdown$: |
    ha-markdown-element > * {
      text-align: left;
    }
    ha-markdown-element > h1 {
      font-size: 2rem;
      line-height: 2.25rem;
      margin-bottom: 0;
    }
    ha-markdown-element > h2 {
      margin-top: 1rem!important;
      font-size: 1.25rem;
      line-height: 1.5rem;
      font-weight: 400 !important;
    }
    ha-markdown-element > h2 > b {
      font-weight: 600 !important;
    }
    
{% if (greeting_title is defined) or
  (greeting_subtitle is defined) %}
content: |
  {% if greeting_title is defined %}
  # {{ greeting_title }}
  {% endif %}

  {% if greeting_subtitle is defined %}
  ## {{ greeting_subtitle }}
  {% endif %}
{% else %}
content: 'No greeting defined'
{% endif %}

I’ve been using this theme on my galaxy tab a10 for 2 months now, however i’m just missing the hour / date on it! Any way we can get it on the right side of the template (on the same line as the greeting one) ?

Hello all,
I have quick question for you: is it possible to disable the default “overview” to replace it by NOLU dashboard?
currently I have to manually switch the dashboard at each connexion from the application