TheoTown

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

...

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
    }
  }
}]

...