Designing for multiple screens

header00.jpg

Noodl allows you to create multiple devices in your project, and each device can have it's own interface. Noodl can also act as a bridge between your devices to enable sending and receiving data between them.

 

Get started

In this guide we will show how to make your project ready for using multiple screens, followed by digging a bit deeper in how we can make these different screens interact with each other.

You may download the example project shown below if you want to take a look at how a basic multiscreen project is set up, where two different devices communicate with each other.

 

Project setup

Open project settings by clicking the settings icon next to the Noodl logo in your editor. Here you can access a variety of settings related to your project.

Add devices by clicking the "+" icon in the Devices section. After you've added a new device, you can change the renderer, set which Root Component that that device should use, or change fill mode.

In this case we're adding two device, where one is going to act as a dashboard, mounted on a tablet-sized display in our smart home, and the other device is a phone, which will be able to interact with the home dashboard.

 

Accessing the different devices

List of defined devices of the current Noodl project

List of defined devices of the current Noodl project

To view your different devices, you'll need to open your web browser on the wanted device and enter the ip-adress of the computer which runs Noodl, and connect through the port 8574.

You can access this information through the usual preview on device icon in the Noodl viewer, or by checking up your local ip address manually.

 

 

Communication between the two devices

To enable different device roots to talk to each other, we’re going to use the nodes “Send/Receive Message”. 

In the example project, you can find the communication between the two device roots in the component “horizontal button”, which is placed in the “Phone (Hannah)” device. It'll send a signal to show the “unlock” state of the “Tablet (Home)” device when we tap the horizontal button on the “Phone (Hannah)” device.

If this concept feels foreign, you can find practical examples, and a more throughout explanation of what is actually going on in a lesson called “Events and messaging” on the start screen in Noodl.

Upper component is found within "Horizontal button". The lower is found in the root - tablet component.

 

Wrapping up

That pretty much covers the basics of how to set up your project for using multiple devices! There are plenty of use-cases when multiscreen interaction can provide useful insights, and if you need some inspiration, you can check out this demo from Topp. If you have any other questions regarding multi-screen interaction – discuss the tutorial and show off your multiscreen designs in the Reddit thread!