Modify the appearance of widgets in locations of mobile app

Setup, Configuration and Use Beginners
1

Hi, I have OH5 installed on Rpi4 and I am using the OH mobile app on my android device. I am already quite well familiarized with the demantic model, and now I am playing with the appearance of different widgets.

Now I want to modify a bit the widgets in the “Locations” tab of an application (the one you click at the bottom of an app). Now all the “bricks” are grey and only contain the name of the location and the parent location. How can I change the color of these “bricks” or add some icon?

Second question, I can see the in some cases a temperature appears on the “brick” (when I’ve added a semantic property “temperature measurement”) or small bulbs when I added light points directly under the location. Where can I read about different things that can appear in that view and how to achieve this?

2

You can see the list of different badges here:

But I don’t know if there’s a list of the semantic tags that correspond to those badges anywhere. Even though many of them are easy to guess (temperature badge is measurement and temperature) it’s probably a good idea to make that explicit somewhere in the docs.

Also on that page you can see other built-in properties such as changing the background color and the image. These you can set using the configure card menu option in the overview page editor (click the pencil icon in the upper right corner of the overview page):

image
image632×412 19.7 KB

If you need to change more than that you can modify some of the css styles by switching over to the code tab and adding a stylesheet property to the widget’s yaml configuration. For instance, I want my buttons to match the color theme of each card image:

image
image678×672 55.9 KB

loc_LaundryRoom:
  - component: oh-location-card
    config:
      backgroundColor: blue
      backgroundImage: /static/model/laundry_room_cchr.png
      stylesheet: |
        .button-active {
          background: rgb(0,107,166);
        }
        .button-large {
          background: rgb(0,107,166);
        }
        .button {
          border-color: rgb(0,107,166);
        }