PubChem Carousel Widget Using ExtJS


What is the Carousel Widget?back to top

PubChem Carousel Widget is a tool to show a list of images or HTML elements in an animated way. It's developed using the javascript library ExtJS. The items displayed in the carousel can be HTML elements or ExtJS components, such as images of chemical structures, titles of PubMed references, thumbnails of 3D protein structures that bind to the chemicals, etc.

Two special purpose wrappers, which make us of the carousel widget, are also available. They make it easy to display the following types of PubChem data in your own web pages:

  1. "ChemicalList" wrapper allows you to input a list of PubChem Compounds (CIDs) or Substances (SIDs) of interest, and displays a carousel that shows the corresponding chemical structure thumbnails and synonyms.

  2. "RelatedCompounds" wrapper allows you to input a PubChem Compound (CID) of interest, and displays a carousel that shows chemical structure thumbnails of related compounds that have certain types of annotations, such as medication information, literature, 3D protein structures, bioactivities, and patents.
These carousels are used to display information in PubChem web pages, and you can now use them to display similar information directly in your HTML pages.

(Additional widgets, which provide rapid displays of commonly requested PubChem data summaries, are also available and are described in a separate file.)



How to use the Carousel Widget in your html page:back to top

To embed PubChem Carousel Widget in your own html page, simply follow these 3 steps:

  1. Include the PubChem javascript libraries and cascading style sheets in the <head> of your html page:

  2.       <script type='text/javascript'>Ext = {buildSettings:{"scopeResetCSS":true }};</script>
          <script type='text/javascript' src='//pubchem.ncbi.nlm.nih.gov/widget/extjs-4.1.1/ext-all.js'></script>
          <script type='text/javascript' src='//pubchem.ncbi.nlm.nih.gov/widget/1.0.2.1b/pubchem.widgets.js'></script>
          <link rel="stylesheet" type="text/css" href="//pubchem.ncbi.nlm.nih.gov/widget/extjs-4.1.1/resources/css/ext-all-gray-scoped.css">
        

  3. Position the widget with an html div

  4.       <div id="carousel_html"></div> or <div id="carousel_component"></div>
        
    The widget will be rendered inside of the div. Note that the id of the div must be specified by the renderid argument below.

  5. Initialize the widget with desired parameters:

  6. Input HTML elements or ExtJS components;
    parameters available: for both HTML elements and ExtJS components; for HTML elements only

    Input HTML elements:
          <script type="text/javascript">
            Ext.onReady(function() {
               var htmlArray = new Array();
               var tipArray = new Array();
               for(var i = 0; i < 20; ++i) {
                 var index = i + 1;
                 htmlArray[i] = '<a href="//pubchem.ncbi.nlm.nih.gov/summary/summary.cgi?cid=' + index
                   + '"><img src="//pubchem.ncbi.nlm.nih.gov/image/imgsrv.fcgi?cid=' + index
                   + '"><br/>Cid ' + index + '</a>';
                 tipArray[i] = '<img src="//pubchem.ncbi.nlm.nih.gov/image/imgsrv.fcgi?t=l&cid=' + index
                   + '"><br/>Cid ' + index + '';
               }
    
               PubChem.Carousel({
                   itemtype: 'html', // or 'component'
                   itemlist: htmlArray,
                   itemwidth: 150,
                   itemheight: 150,
                   renderid: 'carousel_html',
                   width: '100%',
                   title: '<div style="font-size: 1.2em;">Carousel with HTML elements as input</div>',
                   border: 1,
                   arrowheight: 150,
                   marginlr: 10,
                   margintb: 10,
                   showarrows: false,
                   showcount: true,
                   duration: 100,
                   stop: 1000,
                   animateunit: 'page',
                   backgroundColor: '#f6f6f6',
                   tiplist: tipArray,
                   tipwidth: 300,
                   tipheight: 360
              });
            });
          </script>
        


    Input ExtJS Components:
          <script type="text/javascript">
            Ext.onReady(function() {
              PubChem.widget.CarouselExample({
                  title: '<div style="font-size: 1.2em;">Carousel with ExtJS component as input</div>',
                  border: 1,
                  itemwidth : 150,
                  itemheight : 110,
                  arrowheight: 110,
                  arrowbackground: 'transparent',
                  marginlr: 10,
                  margintb: 10,
                  showarrows: true,
                  showcount: true,
                  duration: 1000,
                  stop: 0,
                  animateunit: 'item',
                  renderid : 'carousel_component'
              });
            });
    
            PubChem.widget.CarouselExample = function(cfg) {
                cfg = cfg || {};
                var panelArray = new Array();
                for(var i = 0; i < 20; ++i) {
                  var index = i + 1;
                  panelArray[i] = Ext.create('Ext.panel.Panel', {
                      frame: true,
                      border: 1,
                      title: 'Panel ' + index,
                      width: cfg.itemwidth,
                      height: cfg.itemheight,
                      margin: '' + cfg.margintb + 'px ' + cfg.marginlr + 'px',
                      html: 'panel' + index
                  });
                }
    
                // The following section shows a combination of a carousel panel and other panels
                // To show just the carousel, use PubChem.Carousel(cfg) with the same parameters
                // except dropping the parameter "output"
                var arrowHeightAdjust = 5;
                var complex = Ext.create('Ext.panel.Panel', {
                    layout: {type: 'vbox', align: 'stretch'},
                    items: [
                        {xtype:'carousel',
                            output: 'class',  // If set as 'class', the carousel is used as an item
                            itemtype: 'component',
                            itemlist: panelArray,
                            itemwidth: cfg.itemwidth,
                            itemheight: cfg.itemheight,
                            renderid: cfg.renderid,
                            width: '100%',
                            title: cfg.title,
                            border: cfg.border,
                            arrowheight: cfg.arrowheight + arrowHeightAdjust,
                            arrowbackground: cfg.arrowbackground,
                            marginlr: cfg.marginlr,
                            margintb: cfg.margintb,
                            showarrows: cfg.showarrows,
                            showcount: cfg.showcount,
                            duration: cfg.duration,
                            stop: cfg.stop,
                            animateunit: cfg.animateunit
                        },
                        {xtype:'panel', html:'bottom panel', height:100}
                    ],
                    renderTo: cfg.renderid
                });
                return complex;
            }
          </script>
        


    Parameters for input of both HTML elements and ExtJS components:back to top
    Parameter with default valueRequiredDescription
    itemtypeYesspecifies what type of items you will input. There is no default value for this input parameter, but you must choose between "html" and "component." If itemtype is 'html', each item is some HTML element. If itemtype is 'component', each item is an ExtJS component. In either case, the items can be images, graphs, text, etc. with a defined width and height.
    itemlistYeslist of input items. There is no default value for this input parameter, but some examples of input items are shown above, such as the "htmlArray" item used in the Input HTML elements example or the "panelArray" item used in the Input ExtJS components example.
    itemwidthYeswidth of each item in pixels
    itemheightYesheight of each item in pixels
    renderidYesid of the div that shows the widget
    width: '100%'Nototal width of the widget
    title: ''Notitle of the carousel
    border: 1Noborder of the carousel
    arrowheight: '(itemheight)'Noheight of the arrows
    arrowbackground: 'transparent'Nobackground color of the arrows. Set as '#D6D6D6' to add some background
    leftarrowstyle: '(see Description)'NoImage of the left arrow. Default: "width:14px; height:24px; background:url('//pubchem.ncbi.nlm.nih.gov/images/pcsprites.13.02.gif') -70px -345px;"
    rightarrowstyle: '(see Description)'NoImage of the right arrow. Default: "width:14px; height:24px; background:url('//pubchem.ncbi.nlm.nih.gov/images/pcsprites.13.02.gif') -55px -345px;"
    marginlr: 10NoMinimum margin on the left and right of each item. The margin is adjusted to fit all the available width
    margintb: 10NoMargin on the top and bottom of each item
    showarrows: falseNo"false" to show the arrows above the items. "true" to show the left arrow before the first item and the right arrow after the last item
    showcount: falseNopositions of the first and last items in the list
    animateunit: 'page'NoEach animation moves all the items in the page. If set as 'item', Each animation moves just one item
    duration: 100Nonumber of milli seconds for the move of an item to its nearest neighbor
    stop: 1000Nonumber of milli seconds stopped after each animation. For continuous animation, set 'stop' as '0'
    output: ''NoIf set as 'class', the carousel is used as an item in other component
     
    Parameters for input of HTML elements only:back to top
     
    backgroundColor: '#FFFFFF'Nobackground color of each item
    tiplistNolist of mouseover HTML elements for each item
    tipwidth: 100Nowidth of the mouseover text
    tipheight: 50Noheight of the mouseover text
    tiptitle: '(see Description)'NoTitle of button. Click to show the detailed information about the item. Default: "<div style='margin-left: 75px;'><div style='width:14px; height:14px; font-weight:bold; font-family:Times,serif; color:#bbb; border: 1px solid #ccc; border-radius:3px; -moz-border-radius:3px;'>i</div></div>"

