@things-factory/reference-app 6.0.25 → 6.0.28

package/dist-client/helps/scene/component/gauge-horizon.zh.md

@@ -0,0 +1,145 @@
+# gauge horizon
+![组件-仪表（垂直）][gauge-vertical-01]  
+用竖条形状，显示仪表的组件。
+
+
+## properties
+  
+1. Value(Number) - 仪表的值。  
+<figure style="text-align: center;">
+
+![仪表-Value适用结果][gauge-vertical-02]  
+<figurecaption>(value: 85)</figurecaption>
+</figure>
+
+2. startValue - 仪表的起始值。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-03]  
+<figurecaption>(startValue: 10)</figurecaption>
+</figure>
+
+3. endValue - 仪表的最终值。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-04]  
+<figurecaption>(endValue: 120)</figurecaption>
+</figure>
+
+4. step - 仪表的刻度间隔。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-05]  
+<figurecaption>(step: 30)</figurecaption>
+</figure>
+
+5. stepTextSize - 仪表的刻度文本大小。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-06]  
+<figurecaption>(stepTextSize: 10)</figurecaption>
+</figure>
+
+6. subStep - 仪表的刻度之间间隔。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-07]  
+<figurecaption>(subStep: 10)</figurecaption>
+</figure>
+
+7. stepNeedleSize - 仪表的刻度大小。
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-08]  
+<figurecaption>(stepNeedleSize: 3)</figurecaption>
+</figure>
+
+8. textColor - 仪表的刻度文本颜色。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-09]  
+<figurecaption>(textColor: #ec5324)</figurecaption>
+</figure>
+
+9. needleFillStyle - 仪表的针色。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-10]  
+<figurecaption>(needleFillStyle: #ec5324)</figurecaption>
+</figure>
+
+10. needleSize - 仪表指针大小。
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-11]  
+<figurecaption>(needleSize: 10)</figurecaption>
+</figure>
+
+11. stepFillStyle - 仪表刻度的颜色。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-12]  
+<figurecaption>(stepFillStyle: #ec5324)</figurecaption>
+</figure>
+
+12. colorStops - 仪表的各个区间的颜色。可以通过双击而添加区间，也可以向下拖动标记而删除区间。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-13]  
+<figurecaption>(colorStops: <img src="{{site.baseurl}}/assets/components/color-stops-value.png" height="30" alt="color stops">)</figurecaption>
+</figure>
+
+13. showStartValue - 决定是否显示仪表的起始值。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-14]  
+<figurecaption>(showStartValue: unchecked)</figurecaption>
+</figure>
+
+14. showEndValue - 决定是否显示仪表的最终值。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-15]  
+<figurecaption>(showEndValue: unchecked)</figurecaption>
+</figure>
+
+15. showStepLine - 决定是否显示仪表的刻度。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-16]  
+<figurecaption>(showStepLine: unchecked)</figurecaption>
+</figure>
+
+16. showStepText - 决定是否显示仪表的刻度值。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-17]  
+<figurecaption>(showStepText: unchecked)</figurecaption>
+</figure>
+
+17. showSubStep - 决定是否显示仪表的分刻度。  
+<figure style="text-align: center;">
+
+![仪表-BackgroundColor适用结果][gauge-vertical-18]  
+<figurecaption>(showSubStep: unchecked)</figurecaption>
+</figure>
+
+
+[gauge-vertical-01]:../images/gauge-vertical-01.png
+[gauge-vertical-02]:../images/gauge-vertical-02.png
+[gauge-vertical-03]:../images/gauge-vertical-03.png
+[gauge-vertical-04]:../images/gauge-vertical-04.png
+[gauge-vertical-05]:../images/gauge-vertical-05.png
+[gauge-vertical-06]:../images/gauge-vertical-06.png
+[gauge-vertical-07]:../images/gauge-vertical-07.png
+[gauge-vertical-08]:../images/gauge-vertical-08.png
+[gauge-vertical-09]:../images/gauge-vertical-09.png
+[gauge-vertical-10]:../images/gauge-vertical-10.png
+[gauge-vertical-11]:../images/gauge-vertical-11.png
+[gauge-vertical-12]:../images/gauge-vertical-12.png
+[gauge-vertical-13]:../images/gauge-vertical-13.png
+[gauge-vertical-14]:../images/gauge-vertical-14.png
+[gauge-vertical-15]:../images/gauge-vertical-15.png
+[gauge-vertical-16]:../images/gauge-vertical-16.png
+[gauge-vertical-17]:../images/gauge-vertical-17.png
+[gauge-vertical-18]:../images/gauge-vertical-18.png

