Use Web Browser

# Course Introduction

If you use WebViewComponent, you can place a web browser in a World and explore it. Let's learn how to use a web browser in a World through a simple example.

##### API Reference

[WebViewComponent](/apiReference/Components/WebViewComponent)

# WebViewComponent Introduction

If you add WebViewComponent to an entity, you can place a web browser in the World. Let's look at the properties of WebViewComponent first. [png](16903331826638ab8d0e6040e4a46848cae80cc1028fe)

[{"Property1":"ClickingEnabled","Property2":"Sets whether to enable clicks in WebView.","Description":"nan"},{"Property1":"HoveringEnabled","Property2":"Sets whether the web element can be interacted with when the mouse is placed over WebView.","Description":"nan"},{"Property1":"ScrollingEnabled","Property2":"Set whether WebView is scrollable or not.","Description":"nan"},{"Property1":"DragMode","Property2":"DragToScroll","Description":"It operates as a scroll when dragging.  Therefore, even if you drag the scroll bar, it does not operate in a way that controls the scroll bar directly. Instead, it works like starting drag on the page.  To make it operate in the same way as dragging the scroll bar from Desktop, you should use DragWithinPage with DragMode."},{"Property1":"DragMode","Property2":"DragWithinPage","Description":"If you drag it within a page, it usually operates like dragging with a mouse on the web page."},{"Property1":"DragMode","Property2":"Disabled","Description":"Drag does not work."},{"Property1":"DragThreshold","Property2":"This is a threshold to ensure it recognizes dragging instead of clicking. If the number is very high, dragging will be recognized as a click.","Description":"nan"},{"Property1":"PixelPerUnit","Property2":"It is the number of pixels to be displayed per 1 Unit. It uses values from 100 to 500. If the number is big, much more content can be shown, but the web elements will be shown as small.","Description":"nan"},{"Property1":"ScrollSensitivity","Property2":"Determines how much will scroll when the page is scrolled with the mouse wheel.","Description":"nan"},{"Property1":"Url","Property2":"This is the URL of the webpage. If you change the Url, the web page will load. If you type empty strings or invalid forms of address, it will not work.","Description":"nan"},{"Property1":"SortingLayer","Property2":"When two or more Entities overlap, the priority is determined according to the Sorting Layer.","Description":"nan"},{"Property1":"OrderInLayer","Property2":"Determines the priority within the same Layer. A greater number indicates higher priority.","Description":"nan"},{"Property1":"IgnoreMapLayerCheck","Property2":"Does not perform automatic replace when designating the Map Layer name to SortingLayer.","Description":"nan"}]

> Learn More 1 Unit is a distance unit within a World. The distance of WorldPosition from (0,0) to (1,0) is 1 Unit.

# Place Web Browser to World

If you place a web browser in the World, you can show the browser in a certain position. [gif](1659077818567422ad8f56f884d0286111efe8a38b2ed)   


  1. Select the desired map from the Hierarchy tab, then open the context menu. Select Create Entity - Create Empty to create EmptyEntity.   

  2. In the property editor, add TransformComponent to EmptyEntity.   

  3. In the property editor, add WebViewComponent to EmptyEntity and enter the desired URL.   

  4. Change the SortingLayer property of WebViewComponent into Layer1.   

  5. After resizing the entity appropriately, press  [Start] to begin the test. You can see the web browser in a certain position in the World.



# Place Web Browser using UI

If you place a web browser using UI, you can have the web browser always shown in a certain position on the screen. [gif](165931683546031588f00cec548c0b1707a90878786ab)   


  1. Open the context menu for the desired UI group below Hierarchy - ui. Select Create Entity - Create UIEmpty to create UIEmpty.   

  2. In the property editor, add WebViewComponent to UIEmpty and enter the desired URL.   

  3. After resizing the entity appropriately, press  [Start] to begin the test. The web browser is shown in a certain position on the screen.



# Function Use Example

## Control Web Browser by Key Input

Let's look at the example of controlling the web browser by key input.

  1. In the Workspace - MyDesk, add a new script component and enter WebViewTest as its name.   

  2. Add the WebViewTest script component into the property editor of the desired entity. Add WebViewComponent, too.   

  3. As shown below, write a script to control the web browser when pressing a certain key on the keyboard. Add KeyDownEvent to WebViewTest script and write as follows. 
         
         @Component
         script WebViewKeyboardController extends Component
         @EventSender("Service", "InputService")
         handler HandleKeyDownEvent(KeyDownEvent event)
         --------------- Native Event Sender Info ----------------
         -- Sender: InputService
         -- Space: Client
         ---------------------------------------------------------
         
         -- Parameters
         -- local key = event.key
         ---------------------------------------------------------
         
         if key == KeyboardKey.Backspace then
             self.Entity.WebViewComponent:GoBack()
             -- Backspace : Go back
         end
         
         if key == KeyboardKey.Alpha0 then
             self.Entity.WebViewComponent:GoForward()
             -- 0 : Go forward
         end
         
         if key == KeyboardKey.Alpha5 then
             self.Entity.WebViewComponent:Reload()
             -- 5 : Refresh page
         end
         
         if key == KeyboardKey.Equals then
             self.Entity.WebViewComponent:ZoomIn()
             -- = : Zoom in screen
         end
         
         if key == KeyboardKey.Minus then
             self.Entity.WebViewComponent:ZoomOut()
             -- - : Zoom out screen
         end
         
         if key == KeyboardKey.Home then
             self.Entity.WebViewComponent:Scroll(Vector2(0, -100))	
             -- Home : Move to the Start page
         end
         
         if key == KeyboardKey.End then
             self.Entity.WebViewComponent:Scroll(Vector2(0, 100))	
             -- End : Move to the End page
         end
         end
         end
         



    
    
          
    
    4. Let's press  **[Start]** and then enter the keys set by the script to use each feature.
    
    ## Clicked Coordinates Record
    Leave the coordinates of the points that are clicked on the web browser in the log.
    You can use **WebViewClickedEvent** to check the **normalizedPosition** of the clicked point. **normalizedPosition** refers to the position where the upper left corner is expressed as (0,0) and the lower right corner is expressed as (1,1) when the web view is a flat coordinate system. The central coordinate on the screen is (0.5,0.5).
    [png](1659333200156ced814fff9734a89a53c313e6f386874)
      
    
    1. Add **WebViewClickedEvent** to **WebViewTest** script and write as follows.
        ```lua
    @Component
    script WebViewClickHandler extends Component
        @EventSender("Self")
        handler HandleWebViewClickedEvent(WebViewClickedEvent event)
        --------------- Native Event Sender Info ----------------
        -- Sender: WebViewComponent
        -- Space: Client
        ---------------------------------------------------------
    
        -- Parameters
        -- local NormalizedPosition = event.NormalizedPosition
        ---------------------------------------------------------
    
        log("Clicked: ("..NormalizedPosition.x..", "..NormalizedPosition.y..")")
        end
    end
    
    
    
      
    
    

  2. Press  [Start] and test it. If you click a certain point of the web view, you can see the normalizedPosition coordinates of the position in the log. [png](16593302650606bb94d2db1ca44a5882d429e6338bc84)