# visualizer[en]

![component-Visualizer][visualizer-01]

The visualizer is not only a kind of 3D components, but also a container that can contain other components. Users can configure the desired layout by adding and arranging warehouse-related components such as rack and rack-table in this container as needed.  
The normal way to add components in the visualizer is by dragging and dropping the component in the modeling screen so that the border of the visualizer is highlighted in orange. You can click the preview button to check in 3D screen.


- Category : WareHouse

## properties

1. FOV (Field Of View) : A value that sets how much space is shown on one screen.  
2. Near : The higher the value, the closer the object.  
3. Far : The higher the value, the more distant the object.  
4. Zoom : Zoom in / out the screen.  
5. Camera X : 
6. Camera Y :
7. Camera Z :
8. Gamma Factor : 
9. Accuracy : Decide how accurately to express.  
10. Antialiasing : Remove stairway phenomena on the 3D screen.  
11. Automatic rotation : Status setting function to maintain constant rotation speed of 3D screen.  
12. Axis visibility : Display the x, y, and z axes of the screen.  
13. 3D mode : Direct 3D display on the modeling screen.  
14. Debug logging : Display frame per second (FPS) on the screen.  
15. Location Field : Determine which field in the data passed to the Visualizer will be used as the location of the rack.  
16. Popup Scene: The number of the SCENE to display as a popup when the rack is clicked.  
17. Legend Target : Enter the ID of the Legend to be referenced to determine the color according to the status value of the Rack.  
18. Rotation speed : Set rotation speed of the 3D screen.  
19. Hide empty inventory : Display it Semi-transparent when the rack is out of stock (no data).  
20. Popup Position : Popup scene display location


[visualizer-01]: ../images/visualizer-01.png

## place vilsualizer and insert background images

1. Select the visualizer from the component toolbar on the left side of the Scene Modeler and place it.  
![Select visualizer][select-visualizer]

1. Click the placed visualizer and set the floor plan image as the [background image]({{ site.baseurl }}/{{site.lang | default: 'en' }}/tutorials/#drag-n-drop) of visualizer.  
![Set visualizer background image][visualizer-background-pattern]

1. Click Preview to confirm.
![Preview][visualizer-preview-01]


[select-visualizer]: ../images/visualizer-select-visualizer-from-component-bar.png

[visualizer-background-pattern]: ../images/visualizer-background-pattern.png

[visualizer-preview-01]: ../images/visualizer-preview-01.png

## place vilsualizer and insert background images

1. Select Rack-table from the component toolbar and place it.  
![Select rack-table][select-rack-table]

1. Select the placed Rack-table and place it so that it can be **contained** (make sure the border color of visualizer is highlighted in orange) in the placed visualizer.  
![Place rack-table][put-rack-table]


[select-rack-table]: ../images/visualizer-select-rack-table-from-component-bar.png

[put-rack-table]: ../images/visualizer-put-rack-table.png


## place rack

1. Select the rack-table and place it so that it overlaps the zone of the drawing.  
(<span style="color:red">!Note</span> Since Rack-table recognizes a passage only for rows based on the initially placed table, you should rotate it by 90 degrees when the passage of the drawing is vertical.)  
![Place rack-table in zone][put-rack-table-on-the-zone]

1. Adjust rows and columns of rack-table referencing the drawing.   
![Adjust rows and columns of rack-table][set-row-col]

1. Set the passage referencing the drawing. (Check is empty of the property after selecting the row corresponding to the passage.)  
![Specify passage][set-aisle]

1. After selecting Rack-table, enter the number of rack shelves and the shelf depth.  

1. (Optional) Set whether to hide rack columns and set Stock scale.  

1. Click Preview to confirm.  
![Preview][visualizer-preview-02]


[put-rack-table-on-the-zone]: ../images/visualizer-put-rack-table-on-the-zone.png

[set-row-col]: ../images/visualizer-set-row-col.png

[set-aisle]: ../images/visualizer-set-aisle.png

[visualizer-preview-02]: ../images/visualizer-preview-02.png

## specify a location on the rack

1. Select the Rack-table and enter the zone, location pattern and shelf pattern.    
![Input zone, location pattern and shelf pattern in Rack-table][set-zone-and-patterns]

1. Drag and select a cell to specify a location and specify it through the location assignment function in the property window.  
(You can hover over the cell to see if the location has been well specified.)  
![Specify location][set-location-pattern]

[set-zone-and-patterns]: ../images/set-zone-and-patterns.png

[set-location-pattern]: ../images/visualizer-set-location-pattern.png


## 수동으로 단 구성하기 

1. rack을 선택한다.  
![rack 선택][config-shelf-select-rack]

1. 속성의 **단 로케이션** 입력란에 각 단의 ID를 입력한다. 각 단은 `,`로 구분한다. 왼쪽부터 1층으로 취급하고, ID를 입력하지 않은 층은 숨겨진다.  
![단 로케이션 설정][config-shelf-property]

1. 미리보기로 확인한다.  
![단 로케이션 미리보기][config-shelf-preview]

[config-shelf-property]: ../images/visualizer-config-shelves-00.png
[config-shelf-preview]: ../images/visualizer-config-shelves-01.png
[config-shelf-select-rack]: ../images/visualizer-config-shelves-02.png

## 셀 분할하기 

1. Rack을 선택하고 **Bin 로케이션** 입력란에서 각 단을 분할할 수 있다. `,`로 구분한다.  
![Bin 로케이션 기본설정][bin-config-basic]  

1. 가장 아랫줄부터 1층으로 취급하며, 분할을 사용하지 않을 층은 `.`으로 표시한다.  
![bin-config-no-apart]

1. 입력한 텍스트는 `.`일 때를 제외하고 로케이션 ID 뒤에 붙어 각 bin의 ID로 사용된다.

[bin-config-basic]: ../images/visualizer-config-bin-00.png
[bin-config-no-apart]: ../images/visualizer-config-bin-01.png