Gecko Web Browser C#

The Gecko OS Web App provides complete monitoring and control of your Gecko OS device using a web browser. It can be completely customized. See Customizing the Gecko OS Web App.

1. Gecko Web Browser C# Default
2. Search Engine
3. Gecko Web Browser C# Google Chrome

The web app can be run in any one of three modes:

• Local mode, without Internet access
• Internet mode, connected to a wireless network with Internet access

Gecko allows third-party developers to use the same technology as found in Mozilla. That means you can embed a web browser inside a third-party application, open channels and streams through the network backend, walk through the DOM and so on. You can even construct whole new applications using chrome. 357 geckodriver::marionette INFO Starting browser C: Program Files Mozilla Firefox firefox.exe 395 geckodriver::marionette INFO Connecting to Marionette on localhost:50671 GFX1: Potential driver version mismatch ignored due to missing DLLs 0.0.0.0 and 0.0.0.0 030 Marionette INFO Listening on port 50671. Gecko is the smart embedding choice. It is quick, robust, and highly standards compliant. In its Mozilla and Netscape incarnations, it has been widely distributed and very well reviewed. It is Open Source.

The Gecko OS Web App serves as a complete demonstration showing how to use Gecko OS with the HTTP RESTful API.

The web app runs on the Gecko OS device. You can connect it by joining the softAP running on the Gecko OS device, or, if the Gecko OS device is connected to a WAN, by joining the same network.

Setup Web Mode

In the factory default configuration, your module is not configured to connect with a wireless network and does not have local wireless network access.

Before configuring your module, you can ensure your module is in a known state by performing a factory_reset.

You can use a Wi-Fi client with a web browser, such as a smartphone, tablet or PC, to connect to the Gecko OS web app via the module softAP wireless network to set up access to your wireless network.

Gecko OS evaluation boards are by default configured to enter Setup Web mode when you hold down Button 2, press Reset, and continue to hold down Button 2 for at least three seconds. See Web Setup Note.

On any Gecko OS device you can also make the module start Setup Web mode by opening a Gecko OS terminal and issuing the setup_web command:

On evaluation boards, the red LED blinks when the module soft AP network is turned on and waiting for a connection.

Using the Wi-Fi settings on your computer or mobile device, connect to the module soft AP wireless network. By default, the soft AP network name (SSID) is Gecko OS-###, where ### is replaced by the last 3 digits of the module MAC address, e.g. Gecko OS-2D6. The default password is: password.

Open a web browser and navigate to setup.com or Gecko OS.com.

The Gecko OS Web App opens the Connect tab by default, and scans for Wi-Fi networks in range.

Click the name of your Wi-Fi network to select it.

Supply the network password in the following dialog.

The web app configures your module, saves the variables, and instructs the module to connect to your network.

If you choose the Reconnect to device option, the web app restarts your module and reconnects to it via your network, in Internet mode. This assumes that after disconnecting from the module soft AP network, your computer also reconnects to your network automatically. If the web app fails to reconnect, check the Wi-Fi on your computer or mobile device has roamed back to your network.

Note that the Reconnect to device option is available only in Setup Web mode.

Local Mode

Local mode provides all web app features (tabs) that do not require Internet access. Features requiring Internet access are Firmware Management and Cloud Services.

You can connect in Local mode via the module soft AP interface or via the module wlan interface.

To set up the HTTP server for the Gecko OS Web App, see the instructions in Internet Mode.

Internet Mode

Internet mode requires a Wi-Fi network with Internet access. All features (tabs) are available.

Automatically Connecting in Internet Mode

The simplest way to use the Gecko OS Web App in Internet mode is to set up the module with the web app in Setup Web mode, and check the Reconnect to device option. The web app performs all the necessary configuration to reconnect in Internet mode.

Manually Connecting in Internet Mode

Alternatively, you can manually configure the module to run the Gecko OS Web App as described below.

Issue the following commands from a terminal:

For example:

After a reboot, the response from Gecko OS is similar to the following:

The module automatically connects to your network if wlan.auto_join.enabled is configured as described above.

With your computer or mobile device also connected to your network, open a web browser and navigate to the address of the Web App.

The address is the module IP address. In the example above, you can connect a browser to http://10.5.6.59 to use the Gecko OS Web App.

You can also use network discovery to avoid using the module IP address. The address is the mDNS domain name .local. In the example above, you can connect a browser to http://mymodule.local. Some Windows systems may instead need to connect to http://mymodule. For further information see Networking & Security, Network Discovery.

Gecko OS Web App Features

The Gecko OS Web App provides information and configuration tabs that allow complete monitoring and control of your module.

All features (tabs) of the web app are available in Internet mode, unlike Setup Web mode and Local mode, in which the Firmware Management and Cloud Services tabs are not available.

