Need some guidance on widgets and pages

[dries_dokter]

I have a couple of Hue lights for which I have standard scenes that I trigger with either wall buttons or the OH app.

At the moment my openhab app looks like this:

Based on this snippet in the sitemap:

 Frame label="Beneden" {
                Switch item=KamerScene label="Kamer" icon="bank" mappings=[0="0", 1="[N]", 2="[T]", 3="[C]" ]
                Switch item=TafelScene label="Tafel" icon="table" mappings=[0="0", 1="[N]", 2="[F]", 3="[C]" ]

I looked into pages, widgets etc and it would enable me to create a more compact and tuned UI.
So I started with some pages and some widgets and now this looks like:

This looks like " kind of" what I want but I’d rather not use sliders (this is an oh-slider-card) and replace them with what I had before: 4 different choices (0, Normal, Fel, Custom)

From this Yaml:

config:
  layoutType: responsive
  label: Woonkamer
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-slider-card
                      config:
                        title: Tafel
                        item: TafelScene
                        min: 0
                        max: 3
                        step: 1
                        scale: true
                        scaleSteps: 1
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: oh-slider-card
                      config:
                        title: Kamer
                        item: KamerScene
                        min: 0
                        max: 3
                        step: 1
        - component: oh-grid-row
          config: {}
          slots:
            default: []
masonry: null
grid: []

I have been looking at the custom widget documentation but find it hard to get started from there, it is quite overwhelming. So something to get met started or at least a hint to which widget type would be the best starting point would very much me appriciated!

[JustinG]

@dries_dokter

So something to get met started or at least a hint to which widget type would be the best starting point would very much me appriciated!

This looks like a job for a series of oh-buttons setup in a segmented group. Search the forum for f7-segmented for examples and take a look at Button Vue Component | Framework7 Vue Documentation.

[dries_dokter]

Thank you @JustinG , it was what I needed to get started:

And again I am in awe of what openhab is able to do (and I started using it at version 1.6 )