Browser IDE Help Guide
Browser IDE is a powerful and flexible online integrated development environment for Smart TV applications on browser
Introduction
Browser IDE is a powerful and flexible online integrated development environment for Smart TV applications on browser. There are four main functions, including project manager, code editors, terminal, and running application in Smart TV emulator. Firstly, for project manager, basic information of project, such as public URL, is showed and description of project is available to edit. Secondly, there are three kinds of editors, HTML editor, JavaScript editor, CSS editor. They all provide highlighting syntax, automatic completion and some other powerful features. Thirdly, for terminal, it’s more like a gnome terminal. What’s more, there’s a Smart TV emulator for developers to run application on the browser.
With Browser IDE, you can develop applications anywhere and work more efficiently.

Figure 1: Browser IDE
Installation
The following software is used for this installation:
-
Import SDK BrowserIDE_Server_xxx.ova on your Virtual box
Figure 2: Import ova
Figure 3: Select ova
Figure 4: Select ova
Figure 5: Import ova (reinitialize the MAC)
-
Configure Virtual box
-
System configuration
Base Memory: >= 1024 MB
Figure 6: System configuration
-
Network configuration
-
Support Bridged connection method (NAT method not supported)
-
MAC address should be set if it’s binding with IP address
Figure 7: Network configuration
After network configuration, then start the Browser Server, system will show IP Setting page of Browser IDE.
Figure 8: Ip setting
Input IP Address and DNS Server and click confirm button.
Figure 9: Reboot server question
Recommend select OK to reboot Browser Server.
-
-
User Account
Each user has own account to facilitate managing their projects or files.
Download for Browser IDE
Before installing Browser IDE, VirtualBox must be installed first. To access Admin Tools Module in Browser IDE, Chrome or Firefox must be installed. Download "BrowserIDE_Server_1_0.ova" inside of the package named, “Browser IDE Server Image for Virtual Box” from https://developer.samsung.com/smarttv/develop/extension-libraries/smart-view-sdk/download.html.
Open Browser IDE
Please use chrome to visit the Admin Tools module. The available address will be “http://NetworkIP/”.
Note
Please use the network IP which you have set. If you don’t remember, please login to Admin Tools module inside VirtualBox and see your current IP at “Network”->”IP Setting” page.
Sign up
To use Browser IDE, a user account is needed. First, open homepage, click the Signup button at the top-right corner and users will be taken to signup page. All information fields are required.
For these information input fields, there’re some notices as follows:
- User name: only contains letters and numbers, and the length is from 6 to 20.
- Password: only contains letters and numbers, and the length is from 6 to 20.
- Secret question: only contains letters and numbers, and the length is from 4 to 20.
- User name: only contains letters and numbers, and the length is from 4 to 20.
Sign in
If you already have a Browser IDE account, just go to homepage and sign in. There’s a keep user name checkbox, check it and user name will be kept in input box when you login next time with this browser.

Figure 10: Sign in
Log out
There’re three methods to sign out, which are as follows:
- Click log out button in homepage
- Click log out submenu of user menu at the top-right corner of workspace page.
- Click log out submenu of setting menu at the top-right corner of main page.
Change password
If you forget your password or want to modify it, click forget password link in homepage and users will be taken to find password page.

Figure 11: Forget password
The process of retrieving password is as follows:
- Input user name to get secret question.
- Input secret answer, check it.
- Reset user’s password.
Project Dashboard
The project dashboard provides basic operations to master the project.
Create new project
After clicking on “Create new project”, users are taken to the dialog which to choose the project type.

Figure 12: Create new project

Figure 13: Choose the project type
Here’s the introduction to different project types available on Browser IDE.
-
JavaScript Project
The JavaScript APIs provide low-level platform functions that give users greater control over application tasks and processes.
-
App Framework 2.0 Project
Apps Framework 2.0 is developed for creating web based application for Samsung Smart TV easily. Users can create Smart TV app with less hours, and can concentrate on improving their business logic and services.
-
Web PNaCl Module(C++) Project
Create fast and powerful application using C/C++ with support for Google’s Portable Native Client (PNaCl) feature. PNaCl applications can be developed in the IDE and then executed in the Smart TV Emulator.
Fill input the project name and select the project type then press OK, after the project successful created, it will be added into the “My Projects” list.

Figure 14: My Project
You can see the detail information at the right part of dashboard after you clicking it in “My Projects” list. You can also update the description of project through the “Project Description” text box.

Figure 15: Information of project
Start editing project
Start editing by Browser IDE via click the “Start Editing”.

Figure 16: Start Editing
Delete project
You can delete the project through clicking the “Delete” button which in the far right side of the dashboard.

Figure 17: Delete
Get demonstration of project
Browser IDE also provides the demonstration projects since it’s not easy to develop the Smart TV application as a freshman. You will know how to manage the focus of user input, showing and hiding each DIVs and event handlers via reading the source code of demonstration projects and take it as a reference. Click the “My Projects” and look at the right side of the list.

Figure 18: Demonstration project
User could choose the project type among the projects encountered.