Connect Tab

The Connect tab provides a way to join your module to a Wi-Fi network. When the Connect tab opens, it automatically scans for Wi-Fi networks in range and allows you to select your network and enter a password, as described above in Setup Web Mode.

Network Tab

If your Gecko OS device is already connected to your wireless network, then by default the web app displays the Network tab, showing some essential Gecko OS wlan interface variable settings.

Console Tab

The console tab works like a Gecko OS terminal or remote terminal. You can issue any Gecko OS command from this page. In the background, the web app uses the Gecko OS HTTP RESTful API to issue commands to the module and display responses.

As well as standard Gecko OS terminal behavior, the Console tab provides additional features, exclusive to the Gecko OS Web App. Additional commands mimic Linux shell commands and include:

• alias
• clear
• grep
• history
• rm

Alias

The console alias command has the following syntax:alias =''This lets you create a short name for a long command. Once an alias is set, you can type the in the console, in place of the full .For example:alias g='get gpio.usage'To remove a previously aliased command, use unalias , e.g.unalias g

Clear

The clear command clears all text on the display and returns the cursor to the top line on the console

Grep

The console grep command allows filtering of output. The following example lists only those commands in the history that contain the text http:history | grep httpThe grep syntax also allows regular expressions. The following example lists only those files on the module file system whose names contain c followed by either s, t or v:ls | grep c[stv]Use the option -v to invert the grep result and display all lines but those that match the regular expression:ls | grep -v c[stv]

History

The history command displays a list of past commands issued on the console. You can re-issue a command by copying and pasting from the list, or by typing !i, where i is the index number of the command in the list. To return the last X entries in history, issue the command history X.

Remove (rm)

The rm command is identical to the Gecko OS file_delete command. Either command may be used to delete files from the module file system.

System Tab

The system tab displays a number of system variables, such as version, build date, module, board and MAC address, memory usage and time.

Files Tab

The Files Tab lists files stored on the module file system. You can upload, download and delete files.

• To upload files to the module file system, select Click to add files and browse, or drag and drop to the Drop files here area.
• To download a file from the module file system, click the file name.
• To delete a file, click the corresponding trash icon.

Folder Emulation

The Gecko OS file system does not support directories or folders. It treats '/' characters in file names like any other character. For example, the file a/b/c is a file with a 5 character name.

The Gecko OS Web App Files tab provides folder emulation, to simplify some file operations. For example, a file called a/b/c is treated for some purposes as a file in directory 'b' which is itself contained in directory 'a'.

You can drill down into folders to display only the files in the folder. The current folder is displayed at the top of the Files tab. When you drag and drop a file, it is created in the current folder.

To create a folder, right click in the Files tab display and choose New Folder from the context menu.

Folders cannot be renamed or moved. A folder can be deleted if it contains no files or folders. When the folder is empty, right click the folder and choose Delete from the context menu.

Files can be renamed. Right-click the file and choose Rename from the context menu.

Files can be deleted. Click the Trash icon in the file row, or right-click the file and choose Delete from the context menu.

Naming Rules for Files tab Folder Emulation

To use Files tab folder emulation, care is required in naming files. The Files tab supports files named in the form:

However file names with slashes at the beginning or the end of the file name are not supported. The Files tab does not display files or allow manipulation of files named with the following patterns:

Directory names must end in a slash, and must not start with a slash. The following pattern is allowed:

The following pattern is not supported and is not displayed in the Files tab:

When the Files tab creates a folder, it creates a file named with a trailing slash, and of length 1 byte. If a file is named with a trailing slash, the Files tab displays it as a folder only if it has length 1 byte, and does not display it otherwise.

Multiple consecutive slashes are treated as a single slash. For example, dir///file is treated as dir/file.

Using the Gecko OS file_create command, you can create files with names that do not follow the above naming rules. These rules apply only to the display and manipulation of files in the Gecko OS Web App Files tab.

GPIO Configuration Tab

The GPIO configuration tab lists the configuration details for GPIOs in use. This is equivalent to the output of the get gpio.usage command. For input GPIOs, the current state is listed. For output GPIOs, buttons are provided to set the state to high or low.

Firmware Management

The firmware management tab allows Over-the-Air (OTA) wireless firmware updates. This is the equivalent of issuing the ota command. This tab is available only with Internet access.

Cloud Services

The Cloud Services tab provides information and links related to the Zentri Device Management Service (DMS). The Cloud Services tab is available only in Internet mode.

Customizing the Web App

The Gecko OS Web App can be 100% customized, or subtly modified to suit your needs.

Source code for the customizable version contains all the features listed above with the exception of the Console tab.

