UI item colour assignment

[Raedrus02]

Hey there, I am a student working on a project with Isaac Sim and I am developing a simple UI extension that shows a 4x4 grid of squares. I have a robot in the scene and the room separated into 4 sections. My idea is to light up the corresponding square that represents each corner of the room when the robot is present inside. As for now, i am able to create the 4x4 grid but have no idea how to change the colour of the squares. Below is my code, any guidance is appreciated!

with ui.HStack(spacing=10):
                    # Create the first square
                    self.square1 = ui.Rectangle(width=100, height=100)
                    # Create the second square
                    self.square2 = ui.Rectangle(width=100, height=100)


# Create the second horizontal stack (bottom row)
with ui.HStack(spacing=10):
                    # Create the third square
                    self.square3 = ui.Rectangle(width=100, height=100)
      
                    # Create the fourth square
                    self.square4 = ui.Rectangle(width=100, height=100)

Isaac Sim Version

4.2.0
4.1.0
4.0.0
2023.1.1
2023.1.0-hotfix.1
Other (please specify):

[VickNV]

Please verify if set_style() is useful.

[Raedrus02]

Hey there, appreciate the guide! I tried to find documentations on how to use set_style but all there’s available is the page that your link leads to, which didn’t help much. But digging deeper using the set_style idea i found this documentation which allowed me to finally set the colours. Now the next step will be changing their colours when the robot runs.

Result:

Working code to style the square to red:

with ui.HStack(spacing=10):
          # Create the first square
          self.square1 = ui.Rectangle(width=100, height=100, style={"Rectangle":{"background_color":cl("#aa4444")}})

Hope this helps someone out there.
Again thank you for the guidance.
Documentation on styling your UI