• Vote in May Mapping Competition to select a winner!
  • There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

[How-to] Modal Windows

Evan

A splendid one to behold
Premium User
Joined
May 6, 2009
Messages
7,017
Best answers
1
Reaction score
954
Location
United States
Please note that this is only for TFS 1.0+ and Tibia version 9.7 or later.

Modal windows are windows that you can form by adding certain things to it like buttons, choice input, text.
Modal windows can be useful a large variety of things, all it requires is knowledge and creativity.

Click here for a list of all the ModalWindow functions

I'm not gonna go in-depth on modal windows, but I'm gonna give you an example with a play-by-play to show you how to properly work with modal windows. If you don't your server to crash, please follow this carefully.

Pick your free colored tapestry!



You need something that will trigger and send a modal window to the player.
In my example, I used a simple item. You can do it in any other way you want, this is purely for example.

Constructing the modal window and sending to player:


ModalWindow:sendToPlayer() only sends the window, when the window has been answered (press of button, etc) the onModalWindow() event in CreatureScripts will be triggered!
Keep in mind, the player has to have the event registered first before sending the modal window!

CreatureEvent onModalWindow():



Summary
  • You want to register the modal window CreatureEvent before sending it to the player or else the player will not receive anything
  • You want to unregister the modal window CreatureEvent when the player receives it. That way the player can receive the modal window cleanly and appropriately again in the future
  • Modal windows, buttons, and choices all have IDs that you need to define. This will allow you to check which modal window, which button, which choice the player has selected in onModalWindow()
  • Buttons and choices are all optional. You can have a modal window that only has buttons. You can even have 4 buttons instead of 2 (4 is maximum though). It's pretty darn flexible.
  • The setDefaultEnter/EscapeButton(id) takes only 1 parameter, the id of the button
    • setDefaultEnterButton triggered when double-clicking or Enter key pressed
    • setDefaultEscapeButton triggered when Escape key pressed
  • Be creative! Modal windows have opened up a lot of opportunities for developers to create!
 
OP
Evan

Evan

A splendid one to behold
Premium User
Joined
May 6, 2009
Messages
7,017
Best answers
1
Reaction score
954
Location
United States
Copy-able code from above:

Code:
function onUse(player, item, fromPosition, itemEx, toPosition, isHotkey)
    player:registerEvent("ModalWindow_Tutorial")
  
    local title = "Pick your favorite color!"
    local message = "You get a free tapestry in the color of your choice!"
  
    local window = ModalWindow(1000, title, message)

    window:addButton(100, "Confirm")
    window:addButton(101, "Cancel")
  
    window:addChoice(1, "Red")
    window:addChoice(2, "Orange")
    window:addChoice(3, "Yellow")
    window:addChoice(4, "Green")
    window:addChoice(5, "Blue")
    window:addChoice(6, "Purple")
  
    window:setDefaultEnterButton(100)
    window:setDefaultEscapeButton(101)
  
    window:sendToPlayer(player)
    return true
end
Code:
function onModalWindow(player, modalWindowId, buttonId, choiceId)  
    player:unregisterEvent("ModalWindow_Tutorial")
    local tapestry = {1869, 1866, 1863, 1860, 1872, 1857}
  
    if modalWindowId == 1000 then
        if buttonId == 100 then
            player:addItem(tapestry[choiceId], 1)
        end
    end
end
 

Colors

Joined
Mar 22, 2013
Messages
935
Best answers
3
Reaction score
253
Nice tutorial but I have a stupid question; When I add more than 2 buttons they mess up the order, is there a way to avoid this? o_O
 
OP
Evan

Evan

A splendid one to behold
Premium User
Joined
May 6, 2009
Messages
7,017
Best answers
1
Reaction score
954
Location
United States
It's a client-sided issue, unfortunately. But there's a way around it.
The buttons are ordered in the client in a specific way. It's ordered by how the buttons are added in code.
  • So, when you add the first button to modal window, it'll be placed third from the left in the client.
  • Then when you add the second button, it'll be placed in the last spot from the left.
  • Third button added to modal window will place it second from the left.
  • The fourth and final button added to the modal window will be placed first from the left in the client.
