Release Notes - 1.2.3

This is a minor release that mainly focuses on fixing bugs.

General

  • Fixed an issue where Noodl could give your CPU an exercise by spinning it up to 100% and keeping it there until Noodl was restarted.
  • Message Tracker will now include messages without subscribers
  • Make sure only one instance of Noodl is running
  • Show a warning when WebGL isn't supported
  • Added a help icon with links to documentation and forum

Fixes to nodes

  • Scroll View: Added Scroll Threshold. Control how many pixels the user need to drag before a scroll is initiated
  • Scroll View: Padding now correctly pads the end of the scroll content
  • WebSocket node: Allow wss:// in URLs

Linux

  • Example projects can now be downloaded from the start screen

Release Notes - 1.2

We are happy to present to you Noodl 1.2 :-) and it's a big one, you could say it's yuuuuge. There is a lot of good stuff in here, some of the hightlights:

Message tracker

Noodl now includes a message tracker where you can visualize all connected clients and devices, as well as message subscriptions and messages being sent. This is really helpful when your connected designs starts getting complex and finding issues with messaging becomes a hazzle.

 
 

Auto update

You will now get updates downloaded automatically when they are available.

 
 

Detached viewer

In Noodl 1.2 the viewer can be detached from the editor and put on a secondary display to give way to more space for your Noodl graphs.

 
 

Noodl login

Finally a request we have had is the option of a Noodl login as an option to the Google login. Now you can create Noodl accounts and use those for login if you please.

Other features

  • Send and receive messages can send nestle JSON.
  • Send CSV (comma seperated values) over MQTT.
  • Works in Microsoft EDGE browser.
  • Built in MQTT broker so you can connect your hardware locally to the editor computer without having to set up an external broker.

ENTERPRISE FEATURES

Collaboration

Available in the enterprise version of Noodl you can now collaborate with friends and version control your projects with Git right from inside Noodl. No need to install any version control software, it's all bundled for your convenience. If you are working on a Noodl that is part of a larger software development using Git you can version control along side with your coder friends, it's pretty awesome! Take a look at the guide here.

 
 

Deploy to AWS

One major feature for our enterprise version users is the ability to deploy Noodls to your AWS account. You can use the AWS IoT device gateway as your MQTT broker, you can sign up and handle users with AWS Cognito. You can use the persistence feature of Models and Collections with DynamoDB to create a real-time database, super useful for many connected experiences! Find out more about this major new feature here.

Noodl Shell

The enterprise version of Noodl contain a viewer app that provides a bunch of neat stuff. It connects directly to the editor so no need to enter the URL of your editor machine, it can show fullscreen Noodls and debug. Also it is based on Cordova so it has a number of useful plugins available such as NFC and Bluetooth. More info here.

New guides

Besides the new guides on deploying to AWS, there are guides for collaboration and creating mobile apps from your Noodl prototypes.


For a limited time we are offering free access to an evaluation version of Noodl Enterprise.

Try it now!

 

Release Notes - 1.1

In the spirit of the season we in the Noodl team have a gift for you, a major new community edition release! There is a lot of good stuff in here, some of the hightlights:

Stand alone app

Noodl is now a stand alone app with installers for macOS, Windows and Linux (beta). The Chrome app version will remain for now but will be removed shortly as Google is shutting down support for Chrome apps.

If you have the Noodl Chrome App installed please uninstall it before running the new version as they will conflict and cause issues with the preview.

UI Kit

There is a UI Kit included in the component library with a bunch of handy components to quickly put togehter app prototypes. If you want to show something off fast and not focus on design details this is super nifty! The control dimensions are optimized for Fill Mode: Fill (in project settings) but can easily be modified to fit any size.

 
 

Persistent storage

Models can now store data between sessions and synch between clients, making it easy to build data driven and connected designs.

New lessons

Two new lessons covering Models and Collections have been added. This is great for building data driven designs, don't miss these!

 
 

Other Changes

  • Deploy feature has been removed and is being revamped for an upcoming release.

New Features:

  • Flow Layout have content align X and Y for improved layouting.
  • Page Navigation can now have a Pages node as target, so you have better control over where nagivation occurs.
  • Page Navigation can now reset history.
  • Signals have a new color to seperate execution flow from data flow.
  • More easing curves in States node.

Bugfixes:

  • Various fixes in Page Navigation.
  • Various bug fixes.
  • Various performance upgrades.

Release Notes - 1.0.1

