Close

Privacy policy

Follow us

https://www.instagram.com/touchdesigner/
https://www.facebook.com/TouchDesigner
https://twitter.com/1null1
https://www.youtube.com/TouchDesignerOfficial
All
User Guide
Forum
Tutorials
Events & Workshops
Features
Community
Showcase
Resources
  1. Home
  2. Palette:windowCanvas

    Palette:windowCanvas

    (Work-in-Progress)

    This customized Window Component lets you easily place TOPs and panels in a single window spanning across multiple output monitors/projectors. You place one TOP or panel per monitor/projector. You don't have to mess with screen coordinates or adapt to changing layouts and resolutions.

    It assumes you author your networks in TouchDesigner on what your operating system calls your "primary" monitor, which is what we designate as Monitor 1 in windowCanvas.

    A key feature of windowCanvas is that you can continuously show your audience content (TOPs or panels) on monitors 2, 3, 4... whether you are are in Designer Mode or Perform Mode - it's totally seamless when you flip back and forth between Designer Mode and Perform ModeE (F1 and Esc keys), your content will stay up on the monitors without interruption, so your audience won't notice you making on-the-spot changes to your networks or operating system.

    In addition, the mapping of content to monitor is persistent - if you unplug / plug in monitors or restart because the content is mapped to a display using the display's (supposedly) unique serial number.

    Procedure

    Attach at least one extra monitor/projector. On Windows, right-click on desktop -> Display Settings (tbd macOS). Make sure you have Extend Displays on (Windows) or Mirror off (macOS). Note which monitor is your "primary monitor".

    On windowCanvas, click the Open Helper parameter. The Schematic of Desktop shows your monitor layout, including display type and unique serial numbers.

    What we are calling Canvas Monitor 1 is your "primary monitor", which is the monitor you use for editing networks in Designer Mode, and optionally a control panel when you are in Perform Mode. (Monitor 1 in windowCanvas is not necessarily Windows/macOS monitor 1, ignore the OS numbering.)

    Setting Up your Audience Monitors

    For Monitor 2, using the Schematic of Desktop, determine what the serial number and name of the monitor is that you want to use as Monitor 2, and select the serial number from the menu of the parameter "Serial Number 2".

    Then drag-Drop a TOP or panel onto the parameter "TOP/Panel for Monitor 2".

    If you are using a third monitor, choose the serial number for Monitor 3, and drag-drop a TOP/panel onto "TOP/Panel for Monitor 3". Make sure the Enable for Monitor 3 is on. Same thing for Monitor 4.

    Click "Open Window for Designer Mode". See your output(s) on Monitor 2, 3 and 4. This is your monitor configuration for monitor 2+ while you are in Designer Mode editing networks on Monitor 1.

    Setting Up your Primary Monitor for Perform Mode

    When you go into Perform Mode, the primary monitor, Monitor 1, can contain a panel or TOP of your choice. A grey panel (./testPanel) with one slider is a stand-in panel. ("primary monitor" in Microsoft Windows terms)

    Drag-Drop your desired panel onto the parameter "TOP/Panel for Monitor 1" that you would want in Perform Mode.

    Press the F1 key to go into Perform Mode, See output on all your selected displays. If your monitor 1 is a panel, you can operate it.

    Press Esc to get back to Designer Mode. Note the images on Monitor2 etc persist.

    Once you are happy with the appearance of monitors 2, 3 and 4, click the parameter "Make This be Perform Window". (It will make this Window component be the one TouchDesigner uses when you go into Perform Mode.)

    Now you can flip between Perform Mode and Designer Mode, and your Monitor 1 onward will keep the same content up without interruption.

    To help verify things, click Open Helper again and change its menu to see a preview of the Perform Mode window, the Designer Mode window, and a screen grab of your entire desktop as a reference.

    Notes

    Using serial numbers for monitors ensures you get the content you want on the screen/projector you want even when you plug in/disconnect/power-up monitors in random order. The operating system does not give you a consistent 1 2 3....

    IMPORTANT: The bounding box of Monitors 2, 3 and 4 (those that are enabled) must not overlap with Monitor 1.

    Change the Helper Content menu to Perform Layout. This is what you will see when you go into Perform Mode.

    Change the Helper Content menu to Designer Layout. This is what you will see in Designer Mode (you are in Designer Mode now) when you follow the next step.

    Adjust the parameter Identify TOP Outputs to verify monitor output 1.

    Clicking "Make This be Perform Window" is the same as going to Dialogs -> Window Placement and making this windowCanvas Component be the Perform Mode component (left checkbox).

    Optionally bring this Window COMP's parameters up in a floating Window.

    Expert tip: You can add more monitors by copying/pasting the custom parameters for Monitor 2 in the Component Editor.)

    Note that with a splitter like Datapath FX4, you will have to combine 4 images into 1 "monitor".

    current issues

    • may need to split the window for macOS into 1 per monitor.
    • Identify Outputs grid for Panels too (currently TOPs only).
    • Window COMP should have Viewer control i.e. input any image/panel in the viewer (sw rfe).
    • Show resolutions and positions of displays as overlay.
    • Handle case where primary is DPI-scaled and secondaries are not.