Vtx admin top bar updates

src/WIDGETS/ELRSTelemetry/ui/topbar.lua

@@ -3,27 +3,51 @@
 -- Loaded via loadScript() from each per-screen ui/ file with            --
 -- ({ Display }); returns the TopBarUI table.                            --
 --                                                                       --
--- Two stacked lines and no background, so it composes onto the dark     --
--- header. Everything it shows is abbreviated to fit a top-bar slot,     --
--- which is why it spells out its own text ladder rather than reusing    --
--- the hero label's.                                                     --
+-- Same geometry as the stock Value widget in a top-bar zone, so it      --
+-- lines up with one placed beside it: a STD row at the origin and a     --
+-- MIDSIZE row 14 px (scaled) below, both left aligned, no background.   --
+-- The small row carries the RSSI where a stock Value carries its source --
+-- name; the big row is the LQ.                                          --
 ---------------------------------------------------------------------------
 
 local ctx = ...
 local Display = ctx.Display
 
 local TopBarUI = {}
 
+local VALUE_Y = math.floor(14 * lvgl.LCD_SCALE + 0.5)
+
 --- The top bar sits on the dark header, so it needs PRIMARY2 where
---- Display.heroColor uses PRIMARY1.
-local function mismatchColor()
+--- Display.heroColor uses PRIMARY1. Disconnected takes the disabled grey a
+--- stock Value gives stale telemetry.
+local function barColor()
+  if not Display.isConnected() then
+    return COLOR_THEME_DISABLED
+  end
   if Display.isMismatch() then
     return COLOR_THEME_WARNING
   end
   return COLOR_THEME_PRIMARY2
 end
 
---- Top bar: two lines stacked, no background.
+local function smallText()
+  if not Display.isConnected() then
+    return "--"
+  end
+  if Display.isMismatch() then
+    return "Mismatch"
+  end
+  return Display.rssiText()
+end
+
+local function bigText()
+  if not Display.isConnected() or Display.isMismatch() then
+    return "--"
+  end
+  return table.concat({ Display.lqHeroText(), "%" })
+end
+
+--- Top bar: RSSI over LQ, in the stock Value widget's label-over-value layout.
 function TopBarUI.build(w, h)
   lvgl.build({
     {
@@ -32,39 +56,22 @@ function TopBarUI.build(w, h)
       y = 0,
       w = w,
       h = h,
-      align = CENTER,
-      flexFlow = lvgl.FLOW_COLUMN,
-      flexPad = 0,
       children = {
         {
           type = lvgl.LABEL,
-          align = CENTER,
-          font = SMLSIZE,
-          color = mismatchColor,
-          text = function()
-            if not Display.isConnected() then
-              return "--"
-            end
-            if Display.isMismatch() then
-              return "Model"
-            end
-            return Display.lqText()
-          end,
+          x = 0,
+          y = 0,
+          font = STDSIZE,
+          color = barColor,
+          text = smallText,
         },
         {
           type = lvgl.LABEL,
-          align = CENTER,
-          font = SMLSIZE,
-          color = mismatchColor,
-          text = function()
-            if not Display.isConnected() then
-              return "--"
-            end
-            if Display.isMismatch() then
-              return "Mismatch"
-            end
-            return Display.rssiText()
-          end,
+          x = 0,
+          y = VALUE_Y,
+          font = MIDSIZE,
+          color = barColor,
+          text = bigText,
         },
       },
     },

src/WIDGETS/ELRSVTXAdmin/ui/topbar.lua

@@ -8,7 +8,11 @@ local VTXDisplay = ctx.VTXDisplay
 
 local TopBarUI = {}
 
---- Top bar: label over value, matching EdgeTX's stock status bar widgets.
+-- Same geometry as the stock Value widget in a top-bar zone: STD label at the
+-- origin, MIDSIZE value 14 px (scaled) below it, both left aligned.
+local VALUE_Y = math.floor(14 * lvgl.LCD_SCALE + 0.5)
+
+--- Top bar: label over value, matching EdgeTX's stock Value widget.
 function TopBarUI.build(w, h)
   lvgl.build({
     {
@@ -17,21 +21,20 @@ function TopBarUI.build(w, h)
       y = 0,
       w = w,
       h = h,
-      align = CENTER,
-      flexFlow = lvgl.FLOW_COLUMN,
-      flexPad = 0,
       children = {
         {
           type = lvgl.LABEL,
-          align = CENTER,
-          font = SMLSIZE,
+          x = 0,
+          y = 0,
+          font = STDSIZE,
           color = COLOR_THEME_PRIMARY2,
           text = "VTX",
         },
         {
           type = lvgl.LABEL,
-          align = CENTER,
-          font = SMLSIZE,
+          x = 0,
+          y = VALUE_Y,
+          font = MIDSIZE,
           color = COLOR_THEME_PRIMARY2,
           text = function()
             if VTXDisplay.showStatus() then