Box for printing pressure and temperature of a point on the diagram a…

…nd linear interpolation for missing data

src/renderer/diagram.ts

@@ -127,16 +127,20 @@ export class SoundingPlot {
       this.determineCanvasSize();
       this.update();
     });
+
+    this.canvas.addEventListener('mousemove', (e: MouseEvent) => {
+      this.updateInformationBox(e);
+    });
   }
 
   /**
    * Determines size of canvas based on the size of the div containing it.
    */
   private determineCanvasSize() {
-    const containerDiv = document.getElementById('sounding-diagram-container');
+    const containerDiv = document.getElementById('sounding-diagram-container')!;
 
-    const H = containerDiv!.clientHeight! * 0.8;
-    const W = containerDiv!.clientWidth! * 0.8;
+    const H = containerDiv.clientHeight! * 0.85;
+    const W = containerDiv.clientWidth! * 0.85;
 
     if (H * 4/5 >= W) {
       this.width = W;
@@ -202,6 +206,31 @@ export class SoundingPlot {
     })
   }
 
+  /**
+   * Shows a small box under cursor when the cursor is on the canvas.
+   * The box shows the temperature, height and pressure coordinates of the point.
+   */
+  private updateInformationBox(e: MouseEvent) {
+    const informationBox = document.getElementById('sounding-diagram-information-box')!;
+
+    if (e.offsetX < this.plotX || e.offsetX >= this.lastX || e.offsetY < this.plotY || e.offsetY >= this.lastY) {
+      informationBox.hidden = true;
+    } else {
+      informationBox.hidden = false;
+      informationBox.style.left = e.pageX.toString() + 'px';
+      informationBox.style.top = (e.pageY + 25).toString() + 'px';
+
+      const x = e.offsetX - this.plotX;
+      const y = e.offsetY - this.plotY;
+
+      const pres = this.pmin * Math.exp(y / this.rP);
+      informationBox.innerHTML = pres.toFixed(0) + 'mb &nbsp;';
+
+      const temp = this.tmin + (x - (this.plotHeight - y) * Math.sin(Math.PI * this.skew/180)) / this.rT;
+      informationBox.innerHTML += temp.toFixed(0) + '&deg;C';
+    }
+  }
+
   /**
    * Creates checkbox lists for plot features on the right panel.
    */

src/renderer/sounding.ts

@@ -68,15 +68,31 @@ export class Sounding implements Iterable<Level> {
   private observers: Array<() => void> = [];
 
   constructor(src: Iterable<LevelSource>) {
+    // Get level data from source
     this.levels = [];
     for (const level of src) {
-      const newLevel = new Level();
-      Object.assign(newLevel, level);
-      newLevel.enabled = newLevel.pressure > 300 ? 1 : 0;
-      this.levels.push(newLevel);
+      this.levels.push(Object.assign(new Level(), level));
     }
 
-    this.updateEnabledLevels();
+    // Fill missing data by linear interpolation
+    for (const prop of [['height',0], ['temp',2], ['dewpt',2], ['winddir',0], ['windspd',0]]) {
+      this.levels.forEach((lev) => {lev.enabled = Number.isNaN(lev[prop[0]]) ? 0 : 1;});
+      this.updateEnabledLevels();
+      for (const level of this.levels) {
+        if (Number.isNaN(level[<string>prop[0]])) {
+          try {
+            level[prop[0]] = parseFloat(this.getValueAt(level.pressure, <string>prop[0]).toFixed(<number>prop[1]));
+          } catch (e) {
+            continue;
+          }
+        }
+      }
+    }
+
+    // Disable levels above 200 mb by default
+    for (const level of this.levels) {
+      level.enabled = level.pressure >= 200 ? 1 : 0;
+    }
   }
 
   /** Iterates over active levels */

src/renderer/viewer.css

@@ -160,6 +160,17 @@ html, body {
   text-align: center;
 }
 
+#sounding-diagram-information-box {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100px;
+  height: 25px;
+  background-color: rgba(221, 221, 221, 0.4);
+  border-radius: 5px;
+  text-align: left;
+}
+
 #sounding-diagram-settings {
   position: absolute;
   top: 250px;

src/renderer/viewer.html

@@ -38,6 +38,7 @@
         <button type="button" id="export-btn">Export</button>
       </div>
       <canvas id="sounding-diagram"></canvas>
+      <div id="sounding-diagram-information-box" hidden></div>
       <p><label id="sounding-error"></label></p>
     </div>