In the olden days, producers knew what visual effects were. Now they’ve gotten into this methodology where they’ll hire a middleman – a visual effects supervisor, and this person works for the producing studio.
They’re middle managers. And when you go into a review with one of them, there’s this weird sort of competition that happens.

It’s a game called ‘Find What’s Wrong With This Shot’. And there’s always going to be something wrong, because everything’s subjective. And you can micromanage it down to a pixel, and that happens all the time. We’re doing it digitally, so there’s no pressure to save on film costs or whatever, so it’s not unusual to go through 500 revisions of the same shot, moving pixels around and scrutinizing this or that.

That’s not how you manage artists. You encourage artists, and then you’ll get – you know – art.

If your idea of managing artists is just pointing out what’s wrong and making them fix it over and over again, you end up with artists who just stand around asking “OK lady, where do you want this sofa? You want it over there? No? Fine. You want it over there? I don’t give a fuck. I’ll put it wherever you want it.” It’s creative mismanagement, it’s part of the whole corporate modality. The fish stinks from the head on down. Back on Star Wars, Robocop, we never thought about what was wrong with a shot.

We just thought about how to make it better.

Phil Tippett

Building GUIs With Fusion's UI Manager

Moderator: AndrewHazelden

User avatar
AndrewHazelden
Fusionista
Posts: 530
Joined: Fri Apr 03, 2015 2:20 pm
Location: West Dover, Nova Scotia, Canada
Been thanked: 76 times
Contact:

Building GUIs With Fusion's UI Manager

#1

Post by AndrewHazelden » Sun Aug 13, 2017 12:38 am

Fusion 8.2.1 & 9 have a new Lua and Python based GUI building system called the fu.UIManager library. This library is used whenever you need to create your own custom graphical user interface in a Fusion based Lua or Python script.

The fu.UIManager allows you to add object oriented windows, buttons, text fields, sliders, tree list views, and controls that are accessible inside your script code. The new fu.UIManager library is QT window manger based and it is used to replace Fusion 7's older IUP approach to creating script based GUIs.

Over the course of the next several posts I hope to explain how the fu.UIManager library can be used in Fusion through a variety of small hands on example script projects.

Here is a sample Lua script that uses the fu.UIManager library to make a Fusion based network PING utility.
Ping Tester UI.png
Overview:
This script is a simple Fusion lua based ping utility that works in Fusion 8.2.1 and Fusion 9 by running the "ping" terminal program from the lua io.popen() command.

This script is intended primarily as a fu.UIManager GUI example that shows how to make a new window, add a text field for user input, and then display output in another text field.

Installation:
Copy this script to your Fusion user preferences "Scripts/Comp/" folder.

Download the Example:
Ping-Tester-UI-Manager-Example.zip
You do not have the required permissions to view the files attached to this post.

Tags:

User avatar
SecondMan
Site Admin
Posts: 1812
Joined: Thu Jul 31, 2014 4:31 pm
Location: Vancouver, Canada
Been thanked: 52 times
Contact:

Re: Building GUIs With Fusion's UI Manager

#2

Post by SecondMan » Sun Aug 13, 2017 2:43 am

Fantastic post! :cheer:

Made it a sticky :)

User avatar
AndrewHazelden
Fusionista
Posts: 530
Joined: Fri Apr 03, 2015 2:20 pm
Location: West Dover, Nova Scotia, Canada
Been thanked: 76 times
Contact:

Re: Building GUIs With Fusion's UI Manager

#3

Post by AndrewHazelden » Sun Aug 13, 2017 5:08 am

If you want to add a button to a UI Manager window layout that is done by writing an entry like this:

Code: Select all

ui:Button{ ID = "ConnectButton", Text = "Connect" },
The Text setting for the button is the actual label that is written on the button. You are able to use Unicode based Emoji icons as part of the Text label string if you are looking for an easy way to add a picture to the button.

The ID setting for the button is the internal name that is used to access the button from other functions in your Lua script.

After you have created a new ui:Button entry inside of your window creation code, further down in the Lua script you would add a matching function that responds to events that are triggered when the button is pressed.

Since I have an ID setting of ConnectButton I would need to create a Lua function like this to handle the button clicking action:

Code: Select all

function win.On.ConnectButton.Clicked(ev)
	print('Hello World!')
end
Inside of the win.On.ConnectButton.Clicked() function you are free to write in any Lua code you want.

You can also rename the button's label once it has been clicked by assigning a new text string to the button label .Text attribute. The new string text that you can assign to the button label doesn't have to be a hard quoted object. It could be a string that is sourced at run-time from a dynamic element coming right from the active Fusion comp like the name of the active node selection, the current composite's filename, or it could come from any Lua variable you want to assign.

Code: Select all

function win.On.ConnectButton.Clicked(ev)
	itm.ConnectButton.Text = "Link Active"
end
This shows how Emojis can be added as part of the button's label text string:
using-emojis-in-button-labels.png
If you want to print out the current button label text in Fusion's Console tab you can use the .Text option to access the label contents:

Code: Select all

function win.On.ConnectButton.Clicked(ev)
	print(tostring(itm.ConnectButton.Text))
end
It is also possible to assign the button .Text string to a variable in Lua:

Code: Select all

function win.On.ConnectButton.Clicked(ev)
  myVar = tostring(itm.ConnectButton.Text)
  print(myVar)
end
You do not have the required permissions to view the files attached to this post.

User avatar
AndrewHazelden
Fusionista
Posts: 530
Joined: Fri Apr 03, 2015 2:20 pm
Location: West Dover, Nova Scotia, Canada
Been thanked: 76 times
Contact:

FuBox Radial Menu UI

#4

Post by AndrewHazelden » Sun Aug 13, 2017 2:10 pm

FuBoxUI v0.2 - 2017-08-12

Overview

The FuBoxUI script is a Fusion lua based example that shows how a Maya "Marking Menu" like UI can be created with Fusion 9's new UI Manager GUI Library. This script is intended primarily as a fu.UIManager GUI example that shows how to make a new transparent window, and then add several buttons arranged in a radial layout.

An Emoji icon is placed in the center button text label. This center "FuBox" button is linked to a Lua openBrowser() function that opens up your Windows/Mac/Linux default webbrowser to a webpage. This serves as an example of how you could place a link to help documentation, or your company website in a FuBoxUI button.

The source code is distributed under the GNU General Public License version 3.

Screenshot

This is a preview of what the FuBoxUI looks like when you press the ESC key on your keyboard when the Fusion Viewer window is active:
FuBoxUI-Screenshot.png
Download the Example
FuBoxUI-Example.zip
Usage

