V20 (2 of 3): embedding browser

From wubrowse wiki
Jump to: navigation, search

Friday, July 5, 2013

Created: 2013/7/5

Last updated: 2014/2/6

From version 20 you can now embed the WashU EpiGenome Browser in your website! You only need to do some trivial HTML and JavaScript coding to have it. The embedded browser is full-blown browser as the one running on our server, and you can customize it to a great extent to show your stuff in your own way. Best of all, it's part of your website.



This web page has a browser embedded in it. It automatically embeds the browser as soon as the webpage itself is loaded. It shows the default tracks from the Roadmap Epigenomics public hub on human hg19 genome.


This example loads human/hg19 genome and displays a set of custom tracks.


This example can embed browser according to user's actions (you need to click a button to embed a browser).

You can see the source code of these examples in the HTML files (1.html, 2.html, 3.html) and adapt them for your purpose.

How the first example works

1. add following lines in the <HEAD> section of your web page:

<link rel="stylesheet" type="text/css" href="//epigenomegateway.wustl.edu/browser/style.css" />

<script type="text/javascript" src="//epigenomegateway.wustl.edu/browser/base.js"></script>

<script type="text/javascript" src="//epigenomegateway.wustl.edu/browser/personality.js"></script>

<script type="text/javascript" src="//epigenomegateway.wustl.edu/browser/embed.js"></script>

2. call the function embed_washugb to embed a browser. Most simply it can be done with following lines of javascript:

<script type='text/javascript'>






This example requires a
element with ID of "container_id" in the web page.

The embed_washugb function requires a hash object as its only argument. All customization will be done through contents of this hash, as explained below.

embed_washugb options

All parameter names (keywords) are in bold face and are case-sensitive.



URL of the hosting server

value: url string



DIV object in which the browser will be embedded. You can supply the object programmatically, or by the object's ID (document.getElementById('xxx'))

value: DIV object 



genome name, e.g. hg19, mm9

value: genome name string


leftSpaceWidth (optional)

the width of space on the left of genome heatmap (where track names are shown)

value: positive integer

panelWidth (optional)

width of the genome heatmap panel

value: positive integer

noPanelwidthConfig (optional)

do not show browser panel width configuration button (gear button)

value: true (or 1 or anything evaluates to true in javascript)

noDeleteButton (optional)

do not show delete button (for deleting the embedded panel)

value: true

hideTrackName (optional)

do not show track name on the left of browser

value: true

hideChromNavigator (optional)

do not show the chromosome navigator on top of the browser tracks

value: true

hideTopRuler (optional)

do not show ruler on top of the browser tracks

value: true

hideMetadataColormap (optional)

do not show metadata color map

value: true

maxTrackHeight (optional)

maximum track height, this only applies for the automatic track height adjustment when the browser loads for the first time

value: positive integer

noDefaultTrack (optional)

do not load any default native tracks

value: true

showContent (optional, new parameter)

define contents to be displayed in the embedded browser

value: an array of objects, each object defines a track in the same fashion a JSON data hub is written.