Special purpose wrappersback to top

Below is sample code for two special purpose wrappers that make use of the carousel widget to display the following types of PubChem data:
  1. "ChemicalList" wrapper uses the carousel to show thumbnails and synonyms for a list of CIDs or SIDs
  2. "RelatedCompounds" wrapper uses the carousel to show Related Compounds with annotation for a CID
If you want to display either one of these special carousels in your own web page, simply:
(a) Include the PubChem javascript libraries and cascading style sheets in the <head> of your html page (as described in step 1 of the general instructions for using carousel widgets); then
(b) Insert the sample code below into the <body> of your HTML file at whatever position in the file you want the widget to appear, using your desired input values (e.g., the CIDs or SIDs of interest to you).
1. "ChemicalList" wrapper uses the carousel to show thumbnails and synonyms for a list of CIDs or SIDsback to top



Sample code:
       <div id="ChemicalList"></div>
       <script type="text/javascript">
           Ext.onReady(function() {
               PubChem.ChemicalList({
                   cid: '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15', // required, could be "sid" list
                   width: '100%',
                   title: '<div style="font-size: 1.2em;">Thumbnails and synonyms for a list of PubChem Compounds</div>',
                   showcount: true,
                   showarrows: true,
                   arrowbackground: '#D6D6D6',
                   duration: 1000,
                   stop: 0,
                   animateunit: 'page',
                   renderid: 'ChemicalList'
               });
           });
      </script>
     

2. "RelatedCompounds" wrapper uses the carousel to show related compounds with annotation for a CIDback to top



Sample code:
       <div id="RelatedCompounds"></div>
       <script type="text/javascript">
           Ext.onReady(function() {
               PubChem.RelatedCompounds({
                   cid: 2244, // required, ID of the compound whose related records are shown
                   width: '100%',
                   title: '<div style="font-size:1.2em; color:#666666;">Related Compounds with Annotation for CID 2244 (Aspirin)</div>',
                   duration: 100,
                   stop: 1000,
                   animateunit: 'page',
                   renderid: 'RelatedCompounds',
                   links: true,
                   showtips: true,
                   showcount: true
               });
           });
      </script>
     


Log of Changes to PubChem Carousel Widgetback to top

09 APR 2013 The pubchem.widgets.js file has been updated to version 1.0.2.1b, in order to accommodate improvements in the graphical filters and carousel widget, along with bug fixes. The updated javascript file can now be used by all of the various types of widgets.
21 MAR 2013 Initial release of PubChem Carousel Widget. The pubchem.widgets.js file has also been updated to version 1.0.2b, in order to accommodate the carousel widget, and can now be used by all of the various types of widgets.

Revised 09 April 2013