Press the ESC key over the Fusion Viewer windows to pop up the new FuBoxUI radial menu. It is designed to work over image viewer and Fusion 3D workspace views but unique layouts could be triggered elsewhere.

If your graphics card has insufficient support for hardware overlays with transparency then you won't see the UI with a transparent background.

Installation

Step 1. Copy the hotkey file "FuBoxUI.fu" and the "FuBoxUI.lua" script to your Fusion user preferences "Config" folder.

Step 2. Restart Fusion

Step 3. Click in the Fusion Image Viewer window or in a Fusion's 3D workspace view to set the active focus. Then tap the ESC "escape" key to toggle the FuBoxUI window.

Note: If you press the ESC key multiple times you will see multiple FuBoxUI windows appear. Clicking on any of the buttons will close the UI.
You do not have the required permissions to view the files attached to this post.

User avatar
Dunn
Moderator
Posts: 348
Joined: Mon Aug 04, 2014 3:27 am
Location: Hamburg, Germany
Been thanked: 21 times
Contact:

Re: Building GUIs With Fusion's UI Manager

#5

Post by Dunn » Sun Aug 13, 2017 2:26 pm

Wowow! :o This is totally Awesome !

Nice one Andrew! ;)

User avatar
AndrewHazelden
Fusionista
Posts: 530
Joined: Fri Apr 03, 2015 2:20 pm
Location: West Dover, Nova Scotia, Canada
Been thanked: 76 times
Contact:

Editing the FuBox Radial Menu UI Settings

#6

Post by AndrewHazelden » Mon Aug 14, 2017 12:26 am

In the FuBoxUI downloadable example the Fusion hotkeys.fu file named "FuBoxUI.fu" has an Action that is triggered when the ESCAPE key is pressed.

This action has a special Fusion 9 only feature at play that passes the current mouse position into the Lua script that is being launched using this code snippet:

Code: Select all

Execute = [[target:RunScript("$CFG/FuBoxUI.lua", { mousex = args._sxpos, mousey = args._sypos})]],
The target:RunScript() part of the execute command launches the script using the relative filepath location of "$CFG/FuBoxUI.lua". In this string the $CFG variable represents a Fusion Pathmap equivalent of "Config:/" that is pointing to the Fusion user prefs Config folder.

This code snippet also indicates that two local Lua variables called mousex and mousey will be created when the FuBoxUI.lua script is run. The mousex variable will hold the screen coordinate based x-axis cursor position using the contents of "args._sxpos". The mousey variable will hold the screen coordinate based y-axis cursor position using the contents of "args._sypos".

Inside of the "FuBoxUI.lua" script the mousex and mousey variables are used to shift the location of the newly created window to be centered around the mouse pointer using the Lua code snippets:

Code: Select all

local width,height = 300,250
...

Code: Select all

win:Move({mousex - width/2, mousey - height/2})
The way the window centering is calculated by this code is the window's move command win:Move() offsets the FuBoxUI view so the window's top left origin point is located at the mouse cursor position. Then 50% of the window's width and height is subtracted from that origin location so the middle FuBox UI button is shifted to be at the exact point where the cursor is.

The original FuBoxUI window is created using the "disp:AddWindow()" command. Since we want to create something that looks like a radial menu / pie menu we need our FuBoxUI window to always stay ontop of the other user interface elements. This is done inside of the disp:AddWindow() command by setting the WindowFlags attribute "WindowStaysOnTopHint" to true.

Code: Select all

WindowFlags = { Popup = true, WindowStaysOnTopHint = true },
To make the FuBoxUI window frameless and transparent so it is composited directly on top of your Fusion Viewer window, the "FuBoxUI.fu" script uses the following line of code just after the window has been created but before the win:Show() command has been run:

Code: Select all

win:SetAttribute('WA_TranslucentBackground', true)
fubox-set-attribute-WA_TranslucentBackground.png
For the transparent window overlay feature to work your graphics card has to support OpenGL/DirectX hardware overlays and your operating system has to have the visual effects like Windows Aero transparency compositing enabled. On Windows 7 for example you would have to re-enable those transparency effects in your Windows System Control Panel if you manually optimized the OS settings for minimalism and performance previously.

Each of the buttons are added to the FuBoxUI using an entry like:

Code: Select all

ui:Button{ ID = 'A', Text = 'A' },
The Text attribute is the button label text string that is visible. The ID is the internal name that you can use in the Lua script to control the button from code.

Since I wanted to create a radially spaced out Maya marking menu style UI look, each of the rows of buttons were placed inside their own horizontal row "ui:HGroup()" element that is padded out with several horizontal spacing gap creation ui:HGap() commands.

The "openBrowser()" function that is linked to the center "FuBox" named button is a Lua function of my own creation that uses the Windows/Mac/Linux platform specific command to open a new web browser window to a user defined URL. This function is run when the center "FuBox" ID button is clicked:

Code: Select all

function win.On.FuBox.Clicked(ev)
  print('FuBoxUI by Andrew Hazelden <andrew@andrewhazelden.com>')
  openBrowser()
  disp:ExitLoop()
end
To make it possible to hide the FuBoxUI overlay, each of the button .Clicked functions have the window closing command "disp:ExitLoop()" added which will close the FuBoxUI overlay:

Code: Select all

function win.On.A.Clicked(ev)
  disp:ExitLoop()
end
It is inside each of the named button's win.On.A.Clicked() to win.On.I.Clicked() functions that you would also write in your own Lua code that you want to have run when the button is clicked.

The code you would add to the button is just normal everyday Lua code that is placed inside the button function. You can use any Lua command you want from a script that you would run from a Fusion "Script:/Comp/" folder, or any of the Lua code you would enter manually in Fusion's Console tab.

The FuBox overlay window is shown by Fusion whenever the Fusion Viewer window (known internally by Fusion as the "GLVIEW") is active and the ESC key on your keyboard is pressed. If you are wondering how this keybinding was created, it was by adding an "ESCAPE" entry in the "FuBox.fu" hotkey file that runs the "FuBoxUI_Show" action that is located at the top of the same document.

Code: Select all

	Hotkeys
	{
		Target = "GLView",
    
		ESCAPE = "FuBoxUI_Show",
	}
You could change the word ESCAPE to ESCAPE_RELEASED in the "FuBox.fu" hotkey file if you wanted the window to be shown only after the ESC keyboard button was released and the key is back in the original un-pressed state.

