Started support of changing map pics dynamically

pull/18/head
Sami Mokaddem 2017-10-09 17:50:43 +02:00
parent 9966abe6a6
commit 3d79103cd5
2 changed files with 27 additions and 10 deletions

View File

@ -1,7 +1,7 @@
//color: #5f6062 //color: #5f6062
var updateInterval = 1000*graph_log_refresh_rate; // 1s var updateInterval = 1000*graph_log_refresh_rate; // 1s
var maxNumPoint = 60; var maxNumPoint = 60;
var maxNumCoord = 20; var maxNumCoord = 100;
var emptyArray = []; var emptyArray = [];
var mapCoord = []; var mapCoord = [];
@ -169,8 +169,8 @@ $(document).ready(function () {
{ label: "Series3", data: 60} { label: "Series3", data: 60}
]; ];
var plotLineChart = $.plot("#feedDiv3", sources.getEmptyData(), optionsLineChart); var plotLineChart = $.plot("#feedDiv3", sources.getEmptyData(), optionsLineChart);
var plotPieChartA = $.plot("#feedDiv1A", rData, optionsPieChart); //var plotPieChartA = $.plot("#feedDiv1A", rData, optionsPieChart);
var plotPieChartB = $.plot("#feedDiv1B", rData, optionsPieChart); //var plotPieChartB = $.plot("#feedDiv1B", rData, optionsPieChart);
updateChart() updateChart()
function updateChart() { function updateChart() {

View File

@ -38,6 +38,11 @@ table {
-webkit-transform: translateZ(0); /* little trick to force GPU acceleration */ -webkit-transform: translateZ(0); /* little trick to force GPU acceleration */
} }
img {
border-style: solid;
border-width: 2px;
}
</style> </style>
<body> <body>
@ -60,20 +65,25 @@ table {
<div class="col-lg-12"> <div class="col-lg-12">
<div class="col-lg-5"> <div class="col-lg-5">
<div class="panel panel-default" style="margin-top: 15px; height: 37vh;"> <div class="panel panel-default" style="margin-top: 15px; height: 59vh;">
<div class="panel-heading"> <!--<div class="panel-heading">
<i class="fa fa-bar-chart-o fa-fw"></i> Statistics <i class="fa fa-bar-chart-o fa-fw"></i> Statistics
</div> </div>-->
<div id="panelbody" class="panel-body" style="height: 37vh; width:100%;"> <!--<div id="panelbody" class="panel-body" style="height: 37vh; width:100%;">
<div id="feedDiv1A" style="width:50%; height: calc(100% - 30px); position: relative; float: left;"></div> <div id="feedDiv1A" style="width:50%; height: calc(100% - 30px); position: relative; float: left;"></div>
<div id="feedDiv1B" style="width:50%; height: calc(100% - 30px); position: relative; float: left;"></div> <div id="feedDiv1B" style="width:50%; height: calc(100% - 30px); position: relative; float: left;"></div>-->
<div id="panelbody" class="panel-body" style="height: 100%;">
<div id="feedDiv1A" style="width:50%; height: 50%; position: relative; float: left;"><img id="img1" src="{{ url_for('static', filename='maps/map.png') }}" style="width:98%;height:97%;"></div>
<div id="feedDiv1B" style="width:50%; height: 50%; position: relative; float: left;"><img id="img2" src="{{ url_for('static', filename='maps/map.png') }}" style="width:98%;height:97%;"></div>
<div id="feedDiv2A" style="width:50%; height: 50%; position: relative; float: left;"><img id="img3" src="{{ url_for('static', filename='maps/map.png') }}" style="width:98%;height:97%;"></div>
<div id="feedDiv2B" style="width:50%; height: 50%; position: relative; float: left;"><img id="img4" src="{{ url_for('static', filename='maps/map.png') }}" style="width:98%;height:97%;"></div>
</div> </div>
<!-- /.panel-body --> <!-- /.panel-body -->
</div> </div>
<!-- /.panel --> <!-- /.panel -->
<div class="panel panel-default" style="height: 50vh;"> <div class="panel panel-default" style="height: 29vh;">
<div class="panel-heading"> <div class="panel-heading">
<i class="fa fa-tasks fa-fw"></i> Logs <i class="fa fa-tasks fa-fw"></i> Logs
<div class="pull-right"> <div class="pull-right">
@ -113,7 +123,7 @@ table {
</div> </div>
<!-- /.panel --> <!-- /.panel -->
<div class="panel panel-default" style="margin-top: 15px; height: 28vh;"> <div class="panel panel-default" style="margin-top: 15px; height: 29vh;">
<div class="panel-heading"> <div class="panel-heading">
<i class="fa fa-bar-chart-o fa-fw"></i> Log feed <i class="fa fa-bar-chart-o fa-fw"></i> Log feed
</div> </div>
@ -158,6 +168,13 @@ table {
var urlForHead = "{{ url_for('getLogHead') }}"; var urlForHead = "{{ url_for('getLogHead') }}";
/* DATA */ /* DATA */
var graph_log_refresh_rate = {{ graph_log_refresh_rate }}; var graph_log_refresh_rate = {{ graph_log_refresh_rate }};
setTimeout(function(){
var img2 = "{{ url_for('static', filename='maps/map2.png') }}";
$("#img1").fadeOut();
$('#img1').attr('src', img2);
$("#img1").delay(200).fadeIn();
}, 3000);
</script> </script>
<script src="{{ url_for('static', filename='js/index.js') }}"></script> <script src="{{ url_for('static', filename='js/index.js') }}"></script>