VisualSwift started as a tool for generating SwiftUI code mainly for creating iOS apps or at least prototypes using Visual Programming.
Recently it evolved to be a tool for creating and hosting AUv3 plugins.
So what can you do with VisualSwift?
You can quickly try audio synthesis ideas, for example, the following schematic shows a very simple instrument consisting of an Oscillator and an ADSR. Note the different colours and connector types: red for Midi, white for Poly Audio, blue for Mono Audio, green for timestamped events and yellow for GUI elements:
Simple schematic for testing the Poly ADSR audio component.
2) With one button click you can generate an Xcode Project. You can then build the project and install the built AUv3 extension on an iPad. You can also use the generated project as a starting template for your own code.
SwiftUI code generated by VisualSwift ready to be exported as part of an Xcode project. There are also other generated code tabs for declaring variables, low level DSP code, Factory Presets, plugging parameters to the GUI etc…
When you run VisualSwift, you should see the standard iPadOS document browser view shown below:
When you create a new document, it should start as follows:
There are several aspects of the screenshot above that are worth understanding. There is a small schematic below a bigger one. The bigger schematic is the root of the app, it contains one component of type NavigationView.
The bottom of the NavigationView is connected to another schematic with a Content component. The smaller schematic represents what is inside the NavigationView. In the next step we’ll connect the Content component to other views that will show up as the contents of the NavigationView.
To start describing the contents of the NavigationView, drag a link from the Content output ( input and outputs are represented by circular connectors, inputs to the left and outputs to the right of components ).
When the touch gesture ends, a context menu should appear as follows:
If you choose the Color component from the menu, the result is an app consisting of a blue page as follows:
VisualSwift follows the same concepts used by Apple’s SwiftUI. An important part of creating UI layouts are the Stack views: VStack, HStack and ZStack. For example, if you would want to layout 3 views vertically you’d use the VStack:
Now we have 3 schematics in 3 hierarchical levels. The root schematic consists of a NavigationView. Inside the NavigationView there is a VStack and inside the VStack 3 Color views with Red, Green and Blue colors.
If you replace the VStack with a HStack then you get the following:
Note that the VStack is still in the schematic inside the NavigationView but because it is disconnected from the Content component it’s not being used.
Just like in SwiftUI, modifiers can also be applied to views, this is done in a similar way to specifying the contents of a components but now instead of connecting from a Content component, you need to connect from the “mods” component. For example if you connect the mods component to a padding component the following happens:
The page we have created now has been modified to have padding around it.
If we need the Swift code for our very simple app, we can slide the code panel from the right:
The swift code can then be copied or exported via the Pasteboard or Airdrop and pasted in an Xcode project for building the app.
This example was kept very simple on purpose, the more complex an application is, the more powerful and quick will be to work visually using Visual Programming in VisualSwift.
When you want to make changes to specific element on a page, you just drill down the visual hierarchy with each level isolating a smaller relevant part.
VisualSwift an iPadOS tool for creating apps quickly without requiring coding. After creating an App visually, swift code can be generated and exported to be included in an Xcode project and built.
The screenshot below shows a simple example of how a VStack, a HStack and a ZStack can be implemented using Visual Programming and to the right the Swift code generated by VisualSwift:
VisualSwift is currently an iPadOS app but is useful for creating iOS/iPadOS and MacOS app. It is not available in the App Store yet but a test version is available through TestFlight for anyone interested in being involved from the very beginning, you’ll find the link to it in the forum at: https://www.visualswift.com/forum/viewtopic.php?f=2&t=1
VisualSwift is also useful for learning SwiftUI due to the Visual, Hierarchical nature of Visual Programming and the immediate results when tweaking padding, font sizes etc.
