GUI example in Plugin Creator Tools

The Lua scripting language allows you to give your plugin more advanced features.

Moderator: Plugin Moderators

User avatar
Lobby
Developer
Reactions:
Posts: 3593
Joined: Sun Oct 26, 2008 12:34
Plugins: Show
Version: Beta

Platform

GUI example in Plugin Creator Tools

#1

Post by Lobby »

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


image.png
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 :lua: :

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 :P 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


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

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
=^._.^= ∫

MarioBitMap
Villager
Reactions:
Posts: 16
Joined: Fri Jul 31, 2020 22:54
Location: Spain
Plugins: Show
Version: Beta

Plugin Creator

Platform

Re: GUI example in Plugin Creator Tools

#2

Post by MarioBitMap »

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

Code: Select all    Reset

[ { "id":"MarioBitMap", "category":"Plugin_Creator", "skills":[{"skill":"Pixel_Artist"},{"skill":"Learning_C++_&_TTJson/Lua"}] } ]
JSON checker
Check

User avatar
rjroldan1
Inhabitant of a Megalopolis
Reactions:
Posts: 592
Joined: Mon Jul 17, 2017 16:16
Location: Antipolo, Philippines
Plugins: Show
Contact:

Platform

Plugin Creator

Re: GUI example in Plugin Creator Tools

#3

Post by rjroldan1 »

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

Theotown Philippine Corporation
╔═╗─────────────╔╗────────
║╬║─╔╗╔╦╗╔═╗╔╗─╔╝║╔═╗─╔═╦╗
║╗╣─╠╣║╔╝║╬║║╚╗║╬║║╬╚╗║║║║
╚╩╝╔╝║╚╝─╚═╝╚═╝╚═╝╚══╝╚╩═╝
───╚═╝────────────────────

Post Reply Previous topicNext topic

Return to “Lua Scripting”