j6
Version:
Javascript scientific library (like R, NumPy, Matlab)
283 lines (253 loc) • 10.5 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="web/favicon.ico">
<title>j6 IDE</title>
<!-- Bootstrap core CSS -->
<link href="lib/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="lib/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../web/j6.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="lib/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="lib/codemirror.css">
<link href="lib/c3.css" rel="stylesheet"/>
<link href="lib/vis.css" rel="stylesheet"/>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">j6 IDE</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Help<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="https://github.com/ccckmit/j6">j6 on github</a></li>
<li><a href="https://mdbookspace.com/j6/j6.html">j6 demo site</a></li>
</ul>
</li>
<li class="dropdown https">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Login<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#login" data-toggle="modal" data-target="#loginModal">Login</a></li>
<li><a href="#logout">Logout</a></li>
</ul>
</li>
</ul>
<form class="navbar-form">
<div class="form-group">
<input id='fileName', type="text" placeholder="File" class="form-control">
<label class="btn btn-primary btn-file" data-toggle="tooltip" title="Open File">
<!--<span class="glyphicon glyphicon-file" aria-hidden="true">-->
Load
<input id="loadButton" type="file" style="display: none;">
</label>
<label class="btn btn-primary" data-toggle="tooltip" title="Run Code">
<!--<span class="glyphicon glyphicon-play">-->
Run
<input id="runButton" type="button" style="display: none;">
</label>
<label class="btn btn-primary https" data-toggle="tooltip" title="Save File">
<!--<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true">-->
Save
<input id="saveButton" type="button" style="display: none;">
</label>
</div>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-6">
<h4>Code</h4>
<textarea class="form-control" rows="10" id="codeBox" wrap="soft">
print('The chart demo of j6.\nPlease scroll down to see charts below ...')
G.chart2D('#chart1', function(g) {
dt = j6.dt;
G.curve(g, "dt(3)" , (x)=>dt(x,3), -5, 5, 1);
G.curve(g, "dt(10)", (x)=>dt(x,10));
G.curve(g, "dt(25)", (x)=>dt(x,25));
});
G.chart2D('#chart1', function(g) {
dt = j6.dt;
G.curve(g, "dt(3)" , (x)=>dt(x,3) );
G.curve(g, "dt(10)", (x)=>dt(x,10));
G.curve(g, "dt(25)", (x)=>dt(x,25));
});
G.chart2D('#chart2', function(g) {
var x = j6.rnorm(10000, 3, 2);
G.hist(g, "x", x, 'bar', -10, 10, 0.3);
// G.curve(g, "N(5,2)", (x)=>j6.dnorm(x, 3, 2)*1000);
});
G.chart2D('#chart3', function(g) {
Ax = j6.rnorm(100, 10, 1);
Ay = j6.rnorm(100, 0, 0.5);
Bx = j6.rnorm(100, 0, 1);
By = j6.rnorm(100, 0, 0.5);
G.plot(g, "A", Ax, Ay);
G.plot(g, "B", Bx, By);
});
function hist(g,name,x,k) {
var mk = x.mfillv(k,x.length/k);
var xbar = mk.colSum();
G.ihist(g, name, xbar, 'bar');
}
var x = j6.samples([0,1], 100000, {replace:true});
G.chart2D('#chart4', (g)=>hist(g,'x1bar', x,1));
G.chart2D('#chart5', (g)=>hist(g,'x2bar', x,2));
G.chart2D('#chart6', (g)=>hist(g,'x10bar', x,10));
G.chart2D('#chart7', (g)=>G.pie(g, {A:30, B:40, C:20, D:10}));
G.chart2D('#chart8', (g)=>G.timeSeries(g, [
['x','2013-01-01','2013-01-02','2013-01-03','2013-01-04','2013-01-05'],
['data1', 30, 200, 100, 400, 150],
['data2', 130, 340, 200, 500, 250]
]));
G.chart3D('#chart9', 'surface', function(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
});
</textarea>
</div>
<div class="col-md-6">
<div class="form-group">
<h4>Console</h4>
<textarea class="form-control" rows="14" id="consoleBox"></textarea>
</div>
</div>
</div>
<div class="container-fluid">
<h4>Chart(Grid)</h4>
<div class="row box">
<div class="col-md-4"><div id="chart1" class="chart"></div></div>
<div class="col-md-4"><div id="chart2" class="chart"></div></div>
<div class="col-md-4"><div id="chart3" class="chart"></div></div>
<div class="col-md-4"><div id="chart4" class="chart"></div></div>
<div class="col-md-4"><div id="chart5" class="chart"></div></div>
<div class="col-md-4"><div id="chart6" class="chart"></div></div>
<div class="col-md-4"><div id="chart7" class="chart"></div></div>
<div class="col-md-4"><div id="chart8" class="chart"></div></div>
<div class="col-md-4"><div id="chart9" class="chart"></div></div>
</div>
</div>
<h4>Chart(Big)</h4>
<div class="row">
<a name="bigChart"></a>
<div class="col-md-12">
<div id="bigChart" class="chart-big"></div>
<p><a class="btn btn-success" href="#" role="button">Top »</a></p>
</div>
</div>
<hr>
<footer>
<p>j6 in MIT License</p>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- 引入 jQuery 之前和之後必須加入 module 的處理，否則會失敗。
https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined
-->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="lib/jquery.min.js"></script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
<!-- <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> -->
<script src="lib/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="lib/ie10-viewport-bug-workaround.js"></script>
<script src="lib/codemirror.js"></script>
<script src="lib/javascript.js"></script>
<script src="lib/d3.js"></script>
<script src="lib/c3.js"></script>
<script src="lib/vis.js"></script>
<script src="../web/j6.js"></script>
<script src="../web/g6.js"></script>
<!-- <script src="web/editor.js"></script> -->
<script>
var codeBox = document.getElementById('codeBox');
var consoleBox = document.getElementById('consoleBox');
var loadButton = document.getElementById('loadButton');
var runButton = document.getElementById('runButton');
var fileName;
require=function() { return j6; }
clear=function() { consoleBox.value = ''; }
print=function() {
var args = [].slice.apply(arguments);
console.log.apply(console, args);
var logStr = "";
for (var i=0; i<args.length; i++) {
logStr += args[i] + " ";
}
consoleBox.value += logStr+"\n";
}
var editor = CodeMirror.fromTextArea(codeBox, {
lineNumbers: true,
mode:'javascript',
});
function handleFileSelect(evt) {
editor.getDoc().setValue('');
codeBox.value = "";
var reader = new FileReader();
reader.onload = function(e) {
editor.getDoc().setValue(reader.result);
// file name
var path = fileButton.value;
var fileName = path.split(/(\\|\/)/g).pop();
$('#fileName').val(fileName);
};
fileName = evt.target.files[0].name;
reader.readAsText(evt.target.files[0]);
}
loadButton.addEventListener('change', handleFileSelect, false);
$("#runButton").click(function() {
var code = editor.getDoc().getValue();
clear();
try {
eval(code);
} catch (e) {
print('error : ', e.message);
print('stack trace : ', e.stack);
}
});
$('#saveButton').click(function() {
if (!E.isLogin()) return;
E.Server.save($('#fileName').val(), $('#codeBox').val());
});
function showChart(i) {
return function() {
G.show('#bigChart', G.tgMap['#chart'+i]);
window.location.href = '#bigChart';
}
}
$(document).ready(function() {
for (var i=1; i<=9; i++) {
$('#chart'+i).click(showChart(i));
}
});
</script>
</body>
</html>