Categories
Updates

Version 1.2.6

This update is mostly a bug fix release, but we also threw in a basic undo/redo (which seems to be a bit glitchy, but whatever).

Release notes:

  • Undo / Redo has been added! Have fun making mistakes!
  • Duplicate / Delete buttons have been moved to toolbar

Fixed

  • Issue in the template manager where new apps had a faulty view hierarchy
  • Guides to same level subviews were not found due to updated view hierarchy
  • Some notifications were not received due to undo/redo feature
Categories
Updates

Version 1.2.5

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.

Release notes:

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.

New nodes

  • Set view frame
  • Set view color
  • Set view border
  • Set view image
  • Set view layout
  • Set view text
  • Text constants
  • Text style
  • Set view gradient
  • Set view shadow
  • Image mode
  • Create view
  • Clear image

Updated nodes

  • Pulse
  • Animate view
  • Add view
  • Image for url
  • Item view (for collection views)
  • Interface (deprecated, replaced by SetView…Node)
Categories
Updates

Version 1.2.4

Safe Area

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.

Basic templates

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!

Dark mode

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.

When “reset inport stacking” is active (blue checkbox in node view), the node “Image for url“ will only be calculated when all inports have been updated.

Release notes

App:

  • 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!

Editor:

  • 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

Nodes:

  • Sliding transitions automatically shade existing views
  • Added HEX and HSV color nodes for more flexibility
  • Added Random number because… Who doesn’t need that?

Fixed:

  • Moving multiple nodes didn’t update lines
  • View templates for collection views are now hidden automatically
Categories
Updates

Version 1.2.3

Version 1.2.3 brings an important update to the node “Image for url” and enables you to download, cache and generate thumbnails for image urls in collection views!

Check out an example of using collection views

Release notes

Node updates:

  • Image for url can now be used to download and cache images in collection views and generate thumbnails
  • Current date & time node added for easy cache management of downloaded images

Editor:

  • Toolbar panel background and toggle button color tweaked for better visibility

Fixed:

  • Project import didn’t save project after import
  • Collection view layout didn’t update in certain setups
Categories
Updates

Version 1.2.2

App:

  • New app icon

Fixed:

  • Faster write operation of application data during sync
  • Connections between selected nodes are now also duplicated
  • Move all selected nodes when dragging any one of them
  • Drag to add sub view now selects the top most view
  • Publish and Delete buttons are hidden for new (unsaved) projects
  • Project is saved and browser is updated when publishing unsaved changes
Categories
Updates

Version 1.2.1

Node updates:

  • Custom map annotation image

Fixed:

  • Editing view hierarchy in variables table
  • Collection view cell size & inset
  • Array update notifications
  • 123 node execution
  • 321 node switch
Categories
Examples

Collection views

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”.

Image collection shown on iPhone SE

Detail view showing full size image

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:

[
    {
        "id": "0",
        "author": "Alejandro Escamilla",
        "width": 5616,
        "height": 3744,
        "url": "https://unsplash.com/...",
        "download_url": "https://picsum.photos/..."
    }
]

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.

View setup

So we begin our project by creating the view setup as follows:

View setup for the collection view: Create a view in which you will add the collection view and a sub view for the template containing sub views with names matching the keys inside the dictionary object in your datasource array.
Detail view setup: Just a view for showing the image and a back button in the header.

That’s it for the views. Data from the dictionary will be automatically assigned to the views with names matching the keys.

Node tree

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:

  1. Fetching the data source
  2. Adding the collection view to an existing container view
  3. Asynchronous image download and caching (new)
  4. Performing an action when the user selects an item
Overview: Get request that saves the response to an array variable to the left. Set the background color and add the collection view to an existing container view. Add node for responding to item selection and pass along the item to the detail view. Finally, respond to each item configuration and download the image using “Image for url”.

Looking at each part, let’s start with fetching the data source:

Performing a GET request is super-simple. Just add the node “GET request”, activate it by switching the inport “Submit” to True and enter the URL (left hand side in screen). Assign the response to an empty array variable (in this case: “image array”).

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:

Pass in the collection view into the node “Collection item” to respond to each item configuration in the collection view. This node will be called for every item/row. Check the key if it matches the key “download_url” (defined in the variable “Download key” in our example) and then fetch the image for the value defined for the 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 the user selects an item in the collection view, we call a transition node to slide in the view “Detail view” and pass along the value (which is the dictionary entry) and extract the key values and assign them to whatever view we want.

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!

// Markus

Categories
Updates

Version 1.2

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:

Editor

  • 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

Nodes

  • Notification nodes (local & remote)
  • Map nodes (map view, annotations, location)
  • Alert node (system)
  • Open url node
  • Generate UUID node

Fixed

  • Syncing now works better with images
  • All projects synced via iCloud gives ownership
  • Deleting a project now also removes it from private iCloud
  • Share link updated (now points to landing page)
Categories
Updates

Version 1.1

This update brings an important new feature to Nodeo and addresses a lot of bugs. Here are the release notes from App Store:

New

  • 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

Fixed

  • 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.