For this release we've mostly been squashing bugs. We also managed to sneak in a few new improvements as well.

Added

  • Text Input now has a Clear input
  • REST node now parses XML respones and automatically converts to JavaScript objects.

Fixed

  • Fixed bug that made the Tab Bar component in the Library misbehave.
  • REST node doesn't add a trailing slash on the URL anymore
  • It's now possible to view external devices in a browser by using http://localhost:8574?device=deviceName. Previously you had to use your IP.
  • Index Changed in the Scroll View is now triggered when the center of a new item is scrolled into view, instead of using the left edge
  • Fixed Horizontal Alignment bug in the Text node.
  • Fixed a few bugs related to Component Children. Now you should never have to hit refresh to solve some weird behavior when rearraging the Component Children node.
  • Fixed bug in For Each node when Template Type was set to Dynamic
  • Searching with Cmd/Ctrl+F now includes Topic in the Send Message and Recieve Message nodes.
  • Improved WebGL performance in certain cases
  • Fixed snapping in Scroll View when Item Spacing was > 0.
  • Fixed image caching bug when switching projects.
  • Fixed a few edge cases where the inputs weren't updated in the correct order.

How do I get it?

Chrome will autoupdate Noodl for you next time you close it. If not, there's a notification in Noodl that you can click.

Release Notes - 1.0

Canvas 2D

We've added a new renderer in addtition to the default WebGL renderer - Canvas 2D. Some devices don't support WebGL or are faster with Canvas 2D so by adding this new renderer Noodl now works better on even more devices.

You can choose what renderer to use in the project settings. Note that it's possible to switch between renderers on the fly to compare performance while running your project.

We've added a search box! Open the search box with Ctrl+F on Windows or Cmd+F on OSX. You can search for node labels, types, expressions, images, events and much more.

This makes it much easier to navigate in large projects, understand where events are being sent and received, or finding all text nodes using a specific font.

Multiscreen and MQTT

We've added two new nodes - Send Message and Receive Message.

These nodes can be used to send messages across devices for multi screen experiences, or to communicate with external hardware.

New projects default to using Noodl as the message server, so as long as you have Noodl running, multiple devices can communicate on the same network. You can also switch to using an external MQTT broker so that even your deployed projects work with multiple devices, without depending on Noodl.

Add more devices by going to project settings. If you open your project in a browser or another device you'll get a list where you can pick what device to use. (The list won't show up if you use localhost, use your IP instead)

Check out the Arduino MQTT guide for more information on MQTT.

Library

We've added a component library that contains some commonly used elements. These components are designed for you to build upon and modify.

You can access the library with the Library button in the component panel.

REST node

Noodl now has built in support for using REST APIs. Use it to talk to external endpoints, or to prototype your own REST APIs. Read more about it in the documentation

Updated lessons

We've overhauled the lessons. They've been updated and new ones have been added. If you've completed the lessons in previous releases, you'll learn more by going through them again!

Event Sender propagation

Event Senders have more fine-grained control over where events are being sent. Check out the documentation to learn more.

Improved documentation

The reference documentation have been updated and now includes all nodes. Check it out at docs.getnoodl.com.

Bug fixes

  • Sometimes Noodl wouldn't show you your IP address correctly
  • Deployed projects would sometimes not work until you deleted the old files
  • Significantly improved the loading performance of large projects

Release Notes - 0.9.0

STATES

Something that came up again and again in our designs is states. Often you have a component that can be in one of several states and you want it to visually reflect those states. We now introduced a node to help you specifically with this! To learn how it works run through the getting started lesson.

PAGES

Another concept that came up in many of our projects is navigation between screens, both simple navigation and dynamic where you want to show a page and specify which data should be presented on that page. There are many ways to achieve this but we tried to condense the best solutions from internal projects into a few simple nodes. The Page and Pages node, and the accompanying Page Navigation nodes.

FURTHER REFINED VISUALS

Practice makes perfect. We keep iterating on the visuals of the tool to make it more clear and beautiful. We have also tried to fix a bunch of small UI glitches here and there. We hope you like it!

MORE NEW FEATURES

  • Paste - Nodes now appear where the cursor is.
  • Panning - Nodes cannot be panned out of the canvas.
  • Autolabels - Image and text nodes now get labels automatically from path and text content.
  • Wordwrapping - Works a lot better for long names.
  • Create new node popup - You can now use keyboard to navigate up and down.
  • Rename node - You can now rename a node by just selecting and pressing enter.

