Mr. Chris Elsbree ICONICS Chief Software Architect demonstrates ICONICS 3D HTML5 and Dynamic Cloning.

Video Transcript

[0:00] Mark Hepburn ICONICS Vice President of Global Sales

If I could invite Chris Ellsbury to come up and join here. Chris has been with ICONICS since 1994. Yes. Camera on Chris, please. Working at ICONICS headquarters in Foxborough. He's the lead developer of GraphWorX64. He worked on GraphWorX32 and GraphWorX Dawson. Anyway, he's responsible for researching new technologies and implementing core infrastructures and components. And this is important for unified platform consistency, the overall design and implementation of ICONICS software. Chris has a Bachelor of Science in Computer Science from WPI, Worcester Polytechnic, right out here out the pike. So, Chris, please show us a little bit about some of these great tools.

[0:58] Chris Elsbree ICONICS Chief Software Architect

Thanks, Mark. Let's start with a demonstration of 3D HTML. The main purpose of this example is to provide maintenance training for repairing fault in the robot that you see on screen. If you attended our customer summit a few years ago, you might actually recognize some elements of this screen from the HoloLens demo that I did at that show. Here we're seeing that those same 3D assets can now be used over the web. So, as you can see from the 3D camera movement now, around the robot, this is not just a static 2D render of a 3D model. This is real time rendered 3D. And the 3D rendering in the web browser is accomplished using a technology called Web GL. Web GL is supported in most modern web browsers such as Chrome and Edge and Firefox and Safari, on both desktop and mobile versions of those browsers. And this web GL technology is built into the web browser. There are no special plugins that you need for the browsers. Currently, I'm showing this in the Chrome browser, but we can show the same HMI in other browsers like here in Microsoft Edge, and I could also switch to running in Firefox. And so here we see the same HMI running in Firefox; it's really the choice of your browser. Notice that the display combines both 3D and 2D elements together into a single HMI with the robot on the left in the control panel on the right, and the 3D can better mimic a real world representation of equipment like this robot but including 2D elements is beneficial for the accessibility of interactive controls or texts and gauges. Here we have the 2D gauges showing the current angles for the joints of the robot. And of course, this isn't just a static 3D scene. We can animate and interact with equipment based on runtime process values. So, what we're demonstrating at the moment is the rotation animation within a 3D space. And this is actually six hierarchical joint rotations where each rotation is affecting the pivot point of the next joint’s rotation. So that allows basically to accurately represent a real robot arms positions. What's just been activated now is visual representation of the areas that the robot arm can reach with its program movements, and that demonstrates size and visibility animations. 


As I mentioned at the beginning, this example is to provide maintenance training for repairing a fault in the robot. This is done by providing step by step guide with text descriptions and by animating the steps themselves on the 3D robot. And those text descriptions they could be alias to support multiple languages or different sets of instructions could be presented depending on the specific fault. So here we're seeing the use of color animations to highlight the parts that are relevant to the current step and 3D location animations to indicate removal and replacement of the parts. So having the sequence represented in 3D provides better spatial understanding of the locations and relationships of the parts in the robot. A technician could follow along the steps on a tablet while working on an actual robot and adjusting the 3D view to match what they're seeing in real life. So, let's take a look at how the 3D is actually configured to run in the web browser. And as those of you out there who already know ICONICS may have guessed, it's GraphWorX64 is the application that we use to configure the 3D HMIs for the web. If you've ever used GraphWorX64 to configure 3D for the desktop, then you'll be familiar with this already because the configuration experience is mostly the same. The main difference here is the GraphWorX64 is running in the web browser Edit Mode; you can see that indicated in the status bar at the lower right corner of the application. The web browser Edit Mode ensures that the configurator enables only the features that are supported on the web, so the 3D HTML5 that you're seeing now, the support in version 10.97.1, is currently in technical preview. So, there are some features of the desktop 3D that aren't quite supported yet for HTML5, but we're working to continue to improve that feature parity in subsequent releases.