You can read more about how hotkeys are created in Fusion 8+ on this WSL thread:
Hotkey Configuration in Fusion 8
You do not have the required permissions to view the files attached to this post.
Last edited by AndrewHazelden on Sun Sep 03, 2017 5:36 am, edited 1 time in total.

User avatar
ShadowMaker SdR
Fusioneer
Posts: 215
Joined: Sun Sep 21, 2014 5:17 am
Been thanked: 25 times

Re: Building GUIs With Fusion's UI Manager

#7

Post by ShadowMaker SdR » Mon Aug 14, 2017 2:21 am

Then 50% of the window's width and height is subtracted from that origin location so the middle FuBox UI button is shifted to be at the exact point where the cursor is.
This is slightly off-topic, but I think you've nudged my brain into the beginning of the concept of creating a rectangle mask that you can move from the sides instead of the center, something I never could get my head around.

User avatar
AndrewHazelden
Fusionista
Posts: 530
Joined: Fri Apr 03, 2015 2:20 pm
Location: West Dover, Nova Scotia, Canada
Been thanked: 76 times
Contact:

Re: Building GUIs With Fusion's UI Manager

#8

Post by AndrewHazelden » Mon Aug 14, 2017 3:46 am

ShadowMaker SdR wrote:This is slightly off-topic, but I think you've nudged my brain into the beginning of the concept of creating a rectangle mask that you can move from the sides instead of the center, something I never could get my head around.
That's great to hear. :)

I'm hoping this thread can help people customize their copies of Fusion and personalize the software to meet their daily workflow needs.

User avatar
AndrewHazelden
Fusionista
Posts: 530
Joined: Fri Apr 03, 2015 2:20 pm
Location: West Dover, Nova Scotia, Canada
Been thanked: 76 times
Contact:

Creating UI Manager based Windows and GUI Elements

#9

Post by AndrewHazelden » Mon Aug 14, 2017 4:37 pm

This post starts to explore how you can go about creating your own UI Manager window from scratch and will look at the different types of GUI elements you can add to a Lua based user interface in Fusion.

Running the Lua code in Fusion

If you switch to Fusion's Console tab you can paste the Lua examples in directly that use the AddWindow command. This will let you see the results instantly on your screen.
ui-manager-paste-code-in-console-tab.png
It is also possible to download these code snippets a Lua scripts that should then be moved manually into Fusions user preferences folder under the "Scripts:/Comp/" directory. You have to give the scripts the .lua file extension if you want them to be visible in Fusion's script menu.

The Fusion user preferences based "Scripts:/Comp/" folder is located at:

Windows:

Code: Select all

%appdata%/Blackmagic Design/Fusion/Scripts/Comp/
Note: The %appdata% word is the Windows command prompt environment variable that is used to represent the /Users/<Your User Name>/AppData/Roaming/ directory.

MacOS:

Code: Select all

$HOME/Library/Application Support/Blackmagic Design/Fusion/Scripts/Comp/
Note: The $HOME folder is the /Users/<Your User Name>/ directory.

Linux:

Code: Select all

$HOME/.fusion/BlackmagicDesign/Fusion/Scripts/Comp
Note: The $HOME folder is the /Users/<Your User Name>/ directory.

AddWindow()

The AddWindow() command is used to create a new UI Manager window. This window holds the GUI elements in a user interface.

The following code snippet shows the bare minimum of code you need to add to a Lua script in order to create a new UI Manager based window that has a GUI element inside of it.

In this piece of sample code a new window is created that has the title "My First Window". The a Label GUI element is added to the view that displays the textual message "This is a Label". You can close the new view by clicking on the standard window close box.
Code: [Select all] [Expand/Collapse] [Download] (myfirstwindow.lua)
  1. -- Create a new window
  2. local ui = fu.UIManager
  3. local disp = bmd.UIDispatcher(ui)
  4. local width,height = 400,200
  5.  
  6. win = disp:AddWindow({
  7.   ID = 'MyWin',
  8.   WindowTitle = 'My First Window',
  9.   Geometry = { 100, 100, width, height },
  10.   Spacing = 10,
  11.  
  12.   ui:VGroup{
  13.     ID = 'root',
  14.    
  15.     -- Add your GUI elements here:
  16.     ui:Label{ ID = 'L', Text = 'This is a Label'},
  17.   },
  18. })
  19.  
  20. -- The window was closed
  21. function win.On.MyWin.Close(ev)
  22.     disp:ExitLoop()
  23. end
  24.  
  25. -- Add your GUI element based event functions here:
  26. itm = win:GetItems()
  27.  
  28. win:Show()
  29. disp:RunLoop()
  30. win:Hide()
This is what the new window looks like in Fusion:
ui-manager-new-window.png
Available GUI Elements

Now that you have created a new window, you can start to add any of the following GUI elements you want to the view by placing them inside the window's ui:VGroup{} tag:
  • ui:VGroup{}
  • ui:HGroup{}
  • ui:Stack{}
  • ui:VGap{}
  • ui:HGap{}
  • ui:Button{}
  • ui:CheckBox{}
  • ui:ColorPicker{}
  • ui:ComboBox{}
  • ui:DoubleSpinBox{}
  • ui:Label{}
  • ui:LineEdit{}
  • ui:Slider{}
  • ui:SpinBox{}
  • ui:TabBar{}
  • ui:TextEdit{}
  • ui:Tree{}
What is an ID Tag?

In the UI Manager an important concept to understand at this point is that an ID tag string is placed inside the { } curly braces on every control in the GUI layout. The ID tag setting could be just a single letter in quotes or it could be a longer text string (written without spaces) that is used to define the name that Lua uses to access that specific GUI element from code.

Code: Select all

ID = 'myCustomName',
ID tags are used to allow the UI Manager to respond uniquely to user interactions with each of the controls in a window such as handling button clicks, sliders, checkboxes, typing text in a textfield, etc...

How do I use the new GUI elements?

ui:VGroup{} / ui:HGroup{}

The ui:VGroup{} and ui:HGroup{} GUI elements are used to create vertical and horizontal layouts inside the window. You can stack multiple of these group objects nested inside of each other to create complex GUIs with UI elements arranged onscreen in rows and columns, or even a grid style of layout is possible.

Code: Select all

ui:VGroup{
  -- Add your GUI elements here
}
ui:VGap{} / ui:HGap{}

The ui:VGap{} and ui:HGap{} GUI elements are used to provide space between each of the GUI controls so it is easier to navigate inside the window and to create a more logical grouping of the elements inside of a ui:VGroup{} or ui:HGroup{} layout. The gap controls have options that allow you to define the space between controls using either pixels or a relative measurement.

