Hi, This is a patch on the top of the 4 patches I sent two days ago. This mainly changes the profile to Highchart graph instead of the HTML5 canvas, This patch still needs more working and format and style fixing. Also I need to add another Data to the JSON file.
But I send it now so you can compare between the HTML5 canvas and the Highchart graph, so we can decide which on to work with. Also I didn't add Highcharts Javascript files to the project yet, I load them to the page online so the this will need Internet to work. Please tell me how do you find this? are the curves sketched correctly? I don't understand the semantics of these curves very well so any feedback from you will be appreciated for sure. Regards, Gehad On Tue, Jun 17, 2014 at 6:31 AM, Miika Turkia <[email protected]> wrote: > On Tue, Jun 17, 2014 at 1:12 AM, Gehad Elrobey <[email protected]> > wrote: > >> >> >> >> On Sun, Jun 15, 2014 at 7:55 AM, Miika Turkia <[email protected]> >> wrote: >> >>> Here is the latest set of Gehad's patches with my singed-off included. I >>> have also some comments here. >>> >>> - You delete the theme.css but not the other template files when >>> copying? If any other of the template files has changed in Subsurface, they >>> are not updated. >>> - The detailed view does not work for manually added dives. >>> >>> >> >> Manual add dives work ok with me, can you send me the dive file please? >> > > I seem to be getting the following error on JS Error Console: > > TypeError: end is undefined list_lib.js:715 > > A sample dive attached. > >> >> >> >>> There is also one whitespace issue, but it seems to be someone else's >>> doing. (It seems that the whitespace checker scrips works reasonably well >>> on JS files. And it really should be run against those as well, as there is >>> quite a bit of inconsistent spacing in there. When running it we'll just >>> need to be extra careful to make sure it is only "cosmetic" changes that >>> occur.) >>> >>> >> >> I Attached some patches to fix the JS format and checked that it doesn't >> corrupt anything. >> Also Fixed the deletion of other template files. >> > > Looks good whan taking a very quick peek at the files. I'll take another > look later. > > miika > >
From b4df9d0ef983efcf6fb56a497a18f9fc17250365 Mon Sep 17 00:00:00 2001 From: Gehad elrobey <[email protected]> Date: Thu, 19 Jun 2014 19:21:12 +0300 Subject: [PATCH 5/5] HTML: Use Highcharts library for profile drawing Draw Depth, Pressure and Temperature curves using Highchart instead of HTML5 canvas. Also Adding some more dive details to the JSON exported file. Signed-off-by: Gehad elrobey <[email protected]> --- save-html.c | 2 +- theme/dive_export.html | 9 ++- theme/list_lib.js | 159 +++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 147 insertions(+), 23 deletions(-) diff --git a/save-html.c b/save-html.c index 4f42143..1459088 100644 --- a/save-html.c +++ b/save-html.c @@ -52,7 +52,7 @@ void put_HTML_samples(struct membuffer *b, struct dive *dive) put_string(b, "\"samples\":\["); struct sample *s = dive->dc.sample; for (i = 0; i < dive->dc.samples; i++) { - put_format(b, "[%d,%d],", s->time.seconds, s->depth.mm); + put_format(b, "[%d,%d,%d,%d],", s->time.seconds, s->depth.mm, s->cylinderpressure.mbar, s->temperature.mkelvin); s++; } put_string(b, "],"); diff --git a/theme/dive_export.html b/theme/dive_export.html index e1b3189..7dc5a49 100644 --- a/theme/dive_export.html +++ b/theme/dive_export.html @@ -2,8 +2,11 @@ <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>dive log export</title> -<script> -////////////////////////////////// +<script src="http://code.jquery.com/jquery-1.9.1.js"; type="text/javascript"></script> +<script src="http://code.highcharts.com/highcharts.js"; type="text/javascript"></script> +<script src="http://code.highcharts.com/modules/exporting.js"; type="text/javascript"></script> +<script type="text/javascript"> +var obj; //advance settings window// load_scripts(); @@ -165,7 +168,7 @@ function changeAdvSearch(e){ </center> <div id="diveprofile"> <h2>Dive profile</h2> - <canvas id="profileCanvas"></canvas> + <div id="container" style="width:auto; height: 400px; margin: 0 auto"></div> </div> <div id="diveinfo"> <h2>Dive Information</h2> diff --git a/theme/list_lib.js b/theme/list_lib.js index 20dc5a7..b632eae 100644 --- a/theme/list_lib.js +++ b/theme/list_lib.js @@ -846,25 +846,146 @@ function get_dive_HTML(dive) '</td></tr></table><div style="margin:10px;"><p class="words">Notes: </p>' + dive.notes + '</div>'; }; +var ZERO_C_IN_MKELVIN = 273150; + +function mkelvin_to_C(mkelvin) +{ + return (mkelvin - ZERO_C_IN_MKELVIN) / 1000.0; +} + +function mbar_to_bar(mbar){ + return mbar/1000; +} + +function mm_to_meter(mm){ + return mm/(1000); +} + /** *Main canvas draw function *this calls the axis and grid initialization functions. */ function canvas_draw() { - var c = document.getElementById("profileCanvas"); - c.width = window.innerWidth; - c.height = window.innerHeight; - canvas_showGrid(); - canvas_showAxisInfo(); - var ctx = c.getContext("2d"); - ctx.lineWidth = 4 //variable width - //draw starting line, draw all samples then draw the final line. - canvas_drawline(ctx, [0,0], points[0]); - for (var i = 1; i < points.length; i++) { - canvas_drawline(ctx, points[i - 1], points[i]); + obj = { + chart: { + }, + title: { + text: 'Dive number '+items[dive_id].subsurface_number, + x: -20 //center + }, + subtitle: { + text: 'Location: '+ items[dive_id].location, + x: -20 + }, + plotOptions: { + series: { + fillColor: { + linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1}, + stops: [ + [0, 'rgba(10,0,0,0)' ], + [1, 'rgb(80,80,120)' ], + [2, 'rgb(255,0,0)' ] + ] + }, + lineWidth: 1, + marker: { + enabled: false + }, + shadow: false, + states: { + hover: { + lineWidth: 1 + } + }, + threshold: null + } + }, + xAxis: { + title: { + text: 'Time (Minutes)' + },labels: { + formatter: function() { + return this.value/60; + } + }, + tickInterval: 60*5, + }, + yAxis: [{ + title: { + text: 'Depth (m)' + }, + reversed: true, + plotLines: [{ + value: 0, + width: 1, + color: '#808080' + }] + },{ + title: { + text: 'Pressure (bar)' + }, + reversed: false, + plotLines: [{ + value: 0, + width: 1, + color: '#AA8080' + }] + },{ + title: { + text: 'Temp (C)' + }, + reversed: false, + plotLines: [{ + value: 0, + width: 1, + color: '#FF0000', + }] + }], + tooltip: { + shared: true + }, + legend: { + layout: 'horizontal', + align: 'center', + verticalAlign: 'bottom', + borderWidth: 0 + }, + series: [{ + yAxis: 0, + name: 'Depth', + type: 'area', + tooltip: { valueSuffix: ' m' } + },{ + yAxis: 1, + name: 'Pressure', + tooltip: { valueSuffix: ' bar' } + },{ + yAxis: 2, + name: 'Temperature', + tooltip: { valueSuffix: ' C' } + }] + }; + obj.xAxis.categories= new Array(); + obj.series[0].data = new Array(); + obj.series[1].data = new Array(); + obj.series[2].data = new Array(); + var last=0; + + for (var i =0; i< items[dive_id].samples.length;i++){ + obj.xAxis.categories.push(items[dive_id].samples[i][0]); + obj.series[0].data.push([items[dive_id].samples[i][0],mm_to_meter(items[dive_id].samples[i][1])]); + if (items[dive_id].samples[i][2]!=0) { + obj.series[1].data.push([items[dive_id].samples[i][0],mbar_to_bar(items[dive_id].samples[i][2])]); + } + if (items[dive_id].samples[i][3]==0) { + obj.series[2].data.push([items[dive_id].samples[i][0],last]); + } else { + last = mkelvin_to_C(items[dive_id].samples[i][3]); + obj.series[2].data.push([items[dive_id].samples[i][0],last]); + } } - canvas_drawline(ctx, points[points.length - 1], [MAX_WIDTH,0]); + $('#container').highcharts(obj); } /** @@ -879,17 +1000,17 @@ function showDiveDetails(dive) //set global variables dive_id = dive; points = items[dive_id].samples; - MAX_HEIGHT = items[dive_id].maxdepth * 1.1; + MAX_HEIGHT = items[dive_id].maxdepth*1.1; MAX_WIDTH = items[dive_id].duration; - //draw the canvas and initialize the view - canvas_draw(); - document.getElementById("diveinfo").innerHTML = get_dive_HTML(items[dive_id]); - document.getElementById("dive_equipments").innerHTML = get_cylinders_HTML(items[dive_id]); + //initialize the view + document.getElementById("diveinfo").innerHTML=get_dive_HTML(items[dive_id]); + document.getElementById("dive_equipments").innerHTML=get_cylinders_HTML(items[dive_id]); //hide the list of dives and show the canvas. - document.getElementById("diveListPanel").style.display = 'none'; - document.getElementById("divePanel").style.display = 'block'; + document.getElementById("diveListPanel").style.display='none'; + document.getElementById("divePanel").style.display='block'; + canvas_draw(); } /** -- 1.9.1
_______________________________________________ subsurface mailing list [email protected] http://lists.hohndel.org/cgi-bin/mailman/listinfo/subsurface
