DM-7017 Firefly documentation for Camera team #133
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| ## Code Examples Using Firefly Tools | ||
|
|
||
| - [Image FITS Viewer](image-fits-viewer) | ||
| - [FITS Viewers in a group](fits-viewers-in-a-group) | ||
| - [Tracking the mouse](tracking-the-mouse) | ||
| - [Tracking the selection](tracking-the-selection) | ||
|
|
||
| ###Starting Firefly Tools in JavaScript | ||
| Firefly Tools are loaded when you load`firefly_loader.js` from a server of your choice. For example, to load Firefly Tools from your local server, include the following declaration in your HTML file: | ||
|
|
||
| ```html | ||
| <script type="text/javascript" language="javascript" src="http://localhost:8080/fftools/firefly_loader.js"> | ||
| ``` | ||
|
|
||
| Your html document must define some divs, where you will load the viewer widgets, and `onFireflyLoaded()` function. | ||
|
|
||
| When Firefly Tools completes loading, it calls `onFireflyLoaded()` JavaScript function. This is where you create Firefly components and place them into HTML `<div>` elements with specified IDs. | ||
|
|
||
| The following are several examples of what can be done in the `onFireflyLoaded()` function. All test data can be found at `http://web.ipac.caltech.edu/staff/roby/demo`. | ||
|
|
||
| ###Image FITS Viewer | ||
| Create an image viewer and place it into the `<div>` id `plotHere`. | ||
|
|
||
| ```html | ||
| <div id="plotHere" style="width: 350px; height: 350px;"></div> | ||
| ``` | ||
|
|
||
| ```js | ||
| function onFireflyLoaded() { | ||
| firefly.showImage('plotHere', { | ||
| URL : 'http://web.ipac.caltech.edu/staff/roby/demo/wise-m31-level1-3.fits', | ||
| Title : 'Example FITS Image', | ||
| ColorTable : 16, | ||
| RangeValues : firefly.util.image.RangeValues.serializeSimple('Sigma',-2,8,'Linear') | ||
| }); | ||
| ``` | ||
|
|
||
|
|
||
| ###FITS Viewers in a group | ||
| In this example, we create four image viewers. Each belong to the same group `wise-group`. We then set some global parameters so all the plots display the same. Now we plot each of the four images by specifying the URL of the FITS file. By doing this, all the plotting controls will work on all four images simultaneously. | ||
|
|
||
|
|
||
| ```html | ||
| <div style="white-space: nowrap;"> | ||
| <div id="w1" style="display:inline-block; width: 250px; height: 250px; border: solid 1px;"></div> | ||
| <div id="w2" style="display:inline-block; width: 250px; height: 250px; border: solid 1px;"></div> | ||
| <div id="w3" style="display:inline-block; width: 250px; height: 250px; border: solid 1px;"></div> | ||
| <div id="w4" style="display:inline-block; width: 250px; height: 250px; border: solid 1px;"></div> | ||
| </div> | ||
| ``` | ||
|
|
||
| ```js | ||
| function onFireflyLoaded() { | ||
| firefly.setGlobalImageDef({ ZoomType : 'TO_WIDTH', | ||
| ColorTable : 8, | ||
| ZoomToWidth : 250 }); | ||
| w1.showImage('w1', { URL : 'http://web.ipac.caltech.edu/staff/roby/demo/wise-m51-band1.fits', | ||
| Title: 'Wise band 1', plotGroupId : 'wise-group' }); | ||
| w2.showImage('w2', { URL : 'http://web.ipac.caltech.edu/staff/roby/demo/wise-m51-band2.fits', | ||
| Title: 'Wise band 2', plotGroupId : 'wise-group' }); | ||
| w3.showImage('w3', { URL : 'http://web.ipac.caltech.edu/staff/roby/demo/wise-m51-band3.fits', | ||
| Title: 'Wise band 3', plotGroupId : 'wise-group' }); | ||
| w4.showImage('w4', { URL : 'http://web.ipac.caltech.edu/staff/roby/demo/wise-m51-band4.fits', | ||
| Title: 'Wise band 4', plotGroupId : 'wise-group' }); | ||
| } | ||
| ``` | ||
|
|
||
| ###Tracking the mouse | ||
|
|
||
| The following example will plot a fits image then add a callback to get the mouse readout and log it to the console. | ||
|
There was a problem hiding this comment.
For all the mention of FITS data, lets use all caps FITS |
||
|
|
||
| ```html | ||
| <div id="plotHere" style="width: 500px; height: 500px;"></div> | ||
| ``` | ||
|
|
||
| ```js | ||
| // callback on mouse readout | ||
| function onReadoutData(action) { | ||
| if (action.payload.hasValues) { | ||
| // readoutItems contain j2000, image, screen points and other info | ||
| console.log(action.payload.readoutItems.imagePt); | ||
| } | ||
| } | ||
| function onFireflyLoaded() { | ||
| const imageRequest = { | ||
| plotId: 'plotHere', | ||
| URL: 'http://web.ipac.caltech.edu/staff/roby/demo/wise-m51-band2.fits', | ||
| Title: 'Wise m51' | ||
| }; | ||
| firefly.showImage('image_div', imageRequest); | ||
| // add a callback, which will be called for every READOUT_DATA action | ||
| // returned is the function to remove listener | ||
| const trackReadoutRemover = firefly.util.addActionListener(firefly.action.type.READOUT_DATA, onReadoutData); | ||
| } | ||
| ``` | ||
|
|
||
| ###Tracking the selection | ||
|
|
||
| Firefly viewer allows to make the following selections: | ||
| - Area Select (square) | ||
| - Line Select | ||
| - Point Select | ||
| - Circle Select (*coming soon*) | ||
|
|
||
| The following example will plot a fits image then add a callback to get selection information and log it to the console. | ||
|
|
||
| ```html | ||
| <div id="plotHere" style="width: 500px; height: 500px;"></div> | ||
| ``` | ||
|
|
||
| ```js | ||
| const onPlotAttributeChange = function(action) { | ||
| console.log(action.payload.plotId); | ||
| // attribute key: 'ACTIVE_POINT','ACTIVE_DISTANCE', or 'SELECTION' | ||
| console.log(action.payload.attKey); | ||
| // value that defines the selection | ||
| console.log(action.payload.attValue); | ||
| } | ||
| function onFireflyLoaded() { | ||
| const imageRequest = { | ||
| plotId: 'plotHere', | ||
| URL: 'http://web.ipac.caltech.edu/staff/roby/demo/wise-m51-band2.fits', | ||
| Title: 'Wise m51' | ||
| }; | ||
| firefly.showImage('image_div', imageRequest); | ||
| // turn on point selection | ||
| firefly.action.dispatchChangePointSelection('requester', true); | ||
| // add a callback, which will be called for every CHANGE_PLOT_ATTRIBUTE action | ||
| // returned is the function to remove listener | ||
| const trackSelectionRemover = firefly.util.addActionListener(firefly.action.type.CHANGE_PLOT_ATTRIBUTE, onPlotAttributeChange); | ||
| } | ||
| ``` | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
for all the titles with WISE data, lets use all caps WISE.