See Application Examples, Customizing the Gecko OS Web App for a comprehensive description.

The Gecko OS Web App demonstrates the full capability of the Gecko OS HTTP RESTful API. See Gecko OS Web App. The layout and operation of the web app can be 100% customized to suit your application and your business.

The following simple examples show how to re-style the original Gecko OS styling to match the style of another brand.

If this layout or style does not suit your requirements, the entire web application can be replaced simply by modifying the root file of the Gecko OS webserver with http.server.root_filename.

The Web App Development System

The Web App development system provides a rapid edit-build-test cycle, using a local Web server on the development test machine.

The diagrams below show how the Web App development system works, and how it differs from the Web App production system.

In the development system, the test HTTP server serves the Web App from the development file system, and requires CORS to make REST requests to the Gecko OS HTTP server, in order to run Gecko OS commands.

The Web App Production System

In the production system, the Gecko OS HTTP server serves the Web App from the Gecko OS device file system, and REST requests to the Gecko OS device are made to the same origin.

Set Up and Prerequisites

Obtain a copy of the Gecko OS Web App development system from https://github.com/SiliconLabs/gecko-os-webapp

In the following it is assumed that your working copy is in the directory /gecko-os-webapp.

Web App Languages and Libraries

The Gecko OS Web App development system uses Pug templates and the Less CSS pre-processing language.

For more information on Pug templates, see https://pugjs.org.

You can, if you prefer, use traditional HTML and CSS for development. See the /gecko-os-webapp/README.md file for details.

The Gecko OS Web App uses the following JavaScript libraries:

• Backbone.js - Web App development framework - MV* (Models Views etc)
• jQuery - backbone dependency - DOM management
• Underscore - backbone dependency - js utility functions
• Async.js - handles synchronous and asynchronous tasks - allows Gecko OS commands to run synchronously
• Gecko OS JavaScript API - Framework for controlling a Gecko OS device using the HTTP RESTful API

The style modifications described in this tutorial can be made without detailed knowledge of JavaScript, CSS or Pug.

However to make advanced modifications to the Gecko OS Web App, familiarity with these languages and frameworks is recommended.

Setting up the Gecko OS Web App Development Environment

The Gecko OS WebApp development system uses Node.js, Grunt and Bower for package management and build automation. These tools are free.

To set up the Gecko OS Web App development system, follow the /gecko-os-webapp/README.md instructions, available on github and in the top level directory of the working copy.

This involves downloading and installing Node.js, then using the node package manager, npm, to install Bower (front end package manager) and Grunt (task runner). Then run npm install and bower install from a command prompt in the /gecko-os-webapp directory.

Setting up the Gecko OS device

The Web App development system runs a server at http://localhost:5002, on the machine on which the build system is running.

The Web App development system communicates with a Gecko OS device on the same network. The module needs to run the HTTP server, and Cross Origin Resource Sharing (CORS) must be enabled for the development host domain. The simplest way is to enable CORS for all domains.

Open a Gecko OS Terminal and issue the following Gecko OS command sequence on the device:

After rebooting, the module Gecko OS terminal displays output similar to:

Configuring the Module and Development Host Addresses

The Web App development system needs the IP address or name of both the Gecko OS device and the development host.

The Gecko OS device address allows the HTTP RESTful API calls to the module from the development host Web server test Web App.

The development host address allows deployment of the changed web app files to the module from the localhost development Web server.

Open the file /gecko-os-webapp/config.json and set the addresses. For example:

You can also change the development Web server port if desired.

Building the Web App and Running the Test Server

To build the Web App, at a command prompt, in the /gecko-os-webapp directory, issue the command:grunt

Grunt runs tasks and displays output accordingly, similar to:

The 'server' task continues until you halt it. While it is running you can view the test Web App Page.

To halt the 'server' task and grunt execution, type Ctrl-C.

Opening the Test Web App Page

While the 'server' task is running, in a web browser, open http://localhost:5002.

Changing the Logo

The Silicon Labs logo appears at the top left corner of the Gecko OS Web App. You can change this to a logo of your choice.

The logo is specified in the file /gecko-os-webapp/public/less/logo.less/.

It is set up as a background image for the .logo css class.

The first lines of the logo.less file are as follows:

In the unmodified logo.less file partially shown above, the logo image is created with an inline svg file specified with a data url.

Logo Image File

To substitute your own logo image, in logo.less, you can use:

and comment out the line that begins:

