Skip to content

Commit

Permalink
Add chart display to the UI.
Browse files Browse the repository at this point in the history
  • Loading branch information
@pchote
pchote committed Sep 1, 2016
1 parent 9d5df7d commit 9549237
Showing 1 changed file with 107 additions and 11 deletions.
118 changes: 107 additions & 11 deletions templates/input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@
<link href="{{ url_for('static', filename='toolkit-inverse.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='application.css') }}" rel="stylesheet">
<script src="{{ url_for('static', filename='jquery.min.js') }}"></script>
<style>
.thumb-panel { padding:0px 5px; height: 156px; width: 140px; overflow: hidden; margin: auto auto; }
.thumb-loading { position: absolute; left: 54px; bottom:54px; }
.thumb-label { font-size: 10px; margin: 3px 0; }
.popover { max-width: none; }
</style>
</head>
<body>
<div class="container">
Expand All @@ -17,17 +23,17 @@
<h1>Finding chart generator</h1>
</div>
</div>
<div class="row">
<div class="row m-b">
<div class="col-sm-12 content">
<form id="generate" role="form" class="form form-horizontal">
<div class="form-group">
<label for="coordinates">Enter targets (&lt;Name&gt; &lt;RA&gt; &lt;Dec&gt; &lt;RA-PM&gt; &lt;Dec-PM&gt; &lt;input-epoch&gt;):</label>
<textarea name="coords" class="form-control input-block" rows="5"></textarea>
<label for="coordinates">Enter targets (&lt;Name&gt; &lt;RA&gt; &lt;Dec&gt; &lt;RA-PM&gt; &lt;Dec-PM&gt; &lt;input-epoch&gt; &lt;comment&gt;):</label>
<textarea name="coords" class="form-control input-block" style="height: 350px"></textarea>
<span>RA and Dec should be in sexagesimal format, proper motions in arcsec per year.</span>
</div>
<div class="form-group">
<label for="epoch" class="control-label col-sm-2">Output epoch:</label>
<input type="text" name="epoch" class="form-control input-block col-sm-2" value="2000.0">
<label for="outepoch" class="control-label col-sm-2">Observing epoch:</label>
<input type="text" id="outepoch" name="outepoch" class="form-control input-block col-sm-2" value="2000.0">

<label for="size" class="control-label col-sm-2">Size (arcmin):</label>
<input type="text" name="size" class="form-control input-block col-sm-2" value="14">
Expand All @@ -54,28 +60,94 @@ <h1>Finding chart generator</h1>
</form>
</div>
</div>
<div id="thumbrow" class="row m-b">
</div>
<div id="chartrow" class="row">
</div>
</div>
<script src="{{ url_for('static', filename='toolkit.js') }}"></script>
<script>

var testSexagesimal = /^[+-]?\d+:\d+:\d+(\.\d+)?$/;

function generateChart(t) {
var url = 'generate?survey='+t.survey+'&size='+t.size+'&outepoch='+t.outepoch+'&ra='+t.ra+'&dec='+t.dec+'&rapm='+t.rapm+'&decpm='+t.decpm+'&epoch='+t.epoch

var chartWidth = t.annotate ? 522 : 512;
var chartHeight = t.annotate ? 612 : 512;
var chartImageX = t.annotate ? 5 : 0;
var chartImageY = t.annotate ? 20 : 0;

var chartCanvas = $('<canvas/>').prop({width: chartWidth, height: chartHeight});
var chartContext = chartCanvas[0].getContext('2d');
if (t.annotate) {
chartContext.fillStyle = "#000000";
chartContext.font = "18px serif";
chartContext.textAlign = 'center'
chartContext.fillText(t.name, chartWidth / 2, 15);

chartContext.fillText('J2000 coordinates at J' + t.outepoch, chartWidth / 2, chartHeight - 60);
chartContext.fillText('RA: ' + t.ra, chartWidth / 4, chartHeight - 35);
chartContext.fillText('Dec: ' + t.dec, 3 * chartWidth / 4, chartHeight - 35);

if (t.comment)
chartContext.fillText(t.comment, chartWidth / 2, chartHeight - 5);
}

var thumbContainer = $('<div>', {id: '', 'class': 'col-md-2 col-sm-4 col-xs-6 m-b'});

var thumbBorder = $('<div>', {'class': 'btn list-group list-group-item thumb-panel'});
thumbBorder.popover({
trigger : 'hover',
placement: 'top',
html: true,
container: 'body',
content: chartCanvas,
});
thumbContainer.append(thumbBorder);

var thumbLabel = $('<div>', {'class': 'thumb-label'}).text(t.name);
thumbBorder.append(thumbLabel);

var thumbImage = $('<img>', {'src': '{{ url_for('static', filename='loading.gif') }}', 'class': 'thumb-loading', 'width': 32, 'height': 32});
thumbBorder.append(thumbImage);

$('#thumbrow').append(thumbContainer);

var img = new Image();
img.addEventListener("load", function() {
chartContext.drawImage(img, chartImageX, chartImageY);

thumbImage.removeClass('thumb-loading');
thumbImage.prop('src', url);
thumbImage.width(128);
thumbImage.height(128);
}, false);

// TODO: Handle generation failure
console.log(url);
img.src = url;
}

function setup() {
// Calculate the current fractional year
var now = new Date();
$('#outepoch').val((now.getUTCFullYear() + now.getUTCMonth() / 12.0).toFixed(2));
$('#generate').submit(function(event) {
event.preventDefault();
var epoch = $("input[name='epoch']").val();
var outepoch = $("input[name='outepoch']").val();
var size = $("input[name='size']").val();
var survey = $("select[name='survey']").val();
var type = $("input[name='type']:checked").val();
var coords = $("textarea[name='coords']").val().split('\n');


// TODO: Validate size and epoch

$('#error').html('');
$('#thumbrow').empty();
$('#chartrow').empty();

var url_base = 'generate?survey='+survey+'&size='+size+'&outepoch='+epoch
var urls = [];
var targets = [];
for (var i in coords)
{
var parts = coords[i].split(/\s+/);
Expand Down Expand Up @@ -117,9 +189,33 @@ <h1>Finding chart generator</h1>
break;
}

urls.push(url_base +'&ra='+ra+'&dec='+dec+'&rapm='+rapm+'&decpm='+decpm+'&epoch='+epoch)
// Enumerate through line to find start of comment (if it exists)
// Want to make sure we take all character from the start of the comment
var comment = undefined;
if (parts.length > 6) {
var start = 0;
for (var j = 0; j < 7; j++)
start = coords[i].indexOf(parts[j], start);
comment = coords[i].substring(start);
}

targets.push({
'name': name,
'ra': ra,
'dec': dec,
'rapm': rapm,
'decpm': decpm,
'epoch': epoch,
'comment': comment,
'survey': survey,
'size': size,
'annotate': type == 'annotated',
'outepoch': outepoch,
});
}
console.log(urls);

for (i in targets)
generateChart(targets[i]);
});
}

Expand Down

0 comments on commit 9549237

Please sign in to comment.