Mudlet Geyser HBox/VBox Demo

button_vBox = Geyser.VBox({
  -- Vertical box to hold buttons in.
  -- This vertical box will automatically do two things:
  --    (1) Set size of buttons so that they are uniform.
  --    (2) Position buttons so that they look the way that you want them to.

  name = "button_vBox",
  x = 0, y = 0,         -- Set x and y to actual position. These two coordinates control position of entire group.
  width = 300, height = 300,    -- Set height/width to desired size. These two sizes control size of entire group.
})

-- Top row --
button_1 = Geyser.Label({
  -- Top button, per your diagram.

  name      = "button_1",
  fgColor   = "black",
  color     = "red",
  width     = "100%",
  message   = [[<center>Button 1</center>]]
}, button_vBox) -- Last argument of this line sets this object as child of button_vBox.

button_1:setClickCallback("function_button_1")
-- End top row --

-- Second row --
button_hBox_top = Geyser.HBox({
  -- A horizontal box. See size/position comments above under button_vBox.
  --
  -- This box will be underneath button_1.
  -- This box will be a child of button_vBox.
  -- This box will hold button_2 and button_3, which will each take half the width of button_hBox_top.

  name      = "button_hBox_top",
  width     = "100%",
}, button_vBox) -- Child of button_vBox

button_2 = Geyser.Label({
  -- Button 2.
  -- Child of button_hBox_top.
  -- Is on the left.

  name      = "button_2",
  fgColor   = "white",
  color     = "orange",
  message   = [[<center>Button 2</center>]]
}, button_hBox_top) -- Child of button_hBox_top

button_2:setClickCallback("function_button_2")

button_3 = Geyser.Label({
  -- Button 3.
  -- Child of button_hBox_top.
  -- Is on the right.

  name      = "button_3",
  fgColor   = "black",
  color     = "yellow",
  message   = [[<center>Button 3</center>]]
}, button_hBox_top) -- Child of button_hBox_top

button_3:setClickCallback("function_button_3")
-- End second row--

-- Third row --
button_hBox_bottom = Geyser.HBox({
  -- A horizontal box. See size/position comments above under button_vBox.
  --
  -- Underneath button_2 and button_3 (which are actually inside the invisible button_hBox_top)
  -- Will hold button_4 and button_5.

  name = "button_hBox_bottom",
  width = "100%",
}, button_vBox) -- Child of button_vBox

button_4 = Geyser.Label({
  -- Button 4.
  -- Child of button_hBox_bottom.
  -- Is on the left.

  name      = "button_4",
  fgColor   = "white",
  color     = "green",
  message   = [[<center>Button 4</center>]]
}, button_hBox_bottom) -- Child of button_hBox_bottom

button_4:setClickCallback("function_button_4")

button_5 = Geyser.Label({
  -- Button 5.
  -- Child of button_hBox_bottom.
  -- Is on the right.

  name      = "button_5",
  fgColor   = "white",
  color     = "blue",
  message   = [[<center>Button 5</center>]]
}, button_hBox_bottom) -- Child of button_hBox_bottom

button_5:setClickCallback("function_button_5")
-- End third row --

-- Fourth (final) row --
button_6 = Geyser.Label({
  -- Button 6.
  -- Bottom row.
  -- Just like Button 1, spans entire width of button_vBox.

  name      = "button_6",
  width     = "100%",
  fgColor   = "white",
  color     = "purple",
  message   = [[<center>Button 6</center>]]
}, button_vBox) -- Child of button_vBox

button_6:setClickCallback("function_button_6")
-- End fourth row.

-- Begin function declarations.
function function_button_1()
  doSomething(1)
end

function function_button_2()
  doSomething(2)
end

function function_button_3()
  doSomething(3)
end

function function_button_4()
  doSomething(4)
end

function function_button_5()
  doSomething(5)
end

function function_button_6()
  doSomething(6)
end

function doSomething( button_number )
  echo("\nYou pressed button number " .. button_number .. "!\n")
end
-- End function declarations.