Apps: How to Use the Editor Tools and Record Code Features

Andrew Griesmer December 21, 2015
Share this on Facebook Share this on Twitter Share this on Google+ Share this on LinkedIn

As you are learning to create apps in the Application Builder, we want you to take advantage of all of the tools that are available to you. The video featured here introduces you to the Editor Tools, Model Data Access, and Record Code features and demonstrates how to use them. To do so, we add a button to our app that can switch the type of plot shown in the graphics window.

The Editor Tools and Record Code Features Optimize the App-Building Process

The Application Builder itself is a powerful, unique, and downright cool piece of software included in COMSOL Multiphysics. Nothing exemplifies these characteristics more than the Editor Tools and Record Code features, both of which are designed to make building apps a faster and easier process.

As you might recall, my colleague Bjorn Sjodin discussed Editor Tools, a new feature in COMSOL Multiphysics version 5.2, in a recent blog post. He described the three main ways that Editor Tools can be used in the Form Editor to create buttons, input fields, and input drop-down menus, noting how the Model Data Access feature can help along the way.

In the final video of our Intro to Application Builder Videos series, we show you how to use such features, adding an input field for the external temperature and a button to plot the results in the graphics window. We then soup up the plot button in the Method Editor to make the graphics window switch between showing a Surface plot and a Multislice plot.


A preview of the functionality.

The video continues with an overview of how to use the Editor Tools feature to create code in the Method Editor and, since the features are similar in function, we also highlight the details on how to use the Record Code feature to create code. Finally, we introduce you to Declarations as we add a scalar boolean, which is a necessary step for finishing our improved button.

By watching this video, we hope you learn a couple of valuable tips that you can apply to your own app-building processes.

Video Tutorial: COMSOL App Builder Tools: Record Code and Editor Tools


Video Transcription

In the last video in our Introduction to the App Builder series, we’ll be taking a look at the Editor Tools feature for the Form Editor and the Method Editor, and the Record Code feature. Along the way, we’ll introduce Declarations. These tools are used to generate form objects and method code automatically, reducing the time it takes to build apps.

In the main section of the ribbon, there’s an Editor Tools button, and in the Form Editor, this allows us to create inputs, outputs, graphics windows, and buttons; similar to the New Form wizard, except we can do this at any time and insert them directly into our existing forms. The Editor Tools window has all of the nodes that are in the Model Builder and the Application Builder. For example, I could click on the heat transfer coefficient and add it as an input and output. However, let’s look a little bit deeper into some of these Model Builder nodes; for instance, the heat flux. Clicking on this node, I can’t add it as an input, output, graphics window, or button, but some of the settings that exist within this node would be great to have in my app. They don’t show up here because there would be tens or hundreds of options throughout all of these nodes, so they stay hidden as default. However, we can click on this Edit node to jump into the Model Builder and into the heat flux settings window, and then, by clicking the Model Data Access button in the Application section, a green box appears next to all of the editable settings. By clicking these, we make available these settings in the Application Builder. Clicking Model Data Access again, they disappear, and just to show you that the check marks don’t disappear if you close Model Data Access.

Going back to the Application Builder, you can see that there’s an arrow next to the Heat Flux node, and now there are three parameters for the three settings that we checked. To add these inputs, let’s open up the inputs form. Then, we can insert two rows below, and to start, let’s add the external temperature as an input. And then we can add the heat transfer coefficient type as an input. Notice that the heat transfer coefficient type, if I preview this form, the software knew to create a combo box for it because that’s how it exists in the Model Builder. Let’s remove this row and then let’s go into a little bit more detail with this and add a button. Insert a column to the right, and then merge the cells, and, back here in Editor Tools, we can add, let’s say, a button to plot the temperature. Click on Button and the button is created with the text settings, the picture, the commands to run. These have all been added automatically.

Moving on to the Method Editor, we need to choose some functionality that we want to add. In this case, let’s change this plot button so that it switches between a Surface plot and a Multislice plot. We can change the text to say “Change Plot Type”, and then let’s convert this command sequence to a new method.

Going into method2, let’s add the parameters around our new method. We’ll start with an ‘if’ statement and say: if there is a Surface plot, we want to disable the Surface plot and enable the Multislice plot. I use a comment here to help me understand what I’m doing, and to help anyone else out who might be looking at this method. Now, I’ll add my ‘else’ statement in case it is not a Surface plot, and in that case, I would want to enable the Surface plot and disable the Multislice plot. And then, after that, we plot it in the graphics window.

For this first section, disabling the Surface plot and enabling this Multislice plot, let’s use Editor Tools in the Method Editor. While in the Method Editor, the Editor Tools have an entirely different set of functionality to: get, set, set all, create, run, enable, or disable the different nodes and subnodes, depending on their innate functionality. Moving into the Results section, we have our Temperature node with a Surface plot, and we need to create a Multislice plot. I will click the Edit Node button, and then go to more plots and add a Multislice plot. Then, we need to change the expression to temperature and the color table to ThermalLight. Finally, I will disable the Surface plot to make sure that yes, indeed, my Multislice plot has been created. I won’t make too many changes to this because we’re just using it as an example. Moving back into the Application Builder, now we want to first disable the Surface plot. So I will click on it and then click Disable, and then click on Multislice and click Enable, and there we go.

For this ‘else’ statement, I’m going to use another feature, the Record Code feature. This records all the changes that I make to the model, and adds it to the current method. Let’s click on Record Code and, as you can see, we’ve jumped to the Model Builder and a red box has shown up around our user interface. For this ‘else’ statement, we want to enable the Surface plot, and then disable the Multislice plot. So just by clicking and making changes to those different nodes, I’ve recorded the code, and going back to Application Builder, you can see they’ve been added to the Method Editor. Let’s remove these extraneous lines, which were added because the software automatically plots after changes are made, and you can see we’ve arrived at the same result, but we just took two different ways to get there. There are many ways to do the same thing and you can do whichever is easiest for you.

So, we’re not finished yet. For this condition, we need to add a declaration. There are strings, booleans, integers, and doubles as scalars, 1D arrays, and 2D arrays. For this purpose, we will create a scalar boolean. The declaration has been added, and the settings window shows a boolean with the name ‘bvar’ and an initial value of false. Let’s change this to ‘surface_plot’ and we’ll have an initial value of true. In the Method Editor, all we have to do is add an underscore between surface and plot and now the ‘if’ statement looks to see: if Surface plot is true, we will disable the Surface plot and enable the Multslice plot. Then we need to reassign ‘surface_plot’ to false. Finally, I will use the old-fashioned version of code generation by copy and pasting, and if it is false at first, we want to make our changes and then change ‘surface_plot’ to true.

Now we have completed our method so we can test the application. I have my external temperature input parameter added and my button. Since the simulation has already been solved, I can simply click Change Plot Type, and I switch between my Surface and my Multislice. For an extra challenge, try using the setFormObjectText language element to change the plot button text to inform the user. We are now at the end of the introductory series to the Application Builder. Hopefully, you have learned some tools to help you build apps. Happy app building, everybody!


Loading Comments...