GUI example in Plugin Creator Tools

[Lobby]

The Plugin Creator Tool contains an example to present the GUI creation possibilities of using Lua in plugins.

Actually useful is this window that shows the Icon, Font and NinePatch resources that are available within the game. A tap on the "copy" button copies the code used to access something into the clipboard, e.g. "Icon.OK" for the ok icon.



Here you can see how various aspects of this tool were implemented :

Code: Select all    Reset

-- Show the menu with the close action closing the provided dialog
local function showMenu(dialog)
  local parent = GUI.get'$menuparent'
  GUI.createMenu{
    source = parent,
    actions = {
      {icon = Icon.OK, text = 'A', onClick = function() Debug.toast('yo') end},
      {icon = Icon.CANCEL, text = 'B', enabled = false},
      {},
      {icon = Icon.CLOSE, text = 'Close', onClick = dialog.close}
    }
  }
end


-- Show the dialog window that contains various GUI object usage examples
local function showObjectsDialog()
  local dialog = GUI.createDialog{
    icon = Icon.REGION_SPLIT,
    title = 'Objects',
    height = 240
  }
  local layout = dialog.content:addLayout{
    vertical = true
  }
  local function addLine(label, height)
    local line = layout:addLayout{height = height}
    line:addLabel{text = label, w = 60}
    return line:addLayout{ x = 62 }
  end

  local sliderValue = 0.5
  local buttonValue = 'B'

  local line = addLine('Icons:', 26)
  line:addIcon{icon=Icon.OK, w=26}
  line:addIcon{icon=Icon.CANCEL, w=26}
  line:addIcon{icon=Icon.CITY, w=26}
  line:getLastPart():addCanvas{
    x = -100,
    y = 10,
    h = 10,
    onDraw = function(self, x, y, w, h)
      Drawing.setColor(0, 80, 100)
      Drawing.drawNinePatch(NinePatch.PROGRESS_BAR, x, y, w, h)
      local progress = Runtime.getTime() / 1000 % 1
      if progress * w >= 10 then
        Drawing.drawNinePatch(NinePatch.PROGRESS_BAR_FILLED, x, y, progress * w, h)
      end
      Drawing.reset()
    end
  }

  local line = addLine('Buttons:', 26)
  line:addButton{
    icon = Icon.OK,
    text = 'Test',
    frameDefault = NinePatch.BLUE_BUTTON,
    framePressed = NinePatch.BLUE_BUTTON_PRESSED,
    width = line:getClientWidth() / 2 - 1,
    onClick = function(self) Debug.toast('cya') end
  }
  line:addButton{
    icon = Icon.CANCEL,
    text = 'Golden',
    width = line:getClientWidth() / 2 - 1,
    golden = true,
    onClick = function(self) Debug.toast('woah') end
  }

  local line = addLine('Button selection:', 26)
  local widthPerButton = (line:getClientWidth() - 3) / 3
  local function addSelectionButton(text, state)
    line:addButton{
      width = widthPerButton,
      text = text,
      onClick = function(self) buttonValue = state end,
      isPressed = function() return buttonValue == state end
    }
  end
  addSelectionButton('A', 'A')
  addSelectionButton('B', 'B')
  addSelectionButton('C', 'C')

  local line = addLine('Slider:', 26)
  line:addSlider{
    minValue = 0,
    maxValue = 1,
    setValue = function(v) sliderValue = v end,
    getValue = function() return sliderValue end
  }

  local line = addLine('Text field:', 26)
  local textField = line:addTextField{
    text = 'Hello World ',
    w = -40
  }
  line:addButton{
    w = 38,
    text = 'Show',
    onClick = function() Debug.toast('Input is: '..textField:getText()) end
  }

  local line = addLine('Text frame:', 40)
  line:addTextFrame{
    text = [[This is a long text
that can even span over multiple lines 
This will scroll
if it
is long enough.]]
  }
end



-- Show the resources list dialog window
local function showResourcesDialog()
  local function createIconPreview(parent, frame)
  end

  local dialog = GUI.createDialog{
    icon = Icon.DECORATION,
    title = 'Resources',
    width = 240,
    height = 300
  }
  local listBox = dialog.content:addListBox{}

  local function addItems(source, keys, sourceName, height, drawer)
    Array(keys):forEach(function(key)
      local item = source[key]
      local entry = listBox:addCanvas{h=height}
      local name = sourceName..'.'..key
      entry:addCanvas{
        w = height,
        onDraw = function(self, x, y, w, h)
          drawer(item, x, y, w, h)
        end
      }
      entry:addLabel{
        text = name,
        x = height + 5,
        w = -30
      }:setFont(Font.SMALL)
      entry:addButton{
        icon = Icon.COPY,
        x = -30,
        w = 26,
        onClick = function()
          Runtime.setClipboard(name)
          Debug.toast('Put '..name..' into clipboard')
        end
      }
    end)
  end

  addItems(Icon, Icon.keys, 'Icon', 26, function(item, x, y, w, h)
    Drawing.drawImage(item, x, y)
  end)

  addItems(NinePatch, NinePatch.keys, 'NinePatch', 26, function(item, x, y, w, h)
    Drawing.drawNinePatch(item, x, y, w, h)
  end)

  addItems(Font, Font.keys, 'Font', 26, function(item, x, y, w, h)
    Drawing.setColor(0, 0, 0)
    Drawing.drawText('Abc', x+w/2, y+h/2, item, 0.5, 0.5)
    Drawing.reset()
  end)
end



-- Show the main dialog window
local function showDialog()
  local dialog
  dialog = GUI.createDialog{
    icon = script:getDraft():getPreviewFrame(),
    title = 'GUI example',
    text = 'From here you have access to various examples.',
    width = 250,
    height = 120,
    actions = {
      {
        id = '$menuparent',
        icon = Icon.HAMBURGER,
        text = 'Menu',
        onClick = function() showMenu(dialog) end,
        autoClose = false
      },
      {
        icon = Icon.REGION_SPLIT,
        text = 'Objects',
        onClick = showObjectsDialog,
        autoClose = false
      },
      {
        icon = Icon.DECORATION,
        text = 'Resources',
        onClick = showResourcesDialog,
        autoClose = false
      }
    }
  }
  closeDialog = dialog.close
end

-- Rebuild dialog after code changes
function script:init()
  if closeDialog then
    closeDialog()
    closeDialog = nil
    showDialog()
  end
end

-- Let's cheat a little by closing the tool immediately after it was opened
function script:event(_, _, _, event)
  if event == Script.EVENT_TOOL_ENTER then
    GUI.get('cmdCloseTool'):click()
    showDialog()
  end
end

Interactive Lua editor

Run

Output: Select all

...

Here the plugin is of type tool and uses real-time scripting for testing purposes :

Code: Select all    Reset

[{
  "once":true,
  "id":"$devtool_showguiexample00",
  "type":"tool",
  "category":"$devtool_category00",
  "preview frames":[{"bmp":"guiicon.png"}],
  "title":"GUI preview",
  "text":"This tool provides an example for what can be done in regard to UI using Lua.",
  "script":"#LuaWrapper",
  "meta":{
    "luawrapper":{
    "script":"GUIExample.lua",
      "dev":true
    }
  }
}]

JSON checker

Check

Output: Select all

...

[MarioBitMap]

AMAZING!! I'd love trying to do a plug-in with some menus when I learn a little bit of complex Lua.

[Hadestia]

Can we use gui on building taps? As substitute to the onClick notif or its info itself