@things-factory/reference-app 6.0.25 → 6.0.28

package/dist-client/helps/board-modeller/modeller.ko.md

@@ -0,0 +1,244 @@
+# Board Modeller
+
+## Modeller Layout
+
+모델러의 레이아웃에 대해 설명한다.  
+![모델러-레이아웃][layout]
+
+1. 제어툴바: 되돌리기, 복사, 정렬, 반전 등 컴포넌트를 제어하는 기능이 모여있는 툴바.
+
+1. 컴포넌트 툴바: 모델러에서 사용할 수 있는 컴포넌트가 모여있는 툴바.
+
+1. 속성창: 컴포넌트의 속성이 모여있는 창.
+
+
+[layout]: ./images/modeler-layout-01.png
+
+
+## 제어툴바
+
+현재 모델링 중인 SCENE의 정보와 모델링을 더욱 간편하게 하기위해 필요한 기능들을 나열해 놓은 툴 바.  
+<span style="font-size: 13px; line-height:30px;">  (OS가 Mac인 경우는 <kbd>Ctrl</kbd>키를 <kbd class="dark">⌘</kbd>로 바꿔서 입력한다.) </span>
+
+1. 되돌리기![되돌리기][Undo](<kbd>Ctrl</kbd> + <kbd>Z</kbd>) :  
+  사용자가 마지막으로 편집한 내용을 되돌릴 수 있는 기능
+
+1. 다시실행![다시실행][Redo](<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd>) :  
+  되돌리기로 취소했던 작업의 내용을 다시 수행
+
+1. 잘라내기![잘라내기][Cut](<kbd>Ctrl</kbd> + <kbd>X</kbd>) :  
+  선택된 컴포넌트를 클립보드로 복사 하면서 현재의 컴포넌트는 삭제
+
+1. 복사![복사][Copy](<kbd>Ctrl</kbd> + <kbd>C</kbd>) :  
+  선택된 컴포넌트를 클립보드로 복사
+
+1. 붙여넣기![붙여넣기][Paste](<kbd>Ctrl</kbd> + <kbd>V</kbd>) :  
+  클립보드로 복사한 컴포넌트를 붙여넣음
+
+1. 삭제![삭제][Delete](<kbd>Delete</kbd> or <kbd>Backspace</kbd>) :  
+  선택된 컴포넌트를 삭제
+
+1. 왼쪽 정렬![왼쪽 정렬][Align left](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>) :  
+  선택된 컴포넌트들의 가장 왼쪽에 있는 컴포넌트를 기준으로 컴포넌트들을 왼쪽으로 정렬
+
+1. 가운데 정렬![가운데 정렬][Align center](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>) :  
+  선택된 컴포넌트들의 중앙 좌표를 기준으로 컴포넌트들의 x좌표를 가운데로 정렬
+
+1. 오른쪽 정렬![오른쪽 정렬][Align right](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd>) :  
+  선택된 컴포넌트들의 가장 오른쪽에 있는 컴포넌트를 기준으로 컴포넌트들을 오른쪽으로 정렬
+
+1. 위쪽 정렬![위쪽 정렬][Align top](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>T</kbd>) :  
+  선택된 컴포넌트들의 가장 위쪽에 있는 컴포넌트를 기준으로 컴포넌트들을 위쪽으로 정렬
+
+1. 중앙 정렬![중앙 정렬][Align midle](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd>) :  
+  선택된 컴포넌트들의 중앙 좌표를 기준으로 컴포넌트들의 y좌표를 가운데로 정렬
+
+1. 아래쪽 정렬![아래쪽 정렬][Align bottom](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd>) :  
+  선택된 컴포넌트들의 가장 아래쪽에 있는 컴포넌트를 기준으로 컴포넌트들을 아래쪽으로 정렬
+
+1. 가로 간격을 동일하게![가로 간격을 동일하게][Distribute horizontally]](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd>) :  
+  선택된 컴포넌트들의 가로방향 양 끝에 있는 컴포넌트를 기준으로 각 컴포넌트 사이의 폭을 같게 조절
+
+1. 세로 간격을 동일하게![세로 간격을 동일하게][Distribute vertically](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd>) :  
+  선택된 컴포넌트들의 세로방향 양 끝에 있는 컴포넌트를 기준으로 각 컴포넌트 사이의 폭을 같게 조절
+
+1. 맨 앞으로 가져오기![맨 앞으로 가져오기][Bring to front](<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd>) :  
+  선택된 컴포넌트의 순서를 맨 앞으로 보냄
+
+1. 맨 뒤로 보내기![맨 뒤로 보내기][Send to back](<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd>) :  
+  선택된 컴포넌트의 순서를 맨 뒤로 보냄
+
+1. 앞으로 가져오기![앞으로 가져오기][Bring forward](<kbd>Ctrl</kbd> + <kbd>F</kbd>) :  
+  선택된 컴포넌트의 순서를 한 칸 앞으로 보냄
+
+1. 뒤로 보내기![뒤로 보내기][Send backward](<kbd>Ctrl</kbd> + <kbd>B</kbd>) :  
+  선택된 컴포넌트의 순서를 한 칸 뒤로 보냄
+
+1. 좌우반전![좌우반전][Mirror horizontally](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd>) :  
+  선택된 컴포넌트를 가로를 기준으로 대칭
+
+1. 상하반전![상하반전][Mirror vertically]](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Y</kbd>) :  
+  선택된 컴포넌트를 세로를 기준으로 대칭
+
+1. 시계 방향으로 회전![시계 방향으로 회전][Rotate clockwise](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd>) :  
+  선택된 컴포넌트를 시계 방향으로 90도 회전
+
+1. 반시계 방향으로 회전![반시계 방향으로 회전][Rotate counterclockwise](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>W</kbd>) :  
+  선택된 컴포넌트를 반시계 방향으로 90도 회전
+
+1. 그룹![그룹][Group](<kbd>Ctrl</kbd> + <kbd>G</kbd>) :  
+  선택된 컴포넌트들을 그룹으로 묶음
+
+1. 그룹 해제![Ungroup][그룹 해제](<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>G</kbd>) :  
+  선택된 그룹을 해제
+
+1. 텍스트 크기 증가![텍스트 크기 증가][Increase text size](<kbd>Shift</kbd> + <kbd>WheelUp</kbd>) :  
+  선택된 컴포넌트의 텍스트 크기를 증가
+
+1. 텍스트 크기 감소![텍스트 크기 감소][Decrease text size](<kbd>Shift</kbd> + <kbd>WheelDown</kbd>) :  
+  선택된 컴포넌트의 텍스트 크기를 감소
+
+1. 캔버스 크기 맞추기![캔버스 크기 맞추기][Fit scene](<kbd>Ctrl</kbd> + <kbd>D</kbd>) :  
+  캔버스의 크기를 화면에 딱 맞게 리사이즈 시킴
+  
+1. 미리보기![미리보기][Preview](<kbd>Ctrl</kbd> + <kbd>P</kbd>) :  
+  편집하고 있는 모델링 화면의 3D 컴포넌트, 애니메이션 등 효과를 미리 확인  
+
+1. 전체 화면![전체 화면][Full screen](<kbd>F11</kbd>) :  
+  툴바와 속성창들을 모두 숨기고 모델링 화면을 전체화면으로 변환
+
+1. 속성 창 숨기기![속성 창 숨기기][Toggle property panel](<kbd>Ctrl</kbd> + <kbd>H</kbd>) :  
+  속성 창을 숨기거나 보여줌
+
+[control-toolbar]: ./images/control-toolbar.png
+
+[Undo]: ./images/control-toolbar-02.png
+
+[Redo]: ./images/control-toolbar-03.png
+
+[Cut]: ./images/control-toolbar-04.png
+
+[Copy]: ./images/control-toolbar-05.png
+
+[Paste]: ./images/control-toolbar-06.png
+
+[Delete]: ./images/control-toolbar-07.png
+
+[Copy style]: ./images/control-toolbar-08.png
+
+[Align left]: ./images/control-toolbar-09.png
+
+[Align center]: ./images/control-toolbar-10.png
+
+[Align right]: ./images/control-toolbar-11.png
+
+[Align top]: ./images/control-toolbar-12.png
+
+[Align midle]: ./images/control-toolbar-13.png
+
+[Align bottom]: ./images/control-toolbar-14.png
+
+[Distribute horizontally]: ./images/control-toolbar-15.png
+
+[Distribute vertically]: ./images/control-toolbar-16.png
+
+[Bring to front]: ./images/control-toolbar-17.png
+
+[Send to back]: ./images/control-toolbar-18.png
+
+[Bring forward]: ./images/control-toolbar-19.png
+
+[Send backward]: ./images/control-toolbar-20.png
+
+[Mirror horizontally]: ./images/control-toolbar-21.png
+
+[Mirror vertically]: ./images/control-toolbar-22.png
+
+[Rotate clockwise]: ./images/control-toolbar-23.png
+
+[Rotate counterclockwise]: ./images/control-toolbar-24.png
+
+[Group]: ./images/control-toolbar-25.png
+
+[Ungroup]: ./images/control-toolbar-26.png
+
+[Increase text size]: ./images/control-toolbar-27.png
+
+[Decrease text size]: ./images/control-toolbar-28.png
+
+[Fit scene]: ./images/control-toolbar-29.png
+
+[Preview]: ./images/control-toolbar-32.png
+
+[Full screen]: ./images/control-toolbar-30.png
+
+[Toggle property panel]: ./images/control-toolbar-31.png
+
+
+## 컴포넌트 툴바
+
+모델러에서 사용가능한 컴포넌트가 모여있는 툴바. 컴포넌트 툴바에서 원하는 컴포넌트를 클릭하면 모델러에 해당 컴포넌트가 추가된다.  
+
+
+- ![화살표][component-arrow] : 선택모드와 이동모드를 변경한다. <kbd>Space</kbd>를 누르고 있는 동안 이동모드로 작동한다.
+
+- ![선][component-line] :선 컴포넌트가 모여있다.
+
+- ![도형][component-shape] :도형 컴포넌트가 모여있다.
+
+- ![텍스트 미디어][component-text-media] :텍스트 미디어 컴포넌트가 모여있다.
+
+- ![차트 게이지][component-chart-gauge] :차트 게이지 컴포넌트가 모여있다.
+
+- ![표][component-table] :표 컴포넌트가 모여있다.
+
+- ![컨테이너][component-container] :컨테이너 컴포넌트가 모여있다.
+
+- ![데이터소스][component-datasource] :데이터소스 컴포넌트가 모여있다.
+
+- ![IOT][component-iot] :IOT 컴포넌트가 모여있다.
+
+- ![3D][component-3D] :3D 컴포넌트가 모여있다.
+
+- ![창고][component-warehouse] :창고 컴포넌트가 모여있다.
+
+- ![폼][component-form] :폼 컴포넌트가 모여있다.
+
+- ![기타][component-etc] :기타 컴포넌트가 모여있다.
+
+
+[component-toolbar]: ./images/component-toolbar.png
+[component-arrow]: ./images/component-arrow.png
+[component-line]: ./images/component-line.png
+[component-shape]: ./images/component-shape.png
+[component-text-media]: ./images/component-text-media.png
+[component-chart-gauge]: ./images/component-chart-gauge.png
+[component-table]: ./images/component-table.png
+[component-container]: ./images/component-container.png
+[component-datasource]: ./images/component-datasource.png
+[component-iot]: ./images/component-iot.png
+[component-3D]: ./images/component-3D.png
+[component-warehouse]: ./images/component-warehouse.png
+[component-form]: ./images/component-form.png
+[component-etc]: ./images/component-etc.png
+
+## 속성창
+
+속성창의 기능들에 대해 설명한다.  
+
+1. ![모양속성탭][shape-property-tab]: 컴포넌트의 모양에 관련된 속성. ID, class를 부여하거나, 너비, 높이 등을 지정할 수 있다.
+
+1. ![스타일속성탭][style-property-tab]: 컴포넌트의 스타일에 관련된 속성. 색상, 폰트 등을 지정할 수 있다.
+
+1. ![효과속성탭][effect-property-tab]: 컴포넌트의 효과에 관련된 속성. 그림자, 애니메이션, 클릭시 이벤트를 지정할 수 있다.
+
+1. ![특정속성탭][specific-property-tab]: 컴포넌트 고유 속성.
+
+1. ![데이터속성탭][variable-property-tab]: Scene의 데이터에 관련된 속성. 
+
+[property-window]: ./images/property-window.png
+[shape-property-tab]: ./images/shape-property.png
+[style-property-tab]: ./images/style-property.png
+[effect-property-tab]: ./images/effect-property.png
+[specific-property-tab]: ./images/specific-property.png
+[variable-property-tab]: ./images/variable-property.png

package/dist-client/helps/board-modeller/modeller.md

@@ -0,0 +1,206 @@
+# Board Modeller
+
+## Layout
+It describes about the layout of modeler.
+![modeler-layout](./images/modeler-layout-01.png)
+
+1. Control Toolbar: The toolbar in which has concentrated the function of controlling the component like return, copy, sort, reverse, etc.
+
+1. Component toolbar: The toolbar in which has concentrated the component of being used in modeler.
+
+1. Property window: The window in which has concentrated the property of component.
+
+
+## Toolbar
+
+A tool bar that lists the information on the SCENE currently being modeled and the functions needed to make modeling easier.  
+<span style="font-size: 13px; line-height:30px;">  (If your OS is a Mac, type <kbd class="dark">⌘</kbd> in place of <kbd>Ctrl</kbd> key.) </span>
+
+1. Undo![Undo][Undo](<kbd>Ctrl</kbd> + <kbd>Z</kbd>) :  
+  The function to undo the last edited content.
+
+1. Redo![Redo][Redo](<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd>) :  
+  Redo the contents of the operation undone.
+
+1. Cut![Cut][Cut](<kbd>Ctrl</kbd> + <kbd>X</kbd>) :  
+  Delete the current component while copying the selected component to the clipboard.
+
+1. Copy![Copy][Copy](<kbd>Ctrl</kbd> + <kbd>C</kbd>) :  
+  Copy the selected component to the clipboard.
+
+1. Paste![Paste][Paste](<kbd>Ctrl</kbd> + <kbd>V</kbd>) :  
+  Paste the copied component to the clipboard.
+
+1. Delete![Delete][Delete](<kbd>Delete</kbd> or <kbd>Backspace</kbd>) :  
+  Delete the selected component.
+
+1. Align left![Align left][Align left](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd>) :  
+  Align the components to the left based on the leftmost component of the selected components.
+
+1. Align center![Align center][Align center](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>) :  
+  Align X-coordinate of components center based on the center coordinate of the selected components.
+
+1. Align right![Align right][Align right](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd>) :  
+  Align the components to the right based on the rightmost component of the selected components.
+
+1. Align top![Align top][Align top](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>T</kbd>) :  
+  Align the components to the top based on the topmost component of the selected components.
+
+1. Align center![Align center][Align center](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd>) :  
+  Align Y-coordinate of components center based on the center coordinate of the selected components.
+
+1. Align bottom![Align bottom][Align bottom](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd>) :  
+  Align the components to the bottom based on the bottommost component of the selected components.
+
+1. Distribute horizontally![Distribute horizontally][Distribute horizontally](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd>) :  
+  Adjusts the width between components to be the same based on the components at both ends of the selected components in the horizontal direction.
+
+1. Distribute vertically![Distribute vertically][Distribute vertically](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd>) :  
+  Adjusts the height between components to be the same based on the components at both ends of the selected components in the vertical direction.
+
+1. Bring to front![Bring to front][Bring to front](<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd>) :  
+  Move the selected component in front of all other components.
+
+1. Send to back![Send to back][Send to back](<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd>) :  
+  Move the selected component behind all other components.
+
+1. Bring forward![Bring forward][Bring forward](<kbd>Ctrl</kbd> + <kbd>F</kbd>) :  
+  Move the selected component one layer forward.
+
+1. Send backward![Send backward][Send backward](<kbd>Ctrl</kbd> + <kbd>B</kbd>) :  
+  Move the selected component one layer back.
+
+1. Mirror horizontally![Mirror horizontally][Mirror horizontally](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd>) :   Mirror the selected component horizontally.
+
+1. Mirror vertically![Mirror vertically][Mirror vertically](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Y</kbd>) :  
+  Mirror the selected component vertically.
+
+1. Rotate clockwise![Rotate clockwise][Rotate clockwise](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd>) :  
+  Rotate the selected component 90 degrees clockwise.
+
+1. Rotate counterclockwise![Rotate counterclockwise][Rotate counterclockwise](<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>W</kbd>) :  
+  Rotate the selected component 90 degrees counterclockwise.
+
+1. Group![Group][Group](<kbd>Ctrl</kbd> + <kbd>G</kbd>) :  
+  Group the selected components.
+
+1. Ungroup![Ungroup][Ungroup](<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>G</kbd>) :  
+  Ungroup the selected group.
+
+1. Increase text size![Increase text size][Increase text size](<kbd>Shift</kbd> + <kbd>WheelUp</kbd>) :  
+  Increase the text size of the selected component.
+
+1. Decrease text size![Decrease text size][Decrease text size](<kbd>Shift</kbd> + <kbd>WheelDown</kbd>) :  
+  Decrease the text size of the selected component.
+
+1. Fit scene![Fit scene][Fit scene](<kbd>Ctrl</kbd> + <kbd>D</kbd>) :  
+  Fit the size of the canvas just to the screen.
+
+1. Preview![Preview][Preview](<kbd>Ctrl</kbd> + <kbd>P</kbd>) :  
+  Preview 3D components, animations, and other effects on the modeling screen you're editing.    
+
+1. Full screen![Full screen][Full screen](<kbd>F11</kbd>) :  
+  Hide all toolbars and property windows, and convert the modeling screen to full screen.
+
+1. Toggle property panel![Toggle property panel][Toggle property panel](<kbd>Ctrl</kbd> + <kbd>H</kbd>) :  
+  Hide or show property windows.
+
+
+[control-toolbar]: ./images/control-toolbar.png#control-toolbar
+[Undo]: ./images/control-toolbar-02.png
+[Redo]: ./images/control-toolbar-03.png
+[Cut]: ./images/control-toolbar-04.png
+[Copy]: ./images/control-toolbar-05.png
+[Paste]: ./images/control-toolbar-06.png
+[Delete]: ./images/control-toolbar-07.png
+[Copy style]: ./images/control-toolbar-08.png
+[Align left]: ./images/control-toolbar-09.png
+[Align center]: ./images/control-toolbar-10.png
+[Align right]: ./images/control-toolbar-11.png
+[Align top]: ./images/control-toolbar-12.png
+[Align center]: ./images/control-toolbar-13.png
+[Align bottom]: ./images/control-toolbar-14.png
+[Distribute horizontally]: ./images/control-toolbar-15.png
+[Distribute vertically]: ./images/control-toolbar-16.png
+[Bring to front]: ./images/control-toolbar-17.png
+[Send to back]: ./images/control-toolbar-18.png
+[Bring forward]: ./images/control-toolbar-19.png
+[Send backward]: ./images/control-toolbar-20.png
+[Mirror horizontally]: ./images/control-toolbar-21.png
+[Mirror vertically]: ./images/control-toolbar-22.png
+[Rotate clockwise]: ./images/control-toolbar-23.png
+[Rotate counterclockwise]: ./images/control-toolbar-24.png
+[Group]: ./images/control-toolbar-25.png
+[Ungroup]: ./images/control-toolbar-26.png
+[Increase text size]: ./images/control-toolbar-27.png
+[Decrease text size]: ./images/control-toolbar-28.png
+[Fit scene]: ./images/control-toolbar-29.png
+[Preview]: ./images/control-toolbar-32.png
+[Full screen]: ./images/control-toolbar-30.png
+[Toggle property panel]: ./images/control-toolbar-31.png
+
+## Component Toolbar
+
+The toolbar in which has concentrated the component being used in the modeler. If click the required component in the component toolbar, the corresponding component will be added to the modeler.  
+
+- ![arrow][component-arrow] : Change the selection mode and shift mode. It will operate as shift mode during pressing <kbd>Space</kbd>.
+
+- ![line][component-line] : Contain line components
+
+- ![shape][component-shape] : Contain shape components
+
+- ![text media][component-text-media] : Contain text and media components
+
+- ![chart gauge][component-chart-gauge] : Contain chart and gauge components
+
+- ![table][component-table] : Contain table components
+
+- ![container][component-container] : Contain container components.
+
+- ![datasource][component-datasource] : Contain datasource components#datasource-component).
+
+- ![IOT][component-iot] : Contain IOT component
+
+- ![3D][component-3D] : Contain 3D component
+
+- ![warehouse][component-warehouse] : Contain warehouse components.
+
+- ![form][component-form] : Contain form components
+
+- ![etc][component-etc] : Contain other components
+
+[component-toolbar]: ./images/component-toolbar.png
+[component-arrow]: ./images/component-arrow.png
+[component-line]: ./images/component-line.png
+[component-shape]: ./images/component-shape.png
+[component-text-media]: ./images/component-text-media.png
+[component-chart-gauge]: ./images/component-chart-gauge.png
+[component-table]: ./images/component-table.png
+[component-container]: ./images/component-container.png
+[component-datasource]: ./images/component-datasource.png
+[component-iot]: ./images/component-iot.png
+[component-3D]: ./images/component-3D.png
+[component-warehouse]: ./images/component-warehouse.png
+[component-form]: ./images/component-form.png
+[component-etc]: ./images/component-etc.png
+
+## Property Window
+
+It describes about the functions of property window.  
+
+1. ![shape property tab][shape-property-tab]: The property related to the shape of component. You can assign ID, class or specify the width, height, etc.
+
+1. ![style property tab][style-property-tab]: You can specify the property, color, font related to the style of component.
+
+1. ![effect property tab][effect-property-tab]: The property related to the effect of component. You can specify the shadow, animation, click event.
+
+1. ![specific property tab][specific-property-tab]: The specific property of component.
+
+1. ![variable property tab][variable-property-tab]: The property related to the data of Scene.
+
+[property-window]: ./images/property-window.png
+[shape-property-tab]: ./images/shape-property.png
+[style-property-tab]: ./images/style-property.png
+[effect-property-tab]: ./images/effect-property.png
+[specific-property-tab]: ./images/specific-property.png
+[variable-property-tab]: ./images/variable-property.png