Changeset 20025

Timestamp:

01/29/16 17:42:25 (9 years ago)

Author:

dlcheng

Message:

CHG (javascript): Implementing textlabels rendering.

Location:

issm/trunk-jpl/src/m/plot

Files:

• applyoptions.js (modified) (6 diffs)
• webgl.js (modified) (1 diff)

issm/trunk-jpl/src/m/plot/applyoptions.js

@@ -33 +33 @@
                         var ccontext,ccanvas,ccanvasid,ccanvashtml;
                         var colorbarorientiation = options.getfieldvalue('colorbarorientation','vertical');
-                        var cheightoffset = options.getfieldvalue('colorbarfontsize',16);
-                        var cwidthoffset = options.getfieldvalue('colorbarfontsize',16)*3;
+                        var cheightoffset = options.getfieldvalue('colorbarfontsize',18);
+                        var cwidthoffset = options.getfieldvalue('colorbarfontsize',18)*3;
                         var y;
                         var x;
@@ -119 +119 @@
                                         ccontext.lineTo(cwidth,y+cheightoffset);
                                         ccontext.stroke();
-                                        ccontext.font=String(options.getfieldvalue('colorbarfontsize',16))+'px Arial';
+                                        ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
                                         ccontext.fillStyle='black';
                                         ccontext.textAlign='left';
@@ -125 +125 @@
                                 }
                                 if (options.exist('colorbartitle')) {
-                                        ccontext.font=String(options.getfieldvalue('colorbarfontsize',16))+'px Arial';
+                                        ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
                                         ccontext.fillStyle='black';
                                         ccontext.textAlign='left';
@@ -192 +192 @@
                                         ccontext.lineTo(x+cwidthoffset,cheight+cheightoffset);
                                         ccontext.stroke();
-                                        ccontext.font=String(options.getfieldvalue('colorbarfontsize',16))+'px Arial';
+                                        ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
                                         ccontext.fillStyle='black';
                                         ccontext.textAlign='center';
@@ -198 +198 @@
                                 }
                                 if (options.exist('colorbartitle')) {
-                                        ccontext.font=String(options.getfieldvalue('colorbarfontsize',16))+'px Arial';
+                                        ccontext.font=String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
                                         ccontext.fillStyle='black';
                                         ccontext.textAlign='center';
@@ -393 +393 @@
                 node['buffers'] = initBuffers(gl, node['arrays']);
         } //}}}
+        
+        //text display //{{{
+        if (options.exist('textlabels')) {
+                var textcanvas,textcanvasid;    
+                textcanvasid = options.getfieldvalue('textcanvasid',options.getfieldvalue('canvasid')+'-text');
+                textcanvas = $('#'+textcanvasid);
+                textcanvas.textlabels = options.getfieldvalue('textlabels',[]);
+                
+                //setup drawing function for text canvas draw calls
+                textcanvas.draw = function(canvas) {
+                        var textcontext,textlabels,textlabel,textcanvaswidth,textcanvasheight,textcoordinates;  
+                        var textposition = vec3.create();
+                        var mvpMatrix = mat4.create();
+                        
+                        //ensure correct canvas coordinate scaling
+                        textcanvaswidth = this[0].clientWidth;
+                        textcanvasheight = this[0].clientHeight;
+                        this[0].width  = textcanvaswidth;
+                        this[0].height = textcanvasheight;
+                        
+                        textcontext = this[0].getContext('2d');
+                        textlabels = options.getfieldvalue('textlabels',[]);
+                        textcontext.clearRect(0, 0, textcanvaswidth, textcanvasheight);
+                        
+                        //worldspace to screenspace transformation for text
+                        for (text in textlabels) {
+                                textlabel = textlabels[text];
+                                mat4.multiply(mvpMatrix, canvas.cameraMatrix, canvas.nodes['overlay']['modelMatrix']);
+                                textposition = vec3.transformMat4(textposition, textlabel['pos'], mvpMatrix);
+                                if (textposition[2] > 1) { //clip coordinates with z > 1
+                                        continue;
+                                }
+                                textcoordinates = [(textposition[0]+1.0)/2.0*textcanvaswidth, (-textposition[1]+1.0)/2.0*textcanvasheight]; //NDC to screenspace
+                                textcontext.font = String(options.getfieldvalue('colorbarfontsize',18))+'px "Lato",Helvetica,Arial,sans-serif';
+                                textcontext.fillStyle = 'black';
+                                textcontext.strokeStyle = 'black';
+                                textcontext.textAlign = 'center';
+                                textcontext.textBaseline = 'middle';
+                                textcontext.fillText(textlabel['text'], textcoordinates[0], textcoordinates[1]);
+                                textcontext.strokeText(textlabel['text'], textcoordinates[0], textcoordinates[1]);
+                        }
+                }
+                canvas.textcanvas = textcanvas;
+        } //}}}
 }

issm/trunk-jpl/src/m/plot/webgl.js

@@ -465 +465 @@
         }
         
+        if (canvas.textcanvas) {
+                canvas.textcanvas.draw(canvas);
+        }
+
         // Set clear color to black, fully opaque
         var backgroundcolor=new RGBColor(options.getfieldvalue('backgroundcolor','lightcyan'));