 Howdy guys, IndiePixel here and what I wanted to do in this video was show you guys really quickly how to make your own custom help pages. All right, just helps your HDAs feel a little bit more pro. And also if you forget what things do, there's also a good place to document yourself. So just another facet to creating and working with HDAs, something that you should know. All right, we're also going to cover, you know, how to add the icon to our HDA. And we're going to go over how all this stuff is created using the wiki markup that SideFX provides us. Yeah, and we're going to go walk through each step. All right, so let's get going. All right, so let's get started with setting up an HDA so we can actually apply the help to our HDA itself. So give us something to work with, right? So I'm going to hit tab and create a new geometry node. And I'm going to call this one box maker. It's good for examples. Really simple. All right, I'm going to drop a box node inside of that. And we're going to go and make this into a digital asset. All right, and I'm going to go and add my namespace and then my version number. All right, it's actually kind of important when you are working with the help in your HDAs to add these two things. That way, they actually show up in the help card itself. All right. So let's go and remove these guys. I'm just going to do that. Capitalize that B there, remove those colons. And now I am going to place this just on my desktop because I'm going to throw it away later. All right, so I'm going to hit accept. All right, and destroy all spare parameters. Very cool. And what I want to do is I'm going to do version 1.0. And let's go and set up our parameters here. So I'm going to go and hide all the default UI. All right. So I'm going to select them all and select the invisible toggle there and then hit apply. That makes all the UI go away. All right. And so I'm going to dive back inside. And we're going to go and I'm going to expose the size parameter and the uniform scale. I'm just holding down alt and the middle mouse clicking on my mouse. All right. So now I have two parameters. And I'm just going to start with those because I just want to show you guys how to set this up so that it basically kind of mimics what you usually see when you go and right click help for any of these particular nodes. So you can right click on any of those guys. We're basically going to go and get this all set up. Obviously not this verbose. I'm just going to show you how to do the general set up for all this stuff. Cool. All right. So with that all set up, we are good to go. Let's move over into the help tab now. And this is where we are going to go and write all of our markup. All right. And so there is actually a markup reference in the Houdini documentation. All right. So if we go and do Houdini help markup like so. Yeah. Let me get the wiki markup reference in here. And it's got a couple, you know, getting started guides and stuff like that. But there's quite a bit of markup reference. So I'm just going to run you through the basics here. And then you can come up to this markup reference and learn a little bit more about all the other stuff, because there's quite a bit of things you can do with this. I just want to point that out. All right. So let's go back to Houdini. And the first thing that we're going to do is we're going to define a title. Now to define a title, we just use these two equal signs. All right. And then we put our title that we want in the middle. So then I'm just going to call this box maker like so. And then it's usually good practice to indicate what context this particular node exists in. Since we made it in the obj context, we want to put that in there. So I'm going to do hashtag context. All right. So this is an actual page property for these particular things. So you can come up here and, you know, get a list of all the page properties. All right. So there's a page property here. And I'm going to give it a value of obj. All right. So with that done, just that little bit done, let's hit apply. And let's open up the help now for our box maker. So I need to go to help like so. And let it load up. And look at that. We have box maker 1.0. And it's an object node. All right. So it's pulling out the version number because we went and assigned our two colons for the version number. And we're telling it that it is a part of the obj context. All right. So you get a lot of information just by doing those simple steps. All right. So the next thing I want to do, I want to give this custom icon. All right. And so to do that, we're going to utilize the icon page property. All right. So I'm going to do hashtag icon. And then we need to go and I'm going to use the optef to do this. So if you're not familiar with it, we say optef. And then we do a colon, a period, and then a question mark. And what this is saying is it's going to look into this operator itself to see if, you know, the file that I put after this question mark actually exists. And currently it does not. And to do that, we need to go to this extra files tab up here. And we need to add the icon that we want to use for this node inside of here. All right. So what we need to do is come all the way down to file node, go and select it. In this case, I'm just going to download a cardboard box icon. Nothing crazy. So hit, hit accept like so. And then we need to add the file. And so that puts the file into this extra files list. All right. So I'm going to double click it to a control, see the copy it and then go back to the help. And now we can actually put that right after that question mark. Let's hit apply. And then all we need to do is refresh our help. We could see our changes. And look at that, you now have an icon for our box maker. We can actually go and also use this to put the icon on the HD itself. So currently it's just using the default obj go node or icon, I should say. And so if we go to basic, what we need to do is let's just paste that, but we need to actually update it. And so we need to do forward slash IP. I think it is underscore object forward slash. I think this is correct. I'm trying to remember off the top of my head here forward slash. And then we do box maker underscore 1.0. And then the question mark, let's see what that does. Nope. And I wonder if it actually just wants the colon here. Well, what can do is you could just select it from that little button to so I'm going to go back into this. This will actually show me what the opt f should be if I leave this embed icon in operator. All right, and so I hit accept. Right. And then we hit apply and accept down here. Now I have the icon on my HDA. And if we take a look at the type properties now, there's the, oh, it was a lowercase. That's what it was. And no underscores between those guys. So the colon's lowercase IP. And there we go. So yeah, anyways, it was kind of a tangent there. Now we have an icon for our HDA as well. So just helps clear things up. Awesome. Let's go back to the help now. All right, so now we have an icon there. The next part is to give the summary. Usually there's like a really quick summary right below here. And to do that, we use three quotes. And then we start typing out our summary. So this is going to be automatically creates a box geo for us for you. There you go. And then another three quotes right after the end. And then hit apply. And then we go and refresh. And look at that. Automatically creates a box geo for you. All right, so moving on, that's the summary. So it's three quotes on both sides of the text. And then the next thing that we want to do, usually we have like some, you know, high level overview. And so this is a sub heading or like a heading to if you will for coming from like HTML. So to do this rather than single equal sign, we do a double equal sign on both sides of our heading too. All right, so we do like overview, like so. And we got let's hit apply and take a look at the changes there. Awesome. So now we have overview. And now usually the way that this, you know, works, you have the overview. And then you have, you know, the description of your parameters, like if you go to any of these other guys, you know, you can take a look at who do you need as or side effects, I should say. So they have, you know, this parameters line, then we have a heading to another heading to a bunch of labels and stuff like that, which we're going to get into here in a second. All right, so let's go back so you can just hit the back button. We'll take us back to our help. All right, so the next thing I want to do is set up that parameters. So to set up the parameters such that we have this type of, you know, heading with the line underneath it, we need to use the amp sand or that symbol, sorry, that symbol for this. So we say parameters, like so, hit apply, and then refresh it. And then you got to look at that. And because now we have two things here, we have overview and parameters is starting to populate this little table of contents for us. So let's go now and start to put some information underneath overview and parameters. So what I'm going to do is just put for the overview like paragraph. Usually that's what side effects does. Obviously, you're more welcome to do whatever you want, right? But basically, the way this works is we're just going to, you know, start typing some text for paragraph, right? So I maybe want to give them some information about how to use this note. So you can simply go to the tab menu, yeah, tab menu, then hit or then go to the IndiePixel option. Then let's make another line here. All right. And so then go to Utils and select the box maker. Boom. Let's take a look at that. So I'm going to hit apply. And then we're going to go and refresh. There we go. So now we have, you know, some text there. Now, if you want to have, you know, multiple paragraphs, all you need to do is just put a space in between the two. All right. So, you know, we just separate our paragraphs like this, separate paragraphs by adding a full line between paragraphs. There you go. And hit apply and then refresh. There you go. So now we can have two paragraphs. Pretty cool. All right. So let's make a little space between all this stuff just so you can see it really quickly. All right. So underneath the parameters now, what we want to do is we want to first obviously take a look at, you know, which parameters we want to document. All right. So the first one is size. So what we would do is we say size colon and then space or hit enter on the keyboard. And then we want to tab in. All right. And what we want to do first is we want to give an internal name because you might want to use this somewhere else inside of your documentation. So to do that, we just give it this little hashtag ID. And the ID for this particular parameter is going to be, let's do size. Yeah. Then right below that, we want to give the actual information. All right. So this controls the size of the box in all axes. All right. So then let's go and hit apply and take a look at that. Look at that. So now we're starting to list out all the parameters. So the next one is going to be this is our uniform scale. So we'll do uniform scale for the label. We'll do a colon. Then we'll give it the ID. So we'll call this uniform scale or one word. And we'll say this controls the global scale of the box. Apply then refresh. All right. There you go. So, you know, from a general overview, those are pretty much like the core things we're going to use a lot. One thing that is cool to do, let's do this here. So if you want to send people to, let's say your website, I'm going to do another line here and we'll call this developer info. All right, so apply. All right. So we make another info and we actually need to make that all one. All right, we'll do apply. And it's not like in that we just did all lowercase here. And we'll do a space. I believe that's what it was. No, I'm just picking up the last one there. So we'll just leave it at info like so. And then below that what I want to do is give a link to the website. So we'll do IndiePixel like so. And then we want to put on website after that. And then basically we need to do a single pipe. All right. And we want to do HTTP forward slash forward slash IndiePixel.com. And yeah, that should work. Let's hit apply. And then refresh. And look at that. We have a link now so I can click that. And it'll load up the IndiePixel website right inside of that little browser. Pretty cool stuff. Yeah. All right. So that's pretty much then you can just hit the back button to go back to your help after you're done testing. So that's pretty much kind of the core to get you started. Like I said earlier, it's a good idea to go and just read the docs a little bit more so you can see all the other things you can do because you can do quite a few things here. So that is what I wanted to show in this particular video. Thanks so much.