diff options
Diffstat (limited to 'theme')
| -rw-r--r-- | theme/dive_export.html | 21 | ||||
| -rw-r--r-- | theme/light.css | 40 | ||||
| -rw-r--r-- | theme/list_lib.js | 240 | ||||
| -rw-r--r-- | theme/sand.css | 40 |
4 files changed, 339 insertions, 2 deletions
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){ <h1>Subsurface</h1> </div> </center> - <div id="divePanel"> + <div id="diveListPanel"> <div id="controlbox"> <input id="search_input" oninput="SearchModules(this.value)" placeholder="search"/><a id="adv_srch_sp" onClick="showdiv()" >Advanced Search</a> <div id="advanced_search"> @@ -135,5 +136,23 @@ function changeAdvSearch(e){ </div> </center> </div> + <div id="divePanel"> + <div id="diveprofile"> + <h2>Dive profile</h2> + <canvas id="profileCanvas"></canvas> + </div> + <div id="diveinfo"> + <h2>Dive Information</h2> + </div> + <div id="dive_equipments"> + <h2>Dive equipments</h2> + </div> + <div id="bookmarks"> + <h2>Bookmarks</h2> + </div> + <div id="divestats"> + <h2>Dive stats</h2> + </div> + </div> </body> </html> 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) { '</td></tr><tr><td class="words"><p>Buddy: </p></td><td>'+dive.buddy + '</td></tr><tr><td class="words">Suit: </td><td>'+dive.suit + '</td></tr><tr><td class="words">Tags: </td><td>'+putTags(dive.tags)+ - '</td></tr></table><div style="margin:10px;"><p class="words">Notes: </p>' + dive.notes +'</div>'; + '</td></tr></table><div style="margin:10px;"><p class="words">Notes: </p>' + dive.notes +'</div>'+ + '<center><a onclick="showDiveDetails('+dive.number+')">show more details</a></center>'; }; 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<MAX_WIDTH/scaleWidth(5);i++) + ctx.fillText(""+i*5+"",scaleWidth(i*5*60),scaleHeight(MAX_HEIGHT-150)); +} + +/** +*Draw the grid +*with spacing = 5 * 60 = 300 +*draw line every 5 minutes +*/ +function canvas_showGrid() { + var cnv = document.getElementById("profileCanvas"); + var cnvWidth = cnv.width; + var cnvHeight = cnv.height; + var lineOptions= { + separation: scaleWidth(300), + color: '#AAAAAA' + }; + var ctx = cnv.getContext('2d'); + + ctx.strokeStyle = lineOptions.color; + ctx.strokeWidth = 0.5; + ctx.beginPath(); + + var iCount = null; + var i = null; + var x = null; + var y = null; + + //draw horizontal lines + iCount = Math.floor(cnvWidth / lineOptions.separation); + for (i = 1; i <= iCount; i++) { + x = (i * lineOptions.separation); + ctx.moveTo(x, 0); + ctx.lineTo(x, cnvHeight); + ctx.stroke(); + } + + //draw vertical lines + iCount = Math.floor(cnvHeight / lineOptions.separation); + for (i = 1; i <= iCount; i++) { + y = (i * lineOptions.separation); + ctx.moveTo(0, y); + ctx.lineTo(cnvWidth, y); + ctx.stroke(); + } + + ctx.closePath(); +} + +/** +*The Main function used for drawing canvas lines +*it automatically calcualte the slope of the line +*and choose its color. +*This is the function that should be used internally. +*/ +function canvas_drawline(ctx,begin,end){ + drawline(ctx,begin,end,getcolor(begin,end)); +} + +/** +*Draw a line in the canvas with the given +*starting point, ending point, and color. +*/ +function drawline(ctx,begin,end,col){ + ctx.strokeStyle = col; + ctx.beginPath(); + ctx.moveTo(scaleWidth(begin[0]),scaleHeight(begin[1])); + ctx.lineTo(scaleWidth(end[0]),scaleHeight(end[1])); + ctx.stroke(); +} + +/** +*Choose Color for different speeds. +*this need to be fixed to go with subsurface conversion. +*/ +function getcolor(begin,end){ + var slope = (end[1]-begin[1])/(end[0]-begin[0]); + if (Math.abs(slope) > 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 '<tr><td class="Cyl">'+cylinder.Type+'</td><td class="Cyl">'+cylinder.Size+'</td><td class="Cyl">'+cylinder.WPressure+'</td>'+ + '<td class="Cyl">'+cylinder.SPressure+'</td><td class="Cyl">'+cylinder.EPressure+'</td><td class="Cyl">'+cylinder.O2+'</td></tr>'; +} + +/** +*Return HTML table of cylinders of a dive. +*/ +function get_cylinders_HTML(dive){ + var result=""; + result +='<h2>Dive equipments</h2><table><tr><td class="Cyl">Type</td><td class="Cyl">Size</td><td class="Cyl">Work Pressure</td><td class="Cyl">Start Pressure</td><td class="Cyl">End Pressure</td><td class="Cyl">O2</td></tr>'; + for (var i in dive.Cylinders){ + result+=get_cylinder_HTML(dive.Cylinders[i]); + } + result+='</table>'; + return result; +} + +/** +*Return HTML main data of a dive +*/ +function get_dive_HTML(dive) { + return '<h2>Dive Information</h2><table><tr><td class="words">Date: </td><td>'+dive.date+ + '</td><td class="words">     Time: </td><td>'+dive.time + + '</td><td class="words">     Location: </td><td>'+'<a onclick=\"Search_list_Modules(\''+dive.location+'\')\">'+ + dive.location +'</a>'+ + '</td></tr></table><table><tr><td class="words">Rating:</td><td>'+putRating(dive.rating)+ + '</td><td class="words">   Visibilty:</td><td>'+putRating(dive.visibility)+ + '</td></tr></table>'+ + '<table><tr><td class="words">Air temp: </td><td>'+dive.temperature.air+ + '</td><td class="words">    Water temp: </td><td>'+dive.temperature.water + + '</td></tr></table><table><tr><td class="words">DiveMaster: </td><td>'+dive.divemaster + + '</td></tr><tr><td class="words"><p>Buddy: </p></td><td>'+dive.buddy + + '</td></tr><tr><td class="words">Suit: </td><td>'+dive.suit + + '</td></tr><tr><td class="words">Tags: </td><td>'+putTags(dive.tags)+ + '</td></tr></table><div style="margin:10px;"><p class="words">Notes: </p>' + dive.notes +'</div>'; +}; + +/** +*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]); + } + canvas_drawline(ctx,points[points.length-1],[MAX_WIDTH,0]); +} + +/** +*Initialize the detailed view, +*set the global variables +*Fill the dive data +*Hide the list and show the canvas view. +*this is called to view the dive details. +*/ +function showDiveDetails(dive){ + //set global variables + dive_id = dive; + points = items[dive_id].samples; + 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]); + + //hide the list of dives and show the canvas. + document.getElementById("diveListPanel").style.display='none'; + document.getElementById("divePanel").style.display='block'; +} + +/** +*Show the list view and hide the detailed list view. +*this function have to clear any data saved by showDiveDetails +*/ +function unshowDiveDetails(dive){ + document.getElementById("diveListPanel").style.display='block'; + document.getElementById("divePanel").style.display='none'; +} diff --git a/theme/sand.css b/theme/sand.css index 0bfcf66c1..61a918a75 100644 --- a/theme/sand.css +++ b/theme/sand.css @@ -194,6 +194,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(253, 195, 141, 0.43); + box-shadow: 7px 7px 5px rgba(215, 107, 27, 0.43); +} + +.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; |