Code:
window:addButton(100, "THIRD")
window:addButton(101, "LAST")
window:addButton(102, "SECOND")
window:addButton(103, "FIRST")
 

Colors

Joined
Mar 22, 2013
Messages
935
Best answers
3
Reaction score
253
Thanks! I didn't know that the client worked in that way, I thought that was a problem with my code or something.
 

Lucian

Active Member
Joined
Nov 11, 2014
Messages
184
Best answers
0
Reaction score
26
Location
None Has Gone Before.
OMG ... !!! :D
I got two feels,
First :- It's awesome TUTORIAL i have learned it successfully, Thank You.
Second :- It's a bad news that it doesn/'t exist in 860 ( TFS 0.3.6 )
 
Last edited:

imkingran

Learning everyday.
Premium User
Joined
Jan 15, 2014
Messages
1,268
Best answers
21
Reaction score
393
This tutorial was very easy to follow and understand. The time spent on creating the images with the arrows explaining things was much appreciated.

That was a great help, thanks! :)
 

woeterman94

Inventor
Joined
Oct 2, 2008
Messages
49
Best answers
0
Reaction score
3
Location
Belgium
Can you tell me where I should place the onModalWindow code?
Code:
function onModalWindow(player, modalWindowId, buttonId, choiceId)
    player:unregisterEvent("ModalWindow_Tutorial")
    local tapestry = {1869, 1866, 1863, 1860, 1872, 1857}

    if modalWindowId == 1000 then
        if buttonId == 100 then
            player:addItem(tapestry[choiceId], 1)
        end
    end
end
Is it in the creaturescripts folder?
And what type is it?

Like this?
Code:
<event type="ModalWindow" name="ModalWindow_Tutorial" script="ModalWindow_Tutorial"/>
 

imkingran

Learning everyday.
Premium User
Joined
Jan 15, 2014
Messages
1,268
Best answers
21
Reaction score
393
Can you tell me where I should place the onModalWindow code?
Code:
function onModalWindow(player, modalWindowId, buttonId, choiceId)
    player:unregisterEvent("ModalWindow_Tutorial")
    local tapestry = {1869, 1866, 1863, 1860, 1872, 1857}

    if modalWindowId == 1000 then
        if buttonId == 100 then
            player:addItem(tapestry[choiceId], 1)
        end
    end
end
Is it in the creaturescripts folder?
And what type is it?

Like this?
Code:
<event type="ModalWindow" name="ModalWindow_Tutorial" script="ModalWindow_Tutorial"/>
Yes it goes in data/creaturescripts and then in creaturescripts.xml you would register it like this:
Code:
<event type="ModalWindow" name="ModalWindow_Tutorial" script="the_script_name.lua"/>
 

woeterman94

Inventor
Joined
Oct 2, 2008
Messages
49
Best answers
0
Reaction score
3
Location
Belgium
Yes it goes in data/creaturescripts and then in creaturescripts.xml you would register it like this:
Code:
<event type="ModalWindow" name="ModalWindow_Tutorial" script="the_script_name.lua"/>
Thanks!

I had to add this before it worked (because I used it in a rune )
Code:
local player = Player(cid)
 

silveralol

Advanced OT User
Joined
Mar 16, 2010
Messages
1,461
Best answers
8
Reaction score
189
well, how I can remove the item in creaturescripts? I want that the item will be removed if use in BP or on the ground...
but how I can remove the item like that?
without if player:getItem ...
 

Mokerhamer

Retired Global Mod
Joined
Aug 6, 2007
Messages
1,767
Best answers
0
Reaction score
35

Mokerhamer

Retired Global Mod
Joined
Aug 6, 2007
Messages
1,767
Best answers
0
Reaction score
35
doRemoveItem(getTileItemById(Position(0, 0, 0), 15030).uid,1)
 

Derlexy

Active Member
Joined
Jun 29, 2011
Messages
150
Best answers
0
Reaction score
43
Is possible to add images in the modal window???
 
Top