[OH3] Main UI - New „main_widget“ - development and testing [deprecated]

Add-ons UIs
, ,
481

You certainly welcome, though I can’t say I’ve done much more than answers a few questions.

I think you’re not seeing what you expect due to textColor.

The expression parser is treating that as a variable which is undefined. I’m sure just changing that to 'black' will get you the correct text color.

However, at this point I think I would recommend moving to a more general css system and take advantage of the stylesheet. Then you only need a single expression in each component to give it a class which will greatly reduce the complexity of the styling at this point. The stylesheet can be added at the top f7-block level like this:

component: f7-block
config:
  style:
    display: flex
    flex-direction: column
    height: calc(100vh - var(--f7-toolbar-height) - var(--f7-safe-area-bottom) - var(--f7-safe-area-top))
    justify-content: space-between
    margin: 0px
    padding: 0px
    --opmw-menu-text-color: '=(themeOptions.dark=="light")?("#8C8C8C"):("#848484")'
  stylesheet: |
    .selected_menu_item {
      color: black;
      text-decoration-color: #F8BB00 !important;
      text-decoration: underline;
      text-underline-offset: 4px;
    }
    
    .unselected_menu_item {
      color: var(--opmw-menu-text-color);
    }

And then all you need in the menu buttons is the one expression-based class setting and the menu specific styles such as size.:

                      - component: oh-button
                        config:
                          class: '=vars.objVar.selectSection=="SECTION" + loop.baseMenu_idx ? "selected_menu_item" : "unselected_menu_item"'
                          action: variable
                          actionVariable: objVar
                          actionVariableValue:
                            selectSection: ="SECTION" + loop.baseMenu_idx
                          large: true
                          style:
                            font-size: 28px
                            font-weight: 200
                          text: =loop.baseMenu

This will also make it easier for you to eventually add theme options and personalization as you see see the example I put in of creating an open page main widget specific variable in the style section and using that variable in the stylesheet.

2 Likes
482

@rubenfuser Hmmm. All devices in my perspective is indeed energy devices. That I had in my mind for the tab bar is to filter equipment by type. So if your smart plug controls a light, then you have an on-off light widget that shows up under lights tab. Energy for me drives my mind to report section under Home menu. Again, maybe I’m wrong.

483

Dumb me, of course, it should be props.textColor

Thanks @JustinG, this was an obvious mistake.

Your suggestions regarding stylesheet sound good, will try to implement this, so we can head forward to proper scheming….

484

as said before, i have smartplugs, that have anything related to lights.
smartplug, for example in my case, one controls fridge, one controls hoover, one control washing machine…and so on.
'cause we’re creating something that will be suitable for everyone, we have to think what users can have at home.
like i’ve already wrote about people that have 2 or 3 floors home, you can’t remove floors menu.
and about this topic, can we do another thing?
floor menu will show all devices in floor devided by type., and room show all rooms and devices are devided by type.
this avoid us to add another line on the top menu, and at the same time, makes more suitable that menu.

@Nic0205,@hmerk,@Dimitris, what do you think? could be a good idea?

485

This is exactly what I/we have design, unless I have lost critical episodes!

486

In the reference design, all equipment shows / filters equipment other than lights/rollers/hvac

image
image750×133 22.8 KB

487

ok this is not what widget does at the moment.
@hmerk @Nic0205, so Rooms menu should be independent, menu selection will be vertical.

Floor show only → frist,second,ground floors
Rooms show only → bedroom,kitchen,dining room…and rooms can be selected directly, and not only after floor selection.

it’s an hard recoding this?

488

mmm…ok but only in room selection in my opinion.
also security, in room selection, is useless, security could be available only in Home bottom menu.
last, i suggest to rename “HVAC” to “Clima”.

489

@rubenfuser and @Dimitris: Now I am lost.

Dimitri could you please describe (perhaps with images :wink: ) how the structure cascade should be in your mind and then we could discuss if all could agree to it? For me this thread with the image was a great help to see what we have to do…

For me it looks at the moment that we have lots of construction sites that should be followed in a structured form. Like an kanban-Board / todo_list or similar. At least for me it is sometimes hard to follow who works on what and how we could put the things together…

For now I know:

Ruben is working on the widgets
hmerk is working on cutting the main code in pieces with extra widgets for rooms and floors
Justin gives always the right advice
Dimitris looks at the correct design pattern
Nic is waiting for hmerk to have the poc ready and then would try the theming options.

Am I right?

490

completely agree!
in my mind, hmerk and you are working on main widget code.
i’m working on sub widgets
dimitris graphical info.

i talk for my job, we need to put in first post also RGB colors (if someone in future will join/help us), and maybe put an empty widget f7-card with preset layout defined.

also @Dimitris we need explained functions for widgets, which buttons have to do what…

eventually @Nic0205, can you be the widget beta tester and “code corrector”? i’m not very good and sure i make big mistakes, so i need a teacher supervisor for this :slight_smile:

491

Of course - if there’s something to test - send it to me…

Code corrector? I’ll try my best - but the master of code is Justin :wink:

492

And that‘s exactly what I will try with moving the middle part to separate widgets

493

No, that‘s not how I understood the design concept.
What @Dimitris explained today is what I was talking about yesterday and what I am going to bild a poc of.
Moving the middle (information) part out of the main_widget and show it as a „Room Card“ or a „Floor Card“ based on Menu selection. These new cards will then show the different equipment widgets.

1 Like
494

Floor base is not implemented yet and yes, security should be available in home menu only.

495

maybe we’re saying same thing in different words.
i understood that Floor menu show ALL devices of the floor, of every room.
room menu show all devices of that room. so room menu will have all rooms of all floors.

@Dimitris illuminate us :slight_smile:

496

oh yes he is the guru! but i think my codes are too much easy for his level :wink:

1 Like
497

Not exactly, as per my understanding, room menu will only show the rooms of the prior selected floor. Orherwise, the menu might need to much clicking to get to the right room.

1 Like
498

why too much clicking? should be less than actual :wink:
open main widget, click floor to show everything for that floor
or
open main widget, click rooms and then room name to show category (lights, rollers…) of that room.

now, we have to chose floors, then floor name, then move to rooms, and then select room name, and then category.

am i wrong?

499

Think of having a house with 3 floors and 4 rooms each, makes 12 rooms in total. Cause ao name length, you might see 3 rooms in the menu at once, so to reach the last room you need to press the chevron 8 times, whereas it would be one or two clicks to select the floor and anothe one or two for the room….

1 Like
500

f**k, you are right.
so let’s wait your move to other widgets for floors/rooms…

1 Like