package/dist-client/helps/scene/component/gauge-vertical.ko.md

@@ -0,0 +1,12 @@
+# virtical gauge
+![컴포넌트-게이지(수평)][gauge-horizontal-01]  
+게이지를 가로막대 형태로 표시해주는 컴포넌트
+
+- Category : Gauge
+- 속성 :  
+  < 수직 게이지와 동일 >
+
+
+[gauge-horizontal-01]: ../images/gauge-horizontal-01.png
+
+## properties

package/dist-client/helps/scene/component/gauge-vertical.md

@@ -0,0 +1,9 @@
+# virtical gauge
+![Component-Gauge(Horizontal)][gauge-horizontal-01]  
+The component which displays the gauge with a horizontal bar.
+
+- Property :  
+  < The same as the vertical gauge >
+
+
+[gauge-horizontal-01]: ../images/gauge-horizontal-01.png

package/dist-client/helps/scene/component/gauge-vertical.zh.md

@@ -0,0 +1,10 @@
+# virtical gauge[en]
+![组件-仪表（水平）][gauge-horizontal-01]  
+用横条形状，显示仪表的组件。
+
+- 属性：  
+  <同垂直仪表。>
+
+
+[gauge-horizontal-01]: ../images/gauge-horizontal-01.png
+## properties

package/dist-client/helps/scene/component/gif-view.ko.md