This example adds a 5 pixel wide horizontal gap between the controls that are placed on either side of a ui:HGap element in a ui:VGroup{} or ui:HGroup{} layout:

Code: Select all

-- Add a control here
ui:HGap(5),
-- Add a control here
This example creates a flexible sized horizontal between the controls that are placed on either side of a ui:HGap element in a ui:VGroup{} or ui:HGroup{} layout:

Code: Select all

-- Add a control here
ui:HGap(0, 1.0),
-- Add a control here
ui:Button{}

The ui:Button{} control will create a simple rectangular shaped clickable button.

You can assign a textual label to the new button by adding an attribute like: Text = 'The Button Label'. If your operating system's default font supports showing Emoji's or extended Unicode characters you can add them to the Text label string on a button, too.
ui-manager-button.png
  1. local ui = fu.UIManager
  2. local disp = bmd.UIDispatcher(ui)
  3. local width,height = 400,200
  4.  
  5. win = disp:AddWindow({
  6.   ID = 'MyWin',
  7.   WindowTitle = 'My First Window',
  8.   Geometry = { 100, 100, width, height },
  9.   Spacing = 10,
  10.  
  11.   ui:VGroup{
  12.     ID = 'root',
  13.    
  14.     -- Add your GUI elements here:
  15.     ui:HGroup{
  16.       Margin = 50,
  17.       ui:Button{ID = 'B', Text = 'The Button Label'},
  18.     }
  19.   },
  20. })
  21.  
  22. -- The window was closed
  23. function win.On.MyWin.Close(ev)
  24.     disp:ExitLoop()
  25. end
  26.  
  27. -- Add your GUI element based event functions here:
  28. itm = win:GetItems()
  29.  
  30. function win.On.B.Clicked(ev)
  31.   print('Button Clicked')
  32.     disp:ExitLoop()
  33. end
  34.  
  35. win:Show()
  36. disp:RunLoop()
  37. win:Hide()
ui:CheckBox{}

The ui:CheckBox{} control will add a checkbox to the window layout that can be set to a boolean true/false state which corresponds visually to checked or unchecked. You can assign a label to the new checkBox by adding an attribute like: Text = 'The Checkbox Label'.
ui-manager-checkbox.png
  1. local ui = fu.UIManager
  2. local disp = bmd.UIDispatcher(ui)
  3. local width,height = 400,200
  4.  
  5. win = disp:AddWindow({
  6.   ID = 'MyWin',
  7.   WindowTitle = 'My First Window',
  8.   Geometry = { 100, 100, width, height },
  9.   Spacing = 10,
  10.  
  11.   ui:VGroup{
  12.     ID = 'root',
  13.     Margin = 50,
  14.    
  15.     -- Add your GUI elements here:
  16.     ui:CheckBox{ID = 'MyCheckbox', Text = 'The Checkbox Label'},
  17.   },
  18. })
  19.  
  20. -- The window was closed
  21. function win.On.MyWin.Close(ev)
  22.     disp:ExitLoop()
  23. end
  24.  
  25. -- Add your GUI element based event functions here:
  26. itm = win:GetItems()
  27.  
  28. function win.On.MyCheckbox.Clicked(ev)
  29.   print('[Checkbox] ' .. tostring(itm.MyCheckbox.Checked))
  30. end
  31.  
  32. win:Show()
  33. disp:RunLoop()
  34. win:Hide()
ui:ColorPicker{}

The ui:ColorPicker{} control provides Red/Green/Blue color sliders and a preview color swatch that can be used to create a custom color value.
ui-manager-colorpicker.png
You can enter a default color for the ColorPicker using:

Code: Select all

ui:ColorPicker{ ID = "Color", Color = { R = 0.753, G = 0.753, B = 0.753, A = 1}},
If you need an alpha channel slider in the ColorPicker then you can use:

Code: Select all

	ui:ColorPicker{ ID = "Color", Color = { R = 1, G = 1, B = 1, A = 1}, DoAlpha = true  },

You can read the color picker RGB float values using:

Code: Select all

red = itm.Color.Color.R
green = itm.Color.Color.G
blue = itm.Color.Color.B
Code: [Select all] [Expand/Collapse] [Download] (colorpicker.lua)
  1. local ui = fu.UIManager
  2. local disp = bmd.UIDispatcher(ui)
  3. local width,height = 400,200
  4.  
  5. win = disp:AddWindow({
  6.   ID = 'MyWin',
  7.   WindowTitle = 'My First Window',
  8.   Geometry = {100, 100, width, height},
  9.   Spacing = 10,
  10.  
  11.   ui:VGroup{
  12.     ID = 'root',
  13.    
  14.     -- Add your GUI elements here:
  15.     ui:ColorPicker{ID = 'Color'},
  16.   },
  17. })
  18.  
  19. -- The window was closed
  20. function win.On.MyWin.Close(ev)
  21.     disp:ExitLoop()
  22. end
  23.  
  24. -- Add your GUI element based event functions here:
  25. itm = win:GetItems()
  26.  
  27. win:Show()
  28. disp:RunLoop()
  29. win:Hide()
ui:ComboBox{}

The ui:ComboBox{} control allows you to show a ComboControl / Options Menu style of menu that allows you to select an individual menu item from a list of entries.

You can read the text string for the current ComboBox selection using ".CurrentText" like this:

Code: Select all

print(itm.MyCombo.CurrentText)
You can read the index value for the current ComboBox selection using ".CurrentIndex" like this:

Code: Select all

