Dialog UI
Jester Dialog consists of a web-based frontend and offers an API exposed to Lua for modifying its content and reacting to actions.
Frontend
The frontend is a Pixi JS based website defined in
f-4e\ModFolders\Mods\aircraft\F-4E\UI\JesterDialog
Opening index.html
in a browser shows the dialog filled with example content.
The website can be edited freely, changes are visible after reloading DCS (SHIFT+R).
The UI logic, such as animations are defined in renderer.js
, while the
interactions are handled in main.js
.
interface.js
declares the base content of the dialog, as well as all methods
relevant for the C++ to JS communication.
The method hb_send_proxy
is used to send commands to C++, such as notifying it
that an action has been clicked.
Lua
Dialogs are shown on-demand and in-order. They are displayed for a certain time and the user is given a chance to engage in the dialog or ignore it - upon which it will expire and vanish.
A dialog consists of a question with up to 4 selectable options. An option is either final or triggers a follow-up question with new options to select from.
Dialogs are hold and shown from a queue. A new dialog can be pushed to the queue via:
Dialog.Push(dialog)
The following shows a simple example to add a new dialog:
local fuel_check_dialog = Dialog.Question:new({
name = "Jester",
content = "How is the fuel?",
phrase = "dialog/fuel_check",
label = "Fuel Check",
timing = Dialog.Timing:new({
question = s(5),
action = s(10),
}),
options = {
Dialog.Option:new({ response = "We are good", action = "fuel_good" }),
Dialog.Option:new({
response = "Fuel is low",
follow_up_question = Dialog.FollowUpQuestion:new({
name = "Jester",
content = "Okay, how do you want to proceed?",
phase = "dialog/fuel_low_proceed",
options = {
Dialog.Option:new({ response = "Remain on Mission" }),
Dialog.Option:new({ response = "RTB", action = "fuel_low_rtb" })
},
}),
})
},
})
Dialog.Push(fuel_check_dialog)
To react to a selected option, listen to the corresponding event:
ListenTo("fuel_low_rtb", function(task)
-- Component interface
task:Click("Nav Panel Function", "TARGET_1")
-- or Raw interface
task:Then(function()
ClickRaw(
devices.NavigationComputer_AN_ASN_46A,
device_commands.RIO_NAV_COMP_FUNCTION_SELECTOR_KNOB,
3,
5
) -- Target 1
end)
end)