Merge pull request #439 from evolvedexperiment/master

Elevation profile for dev branch

index.html

@@ -2124,11 +2124,16 @@
 
       <button id="riverEditStyle" data-tip="Edit style for all rivers in Style Editor" class="icon-brush"></button>
       <button id="riverLength" data-tip="River length in selected units">0</button>
+      <button id="riverElevationProfile" data-tip="Show the elevation profile for the river" class="icon-chart-area"></button>
       <button id="riverNew" data-tip="Create new river clicking on map" class="icon-map-pin"></button>
       <button id="riverLegend" data-tip="Edit free text notes (legend) for the river" class="icon-edit"></button>
       <button id="riverRemove" data-tip="Remove river. Shortcut: Delete" class="icon-trash"></button>
     </div>
 
+    <div id="elevationProfile" class="dialog" style="display: none" width="100%">
+      <div id="elevationGraph" data-tip="Elevation profile"></div>
+    </div>
+
     <div id="routeEditor" class="dialog" style="display: none">
       <button id="routeGroupsShow" data-tip="Show the group selection" class="icon-tags"></button>
       <div id="routeGroupsSelection" style="display: none">
@@ -2141,6 +2146,7 @@
 
       <button id="routeEditStyle" data-tip="Edit route group style in Style Editor" class="icon-brush"></button>
       <button id="routeLength" data-tip="Route length in selected units">0</button>
+      <button id="routeElevationProfile" data-tip="Show the elevation profile for the route" class="icon-chart-area"></button>
       <button id="routeSplit" data-tip="Click on a control point to split the route" class="icon-unlink"></button>
       <button id="routeLegend" data-tip="Edit free text notes (legend) for the route" class="icon-edit"></button>
       <button id="routeNew" data-tip="Create new route clicking on map" class="icon-map-pin"></button>
@@ -3579,6 +3585,7 @@
   <script defer src="modules/ui/biomes-editor.js"></script>
   <script defer src="modules/ui/cultures-editor.js"></script>
   <script defer src="modules/ui/namesbase-editor.js"></script>
+  <script defer src="modules/ui/elevation-profile.js"></script>
   <script defer src="modules/ui/routes-editor.js"></script>
   <script defer src="modules/ui/ice-editor.js"></script>
   <script defer src="modules/ui/lakes-editor.js"></script>

modules/ui/elevation-profile.js

