mirror of
https://github.com/subsurface/subsurface.git
synced 2024-10-06 03:13:01 +00:00
HTML: Use jqplot to draw profile.
Use jqplot to draw dive profile, Depth and pressure curves. add the library Javascript files under the theme directory and editing the exporter. Load them to the HTML template dynamically with synchronization as they are dependant on each other. Also Adding min version of JQuery that is needed by the library. Signed-off-by: Gehad elrobey <gehadelrobey@gmail.com> Signed-off-by: Miika Turkia <miika.turkia@gmail.com> Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
This commit is contained in:
parent
ac46158d65
commit
023187a73e
|
@ -98,6 +98,11 @@ void DiveLogExportDialog::exportHtmlInit(const QString &filename)
|
|||
copy_and_overwrite(searchPath + "dive_export.html", filename);
|
||||
copy_and_overwrite(searchPath + "list_lib.js", exportFiles + "list_lib.js");
|
||||
copy_and_overwrite(searchPath + "poster.png", exportFiles + "poster.png");
|
||||
copy_and_overwrite(searchPath + "jqplot.highlighter.min.js", exportFiles + "jqplot.highlighter.min.js");
|
||||
copy_and_overwrite(searchPath + "jquery.jqplot.min.js", exportFiles + "jquery.jqplot.min.js");
|
||||
copy_and_overwrite(searchPath + "jqplot.canvasAxisTickRenderer.min.js", exportFiles + "jqplot.canvasAxisTickRenderer.min.js");
|
||||
copy_and_overwrite(searchPath + "jqplot.canvasTextRenderer.min.js", exportFiles + "jqplot.canvasTextRenderer.min.js");
|
||||
copy_and_overwrite(searchPath + "jquery.min.js", exportFiles + "jquery.min.js");
|
||||
copy_and_overwrite(searchPath + (ui->themeSelection->currentText() == "Light" ? "light.css" : "sand.css"),
|
||||
exportFiles + "theme.css");
|
||||
}
|
||||
|
|
|
@ -7,25 +7,37 @@
|
|||
//advance settings window//
|
||||
load_scripts();
|
||||
|
||||
function load_scripts(){
|
||||
function load_script_sync(name)
|
||||
{
|
||||
var fileref=document.createElement('script');
|
||||
fileref.setAttribute("type","text/javascript");
|
||||
fileref.async = false;
|
||||
fileref.setAttribute("src", location.pathname + "_files/" + name);
|
||||
document.getElementsByTagName("head")[0].appendChild(fileref);
|
||||
}
|
||||
|
||||
function load_scripts()
|
||||
{
|
||||
var fileref=document.createElement("link");
|
||||
fileref.setAttribute("rel", "stylesheet");
|
||||
fileref.setAttribute("type", "text/css");
|
||||
fileref.setAttribute("href", location.pathname+"_files/theme.css");
|
||||
fileref.setAttribute("href", location.pathname + "_files/theme.css");
|
||||
document.getElementsByTagName("head")[0].appendChild(fileref);
|
||||
|
||||
fileref=document.createElement('script');
|
||||
fileref.setAttribute("src", location.pathname+"_files/file.json");
|
||||
fileref.setAttribute("src", location.pathname + "_files/file.json");
|
||||
document.getElementsByTagName("head")[0].appendChild(fileref);
|
||||
|
||||
fileref=document.createElement('script');
|
||||
fileref.setAttribute("src", location.pathname+"_files/settings.json");
|
||||
fileref.setAttribute("src", location.pathname + "_files/settings.json");
|
||||
document.getElementsByTagName("head")[0].appendChild(fileref);
|
||||
|
||||
fileref=document.createElement('script');
|
||||
fileref.setAttribute("type","text/javascript");
|
||||
fileref.setAttribute("src", location.pathname+"_files/list_lib.js");
|
||||
document.getElementsByTagName("head")[0].appendChild(fileref);
|
||||
load_script_sync("list_lib.js");
|
||||
load_script_sync("jquery.min.js");
|
||||
load_script_sync("jquery.jqplot.min.js");
|
||||
load_script_sync("jqplot.highlighter.min.js");
|
||||
load_script_sync("jqplot.canvasAxisTickRenderer.min.js");
|
||||
load_script_sync("jqplot.canvasTextRenderer.min.js");
|
||||
}
|
||||
|
||||
var advanced_shown=false;
|
||||
|
@ -164,8 +176,12 @@ function changeAdvSearch(e){
|
|||
</div>
|
||||
</center>
|
||||
<div id="diveprofile">
|
||||
<center>
|
||||
<h2 id="dive_no"></h2>
|
||||
<h3 id="dive_location"></h3>
|
||||
</center>
|
||||
<h2 class="det_hed">Dive profile</h2>
|
||||
<canvas id="profileCanvas"></canvas>
|
||||
<div style="width:100%" id="chart1"></div>
|
||||
</div>
|
||||
<div id="diveinfo">
|
||||
<h2 class="det_hed">Dive Information</h2>
|
||||
|
@ -174,7 +190,7 @@ function changeAdvSearch(e){
|
|||
<h2 class="det_hed">Dive equipments</h2>
|
||||
</div>
|
||||
<div id="bookmarks">
|
||||
<h2 class="det_hed">Bookmarks</h2>
|
||||
<h2 class="det_hed">Events</h2>
|
||||
</div>
|
||||
<div id="divestats">
|
||||
<h2 class="det_hed">Dive stats</h2>
|
||||
|
|
BIN
theme/jqplot.canvasAxisTickRenderer.min.js
vendored
Normal file
BIN
theme/jqplot.canvasAxisTickRenderer.min.js
vendored
Normal file
Binary file not shown.
57
theme/jqplot.canvasTextRenderer.min.js
vendored
Normal file
57
theme/jqplot.canvasTextRenderer.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
theme/jqplot.highlighter.min.js
vendored
Normal file
BIN
theme/jqplot.highlighter.min.js
vendored
Normal file
Binary file not shown.
BIN
theme/jquery.jqplot.min.js
vendored
Normal file
BIN
theme/jquery.jqplot.min.js
vendored
Normal file
Binary file not shown.
BIN
theme/jquery.min.js
vendored
Normal file
BIN
theme/jquery.min.js
vendored
Normal file
Binary file not shown.
|
@ -869,25 +869,87 @@ 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);
|
||||
}
|
||||
|
||||
var plot1;
|
||||
|
||||
/**
|
||||
*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]);
|
||||
function canvas_draw(){
|
||||
document.getElementById("chart1").innerHTML="";
|
||||
var d1 = new Array();
|
||||
var d2 = new Array();
|
||||
for (var i =0; i< items[dive_id].samples.length;i++){
|
||||
d1.push([items[dive_id].samples[i][0]/60,-1*mm_to_meter(items[dive_id].samples[i][1])]);
|
||||
if (items[dive_id].samples[i][2]!=0) {
|
||||
d2.push([items[dive_id].samples[i][0]/60,mbar_to_bar(items[dive_id].samples[i][2])]);
|
||||
}
|
||||
}
|
||||
canvas_drawline(ctx, points[points.length - 1], [MAX_WIDTH,0]);
|
||||
plot1 = $.jqplot('chart1', [d1,d2], {
|
||||
grid: {
|
||||
drawBorder: true,
|
||||
shadow: false,
|
||||
background: 'rgba(0,0,0,0)'
|
||||
},
|
||||
highlighter: { show: true },
|
||||
seriesDefaults: {
|
||||
shadowAlpha: 0.1,
|
||||
shadowDepth: 2,
|
||||
fillToZero: true
|
||||
},
|
||||
series: [{
|
||||
color: 'rgba(35,58,58,.6)',
|
||||
negativeColor: 'rgba(35,58,58,.6)',
|
||||
showMarker: true,
|
||||
showLine: true,
|
||||
fill: true,
|
||||
yaxis:'yaxis',
|
||||
},{
|
||||
color: 'rgba(44, 190, 160, 0.7)',
|
||||
showMarker: false,
|
||||
rendererOptions: {
|
||||
smooth: true,
|
||||
},
|
||||
yaxis:'y2axis',
|
||||
},],
|
||||
axes: {
|
||||
xaxis: {
|
||||
pad: 1.0,
|
||||
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
|
||||
tickOptions: {
|
||||
showGridline: false,
|
||||
formatString:'%i min',
|
||||
angle: -30
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
max: 0,
|
||||
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
|
||||
tickOptions:{ formatString:'%.2f'},
|
||||
pad: 2.05
|
||||
},
|
||||
y2axis: {
|
||||
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
|
||||
tickOptions:{ formatString:'%ibar'},
|
||||
pad: 3.05
|
||||
},
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -906,14 +968,21 @@ function showDiveDetails(dive)
|
|||
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]);
|
||||
document.getElementById("bookmarks").innerHTML=get_bookmarks_HTML(items[dive_id]);
|
||||
setDiveTitle(items[dive_id]);
|
||||
|
||||
//hide the list of dives and show the canvas.
|
||||
document.getElementById("diveListPanel").style.display = 'none';
|
||||
document.getElementById("divePanel").style.display = 'block';
|
||||
canvas_draw();
|
||||
}
|
||||
|
||||
function setDiveTitle(dive){
|
||||
document.getElementById("dive_no").innerHTML="Dive No. "+(settings.subsurfaceNumbers === '0'?
|
||||
dive.number : dive.subsurface_number);
|
||||
document.getElementById("dive_location").innerHTML=dive.location;
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -924,6 +993,7 @@ function unshowDiveDetails(dive)
|
|||
{
|
||||
start = dive_id;
|
||||
viewInPage();
|
||||
plot1 = null;
|
||||
document.getElementById("diveListPanel").style.display = 'block';
|
||||
document.getElementById("divePanel").style.display = 'none';
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue