[Remote development] Let's make it first !! (Practice 1)

This series explains application development using Remotte. By last time, you are ready to become a developer. It is said that "get used to it rather than learning", so let's put off the detailed explanation of the mechanism and let's first make one app and use it! !! I don't know what kind of device each of you have, so this time, I quickly regarded the "CPU usage" of the Windows PC where the station is running as the sensor value, and used it as the sensor value, cycle sense, page expression, smartphone / tablet. Let's access from. You can create an app in just a few minutes by following the steps shown in the screen shot below.

Get CPU usage in Python

To get the CPU utilization in Python, just do the following three lines.   pip install psutil   import psutil   cpu = psutil.cpu_percent() Let's implement this on the Limotte platform.

Create a new app

First, click the "New" button on the application list screen of the management tool to create a new application. 1 アプリの新規作成.png Click the "OK" button to add the app to the list screen. 2 アプリ作成完了.png

Add components

Enter the details screen of the app, press the "Configuration" tab, and select "New" from the menu at the bottom left of the screen. 3 構成要素の新規作成.png Select "One Numerical Value" as "Category" and "General Single Value Sense" as "I / O Type", and click the "OK" button to complete. 4 構成要素の新規作成ダイアログ.png

Installation script description

Select the "Code" tab under the "Configuration" tab hierarchy, and select "Install.ps1" from the three source code templates "input_sense.py", "\ _ \ _ init \ _ \ _. Py", and "Install.ps1". Select "Install.ps1" and the second line   pip install psutil Let's enter. "Install.ps1" is what we call an "install script", a script that can be run in PowerShell on Windows. The installation script is used to install modules in Python programming and to download programs and data from GitHub etc. 5 インストールスクリプト.png

Writing Python code

Now select "input_sense.py". 6 Pythonテンプレート.png In the "Add component" above, "General single-value sense" was selected in the "New" dialog, but a Python template suitable for the selected content is automatically added. The function sense (self) is a function called by the platform (in other words, a function called by the platform), and is used to acquire data from a sensor device or the like at regular time intervals.   import psutil   cpu = psutil.cpu_percent() In the above two lines of code, the variable cpu stores the CPU usage at the time the function was called. Add the following line to convey this value to the Remotte platform as the "latest value":   self._sys.set_value({'value': cpu}) Finally, write the following code. 7 Pythonコード.png

Advanced program settings

Sets how often the sense (self) function described above is executed. Select the "Programs" tab under the "Configuration" tab hierarchy, select the checkbox "Platform calls sense function", and set the "Call cycle" to, for example, "2 seconds". 8 プログラムタブ.png

Let's run it so far

Let's run it once so far. First, press the "Save" button at the top of the screen. Next, with the "Configuration" tab selected, open the menu at the bottom left of the screen and select "Run Installation Script". 9 インストールスクリプトの実行.png When the "Run Installation Script" dialog is displayed and finally "Running Complete" is displayed at the bottom left of the dialog, click the "Close" button. 10 インストールスクリプト実行完了.png You only need to run the installation script once, and it will run automatically when you load an app or component downloaded from the Remotte store. Now it's time to run the app. Select the "Usage Page" tab, display the user screen on the "Layout" tab, and press the "Start" button at the top of the screen. The value representing CPU usage is updated every 2 seconds. 11 アプリを実行(初回).png

Change the expression on the screen

One of the major features of Limotte is that you can easily create screens without coding. Here, let's change the expression of CPU usage. Settings etc. cannot be changed while the app is running, so if the app is running, first press the "Stop" button at the top of the screen to stop the app. 12 レイアウトの編集.png On the layout screen, click an item located at the top left of the page to display its attributes on the right side of the screen. In the above, it can be seen that the latest value of CPU usage is expressed in the format of "display of one numerical value". Here, if you click the expression format icon on the right side of this screen, other expression formats will be displayed, and you can select the format you want to express on the page. 13 HMIのポップアップ.png For example, if you select "Stepless meter (circular, colored area)" and start the application, the following screen will appear. 14 円形領域色付き.png At the bottom right of the layout edit screen, detailed options can be set according to the type of expression format selected. 15 HMIのオプション.png If you want to lay out one information in multiple representation formats, for example, if you want to display the actual percentage value in the center of the above donut-shaped meter display, select the "Display Items" tab to the left of the "Layout" tab. To do. 16 表示項目.png On this screen, you can set how many items to display for each usage page. For example, as described above, change the "latest value" of "CPU usage" to "display two" and select the "layout" tab again. 17 2つのHMI.png With this, two display items can be arranged for one piece of information. After that, you can change the expression format for each item, change the position by dragging, change the size and various options, and make it your favorite format. In the example below, the start and end angles of the arc were changed, the text was centered, the size was increased, it was bold, the number of digits after the decimal point was zero, and the percent sign was set as the suffix. 18 カスタムメーター.png In addition, you can use various tools at the bottom of the screen to place text, images, and lines, and adjust the degree of overlap for each display item. 19 各種ツール.png

Save data and view history

So far, the latest value of CPU usage every 2 seconds has been displayed. Now let's save the acquired data and display the history in chronological order. The latest value transmitted by the set_value () function in the Python code is the setting item "Save data" immediately below by simply selecting the check box "Save data" in the "Settings" tab under the "Configuration" tab hierarchy. It will be stored in the in-app database during the "retention period". 20 データの保存.png In addition, if you select this check box, an item called "History" will be added to the "Display Items" tab of the "Usage Page", and you will be able to display time-series data. 21 履歴項目.png At the same time, display items for displaying the history are added to the "Layout" tab. 22 履歴のHMI追加.png In the above, it is displayed in the expression format of "history table of one numerical value", but change this to "line graph of history of one numerical value" and adjust the layout to make it as follows. Let's do it. 23 折れ線表示.png In this way, Limotte allows you to create screens without coding.

Use as a user

If you want someone other than yourself to publish the created app for use, register that person's email address in the app. Select the "Users" tab under the "Users Page" tab hierarchy of the management tool, click the "Add User" button, and then add the email address. 24 利用者の追加.png After this, please refer to another post for operations such as logging in as a user and displaying the history details screen.

Save the created application as a file

Edit the app information before saving the created app as a file and running it on another station or backing it up. Select "Edit" on the application list screen of the management tool. 25 アプリ情報の編集.png 26 アプリ情報の編集中.png Finally, select "Save to file" from the application list screen and enter the file name to save it. 27 アプリを保存.png

Summary

In this exercise, a series of flow of application development using Limotte, that is, using an application that regards the "CPU usage rate" of a personal computer as a sensor value, is used. Create a new app Add components Installation script description Writing Python code Advanced program settings Screen editing Save data and view history Save the created app file I experienced. This exercise includes about 60% of the development procedure on the Limotte platform, and the remaining 40% includes More detailed interface with the platform (function description) Program variable (option setting) Data exchange between components (data sharing) Components of media system, video analysis, audio analysis Etc. are included. Hereafter, these will be explained with exercises.

Recommended Posts

[Remote development] Let's make it first !! (Practice 1)
[Remote development] Control application (Practice 2)
Let's make a remote rumba [Hardware]
Let's make a remote rumba [Software]
[Remote development] Video analysis application (Practice 3)
[Remote development] Voice analysis application (Practice 4)
First Django development
Let's make a Makefile and build it (super beginner)