Commit 97a67800 authored by marius's avatar marius
Browse files

Initial commit baraddur webgui

parent 72f44fdc
This diff is collapsed.
import tornado.ioloop
import grond
import os.path as op
import numpy as np
from collections import OrderedDict
from tornado.web import RequestHandler, Application
from tornado import gen
from bokeh.application import Application as BokehApplication
from bokeh.embed import autoload_server
from bokeh.server.server import Server
from bokeh.layouts import column
from bokeh.models import ColumnDataSource, Slider
from bokeh.application.handlers import FunctionHandler
from bokeh.plotting import figure
problem = grond.core.load_problem_info('.')
class Summary(RequestHandler):
from bokeh.models import map_plots
@gen.coroutine
def get(self):
p = figure(plot_width=400, plot_height=400)
p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy",
alpha=0.5)
script = autoload_server(p, url='http://localhost:5001')
self.render('summary.html',
pages=pages,
problem=problem,
script=script)
class MainHandler(RequestHandler):
@gen.coroutine
def get(self):
self.render('index.html',
pages=pages)
pages = OrderedDict([
('Summary', Summary),
('Sequences', MainHandler),
('Tradeoffs', MainHandler),
])
if __name__ == '__main__':
bokeh_app = BokehApplication()
bokeh_server = Server({'/bokeh': bokeh_app},
ioloop=tornado.ioloop.IOLoop.instance(),
num_procs=1)
tornado_app = Application(
[(r'/', Summary)] +
[(r'/%s' % title, handler) for title, handler in pages.iteritems()],
debug=False,
autoreload=False,
compiled_template_cache=False,
static_path=op.join(op.dirname(__file__), 'static'),
template_path=op.join(op.dirname(__file__), 'tpl'),
)
tornado_app.listen(8888)
tornado.ioloop.IOLoop.current().start()
body {
color: #000;
}
.pure-img-responsive {
max-width: 100%;
height: auto;
}
/*
Add transition to containers so they can push in and out.
*/
#layout,
#menu,
.menu-link {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
/*
This is the parent `<div>` that contains the menu and the content area.
*/
#layout {
position: relative;
left: 0;
padding-left: 0;
}
#layout.active #menu {
left: 150px;
width: 150px;
}
#layout.active .menu-link {
left: 150px;
}
/*
The content `<div>` is where all your content goes.
*/
.footer {
margin: 3 3em;
padding: 1 0em;
margin-bottom: 0px;
line-height: 3em;
text-align: center;
color: #999;
background-color: #fbfbfb;
border-top: 1px solid #e8e8e8;
}
.header {
margin: 0;
color: #666;
text-align: center;
padding: 2.5em 2em 0;
border-bottom: 1px solid #e3e3e3;
}
.header h1 {
margin: 0.2em 0;
font-size: 3em;
font-weight: 300;
}
.header h2 {
font-weight: 300;
color: #ccc;
padding: 0;
margin-top: 0;
}
.content-subhead {
margin: 50px 0 20px 0;
font-weight: 300;
color: #888;
}
.content {
margin: 0 auto;
padding: 0 2em;
max-width: 800px;
margin-bottom: 50px;
line-height: 1.6em;
}
/*
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
appears on the left side of the page.
*/
#menu {
margin-left: -150px; /* "#menu" width */
width: 150px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000; /* so the menu or its navicon stays above all content */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/*
All anchors inside the menu should be styled like this.
*/
#menu a {
color: #999;
border: none;
padding: 0.6em 0 0.6em 0.6em;
}
/*
Remove all background/borders, since we are applying them to #menu.
*/
#menu .pure-menu,
#menu .pure-menu ul {
border: none;
background: transparent;
}
/*
Add that light border to separate items into groups.
*/
#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
border-top: 1px solid #333;
}
/*
Change color of the anchor links on hover/focus.
*/
#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
background: #efefef;
}
/*
This styles the selected menu item `<li>`.
*/
#menu .pure-menu-selected, {
background: #;
}
/*
This styles a link within a selected menu item `<li>`.
*/
#menu .pure-menu-selected a {
color: #efefef;
}
/*
This styles the menu heading.
*/
#menu .pure-menu-heading {
font-size: 110%;
margin: 0;
}
/* -- Dynamic Button For Responsive Menu -------------------------------------*/
/*
The button to open/close the Menu is custom-made and not part of Pure. Here's
how it works:
*/
/*
`.menu-link` represents the responsive menu toggle that shows/hides on
small screens.
*/
.menu-link {
position: fixed;
display: block; /* show this only on small screens */
top: 0;
left: 0; /* "#menu width" */
background: #000;
background: rgba(0,0,0,0.7);
font-size: 10px; /* change this value to increase/decrease button size */
z-index: 10;
width: 2em;
height: auto;
padding: 2.1em 1.6em;
}
.menu-link:hover,
.menu-link:focus {
background: #000;
}
.menu-link span {
position: relative;
display: block;
}
.menu-link span,
.menu-link span:before,
.menu-link span:after {
background-color: #fff;
width: 100%;
height: 0.2em;
}
.menu-link span:before,
.menu-link span:after {
position: absolute;
margin-top: -0.6em;
content: " ";
}
.menu-link span:after {
margin-top: 0.6em;
}
/* -- Responsive Styles (Media Queries) ------------------------------------- */
/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {
.header,
.content {
padding-left: 2em;
padding-right: 2em;
}
#layout {
padding-left: 150px; /* left col width "#menu" */
left: 0;
}
#menu {
left: 150px;
}
.menu-link {
position: fixed;
left: 150px;
display: none;
}
#layout.active .menu-link {
left: 150px;
}
}
@media (max-width: 48em) {
/* Only apply this when the window is small. Otherwise, the following
case results in extra padding on the left:
* Make the window small.
* Tap the menu to trigger the active state.
* Make the window large again.
*/
#layout.active {
position: relative;
left: 150px;
}
}
\ No newline at end of file
(function (window, document) {
var layout = document.getElementById('layout'),
menu = document.getElementById('menu'),
menuLink = document.getElementById('menuLink'),
content = document.getElementById('main');
function toggleClass(element, className) {
var classes = element.className.split(/\s+/),
length = classes.length,
i = 0;
for(; i < length; i++) {
if (classes[i] === className) {
classes.splice(i, 1);
break;
}
}
// The className is not found
if (length === classes.length) {
classes.push(className);
}
element.className = classes.join(' ');
}
function toggleAll(e) {
var active = 'active';
e.preventDefault();
toggleClass(layout, active);
toggleClass(menu, active);
toggleClass(menuLink, active);
}
menuLink.onclick = function (e) {
toggleAll(e);
};
content.onclick = function(e) {
if (menu.className.indexOf('active') !== -1) {
toggleAll(e);
}
};
}(this, this.document));
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Grond | Barad-dur</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css">
<link rel="stylesheet" href="/static/site.css">
</head>
<style>
.custom-restricted-width {
/* To limit the menu width to the content of the menu: */
display: inline-block;
/* Or set the width explicitly: */
/* width: 10em; */
}
</style>
<div id="layout" class="pure-g">
<a href="#menu" id="menuLink" class="menu-link">
<!-- Hamburger icon -->
<span></span>
</a>
<div id="menu">
<div class="sidebar pure-u-1 pure-u-md-1-5">
<div class="pure-menu custom-restricted-width">
<span class="pure-menu-heading">Grond</span>
<ul class="pure-menu-list">
{% for page in pages.iterkeys() %}
<li class="pure-menu-item"><a href="/{{ page }}" class="pure-menu-link">{{ page }}</a></li>
{% end %}
</ul>
</div>
</div>
</div>
<div id="main">
<div class="content pure-u-1 pure-u-md-4-5">
{% block content %}
<h1 class="content-subhead">Content not implemented.</h1>
{% end %}
</div>
<div class="footer pure-u-1">
Grond - <i>The earthquake buster</i> <a href="http://pyrocko.org" class="pure-button pure-button-primary" style="margin-left: 1em;">pyrocko.org</a>
</div>
</div>
</div>
<script src="/static/ui.js"></script>
</html>
\ No newline at end of file
{% extends "index.html" %}
{% block content %}
<header>
<h1 class="content-subhead">Problem <i>{{ problem.name }}</i></h1>
<p><span style="font-family: monospace;">{{ problem.__class__.__name__ }}</span> | <span style="font-family: monospace;">{{ problem.base_source.__class__.__name__ }}</span></p>
</header>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1 pure-u-lg-1-2">
<h2 class="content-subhead">Initial model</h3>
<p>Initial at start of the optimization.</p>
<table class="pure-table pure-table-horizontal">
<thead>
<tr>
<td>Parameter</td>
<td>Value</td>
</tr>
</thead>
<tbody>
{% for ip, key in enumerate(problem.base_source.keys()) %}
<tr{% if ip % 2 == 1 %} class="pure-table-odd"{% end %}>
<td style="font-family: monospace;">{{ key }}</td>
<td>{{ problem.base_source[key] }}</td>
</tr>
{% end %}
</tbody>
</table>
</div>
<div class="pure-u-1 pure-u-md-1 pure-u-lg-1-2">
<h2 class="content-subhead">Free Parameters</h2>
<p>Ranges of free parameters.</p>
<table class="pure-table pure-table-horizontal">
<thead>
<tr>
<td colspan=2>Parameter</td>
<td>Allowed Ranges</td>
<td>Unit</td>
</tr>
</thead>
<tbody>
{% for ip, param in enumerate(problem.parameters) %}
<tr{% if ip % 2 == 1 %} class="pure-table-odd"{% end %}>
<td>{{ ip+1 }}.</td>
<td style="font-family: monospace;">{{ param.name }}</td>
<td>{{ problem.ranges[param.name] }}</td>
<td>{{ param.unit }}</td>
</tr>
{% end %}
</tbody>
</table>
</div>
<div class="pure-u-5-5">
<h2 class="content-subhead">Map of initial model</h2>
<div>
{% raw script %}
</div>
</div>
</div>
{% end %}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment