In [7]:

    

# Sys imports
from random import randrange
from math import sin, pi
from time import sleep
import numpy as np

# IPython imports
from IPython.html.widgets import ContainerWidget, ToggleButtonWidget, HTMLWidget, FloatSliderWidget
from IPython.display import display

# Local imports
from gridwidget import GridWidget
from d3plot import publish_stackedarea_js
from widgetmode import widgetmode
from chart_tides import TideChart
from chart_bathymetry import BathymetryChart
from chart_current import CurrentChart
from chart_waves import WavesChart

publish_stackedarea_js()
widgetmode()

# Wait for require to load D3 from the CDN (see ipython-d3plot for more info).
# Note: This may take more than a second if you have a slow connection.
sleep(1.)


    

In [8]:

    

%%html
<style>
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.axis-label.y {
    text-align: right;
    vertical-align: bottom;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    //padding-top: 80px;
    height: 20px;
    width: 40px;
    white-space: nowrap;
}
.axis-label.x {
    width: 100%;
    text-align: center;
    margin-top: -10px;
    margin-bottom: -30px;
    padding-left: 18px;
}
.area-chart {
    margin-left: -30px;
}
.chart-area {
    margin-left: -40px;
}
.layer-toggler {
    padding-left: 2px;
}
.chart-header {
    margin-bottom: -20px;
}
</style>


    

In [9]:

    

# Create a grid.
grid = GridWidget(2,1)
grid.height=870
display(grid)

# Create the tide window below the grid.
time_slider_container = ContainerWidget()
time_slider = FloatSliderWidget(description="Time (day):", step=0.01)
tides = TideChart(time_slider_container)
time_slider_container.children=time_slider_container.children + tuple([time_slider])
time_slider_container.set_css({
    'margin-top': '40px',
    'width': '100%',
    'text-align': 'center',
})
display(time_slider_container)
time_slider_container.add_class('center align-center')

# Fill grid col 1, row 0 with the three charts.
grid[1,0].children = []
bath = BathymetryChart(grid[1,0])
currents = CurrentChart(grid[1,0])
waves = WavesChart(grid[1,0])
grid[1,0].set_css('text-align', 'center')

def render_frame(time=0., update=False):
    #######################################################
    ## ATTN ERDC: THIS IS WHERE YOU WILL FEED THE CHARTS
    ## WITH REAL DATA FOR ANY GIVEN TIME `time` (HOURS).
    ## DATA SHOULD BE NUMPY ARRAYS OF THE FORMAT
    ##   [(x0, y0), (x1, y1), ..., (xN, yN)]
    #######################################################
    ballast_depth = -6
    depths = np.array([(i, -5.*sin(float(time+i)/8.)*sin(float(time+i)/10.)*sin(float(time+i)/13.)-15.) for i in range(200)])
    uncert = np.array([(i, 2.) for i in range(200)])
    current = np.array([(i, 5.*sin(float(time+i)/10.)*sin(float(time+i)/11.)*sin(float(time+i)/14.)) for i in range(200)])
    heights = np.array([(i, .2*sin(float(time+i)/20.)*sin(float(time+i)/31.)*sin(float(time+i)/13.)+.2) for i in range(200)])
    #######################################################
    ## END
    #######################################################

    bath.fill(ballast_depth, depths, uncert, update=update)
    currents.fill(current, update=update)
    waves.fill(heights, update=update)
    tides.fill(time, update=update)

# Create the time slider, which shows 12 tidal cycles, 12 hours each.  Hook
# the tidal slider up to the render frame method.
time_slider.min = 0.
time_slider.max = 12. * 12. / 24.
render_frame(0.)
def time_slide(name, new):
    render_frame(new*24., update=True)
time_slider.on_trait_change(time_slide, 'value')


    

In [ ]: