Building GUIs With Fusion's UI Manager

User avatar
AndrewHazelden
Fusionator
Posts: 1382
Joined: Fri Apr 03, 2015 3:20 pm
Answers: 4
Location: West Dover, Nova Scotia, Canada
Been thanked: 58 times
Contact:

About Dialog

#31

Post by AndrewHazelden » Fri Sep 15, 2017 6:50 pm

Overview:
This script is a Fusion Lua based UI Manager window creation example that works in Fusion 8.2.1 and Fusion 9. It uses two custom functions named MainWindow() and AboutWindow() to create multiple windows inside the same script.

This script also shows an example of how a ui:Label element can include a clickable link by adding the "OpenExternalLinks = true," tag to the ui:Label(), along with an HTML formatted "A href" based link as part of the label's text.

Installation:
Copy the "About Dialog.lua" script into your Fusion user preferences "Scripts/Comp/" folder.

Usage:
Step 1. In Fusion you can run the script by selecting the "Script > About Dialog" menu item.

Step 2. A main window will be displayed. Click on the "Show the About Dialog" button.
ui-manager-main-window.png
Step 3. A new "About Dialog" window will appear. You can click on webpage and email links in this window and the external URLs will be loaded in your default webbrowser / email programs.
ui-manager-about-dialog.png
Download:
Code: [Select all] [Expand/Collapse] [Download] (aboutdialog.lua)
  1. --[[
  2. About Dialog v1.0 - 2017-09-15 10.37 PM
  3.  
  4. Overview:
  5. This script is a Fusion Lua based UI Manager window creation example that works in Fusion 8.2.1 and Fusion 9. It uses two custom functions named MainWindow() and AboutWindow() to create multiple windows inside the same script.
  6.  
  7. This script also shows an example of how a ui:Label element can include a clickable link by adding the "OpenExternalLinks = true," tag to the ui:Label(), along with an HTML formatted "A href" based link as part of the label's text.
  8.  
  9. Installation:
  10. Copy the "About Dialog.lua" script into your Fusion user preferences "Scripts/Comp/" folder.
  11.  
  12. Usage:
  13. Step 1. In Fusion you can run the script by selecting the "Script > About Dialog" menu item.
  14.  
  15. Step 2. A main window will be displayed. Click on the "Show the About Dialog" button.
  16.  
  17. Step 3. A new "About Dialog" window will appear. You can click on webpage and email links in this window and the external URLs will be loaded in your default webbrowser / email programs.
  18.  
  19. ]]
  20.  
  21. local ui = fu.UIManager
  22. local disp = bmd.UIDispatcher(ui)
  23.  
  24. -- Create an "About Window" dialog
  25. function AboutWindow()
  26.   local URL = 'http://www.andrewhazelden.com/blog/'
  27.    
  28.   local width,height = 500,250
  29.   win = disp:AddWindow({
  30.     ID = "AboutWin",
  31.     WindowTitle = 'About Dialog',
  32.     WindowFlags = {Window = true, WindowStaysOnTopHint = true},
  33.     Geometry = {200, 200, width, height},
  34.  
  35.     ui:VGroup{
  36.       ID = 'root',
  37.       -- Add your GUI elements here:
  38.       ui:TextEdit{ID = 'AboutText', ReadOnly = true, Alignment = {AlignHCenter = true, AlignTop = true}, HTML = '<h1>About Dialog</h1>\n<p>Version 1.0 - September 15, 2017</p>\n<p>This dialog can be used to share details about a Fusion script and the people who created it. The two links in this dialog window are clickable with external internet based URLs. :-) <p>\n<p>Copyright &copy; 2017 Andrew Hazelden.</p>'},
  39.      
  40.       ui:VGroup{
  41.         Weight = 0,
  42.  
  43.         ui:Label{
  44.           ID = "URL",
  45.           Text = 'Web: <a href="' .. URL .. '">' .. URL .. '</a>',
  46.           Alignment = {AlignHCenter = true, AlignTop = true},
  47.           WordWrap = true,
  48.           OpenExternalLinks = true,},
  49.    
  50.         ui:Label{
  51.           ID = "EMAIL",
  52.           Text = 'Email: <a href="' .. 'mailto:andrew@andrewhazelden.com?subject=Free Cookies&body=Hi. Please send me the box of free cookies to go with my initial order of Fusion collectables.\n\nRegards,\nFusey McFuseface' .. '">' .. 'andrew@andrewhazelden.com' .. '</a>',
  53.           Alignment = {AlignHCenter = true, AlignTop = true},
  54.           WordWrap = true,
  55.           OpenExternalLinks = true,},
  56.       },
  57.     },
  58.   })
  59.  
  60.   -- Add your GUI element based event functions here:
  61.   itm = win:GetItems()
  62.  
  63.   -- The window was closed
  64.   function win.On.AboutWin.Close(ev)
  65.     disp:ExitLoop()
  66.   end
  67.  
  68.   win:Show()
  69.   disp:RunLoop()
  70.   win:Hide()
  71.  
  72.   return win,win:GetItems()
  73. end
  74.  
  75.  
  76. -- Create a window
  77. function MainWindow()
  78.   local width,height = 800,600
  79.   win = disp:AddWindow({
  80.     ID = "MainWin",
  81.     WindowTitle = 'Main Window',
  82.     Geometry = {0, 0, width, height},
  83.     Spacing = 10,
  84.     Margin = 20,
  85.    
  86.     ui:VGroup{
  87.       ID = 'root',
  88.       -- Add your GUI elements here:
  89.      
  90.       -- Add a spacer
  91.       ui:VGap(0, 1.0),
  92.      
  93.       ui:VGroup{
  94.         Weight = 1,
  95.         ui:Button{ID = 'AboutDialogButton', Text = 'Show the About Dialog'},
  96.       },
  97.      
  98.       -- Add a spacer
  99.       ui:VGap(0, 1.0),
  100.     },
  101.   })
  102.  
  103.   -- Add your GUI element based event functions here:
  104.   itm = win:GetItems()
  105.  
  106.   -- The window was closed
  107.   function win.On.MainWin.Close(ev)
  108.     disp:ExitLoop()
  109.   end
  110.  
  111.   -- The "Show the About Dialog" button was clicked
  112.   function win.On.AboutDialogButton.Clicked(ev)
  113.     -- Close the current main window
  114.     win:Hide()
  115.    
  116.     -- Display an "About dialog" window
  117.     AboutWindow()
  118.   end
  119.  
  120.   win:Show()
  121.   disp:RunLoop()
  122.   win:Hide()
  123.  
  124.   return win,win:GetItems()
  125. end
  126.  
  127. -- Create a window
  128. MainWindow()
You do not have the required permissions to view the files attached to this post.

Tags:

User avatar
AndrewHazelden
Fusionator
Posts: 1382
Joined: Fri Apr 03, 2015 3:20 pm
Answers: 4
Location: West Dover, Nova Scotia, Canada
Been thanked: 58 times
Contact:

Fusion Composite Viewer

#32

Post by AndrewHazelden » Mon Sep 18, 2017 3:54 am

Overview:
This script works in Fusion 9.0.1 and allows you to quickly view a syntax highlighted version of the active Fusion composite in a UI Manager based view.

Download
Fusion Composite Viewer.lua
Screenshot
Fusion Composite Viewer.png
Installation:
Copy this script to your Fusion 9.0.1+ user preferences "Scripts/Comp/" folder.

Usage:
Step 1. Save your Fusion composite to disk.

Step 2. Select the Script > Fusion Composite Viewer menu item. This will open a copy of the current Fusion composite in a syntax highlighted text view.

Step 3. After the "Fusion Composite Viewer" window is open, any time you re-save your Fusion .comp file in Fusion's GUI the contents will be updated automatically in the viewer window.
You do not have the required permissions to view the files attached to this post.

User avatar
AndrewHazelden
Fusionator
Posts: 1382
Joined: Fri Apr 03, 2015 3:20 pm
Answers: 4
Location: West Dover, Nova Scotia, Canada
Been thanked: 58 times
Contact:

UI Manager Based Open File and Folder Dialogs

#33

Post by AndrewHazelden » Tue Sep 19, 2017 7:24 am

Fusion 9.0.1+ has added a pair of new file/folder requester functions that open a file dialog. These UI elements work nicely at replacing the final AskDialog features of the FileBrowse and PathBrowse tags so you can build a 100% UI Manager based GUI in Fusion for your pipeline tools. :buttrock:

Edit: The Fusion 9.0.2 release has improved the reliability of the fu:RequestFile() / fu:RequestDir() functions on MacOS/Linux/Win.

To help guide the artist who is running your script, you can provide the default starting path for the file dialogs as a string when you call either the fu:RequestFile() or fu:RequestDir() functions.

Open File Dialog Example:

Code: Select all

-- Show an "Open File" dialog
selectedFile = fu:RequestFile('Brushes:/smile.tga')
print('[File] ', selectedFile)
Open Folder dialog Example:

