GUI Compendium

[Lobby]

image.png

I see there are two listboxes created here. So my assumption is the first one is the one seen in your image while the second one will actually be populated with entries.

[Yakka Works]

Screenshot_2021-11-22-17-37-22-475_info.flowersoft.theotown.theotown.jpg

Still doesn't show up

Code: Select all    Reset

--Show the test dialong
local function showitptestdialog()
  local function createIconPreview(parent, frame)
  end

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

  local entry = listBox:addCanvas{h=30}
      entry:addLabel{
        text = 'TestTest',
        x = height + 5,
        w = -30
      }:setFont(Font.SMALL)
  local lbl = entry:addLabel{
    text = 'Terima Kasih Kepada:',
    width = -30
  }
  local cmd = entry:addButton{
    x = -35,
    width = 30,
    icon = Icon.OK,
    onClick = function()
      Debug.toast('Clicked on entry '..i)
    end
  }
end
--GUI Example plugin

-- 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 Credits list dialog window
local function showcreditsDialog()
  local dialog = GUI.createDialog{
    icon = Icon.PEOPLE_OFFICEWORKER,
    title = 'Credits',
    text = [[Credits
Kiki012,Kingtut101,Matthew Fillbert,Akunbaru123,Pederont,mdk_813,
theotheorich,lobbydivinus,and justanyone
Non Forum Member
Chris (Discord),and Alan (FTTI)

License CC BY
]],
    height = 250,
    width =250
  }
end
--Show the info Menu
local function showinfoMenu(dialog)
  local parent = GUI.get'$menuparent'
  GUI.createMenu{
    source = parent,
    actions = {
      {
        icon = Icon.COPY,
        text = 'Discord',
        onClick = function()
          Runtime.setClipboard('https://discord.gg/UEDRUnFbEJ')
          Debug.toast('Put the Discord invite link into clipboard')
        end,
        autoClose = false
      },
      {
        icon = Icon.COPY,
        text = 'Whatsapp (indonesian Only)',
        onClick = function()
          Runtime.setClipboard('https://chat.whatsapp.com/Bv4EIv7Jvjb8ViXeSJK0WS')
          Debug.toast('Link Grup Tersimpan di Clipboard')
        end,
        autoClose = false
      },
      {
        icon = Icon.COPY,
        text = 'Website',
        onClick = function()
          Runtime.setClipboard('https://kiki012184.github.io/K012-Theot ... lugin.html')
          Debug.toast('Put the website link into clipboard')
        end,
        autoClose = false
      }
    }
  }
end
--https://kiki012184.github.io/K012-Theot ... lugin.html
-- Show the main dialog window
local function showDialog()
  local dialog
  dialog = GUI.createDialog{
    icon = Icon.INFO,
    title = 'Plugin Manual',
    text = [[Welcome to Indonesia Transportation Pack!
This plugin add New Content Related to Transportation in Indonesia.

You can unlock the road section if your city have enough ranks.

Unlocking Train is bit more complicated,you need station headmaster house first,then it time for your decision,either unlocking local made trains,you just need to build an train factory,or imported trains,by building dedicated port,most of Indonesian train are imported.

Sadly, some features are limited,And Some Bugged.

There Are Patch or addon for this plugin such as normal rail compability,remove roads,and much more,click more info and get the link to my website.

if  you got a bug or a problem, or have an idea, please post it in comments.

to be honest being an plugin creator is hard,especialy managing an huge plugin like this.]],
    width = 250,
    height = 400,
    actions = {
      {
        icon = Icon.PEOPLE_OFFICEWORKER,
        text = 'Credits',
        onClick = showcreditsDialog,
        autoClose = false
      },
      {
        id = '$menuparent',
        icon = Icon.INFO,
        text = 'More Info',
        onClick = function() showinfoMenu(dialog) end,
        autoClose = false
      },
      {
        icon = Icon.PEOPLE_OFFICEWORKER,
        text = 'Test',
        onClick = showitptestdialog,
        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

Lua editor

Run

Output: Select all

...

[Lobby]

Did you use "strict lua":true in your json? I assume the script crashed, eg. in line 17 height is not defined.

[Wepf]

I guess it actually a time to put my brain in garbage incerator

[Yakka Works]

Is there a way to add translation on custom gui,
I mean i want GUI A text and title translated into English and indonesian.

[Marvel]

<the original post>

Ok So where we need to place the file are iys need json or something like that?

[erksmit]

Is there a way to create a panel with a diffrent ninepatch? Currently i am simply using a canvas with onDraw but i was wondering whether panels support it out of the box

[Guest]

See above me

It isn't possible

[Guest]

Click ↑ or scroll up

https://doc.theotown.com/modules/TheoTo ... lateInline

[erksmit]

See above me

It isn't possible

Why isn't it possible.

[erksmit]

Can i pass a ninepatch to use when creating a panel object? The examples don't include any mention of this.

[erksmit]

Chief this is false information that does not work, please test it before giving me an incorrect answer.

20230209161553_1.jpg

As you can see it does not change the background whatsoever, it will still be the default panel.

[NotPFA]

‎@erksmit^[Posts][PM]@JustAnyone^[Posts][PM]Go ask on discord then

[erksmit]

its no matter, i will just draw the ninepatch

[Armin Hpj]

Thanks!

Although it's kind of a hack you can actually get the GUI object of the dialog window by calling dialog.content:getParent()

Here's how it would look like to add a color to a dialog:

Code: Select all    Reset

local function decorateDialog(dialog)
  local panelRoot = dialog.content:getParent()
  local pl, pt, pr, pb = panelRoot:getPadding()   -- Extract padding information to place overlay panel correctly

  local panelOverlay = panelRoot:addPanel{onDraw = function(self, x, y, w, h)
    Drawing.setColor(100, 255, 200)
    Drawing.drawNinePatch(NinePatch.PANEL, x, y, w, h)  -- Here the drawing of the overlay happens
  end}
  
  panelOverlay:setChildIndex(1)                   -- Ensure that the overlay is drawn directly on top of the window before other stuff
  panelOverlay:setPosition(-pl, -pt)
  panelOverlay:setSize(panelOverlay:getWidth()+pl+pr, panelOverlay:getHeight()+pt+pb)
end

function script:buildCityGUI()
    local dialog = GUI.createDialog{
    icon = Icon.SETTINGS,
    title = 'Title',
    text = 'Text',
    width = 180,
    height = 100,
    closable = true,
    pause = true,
    actions = {
      {icon = Icon.CANCEL, text = Translation.control_cancel},
      {icon = Icon.OK, text = Translation.control_ok, golden = true}
    }
  }

  decorateDialog(dialog)
end

Lua editor

Run

Output: Select all

...

The result:
image.png

width and height write a 1000, lock, that is a full dialog

[Armin Hpj]

allow click tool to open dialog

lock at this lua script

Code: Select all    Reset

local function dialog()
    local dialog = GUI.createDialog{
    icon = Icon.SETTINGS,
    title = 'Title',
    text = 'Text',
    width = 1000,
    height = 1000,
    closable = true,
    pause = true,
    actions = {
      {icon = Icon.CANCEL, text = Translation.control_cancel},
      {icon = Icon.OK, text = Translation.control_ok, golden = true}
    }
  }
end

function script:event(_, _, _, event)
  if event == Script.EVENT_TOOL_ENTER then
    GUI.get('cmdCloseTool'):click()
    dialog()
  end
end

Lua editor

Run

Output: Select all

...

[Syn]

Have a question if I basically want to overhaul the game main GUI does that mean I basically code it by myself from scratch like say I need to rebuild it myself, because if yes then the project is scrapped before it even began