This version features a major refactoring of the view hierarchy allowing shadows to be shown outside of views, even when clipping is activated for subviews.
A lot of new nodes were also added, mostly allowing more properties to be set for a view such as shadows, gradients etc. These nodes replace the previous view node “Interface View”, which was limited and old.
This release offers an updated view hierarchy, allowing shadows to be shown outside views, even when clipping is active. A lot of new nodes have been added, replacing the ”one size fits all” node ”InterfaceNode”. Overall memory management optimisations, show borders in view editor added and a small UI update to the browser also made it in there.
Along the top of any iOS device there is an area that iOS reserves for system features such as the status bar and notch on iPhone X+ or the home indicator line on devices without a home button.
Because this area varies between different iOS devices, layouts created in Nodeo needed to be tall enough to not be hidden behind the notch, but would then look bloated on devices without a notch.
Project settings now offer an option to respect this safe area in a few different ways (none, top, bottom or top and bottom) in order to constrain your layout within the safe margins. You can then extend your sub views outside their parent frame to cover this area. Just remember to turn off “Clip” for the parent view in the Layout panel.
In order to demonstrate safe area insets, we added the option to create new projects from basic templates.
You can choose from 5 different templates; Single view (which is basically an empty project), Navigation bar or Tab bar with Navigation bar. The last two also offer an option to include a collection view showing a list of strings.
Tab bar controllers also have the choice of creating 2-5 tabs, to make it blazingly fast to jump start your project!
Lastly, 3 system colors have been added to support light and dark mode. The system colors can’t be altered, because they are dynamic to the current system mode. Any other color you add will stay the same regardless of what display mode the user has set.
Reset inport stacking
A node is calculated as soon as all incoming connections (inports) have a value (stacked). After the first calculation, subsequent calculations are done whenever an inport has been updated. When combining several nodes with into a single node, some inports might update more often than others leading to calculations with old data.
Because of this, we have added an option to reset inport stacking, requiring all inports to be updated every time before calculation. An example of where this is necessary is when using the node “Image for url” in combination with the “Collection Item” node. We want to download images for each specific item, but only when a key matches a specific value (see image below), not for other values.
Basic templates for new projects allow you to get up and running in no time!
Device screen insets allow you to design your layout within safe ares of all devices!
System colors supporting dark mode included in all new projects
Layout panel has been updated and view transparency added
View frames are now automatically rounded to nearest integer
Toggle ”Reset stack” on node views to avoid unexpected values
Using collection views has been possible since version 1.0, but with version 1.2.3 there has been an important node upgrade which makes them a lot more useful – asynchronous image download, caching and automatic thumbnail generation in the node “Image for url”.
Collection views are created using the node “Collection View” where you select the datasource (array) and a template (view). The template should contain sub views with names matching the keys inside the dictionary object in your datasource array.
In the following example, we are performing a GET request to fetch a JSON datasource from Picsum Photos with the following structure:
Each entry contains a dictionary with several keys and values. We are interested in “author”, “url” and of course – “download_url” which is the actual URL of the image.
So we begin our project by creating the view setup as follows:
That’s it for the views. Data from the dictionary will be automatically assigned to the views with names matching the keys.
Depending on what you want to achieve with your setup, the node tree will look a lot different. The following tree might look complicated at first glance, but there are usually 4 parts when working with collection views:
Fetching the data source
Adding the collection view to an existing container view
Asynchronous image download and caching (new)
Performing an action when the user selects an item
Looking at each part, let’s start with fetching the data source:
You can just as well pass along the response directly into the collection view node, but then the collection view will not be created until the response is received. This way, we are adding the collection view and covering the template view in the container immediately after launch. When the response is assigned to the variable, the collection view is automatically updated. In the mean-time, we set the background color of the collection view to match the container and add it on top.
Moving on, for each item we create a request to download an image for the URL contained in the “download_url” key:
When using “Image for url” in a collection view, we should pass in the view from “Collection item” as well, since the asynchronous process must keep a reference to which view should be assigned the image when the request completes.
We have also added the node “Date and time” to get the current date and use as a suffix when caching the downloaded image. This means that images will be fetched from the server again the following day. Lastly, the inport “Thumbnail” has been set to true, so we automatically generate scaled down versions (matching the view size) of the image, cached along side the original image.
The final branch from the outport of the “Collection view” node is “Collection selection”, which is called whenever the user taps an item in the collection view:
When we open the detail view, we want to show the full size image, so we have the same setup here with the node “Image for url”. The only difference is that “Thumbnail” is set to false. However, in our example, the original image was saved during the first request from the list, so it will just be loading from the file system.
You might have a data source with separate thumbnail and full size image urls, in which case you just would use a different key here.
If you want to poke around in this project, you can import and edit it (but not publish it) by clicking here.
Anyway, it’s a work in progress, so head over to the support page if you have any more questions. Good luck!
This version brings a lot of new features as well as countless fixes from v.1.1. You can now send push messages, show maps and create stunning designs with gradients and shadows! Files have been integrated in a few places, making it even easier to import graphics into your project. Have fun! Highlights below:
Gradient panel for views (above or below image)
Shadow panel for views
Import image from Files in image panel
Move views using arrow keys
Updated design of browser
Custom project thumbnail in settings
Node info (available from Add Node table)
Duplicate and delete buttons moved to workspace
Notification nodes (local & remote)
Map nodes (map view, annotations, location)
Alert node (system)
Open url node
Generate UUID node
Syncing now works better with images
All projects synced via iCloud gives ownership
Deleting a project now also removes it from private iCloud
This update brings an important new feature to Nodeo and addresses a lot of bugs. Here are the release notes from App Store:
Automatic private iCloud syncing: If you have an iCloud account, presentations will automatically sync between devices
Ports: Border color added making it a lot easier to identify matching port types and optional ports marked with asterisk (*)
Keyboard shortcuts: Help screen now available (hold down CMD during edit or present)
Nodes: Filter & sort array, scale image and string value nodes added
Done outport fixed for transition nodes
Post & Get request nodes fixed (app transport bug & response handling)
Import photo node has been split into Library and Camera node
Frame nodes now calculated after final frame is set during launch of presentation
Edit text was setting the label color to default white
Subview variables were not removed when parent view was deleted
Private iCloud syncing
This makes it a lot easier when working with a presentation targeted towards iPhone users. As soon as you launch your project on iPad, the generated thumbnail and application data is automatically uploaded to iCloud. Nodeo automatically checks for updates during startup, but you can also refresh manually if the app is open.