Homekit Infused 5 (HKI) v2023.1.3

Anyone off top of head know what good layout parameters to use for a horizontally mounted tablet (fire 10)? I’m having a heck of a time getting my home view sorted out and properly fitting the tab as a dashboard.

Here’s what I have so far - I’ve been trying different layout patterns and num of cols:

(side note for bonus points! I can’t get the buttons at the very bottom to fire the scene/script with toggle like std buttons do. Do I need them to call the service?)

home:
    layout:
      layout_type: custom:horizontal-layout
      layout:
        max_cols: 3
    title: greeting
    show_in_navbar: true
    show_in_menu: false
    icon: mdi:home-group
    addons:
      weather:
        - title: hide
          type: core
          entity: weather.main_floor
          show_forecast: true
          city_name: Bear Creek
      calendar:
        - title: hide
          initial_view: dayGridMonth
          entities:
            - calendar.xxxxxxxxxx_gmail_com
      favorites:
        - title: hide
          columns: 4
      button:
        - title: Light Groups - press/hold for more info
          columns: 4
          entities: 
            - light.downstairs
            - light.downstairs_back
            - light.downstairs_front
            - light.kitchen_lights
          icon: mdi:home-lightbulb-outline
          tap_action: toggle
      button_4:
        - title: Scenes, Scripts, and Automations
          columns: 4
          entities: 
            - entity: scene.evening_lights
              show_state: false
              show_last_changed: false
              show_label: false
              tap_action: toggle
            - entity: script.power_on_family_room_tv
              show_state: false
              show_last_changed: false
              show_label: false
              tap_action: toggle
            - entity: scene.good_morning
              show_state: false
              show_last_changed: false
              show_label: false
              tap_action: toggle
            - entity: scene.night_mode
              show_state: false
              show_last_changed: false
              show_label: false
              tap_action:
                - action: toggle

Try

tap_action:
  action: toggle

Also if you are looking for great layouts, try using a grid layout instead. It is pretty advanced stuff but you can basically make anything you want.

Here is the screen grab from desktop for anyone like me that likes to compare the code to the visual.

Hmm, I tried that, exactly as you have it, I get this error:

Failed to call service scene/turn_off. Service not found.

The toggle action seems to only call the turn_off service instead of running/toggling it. The script executes just fine, just the scenes throwing this error. Maybe I’ll just replace the scenes with scripts :wink: I love me a good workaround!

@bowhunt24 scenes can not be toggled as far as I know.

You can only turn them on, there is no way to reverse that process. What I did is create template switches with all the scene information. That way I can toggle them and they will also show as actually turned on. Maybe that helps?

Ah, well that makes sense. I just created scripts instead, as I should have to begin with. The scripts now call the scene which is just the light settings, and then also does some other things with media devices, locks and doors. I can also choose between button behavior, keep them as they are which means they are grayed out until the script runs, then they gray out again when complete. Or I added a service call to turn on the script after it runs, so it stays on, and thus the button stays lit up. Not sure what I like better.

Your template switch is a great idea, I’m still pretty new with the template stuff. I have copied and pasted a couple for my garage door setup, but that’s what I’d like to learn next - templates, especially button card templates, so I can create a button how I like it and then re-use it across lots of locations.

thanks again for all your help!

Is there an easy way to explain or fix why my z-wave only lights don’t get the fun css treatment that my groups and HUE lights get? They are dimmers and reporting a % of brightness, shouldn’t they behave the same way?

It is because the border gets its color from the color attribute of the light. Do those light have color or temperature?

There is a fix if you use the HKI custom themes, change the icon active color and change the button cards box shadow when it is active. This can all be done in realtime using the HKI Settings page.

Excellent, I figured it may be because of that. Many of the lighting devices I run are z-wave switches and dimmers. I find the easier to manage across large groups of lights (like having 13 recessed lights in the kitchen alone, ugh), plus it’s easier to just have smart switches vs bulbs when you have little ones running around flipping every switch they can get their hands on! So they bring in brightness (on the dimmers) but no color or temp attributes. But man, those zwave switches are rock solid, never fail and are lightning fast on response.

I haven’t got to the button borders yet, but just playing around with the theming for the first time and WOW! I can’t believe you built a fully functional front end to edit themes. This is an amazing tool I wish could be used on all themes!

I am glad you like it as I think it is the crown jewel for HKI 5.

I am sorry that it isnt possible for all themes. Though you can basically create any theme you want with it. You can even create a script with all the values you currently have so that you can call that script for quickly changing the entire theme. I wrote some stuff about this in the documentation. Unfortunately at this time there isnt an easier way to implement this.

Also the theme editor is kinda in a beta form (and probably will be forever), there are some fixes coming soon though, since default icon color no longer works. This will be fixed with the next update.

Sounds good, been playing with it this afternoon and it’s pretty easy to use. I can’t get my z-wave light dimmers to behave like the other light buttons. I’m wondering if they don’t pass along an “active” parameter. Based on your previous message, changing active icon color (globally) doesn’t seem to affect them, they just stay black. And same with adding the same box shadow (I c/p from the active light line), so it seems like the “active” trigger doesn’t play with zwave dimmers?

Did you set the custom theme first?

Ya, I’m seeing all kinds of other changes I’m making in real time.

Well might be that it has the same error I just mentioned that I need to fix :stuck_out_tongue:

There is however an option to change the icon color regardless within the button addon itself.

Look for the icon_active_color option and add it to your buttons.

As for the box-shadow, it seems that it only works for non-lights.
You can however reuse the lights only box-shadow and instead of the button-card-color choose a different color instead:

# change this
0px 0px 10px 2px var(--button-card-light-color)
# to something like this
0px 0px 10px 2px red # choose any color you prefer

If you had read my previous comment, I have edited it :stuck_out_tongue:

Well, I have been playing around a little bit with it and made some fixes to them. In the upcoming update the following things should be working correctly:

  • icon active color for non rgb/color-temp lights, will use the global value now
  • box-shadow for non rgb/color-temp lights, will use the same variable as used for e.g. switches
  • icons on lights other than rgb or color-temp variants will no longer try to use the auto color feature and use the ha-icon-active-color variable instead.

This and many more fixes will come very soon, probably this weekend.

1 Like

You’re awesome! Can’t wait for the update :slight_smile:

1 Like

This is great, tons of great fixes here - update in progress! Decided to fully reset my themes back to default so I can rebuild it with the changes and see how they impact the oob theme.

**Friendly reminder to anyone reading this, if you get a config error on restart, you may need to remove the browser_mod lines in the hki package config file. If you previously had browser mod, those lines will already be in your main config file.