Figure 19: Choose the type of demonstration project
Source Editor
Syntax Highlight
Source Editor can show source code in different color corresponding to syntax. The syntax coloring is automatically rendered when source code file loaded or edited. No need of user interactive. By using syntax highlight, developer can easily find syntax errors and identify symbols. The style of coloring can be changed by selecting item in main menu. Source Editor provides over 20 themes of coloring, both bright and dark.
![]()
Figure 63: Syntax Highlight
AutoComplete
Auto-completion is a useful function for developer. It helps developer coding by prompting a name list. Select one, then the entire name insert. To show the name list, users can simply press Alt+/, In Source Editor, auto-completion can be divided into several types:
Local:
All the items in list which is labeled by “local” come from the local source code file. All the user-defined names (including variable names, function names, class names) and all the names appeared in the local source code file are labeled by “local”.
![]()
Figure 64: Auto-complete
Device API:
The names defined by Samsung Smart TV also can be shown in the name list. All the names labeled by “device API” are provided by Samsung Smart TV platform. These names stand for those global objects dealing with TV device and it’s API, including their parameters and methods.
![]()
Figure 65: Auto completion of device API
![]()
Figure 66: Auto completion of device API
Apps Framework:
Source Editor auto-completion also provides Samsung Apps Framework 2.0 related objects and operations. Supporting Visual Components and their operations, scene management API, core API, environment API etc.
![]()
Figure 67: Auto completion of Samsung Apps Framework 2.0
![]()
Figure 68: Auto completion of Samsung Apps Framework 2.0
Others:
Other types of auto-completion are JavaScript related, including keywords, global objects, DOM objects and methods. These names are frequently used in JavaScript coding.
Snippets
Code snippet provides developers a lot of code segments for rapid coding. It can generate commonly used code segments and insert into editor, such as “Do-While”, “For-Loop” etc. Developer can modify the generated snippets as they want. To use code snippets, developer can type a part of the keyword and then press “TAB”, or another way, using auto-completion, press “Alt+/”, select snippet item from completion list.
![]()
Figure 69: Snippets function
![]()
Figure 70: Snippets function
Multi-lines Edit
Multi-line Editor is useful for multi-line edit, such as block edit, user can select multi-line and there are many cursors in the editor, user can operate multi-line code and operate them at the same time.
![]()
Figure 71: Multi-line edit with cursor focused
When user select multi-line and type in “hello, world”, the editor will appear multi of “hello, world”.
![]()
Figure 72: Multi-line editor with multi-input values
Settings
Settings menu layout in the right-bottom of editor, it’s useful for user to set the global attributes of editor, such as Show Gutter, Highlight Selected Word and so on, next time user open the editor, the setting is still available.
![]()
Figure 74: Source Editor Settings
Project Explorer
Context menu
The context menu of project can operate file and folder include Open File, New File, New Folder, Copy, Paste, Delete, Rename, Property as follow figure:
![]()
Figure 75: context menu-project
![]()
Figure 76: copy context menu
The “Property” can display file information. As follow figure:
![]()
Figure 77: context menu-property
Image Viewer
The image viewer tab in the console shows project images whenever a user click “Show Images” menu. As follow figure:
![]()
Figure 78: dashboard-project
Terminal
The terminal provides user with a TTY interface for direct access to the browser IDE host. It supports shells in UNIX.
![]()
Figure 79: Shell 1
![]()
Figure 80: Shell 2
![]()
Figure 81: terminal vim
![]()
Figure 82: Make PNaCl
Summary
No. | Functions | Local Browser IDE | Native IDE | Remark | |||||
---|---|---|---|---|---|---|---|---|---|
1 | Project | Basic Project / App Framework 2.0 Project | O | O | |||||
JavaScript Project | O | O | |||||||
PNaCL Module (C++) Project | O | O | |||||||
2 |
Source
Editor
|
Syntax
Highlight
|
HTML | JavaScript | CSS | C / C++ | |||
V | O | O | |||||||
V | O | O | |||||||
V | O | O | |||||||
V | O | O | |||||||
Auto
complete
|
V | O | O | ||||||
V | O | O | |||||||
V | O | O | |||||||
V | X | O | |||||||
Snippets
|
V | O | O | ||||||
V | O | O | |||||||
V | O | O | |||||||
V | O | O | |||||||
3 | Debug | V | O | O |
See DOM
via web
inspector
|
||||
V | X | O |
Browser
IDE: JS
debug not
supported
yet
|
||||||
V | O | O | |||||||
V | X | O | |||||||
4 | Terminal | Windows / Linux / Mac OS X |
Bash
(as like gnome -
terminal)
|
Window
Windows shell
Linux / Mac
OS X: Linux
shell
|
|||||
5 | Visualization Tools | Visual Editor | X | O | |||||
Visual Kit | X | O | |||||||
6 | Restrictions | Runtime Environment |
1. Virtual Box
2. Browser (Chrome)
|
1. JRE
2. Virtual Box
3. CDT
4. Python
5. PNaCL
6. Tool chain
7. Eclipse
|
|||||
Memory | Recommended (Server) | >= 2G | >= 2G | ||||||
Least | >= 1G | >= 1G | |||||||
Operating System | Recommended |
Windows / Linux /
Mac OS
|
Windows 7 /
Ubuntu /
Mac OS
|
||||||
Normal |
Windows / Linux /
Mac OS
|
1. Windows XP/7/8
2. Linux
3. Mac OS
|