From 8ea5441b79c860520f8bc28ad905196ac58ad37c Mon Sep 17 00:00:00 2001 From: Gehad elrobey Date: Tue, 10 Jun 2014 04:45:31 +0300 Subject: HTML: Show dive profile embedded in HTML5 canvas Plot samples from dive computer (depth,time) with HTML5 canvas. Add very small API for curve drawing and coloring. Add the dive equipment to the detailed dive view. in the dive list when a dive is expanded you can show the dive profile,equipments and dive information by clicking on 'show more details'. Fixing the two themes to work well with the new div added that carry detailed dive information. Signed-off-by: Gehad elrobey Signed-off-by: Miika Turkia Signed-off-by: Dirk Hohndel --- theme/dive_export.html | 21 ++++- theme/light.css | 40 +++++++++ theme/list_lib.js | 240 ++++++++++++++++++++++++++++++++++++++++++++++++- theme/sand.css | 40 +++++++++ 4 files changed, 339 insertions(+), 2 deletions(-) (limited to 'theme') diff --git a/theme/dive_export.html b/theme/dive_export.html index edee4645a..4d7efa20c 100644 --- a/theme/dive_export.html +++ b/theme/dive_export.html @@ -79,6 +79,7 @@ window.onload=function(){ sizeofpage=10; showAllDives(); + document.getElementById("divePanel").style.display='none'; } function changeAdvSearch(e){ @@ -95,7 +96,7 @@ function changeAdvSearch(e){

Subsurface

-
+
Advanced Search
+
+
+

Dive profile

+ +
+
+

Dive Information

+
+
+

Dive equipments

+
+
+

Bookmarks

+
+
+

Dive stats

+
+
diff --git a/theme/light.css b/theme/light.css index 589bbddda..77540ba00 100644 --- a/theme/light.css +++ b/theme/light.css @@ -192,6 +192,46 @@ ul:hover{ margin-bottom:10px; } +#profileCanvas{ + border:1px solid #d3d3d3; + width:98%; + margin:1%; + height:300px; +} + +#diveListPanel{ + padding:5px; + width:90%; + margin:0% 5% 0% 5%; + margin-bottom:50px; + background-color: rgba(88,121,139,0.3); + box-shadow: 10px 10px 5px #888888; +} + +.Cyl{ + padding-right:25px; +} + +#diveinfo{ + border-style:solid; +} + +#diveprofile{ + border-style:solid; +} + +#dive_equipments{ + border-style:solid; +} + +#divestats{ + border-style:solid; +} + +#bookmarks{ + border-style:solid; +} + @media (max-width: 768px) { #divePanel{ padding:4px; diff --git a/theme/list_lib.js b/theme/list_lib.js index d7a01c1c0..ff51e293f 100644 --- a/theme/list_lib.js +++ b/theme/list_lib.js @@ -192,7 +192,8 @@ function getExpanded (dive) { '

Buddy:

'+dive.buddy + 'Suit: '+dive.suit + 'Tags: '+putTags(dive.tags)+ - '

Notes:

' + dive.notes +'
'; + '

Notes:

' + dive.notes +'
'+ + '
show more details
'; }; function putTags(tags){ @@ -575,3 +576,240 @@ function getItems(){ } } } + +////////////////////////canvas/////////////////// + +/* +Canvas Colors Constants +*/ +var CAMARONE1 = rgb(0,0.4,0); +var LIMENADE1 = rgb(0.4,0.8,0); +var RIOGRANDE1 = rgb (0.8,0.8,0); +var PIRATEGOLD1= rgb(0.8,0.5,0); +var RED1 = rgb(1,0,0); + +/* +Some Global variables that hold the current shown dive data. +*/ +var dive_id;//current shown ID +var points;//reference to the samples array of the shown dive. +var MAX_HEIGHT;//Maximum depth, then its the maximum height for canvas +var MAX_WIDTH;//dive duration, then its the maximum width for canvas + +/** +*Return RGB css color string. +*/ +function rgb(r, g, b){ + r = Math.floor(r*255); + g = Math.floor(g*255); + b = Math.floor(b*255); + return ["rgb(",r,",",g,",",b,")"].join(""); +} + +/** +*This function returns the value scaled to the size of canvas +*new scale = (old scale * height of canvas) / max height in dive +*to ensure that the dive profile is filling the whole area available +*/ +function scaleHeight(vari){ + var height = document.getElementById("profileCanvas").height; + max = MAX_HEIGHT; + return (vari*height)/max; +} + +/** +*This function returns the value scaled to the size of canvas +*new scale = (old scale * width of canvas) / max width in dive +*to ensure that the dive profile is filling the whole area available +*/ +function scaleWidth(vari){ + var width = document.getElementById("profileCanvas").width; + max = MAX_WIDTH; + return (vari*width)/max; +} + +/** +*Show Axis information(Numbers on scale) +*put a Number every 300 second scaled to canvas width. +*/ +function canvas_showAxisInfo(){ + var c=document.getElementById("profileCanvas"); + var ctx=c.getContext("2d"); + ctx.font="27px Georgia";/*This is better be a variable scale*/ + for (var i=0;i 300 ) return RED1; + if (Math.abs(slope) > 180 ) return PIRATEGOLD1; + if (Math.abs(slope) > 110 ) return RIOGRANDE1; + if (Math.abs(slope) > 70 ) return LIMENADE1; + return CAMARONE1; +} + +/** +*Return the HTML string for a dive cylinder entry in the table. +*/ +function get_cylinder_HTML(cylinder){ + return ''+cylinder.Type+''+cylinder.Size+''+cylinder.WPressure+''+ + ''+cylinder.SPressure+''+cylinder.EPressure+''+cylinder.O2+''; +} + +/** +*Return HTML table of cylinders of a dive. +*/ +function get_cylinders_HTML(dive){ + var result=""; + result +='

Dive equipments

'; + for (var i in dive.Cylinders){ + result+=get_cylinder_HTML(dive.Cylinders[i]); + } + result+='
TypeSizeWork PressureStart PressureEnd PressureO2
'; + return result; +} + +/** +*Return HTML main data of a dive +*/ +function get_dive_HTML(dive) { + return '

Dive Information

Date: '+dive.date+ + '     Time: '+dive.time + + '     Location: '+''+ + dive.location +''+ + '
Rating:'+putRating(dive.rating)+ + '   Visibilty:'+putRating(dive.visibility)+ + '
'+ + '
Air temp: '+dive.temperature.air+ + '    Water temp: '+dive.temperature.water + + '
DiveMaster: '+dive.divemaster + + '

Buddy:

'+dive.buddy + + '
Suit: '+dive.suit + + '
Tags: '+putTags(dive.tags)+ + '

Notes:

' + dive.notes +'
'; +}; + +/** +*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