Question (Smart Home System)?

Dear ABG,

I am writing to ask for your assistance in creating an app similar to the one shown in the attached image. I have some experience using App Inventor, but I'm not sure how to create an app that looks like this.

Could you please provide some guidance on how to create an app with a similar design? Specifically, I'm interested in learning how to create the circular menu with the different icons and labels, as well as how to add functionality to each option.

Any resources, tutorials, or advice you could provide would be greatly appreciated. Thank you for your time and assistance.

Ahmed Ibrahim

I am making this topic public, because there are others on this forum with better art skills than me, and to give you world wide coverage.

This app looks like several nested vertical and horizontal Arrangements.

I see a Switch component, some Labels stacked vertically, and a Vertical Arrangement with two stacked buttons, with images that could be prepared at first run in small canvases.

I have now run dry of ideas.

i need one to help me to do the same this picture mit Blocks

don't know, if like this?

smart_home_system.aia (1.6 KB)

After sleeping on the question, I thought of more improvement ideas.

  • Those up and down buttons look like elevator call buttons. That diverted me from thinking about the more likely purpose, setting a target temperature in a heating/ cooling system.
  • You are missing a label to show the target temperature.
  • You are missing labels on the slide switch to show it's three positions
    • Cool
    • Off
    • Heat
  • You are missing an indicator to show whether or not the heating system is running or not.
  • You are missing an indicator to show whether or not the cooling system is running or not.

When you code your blocks, you will need to reverse the temperature comparison logic depending on slide switch setting.

Use a radio button or List Picker for three way setting of cool/off/heat.