Share your Tablet/Desktop Dashboards

Pastebin has expired - would you mind posting it again? :slight_smile:

@Dingin if you were asking me, I use the side bar card from HACS.

1 Like

Hello SmartWorkx. I really like this dashboard. Would you like to share the script with me?

Here are some of my dashboards, built for a Fire 10 screen I have in the Kitchen. Lots of trial and error and learn something new everyday but this is what I have since I started this in December. I really want to use the card-mod to implement transparency but that’s next.





1 Like

First Dashboard is a LenovoTab with FullyKiosk Browser
Second is a Google Nest Hub with CATT

8 Likes

The home page of our tablet “control center”.
I tried to keep this as uncluttered as possible, while also showing the most important aspects of our house without the need for further navigating or scrolling.

The different elements of the Home page.

The menu button on the navigation bar opens up a quick access main menu for Fully Kiosk, which runs on a tablet in our living room. This allows me to reload page, reload Fully, exit Fully and set screen brightness.

The lights page, with dimmer sliders and quick brightness buttons on top. The bottom button sets the light to 1%, as doing this with the slider was a bit fiddly.

The heat page, where I can control our panel heaters, and override automated modes as well as enable and disable all heating automations.

Power history page, where we can monitor last 24h power usage, price, as well at the correlation between the two.

Vacuum cleaner page. Here we can start, pause, and dock the vacuum, set vacuum power and monitor maintenance items of the vacuum.

The pause and dock buttons only show up when the vacuum is running.

Climate page. Here we can monitor temps and humidity of the house. The buttons on the left changes the info showed on screen. Currently showing the weather forecast for the next 24

Our family calendar. We have created a separate Google account for the house, where we add items to the phone calendar which then is synced to this page.

Information page. Here I can monitor battery status of all wireless sensors, as well as monitor and control Home Assistant.

Electricity prices page. Here we can monitor current days prices and prices for tomorrow.

17 Likes

Hi,
I realy realy like the design of your dashboard!
Could you tell how you did the main the main screen an the Navigation? And perhaps also the lightning page?

Greetings, Micha

great very nice Front Page. Where did you get the icons from and what kind of Weather Card is this? Do you mind sharing you YAML Code?

Have a look through the Lovelace config if you want:

Guess that is easier than trying to explain everything going on?

1 Like

Thanks. The icons are all Material Design Icons. Are you thinking of the climate page?
I posted the full YAML config above of you feel like taking a look.

I am very pleased with mushroom cards and using it by categorising it into 4 columns on a specific tablet dashboard. The tablet uses kiosk with a HACS integration Kiosk_mode to remove the topbar. I tried to make it easy to use so guests can use it as well.

First column categories:

  1. Messages / notifications (dishwasher ready, washing machine ready, garbage collection tomorrow, etc.)
  2. Power outlets / switches/
  3. Lights

Second column categories

  1. Activities / scenes
    a. TV / Smart TV scenes
    b. Babycam (turns on and shows camera stream)
    c. Mini media player

Third column categories

  1. Living room (everything for the living room because the tablet is in the living room)

Fourth column categories

  1. Information (waste collection and rain forecast)

3 Likes

Been working on this for a bit, trying to utilize every bit of screen real estate to provide as much information and control as much as I can without any scrolling. The “downstairs” page is basically the same view but with different light entities.

Initial dashboard requires a fairly high-power device to view, given it’s 3D, rotatable, zoomable, and all click-based with light physics:

Next view is a static 3D panel for lower-powered tablets (area in bottom right displays conditional information, such as open doors, windows, water flowing, etc.):

Then I devote remaining tabs to environmental data…

…Controls:

…Cameras (not shown and includes Frigate object detection with Double Take face recognition)

…Security:

And, finally, maintenance and system status:

1 Like

I posted some dashboards in Feb, but I guess I got sick of those when it got hot out. Anyway, here are some current ones but I have begun the process of building new Mushroom dashboards so hopefully I can share soon. I really appreciate the other contributions, lots of ideas and concepts I had not even considered. the floor plan ones are really good, I just need to find a way to get mine is a way that flows correctly on the dashboard.

These are for a Fire 10 screen, but I do have subsets for smaller tablets and old android phones in other areas of the house.







1 Like

I have combined a lot of Dashboard ideas into this creation and am still tweaking but this is the current result.






6 Likes

Very nice looking clean dashboards. Could you share the config please if possible? Thanks

Hi Krisztian,
would you mind sharing some info about your “room card”? The ones with temperature, humidity, and so on…

Thanks in advance,
Mirko

Hi Mirko,

here it is:

image

