From 3791aaa31dbacb7b6bb133263fb6406ddff24508 Mon Sep 17 00:00:00 2001 From: ShuishengPeng <63339353+ackPeng@users.noreply.github.com> Date: Wed, 17 Jul 2024 18:09:33 +0800 Subject: [PATCH] add recomputer_r1000_with_fin_top_level_graphic --- ...mputer_r1000_with_fin_top_level_graphic.md | 106 ++++++++++++++++++ sidebars.js | 2 +- 2 files changed, 107 insertions(+), 1 deletion(-) create mode 100644 docs/Edge/Raspberry_Pi_Devices/reComputer_R1000/Applications/Fin/recomputer_r1000_with_fin_top_level_graphic.md diff --git a/docs/Edge/Raspberry_Pi_Devices/reComputer_R1000/Applications/Fin/recomputer_r1000_with_fin_top_level_graphic.md b/docs/Edge/Raspberry_Pi_Devices/reComputer_R1000/Applications/Fin/recomputer_r1000_with_fin_top_level_graphic.md new file mode 100644 index 000000000000..5bff1951ae2e --- /dev/null +++ b/docs/Edge/Raspberry_Pi_Devices/reComputer_R1000/Applications/Fin/recomputer_r1000_with_fin_top_level_graphic.md @@ -0,0 +1,106 @@ +--- +description: This article will show you how to create a Top Level Graphic + +title: reComputer R1000 with FIN to create a Top Level Graphic +keywords: + - Edge Controller + - reComputer R1000 + - FIN + - ModbusTCP + - Graphic +image: https://files.seeedstudio.com/wiki/reComputer-R1000/recomputer_r_images/01.png +slug: /reComputer_r1000_fin_top_level_gaphic +last_update: + date: 07/17/2024 + author: ShuishengPeng +--- + +## Introduction +FIN Framework (FIN) is a software framework with application suites that can integrate, control, manage, analyze, visualize and connect. Its capabilities can be integrated by OEMs into a range of products and services. + +This article will show you how to use the `Graphics Builder` of FIN Framwork, and to create a Top Level Graphic using the `Graphics Builder`. + +## Getting Start + +Before you start this project, you may need to prepare your hardware and software in advance as described here. + +### Hardware Preparation + +
+ + + + + + + + + + + + +
reComputer R1000
+ Get One Now 🖱️ +
+
+ +### Software Preparation +* Regarding how to install FIN Framwork, you can refer to this [wiki](https://wiki.seeedstudio.com/reComputer_r1000_install_fin/). + +## Steps of create a Top Level Graphic +### Create new Graphic +**Step 1**: We create three sites. For how to create sites under Equip Tree, you can refer to this [wiki](https://wiki.seeedstudio.com/reComputer_r1000_fin_modbus_tcp_and_rtu/#add-data-points-to-equip-tree). And please keep the system context in the home directory. + +
+ +**Step 2**: Click `Graphics Builder => New`, and a pop-up window named `Create a Graphic` will appear. You need to fill in the `Graphic Name` and `Select sites to include in Top Level graphic` properties, among which the optional `site` is the `site` we created in the first step. Finally, click `OK` and our newly created Graphic will appear on the right side. Click it and then click `Edit` to enter the editing page. + +
+ +### Configure new Graphic + +**Step 1**: Import the floor plan. First select `IMAGE` in the `TYPE` column in the lower left corner, and then you can import the background image. There are two ways to import background images. The first way is to drag it directly from the folder into the edit box; the second way is to click `BROWSE` in the lower left corner. If you have imported a certain image before, you can click here Find that picture. After importing, right-click the mouse and select `Arrange => Send to back` to move the image to the bottom layer. + +
+ +**Step 2**: Since we selected three `site`, the system will automatically generate three labels. For the sake of beauty, we will place them in the lower right corner and align them. + +
+ +**Step 3**: We can add a `label` to explain some information. We find the `label` control on the left and drag it into the workspace, adjust its size, and then change the text and text size of `label` in the lower right corner. + +
+ +**Step 4**: Add `Graphic include` to put our tags together and set a background color to make the visual effect more beautiful + +
+ +**Step 5**: Draw the polygon. Use the `polygon Tool` at the top to draw a polygon to mark the location of our `site`. After drawing, you can also use the `Edit polygon Tool` tool to adjust the polygon. + +
+ +**Step 6**: Add `Virtual points`. Switch to the `Virtual points` panel on the left, select the `virtual point` that matches the `site` we selected, and drag it into the drawn polygon. + +
+ +**Step 7**: Make the polygon transparent. + +
+ +**Step 8**: After saving the settings, click `Graphics Builder => Menu` and a new interface will appear on the right. Click `Top Level Graphic => Create` in the new interface and a popup named `Edit Top Level Record` will appear. window, select the Graphic we set, and finally click `APPLY`. After returning to the main interface, you can see the Top Level Graphic we set. + +
+ +## Tech Support & Product Discussion + +Thank you for choosing our products! We are here to provide you with different support to ensure that your experience with our products is as smooth as possible. We offer several communication channels to cater to different preferences and needs. + +
+ + +
+ +
+ + +
diff --git a/sidebars.js b/sidebars.js index dee267e4f5e8..a0e585143a93 100644 --- a/sidebars.js +++ b/sidebars.js @@ -2974,7 +2974,7 @@ const sidebars = { 'Edge/Raspberry_Pi_Devices/reComputer_R1000/Applications/Fin/recomputer_r1000_install_fin', 'Edge/Raspberry_Pi_Devices/reComputer_R1000/Applications/Fin/recomputer_r1000_with_fin_use_modbus', 'Edge/Raspberry_Pi_Devices/reComputer_R1000/Applications/Fin/recomputer_r1000_with-_fin_use_logic_to_alarm', - + 'Edge/Raspberry_Pi_Devices/reComputer_R1000/Applications/Fin/recomputer_r1000_with_fin_top_level_graphic', ], }, {