Add two-way databinding for lua, and flesh out the lua statusbar

lua/backstack.lua

@@ -0,0 +1,37 @@
+local lvgl = require("lvgl")
+
+local backstack = {
+  root = lvgl.Object(nil, {
+    w = lvgl.HOR_RES(),
+    h = lvgl.VER_RES(),
+  }),
+  stack = {},
+}
+
+function backstack:Top()
+  return self.stack[#self.stack]
+end
+
+function backstack:SetTopParent(parent)
+  local top = self:Top()
+  if top and top.root then
+    top.root:set_parent(parent)
+  end
+end
+
+function backstack:Push(screen)
+  self:SetTopParent(nil)
+  table.insert(self.stack, screen)
+  self:SetTopParent(self.root)
+end
+
+function backstack:Pop(num)
+  num = num or 1
+  for _ = 1, num do
+    local removed = table.remove(self.stack)
+    removed.root:delete()
+  end
+  self:SetTopParent(self.root)
+end
+
+return backstack

lua/main.lua

@@ -1 +1,3 @@
-require("main_menu"):Create()
+local backstack = require("backstack")
+local main_menu = require("main_menu"):Create(backstack.root)
+backstack:Push(main_menu)

lua/main_menu.lua

@@ -5,8 +5,9 @@ local database = require("database")
 
 local main_menu = {}
 
-function main_menu:Create()
-  local root = lvgl.Object(nil, {
+function main_menu:Create(parent)
+  local menu = {}
+  menu.root = lvgl.Object(parent, {
     flex = {
       flex_direction = "column",
       flex_wrap = "wrap",
@@ -17,31 +18,33 @@ function main_menu:Create()
     w = lvgl.HOR_RES(),
     h = lvgl.VER_RES(),
   })
-  root:center()
+  menu.root:center()
 
-  widgets.StatusBar(root, {})
+  menu.status_bar = widgets.StatusBar(menu.root, {})
 
-  local list = lvgl.List(root, {
+  menu.list = lvgl.List(menu.root, {
     w = lvgl.PCT(100),
     h = lvgl.PCT(100),
     flex_grow = 1,
   })
 
-  list:add_btn(nil, "Now Playing"):onClicked(function()
+  menu.list:add_btn(nil, "Now Playing"):onClicked(function()
     legacy_ui.open_now_playing();
   end)
 
   local indexes = database.get_indexes()
   for id, name in ipairs(indexes) do
-    local btn = list:add_btn(nil, name)
+    local btn = menu.list:add_btn(nil, name)
     btn:onClicked(function()
       legacy_ui.open_browse(id);
     end)
   end
 
-  list:add_btn(nil, "Settings"):onClicked(function()
+  menu.list:add_btn(nil, "Settings"):onClicked(function()
     legacy_ui.open_settings();
   end)
+
+  return menu
 end
 
 return main_menu

lua/widgets.lua

@@ -1,37 +1,96 @@
 local lvgl = require("lvgl")
+local power = require("power")
+local bluetooth = require("bluetooth")
+local playback = require("playback")
 
 local widgets = {}
 
-function widgets.StatusBar(parent)
-  local container = parent:Object {
+function widgets.StatusBar(parent, opts)
+  local status_bar = {}
+
+  status_bar.root = parent:Object {
     flex = {
-        flex_direction = "row",
-        justify_content = "flex-start",
-        align_items = "center",
-        align_content = "center",
+      flex_direction = "row",
+      justify_content = "flex-start",
+      align_items = "center",
+      align_content = "center",
     },
     w = lvgl.HOR_RES(),
-    h = 16,
+    h = 18,
   }
 
-  container:Label {
-    w = lvgl.SIZE_CONTENT,
-    h = 12,
-    text = "<",
-  }
+  if opts.back_cb then
+    status_bar.back = status_bar.root:Label {
+      w = lvgl.SIZE_CONTENT,
+      h = 12,
+      text = "<",
+    }
+    status_bar.back:onClicked(opts.back_cb)
+  end
 
-  container:Label {
+  status_bar.title = status_bar.root:Label {
     w = lvgl.PCT(100),
     h = 16,
-    text = "cool title",
+    text = "",
     flex_grow = 1,
   }
+  if opts.title then
+    status_bar.title.set { text = opts.title }
+  end
 
-  container:Label {
-    w = lvgl.SIZE_CONTENT,
-    h = 16,
-    text = "69%",
+  status_bar.playing = status_bar.root:Image {}
+  status_bar.bluetooth = status_bar.root:Image {}
+  status_bar.battery = status_bar.root:Image {}
+
+  status_bar.bindings = {
+    power.battery_pct:bind(function(percent)
+      local src
+      if percent >= 95 then
+        src = "battery_full.png"
+      elseif percent >= 75 then
+        src = "battery_80.png"
+      elseif percent >= 55 then
+        src = "battery_60.png"
+      elseif percent >= 35 then
+        src = "battery_40.png"
+      elseif percent >= 15 then
+        src = "battery_20.png"
+      else
+        src = "battery_empty.png"
+      end
+      status_bar.battery:set_src("//lua/assets/" .. src)
+    end),
+    playback.playing:bind(function(playing)
+      if playing then
+        status_bar.playing:set_src("//lua/assets/play.png")
+      else
+        status_bar.playing:set_src("//lua/assets/pause.png")
+      end
+    end),
+    playback.track:bind(function(track)
+      if track then
+        status_bar.playing:clear_flag(lvgl.FLAG.HIDDEN)
+      else
+        status_bar.playing:add_flag(lvgl.FLAG.HIDDEN)
+      end
+    end),
+    bluetooth.enabled:bind(function(en)
+      if en then
+        status_bar.bluetooth:clear_flag(lvgl.FLAG.HIDDEN)
+      else
+        status_bar.bluetooth:add_flag(lvgl.FLAG.HIDDEN)
+      end
+    end),
+    bluetooth.connected:bind(function(connected)
+      if connected then
+        status_bar.bluetooth:set_src("//lua/assets/bt_conn.png")
+      else
+        status_bar.bluetooth:set_src("//lua/assets/bt.png")
+      end
+    end),
   }
+
+  return status_bar
 end
 
 return widgets