kopia lustrzana https://github.com/jamesgao/kiln_controller
148 wiersze
6.4 KiB
HTML
148 wiersze
6.4 KiB
HTML
<!DOCTYPE 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">
|
|
<title>Kiln Controller</title>
|
|
|
|
<!-- Bootstrap -->
|
|
<!-- Latest compiled and minified CSS -->
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
|
|
<!-- Optional theme -->
|
|
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
|
|
|
|
<link rel="stylesheet" href="css/temp_monitor.css">
|
|
|
|
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
<div class="container-fluid">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
|
|
<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="#">Kiln Controller</a>
|
|
</div>
|
|
<div class="navbar-collapse collapse">
|
|
<ul class="nav navbar-nav">
|
|
<li class="active"><a href="#">Control</a></li>
|
|
<li><a href="designer.html">Designer</a></li>
|
|
</ul>
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="#" class="dropdown-toggle" data-toggle="dropdown"><div id="current_temp">Temperature</div></a>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li class="active"><a href="#" id="temp_scale_F">°F</a></li>
|
|
<li><a href="#" id="temp_scale_C">°C</a></li>
|
|
<!--<li><a href="#" id="temp_scale_cone">Δ</a></li>-->
|
|
</ul>
|
|
</li>
|
|
<li><a href="#" id="current_time">Time</a></li>
|
|
<li><a href="#" id="current_output_text">0%</a></li>
|
|
<li><button id="stop_button_navbar" class="btn btn-primary navbar-btn hidden" href="#">Stop</button></li>
|
|
</ul>
|
|
</div><!--/.nav-collapse -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
<div class="row">
|
|
<div class="col-sm-8 col-md-8 row-space">
|
|
|
|
<svg id="graph" class="row-space"></svg>
|
|
|
|
<div class="btn-group btn-group-justified row-space">
|
|
<div class="btn-group">
|
|
<button id="stop_button" type="button" class="btn btn-primary disabled"><span class="glyphicon glyphicon-stop"></span> Off</button>
|
|
</div>
|
|
<div class="btn-group output-slider">
|
|
<input id="current_output" type="range" min=0 max=1000 value=0 class="btn btn-default" disabled="disabled" />
|
|
</div>
|
|
<div class="btn-group">
|
|
<button id="ignite_button" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-fire"></span> Ignite</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4 col-md-4">
|
|
<div class="input-group input-group-lg row-space">
|
|
<input id="profile_name" type="text" disabled="disabled" class="form-control" placeholder="Load profile">
|
|
<div class="input-group-btn">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
|
<ul id="profile_list" class="dropdown-menu dropdown-menu-right" role="menu">
|
|
{% for fname, name in profiles.items() %}
|
|
<li><a href="#" data-fname="{{fname}}">{{ name }}</a></li>
|
|
{% end %}
|
|
</ul>
|
|
</div><!-- /btn-group -->
|
|
</div><!-- /input-group -->
|
|
<div id='profile_info' class='panel panel-default hidden'>
|
|
<div class='panel-body'>
|
|
<dl class='dl-horizontal'>
|
|
<dt>Total time</dt>
|
|
<dd id="profile_time_total"></dd>
|
|
<dt>Start time</dt>
|
|
<dd id="profile_time_start"></dd>
|
|
<dt>Finish at</dt>
|
|
<dd id="profile_time_finish"></dd>
|
|
<dt>Remaining</dt>
|
|
<dd id="profile_time_remain"></dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<div id='profile_actions' class='btn-group btn-group-justified row-space hidden'>
|
|
<a href="#" class="btn btn-primary disabled"><span class="glyphicon glyphicon-play"></span> Start</a>
|
|
<a href="#" class="btn btn-default disabled"><span class="glyphicon glyphicon-pause"></span> Pause</a>
|
|
<a href="#" class="btn btn-success disabled"><span class="glyphicon glyphicon-floppy-disk"></span> Save</a>
|
|
</div>
|
|
<img src="http://placehold.it/640x480/" class="img-responsive" alt="webcam" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id='profile-node-info' class='panel panel-info'>
|
|
<div class='panel-heading name'>
|
|
Set point
|
|
</div>
|
|
<div class='panel-body'>
|
|
<div class="input-group input-group-sm row-space">
|
|
<span class="input-group-addon">Time</span>
|
|
<input type="text" class="form-control time">
|
|
</div>
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-addon">Temp</span>
|
|
<input type="text" class="form-control temp">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div> <!-- /container -->
|
|
|
|
<script src="js/jquery.min.js"></script>
|
|
<script src="js/bootstrap.min.js"></script>
|
|
<script src="js/d3.v3.min.js" charset="utf-8"></script>
|
|
<script type="text/javascript" src="js/juration.js"></script>
|
|
<script type="text/javascript" src="js/temp_graph.js"></script>
|
|
<script type="text/javascript" src="js/temp_profile.js"></script>
|
|
<script type="text/javascript" src="js/temp_monitor.js"></script>
|
|
<script type="text/javascript">
|
|
var monitor;
|
|
d3.json("temperature.json", function(error, data) {
|
|
monitor = new tempgraph.Monitor(data);
|
|
monitor.setState("{{ state }}",{% autoescape None %} JSON.parse('{{ state_data }}'));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|