Metal Valet Tray & How to Make Your Own Fusion 360 API Application

It all started with me wanting to design a metal velvet tray, but to do this is just 6 rectangles and a few fillets, not a real challenge.

So I wanted to make it super customizable something that simple user parameters aren't enough for.

So this guide is how to make a fusion 360 API App. I will talk about probably the simplest kind of all, the one that gets parameters and makes a model. The only twist is that my app takes more then simple parameters.

fusion 360 app, any tier

basic knowledge of fusion 360 and coding

The first Step is to define key characteristics, a valet tray is made of:

the tray is made out of the pockets, inner offset between them, outer offset from the frame, rows count and height, columns count and width. With only those parameters the model parameters and rectangular pattern are enough but we forgot the biggest part. Not all pockets are made equal some are 2x1 or 2x2 some are filled and not used and some rows are taller and some columns wider.

So with those field in mind, how do we take the complex not numbers and not limited by an amount parameters?

with our own custom fusion 360 script/add-in.

First I assume you have a basic knowledge of programing.

To open a new script be in any design and go to Utilities->Add-ins (scripts and add-ins) click on the + sign then "Create script or add-in". Chose script add a name and description make sure you choose python and click Create. After that right click on the name in the list of scripts and choose "edit in code editor" if fusion prompts you to install VS code let it. You can also chose to "open file location" and work on the code with any editor.

The starting skeleton will be:

this when the script is executed the run func starts. with the ui variable we can write text messages and ask for parameters so lets check it, change the ui.messageBox(f'"{app.activeDocument.name}" is the active Document.') to ui.messageBox('hello world!') save and then run the script by clicking on the button next to the script name in the scripts list. You should see a popup window with "hello world!".

From now onward each step will have a python file at the bottom, i recommend opening it in the VS code window before reading the step, and looking at the code while reading to see the parts i explain in the step. Now VS code may show that there are errors in the script but that because the files aren't complete and only a part of the entire script.

now there is the confusing part, to understand what to do we need to look at the API documentation.

this might be overwhelming but attached is the complete structure of the file. At the end we will want that run will define the command "register it" and call for created func, created will popup a input window asking for all important dimensions and parameters and when needed inputChanged func will update the popup window. when the parameters are submitted the created func will call the execute which will make all the model features that make the model: sketches, extrudes and fillets. After makin the model the stop command will be called and "clean up" any thing.

In the file attached is the basic code for collecting the data we initialize a window and add Command Inputs each one has fields id, name and for Integer Spinner for example there are also min value, max value, step size.

The tables are made to be able to contain a changing amount of inputs that are the same (don't have to be) in multiple columns and rows. Right now they all have 1 row and buttons to add more the logic for adding more rows will be in the inputChanged func. You can delete the last lines that connect call for the other funcs or add the classes and run the code to see the input window. The solution to take more the 1x1 rectangles is the third table which takes the starting row, column and ending row, column and also is it a pocket or filled (no pocket).

When we write anything into the input box or check/uncheck a checkbox or click a button the InputChanged func is called with the input command that was changed so now it's a simple game of recognizing which command is it and updating the window accordingly. so for the Add button's we add a row to the table they are in and for the checkbox we enable/disable the visibility of the tables we also need to turn the tables visibility of by default in the Created func.

Now the only remining task is to actually make the 3d model, so when we click "ok" on the input window the code calls the "MakeGridCommandExecuteHandler" class's "notify" command. The code inside the class is long so i wrote little titles for the sections, section A is where we receive/name all the Basic inputs we get them with inputs.itemById("id").value . Now for the advanced parameters: the sizes tables and the shapes table we don't want the values but the info they give us. We can define all the pockets as rectangles starting form the point that values are (sum width until this column, sum height until this row) and a second row where we add the height and size of the rectangle and we need to make sure we know where the special rectangles are so we can handle them with a different but still very similar logic so we save a matrix that says which are what and a dictionary for the points of the special rectangles. We also some what "processes" (just using it as default when calculating the height until and such) the normal input so the normal and custom inputs are in the same place and the logic from here will work for both and the code will be cleaner.

Section C us where it starts to get interesting, we use the part of the API that actually interacts with the 3d model. We define a sketch and with all the info from part B we can sketch the grid of the tray, one time we sketch the base of the tray and then extrude and on it we sketch the grid and extrude it also. After we have the shape we add the fillets (section D) to the vertical edges, the outer ones and the ones inside the grid.

Then we have the 3d model and we finished the script for now. Copy the ValetTray.py code into your file and try to run it in fusion 360. Test different parameters (valid parameters) and look at the results. (the file is the last version so it includes changes i made in the next step). The full folder with all the files is here in git hub.

To make the user experience a little better we can make the ui look good, so that is what we will do. First we can replace the ScriptIcon.svg with any other svg we will like to be the icon of the app.

In the .manifest file we can change the description, credited author, set a version number, edit supported OS list and change the name of the icon image file.

As you can see in the code I changed the style of the drop down to LabeledIconDropDownStyle which means there is also an icon next to each option in the drop down. The icon should be 16x16 and 32x32 in a folder of there own so i made a Resources folder in it Icons folder and in it a folder for each option pocket, filled. In each one there should be a 16x16.png and 32x32.png that are the icons for different sizes of display the 16x16 should be enough. I didn't actually made any icon i just searched for "blue rectangle emoji" 🟦 also found one with a white square in it ⏹️ for the hole and copied each to a emoji to PNG convertor. I chose the 32x32 size and you may need to down scale to 16x16 and then put the PNG in the appropriate folders and listed the path to each folder when adding each option in the drop down.

I also added instructions for the table for costume rectangles shapes with a read-only text box:

Test your knowledge

Now I have a part for you try and add a preview that shows the part that will be generated with the current inputs, hint there is already a simple way to do it and can be seen in this page. Attached is the code with the added part I made changes / added in lines 221-227, 415-416, 495-508

From the ADD-INS drop down you can click "Fusion app store" there publish -> "access publisher corner" or just click this link, make sure to log in. Fill in the publisher information company URL can be left empty and the support contact can be your email. Then you should go into the my page tab and fill in company name and description, I also added a screenshot of a random model I made. Then You may need to refresh the page and click on the blue "publish a new product" button. Fill in the language OS and such when getting into the big page look at the second picture of this step (download if you can't zoom in) those are generally how the fields should look. The zip file that is the app file is just the folder of the scrip compressed into a zip.

Then continue and in the second part under Manufacturing choose fusion 360 as the app and in categories choose the stuff that apply to your app for the valet tray it is General Utilities, CAM, 3D Printing. Then Continue and at the end click "Submit" (some times the first click doesn't work so make sure the button is unclickable to know it registered).

Now we can return to the Publisher Corner and see the app under apps > unpublished.

This is it, we made an app for fusion 360 and submitted it for review. Now we can kick back and relax and check on the statue once in a while (you should get an email but still it's better to check). If any issues arise in the publishing read the guidelines and what wasn't up to code and change the bad parts and resubmit.