|
| 1 | +## Code Examples Using Firefly Tools |
| 2 | + |
| 3 | +- [Image FITS Viewer](#image-fits-viewer) |
| 4 | +- [FITS Viewers in a group](#fits-viewers-in-a-group) |
| 5 | +- [Tracking the mouse](#tracking-the-mouse) |
| 6 | +- [Tracking the selection](#tracking-the-selection) |
| 7 | + |
| 8 | +###Starting Firefly Tools in JavaScript |
| 9 | +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: |
| 10 | + |
| 11 | +```html |
| 12 | + <script type="text/javascript" language="javascript" src="http://localhost:8080/fftools/firefly_loader.js"> |
| 13 | +``` |
| 14 | +
|
| 15 | +Your html document must define some divs, where you will load the viewer widgets, and `onFireflyLoaded()` function. |
| 16 | +
|
| 17 | +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. |
| 18 | +
|
| 19 | +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`. |
| 20 | +
|
| 21 | +###Image FITS Viewer |
| 22 | +Create an image viewer and place it into the `<div>` id `plotHere`. |
| 23 | +
|
| 24 | +```html |
| 25 | +<div id="plotHere" style="width: 350px; height: 350px;"></div> |
| 26 | +``` |
| 27 | +
|
| 28 | +```js |
| 29 | +function onFireflyLoaded() { |
| 30 | + firefly.showImage('plotHere', { |
| 31 | + URL : 'http://web.ipac.caltech.edu/staff/roby/demo/wise-m31-level1-3.fits', |
| 32 | + Title : 'Example FITS Image', |
| 33 | + ColorTable : 16, |
| 34 | + RangeValues : firefly.util.image.RangeValues.serializeSimple('Sigma',-2,8,'Linear') |
| 35 | + }); |
| 36 | +``` |
| 37 | +
|
| 38 | +
|
| 39 | +###FITS Viewers in a group |
| 40 | +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. |
| 41 | +
|
| 42 | +
|
| 43 | +```html |
| 44 | + <div style="white-space: nowrap;"> |
| 45 | + <div id="w1" style="display:inline-block; width: 250px; height: 250px; border: solid 1px;"></div> |
| 46 | + <div id="w2" style="display:inline-block; width: 250px; height: 250px; border: solid 1px;"></div> |
| 47 | + <div id="w3" style="display:inline-block; width: 250px; height: 250px; border: solid 1px;"></div> |
| 48 | + <div id="w4" style="display:inline-block; width: 250px; height: 250px; border: solid 1px;"></div> |
| 49 | + </div> |
| 50 | +``` |
| 51 | +
|
| 52 | +```js |
| 53 | + function onFireflyLoaded() { |
| 54 | + firefly.setGlobalImageDef({ ZoomType : 'TO_WIDTH', |
| 55 | + ColorTable : 8, |
| 56 | + ZoomToWidth : 250 }); |
| 57 | + w1.showImage('w1', { URL : 'http://web.ipac.caltech.edu/staff/roby/demo/wise-m51-band1.fits', |
| 58 | + Title: 'WISE band 1', plotGroupId : 'wise-group' }); |
| 59 | + w2.showImage('w2', { URL : 'http://web.ipac.caltech.edu/staff/roby/demo/wise-m51-band2.fits', |
| 60 | + Title: 'WISE band 2', plotGroupId : 'wise-group' }); |
| 61 | + w3.showImage('w3', { URL : 'http://web.ipac.caltech.edu/staff/roby/demo/wise-m51-band3.fits', |
| 62 | + Title: 'WISE band 3', plotGroupId : 'wise-group' }); |
| 63 | + w4.showImage('w4', { URL : 'http://web.ipac.caltech.edu/staff/roby/demo/wise-m51-band4.fits', |
| 64 | + Title: 'WISE band 4', plotGroupId : 'wise-group' }); |
| 65 | + } |
| 66 | +``` |
| 67 | +
|
| 68 | +###Tracking the mouse |
| 69 | +
|
| 70 | +The following example will plot FITS image then add a callback to get the mouse readout and log it to the console. |
| 71 | +
|
| 72 | +```html |
| 73 | +<div id="plotHere" style="width: 500px; height: 500px;"></div> |
| 74 | +``` |
| 75 | +
|
| 76 | +```js |
| 77 | +// callback on mouse readout |
| 78 | +function onReadoutData(action) { |
| 79 | + if (action.payload.hasValues) { |
| 80 | + // readoutItems contain j2000, image, screen points and other info |
| 81 | + console.log(action.payload.readoutItems.imagePt); |
| 82 | + } |
| 83 | +} |
| 84 | +function onFireflyLoaded() { |
| 85 | + const imageRequest = { |
| 86 | + plotId: 'plotHere', |
| 87 | + URL: 'http://web.ipac.caltech.edu/staff/roby/demo/wise-m51-band2.fits', |
| 88 | + Title: 'WISE m51' |
| 89 | + }; |
| 90 | + firefly.showImage('image_div', imageRequest); |
| 91 | + // add a callback, which will be called for every READOUT_DATA action |
| 92 | + // returned is the function to remove listener |
| 93 | + const trackReadoutRemover = firefly.util.addActionListener(firefly.action.type.READOUT_DATA, onReadoutData); |
| 94 | +} |
| 95 | +``` |
| 96 | +
|
| 97 | +###Tracking the selection |
| 98 | +
|
| 99 | +Firefly viewer allows to make the following selections: |
| 100 | + - Area Select (square) |
| 101 | + - Line Select |
| 102 | + - Point Select |
| 103 | + - Circle Select (*coming soon*) |
| 104 | +
|
| 105 | +The following example will plot a FITS image then add a callback to get selection information and log it to the console. |
| 106 | +
|
| 107 | +```html |
| 108 | +<div id="plotHere" style="width: 500px; height: 500px;"></div> |
| 109 | +``` |
| 110 | +
|
| 111 | +```js |
| 112 | +const onPlotAttributeChange = function(action) { |
| 113 | + console.log(action.payload.plotId); |
| 114 | + // attribute key: 'ACTIVE_POINT','ACTIVE_DISTANCE', or 'SELECTION' |
| 115 | + console.log(action.payload.attKey); |
| 116 | + // value that defines the selection |
| 117 | + console.log(action.payload.attValue); |
| 118 | +} |
| 119 | +function onFireflyLoaded() { |
| 120 | + const imageRequest = { |
| 121 | + plotId: 'plotHere', |
| 122 | + URL: 'http://web.ipac.caltech.edu/staff/roby/demo/wise-m51-band2.fits', |
| 123 | + Title: 'WISE m51' |
| 124 | + }; |
| 125 | + firefly.showImage('image_div', imageRequest); |
| 126 | + // turn on point selection |
| 127 | + firefly.action.dispatchChangePointSelection('requester', true); |
| 128 | + // add a callback, which will be called for every CHANGE_PLOT_ATTRIBUTE action |
| 129 | + // returned is the function to remove listener |
| 130 | + const trackSelectionRemover = firefly.util.addActionListener(firefly.action.type.CHANGE_PLOT_ATTRIBUTE, onPlotAttributeChange); |
| 131 | +} |
| 132 | +``` |
0 commit comments