dashboard
Version:
Create dashboards with gadgets on node.js
94 lines (80 loc) • 3.13 kB
HTML
<html>
<head>
<title>Ascot</title>
<!-- default container look and feel -->
<link rel="stylesheet" href="../css/gadgetsDemo2.css">
<script type="text/javascript" src="../../../gadgets/js/shindig-container:rpc.js?c=1&debug=0&nocache=1"></script>
<script type="text/javascript">
var specHostUrl = 'http://' + window.location.hostname + ':8080/ascot/gadgets/';
var specUrl = [
'viewport_sky.xml',
'plot_dataset.xml',
'data_gadget.xml',
'name_resolve.xml',
'get_data.xml',
'dataset_selector.xml',
'plot_dataset.xml',
'data_table.xml',
];
// othe gadget names
//'input_coords.xml',
//'color_mag_sel_db.xml',
//'hr_diagram.xml',
//'plot.xml',
//'galaxy_cm.xml',
//'wwtViewer.xml'
//'gadget_template.xml',
//'kml_sandbox.xml'
//'output_data.xml',
//'get_objects.xml',
//'frameInfo.xml',
//'input_address.xml'
//'hr_diagram.xml'
// This container lays out and renders gadgets itself.
var gadgetWidth = (window.innerWidth / 2) - 45;
function renderGadgets() {
for (var i=0; i<specUrl.length; i++) {
var g = shindig.container.createGadget({specUrl: specHostUrl + specUrl[i], width: gadgetWidth});
shindig.container.addGadget(g);
}
shindig.container.layoutManager.setGadgetChromeIds(['gadgets-left-1', 'gadgets-left-2', 'gadgets-left-4', 'gadgets-right-1', 'gadgets-right-2', 'gadgets-right-3', 'gadgets-right-4', 'gadgets-left-3']);
shindig.container.renderGadgets();
};
</script>
</head>
<body onLoad="renderGadgets();">
<h2>Ascot</h2>
<div class="demo-intro">
<h4>Color-Magnitude Diagram</h4>
<p>
In this demo, we create a color-magnitude diagram of open cluster Messier 67.
</p>
<p>
To begin, enter the object name "M67" into the Name Resolve gadget and click "Go".
Move to the Data Query gadget and enter a name for this dataset, such as "stars".
Click the "SDSS Stars" button to generate a query to the SDSS database for the
stars in the current viewport.
Click "Submit" to get the SDSS records.
Move to the Plot gadget and select the dataset "stars" and plot "g-r" on the X axis,
and "modelMag_g" on the Y axis. Then click "Plot" to create the color-magnitude diagram.
Select points on the plot in different colors and ctrl-click points to move the viewport.
</p>
</div>
<div>
<div id="layout-root-left" class="gadgets-layout-root-left">
<div id="gadgets-left-1" class="gadgets-gadget-chrome"></div>
<div id="gadgets-left-2" class="gadgets-gadget-chrome"></div>
<div id="gadgets-left-3" class="gadgets-gadget-chrome"></div>
<div id="gadgets-left-4" class="gadgets-gadget-chrome"></div>
</div>
<div id="layout-root-right" class="gadgets-layout-root-right">
<div id="gadgets-right-1" class="gadgets-gadget-chrome"></div>
<div id="gadgets-right-2" class="gadgets-gadget-chrome"></div>
<div id="gadgets-right-3" class="gadgets-gadget-chrome"></div>
<div id="gadgets-right-4" class="gadgets-gadget-chrome"></div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>