feat(color): allow all UI controls for widgets when full screen

[philmoz]

Extends the Lua LVGL API to allow buttons, text and number edit, sliders etc to be used on widgets when the widget is in full screen mode.

Example widget script:

local opts = {
}

local wgt
local exitApp = false

local function create(zone, opts)
  wgt = { zone=zone, opts=opts }
  return wgt
end

local function update(wgt, opts)
  wgt.opts = opts
  exitApp = false

  if lvgl == nil then return end

  lvgl.clear()

  local lyt

  if (lvgl.isFullscreen()) then
    lyt = {
      {type="button", text="Close", x=100, y=100,
          press=(
              function()
                  lvgl.confirm({title="Exit", message="Really exit?",
                      confirm=(function() exitApp = true end)
                  })
              end)},
    }
  else
    lyt = {
      {type="label", text="Enter full screen for UI", x=100, y=100},
    }
  end

  lvgl.build(lyt)
end

local function background(wgt)
end

local function refresh(wgt, event, touchState)
  if (exitApp) then
    lcd.exitFullScreen()
  end

  if lvgl == nil then
    lcd.drawText(0, 0, "Lvgl support required", COLOR_THEME_WARNING)
  end
end

return { name="Lvgl App", options=opts, create=create, update=update, refresh=refresh, background=background, useLvgl=true }

[wimalopaan]

Many thanks for your great work!

Most stuff was already discussed on discord.

Just not to get lost I mention the following issues I actually see:

• slider: function get not called (only once the object gets visible)
• toggle: function get not called (only once the object gets visible)
• maybe new UI class momentaryButton as discussed: https://discord.com/channels/839849772864503828/842693696629899274/1331892836303638582
• define a larger padding than PAD_LARGE: perhaps PAD_XL approx 2 * PAD_LARGE

[philmoz]

Slider and toggle switch fixed.
You can use any number in place of the PAD_xx constants so not sure a PAD_XL is really needed.

A note on the lvgl.getContext() function.
For widgets it returns the same table that was created with the first 'create()' function call. This allows functions that get or set properties in UI elements to access the internal script data without having to pass the table to every function call.
For stand alone scripts it returns nil.
This was requested by @offer-shmuely.

[wimalopaan]

Slider and toggle switch fixed.

Confirm with my test app. Thanks!!!

You can use any number in place of the PAD_xx constants so not sure a PAD_XL is really needed.

Ok, maybe need only a docu fix then.

A note on the lvgl.getContext() function. For widgets it returns the same table that was created with the first 'create()' function call. This allows functions that get or set properties in UI elements to access the internal script data without having to pass the table to every function call. For stand alone scripts it returns nil. This was requested by @offer-shmuely.

Cool, will also have a look at that.

[philmoz]

Added 'momentaryButton' control:

{type="momentaryButton", text="Title", press=(function() end), release=(function() end)}

Shows in checked state while pressed.
'press' function is only called when first pressed.
'release' function is called when touch / key press ends.

[wimalopaan]

Added 'momentaryButton' control:

Wow! Absolute great work. Many thanks.

First tests are successful ;-)

[wimalopaan]

Just an idea for a small improvement (in my eyes):

the UI classes button and momentaryButton share the same screen layout - they are visually indistinguishable. I would prefer to have different looks for them, to say: the momentaryButton should get another layout (maybe italic font or not a rounded rectangle).

That said, I would it find useful to override the default colors (from theme). The color property for e.g. button is ignored. Maybe there could be textColor, fgColor, bgColor that override the theme defaults.

[offer-shmuely]

Great addition For ease of documentation, it will be better as buttonMomentarySo it will be sorted alphabetically (docs/web site/auto completion)Can the edgeTx used that button instead of the regular in the numbers editor (-10, -1, +1, +10)?—————————Offer ShmuelyOn 24 Jan 2025, at 16:58, Wilhelm ***@***.***> wrote: Just an idea for a small improvement (in my eyes): the UI classes button and momentaryButton share the same screen layout - they are visually indistinguishable. I would prefer to have different looks for them, to say: the momentaryButton should get another layout (maybe italic font or not a rounded rectangle). That said, I would it find useful to override the default colors (from theme). The color property for e.g. button is ignored. Maybe there could be textColor, fgColor, bgColor that override the theme defaults. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[philmoz]

Great addition For ease of documentation, it will be better as buttonMomentarySo it will be sorted alphabetically

@wimalopaan - the momentary button was your idea, do you have any preference for how it is named? Now would be the time to change it.

[philmoz]

the UI classes button and momentaryButton share the same screen layout - they are visually indistinguishable. I would prefer to have different looks for them, to say: the momentaryButton should get another layout (maybe italic font or not a rounded rectangle).

@JimB40 - do you have any thoughts on this?

[wimalopaan]

Great addition For ease of documentation, it will be better as buttonMomentarySo it will be sorted alphabetically

@wimalopaan - the momentary button was your idea, do you have any preference for how it is named? Now would be the time to change it.

I would still vote for momentaryButton.