print(itm.MyCombo.CurrentIndex)
ui-manager-combobox.png
You need to define the list of menu items outside the AddWindow() function using the AddItem() command like this:
  1. local ui = fu.UIManager
  2. local disp = bmd.UIDispatcher(ui)
  3. local width,height = 400,100
  4.  
  5. win = disp:AddWindow({
  6.   ID = 'MyWin',
  7.   WindowTitle = 'My First Window',
  8.   Geometry = {100, 100, width, height},
  9.   Spacing = 10,
  10.  
  11.   ui:VGroup{
  12.     ID = 'root',
  13.    
  14.     -- Add your GUI elements here:
  15.     ui:ComboBox{ID = 'MyCombo', Text = 'Combo Menu'},
  16.   },
  17. })
  18.  
  19. -- The window was closed
  20. function win.On.MyWin.Close(ev)
  21.     disp:ExitLoop()
  22. end
  23.  
  24. -- Add your GUI element based event functions here:
  25. itm = win:GetItems()
  26.  
  27. -- Add the items to the ComboBox menu
  28. itm.MyCombo:AddItem('Apple')
  29. itm.MyCombo:AddItem('Banana')
  30. itm.MyCombo:AddItem('Cherry')
  31. itm.MyCombo:AddItem('Orange')
  32. itm.MyCombo:AddItem('Mango')
  33. itm.MyCombo:AddItem('Kiwi')
  34.  
  35. -- This function is run when a user picks a different setting in the ComboBox control
  36. function win.On.MyCombo.CurrentIndexChanged(ev)
  37.   if itm.MyCombo.CurrentIndex == 0 then
  38.     -- Apple
  39.     print('[' .. itm.MyCombo.CurrentText .. '] Lets make an apple crisp dessert.')
  40.   elseif itm.MyCombo.CurrentIndex == 1 then
  41.     -- Banana
  42.     print('[' .. itm.MyCombo.CurrentText .. '] Lets make a banana split with ice cream.')
  43.   elseif itm.MyCombo.CurrentIndex == 2 then
  44.     -- Cherry
  45.     print('[' .. itm.MyCombo.CurrentText .. '] Lets make some cherry tarts.')
  46.   elseif itm.MyCombo.CurrentIndex == 3 then
  47.     -- Orange
  48.     print('[' .. itm.MyCombo.CurrentText .. '] Lets peel an orange and have sliced orange boats.')
  49.   elseif itm.MyCombo.CurrentIndex == 4 then
  50.     -- Mango
  51.     print('[' .. itm.MyCombo.CurrentText .. '] Lets eat cubed mango chunks with yoghurt.')
  52.   elseif itm.MyCombo.CurrentIndex == 5 then
  53.     -- Kiwi
  54.     print('[' .. itm.MyCombo.CurrentText .. '] Lets have a fresh Kiwi snack.')
  55.   end
  56. end
  57.  
  58. win:Show()
  59. disp:RunLoop()
  60. win:Hide()
ui:DoubleSpinBox{}

The ui:DoubleSpinBox{} control allows you to enter numeric values. This GUI element can be incremeted by typing a number in directly, pressing the up and down arrow buttons, or by clickig in the number field and then scrolling your mouse scroll wheel.

You will typically want to control the size of the ui:DoubleSpinBox control in the GUI by placing it inside a ui:VGroup{} or ui:HGroup{} element.
ui-manager-doublespinbox.png
Code: [Select all] [Expand/Collapse] [Download] (doublespinbox.lua)
  1. local ui = fu.UIManager
  2. local disp = bmd.UIDispatcher(ui)
  3. local width,height = 400,75
  4.  
  5. win = disp:AddWindow({
  6.   ID = 'MyWin',
  7.   WindowTitle = 'My First Window',
  8.   Geometry = {100, 100, width, height},
  9.   Spacing = 10,
  10.  
  11.   ui:VGroup{
  12.     ID = 'root',
  13.  
  14.     -- Add your GUI elements here:
  15.     ui:DoubleSpinBox{ID='MySpinner'},
  16.   },
  17. })
  18.  
  19. -- The window was closed
  20. function win.On.MyWin.Close(ev)
  21.     disp:ExitLoop()
  22. end
  23.  
  24. -- Add your GUI element based event functions here:
  25. itm = win:GetItems()
  26.  
  27. function win.On.MySpinner.ValueChanged(ev)
  28.   print('[DoubleSpinBox Value] '.. itm.MySpinner.Value)
  29. end
  30.  
  31. win:Show()
  32. disp:RunLoop()
  33. win:Hide()
ui:Label{}

The ui:Label{} control allows you to add a block of non user editable text to the window.

Using several Label element inside of your different ui:VGroup{} or ui:HGroup{} layouts can help visually break up a larger more complex window layout into smaller more logical groupings. This will make it easier for a user to understand what a set of controls can be used for.
ui-manager-label.png
  1. local ui = fu.UIManager
  2. local disp = bmd.UIDispatcher(ui)
  3. local width,height = 400,200
  4.  
  5. win = disp:AddWindow({
  6.   ID = 'MyWin',
  7.   WindowTitle = 'My First Window',
  8.   Geometry = {100, 100, width, height},
  9.   Spacing = 10,
  10.  
  11.   ui:VGroup{
  12.     ID = 'root',
  13.  
  14.     -- Add your GUI elements here:
  15.     ui:Label{ID = 'L', Text = 'This is a Label', Alignment = { AlignHCenter = true, AlignTop = true },},
  16.   },
  17. })
  18.  
  19. -- The window was closed
  20. function win.On.MyWin.Close(ev)
  21.     disp:ExitLoop()
  22. end
  23.  
  24. -- Add your GUI element based event functions here:
  25. itm = win:GetItems()
  26.  
  27. win:Show()
  28. disp:RunLoop()
  29. win:Hide()
ui:Slider{}

The ui:Slider{} control provides a horizontal slider control.
ui-manager-slider.png
  1. local ui = fu.UIManager
  2. local disp = bmd.UIDispatcher(ui)
  3. local width,height = 400,100
  4.  
  5. win = disp:AddWindow({
  6.   ID = 'MyWin',
  7.   WindowTitle = 'My First Window',
  8.   Geometry = {100, 100, width, height},
  9.   Spacing = 10,
  10.  
  11.   ui:HGroup{
  12.     ID = 'root',
  13.    
  14.     -- Add your GUI elements here:
  15.     ui:Slider{ID = 'MySlider'},
  16.    
  17.     ui:Label{ID = 'MyLabel', Text = 'Value: ',},
  18.   },
  19. })
  20.  
  21. -- The window was closed
  22. function win.On.MyWin.Close(ev)
  23.   disp:ExitLoop()
  24. end
  25.  
  26. -- Add your GUI element based event functions here:
  27. itm = win:GetItems()
  28.  
  29. itm.MySlider.Value = 25
  30. itm.MySlider.Minimum = 0
  31. itm.MySlider.Maximum = 100
  32.  
  33. function win.On.MySlider.ValueChanged(ev)
  34.   itm.MyLabel.Text = 'Slider Value: ' .. tostring(ev.Value)
  35. end
  36.  
  37. win:Show()
  38. disp:RunLoop()
  39. win:Hide()
ui:LineEdit{}

