diff --git a/docs/Edge/Raspberry_Pi_Devices/reComputer_R1000/Applications/Fin/recomputer_r1000_with-fin_create_floor_graphic.md b/docs/Edge/Raspberry_Pi_Devices/reComputer_R1000/Applications/Fin/recomputer_r1000_with-fin_create_floor_graphic.md
new file mode 100644
index 000000000000..d12d99285816
--- /dev/null
+++ b/docs/Edge/Raspberry_Pi_Devices/reComputer_R1000/Applications/Fin/recomputer_r1000_with-fin_create_floor_graphic.md
@@ -0,0 +1,115 @@
+---
+description: This article will show you how to create a Floor Graphic
+
+title: reComputer R1000 with FIN to create a Floor 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_floor_gaphic
+last_update:
+ date: 07/18/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 `Floor 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 |
+
+ |
+
+ |
+
+ |
+
+ |
+
+
+
+
+**Step 2**: Create a new Floor Graphic and enter the editing interface. Click `Graphic Builder => new`, and the pop-up window of `Create a Floorplan Graphic` will appear.
+
+
+It has four attributes:
+
+ - Craphic Name
+ - Pick a Sample Equip
+ - Pick Default Point : Attributes that will be displayed in the graphic
+ - Pick Comparison Point : Reference point for color range
+
+Clicking 'OK' will bring up a new pop-up window that lists' Equip 'with the same properties as' Pick Default Point'. Here, we select all of them and finally click 'OK'.
+After that, our newly created Graphic will appear on the right side. Click `CCFloor1 => Edit` to enter the editing interface.
+
+
+
+### Configure new Site Graphic
+
+**Step 1**: Import background image. First, select `BACGROUND` in the property bar in the lower left corner, select `TYPE` as `IMAGE`, then import the background image into the workspace, Select `Center` for the `POSITION` option and `NO REPEAT` for the `REPEAT` option. 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.
+
+
+
+**Step 2**: Draw polygons. We use the `polygon Tool` to draw polygons to mark the position of each `Equip`.
+
+
+
+**Step 3**: Add `Virtual points`. Switch to the `Virtual points` panel on the left, select the `virtual point` that matches the `Equip` we selected, and drag it into the drawn polygon.
+
+
+
+**Step 4**: Add smart tags. Click on `Magic Buttons => Smart Label to Polys` to automatically place the label on the corresponding `Virtual Points`.
+
+
+
+**Step 5**: Adjust the size of smart tags. You can click on the smart label to adjust its size. If you want to modify the size of multiple smart labels at the same time, you can click on `Compulsions=>Smart label=>Select` to select all smart labels, and then adjust their size
+
+
+
+
+**Step 6**: Change the smart tag to `non interactive` so that the tag does not interfere with your operations
+
+
+
+**Step 7**: Save and display the effect.
+
+
+
+## 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/docs/Edge/Raspberry_Pi_Devices/reComputer_R1000/Applications/Fin/recomputer_r1000_with_fin_create_site_graphic.md b/docs/Edge/Raspberry_Pi_Devices/reComputer_R1000/Applications/Fin/recomputer_r1000_with_fin_create_site_graphic.md
new file mode 100644
index 000000000000..efc0a44791aa
--- /dev/null
+++ b/docs/Edge/Raspberry_Pi_Devices/reComputer_R1000/Applications/Fin/recomputer_r1000_with_fin_create_site_graphic.md
@@ -0,0 +1,98 @@
+---
+description: This article will show you how to create a Site Graphic
+
+title: reComputer R1000 with FIN to create a Site 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_site_gaphic
+last_update:
+ date: 07/18/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 `Site 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 |
+
+ |
+
+ |
+
+ |
+
+ |
+
+
+
+
+**Step 2**: Create a new Graphic and enter the editing interface. Click `Graphic Builder => new`, and the pop-up window of `Create a Graphic` will appear. The difference from creating `Top Level Graphic` is that the second property here becomes `Select floors to include in site graphic`, We select all the created `Floor` and finally click `OK`. After that, our newly created Graphic will appear on the right side. Click `CC Main => Edit` to enter the editing interface.
+
+
+
+### Configure new Site Graphic
+
+**Step 1**: Import background image. First, select `BACGROUND` in the property bar in the lower left corner, select `TYPE` as `IMAGE`, then import the background image into the workspace, adjust the size and fix it. 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**: Adjust label position. Since we imported 4 `Floors`, the system automatically generated 4 labels for us. For the sake of beauty, we mapped these labels to the floors one by one.
+
+
+
+**Step 3**: Draw polygons. We use the `polygon Tool` to draw polygons to mark the position of each `Floor`.
+
+
+
+**Step 4**: Add `Virtual points`. Switch to the `Virtual points` panel on the left, select the `virtual point` that matches the `Floor` we selected, and drag it into the drawn polygon.
+
+
+
+**Step 5**: Make the polygon transparent.
+
+
+
+**Step 6**: After saving the settings, we can enter the new `Site graphic` from `Top Level Graphic`.
+
+
+
+## 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/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
index 5bff1951ae2e..b4f89f564e92 100644
--- 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
@@ -18,7 +18,7 @@ last_update:
## 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`.
+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
@@ -48,7 +48,7 @@ Before you start this project, you may need to prepare your hardware and softwar
* 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
+### Create new Top Level 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.
@@ -57,9 +57,9 @@ Before you start this project, you may need to prepare your hardware and softwar
-### Configure new Graphic
+### Configure new Top Level 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 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.
diff --git a/sidebars.js b/sidebars.js
index 3f2c76eddbb7..f784855e1763 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -2975,6 +2975,8 @@ const sidebars = {
'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',
+ 'Edge/Raspberry_Pi_Devices/reComputer_R1000/Applications/Fin/recomputer_r1000_with_fin_create_site_graphic',
+ 'Edge/Raspberry_Pi_Devices/reComputer_R1000/Applications/Fin/recomputer_r1000_with-fin_create_floor_graphic',
],
},
{
