under constructionout of date content - available for reference purposes only
| Table of Contents |
|---|
Introduction
This guide describes how to create Tutorials interactive tutorials for the Integrated Genome Browser.
Users run tutorial through the Help menu's Tutorials sub-menu. When they choose a tutorial, the tutorial will start and guide users through IGB features.
Directory structure
The tutorials should be contained in a single directory, with a properties file
tutorials.properties listing the available tutorials
File format
The tutorials are text files written in json http://www.json.org
The tutorial consists of an array of steps that the user will take.
each step can contain the following fields (only the text field is required):
- text - the text to display in the tutorial status bar
- highlight - the widget to highlight during the step, use thewidget id
- timeout - the amount of time in seconds that this step is displayed before it continues onto the next step
- waitAction waitFor - the name of an action or menu item that the user is supposed to do. The tutorial will stay on this step until the user performs the action .waitMenu - the name of a menu item (action) that the user is supposed to select. The tutorial will stay on this step until the user performs selects the or clicks the menu item.
- execute - an action that the tutorial will perform; this is an object containing the following fields (only name is required):
name - the name of the action to perform
amount - a numeric value to pass to the action
sample tutorial
...
| title | sample.txt |
|---|---|
| borderStyle | solid |
...
- subTutorial - an inner tutorial that can be "triggered" by an action to start
- trigger - an action that is a "trigger" to start a sub tutorial
- script - will allow commands in the existing IGB scripting format. (e.g. "script": "goto chr4:18,040,000 - 18,045,056" )
tab - will allow navigation to a tab specified by its display name (e.g. "tab": ["Bookmarks"],) or multiple tabs
Code Block (e.g. "tab": [{"tab": "Bookmarks", "tab": "Selection Info"}])- checkServer - this will verify a specific server is enabled and offer the user the opportunity to enable or cancel the tutorial if it is not. (e.g. "checkServer": "IGB Quickload")
| Code Block |
|---|
sample tutorial[ { "text": "Welcome to the IGB Getting Started tutorial. Click Next to get startedBegin.", "checkServer": "IGB Quickload", "highlightscript": "TutorialNavigator_nexthomescreen", "tab": [{"tab": "Data Access", "tab": "Current Sequence"}], { "highlight": ["TutorialNavigator_next"] }, { "text": "ThisSelect isArabidopsis thethaliana mainin viewthe of data and annotations.species box", "highlight": ["SeqMapViewDataAccess_species"], "timeoutwaitFor": 3 "speciesSelectionChanged.Arabidopsis thaliana" }, { "text": "This isSelect A_thaliana_Jun_2009 in the zoom slider. Watch as we zoom out.", "highlight": "SeqMapView_xzoomer", "timeout": 3 }, { "text": "We are zooming out 20%", version box", "highlight": ["DataAccess_version"], "waitFor": "groupSelectionChanged.Arabidopsis thaliana.A_thaliana_Jun_2009" }, { "text": "Drag horizontal slider to the right to zoom in. Click Next to see zooming in.", "script": "setZoomStripePosition 16267374", "highlight": ["TutorialNavigator_next", "SeqMapView_xzoomer"] }, { "execute": { "name": "TweeningZoomAction", "amount": -0.21 } }, { "text": "This panel is for loading and manipulating dataClick Load Sequence in View button to load sequence bases.", "highlight": ["IGBTabPanelDataAccess_GeneralLoadViewGUIsequenceInView"], "waitFor": "LoadResidueAction" "execute":}, { "nametimeout": "select_GeneralLoadViewGUI_action"3" }, { "timeouttext": 3 }, { "trigger": "select_SearchView_action", "subTutorial" : [ { "text": "Use this tab for searching for your favorite gene.", "highlight": "IGBTabPanel_SearchView", "timeout": 3 }, { "text": "At the top is the search box, try entering a gene like 'ADAR'.", "highlight": "SearchView_searchTF", "waitAction": "SearchAction" } ] }, { "text": "Explore some of the other tabs and click Next when finished." } ] "Drag horizontal slider to the left to zoom out. Click Next to see zooming out.", "highlight": ["TutorialNavigator_next", "SeqMapView_xzoomer"] }, { "execute": { "name": "TweeningZoomAction", "amount": -1 } }, { "text": "Try it for yourself. You can click a gene to focus zooming on that gene. Click Next when you're done.", "highlight": ["TutorialNavigator_next", "SeqMapView_xzoomer"] }, { "execute": { "name": "TweeningZoomAction", "amount": -1 } }, { "text": "Drag vertical slider down to stretch vertically. Click Next to see vertical stretch.", "highlight": ["TutorialNavigator_next", "SeqMapView_yzoomer"] }, { "execute": { "name": "VerticalStretchZoomAction", "amount": 0.2 } }, { "text": "Drag vertical slider back up to shrink everything into view. Click Next to see vertical shrink.", "highlight": ["TutorialNavigator_next", "SeqMapView_yzoomer"] }, { "execute": { "name": "VerticalStretchZoomAction", "amount": -1 } }, { "text": "Try it for yourself. You can click a gene to focus zooming on that gene. Click Next when you're done.", "highlight": ["TutorialNavigator_next", "SeqMapView_yzoomer"] }, { "execute": { "name": "VerticalStretchZoomAction", "amount": -1 } }, { "text": "Congratulations, you have completed the Getting Started tutorial. Click Next to finish.", "highlight": ["TutorialNavigator_next"] } ] |