Houdini Tutorial - Dynamic UI in HDA

I was creating an export tool a few months back inside Houdini and one of the problems her first face was how can I allow the tool to us at various possible inputs and present the user a UI that is configured solely for the input geometry and to that I solve it using dynamic you eyes let's imagine a scenario we have a bunch of points and the points have an attribute called letters in our HEA we want to look at list of unique letters and create a float slider for each letter well if we already know that there are a b c and d unique letters we can manually just create four respective float sliders so what's the problem well if we want to switch the input and now we have an E and F attribute we don't want to go back to the tool and create flow sliders for the two additional attributes we wanted our tool to be smart enough to create these sliders itself all right let's going to Houdini and set up the scenario drop a drama tree no dive right in create a sphere saw scare to some points for this tutorial let's keep it to 10 points for now so we can view the geometry stretch it a little easier let's drop down point angle and I'm going to type a code in the text editor just so the words are bigger and easier to you to see and I'll just copy and paste the code into the renkel you can type directly into the rango itself we first want to create an array of letters to choose from so as to allow us to create various random inputs later to test our HDA better I'm going to separate each letter with an underscore so I can easily create a string array by using the split function what it does is that it takes an input string and splits it into an array whenever it encounters an underscore for our case so now we have an array it is time to assign random letters in the array through our points we create two sliders one which indicates from which index we start to choose from and the other indicates the last index we can choose from we use the random function based on the point number and we fit it to the min and Max range that is indicated on slider we then pass the value to an integer and use it as the index to select select the appropriate letter in the array and with that we have our attribute setup now we just drop down an aisle at the end and this will be the input to our HDA now remember what we talked about it start we wanted to create looks like this for each unique letter so in our HT 8 that is what we have to process drop down at the pointer and go and for this part we want to run through all the points only once and not in parallel for that we switch to Ren go to detail call it detect unique we drop down the output for good measure and that will be our basis for our HDA now let's try the code in the record itself for that I'm going back to the text editor we first grab there's also a number of points using the endpoints function and create an empty array to contain our unique letters we use a for loop to iterate through all the points and for each point we can use the find function to see the current process points letter is inside the unique letters array if it is not inside the function would return a negative number so if it's below zero we append the letter to the array we finally assigned this let this array to a detail attribute called unique letters that's all we have to do now let's grab the tree notes and create a HDA out of it we call it dynamic UI and we got ourselves a hea so inside the HDA there is the scripts tab and here's where all the magic happens we can write all kinds of customizable functions to further lever up our HD AAS we are going to select the Python module which allows us to solve Python functions where we can access functions anywhere from the HDA we're gonna create three buttons and we're gonna name them method a method B and clear there isn't for the method am method B buttons is because we are going to explore two ways to create dynamic you eyes and the Clear button is there to clear out I will dynamically create a UI just keep that in mind and it'll get clearer as the lesson goes on now a little introduction to Python in Houdini for those who have not used Python in Houdini before one of the easiest ways to test out snippets of code is by using the Python shell let's try to first use the shell to see if we can get our detail attribute containing the unique letters we create a variable called note and we can click on our history eighth-note and drag it into the shell as we can see our HDA note is now assigned to our variable and we see that the note is an object of the hood song note class so if this information what we can go about doing is google search who dom node and we can see a list of functions we can use the node is currently referring to the node itself and not the geometry data so to grab the data itself there is a geometry function in the class which returns a hood geometry and if we look at the documentation for who geometry we can see that there is a function called string lease attribute value that is what we need because what it does is it returns the detail string array or in pythons case lists so let's just do those steps in the Python shell we grab drama tree by calling the geometry function as sin and we get detail attribute by using the string list attribute value and from the Python shell itself we can see that the return value corresponds to the detail attribute in the geometry spreadsheet since everything is working let's now get back to the HTA's Python module and tie out some functions to do just that I'm going back to the text editor first so it's easier on the eyes we create three functions method a method B and clear all of them would require a reference to our HD a note to work so let's add note to our function parameters so we are going to do exactly what we did in the Python shell get the geometry get the list and assign it to a variable called letter this so a little bit of prep work you now have our buttons apply to module and our functions what we want to do now is that when we press the button we want to run a callback script to assess a Python module and from there you want to call the functions inside it so in this tutorial we are going to explore two ways to access this function in the Python module one which is the hood pH M or Python DV module function and another is the keyword arguments or quacks method essentially quass and square bracket note refers to a reference of the current node and from the node itself we can call the HTM module using the HTML function let's link the buttons to the respective functions I'm going to type the various callback scripts for the buttons in the text editor first and then I'll show you where we can type these lines of code in the HCA to link the buttons to the functions for button a let's try the hood or pH M method the syntax would be who the pH m dot method a bracket quarks square bracket no the reason we put quacks square burg had no inside the function is because the function that we have written requires a reference to note as a parameter alright for button B let's try to cross matter so quacks square root n note which means a reference to current node dot HTM module thought meta be open brackets quarks square brackets note and for the clear button let's just use a pH a method because it's shorter we go back to the HCA and we click on the buttons in the callbacks group we can paste the respective lines in it and remember to switch the line to Python s by default it would be age group the callback script would be run whenever we press button finally I'm gonna be start pasting the code that I have written in the Python module good now let's print out test to the Python editor whenever we press the Clear button let's press the button and looks like there's an error the reason for that is because I forgot to type the colon next to the clear function and now when you press it e it works let's finally get to the meat of the tutorial dynamic you eyes I'm going to go over to methods method a revolving around the add spare palm tuple function and Method B around the palm template group concept now back to the Python module we will go through each letter in the letter list and we'll create a floating parameter using the hood float pump template function this function requires only three compulsory parameters the name the label and its size the rest are optional you can find out more by looking at the documentation online we then assign this parameters to the node using the add spare Palm tuple function from the node for Method B will going to explore the palm template groups essentially what it does is that he allows us to grep the current parameter definition of our HDA and after grabbing it we can modify it and then finally reassign it back to the anul so we create a variable called group and assign the notes parameter definition using this palm template group function again we look through the letter list and create a float parameter for each letter with the hood float palm template function we then append this parameter to the group using the group's append function once we are happy with the editor palm template group we can reassign it back to the node with the node set palm template group function oops looks like we have an error and that is once again because of the clear function for now I'll just put a pass and as you can see when clicked button we are creating the flow parameters but wait if we were to click the button again we see an error pops up this is because in HD a every parameter have to have a unique name and what we are trying to do is creating this parameter with the same name as an existing one even if we were to manually try to create a parameter with the same name as you can see Houdini doesn't allow that and automatically renamed the parameter for the sake of this example what we can do as an easy solution is we can use the Clear button to run the clear function to clear the parameters whenever we create this dynamic parameters what we are essentially creating is pair parameters so what we can do to remove it it's just called the remove spare pubb's function and once that is supplied you can see that the note is now working now here's a little something extra let's create a float parameter and a folder put the float parameter inside a folder and we shall name a folder my splendid folder all right so now if we create the UI dynamically he will create the parameters below the current UI so what if I want to create a parameter specifically in the folder well going back to the documentation z-- c s bump comfortable has second parameter which is called in folder what it allows us to do is specify a folder to put the parameters in and the third parameter ask is if we would like to create any missing folder if the folder in the second parameter is non-existent one contrary step the second parameter requires a sequence of folders and as shown in the example if we only have one folder we see need to put it in brackets and add a comma at the end now let's modify our functions to allow us to put parameters in the folder we input the label of the folder UI instead of the name of the folder UI and that was the reason why I gave the ridiculous name just to drive home the point for the Palm template group instead of the append function we can use a pen to folder function instead just going to get a commis right copy pace and there we go our UI is created inside the folder so now you may us why method a and method B then both seems to be working both seems to be giving the results that b1 well to illustrate this as well as to exercise my drawing skills let me explain using a sorry an illustration imagine we have a little monkey this little monkey starts writing some parameters and my oh my he has a tons of it so the little monkey grab all the parameters and hate towards the HDA now let's look at what the monkey does for meta a the monkey reaches to the top of the stack hello and behold he Gretz but one parameter opens the HDA throws it in and shuts it he then grabs the next parameter opens the HTA Troezen in and shuts it grabs the next one open the DJ throws it in shuts it can you imagine how tedious this process could be no for Method B - monkey opens a HEA perhaps not one but the entire stack shows it into the HEA as smashes it shot da similar to the monkey each time we call ex pom-pom tuple function Houdini has make an IO call to write the parameter and then save it whereas for set pom template group we can get to entire parameter definition and edit whatever you want to it and then put it back to the HT a in a single call for the sake of proving how different speed can be let's modify the code a little by the way you don't have to follow is part of tutorial back to the Python module let's import time and create the timer at the start and at the end of the methods and print out the elapsed time let's open the Python shell as we will be printing the elapsed time to it and before that dive into our HTA to modify the vex code a bit let's emphasize the speed difference by creating a whole lot of other extra parameters we use a for loop to create 400 parameters and we can then use this printf function to create a string instead of printing the output out now let's try method a and that took three point six five seconds and what about Method B well 0.016 seconds there is more than 200 times faster of course this gets more obvious the more parameters you have to create all right so finally for the last part at the moment of HTA isn't as dynamic as we hope to be yet it still requires our suppress buttons to populate the UI what if we want to take a step further and create the UI upon the input change well we can do just that let me just delete the extra lines of code first to get back to where we were before now let's create two inputs on the Left we have note that creates two parameters and on the right we have note that creates seven parameters okay so in the HDA under script section apart from the Python module event handler there are many other event handlers we could choose from and what we want is the on input changed event and let's tell the htaed when our input changes it should first run the clear functions to clear our spare parameters and use method B to populate our parameters click apply and see if it works well the parents are indeed being updated upon the input change but look at what we have here the left node is supposed to have two parameters and the right node is supposed to have seven so why is it that the right node is creating two parameters in the left seven well let's run through the order of events we have our HTA and with it the input data entering the notes inside the HDA we have two imaginary notes one has six unique letters and one has four unique words power to this input one was connected and so six flood sliders were created and the info data inside the HDA reflects the same all right so now we switch to the input two so in our script section in our HDA we tell it some instructions to do upon the input change we tell a HTA to clear the parameters populate the parameters with the current data and only then with the notes inside the HT a gets cook and all updated instead what we would one is upon switching the HT Asia first scrap the data and process it then we clear the parameters and then we populate the HDA with the newly processed data so now we got it all figured out let's go back to you need to implement them so as quat's note is a salt note let's look at the documentation inside we can see there's a node function the returns to note at a given path so if this we can grab any note inside HDA we then by further and we see that the return node has a function cook and read faucet to cook cook means update so we can type quartz node dot note in put the reason for input is because the note in our HTA is called input dot cook force equals one and now if we apply it we can see the left not creates two parameters and the right create seven which is correct and that concludes the tutorial thank you for listening and I hope this has been helpful to you if you have any feedback on how I can improve the setup or the tutorial itself please feel free to let me know thank you and goodbye

Channel: ChunYou Sim

Views: 5,687

Keywords: Houdini, Tutorial, Dynamic UI, HDA, Python, Vex, 3D

Id: I9Tr1lWVb0Q

Length: 25min 9sec (1509 seconds)

Published: Sun Mar 24 2019