@@ -0,0 +1,162 @@
+"use strict";
+
+function showEPForRoute(node) {
+  const points = [];
+  var prevB=0, i=0, j=0, b=0, ma=0, mi=100, h=0;
+  debug.select("#controlPoints").selectAll("circle").each(function() {
+    i = findCell(this.getAttribute("cx"), this.getAttribute("cy"));
+    points.push(i);
+  });
+
+  const routeLen = node.getTotalLength() * distanceScaleInput.value;
+
+  showElevationProfile(points, routeLen, false);
+}
+
+function showEPForRiver(node) {
+  const points = [];
+  var prevB=0, i=0, j=0, b=0, ma=0, mi=100, h=0;
+  debug.select("#controlPoints").selectAll("circle").each(function() {
+    i = findCell(this.getAttribute("cx"), this.getAttribute("cy"));
+    points.push(i);
+  });
+
+  const riverLen = (node.getTotalLength() / 2) * distanceScaleInput.value;
+
+  showElevationProfile(points, riverLen, true);
+}
+
+function resizeElevationProfile() {
+}
+
+function closeElevationProfile() {
+  modules.elevation = false;
+}
+
+function showElevationProfile(data, routeLen, isRiver) {
+// data is an array of cell indexes, routeLen is the distance, isRiver should be true for rivers, false otherwise
+  document.getElementById("elevationGraph").innerHTML = "";
+
+  $("#elevationProfile").dialog({
+    title: "Elevation profile", resizable: false,
+    width: window.width,
+    close: closeElevationProfile,
+    position: {my: "left top", at: "left+20 bottom-240", of: window, collision: "fit"}
+  });
+
+  // Azgaar asked if we can prevent river graphs from showing rivers as flowing uphill
+  var slope = 0;
+  if (isRiver) {
+    if (pack.cells.h[data[0]] < pack.cells.h[data[data.length-1]]) {
+      slope = 1; // up-hill
+    } else if (pack.cells.h[data[0]] > pack.cells.h[data[data.length-1]]) {
+      slope = -1; // down-hill 
+    }
+  }
+
+  const points = [];
+  var prevB=0, prevH=-1, i=0, j=0, cell=0, b=0, ma=0, mi=100, h=0;
+  for (var i=0; i<data.length; i++) {
+    cell = data[i];
+
+    h = pack.cells.h[cell];
+    if (h < 20) h = 20;
+
+    // check for river up-hill
+    if (prevH != -1) {
+      if (isRiver) {
+        if (slope == 1 && h < prevH) h = prevH;
+        else if (slope == 0 && h != prevH) h = prevH;
+        else if (slope == -1 && h > prevH) h = prevH;
+      }
+    }
+    prevH = h;
+    // river up-hill checks stop here
+
+    mi = Math.min(mi, h);
+    ma = Math.max(ma, h);
+
+    b = pack.cells.burg[cell];
+    if (b == prevB) b = 0;
+    else prevB = b;
+    points.push({x:j, y:h, b:b});
+    j++;
+  }
+
+  const heightDiff = ma-mi+1;
+
+
+//  const w = document.getElementById("elevationProfile").clientWidth - 32;
+  const w = window.innerWidth-280;
+  h = 100;
+
+  const xOffset = 100;
+  const yOffset = 80;
+
+  var chart = d3.select("#elevationGraph").append("svg").attr("width", w+200).attr("height", h+yOffset).attr("id", "elevationGraph");
+  // arrow-head definition
+  chart.append("defs").append("marker").attr("id", "arrowhead").attr("orient", "auto").attr("markerWidth", "2").attr("markerHeight", "4").attr("refX", "0.1").attr("refY", "2").append("path").attr("d", "M0,0 V4 L2,2 Z");
+
+  // main graph line
+  var lineFunc = d3.line()
+    .x(function(d) { return d.x * w / points.length + xOffset})
+    .y(function(d) { return h-d.y + yOffset });
+
+  chart.append("path").attr("d", lineFunc(points)).attr("stroke", "purple").attr("fill", "none").attr("id", "elevationLine");
+
+  // y-axis labels for starting and ending heights
+  chart.append("text").attr("id", "epy0").attr("x", xOffset-10).attr("y", h-points[0].y + yOffset).attr("text-anchor", "end");
+  document.getElementById("epy0").innerHTML = getHeight(points[0].y);
+  chart.append("text").attr("id", "epy1").attr("x", w+100).attr("y", h-points[points.length-1].y + yOffset).attr("text-anchor", "start");
+  document.getElementById("epy1").innerHTML = getHeight(points[points.length-1].y);
+
+  // y-axis labels for minimum and maximum heights (if not too close to start/end heights)
+  if (Math.abs(ma - points[0].y) > 3 && Math.abs(ma - points[points.length-1].y) > 3) {
+    chart.append("text").attr("id", "epy2").attr("x", xOffset-10).attr("y", h-ma + yOffset).attr("text-anchor", "end");
+    document.getElementById("epy2").innerHTML = getHeight(ma);
+  }
+  if (Math.abs(mi - points[0].y) > 3 && Math.abs(mi - points[points.length-1].y) > 3) {
+    chart.append("text").attr("id", "epy3").attr("x", xOffset-10).attr("y", h-mi + yOffset).attr("text-anchor", "end");
+    document.getElementById("epy3").innerHTML = getHeight(mi);
+  }
+  
+  // x-axis label for start, quarter, halfway and three-quarter, and end
+  chart.append("text").attr("id", "epx1").attr("x", xOffset).attr("y", h+yOffset).attr("text-anchor", "middle");
+  chart.append("text").attr("id", "epx2").attr("x", w / 4 + xOffset).attr("y", h+yOffset).attr("text-anchor", "middle");
+  chart.append("text").attr("id", "epx3").attr("x", w / 2 + xOffset).attr("y", h+yOffset).attr("text-anchor", "middle");
+  chart.append("text").attr("id", "epx4").attr("x", w / 4*3 + xOffset).attr("y", h+yOffset).attr("text-anchor", "middle");
+  chart.append("text").attr("id", "epx5").attr("x", w + xOffset).attr("y", h+yOffset).attr("text-anchor", "middle");
+  document.getElementById("epx1").innerHTML = "0 " + distanceUnitInput.value;
+  document.getElementById("epx2").innerHTML = rn(routeLen / 4) + " " + distanceUnitInput.value;
+  document.getElementById("epx3").innerHTML = rn(routeLen / 2) + " " + distanceUnitInput.value;
+  document.getElementById("epx4").innerHTML = rn(routeLen / 4*3) + " " + distanceUnitInput.value;
+  document.getElementById("epx5").innerHTML = rn(routeLen) + " " + distanceUnitInput.value;
+
+  chart.append("path").attr("id", "epx11").attr("d", "M" + (xOffset).toString() + ",0L" + (xOffset).toString() +"," + (h+yOffset-15).toString()).attr("stroke", "lightgray").attr("stroke-width", "1");
+  chart.append("path").attr("id", "epx12").attr("d", "M" + (w / 4 + xOffset).toString() + "," + (h+yOffset-15).toString() + "L" + (w / 4 + xOffset).toString() + ",0").attr("stroke", "lightgray").attr("stroke-width", "1");
+  chart.append("path").attr("id", "epx13").attr("d", "M" + (w / 2 + xOffset).toString() + "," + (h+yOffset-15).toString() + "L" + (w / 2 + xOffset).toString() + ",0").attr("stroke", "lightgray").attr("stroke-width", "1");
+  chart.append("path").attr("id", "epx14").attr("d", "M" + (w / 4*3 + xOffset).toString() + "," + (h+yOffset-15).toString() + "L" + (w / 4*3 + xOffset).toString() + ",0").attr("stroke", "lightgray").attr("stroke-width", "1");
+  chart.append("path").attr("id", "epx15").attr("d", "M" + (w + xOffset).toString() + ",0L" + (w + xOffset).toString() +"," + (h+yOffset-15).toString()).attr("stroke", "lightgray").attr("stroke-width", "1");
+
+  // draw city labels - try to avoid putting labels over one another
+  var y1 = 0;
+  var add = 15;
+  points.forEach(function(p) {
+    if (p.b > 0) {
+      var x1 = p.x * w / points.length + xOffset;
+      y1+=add;
+      if (y1 >= yOffset) { y1 = add; }
+      var d1 = 0;
+
+      // burg name
+      chart.append("text").attr("id", "ep" + p.b).attr("x", x1).attr("y", y1).attr("text-anchor", "middle");
+      document.getElementById("ep" + p.b).innerHTML = pack.burgs[p.b].name;
+
+      // arrow from burg name to graph line
+      chart.append("path").attr("id", "eparrow" + p.b).attr("d", "M" + x1.toString() + "," + (y1).toString() + "L" + x1.toString() + "," + parseInt(h-p.y-3+yOffset).toString()).attr("stroke", "black").attr("stroke-width", "1").attr("marker-end", "url(#arrowhead)");
+    }
+  });
+
+
+}
+

