I would like to display a UI Toolkit GUI on two displays at the same time.
According to this thread, it is not possible to display the same UI on different displays simultaneously (?).
Basically, I would like the UI to be visible on display 2 but be able to focus elements of it on display 1 (I also have another UI document just for display 1; moving the mouse back and forth between the two displays for focus would be cumbersome).
I only need two text fields, can I create two UI Documents with the same source asset and different panel settings outputting to different displays and somehow bind the changes made to the text fields on one display to the respective text fields on the other display?
You can manually handle blur/focus/navigation events to link the focus through both display.
Another option would be to have a single panel rendered to a texture and displayed on both display. I know the rendering part would work but input event are dispatched by display and I am not sure we have something to receive from multiples display at the same time, especially with my limited knowledge of the new input system.
Mirroring 2 separate UI would not work as the pseudo style will probably not be synchronized.
Thanks!
Since the UI on the first display is basically a dev UI, and all I really need from the second display is to just show the text entered through the first (I can live without text cursor/selection etc.), I’m now doing it this way:
Have two independent UIs (separate UXMLs, separate panel settings targeting display 1/2 and separate UI Documents), both containing two text fields
Register InputEvent callbacks on the text fields from the first UI and make them update the text values in the second UI:
var leftTextField = firstDisplayUIDoc.rootVisualElement.Q<TextField>("text-field-left");
var rightTextField = firstDisplayUIDoc.rootVisualElement.Q<TextField>("text-field-right");
var leftTextField2 = secondDisplayUIDoc.rootVisualElement.Q<TextField>("text-field-left");
var rightTextField2 = secondDisplayUIDoc.rootVisualElement.Q<TextField>("text-field-right");
leftTextField.RegisterCallback<InputEvent>(evt => leftTextField2.value = evt.newData);
rightTextField.RegisterCallback<InputEvent>(evt => rightTextField2.value = evt.newData);