@@ -0,0 +1,10 @@
+# GIF View
+
+GIF([Graphics Interchange Format](https://en.wikipedia.org/wiki/GIF)) 그래픽 파일을 보여주는 컴포넌트이다.
+
+## properties
+
+- src
+  - GIF 파일의 URL
+- play (value property)
+  - GIF 애니메이션을 실행여부 설정

package/dist-client/helps/scene/component/gif-view.md

@@ -0,0 +1,10 @@
+[en]# GIF View
+
+GIF([Graphics Interchange Format](https://en.wikipedia.org/wiki/GIF)) 그래픽 파일을 보여주는 컴포넌트이다.
+
+## properties
+
+- src
+  - GIF 파일의 URL
+- play (value property)
+  - GIF 애니메이션을 실행여부 설정

package/dist-client/helps/scene/component/gif-view.zh.md

@@ -0,0 +1,10 @@
+[zh]# GIF View
+
+GIF([Graphics Interchange Format](https://en.wikipedia.org/wiki/GIF)) 그래픽 파일을 보여주는 컴포넌트이다.
+
+## properties
+
+- src
+  - GIF 파일의 URL
+- play (value property)
+  - GIF 애니메이션을 실행여부 설정

package/dist-client/helps/scene/component/global-ref.ko.md

@@ -0,0 +1 @@
+[ko]

package/dist-client/helps/scene/component/global-ref.md

@@ -0,0 +1 @@
+[en]

package/dist-client/helps/scene/component/global-ref.zh.md

@@ -0,0 +1 @@
+[zh]

package/dist-client/helps/scene/component/gray-image.ko.md

@@ -0,0 +1,9 @@
+# Gray image
+
+![Media][Media-02]  
+Gray image를 업로드한다.
+
+
+- Category : Media
+
+[Media-02]: ../images/media-02.png

package/dist-client/helps/scene/component/gray-image.md

@@ -0,0 +1,9 @@
+# Gray image
+
+![Media][Media-02]  
+Upload a Gray image.
+
+
+- Category : Media
+
+[Media-02]: ../images/media-02.png

package/dist-client/helps/scene/component/gray-image.zh.md

@@ -0,0 +1,8 @@
+# 灰度图像
+
+![Media][Media-02] 
+
+
+- 类型：媒体
+
+[Media-02]: ../images/media-02.png

package/dist-client/helps/scene/component/indoor-map.ko.md

@@ -0,0 +1,65 @@
+# indoor-map
+
+## example
+
+사각형 컴포넌트에 이벤트를 걸어 인도어 층을 제어
+> - **사각형 컴포넌트에 click이벤트를 걸어 Indoor에 전달**  
+> - **Indoor의 value속성을 바꿔주면 Floor가 변경된다.**  
+
+![gif][gif-01]  
+
+
+[gif-01]: ../images/indoor-button-finish-01.gif
+
+1. 3개의 층을 가진 Indoor를 생성한다.
+
+![인도어][indoor-create]  
+
+2. 구별을 위해 층마다 텍스트를 넣었다.
+
+![인도어][indoor-text]  
+
+
+3. 인도어맵의 아이디를 'indoor'로 지정한다.
+
+![인도어][indoor-id]  
+
+4. 버튼 이벤트 추가
+- 사각형 3개를 그린 후, '효과 창'에서 변수정보에 indoor를 선택한다.  
+(변수 정보에는 기본 이벤트와 컴포넌트들의 아이디 리스트가 나온다.)   
+![버튼이벤트][button-02]
+
+- 각 사각형마다 값을 매핑한다. (사각형을 클릭할 시, indoor 아이디를 가진 컴포넌트에 '0'이란 데이터를 넘겨주게 된다.)
+  - 1층 - 0
+  - 2층 - 1
+  - 3층 - 2  
+
+![버튼이벤트][button-03]  
+
+
+[button-02]: ../images/button-evnet-mapping-02.png
+
+[button-03]: ../images/button-evnet-mapping-03.png
+
+5. indoor map 설정
+
+- 인도어맵 컴포넌트의 데이터 바인딩 설정을 아래의 그림과 같이 설정한다.  
+(데이터를 받을때 자신의 value 속성을 같이 바꿔주는 설정) 
+
+![버튼이벤트][indoor-setting]
+
+6.  결과 확인
+  - 모든 설정이 완료되었다면 아래와 같이 **사각형을 클릭할 때마다 인도어 맵의 층이 바뀌는 것**을 확인할 수 있다.
+  ![gif-01]
+
+[gif-01]: ../images/indoor-button-finish-01.gif
+
+
+
+[indoor-create]: ../images/indoor-create-01.png
+
+[indoor-text]: ../images/indoor-create-02.png
+
+[indoor-id]: ../images/indoor-create-03.png
+
+[indoor-setting]: ../images/indoor-setting-01.png

package/dist-client/helps/scene/component/indoor-map.md

@@ -0,0 +1,65 @@
+# indoor-map
+
+## example
+
+Control the indoor layer by triggering events on the rectangular component
+>-**Apply a click event to a square component and deliver it to indoors**
+>-**If you change the value property of Indoor, the Floor will be changed.**
+
+![gif][gif-01]  
+
+
+[gif-01]: ../images/indoor-button-finish-01.gif
+
+1. It creates indoor with three layers.
+
+![indoor][indoor-create]  
+
+2. Text is put in each layer for distinction.
+
+![indoor][indoor-text]  
+
+
+3. The ID of the indoor map is designated as'indoor'.
+
+![indoor][indoor-id]  
+
+4. Add button event
+- After drawing 3 squares, select indoor as the variable information in the'effect window'.
+(In the variable information, a list of IDs of basic events and components is shown.)  
+![buttonEvent][button-02]
+
+- Map values for each square. (When clicking the square, data of '0' is passed to the component with the indoor ID.)
+  - 1layer - 0
+  - 2layer - 1
+  - 3layer - 2  
+
+![buttonEvent][button-03]  
+
+
+[button-02]: ../images/button-evnet-mapping-02.png
+
+[button-03]: ../images/button-evnet-mapping-03.png
+
+5. indoor map setting
+
+- Set the data binding setting of the indoor map component as shown in the figure below.
+(Setting to change its value property when receiving data)
+
+![buttonEvent][indoor-setting]
+
+6.  check result
+  - If all settings are complete, you can see that the indoor map layer changes every time you click the square as shown below.
+  ![gif-01]
+
+[gif-01]: ../images/indoor-button-finish-01.gif
+
+
+
+[indoor-create]: ../images/indoor-create-01.png
+
+[indoor-text]: ../images/indoor-create-02.png
+
+[indoor-id]: ../images/indoor-create-03.png
+
+[indoor-setting]: ../images/indoor-setting-01.png

package/dist-client/helps/scene/component/indoor-map.zh.md

@@ -0,0 +1,65 @@
+# indoor-map
+
+## example
+
+通过触发矩形组件上的事件来控制室内层
+> - **将矩形组件的click事件传递到Indoor组件**  
+> - **更改Indoor组件的value属性Floor会发生变化**  
+
+![gif][gif-01]  
+
+
+[gif-01]: ../images/indoor-button-finish-01.gif
+
+1. 创建具有三层的indoor map
+
+  ![indoor][indoor-create]  
+
+2. 为了区分为每层更改显示层数
+
+  ![indoor][indoor-text]  
+
+
+3. 指定室内地图的ID。
+
+  ![indoor][indoor-id]  
+
+4. 增加按钮
+   - 绘制3个矩形后，在“效果窗口”中的点击事件中indoor作为变量信息。
+   (在变量信息中，显示基本事件处理方法和组件的ID的列表。)   
+   ![buttonEvent][button-02]
+
+   - 每个矩形的地图值。 （单击矩形时，数据“0”将传递到具有室内ID的组件。）
+     - 1층 - 0
+     - 2층 - 1
+     - 3층 - 2  
+
+  ![buttonEvent][button-03]  
+
+
+  [button-02]: ../images/button-evnet-mapping-02.png
+
+  [button-03]: ../images/button-evnet-mapping-03.png
+
+5. indoor map配置
+
+   - 如下图设置室内地图组件的数据绑定设置。
+    （设置为在接收数据时更改其value属性）
+
+   ![buttonEvent][indoor-setting]
+
+6.  确认结果
+    - 如果所有设置均已完成，则每次单击矩形时，都可以看到室内地图图层发生变化，如下所示。
+    ![gif-01]
+
+    [gif-01]: ../images/indoor-button-finish-01.gif
+
+
+
+[indoor-create]: ../images/indoor-create-01.png
+
+[indoor-text]: ../images/indoor-create-02.png
+
+[indoor-id]: ../images/indoor-create-03.png
+
+[indoor-setting]: ../images/indoor-setting-01.png

package/dist-client/helps/scene/component/info-window.ko.md

@@ -0,0 +1 @@
+[ko]

package/dist-client/helps/scene/component/info-window.md

@@ -0,0 +1 @@
+[en]

package/dist-client/helps/scene/component/info-window.zh.md

@@ -0,0 +1 @@
+[zh]

package/dist-client/helps/scene/component/input.ko.md

@@ -0,0 +1,59 @@
+# Input
+
+키보드나 마우스를 사용해서 사용자로부터 입력을 받아서 처리하는 컴포넌트이다.
+Form Container안에 배치되면, 일반적인 HTML Form에서 사용되는 다양한 종류의 HTML Input Element와 동일하게 동작한다.
+
+[The Input (Form Input) element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
+
+## 종류
+
+- input
+- input-text
+- input-password
+- input-email
+- input-search
+- input-time
+- input-datetime-local
+- input-month
+- input-week
+
+## Properties
+
+- name
+  - type: string
+  - form 안의 엘리먼트 이름
+- value
+  - type: string
+  - input element의 값
+- placeholder
+  - type: string
+  - input element의 플레이스홀더
+- readonly
+  - type: checkbox
+  - 읽기 전용 여부
+- disabled
+  - type: checkbox
+  - form 안에서의 동작 불가
+- max-length
+  - type: number
+  - 최대 입력 글자 수
+- submit-on-change
+  - type: checkbox
+  - 엔터키나 포커스 아웃 등으로 값 변경이 확정되면, 자동으로 폼 전송
+- spread-on-init
+  - type: checkbox
+  - 초기값부터 데이타 스프레드되도록 할 것인지를 설정
+  - true로 설정하면, 초기값이 input 컴포넌트의 data로 set되어 설정된 데이타 스프레드가 동작한다.
+  - false로 설정하면, 초기값은 data로 set되지 않는다.
+- next-input
+  - type: string
+  - 엔터키가 입력되었을 때 자동으로 포커스가 특정 컴포넌트로 이동되도록 설정
+- autofocus
+  - type: checkbox
+  - 보드가 로드될 때, 자동으로 입력 포커스를 갖도록 할 것인지를 설정
+- alltime-focus
+  - type: checkbox
+  - 이 컴포넌트가 포커스를 잃었을 때, alltime-focus-pending에 설정된 시간 후에 자동으로 다시 포커스를 획득하도록 하는 설정
+- alltime-focus-pending
+  - type: number
+  - 이 컴포넌트가 포커스를 잃었을 때, alltime-focus가 설정되면, alltime-focus-pending에 설정된 시간(milli-seconds) 후에 자동으로 다시 포커스를 획득하도록 하는 설정

package/dist-client/helps/scene/component/input.md

@@ -0,0 +1,59 @@
+# Input
+
+It is a component that receives and processes input from the user using a keyboard or mouse.
+When placed in a form container, it operates in the same way as various types of HTML input elements used in general HTML forms.
+
+[The Input (Form Input) element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
+
+## 종류
+
+- input
+- input-text
+- input-password
+- input-email
+- input-search
+- input-time
+- input-datetime-local
+- input-month
+- input-week
+
+## Properties
+
+- name
+  - type: string
+  - the name of the element in the form
+- value
+  - type: string
+  - input element value
+- placeholder
+  - type: string
+  - placeholder for input element
+- readonly
+  - type: checkbox
+  - Whether read-only
+- disabled
+  - type: checkbox
+  - Operation in the form is disabled
+- max-length
+  - type: number
+  - Maximum number of characters to be entered
+- submit-on-change
+  - type: checkbox
+  - When the value change is confirmed by Enter key or focus out, etc., the form is automatically sent.
+- spread-on-init
+  - type: checkbox
+  - Set whether to spread the data from the initial value
+  - If set to true, the initial value is set as the data of the input component, and the set data spread operates.
+  - If set to false, the initial value is not set to data.
+- next-input
+  - type: string
+  - Set the focus to automatically move to a specific component when the enter key is pressed
+- autofocus
+  - type: checkbox
+  - Set whether to have input focus automatically when the board is loaded
+- alltime-focus
+  - type: checkbox
+  - When this component loses focus, it is set to automatically regain focus after the time set in alltime-focus-pending.
+- alltime-focus-pending
+  - type: number
+  - When this component loses focus, if alltime-focus is set, it automatically acquires focus again after the time (milli-seconds) set in alltime-focus-pending.

package/dist-client/helps/scene/component/input.zh.md

@@ -0,0 +1,58 @@
+# Input
+
+它是使用键盘或鼠标接收和处理来自用户的输入的组件。
+当放置在表单容器中时，其操作与常规HTML表单中使用的各种类型的HTML输入元素相同。
+[The Input (Form Input) element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
+
+## 种类
+
+- input
+- input-text
+- input-password
+- input-email
+- input-search
+- input-time
+- input-datetime-local
+- input-month
+- input-week
+
+## Properties
+
+- name
+  - type: string
+  - 表单中元素的名称
+- value
+  - type: string
+  - 输入元素值
+- placeholder
+  - type: string
+  - 输入元素的占位符
+- readonly
+  - type: checkbox
+  - 是否只读
+- disabled
+  - type: checkbox
+  - 表格中的操作被禁用
+- max-length
+  - type: number
+  - 输入的最大字符数
+- submit-on-change
+  - type: checkbox
+  - 当按Enter键确认值更改或聚焦后，将自动发送表格。
+- spread-on-init
+  - type: checkbox
+  - 设置是否从初始值传播数据
+  - 如果设置为true，则将初始值设置为输入组件的数据，并且设置的数据扩展操作。
+  - 如果设置为false，则初始值不设置为data。
+- next-input
+  - type: string
+  - 将焦点设置为在按下回车键时自动移动到特定组件
+- autofocus
+  - type: checkbox
+  - 设置加载电路板时是否自动具有输入焦点
+- alltime-focus
+  - type: checkbox
+  - 当此组件失去焦点时，它将设置为在alltime-focus-pending中设置的时间后自动重新获得焦点。
+- alltime-focus-pending
+  - type: number
+  - 当此组件失去焦点时，如果设置了alltime-focus，则在alltime-focus-pending中设置的时间（毫秒）后，它将自动再次获取焦点。

package/dist-client/helps/scene/component/line.ko.md

@@ -0,0 +1,9 @@
+# Line
+
+![Line][Line-01]
+
+일반적인 직선
+
+- Category : Line
+
+[Line-01]: ../images/line-01.png

package/dist-client/helps/scene/component/line.md

@@ -0,0 +1,9 @@
+# Line
+
+![Line][Line-01]
+
+A common straight line.
+
+- Category : Line
+
+[Line-01]: ../images/line-01.png

package/dist-client/helps/scene/component/line.zh.md

@@ -0,0 +1,7 @@
+# 直线
+
+![Line][Line-01]
+
+- 类型：线
+
+[Line-01]: ../images/line-01.png

package/dist-client/helps/scene/component/local-ref.ko.md

@@ -0,0 +1 @@
+[ko]

package/dist-client/helps/scene/component/local-ref.md

@@ -0,0 +1 @@
+[en]

package/dist-client/helps/scene/component/local-ref.zh.md

@@ -0,0 +1 @@
+[zh]