App Development with the Matlab App Designer - Part 1: A Simple Mechanics Calculator

In this tutorial, I am going to walk you through the basics of the app development with the relatively new Matlab App Designer platform. Mathworks has introduced the App designer in the 2016 Matlab edition, which helps you to build your own apps with the default graphical user interface (GUI) and programming environment. I have come to know this handy tool lately, and I am very eager to share my knowledge with you, especially if you are interested in object-oriented programming

Let's see, first how we can access the App Designer option. Open the Matlab and click on the "APPS" from the top menus.

Matlab > APPS > Design App

Matlab App Designer





Next, after clicking the "Design App" icon, the following window will appear. As you can see, there are more options to choose. But, to begin with, we should select a "Blank App".

Selecting a blank app in Matlab App Designer

















Once, you select the "Blank App", you will see the following window. On the left hand, you have the default 'drag and drop' items for your app that you can simply select and bring it to the middle window "Design View", where the development works are carried out. On your right, you have the options to customize the default app items of the left side. For example, if you want to increase the font size of your display, you can do it from the right side menu bar.

A Blank Matlab App Designer Platform

















Now, if you click on the "Code View", you will see default codes already done by Matlab for the basic interface. You can edit codes here or enter your own codes that you would like to incorporate with the simulator.

Matlab App Designer Platform Code View


















Now, let's try a very simple example, let's make the very first app by the Matlab App Designer. We will make a calculator for basic calculation in mechanics where it will calculate the force based on the two input data: mass and acceleration. As we know from Newton's second law of motion that the force is a product of the mass and acceleration, this formula is simply implemented in the development of our very first app or simulator by Matlab. Let's follow the following screenshots closely.

Selecting objects in App Designer to build an app


In the above screenshot, as you can see, from the left side menu bar, objects are dragged and placed in the middle window or the design view section. To make a calculator with two inputs, I chose a simple display for the mass input and for the acceleration, I selected a knob, which can be rotated to fix a value. To show the output that is "Force", I dragged the text objects similarly from the left side. You can also format the style of the texts, sizes, etc. from the right side menu bar.

Now, it's time to code the objects that we just placed in the design window a while ago. This is the part that we may call object-oriented programming. So, what are the objects that have been selected here - an execution button, text displays, and a knob for the acceleration parameter. If we press the execution button after providing the inputs, we should have the output displayed on the right side. This is the goal for our first app development.

How to format app objects in the app environment

















We will now add codes to the "Execute" button for our goal achievement. In the following image, we see that how we can access the "Callbacks", which will eventually take us to the code environment that is shown in the next screenshot.

How to access the function Callbacks

















We need to add the formula "Force = Mass × Acceleration". To do so, as you see below, we need to copy the values of the functions under each object (e.g., "Object Mass (kg)", "Choose Acceleration", and "Force (N)") that are selected and write or organize them as per the given formula. For example, the output display is the "Force (N)" and its function value is "app.ForceNEditField.Value", which is the left side of the equation. Then, the right side is the mass times acceleration that is represented by the "app.ObjectMasskgEditField.Value" and "app.ChooseAccelerationKnob.Value" subsequently under the respective functions' values.

Coding platform for the Matlab App Designer

















So, that is all! We have achieved our goal - made a very simple app that calculates the force given the mass and acceleration inputs.

A simple app for mechanics calculation

























#Matlab   #MatlabAppDesigner   #MechanicsCalculator  #ObjectOrientedProgramming

4 comments: