diff options
author | Freeyorp <TheFreeYorp@NOSPAM.G.m.a.i.l.replace> | 2013-03-23 18:37:24 +1300 |
---|---|---|
committer | Freeyorp <TheFreeYorp@NOSPAM.G.m.a.i.l.replace> | 2013-03-29 15:03:37 +1300 |
commit | ef44d7d853f7fa313eda98967e06869fc691f3b7 (patch) | |
tree | 8a3adb90d63ba7fe4c5cd0a6a5e3c2df9030d734 | |
parent | 6b2e5432d1529b63793ea32a20068d441f2dc193 (diff) | |
download | manavis-ef44d7d853f7fa313eda98967e06869fc691f3b7.tar.gz manavis-ef44d7d853f7fa313eda98967e06869fc691f3b7.tar.bz2 manavis-ef44d7d853f7fa313eda98967e06869fc691f3b7.tar.xz manavis-ef44d7d853f7fa313eda98967e06869fc691f3b7.zip |
Load files, parse GAINXP records
-rw-r--r-- | css/style.css | 62 | ||||
-rw-r--r-- | index.html | 40 | ||||
-rw-r--r-- | js/mv.js | 102 | ||||
-rw-r--r-- | js/util/progress.js | 37 |
4 files changed, 241 insertions, 0 deletions
diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..4e1bdaa --- /dev/null +++ b/css/style.css @@ -0,0 +1,62 @@ +/* Ensure sane defaults */ + +body { + padding: 0; + margin: 0; +} + +/* Top-level layout */ +#side { + float: right; +} +#main { + overflow: hidden; +} + +#body, #main, #status, #side { + min-height: 40px; +} + +#status { + width: 100%; + font-size: smaller; +} + +#side { + width: 300px; + font-size: smaller; +} + +/* Loadinfo panel */ + +#loadinfo { + width: 647px; + height: 400px; + border: 3px grey solid; + margin: auto; +} + +/* Loading bars */ +.progressbar { + margin: 10px 0; + padding: 3px; + border: 1px solid #000; + font-size: 14px; + clear: both; + opacity: 0; + /* TODO: Use d3 for transitions instead */ + -moz-transition: opacity 1s linear; + -o-transition: opacity 1s linear; + -webkit-transition: opacity 1s linear; +} + +.progressbar.loading { + opacity: 1.0; +} + +.progressbar .percent { + background-color: #99ccff; + height: auto; + width: 0; + white-space: nowrap; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..646fcf9 --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Manavis</title> +<link rel="stylesheet" type="text/css" href="css/style.css" /> + +<div id="body"> + <div id="side"> + </div> + <div id="main"> + <div id="status"> + Manavis + <!-- TODO: Load icons et al for when new records need loading? --> + </div> + <div id="mask"><noscript>Javascript is required for this website.</noscript> + <div id="loadinfo" class="hidden"> + <h3>Select records to load and display</h3> + <input type="file" id="input" name="records[]" multiple /> + <output id="list"></output> + <div id="filesbar" class="progressbar"> + <div class="percent">0%</div> + </div> + <div id="loadbar" class="progressbar"> + <div class="percent">0%</div> + </div> + </div> + </div> + <div class="chart hidden"> + </div> + </div> +</div> + +<!-- Libs --> +<script src="js/util/memoize.js"></script> +<script src="js/util/progress.js"></script> +<script src="js/d3/d3.js"></script> +<script src="js/crossfilter/crossfilter.js"></script> +<script src="js/dc/dc.js"></script> + +<!-- Processing --> +<script src="js/mv.js"></script> diff --git a/js/mv.js b/js/mv.js new file mode 100644 index 0000000..d8e8529 --- /dev/null +++ b/js/mv.js @@ -0,0 +1,102 @@ +"use strict"; +/* + * Globals accessible via the agent console for debugging purposes + */ + +/* + * Processing + */ +(function() { + /* Set up handlers for file selector */ + document.getElementById('input').addEventListener('change', function(fevt) { + var reader = new FileReader(); + var loadbar = progress('loadbar'); + var filesbar = progress('filesbar'); + + reader.onerror = function(evt) { + switch(evt.target.error.code) { + case evt.target.error.NOT_FOUND_ERR: + alert('File Not Found!'); + break; + case evt.target.error.NOT_READABLE_ERR: + alert('File is not readable'); + break; + case evt.target.error.ABORT_ERR: + break; // noop + default: + alert('An error occurred reading this file.'); + }; + } + reader.onprogress = function(evt) { + if (evt.lengthComputable) { + loadbar.update(evt.loaded, evt.total); + } + } + reader.onabort = function(evt) { + alert('File load aborted!'); + } + reader.onloadstart = function(evt) { + loadbar.reset(); + } + reader.onload = function(evt) { + loadbar.complete(); + ++cur; + parseRecords(reader.result); + if (cur == fevt.target.files.length) { + filesbar.complete(); + /* TODO: Make this fade out nicely? */ + setTimeout(function() { + loadbar.hide(); + }, 2000); + makeHeap(); + filesbar.complete(); + setTimeout(function() { + filesbar.hide(); + }, 2000); + } else { + filesbar.update(cur, fevt.target.files.length); + nextFile(); + } + } + var cur = 0; + var lbase = loadbar.label; + loadbar.label = function() { + return lbase() == '100%' ? "Loaded '" + fevt.target.files[cur].name + "' - Done!" : "Loading '" + fevt.target.files[cur].name + "' - " + lbase(); + }; + var fbase = filesbar.label; + filesbar.label = function () { + return fbase() == '100%' ? "Loaded " + fevt.target.files.length + " file(s) - Done!" : "Loading file " + (cur + 1) + " of " + fevt.target.files.length + " - " + fbase(); + } + loadbar.show(); + filesbar.show(); + function nextFile() { + reader.readAsBinaryString(fevt.target.files[cur]); + } + nextFile(); + }, false); + var records = []; + function parseRecords(data) { + var spl = data.split(/\r?\n/); + spl.forEach(function(e) { + var d = e.match(/^(\d+\.\d+) PC(\d+) (\d+):(\d+),(\d+) GAINXP (\d+) (\d+) (\w+)/); + if (d == null) { + return; + } + records.push({ + time: d[1], + pc: d[2], + map: d[3], + x: d[4], + y: d[5], + e: d[6], + j: d[7], + type: d[8] + }); + }); + } + + /* The record files are set, do everything */ + function makeHeap() { + /* TODO */ + } +})(); diff --git a/js/util/progress.js b/js/util/progress.js new file mode 100644 index 0000000..060e6dc --- /dev/null +++ b/js/util/progress.js @@ -0,0 +1,37 @@ +function progress(root) { + var _progress = {}; + var container = document.getElementById(root); + var _percent = '0%'; + var bar = document.querySelector('#' + root + ' .percent'); + _progress.label = function() { + return _percent; + } + /* Updates the progress bar to display a specific percentage. No range checking performed. */ + _progress.setPercent = function(percent) { + _percent = percent; + bar.style.width = _percent; + bar.textContent = _progress.label(); + } + /* Updates the progress bar to display a percentage based on the current proportion of items done. */ + _progress.update = function(current, total) { + var percentLoaded = Math.min(100, Math.round((current / total) * 100)); + _progress.setPercent(percentLoaded + '%'); + }; + /* Resets the progress bar to display nothing done. */ + _progress.reset = function() { + _progress.setPercent('0%'); + } + /* Resets the progress bar to display everything done. */ + _progress.complete = function() { + _progress.setPercent('100%'); + } + /* Shows the progress bar. */ + _progress.show = function() { + container.className += ' loading'; + } + /* Hides the progress bar */ + _progress.hide = function() { + container.className = container.className.replace(/\bloading\b/, ''); + } + return _progress; +} |