The ui:LineEdit{} control adds a single line based editable text field control.
ui-manager-lineedit.png
The "PlaceholderText" attribute lets you define a label text that is shown when the field is empty. This is useful for indicating what the control is meant to be used for.
  1. local ui = fu.UIManager
  2. local disp = bmd.UIDispatcher(ui)
  3. local width,height = 400,200
  4.  
  5. win = disp:AddWindow({
  6.   ID = 'MyWin',
  7.   WindowTitle = 'My First Window',
  8.   Geometry = { 100, 100, width, height },
  9.   Spacing = 10,
  10.  
  11.   ui:VGroup{
  12.     ID = 'root',
  13.     Margin = 50,
  14.    
  15.     -- Add your GUI elements here:
  16.     ui:LineEdit{ID='MyLineTxt', Text = 'Hello Fusioneers!', PlaceholderText = 'Please Enter a few words.',},
  17.    
  18.     ui:Button{ID = 'PrintButton', Text = 'Print Text'},
  19.   },
  20. })
  21.  
  22. -- The window was closed
  23. function win.On.MyWin.Close(ev)
  24.     disp:ExitLoop()
  25. end
  26.  
  27. -- Add your GUI element based event functions here:
  28. itm = win:GetItems()
  29.  
  30. function win.On.PrintButton.Clicked(ev)
  31.   print(itm.MyLineTxt.Text)
  32. end
  33.  
  34. function win.On.MyLineTxt.TextChanged(ev)
  35.     print(itm.MyLineTxt.Text)
  36. end
  37.  
  38. win:Show()
  39. disp:RunLoop()
  40. win:Hide()
ui:TextEdit{}

The ui:TextEdit{} control adds an editable text field control. It is possible to render the textfield using plaintext or HTML.
ui-manager-textedit.png
A ui:TextEdit field can be made read only by adding a "ReadOnly" tag like this:

Code: Select all

ui:TextEdit{ID='Txt', Text = 'Hello', ReadOnly = true,}
You can change the contents of a ui:TextEdit field using either:

Code: Select all

-- Plain unformatted text:
itm.MyTxt.PlainText = 'Hello Fusioneers'

Code: Select all

-- HTML encoded text:
itm.MyTxt.HTML = [[<h1>HTML Formatted Text</h1><p>This this HTML rendered in a ui:TextEdit field!</p>]]
The "PlaceholderText" attribute lets you define a label text that is shown when the field is empty. This is useful for indicating what the control is meant to be used for.
  1. local ui = fu.UIManager
  2. local disp = bmd.UIDispatcher(ui)
  3. local width,height = 600,800
  4.  
  5. win = disp:AddWindow({
  6.   ID = 'MyWin',
  7.   WindowTitle = 'My First Window',
  8.   Geometry = { 100, 100, width, height },
  9.   Spacing = 10,
  10.  
  11.   ui:VGroup{
  12.     ID = 'root',
  13.     Margin = 50,
  14.    
  15.     -- Add your GUI elements here:
  16.     ui:TextEdit{ID='MyTxt', Text = 'Hello', PlaceholderText = 'Please Enter a few words.',}
  17.   },
  18. })
  19.  
  20. -- The window was closed
  21. function win.On.MyWin.Close(ev)
  22.     disp:ExitLoop()
  23. end
  24.  
  25. -- Add your GUI element based event functions here:
  26. itm = win:GetItems()
  27.  
  28. function win.On.MyTxt.TextChanged(ev)
  29.     print(itm.MyTxt.PlainText)
  30. end
  31.  
  32. win:Show()
  33. disp:RunLoop()
  34. win:Hide()
ui:Tree{}

The ui:Tree{} control creates a spreadsheet like grid layout. This is useful for listing elements in a report with rows and columns.
ui-manager-tree.png
The entries in a ui:Tree can be made clickable and sortable using the following tags:

Code: Select all

ui:Tree{ID = 'Tree', SortingEnabled=true, Events = {  ItemDoubleClicked=true, ItemClicked=true }, },
You can detect a single click on a row using "function win.On.Tree.ItemClicked(ev)".

You can detect a double click on a row using "function win.On.Tree.ItemDoubleClicked(ev)".

Inside the single click or double click events you can read the row name text that was clicked with "ev.item.Text[1]". The index value in the [] brackets is the specific column heading text you want to display.

You can edit the contents of a specific tree view cell that was clicked on using "ev.column" to access an individual cell:

Code: Select all

-- A Tree view cell was clicked on
function win.On.Tree.ItemClicked(ev)
  -- You can use the ev.column value to edit a specific ui:Tree cell label
  ev.item.Text[ev.column] = '*CLICK*'
end
It is possible to add folding disclosure triangle sections to a tree view to have sub-headings. This is a more advanced topic so it will be discussed in a future tutorial.

The width of each heading is adjusted using the ".ColumnWidth" setting:

Code: Select all

-- Resize the Columns
itm.Tree.ColumnWidth[0] = 150
itm.Tree.ColumnWidth[1] = 300
itm.Tree.ColumnWidth[2] = 50
When you are dynamically re-building a tree view you can use the "itm.Tree:Clear()" command to clear out the existing items.
  1. local ui = fu.UIManager
  2. local disp = bmd.UIDispatcher(ui)
  3. local width,height = 430,700
  4.  
  5. win = disp:AddWindow({
  6.   ID = 'MyWin',
  7.   WindowTitle = 'Tree',
  8.   Geometry = { 100, 100, width, height },
  9.   Spacing = 0,
  10.  
  11.   ui:VGroup{
  12.     ID = 'root',
  13.     ui:Tree{ID = 'Tree', SortingEnabled=true, Events = {ItemDoubleClicked=true, ItemClicked=true}, },  
  14.   },
  15. })
  16.  
  17. -- The window was closed
  18. function win.On.MyWin.Close(ev)
  19.     disp:ExitLoop()
  20. end
  21.  
  22. -- Add your GUI element based event functions here:
  23. itm = win:GetItems()
  24.  
  25. -- Add a header row.
  26. hdr = itm.Tree:NewItem()
  27. hdr.Text[0] = ''
  28. hdr.Text[1] = 'Column A'
  29. hdr.Text[2] = 'Column B'
  30. hdr.Text[3] = 'Column C'
  31. hdr.Text[4] = 'Column D'
  32. hdr.Text[5] = 'Column E'
  33. itm.Tree:SetHeaderItem(hdr)
  34.  
  35. -- Number of columns in the Tree list
  36. itm.Tree.ColumnCount = 5
  37.  
  38. -- Resize the Columns
  39. itm.Tree.ColumnWidth[0] = 100
  40. itm.Tree.ColumnWidth[1] = 75
  41. itm.Tree.ColumnWidth[2] = 75
  42. itm.Tree.ColumnWidth[3] = 75
  43. itm.Tree.ColumnWidth[4] = 75
  44. itm.Tree.ColumnWidth[5] = 75
  45.  
  46. -- Add an new row entries to the list
  47. for row = 1, 50 do
  48.   itRow = itm.Tree:NewItem();
  49.   -- String.format is used to create a leading zero padded row number like 'Row A01' or 'Row B01'.
  50.   itRow.Text[0] = string.format('Row %02d', row);
  51.   itRow.Text[1] = string.format('A %02d', row);
  52.   itRow.Text[2] = string.format('B %02d', row);
  53.   itRow.Text[3] = string.format('C %02d', row);
  54.   itRow.Text[4] = string.format('D %02d', row);  
  55.   itRow.Text[5] = string.format('E %02d', row);
  56.   itm.Tree:AddTopLevelItem(itRow)
  57. end
  58.  
  59. -- A Tree view row was clicked on
  60. function win.On.Tree.ItemClicked(ev)
  61.   print('[Single Clicked] ' .. tostring(ev.item.Text[0]))
  62.  
  63.   -- You can use the ev.column value to edit a specific ui:Tree cell label
  64.   ev.item.Text[ev.column] = '*CLICK*'
  65. end
  66.  
  67. -- A Tree view row was double clicked on
  68. function win.On.Tree.ItemDoubleClicked(ev)
  69.   print('[Double Clicked] ' .. tostring(ev.item.Text[0]))
  70. end
  71.  
  72. win:Show()
  73. disp:RunLoop()
  74. win:Hide()
