Merge the StatusBar bindings table with each screen's bindings table

2024-04-18 11:38:53 +10:00
parent cc255f6d77
commit b17f8a3dcc
6 changed files with 156 additions and 153 deletions
@@ -24,7 +24,7 @@ return screen:new{
        })
        self.root:center()

-        self.status_bar = widgets.StatusBar(self.root, {
+        self.status_bar = widgets.StatusBar(self, {
            back_cb = backstack.pop,
            title = self.title
        })
@@ -5,13 +5,12 @@ local styles = require("styles")
 local screen = require("screen")

 local function show_license(text)
-  backstack.push(screen:new {
+  backstack.push(widgets.MenuScreen:new {
+    show_back = true,
+    title = "Licenses",
    createUi = function(self)
-      self.menu = widgets.MenuScreen {
-        show_back = true,
-        title = "Licenses",
-      }
-      self.menu.root:Label {
+      widgets.MenuScreen.createUi(self)
+      self.root:Label {
        w = lvgl.PCT(100),
        h = lvgl.SIZE_CONTENT,
        text_font = font.fusion_10,
@@ -74,13 +73,8 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 end


-return function()
-  local menu = widgets.MenuScreen({
-    show_back = true,
-    title = "Licenses"
-  })
-
-  local container = menu.root:Object {
+return function(self)
+  local container = self.root:Object {
    flex = {
      flex_direction = "column",
      flex_wrap = "nowrap",
@@ -178,6 +172,4 @@ return function()
  library("tremor", "bsd", function()
    xiphbsd("Copyright (c) 2002, Xiph.org Foundation")
  end)
-
-  return menu
 end
@@ -7,17 +7,17 @@ local playing = require("playing")
 local styles = require("styles")
 local screen = require("screen")

-return screen:new {
-  createUi = function()
-    local menu = widgets.MenuScreen({})
+return widgets.MenuScreen:new {
+  createUi = function(self)
+    widgets.MenuScreen.createUi(self)

-    menu.list = lvgl.List(menu.root, {
+    local list = lvgl.List(self.root, {
      w = lvgl.PCT(100),
      h = lvgl.PCT(100),
      flex_grow = 1,
    })

-    local now_playing = menu.list:add_btn(nil, "Now Playing")
+    local now_playing = list:add_btn(nil, "Now Playing")
    now_playing:onClicked(function()
      backstack.push(playing:new())
    end)
@@ -25,7 +25,7 @@ return screen:new {

    local indexes = database.indexes()
    for _, idx in ipairs(indexes) do
-      local btn = menu.list:add_btn(nil, tostring(idx))
+      local btn = list:add_btn(nil, tostring(idx))
      btn:onClicked(function()
        backstack.push(browser:new {
          title = tostring(idx),
@@ -35,12 +35,10 @@ return screen:new {
      btn:add_style(styles.list_item)
    end

-    local settings = menu.list:add_btn(nil, "Settings")
+    local settings = list:add_btn(nil, "Settings")
    settings:onClicked(function()
      backstack.push(require("settings"):new())
    end)
    settings:add_style(styles.list_item)
-
-    return menu
  end,
 }
@@ -41,7 +41,7 @@ return screen:new {
    })
    self.root:center()

-    self.status_bar = widgets.StatusBar(self.root, {
+    self.status_bar = widgets.StatusBar(self, {
      back_cb = backstack.pop,
      transparent_bg = true,
    })
@@ -201,7 +201,7 @@ return screen:new {
    controls:Object({ flex_grow = 1, h = 1 }) -- spacer


-    self.bindings = {
+    self.bindings = self.bindings + {
      playback.playing:bind(function(playing)
        if playing then
          play_pause_img:set_src(img.pause)
@@ -8,35 +8,33 @@ local controls = require("controls")
 local bluetooth = require("bluetooth")
 local theme = require("theme")
 local database = require("database")
-local screen = require("screen")
 local usb = require("usb")

-local function SettingsScreen(title)
-  local menu = widgets.MenuScreen {
-    show_back = true,
-    title = title,
-  }
-  menu.content = menu.root:Object {
-    flex = {
-      flex_direction = "column",
-      flex_wrap = "nowrap",
-      justify_content = "flex-start",
-      align_items = "flex-start",
-      align_content = "flex-start",
-    },
-    w = lvgl.PCT(100),
-    flex_grow = 1,
-    pad_left = 4,
-    pad_right = 4,
-  }
-  return menu
-end
-
-local BluetoothSettings = screen:new {
+local SettingsScreen = widgets.MenuScreen:new {
+  show_back = true,
  createUi = function(self)
-    self.menu = SettingsScreen("Bluetooth")
+    widgets.MenuScreen.createUi(self)
+    self.content = self.root:Object {
+      flex = {
+        flex_direction = "column",
+        flex_wrap = "nowrap",
+        justify_content = "flex-start",
+        align_items = "flex-start",
+        align_content = "flex-start",
+      },
+      w = lvgl.PCT(100),
+      flex_grow = 1,
+      pad_left = 4,
+      pad_right = 4,
+    }
+  end
+}

-    local enable_container = self.menu.content:Object {
+local BluetoothSettings = SettingsScreen:new {
+  title = "Bluetooth",
+  createUi = function(self)
+    SettingsScreen.createUi(self)
+    local enable_container = self.content:Object {
      flex = {
        flex_direction = "row",
        justify_content = "flex-start",
@@ -54,12 +52,12 @@ local BluetoothSettings = screen:new {
      bluetooth.enabled:set(enabled)
    end)

-    theme.set_style(self.menu.content:Label {
+    theme.set_style(self.content:Label {
      text = "Paired Device",
      pad_bottom = 1,
    }, "settings_title")

-    local paired_container = self.menu.content:Object {
+    local paired_container = self.content:Object {
      flex = {
        flex_direction = "row",
        justify_content = "flex-start",
@@ -80,17 +78,17 @@ local BluetoothSettings = screen:new {
      bluetooth.paired_device:set()
    end)

-    theme.set_style(self.menu.content:Label {
+    theme.set_style(self.content:Label {
      text = "Nearby Devices",
      pad_bottom = 1,
    }, "settings_title")

-    local devices = self.menu.content:List {
+    local devices = self.content:List {
      w = lvgl.PCT(100),
      h = lvgl.SIZE_CONTENT,
    }

-    self.bindings = {
+    self.bindings = self.bindings + {
      bluetooth.enabled:bind(function(en)
        if en then
          enable_sw:add_state(lvgl.STATE.CHECKED)
@@ -119,15 +117,16 @@ local BluetoothSettings = screen:new {
  end
 }

-local HeadphonesSettings = screen:new {
+local HeadphonesSettings = SettingsScreen:new {
+  title = "Headphones",
  createUi = function(self)
-    self.menu = SettingsScreen("Headphones")
+    SettingsScreen.createUi(self)

-    theme.set_style(self.menu.content:Label {
+    theme.set_style(self.content:Label {
      text = "Maxiumum volume limit",
    }, "settings_title")

-    local volume_chooser = self.menu.content:Dropdown {
+    local volume_chooser = self.content:Dropdown {
      options = "Line Level (-10 dB)\nCD Level (+6 dB)\nMaximum (+10dB)",
      selected = 1,
    }
@@ -138,11 +137,11 @@ local HeadphonesSettings = screen:new {
      volume.limit_db:set(limits[selection])
    end)

-    theme.set_style(self.menu.content:Label {
+    theme.set_style(self.content:Label {
      text = "Left/Right balance",
    }, "settings_title")

-    local balance = self.menu.content:Slider {
+    local balance = self.content:Slider {
      w = lvgl.PCT(100),
      h = 5,
      range = { min = -100, max = 100 },
@@ -152,9 +151,9 @@ local HeadphonesSettings = screen:new {
      volume.left_bias:set(balance:value())
    end)

-    local balance_label = self.menu.content:Label {}
+    local balance_label = self.content:Label {}

-    self.bindings = {
+    self.bindings = self.bindings + {
      volume.limit_db:bind(function(limit)
        for i = 1, #limits do
          if limits[i] == limit then
@@ -182,11 +181,12 @@ local HeadphonesSettings = screen:new {
  end
 }

-local DisplaySettings = screen:new {
+local DisplaySettings = SettingsScreen:new {
+  title = "Display",
  createUi = function(self)
-    self.menu = SettingsScreen("Display")
+    SettingsScreen.createUi(self)

-    local brightness_title = self.menu.content:Object {
+    local brightness_title = self.content:Object {
      flex = {
        flex_direction = "row",
        justify_content = "flex-start",
@@ -201,7 +201,7 @@ local DisplaySettings = screen:new {
    local brightness_pct = brightness_title:Label {}
    theme.set_style(brightness_pct, "settings_title")

-    local brightness = self.menu.content:Slider {
+    local brightness = self.content:Slider {
      w = lvgl.PCT(100),
      h = 5,
      range = { min = 0, max = 100 },
@@ -211,7 +211,7 @@ local DisplaySettings = screen:new {
      display.brightness:set(brightness:value())
    end)

-    self.bindings = {
+    self.bindings = self.bindings + {
      display.brightness:bind(function(b)
        brightness_pct:set { text = tostring(b) .. "%" }
      end)
@@ -219,11 +219,12 @@ local DisplaySettings = screen:new {
  end
 }

-local InputSettings = screen:new {
+local InputSettings = SettingsScreen:new {
+  title = "Input Method",
  createUi = function(self)
-    self.menu = SettingsScreen("Input Method")
+    SettingsScreen.createUi(self)

-    theme.set_style(self.menu.content:Label {
+    theme.set_style(self.content:Label {
      text = "Control scheme",
    }, "settings_title")

@@ -244,11 +245,11 @@ local InputSettings = screen:new {
      option_idx = option_idx + 1
    end

-    local controls_chooser = self.menu.content:Dropdown {
+    local controls_chooser = self.content:Dropdown {
      options = options,
    }

-    self.bindings = {
+    self.bindings = self.bindings + {
      controls.scheme:bind(function(s)
        local option = scheme_to_option[s]
        controls_chooser:set({ selected = option })
@@ -266,7 +267,7 @@ local InputSettings = screen:new {
    }, "settings_title")

    local slider_scale = 4; -- Power steering
-    local sensitivity = self.menu.content:Slider {
+    local sensitivity = self.content:Slider {
      w = lvgl.PCT(90),
      h = 5,
      range = { min = 0, max = 255 / slider_scale },
@@ -278,19 +279,21 @@ local InputSettings = screen:new {
  end
 }

-local MassStorageSettings = screen:new {
+local MassStorageSettings = SettingsScreen:new {
+  title = "USB Storage",
  createUi = function(self)
-    self.menu = SettingsScreen("USB Storage")
+    SettingsScreen.createUi(self)
+
    local version = require("version").samd()
    if tonumber(version) < 3 then
-      self.menu.content:Label {
+      self.content:Label {
        w = lvgl.PCT(100),
        text = "Usb Mass Storage requires a SAMD21 firmware version >=3."
      }
      return
    end

-    local enable_container = self.menu.content:Object {
+    local enable_container = self.content:Object {
      flex = {
        flex_direction = "row",
        justify_content = "flex-start",
@@ -304,7 +307,7 @@ local MassStorageSettings = screen:new {
    enable_container:Label { text = "Enable", flex_grow = 1 }
    local enable_sw = enable_container:Switch {}

-    local busy_text = self.menu.content:Label {
+    local busy_text = self.content:Label {
      w = lvgl.PCT(100),
      text = "USB is currently busy. Do not unplug or remove the SD card.",
      long_mode = lvgl.LABEL.LONG_WRAP,
@@ -325,7 +328,7 @@ local MassStorageSettings = screen:new {
      bind_switch()
    end)

-    self.bindings = {
+    self.bindings = self.bindings + {
      usb.msc_enabled:bind(bind_switch),
      usb.msc_busy:bind(function(busy)
        if busy then
@@ -341,14 +344,16 @@ local MassStorageSettings = screen:new {
  end
 }

-local DatabaseSettings = screen:new {
+local DatabaseSettings = SettingsScreen:new {
+  title = "Database",
  createUi = function(self)
-    self.menu = SettingsScreen("Database")
-    local db = require("database")
-    widgets.Row(self.menu.content, "Schema version", db.version())
-    widgets.Row(self.menu.content, "Size on disk", string.format("%.1f KiB", db.size() / 1024))
+    SettingsScreen.createUi(self)

-    local auto_update_container = self.menu.content:Object {
+    local db = require("database")
+    widgets.Row(self.content, "Schema version", db.version())
+    widgets.Row(self.content, "Size on disk", string.format("%.1f KiB", db.size() / 1024))
+
+    local auto_update_container = self.content:Object {
      flex = {
        flex_direction = "row",
        justify_content = "flex-start",
@@ -366,7 +371,7 @@ local DatabaseSettings = screen:new {
      database.auto_update:set(auto_update_sw:enabled())
    end)

-    local actions_container = self.menu.content:Object {
+    local actions_container = self.content:Object {
      w = lvgl.PCT(100),
      h = lvgl.SIZE_CONTENT,
      flex = {
@@ -386,7 +391,7 @@ local DatabaseSettings = screen:new {
      database.update()
    end)

-    self.bindings = {
+    self.bindings = self.bindings + {
      database.auto_update:bind(function(en)
        if en then
          auto_update_sw:add_state(lvgl.STATE.CHECKED)
@@ -398,36 +403,38 @@ local DatabaseSettings = screen:new {
  end
 }

-local FirmwareSettings = screen:new {
+local FirmwareSettings = SettingsScreen:new {
+  title = "Firmware",
  createUi = function(self)
-    self.menu = SettingsScreen("Firmware")
+    SettingsScreen.createUi(self)
    local version = require("version")
-    widgets.Row(self.menu.content, "ESP32", version.esp())
-    widgets.Row(self.menu.content, "SAMD21", version.samd())
-    widgets.Row(self.menu.content, "Collator", version.collator())
+    widgets.Row(self.content, "ESP32", version.esp())
+    widgets.Row(self.content, "SAMD21", version.samd())
+    widgets.Row(self.content, "Collator", version.collator())
  end
 }

-local LicensesScreen = screen:new {
+local LicensesScreen = SettingsScreen:new {
+  title = "Licenses",
  createUi = function(self)
-    self.root = require("licenses")()
+    SettingsScreen.createUi(self)
+    self.root = require("licenses")(self)
  end
 }

-return screen:new {
+return widgets.MenuScreen:new {
+  show_back = true,
+  title = "Settings",
  createUi = function(self)
-    self.menu = widgets.MenuScreen {
-      show_back = true,
-      title = "Settings",
-    }
-    self.list = self.menu.root:List {
+    widgets.MenuScreen.createUi(self)
+    local list = self.root:List {
      w = lvgl.PCT(100),
      h = lvgl.PCT(100),
      flex_grow = 1,
    }

    local function section(name)
-      local elem = self.list:Label {
+      local elem = list:Label {
        text = name,
        pad_left = 4,
      }
@@ -435,7 +442,7 @@ return screen:new {
    end

    local function submenu(name, class)
-      local item = self.list:add_btn(nil, name)
+      local item = list:add_btn(nil, name)
      item:onClicked(function()
        backstack.push(class:new())
      end)
@@ -6,6 +6,7 @@ local backstack = require("backstack")
 local styles = require("styles")
 local database = require("database")
 local theme = require("theme")
+local screen = require("screen")

 local img = {
  db = lvgl.ImgData("//lua/img/db.png"),
@@ -23,27 +24,29 @@ local img = {

 local widgets = {}

-function widgets.MenuScreen(opts)
-  local screen = {}
-  screen.root = lvgl.Object(nil, {
-    flex = {
-      flex_direction = "column",
-      flex_wrap = "nowrap",
-      justify_content = "flex-start",
-      align_items = "flex-start",
-      align_content = "flex-start",
-    },
-    w = lvgl.PCT(100),
-    h = lvgl.PCT(100),
-  })
-  screen.root:center()
-  screen.status_bar = widgets.StatusBar(screen.root, {
-    back_cb = opts.show_back and backstack.pop or nil,
-    title = opts.title,
-    transparent_bg = true
-  })
-  return screen
-end
+widgets.MenuScreen = screen:new {
+  show_back = false,
+  title = "",
+  createUi = function(self)
+    self.root = lvgl.Object(nil, {
+      flex = {
+        flex_direction = "column",
+        flex_wrap = "nowrap",
+        justify_content = "flex-start",
+        align_items = "flex-start",
+        align_content = "flex-start",
+      },
+      w = lvgl.PCT(100),
+      h = lvgl.PCT(100),
+    })
+    self.root:center()
+    self.status_bar = widgets.StatusBar(self, {
+      back_cb = self.show_back and backstack.pop or nil,
+      title = self.title,
+      transparent_bg = true
+    })
+  end
+}

 function widgets.Row(parent, left, right)
  local container = parent:Object {
@@ -61,10 +64,14 @@ function widgets.Row(parent, left, right)
  container:Label { text = right }
 end

-function widgets.StatusBar(parent, opts)
-  local status_bar = {}
+local bindings_meta = {
+  __add = function(a, b)
+    return table.move(a, 1, #a, #b + 1, b)
+  end
+}

-  status_bar.root = parent:Object {
+function widgets.StatusBar(parent, opts)
+  local root = parent.root:Object {
    flex = {
      flex_direction = "row",
      justify_content = "flex-start",
@@ -81,19 +88,19 @@ function widgets.StatusBar(parent, opts)
  }

  if not opts.transparent_bg then
-    theme.set_style(status_bar.root, "header");
+    theme.set_style(root, "header");
  end

  if opts.back_cb then
-    status_bar.back = status_bar.root:Button {
+    local back = root:Button {
      w = lvgl.SIZE_CONTENT,
      h = 12,
    }
-    status_bar.back:Label({ text = "<", align = lvgl.ALIGN.CENTER })
-    status_bar.back:onClicked(opts.back_cb)
+    back:Label({ text = "<", align = lvgl.ALIGN.CENTER })
+    back:onClicked(opts.back_cb)
  end

-  status_bar.title = status_bar.root:Label {
+  local title = root:Label {
    w = lvgl.PCT(100),
    h = lvgl.SIZE_CONTENT,
    text_font = font.fusion_10,
@@ -102,15 +109,15 @@ function widgets.StatusBar(parent, opts)
    flex_grow = 1,
  }
  if opts.title then
-    status_bar.title:set { text = opts.title }
+    title:set { text = opts.title }
  end

-  status_bar.db_updating = status_bar.root:Image { src = img.db }
-  theme.set_style(status_bar.db_updating, "database_indicator")
-  status_bar.bluetooth = status_bar.root:Image {}
-  status_bar.battery = status_bar.root:Image {}
-  status_bar.chg = status_bar.battery:Image { src = img.chg }
-  status_bar.chg:center()
+  local db_updating = root:Image { src = img.db }
+  theme.set_style(db_updating, "database_indicator")
+  local bt_icon = root:Image {}
+  local battery_icon = root:Image {}
+  local charge_icon = battery_icon:Image { src = img.chg }
+  charge_icon:center()

  local is_charging = nil
  local percent = nil
@@ -136,19 +143,19 @@ function widgets.StatusBar(parent, opts)
      end
    end
    if is_charging then
-      status_bar.chg:clear_flag(lvgl.FLAG.HIDDEN)
+      charge_icon:clear_flag(lvgl.FLAG.HIDDEN)
    else
-      status_bar.chg:add_flag(lvgl.FLAG.HIDDEN)
+      charge_icon:add_flag(lvgl.FLAG.HIDDEN)
    end
-    status_bar.battery:set_src(src)
+    battery_icon:set_src(src)
  end

-  status_bar.bindings = {
+  parent.bindings = {
    database.updating:bind(function(yes)
      if yes then
-        status_bar.db_updating:clear_flag(lvgl.FLAG.HIDDEN)
+        db_updating:clear_flag(lvgl.FLAG.HIDDEN)
      else
-        status_bar.db_updating:add_flag(lvgl.FLAG.HIDDEN)
+        db_updating:add_flag(lvgl.FLAG.HIDDEN)
      end
    end),
    power.battery_pct:bind(function(pct)
@@ -161,21 +168,20 @@ function widgets.StatusBar(parent, opts)
    end),
    bluetooth.enabled:bind(function(en)
      if en then
-        status_bar.bluetooth:clear_flag(lvgl.FLAG.HIDDEN)
+        bt_icon:clear_flag(lvgl.FLAG.HIDDEN)
      else
-        status_bar.bluetooth:add_flag(lvgl.FLAG.HIDDEN)
+        bt_icon:add_flag(lvgl.FLAG.HIDDEN)
      end
    end),
    bluetooth.connected:bind(function(connected)
      if connected then
-        status_bar.bluetooth:set_src(img.bt_conn)
+        bt_icon:set_src(img.bt_conn)
      else
-        status_bar.bluetooth:set_src(img.bt)
+        bt_icon:set_src(img.bt)
      end
    end),
  }
-
-  return status_bar
+  setmetatable(parent.bindings, bindings_meta)
 end

 function widgets.IconBtn(parent, icon, text)