Place your own logo image file in the directory /WebApp/out/webapp/. Stylesheet relative URLs are determined relative to the /out/webapp/gecko-os.css file, which is the product created from the various /WebApp/public/less/*.less/ files during the build process.

Replace the filename 'logo.png' with the name of your substitute logo file. For example:

Logo Dimensions and Aspect Ratio

The logo dimensions are by default: height:100px; width:280px;

Create a logo of the specified proportions to fit into the available space, or modify the dimensions in the logo.less file if you prefer.

Gecko Web Browser C# Default

If your logo has a different aspect ratio, you can leave the width of 280px unchanged and calculate a new height as follows:

Set the new height in the logo.less .logo class height parameter. For example,

Logo Background Color

You can change the logo background-color parameter in the logo.less .logo class.

To allow the background of the navigation pane (div.nav element) to show through, remove the background-color style setting. For example:

To see the results of any change, rebuild the web app: stop the 'server' task and grunt if it is running (Ctrl-C) and run grunt again. Then refresh the Web App page in your web browser.

Changing the Logo Link

The link from the logo is specified in the Pug template for the index.html file, /gecko-os-webapp/public/views/index.pug

Open the index.pug file and locate the following lines:

To change the logo link, change the href attribute value. For example:

Pug templates determine structure from indentation, so be careful not to alter the indentation.

To see the change, run grunt to rebuild the Web App, and refresh the Test Web App page.

For more information on Pug templates, see https://pugjs.org.

Changing Styles

The styles of the Gecko OS Web App are determined by /gecko-os-webapp/out/webapp/gecko-os.css. This is built from the /gecko-os-webapp/public/less/ files.

To change styles, first identify the css class to be altered. You can use your web browser developer tools to identify css classes associated with elements.

Then modify the *.less file that defines the css class definition.

For example, the navigation menu background (div.nav element) is determined by the .nav css class, which is defined in app.less.

The Less variables @nav-light and @nav-dark are defined in variables.less, included at the top of the app.less file:

In variables.less, change the variables as desired, e.g.

The highlights and shadows of the menu items are also set in variables.less as @nav-highlight and @nav-shadow. You can define a Less variable to have the value of another defined Less variable. For example:

To see the change, run grunt to rebuild the Web App, and refresh the Test Web App page.

Changing Features

Each Gecko OS Web App feature corresponds to a Backbone.js view.

Each view corresponds to a menu item in the main navigation menu, defined in app.js, and to a JavaScript view definition file in the /gecko-os-webapp/public/js/views folder.

For example, the 'Cloud Services' menu item corresponds to the 'cloud' element in the app.js definition of the appViews array:

The 'Cloud Services' feature is also supported by the view definition file /gecko-os-webapp/public/js/views/cloud.js.

Removing a Feature

To remove a feature, delete the corresponding appViews array element and the corresponding JavaScript view definition file.

For example, to remove the 'Cloud Services' feature:

• delete the 'array item in theapp.jsappViews' array.
  Be sure to maintain the JavaScript array syntax: elements are comma-separated and there is no comma after the final element.
• delete the /gecko-os-webapp/public/js/views/cloud.js file.

To see the change, run grunt to rebuild the Web App, and refresh the Test Web App page.

Adding a Feature

To add a feature, add a corresponding element to the appViews array, and add a view to the /gecko-os-webapp/public/js/views/ folder.

For example, to add a simple page called 'My Feature', add the following element to the appViews array:

Ensure that the array syntax is maintained correctly.

The parameters are as follows:

• el: DOM element id, used in the view definition
• nav: the title as it appears in the navigation menu
• view: the Backbone.js View object - must match the object defined in the view definition
• modes: lists the Gecko OS Web App modes for which the element is displayed:
  • setup (Setup mode)
  • softap (Local mode)
  • wlan (Internet mode)

Download the myfeature.js file and add it to the /gecko-os-webapp/public/js/views/ folder. This is a minimal view that displays some text.

To see the change, run grunt to rebuild the Web App, and refresh the Test Web App page.

Deploying the Modified Web App to the Gecko OS device

Ensure that the module and development host addresses are correctly configured. See Configuring the Module and Development Host Addresses above.

Ensure that the grunt 'server' task is running the development test Web server. To do this, run grunt at the command prompt.

At a separate command prompt, run:

In the background, the Web App development system runs the http_download command, on the Gecko OS device, to download files from the development Web server to the module.

You may also need to download other files, such as your logo file. You can do this in a Gecko OS Terminal on the module, using the http_download command. The files must be in the /gecko-os-webapp/out/ folder. For example, if the development host IP address is 10.5.6.60:

The Web App operates as shown in the Web App Production System diagram in The Web App Development System above.

Search Engine

Deploying the Web App in a Native API App or Other Bundle

When deploying a Web App in a Native API App, or in any bundled app, the webapp files must be included in the bundle's manifest.json file. This ensures the webapp files are included when the application is updated.

Supporting Gecko OS Versions

• Gecko OS 4

Change Log

Gecko Web Browser C# Google Chrome