modules/ui/rivers-editor.js

@@ -33,6 +33,7 @@ function editRiver(id) {
   document.getElementById("riverWidthHide").addEventListener("click", hideRiverWidth);
   document.getElementById("riverWidthInput").addEventListener("input", changeWidth);
   document.getElementById("riverIncrement").addEventListener("input", changeIncrement);
+  document.getElementById("riverElevationProfile").addEventListener("click", showElevationProfile);
   
   document.getElementById("riverEditStyle").addEventListener("click", () => editStyle("rivers"));
   document.getElementById("riverNew").addEventListener("click", toggleRiverCreationMode);
@@ -94,6 +95,10 @@ function editRiver(id) {
     const [d, length] = Rivers.getPath(points, +riverWidthInput.value, +riverIncrement.value);
     elSelected.attr("d", d);
     updateRiverLength(length);
+
+    if (modules.elevation) {
+      showEPForRiver(elSelected.node());
+    }
   }
 
   function updateRiverLength(l = elSelected.node().getTotalLength() / 2) {
@@ -176,6 +181,11 @@ function editRiver(id) {
     if (r) r.name = riverName.value = Names.getBase(rand(nameBases.length-1));
   }
 
+  function showElevationProfile() {
+    modules.elevation = true;
+    showEPForRiver(node);
+  }
+
   function showRiverWidth() {
     document.querySelectorAll("#riverEditor > button").forEach(el => el.style.display = "none");
     document.getElementById("riverWidthSection").style.display = "inline-block";

modules/ui/routes-editor.js

@@ -30,6 +30,7 @@ function editRoute(onClick) {
   document.getElementById("routeGroupName").addEventListener("change", createNewGroup);
   document.getElementById("routeGroupRemove").addEventListener("click", removeRouteGroup);
   document.getElementById("routeGroupsHide").addEventListener("click", hideGroupSection);
+  document.getElementById("routeElevationProfile").addEventListener("click", showElevationProfile);
 
   document.getElementById("routeEditStyle").addEventListener("click", editGroupStyle);
   document.getElementById("routeSplit").addEventListener("click", toggleRouteSplitMode);
@@ -101,6 +102,15 @@ function editRoute(onClick) {
     elSelected.attr("d", round(lineGen(points)));
     const l = elSelected.node().getTotalLength();
     routeLength.innerHTML = rn(l * distanceScaleInput.value) + " " + distanceUnitInput.value;    
+ 
+    if (modules.elevation) {
+      showEPForRoute(elSelected.node());
+    }
+  }
+
+  function showElevationProfile() {
+    modules.elevation = true;
+    showEPForRoute(node);
   }
 
   function showGroupSection() {