color: orange
color_off: dodgerblue
color_type: icon
custom_fields:
  al: |
    [[[  
      if (states["light.living_room_ambilight"].state === 'on')
      return `<ha-icon
        icon="mdi:palette" style="width: 12px; height: 12px; color: var(--button-card-light-color);"></ha-icon>
      <span><span style='color: var(--text-color-sensor);'>${("ambilight  be")}</span></span> `;
      if (states["light.living_room_ambilight"].state === 'off')
      return `<ha-icon
        icon="mdi:palette" style="width: 12px; height: 12px; color: grey;"></ha-icon>
      <span><span style='color: grey;'>${("ambilight  ki")}</span></span> `;
          
    ]]]    
  humidity: |
    [[[
      return `<ha-icon
        icon="mdi:water-percent"
        style="width: 14px; height: 14px; color: dodgerblue;">
        </ha-icon><span>${states["sensor.ble_humidity_4c65a8d1fd82"].state}%</span>`
    ]]]      
  kdl: |
    [[[
      if (states["light.living_room"].state === 'on')
      return `<ha-icon
        icon="bha:ceiling-lamp" style="width: 12px; height: 12px; color: var(--button-card-light-color); "></ha-icon>
      <span><span style='color: var(--text-color-sensor);'>${("lámpa be")}</span></span> `;
      if (states["light.living_room"].state === 'off')
      return `<ha-icon
        icon="bha:ceiling-lamp" style="width: 12px; height: 12px; color: grey;"></ha-icon>
      <span><span style='color: grey;'>${("lámpa ki")}</span></span> `;
    ]]]  
  nl: |
    [[[  
      if (states["light.living_room_nightlight"].state === 'on')
      return `<ha-icon
        icon="mdi:weather-night" style="width: 12px; height: 12px; color: var(--button-card-light-color);"></ha-icon>
      <span><span style='color: var(--text-color-sensor);'>${("holdfény  be")}</span></span> `;
      if (states["light.living_room_nightlight"].state === 'off')
      return `<ha-icon
        icon="mdi:weather-night" style="width: 12px; height: 12px; color: grey;"></ha-icon>
      <span><span style='color: grey;'>${("holdfény  ki")}</span></span> `;
          
    ]]]  
  temp: |
    [[[
      return `
         ${states['sensor.ble_temperature_4c65a8d1fd82'].state}°C</span></span>`
    ]]]
entity: light.living_room
icon: mdi:sofa
name: nappali
styles:
  card:
    - background: linear-gradient(rgba(255,255,255,0.1) 50%, rgba(0,0,20,0.3) 50%)
    - border-radius: 15px
    - border: solid 1.5px rgba(57,128,228)
    - padding: 4%
    - color: ivory
    - font-size: 11px
    - text-shadow: 0px 0px 5px black
    - text-transform: capitalize
    - width: 133px
    - height: 133px
  custom_fields:
    al:
      - align-self: middle
      - justify-self: start
    humidity:
      - justify-self: end
      - align-self: middle
      - font-size: 12px
      - color: deepskyblue
      - font-weight: bold
    kdl:
      - align-self: middle
      - justify-self: start
    nl:
      - align-self: middle
      - justify-self: start
    temp:
      - justify-self: end
      - font-size: 20px
      - font-weight: bold
  grid:
    - grid-template-areas: '"i temp"   "humidity humidity" "n n"   "kdl kdl""nl nl""al al"'
    - grid-template-rows: 1fr 1fr 1fr min-content min-content min-content
    - grid-template-columns: 1fr 1fr
  icon:
    - width: 45%
  img_cell:
    - justify-content: start
    - align-items: start
    - margin: none
  name:
    - font-weight: bold
    - font-size: 12px
    - color: white
    - align-self: middle
    - justify-self: start
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: nappali
      content:
        type: vertical-stack
        cards:
          - entities:
              - entity: light.living_room
                hide_when_off: true
                toggle: true
                type: custom:slider-entity-row
              - entity: light.living_room_nightlight
                hide_when_off: true
                toggle: true
                type: custom:slider-entity-row
              - entity: light.living_room_ambilight
                hide_when_off: true
                toggle: true
                type: custom:slider-entity-row
              - entity: light.floor_lamp
                hide_when_off: true
                toggle: true
                type: custom:slider-entity-row
              - entity: light.bedside_lamp
                hide_when_off: true
                toggle: true
                type: custom:slider-entity-row
              - entity: light.reading_lamp
                hide_when_off: true
                toggle: true
                type: custom:slider-entity-row
              - switch.blitzwolf_4
              - entity: light.xiaomi_gateway_2_light
                hide_when_off: true
                toggle: true
                type: custom:slider-entity-row
            show_header_toggle: false
            style: ''
            type: entities
          - type: custom:mini-graph-card
            animate: true
            entities:
              - entity: sensor.ble_temperature_4c65a8d1fd82
                name: hőmérséklet
              - entity: sensor.ble_humidity_4c65a8d1fd82
                name: páratartalom
                show_state: true
            font_size: 80
            hour24: true
            hours_to_show: 24
            icon: mdi:sofa
            legend: true
            name: ' '
            show:
              graph: line
type: custom:button-card
3 Likes

I like your Dashboard very much, in fact, I already trying to replicate the layout. On this I have a question.
Do you mind sharing the script " script.lys_scene_morgen" ? Thanks !

Thanks a lot!