In summary we want to create the following diagram as a reusable VisualSwift module with a GUI:
![Image](https://visualswift.com/wp-content/uploads/2020/07/Screenshot-2020-07-27-at-18.32.21.png)
3-How to create a custom Module with GUI
Start by double-tapping an empty part of the schematic:
![Image](https://visualswift.com/wp-content/uploads/2020/07/Screenshot-2020-07-27-at-20.22.05.png)
A custom module will start with one of VStack, HStack or ZStack depending on how you want to align the View elements inside it: Vertically, Horizontally or in overlapping layers respectively.
For our custom Smooth module lets use a VStack:
![Image](https://visualswift.com/wp-content/uploads/2020/07/Screenshot-2020-07-27-at-20.26.08.png)
When you go inside the newly created VStack component, you should see two components called "Content" and "mods" :
![Image](https://visualswift.com/wp-content/uploads/2020/07/Screenshot-2020-07-27-at-20.59.14.png)
From the yellow output of the Content component we can connect yellow View components in series and they will appear in the GUI panel of the parent VStack aligned vertically.
For example if we connect two knobs, the VStack would show them vertically aligned:
![Image](https://visualswift.com/wp-content/uploads/2020/07/Screenshot-2020-07-27-at-21.03.09.png)
In our case we'll only require one Knob to control the smoothness. The smooth module also needs an audio input and an audio output which will be components inside it and will show corresponding connectors on the parent:
![Image](https://visualswift.com/wp-content/uploads/2020/07/Screenshot-2020-07-27-at-21.05.50.png)
Don't forget to rename it to "Smooth" which will be important when dragging it to the Custom toolbox:
![Image](https://visualswift.com/wp-content/uploads/2020/07/Screenshot-2020-07-27-at-21.09.15.png)
We now have a shell for the custom Smooth module but didn't create the audio schematic yet.
Now you should understand the following schematic which consists of a fully functional reusable Smooth module with GUI:
![Image](https://visualswift.com/wp-content/uploads/2020/07/Screenshot-2020-07-27-at-21.16.51.png)
The important parts of the schematic above are:
1) A Content component connected to a Knob component through yellow View connectors which make the Knob appear in the parent's canvas.
2) Poly audio input and output connectors to be used for inserting this module inside more complex schematics.
3) Two PolyMult and one PolyAdd components that recreate the Faust diagram at the top of this post.
4) The Modular and Hierarchical nature of VisualSwift with higher level custom components being implemented from internal schematics with child components.
5) The importance of connector types with the yellow View connectors used for GUI, light gray Poly audio components for streams of audio, green Float and Trigger connectors for events with timestamp to be inserted with sample precision inside the audio streams.
4-How to store the custom module for future use
To store the Smooth module in your custom toolbox simply open the Custom side panel and drag from the duplicate top right corner of the smooth module and drop in the "Drop Here" square:
![Image](https://visualswift.com/wp-content/uploads/2020/07/Screenshot-2020-07-27-at-21.40.08.png)
5-Using the new module
The Smooth module should now stay in the Custom toolbox and you can drag it into a new schematic without having to worry about what's inside it.
The following schematic shows the Smooth. module in action rounding the corners of a Square waveform:
![Image](https://visualswift.com/wp-content/uploads/2020/07/Screenshot-2020-07-27-at-21.43.56.png)
The Smooth module is very simple but the powerful Modular and Hierarchical concepts are the same for more complex modules like for example a full synthesiser that one developer creates in VisualSwift and shares for others to use.