You do not have the required permissions to view the files attached to this post.
Last edited by AndrewHazelden on Wed Sep 13, 2017 7:42 am, edited 23 times in total.

User avatar
AndrewHazelden
Fusionista
Posts: 530
Joined: Fri Apr 03, 2015 2:20 pm
Location: West Dover, Nova Scotia, Canada
Been thanked: 76 times
Contact:

Creating a UI Manager Based HTML Code Editor With Live Preview

#10

Post by AndrewHazelden » Tue Aug 15, 2017 8:20 am

Before we go over any more of the UI Manager GUI interface controls from the previous post I want to share a fun example project that uses Lua to create an HTML Code Editor window that renders a live HTML preview. This whole example is based around the neat fact that the ui:TextEdit field is able to accept and render either plain text (using the .PlainText attribute) or HTML content (using the .HTML attribute).

At first this styled HTML text feature might seem irrelevant to have in a compositing package but it opens up a whole world of possibility in that you can now show rich text formatted documentation inline in your script's GUI, or you can generate HTML formatted reports and render logs using Fusion's scripting system and then show them in a simple UI Manager view for the artist to see in a quick glance.

HTML Code Editor.lua

Overview
This script is a Fusion Lua based example that works in Fusion 8.2.1 and Fusion 9 that allows you to edit HTML code in the edit field at the top of the view and see a live preview at the bottom of the window.

The ui:TextEdit control's HTML input automatically adds a pre-made HTML header/footage and CSS codeblock to the rendered content so the code you are editing needs to be written as if it is sitting inside of an existing HTML body tag.

This Lua script is intended primarily as a fu.UIManager GUI example that shows how to make a new window, add a ui:TextEdit field to accept typed in user input, and then display a live rendered Rich HTML output in a 2nd ui:TextEdit field that is marked "read only" and is updated automatically in real-time.

This live updating is achieved using the function win.On.CodeEntry.TextChanged(ev) code which has the .TextChanged event that is triggered every single time you update the text in the top view area of the HTML Text Editor window.

The line of code itm.HTMLPreview.HTML = itm.CodeEntry.PlainText copies the plain text formatted code you entered in the top "HTML Code Editor" view and pastes it into the lower "HTML Live Preview" window as rich text HTML formatted content. The UI Manager will translate the HTML tags it finds into styled HTML text formatting commands which provides you with visually styled textual elements like headings, italics, bolds, underlined links, and bulleted lists.

From my initial tests it looks like internet linked HTTP based image URLs will not be loaded in the preview window. It is possible to embed base64 encoded images inline in the webpage which is explained in my next "HTML Image Source Example" post.

Screenshot
HTML Code Editor.png
Download the Lua Script
HTML Code Editor.lua
Installation
Step 1. Copy the "HTML Code Editor.lua" script to your Fusion user preferences "Scripts/Comp/" folder.

Step 2. Once the script is copied into the "Scripts/Comp/" folder you can then run it from inside Fusion's GUI by going to the Script menu and selecting the "HTML Code Editor" item.
You do not have the required permissions to view the files attached to this post.
Last edited by AndrewHazelden on Wed Aug 16, 2017 11:31 am, edited 1 time in total.

User avatar
Dunn
Moderator
Posts: 348
Joined: Mon Aug 04, 2014 3:27 am
Location: Hamburg, Germany
Been thanked: 21 times
Contact:

Re: Building GUIs With Fusion's UI Manager

#11

Post by Dunn » Tue Aug 15, 2017 11:29 am

Hey Andrew, to get images into it, you can convert the image to Base64 : https://codebeautify.org/image-to-base64-converter
and use the Image Source code. I just tried it out and it works :) ..but yeah, hell lot of crazy code if you got lots of images :P .

User avatar
AndrewHazelden
Fusionista
Posts: 530
Joined: Fri Apr 03, 2015 2:20 pm
Location: West Dover, Nova Scotia, Canada
Been thanked: 76 times
Contact:

HTML Image Source Example

#12

Post by AndrewHazelden » Tue Aug 15, 2017 1:29 pm

Dunn wrote:Hey Andrew, to get images into it, you can convert the image to Base64 : https://codebeautify.org/image-to-base64-converter
and use the Image Source code. I just tried it out and it works :) ..but yeah, hell lot of crazy code if you got lots of images :P .
HTML Image Source Example

Overview

The "HTML Image Source.lua" script is a Fusion Lua based example that works in Fusion 8.2.1 and Fusion 9 that uses the HTML loading capacity of the ui:textField to display an image.

This example is based upon a tip from the WSL User Dunn. The basic idea is that you are able to use the CodeBeautify webpage translator tool to convert a PNG, or JPEG image from a binary image format into a base64 encoded inline HTML "Image Source" element that can be placed as HTML code inside of a ui:textField control.

Screenshot
HTML-Image-Source-Screenshot.png
Download
HTML-Image-Source-Example.zip
Installation

Step 1. Copy the "HTML Image Source.lua" script and the "fusion-logo.png.base64" image to your Fusion user preferences "Scripts/Comp/" folder.

Step 2. Once the script is copied into the "Scripts/Comp/" folder you can then run it from inside Fusion's GUI by going to the Script menu and selecting the "HTML Image Source" item.