Code: Select all

-- Show an "Open Folder" dialog
selectedFolder = fu:RequestDir('Scripts:/Comp')
print('[Folder] ', selectedFolder)
FileDialogs Example

The "FileDialogs.lua" script uses a pair of buttons to open folder and file requester dialogs. The filepaths that you selected in the file dialogs are written into ui:Label text elements in the window.
ui-manager-file-dialogs.png
Code: [Select all] [Expand/Collapse] [Download] (FileDialogs.lua)
  1. -- File Dialogs.lua - v1 2017-09-19 11.14 AM
  2. -- by Andrew Hazelden <andrew@andrewhazelden.com>
  3. -- http://www.andrewhazelden.com
  4.  
  5. -- Builds a GUI that uses the Fusion 9.0.1+ UI Manager based "Open File" and "Open Folder" dialogs
  6.  
  7. local ui = fu.UIManager
  8. local disp = bmd.UIDispatcher(ui)
  9. local width,height = 1024,200
  10.  
  11. win = disp:AddWindow({
  12.   ID = 'MyWin',
  13.   WindowTitle = 'Open File and Folder Dialogs',
  14.   Geometry = {100, 100, width, height},
  15.   Spacing = 10,
  16.   Margin = 50,
  17.        
  18.   ui:VGroup{
  19.     ID = 'root',
  20.     Weight = 1,
  21.     -- Add your GUI elements here:
  22.    
  23.     -- Open File
  24.     ui:HGroup{
  25.       ui:Label{
  26.         ID = 'FileLabel',
  27.         Text = 'File:',
  28.         Weight = 0.25,
  29.       },
  30.      
  31.       ui:Label{
  32.         ID='FileTxt',
  33.         Text = 'Please Enter a file path.',
  34.         Weight = 1.5,
  35.       },
  36.      
  37.       ui:Button{
  38.         ID = 'FileButton',
  39.         Text = 'Select a File',
  40.         Weight = 0.25,
  41.       },
  42.     },
  43.    
  44.     -- Open Folder
  45.     ui:HGroup{
  46.       ui:Label{
  47.         ID = 'FolderLabel',
  48.         Text = 'Folder:',
  49.         Weight = 0.25,
  50.       },
  51.      
  52.       ui:Label{
  53.         ID='FolderTxt',
  54.         Text = 'Please Enter a folder path.',
  55.         Weight = 1.5,
  56.       },
  57.      
  58.       ui:Button{
  59.         ID = 'FolderButton',
  60.         Text = 'Select a Folder',
  61.         Weight = 0.25,
  62.       },
  63.     },
  64.   },
  65. })
  66.  
  67. -- Add your GUI element based event functions here:
  68. itm = win:GetItems()
  69.  
  70. -- The window was closed
  71. function win.On.MyWin.Close(ev)
  72.   disp:ExitLoop()
  73. end
  74.  
  75. -- The Open File button was clicked
  76. function win.On.FileButton.Clicked(ev)
  77.   print('Open File Button Clicked')
  78.   selectedPath = tostring(fu:RequestFile('Brushes:/smile.tga'))
  79.  
  80.   print('[File] ', selectedPath)
  81.   itm.FileTxt.Text = selectedPath
  82. end
  83.  
  84. -- The Open Folder button was clicked
  85. function win.On.FolderButton.Clicked(ev)
  86.   print('Open Folder Button Clicked')
  87.   selectedPath = tostring(fu:RequestDir('Scripts:/Comp'))
  88.  
  89.   print('[Folder] ', selectedPath)
  90.   itm.FolderTxt.Text = selectedPath
  91. end
  92.  
  93. win:Show()
  94. disp:RunLoop()
  95. win:Hide()
You do not have the required permissions to view the files attached to this post.

User avatar
miaz3
Fusioneer
Posts: 209
Joined: Sat Jan 03, 2015 1:43 am
Location: Angoulême / France
Been thanked: 2 times
Contact:

Re: Building GUIs With Fusion's UI Manager

#34

Post by miaz3 » Tue Sep 19, 2017 11:23 am

hello,

When i clic (folder or dir), Fu crash...

User avatar
miaz3
Fusioneer
Posts: 209
Joined: Sat Jan 03, 2015 1:43 am
Location: Angoulême / France
Been thanked: 2 times
Contact:

Re: Building GUIs With Fusion's UI Manager

#35

Post by miaz3 » Tue Sep 19, 2017 11:27 am