BUGFIXES

  • Preview server now returns 404 correctly when an asset is missing.

Release Notes - 0.8.0

REFINED VISUALS

We've given the editor a little visual love to make it clearer and easier to work with. We removed the group headers on nodes and made the text easier to read. We hope you like it!

IMPROVED LAYOUT NODES

We have changed the way layouts are done slightly. Instead of the layout being a property of theGroup node we now have specific nodes for Stack Layout and Flow Layout. These nodes also have a few new properties like item spacing and padding that make them easier to work with. Your projects should be automatically updated to use the new nodes and you might get a notification as shown below.

PROJECT IMPORT

We have completely revised the project export / import system. Now you can simply import an existing project into your current project by clicking import and selecting the project folder you want to import. First you will get to choose which components you want to import, and dependencies both in other components and resources are automatically detected.

MORE NEW FEATURES

  • Zooming - You can now zoom in and out in the editor using the scroll wheel on your mouse, or two finger on the trackpad (and whatever you windows people do to emulate the scroll wheel).
  • Jump to Start / End - The animation node have new signals so you can make it jump to the start or end of an animation immidiately.
  • Value changed node - There is a new node that can detect if an input value have chaged and generate a pulse.
  • Text node - The text node have been updated it now has a size mode more similar to the other nodes. Your project should get updated automatically.
  • Inspector tweaks - Inspector now only highlight nodes with visual content.
  • Renamed size modes - Size modes have been renamed for clarity.
  • Live updates - When adding connections and changing font family.

BUG FIXES

  • Sometimes the preview became blurry, this has been improved.
  • Hovering on nodes now show correct scaling in viewer.
  • Fixed issues with font loader, more fonts are now supported.
  • Web socket node now reconnects if connection is lost.

Always Live

Apparently it takes about 80 seconds for Spotify to run an Edit-Build-Test cycle on their iOS app, in other words: after you have made a change it takes 1 minute and 20 seconds to view the result. This is obviously annoying if you are an engineer working on the app (and I bet they have ways to improve this by working on sub modules etc) but it’s completely devastating if you are a designer or developer working on the user experience. Sure XCode is notoriously slow in this aspect, and frameworks like React Native can help you vastly improve turnaround by hotswapping javascript code instead of recompiling and relaunching the simulator. But even if you can get down to seconds, you still have the issue that your app restarts and you need to find your way back to the place you were tweaking. Designers and UX developers need instant feedback, and the productivity gains are immense.

In Noodl, whenever you edit your design, if possible, that edit will be inserted into the running prototype without restarting it. Changes are instant and the result is instantly visible. Imagine fixing a car engine while you are driving the car. Or in this case, tweak an animation while it is running. No need to restart and find your way back to that particular place in your prototype.

download (1).gif

This can be achieved because the representation of your design, the node graph, is connected live with the running prototype wherever it might run (on your phone, embedded in your app). This also allows Noodl to visualize what is happening live in your prototype by highlighting connections directly in the node graph visualization. Interactions such as a tap that triggers a signal it is visualised live in the graph. So you will always know what is happening, and thus can easily figure out why it is not behaving like you expected :-) Watch the connection between the tap output of the root and the show input of the component.

The highlight feature will also help you identify which portions of a node graph that is activated on a given interaction. But it’s not only signals that are connected to the node graph visualizations, all data that flows in the graph is tracked and can be inspected. Simply hover over a connection and it will reveal the most recent value that have passed through the connection to the target port. Clicking an inspector will pin it and you can watch as the value changes when you interact with the prototype.

download (3).gif

Obviously we are very excited about these features but they are only the beginning. We have just started to tap (pun intended) the possibilities that live editing may bring to the development and design of interactive experiences.

So far the code editor still rules most aspects of the development process. Design tools are mostly used for static resources. We believe that the future is in specialized tools that are optimized for the task at hand. Building great interactive user experiences is one of those tasks that have been overlooked far too long. Don’t worry, we have your back!

Release Notes - 0.7.0

LIVE INSPECTION

We added an amazing new feature we call "Live Inspection". It enables you to visualize and understand how your nodes and connections behave while your design is running. Learn more about it in our new post - Always Live

VIEWPORT FILL MODE

The resolution can now be set to fill the entire window, and not be constrained to a single resolution and aspect ratio. This is useful if you want to create content that scales and adapts to the size of the window. You can find it in Project Settings.