How to Generate a base64 Image Resource Using a Web Based Tool

Step 1. Go to this webpage https://codebeautify.org/image-to-base64-converter and process your photo or logo image from a JPEG/PNG/GIF image format into a "Source Image" based inline html code format.

Step 2. Save the "Source Image" output from the Code Beautify conversion tool into a new textfile that is placed in the same folder as your UI Manager based .lua script. It is a good idea to give this converted image a unique name like "my-image.base64" so you can remember later on this media was encoded in the base64 format.

Step 3. If you copied the files in the installation steps to a different folder then specified by default, you will need to update the "base64Imagename" variable in the "HTML Image Source.lua" script to use the Fusion relative "Pathmap" based location where you copied the "fusion-logo.png.base64" image.

Base64 Encoding an Image from the Command Prompt

You can also use the Mac/Linux/Cygwin on Windows "base64" terminal program to base64 encode an image into the required format. Then you need to add the html header tag `<img src='data:image/png;base64,` and a footer tag of `'/>` to the base64 encoded image. You can type "man base64" in a terminal window for more details on the conversion tool.

MacOS base64 Encoding Terminal Commands:

Code: Select all

base64 --input="/Applications/Blackmagic Fusion 9/Fusion.app/Contents/MacOS/Library/Text Plus/Steel Hilight.bmp" --output="$HOME/Desktop/base64-encoded.tmp"
echo "<img src='data:image/png;base64," > "$HOME/Desktop/image.base64"
cat "$HOME/Desktop/base64-encoded.tmp" >> "$HOME/Desktop/image.base64" 
echo "'/>" >> "$HOME/Desktop/image.base64"
Linux base64 Encoding Terminal Commands

Code: Select all

base64 "/opt/BlackmagicDesign/Fusion9/Library/Text Plus/Steel Hilight.bmp" > "$HOME/Desktop/base64-encoded.tmp"
echo "<img src='data:image/png;base64," > "$HOME/Desktop/image.base64"
cat "$HOME/Desktop/base64-encoded.tmp" >> "$HOME/Desktop/image.base64" 
echo "'/>" >> "$HOME/Desktop/image.base64"
Note: To help you understand what the above terminal code does a bit better, the > chevron symbol pushes the output string from running the terminal command into a file on disk. The double >> chevron command concatenates the output string from running the terminal command onto the end of an existing file that is on disk.

Note: For accuracy you should change the "<img src='data:image/png;base64," part of the terminal command to so the HTML header text matches the image format you are converting:

JPEG image:

Code: Select all

<img src='data:image/jpg;base64,"
GIF image / GIF animation:

Code: Select all

<img src='data:image/gif;base64,"
PNG image:

Code: Select all

<img src='data:image/png;base64,"
BMP image:

Code: Select all

<img src='data:image/bmp;base64,"
You do not have the required permissions to view the files attached to this post.
Last edited by AndrewHazelden on Tue Aug 15, 2017 2:23 pm, edited 1 time in total.

User avatar
Chad
Fusionator
Posts: 1134
Joined: Fri Aug 08, 2014 12:11 pm
Been thanked: 23 times

Re: Building GUIs With Fusion's UI Manager

#13

Post by Chad » Tue Aug 15, 2017 2:22 pm

Dunn wrote: ..but yeah, hell lot of crazy code if you got lots of images :P .
If you want to embed images into a Fusion plugin, you might be doing something similar. At least, that's how Indicated's plugins do it. I think it's a reasonable option that avoids external files. :)

User avatar
AndrewHazelden
Fusionista
Posts: 530
Joined: Fri Apr 03, 2015 2:20 pm
Location: West Dover, Nova Scotia, Canada
Been thanked: 76 times
Contact:

Media Tree Script

#14

Post by AndrewHazelden » Mon Aug 28, 2017 6:15 am

Overview

Here's a new UI Manager example script called "Media Tree" that uses a ui:Tree view to list all of the Loader, Saver, FBXMesh3D, and AlembicMesh3D node based media in your Fusion composite.

Single click on a row in the tree view to copy the filepath to your clipboard. Double click on a row to open the containing folder for the media asset up in a Finder/Explorer/Nautilus folder browsing window.

Download the Media Tree Script
Media Tree.lua
Screenshot
Media-Tree-Screenshot-v0.3.png
Usage

Step 1. Save your fusion composite to disk.

Step 2. Select the Script > Media Tree menu item. This will open a window with a tree view list of the loader and saver nodes in your composite.

Step 3. Single click on a row in the tree view to copy the filepath to your clipboard. Double click on a row to open the containing folder for the media asset up in a Finder/Explorer/Nautilus folder browsing window.

Step 4. After the "Media Tree" window is open, any time you re-save your Fusion .comp file in Fusion's GUI the contents will be updated automatically in the window.

Installation
Copy this script to your Fusion 8.2.1+ user preferences "Scripts/Comp/" folder.

The Linux copy to clipboard command is "xclip". This requires a custom xclip tool install on Linux:

Debian/Ubuntu:
sudo apt-get install xclip

Redhat/Centos/Fedora:
yum install xclip
You do not have the required permissions to view the files attached to this post.
Last edited by AndrewHazelden on Mon Sep 04, 2017 3:26 am, edited 1 time in total.

User avatar
AndrewHazelden
Fusionista
Posts: 530
Joined: Fri Apr 03, 2015 2:20 pm
Location: West Dover, Nova Scotia, Canada
Been thanked: 76 times
Contact:

Hex Dump Script

#15

Post by AndrewHazelden » Fri Sep 01, 2017 12:42 pm

Overview

The "Hex Dump" UI Manager example works in Fusion 8.2.1+ and allows you you quickly view the hex formatted contents of the currently selected Saver, Loader, or Geometry nodes in your composite in a UI Manager based Tree view list.

Hex Dump is based upon the Lua5.1 'xl.lua' example script.

Since this example loads the whole file into the tree view at once it is a good idea to select files less then 200KB in size or you may have to wait a long time for it to finish loading.

An AddNotify based "Comp_Activate_Tool" event is used to track the node selection changes in the flow area. This will tell the Hex Dump view to update automatically. You can also click the "Refresh" button in the window to manually update the view.

Installation
Copy this script to your Fusion 8.2.1+ user preferences "Scripts/Comp/" folder.

Download
Hex-Dump.lua
Screenshot
hex-dump-screenshot.png
You do not have the required permissions to view the files attached to this post.
Last edited by AndrewHazelden on Mon Sep 04, 2017 3:27 am, edited 1 time in total.