Strange...'fu:RequestFile('Brushes:/smile.tga' crash Fu. When i remove path its working :s
(fu:RequestDir('Scripts:/Comp') crash Fu anyway...


Strange, its working on half...mostly crashed, but 1 or 2 time been working.

User avatar
AndrewHazelden
Fusionator
Posts: 1382
Joined: Fri Apr 03, 2015 3:20 pm
Answers: 4
Location: West Dover, Nova Scotia, Canada
Been thanked: 58 times
Contact:

Re: Building GUIs With Fusion's UI Manager

#36

Post by AndrewHazelden » Tue Sep 19, 2017 1:17 pm

miaz3 wrote:Strange...'fu:RequestFile('Brushes:/smile.tga' crash Fu. When i remove path its working :s
(fu:RequestDir('Scripts:/Comp') crash Fu anyway...


Strange, its working on half...mostly crashed, but 1 or 2 time been working.
Yeah. It can be a bit hit and miss with the file dialog functions in Fusion 9.0.1 with the occasional random crash.

User avatar
miaz3
Fusioneer
Posts: 209
Joined: Sat Jan 03, 2015 1:43 am
Location: Angoulême / France
Been thanked: 2 times
Contact:

Re: Building GUIs With Fusion's UI Manager

#37

Post by miaz3 » Wed Sep 20, 2017 1:25 am

AndrewHazelden wrote:
miaz3 wrote:Strange...'fu:RequestFile('Brushes:/smile.tga' crash Fu. When i remove path its working :s
(fu:RequestDir('Scripts:/Comp') crash Fu anyway...


Strange, its working on half...mostly crashed, but 1 or 2 time been working.
Yeah. It can be a bit hit and miss with the file dialog functions in Fusion 9.0.1 with the occasional random crash.
erf, is good to know...For my part it is unusable.

User avatar
AndrewHazelden
Fusionator
Posts: 1382
Joined: Fri Apr 03, 2015 3:20 pm
Answers: 4
Location: West Dover, Nova Scotia, Canada
Been thanked: 58 times
Contact:

Re: Building GUIs With Fusion's UI Manager

#38

Post by AndrewHazelden » Wed Sep 20, 2017 2:41 am

miaz3 wrote:
AndrewHazelden wrote:Yeah. It can be a bit hit and miss with the file dialog functions in Fusion 9.0.1 with the occasional random crash.
erf, is good to know...For my part it is unusable.
Fusion 9.0.1 has only been out only a little while so these type of teething pains are to be expected when a new windowing API system is being added infront of your very eyes. I'm sure the issues will be resolved in the next update. :)

User avatar
miaz3
Fusioneer
Posts: 209
Joined: Sat Jan 03, 2015 1:43 am
Location: Angoulême / France
Been thanked: 2 times
Contact:

Re: Building GUIs With Fusion's UI Manager

#39

Post by miaz3 » Wed Sep 20, 2017 5:55 am

Absolutely !

User avatar
AndrewHazelden
Fusionator
Posts: 1382
Joined: Fri Apr 03, 2015 3:20 pm
Answers: 4
Location: West Dover, Nova Scotia, Canada
Been thanked: 58 times
Contact:

Pasting Textual Content from a UI Manager View into the Fusion Flow Area as Nodes

#40

Post by AndrewHazelden » Wed Sep 20, 2017 6:35 am

The new "PasteNode.lua" UI Manager example was created to try and better answer a question Miaz3 had asked on this thread here about the Lua comp:Paste() command and how it can be used with a string variable in a Lua script to add a set of pre-made nodes to the Fusion flow area.

Thanks Miaz3 for providing the idea for the latest UI Manager example! :)

Overview

This UI Manager based example shows how to paste a Fusion .Comp or .Setting based code snippet into the Fusion Flow area with the click of a ui:Button control.

The lua code in this script uses several Fusion 9.0.1 based options like syntax highlighting so it won't work in older versions of Fusion.

2017-10-02 Edit: There is a new "Copies to Paste" DoubleSpinBox control at the top of the window. If you set this value above 1 it will allow you to repeat the paste action multiple times in a row.

Download
PasteNode.lua
Screenshot
UI-Manager-PasteNode.png
Installation

Copy this script to your Fusion 9.0.1+ user preferences based "Scripts:/Comp/" folder.

Usage

Step 1. Copy a node from the Fusion flow area into your clipboard.

Step 2. Select the Script > PasteNode menu item. This will open up the "Paste Node" window and show a syntax highlighted text editing view that makes it easier to customize your snippet of .comp / macro .setting formatted text.

Step 3. In the "Paste Node" window you can click on the "Paste This Document into Your Comp'" button to paste the text field contents into your foreground composite.

Step 4. You can replace the sample text in the editable text field with your own content if you want and then press the "Paste This Document into Your Comp" button.

Step 5. (Optional) If you want to edit the PasteNode.lua script to add your own default node text block you need to replace the sample text that is returned from the "function SampleNodeBlock()" code below.

Tips for Editing the Script

Note: When customizing the text in the SampleNodeBlock() function make sure to keep the multi-line text string friendly double square brackets [[ ]] around your embedded code snippet.

This example shows how double [[ ]] brackets can be used with Lua strings:

Code: Select all

function SampleNodeBlock()
  return [[{Tools = ordered() {PastedMerge = Merge {},},}]]
end
Double [[ ]] brackets are especially useful in Lua to allow a string variable to stretch across multiple lines like this:

Code: Select all

function SampleNodeBlock()
  return [[{
    Tools = ordered() {
      PastedMerge = Merge {},
    },
  }]]
end
You do not have the required permissions to view the files attached to this post.
Last edited by AndrewHazelden on Mon Oct 02, 2017 6:45 am, edited 2 times in total.

FredP
Posts: 12
Joined: Wed Apr 13, 2016 8:02 pm

Re: Building GUIs With Fusion's UI Manager

#41

Post by FredP » Fri Sep 22, 2017 6:10 pm

Pretty Dialog boxes now! These are all great examples. Thanks everyone.

User avatar
AndrewHazelden
Fusionator
Posts: 1382
Joined: Fri Apr 03, 2015 3:20 pm
Answers: 4
Location: West Dover, Nova Scotia, Canada
Been thanked: 58 times
Contact:

Re: Building GUIs With Fusion's UI Manager

#42

Post by AndrewHazelden » Sun Sep 24, 2017 3:26 pm

FredP wrote:Pretty Dialog boxes now! These are all great examples. Thanks everyone.
Hi Fred.

Thanks for reading my tutorial. :)

User avatar
AndrewHazelden
Fusionator
Posts: 1382
Joined: Fri Apr 03, 2015 3:20 pm
Answers: 4
Location: West Dover, Nova Scotia, Canada
Been thanked: 58 times
Contact:

FusionScript Help Browser

#43

Post by AndrewHazelden » Mon Sep 25, 2017 12:16 pm

By Andrew Hazelden with *MAJOR* Assistance from Peter Loveday

Overview

The FusionScript Help Browser allows you to view every single class and member that is present in Fusion. This browser tool is the fastest way for a Fusion based compositing technical director or Fusion plugin developer to find out information about the Fusion session that might not be covered in the existing Fusion reference material.

Besides listing Fusion's build-in class and member details, you can also see results from 3rd party plug-ins and Fuses that are loaded. As you to scroll through the Fusion Class and Member items the available help data will be displayed automatically.

The script works with Fusion 9.0.1 and uses the UI Manager GUI system to display the results.

Note: Not all Fusion classes/Members have online help entries so only the available data can be displayed.

Download
FusionScript Help Browser.lua
Screenshot
fusionscript-help-browser.png
Installation

Copy the "FusionScript Help Browser.lua" script into your Fusion user preferences "Scripts/Comp/" folder.

Usage

Step 1. In Fusion you can run the script by selecting the "Script > FusionScript Help Browser" menu item.

Step 2. A "FusionScript Help Browser" window will be displayed. This interface is used to scroll through the available Fusion help data.

Step 3. Use the scroll wheel to browse quickly through the top "Class" ComboBox list of items. Once the "Member" area ComboBox is populated you can navigate through that section of the UI as well.
You do not have the required permissions to view the files attached to this post.

User avatar
miaz3
Fusioneer
Posts: 209
Joined: Sat Jan 03, 2015 1:43 am
Location: Angoulême / France
Been thanked: 2 times
Contact:

Re: Building GUIs With Fusion's UI Manager

#44

Post by miaz3 » Tue Sep 26, 2017 2:11 am

Excellent work ! thank you guys :)
it will help a lot of people

User avatar
Midgardsormr
Fusionator
Posts: 1211
Joined: Wed Nov 26, 2014 8:04 pm
Answers: 3
Location: Los Angeles, CA, USA
Been thanked: 93 times
Contact:

Re: Building GUIs With Fusion's UI Manager

#45

Post by Midgardsormr » Tue Sep 26, 2017 8:14 am

The help browser has already been very useful! Thanks, Andrew and Peter!