Here we can see the rotation animation configuration and the data source that drives the 3D rotation for this joint. It's a local alias that resolves to a property in AssetWorX that's applying the current joint angle. And we can also see the angle limits for the rotation, and we can actually view that on screen. So here, we can visually adjust the dynamic limits of the angles of the rotation and the pivot point of the rotation. Once we're satisfied with all the configuration of our 3D scene, we can then use the convenient open and web browser button that you see at the top left of the application to run the GraphWorX64 display in the web browser of our choice. In this case, I'll just use the current Windows default web browser which is currently set as Microsoft Edge. And here I'm just going to skip saving because I don't want the changes that I just made. But with a simple click, we're back in the web browser running the 3D HMI that was just being edited. So that's a brief overview of the ICONICS new 3D support for HTML5. This feature opens up the reach of 3D HMI to be deployable beyond just the Windows desktop. Now, you can run GraphWorX64 3D visualizations over the web to your choice of web browser, regardless of the operating system or the device form factor. So, it could be Chrome; it could be Edge, Firefox, Safari, Windows, either iOS or Android. It could be desktop, tablet, or phone. 


Now, the next demonstration that I'd like to show is for the clone dynamic, and using the clone dynamic is a great way to simplify configuration of displays when you need to visualize multiple instances of a graphical symbol where each symbol instance is going to be tied to unique data. So, the data for such instances could be specific for a specific type of equipment coming from AssetWorX, or it could be database table rows coming from GridWorX as just a couple of examples. So let me show what I'm talking about. Make it easier to understand. So here we're visualizing oil fields on a map where we're overlaying symbols representing pump stations and wells. The pump stations are the green icons, and the wells are the blue icons. This dashboard is primarily meant to showcase CFS WorX, and there will be a session on that later to focus in on the connected Field Service features. But right now, I want to focus on how the symbols that you see on screen are generated using dynamic cloning. The data sources for all these pump stations wells are defined in AssetWorX, and here we're seeing instances of the well assets that we're going to visualize in GraphWorX. So, we're going to use the latitude and longitude properties to position the symbols on the map, and the alarm state property will be used to make the symbol blink when there's an alarm. And as you can see, there's quite a few well instances here; there's 100 for Andrews County, and each of these needs to be visualized on the map in our dashboard. So, we've used our bulk editing and import features to bring these into AssetWorX quickly, but let's take a look at how we can visualize this information on an HMI screen without having to configure 100 unique graphical symbols. So, this is the GraphWorX display for that map that we were looking at. And you'll notice you don't see blue and green icons all over the map right now. There's only this one symbol instance, for Andrews County, not the 100 instances like we saw in the AssetWorX configuration. So, without the clone dynamic, we would need to manually make a copy of the symbol and then 100 times manually hook up each of those symbols to their corresponding unique data sources in AssetWorX. So, this would be both tedious and error prone. And furthermore, it would assume that the number of those well assets in AssetWorX is not going to change because otherwise we would need to manually edit the graphics and add more symbol instances which would make maintaining these HMI screens significantly more cumbersome. But with the clone dynamic, there's a much better way to do this. So, this one symbol is the primary well symbol that the clone dynamic is going to replicate at runtime to represent the 100 wells defined for Andrews County.


In the number of instances property, you can see, we specified the number of instances should be equal to the number of assets defined in the wells branch for Andrews County and AssetWorX. So, this tells the clone dynamic how many copies of the symbol to generate at runtime. And next, we specify where the symbols are going to be placed based on the GPS coordinates. And so, take note of this instance number alias name property. And its value instance, this alias is how we're going to make each symbol data source uniquely bound to a specific asset. So, the instance alias is going to resolve to the instance number of the generated clone. The primary symbol that is instant zero. The first generated clone is instance one, the second generic code is instance two, etc. So, we can then use that number as an index into the list of assets. So, in the expression that you see on screen, you can see that we're getting the asset point name from the list of wells in AssetWorX for the cloned instances index and then getting the latitude property. And we can do the same thing for the longitude property to get the complete GPS position, and we can also use the alarm state property for each symbol instance to make the symbol blink based on alarm. And that's all there is to it. In runtime, this one symbol instance becomes 100 symbol instances positioned at the correct GPS coordinates on the map. And as you can see, on screen there are a lot of blue dots there on the map, and you would have had to without the client dynamic, copy those manually and configure those individually. But with the clone dynamic, we only need to configure that one symbol instance. And furthermore, if we add or remove assets in AssetWorX, we don't need to modify the configured graphics at all. GraphWorX will just detect the number of asset assets changed, and it will add or remove symbols dynamically to match the modified asset list. So, I hope this demonstration conveys some of the power and the time saving benefits of using the clone dynamic. It can greatly simplify the initial configuration required to create HMI’s that need to visualize many instances of replicated symbols. And it can also reduce if not eliminate ongoing maintenance of such HMI displays since the cloned instance generation can automatically adjust to changes made to the back end data sources. So, with that, I'm going to turn it back to Mark.

[12:46] Mark Hepburn

Thank you very much, Chris.