Canvas Preview: Inter-screen Communication

December 19, 2017 / 0 comments / in General  / by Luke Williams

If you’ve been using CygNet for even a little while you will have heard the discussion and seen presentations about the next CygNet HMI, Canvas. With its impending official release this fall we continue this multi-part series by introducing you to some of Canvas’ new and exciting features.

The last post introduced you to Hyperlinking and discussed how it can be used to allow for some really great new ways to move between screens.

In this post, we will introduce a feature that takes dynamic screens to the next place, and that’s working with other screens.  In this post, we’ll cover many of the features and capabilities of Inter-screen Communication.

Let’s begin by defining what we mean by inter-screen communication.  Simply put this is the ability of a screen running in Canvas to send or receive information from another screen that is running in the same instance of Canvas.  This functionality is important when considering that a screen might be designed to display certain information based on the information from another screen.

There are several forms of inter-screen communication that Canvas supports, and we’ll walk through an example of each.  Because we know that different screen designs will have different needs, we’ve included multiple ways to communicate between screens: via Broadcasts and via the global dictionary. As you’ll see in this post, each of these methods have their unique strengths, though both take advantage of the fact that we can pass around .NET objects between screens, which is a significant improvement over Studio’s limitations.

Broadcast

The idea behind the Broadcast feature is simple.  Where does a screen get its Site.Service and/or Facility?  The answer, as always is, it depends. Broadcasts will send Site.Service or Facility information between screens. This is optional both on the sending side and the retrieving side. That is, a screen has to be configured to broadcast and another has to be configured to receive that information in order for it to be successfully shared.  In the image below, showing a selection of the screen properties pane, there are two Broadcast options.  Selecting the respective checkbox will enable the screen to broadcast its Site.Service and/or Facility.

Broadcast Options

A screen will Broadcast when a change is made in run-time, either through scripted or user actions.

Below is an example screen that is broadcasting its Facility information.  From the user’s perspective, nothing is different.  Using a Tag Chooser in this instance to select different Facilities and seeing that change reflected in the Text Tool. Behind the scenes, this screen is broadcasting the Facility selection change to screens listening for broadcasts.

Broadcasting Example

The flip side of broadcasting is for a screen to receive broadcasts, setting up a screen to be the recipient of such a broadcast is nearly as simple as broadcasting!

Below is the screen that was running at the same time as the screen above, instead of broadcasting, this screen was set to inherit its Facility information from a Broadcast.

Inherit from Broadcast

Notice that the Facility associated with the screen is changing but the bottom set of controls remain fixed on a specific Facility.  The ability for a screen to inherit a Site.Service or Facility from a broadcast does not preclude it from also being configured with static Facilities.  Recall in the last post about Relative Facilities, this screen could be configured to display relative facility information from the broadcast, and in just a few controls we can have a screen displaying information from multiple facilities all being driven by another screen.

In the screen properties when selecting the Site.Service and Facility source, select ‘Inherited from Broadcast’ option. That’s all that you need to do to configure a screen to inherit from a Broadcast.

Inherit from Broadcast

You will have noticed the black bar at the top of these screens.  They have also been in screens in past posts but we’ve skipped over discussing them until now, this is the Navigation Bar and as we move more into designing and testing screens now is a good time to discuss it.

Navigation Bar

he Navigation Bar offers a quick way to manually change a screen’s Site.Service and Facility at runtime. This allows you to quickly test nested or templated screens by changing their driving information and observing the results. Since this is designed to assist during screen development rather than a production screen, it is only available in Canvas and is hidden in Canvas View.

Canvas Navigation Bar

The blue button allows for the new entries to be sent to the screen by refreshing the screen contents.  As either the Site.Service and/or Facilities change, no matter the source, the currently assigned values will be displayed in the Navigation Bar.  This can help tremendously while building and testing screens to ensure the expected services are being applied to the screen you want.

The Canvas Broadcast feature works seamlessly to send Site.Service and Facility IDs to other screens, but what if we want to send data or store data, and have other screens access it?

Global Dictionary

If you’ve spent a lot of time in Studio you will be familiar with the Global Dictionary, and it makes a return in Canvas, with some unique enhancements.

The first is that it’s easier than ever to add and read from the Global Dictionary in Canvas, it’s literally a single line of code.  The second major area of difference is that you can now store a .NET Object and access any part of it from other screens (or the same screen).

Let’s look at a user entering text into an edit box and then calling it on demand and updating the text of a text tool.

Global Dictionary Example

In this example, we are using three different screens and navigating between.  Each edit box is taking the text entered by the user and storing it in the Global Dictionary, the next screen is retrieving the string stored in the Global Dictionary and we’re pushing it into the edit box as a watermark.

This functionality existed in Studio, string to string storage, and it’s easier than ever now.  But the real power comes from the ability to now store, access, and change .NET Objects in the Global Dictionary.  For most of the use cases in terms of passing screen and site information between screens we’ve addressed and provided native solutions, such as Broadcast, or Canvas Objects, but if you can think of another idea, or use case and you’d like to create, share, edit, or trigger screens of your own .NET Objects you now can!  This is really a ‘let’s see what kinds of cool use cases you come up with’ sort of function.  And we can’t wait to see what you create.

So how do we create, pass in, and/or read from the Global Dictionary?

Passing information into the Global Dictionary

To pass and store information in the Global Dictionary we simply need to supply a line of code associated with some event, in this example, we’ll do it on a button click event.

The Screen has a method called WriteToGlobalDictionary, call that method and pass in two parameters, a token, and the data.

The ‘token’ can be any string you desire, you’ll pass this back in later to specify what stored data you want to access.  Second, the data, this can be an Object, a property of an Object, or just a string, it’s up to you.

Write to Global Dictionary

Again Canvas’ intellisense helps out here letting us know what parameters are needed, in our sample screens above, we simply passed in the text entered by the user.

In order to read from the Global Dictionary is just as easy.

Requesting information from the Global Dictionary

To request anything from the Global Dictionary we simply need to pass in the ‘token’ to indicate which stored Object to retrieve.

Read from Global Dictionary

In this way, it is easy to have access to literally anything you want between screens.  Though most of the use cases we could think of are covered by some other Canvas function we wanted to make sure to provide a robust mechanism to allow you to dream big and be able to easily realize a screen design plan without the some of the limitations Studio had.

Summary

From the Broadcast function sending out Site and Service information to any screens in the same running instance of Canvas, to being able to choose to accept those Broadcasts, Preview Navigation Bar for screen testing, and the Global Dictionary with full Object support, you should be able to start seeing the world of possibilities opening up with Canvas and hope you’re just as excited as we are.