mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 01:41:22 +01:00
Fixes for elevation profile and CSV download
This commit is contained in:
Evolvedexperiment
parent
bb0e571587
commit
63b5744dcc
3 changed files with 106 additions and 29 deletions
|
|
@ -2111,6 +2111,10 @@ svg.button {
|
|||
stroke-width: 0;
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#debug {
|
||||
font-size: 1px;
|
||||
opacity: .8;
|
||||
|
|
|
|||
14
index.html
14
index.html
|
|
@ -2134,12 +2134,11 @@
|
|||
</div>
|
||||
|
||||
<div id="elevationProfile" class="dialog" style="display: none" width="100%">
|
||||
<div data-tip="Set height scale">
|
||||
<div>Height scale:</div>
|
||||
<div><input id="epScaleRange" type="range" min=1 max=100 value=50></div>
|
||||
|
||||
<div>Curve:</div>
|
||||
<div>
|
||||
<div id="elevationGraph" data-tip="Elevation profile"></div>
|
||||
<div class="centered">
|
||||
<div id="epControls">
|
||||
<span data-tip="Set height scale">Height scale: <input id="epScaleRange" type="range" min=1 max=100 value=50></span>
|
||||
<span data-tip="Set curve profile">Curve:
|
||||
<select id="epCurve">
|
||||
<option>Linear</option>
|
||||
<option selected>Basis spline</option>
|
||||
|
|
@ -2148,9 +2147,10 @@
|
|||
<option>Monotone X</option>
|
||||
<option>Natural</option>
|
||||
</select>
|
||||
</span>
|
||||
<span><button id="epSave" data-tip="Download the chart data as a CSV file" class="icon-download"></button></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="elevationGraph" data-tip="Elevation profile"></div>
|
||||
</div>
|
||||
|
||||
<div id="routeEditor" class="dialog" style="display: none">
|
||||
|
|
|
|||
|
|
@ -22,15 +22,12 @@ function showEPForRiver(node) {
|
|||
showElevationProfile(points, riverLen, true);
|
||||
}
|
||||
|
||||
function closeElevationProfile() {
|
||||
modules.elevation = false;
|
||||
}
|
||||
|
||||
function showElevationProfile(data, routeLen, isRiver) {
|
||||
// data is an array of cell indexes, routeLen is the distance (in actual metres/feet), isRiver should be true for rivers, false otherwise
|
||||
|
||||
document.getElementById("epScaleRange").addEventListener("change", draw);
|
||||
document.getElementById("epCurve").addEventListener("change", draw);
|
||||
document.getElementById("epSave").addEventListener("click", downloadCSV);
|
||||
|
||||
$("#elevationProfile").dialog({
|
||||
title: "Elevation profile", resizable: false, width: window.width,
|
||||
|
|
@ -48,14 +45,17 @@ function showElevationProfile(data, routeLen, isRiver) {
|
|||
}
|
||||
}
|
||||
|
||||
const chartWidth = window.innerWidth-280;
|
||||
const chartWidth = window.innerWidth-180;
|
||||
const chartHeight = 300; // height of our land/sea profile, excluding the biomes data below
|
||||
|
||||
const xOffset = 160;
|
||||
const yOffset = 70; // this is our drawing starting point from top-left (y = 0) of SVG
|
||||
const xOffset = 80;
|
||||
const yOffset = 20; // this is our drawing starting point from top-left (y = 0) of SVG
|
||||
|
||||
const biomesHeight = 40;
|
||||
|
||||
let lastBurgIndex = 0;
|
||||
let lastBurgCell = 0;
|
||||
let burgCount = 0;
|
||||
let chartData = {biome:[], burg:[], cell:[], height:[], mi:1000000, ma:0, mih: 100, mah: 0, points:[] }
|
||||
for (let i=0, prevB=0, prevH=-1; i<data.length; i++) {
|
||||
let cell = data[i];
|
||||
|
|
@ -77,6 +77,7 @@ function showElevationProfile(data, routeLen, isRiver) {
|
|||
let b = pack.cells.burg[cell];
|
||||
if (b == prevB) b = 0;
|
||||
else prevB = b;
|
||||
if (b) { burgCount++; lastBurgIndex = i; lastBurgCell = cell; }
|
||||
|
||||
chartData.biome[i] = pack.cells.biome[cell];
|
||||
chartData.burg[i] = b;
|
||||
|
|
@ -88,8 +89,59 @@ function showElevationProfile(data, routeLen, isRiver) {
|
|||
chartData.mi = Math.min(chartData.mi, chartData.height[i]);
|
||||
chartData.ma = Math.max(chartData.ma, chartData.height[i]);
|
||||
}
|
||||
|
||||
if (lastBurgIndex != 0 && lastBurgCell == chartData.cell[data.length-1] && lastBurgIndex < data.length) {
|
||||
chartData.burg[data.length-1] = chartData.burg[lastBurgIndex];
|
||||
chartData.burg[lastBurgIndex] = 0;
|
||||
}
|
||||
|
||||
draw();
|
||||
|
||||
function downloadCSV() {
|
||||
let data = "Point,X,Y,Cell,Height,Height value,Population,Burg,Burg population,Biome,Biome color,Culture,Culture color,Religion,Religion color,Province,Province color,State,State color\n"; // headers
|
||||
|
||||
for (let k=0; k<chartData.points.length; k++) {
|
||||
let cell = chartData.cell[k];
|
||||
let burg = pack.cells.burg[cell];
|
||||
let biome = pack.cells.biome[cell];
|
||||
let culture = pack.cells.culture[cell];
|
||||
let religion = pack.cells.religion[cell];
|
||||
let province = pack.cells.province[cell];
|
||||
let state = pack.cells.state[cell];
|
||||
let pop = pack.cells.pop[cell];
|
||||
let h = pack.cells.h[cell];
|
||||
|
||||
data += k+1 + ",";
|
||||
data += chartData.points[k][0] + ",";
|
||||
data += chartData.points[k][1] + ",";
|
||||
data += cell + ",";
|
||||
data += getHeight(h) + ",";
|
||||
data += h + ",";
|
||||
data += rn(pop * populationRate.value) + ",";
|
||||
if (burg) {
|
||||
data += pack.burgs[burg].name + ",";
|
||||
data += (pack.burgs[burg].population * populationRate.value * urbanization.value) + ",";
|
||||
} else {
|
||||
data += ",0,";
|
||||
}
|
||||
data += biomesData.name[biome] + ",";
|
||||
data += biomesData.color[biome] + ",";
|
||||
data += pack.cultures[culture].name + ",";
|
||||
data += pack.cultures[culture].color + ",";
|
||||
data += pack.religions[religion].name + ",";
|
||||
data += pack.religions[religion].color + ",";
|
||||
data += pack.provinces[province].name + ",";
|
||||
data += pack.provinces[province].color + ",";
|
||||
data += pack.states[state].name + ",";
|
||||
data += pack.states[state].color + ",";
|
||||
|
||||
data = data + "\n";
|
||||
}
|
||||
|
||||
const name = getFileName("elevation profile") + ".csv";
|
||||
downloadFile(data, name);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
chartData.points = [];
|
||||
let heightScale = 100 / parseInt(epScaleRange.value);
|
||||
|
|
@ -97,7 +149,7 @@ function showElevationProfile(data, routeLen, isRiver) {
|
|||
heightScale *= 0.90; // curves cause the heights to go slightly higher, adjust here
|
||||
|
||||
const xscale = d3.scaleLinear().domain([0, data.length]).range([0, chartWidth]);
|
||||
const yscale = d3.scaleLinear().domain([0, (chartData.ma-chartData.mi) * heightScale]).range([chartHeight, 0]);
|
||||
const yscale = d3.scaleLinear().domain([0, chartData.ma * heightScale]).range([chartHeight, 0]);
|
||||
|
||||
for (let i=0; i<data.length; i++) {
|
||||
chartData.points.push([xscale(i) + xOffset, yscale(chartData.height[i]) + yOffset]);
|
||||
|
|
@ -105,16 +157,22 @@ function showElevationProfile(data, routeLen, isRiver) {
|
|||
|
||||
document.getElementById("elevationGraph").innerHTML = "";
|
||||
|
||||
const chart = d3.select("#elevationGraph").append("svg").attr("width", chartWidth+200).attr("height", chartHeight+yOffset+biomesHeight).attr("id", "elevationSVG").attr("class", "epbackground");
|
||||
const chart = d3.select("#elevationGraph").append("svg").attr("width", chartWidth+120).attr("height", chartHeight+yOffset+biomesHeight).attr("id", "elevationSVG").attr("class", "epbackground");
|
||||
// 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").attr("fill", "darkgray");
|
||||
|
||||
let colors = getColorScheme();
|
||||
var landdef = chart.select("defs").append("linearGradient").attr("id", "landdef").attr("x1", "0%").attr("y1", "0%").attr("x2", "0%").attr("y2", "100%");
|
||||
|
||||
if (chartData.mah == chartData.mih) {
|
||||
landdef.append("stop").attr("offset", "0%").attr("style", "stop-color:" + getColor(chartData.mih, colors) + ";stop-opacity:1");
|
||||
landdef.append("stop").attr("offset", "100%").attr("style", "stop-color:" + getColor(chartData.mah, colors) + ";stop-opacity:1");
|
||||
} else {
|
||||
for (let k=chartData.mah; k >= chartData.mih; k--) {
|
||||
let perc = 1 - (k - chartData.mih) / (chartData.mah - chartData.mih);
|
||||
landdef.append("stop").attr("offset", perc*100 + "%").attr("style", "stop-color:" + getColor(k, colors) + ";stop-opacity:1");
|
||||
}
|
||||
}
|
||||
|
||||
// land
|
||||
let curve = d3.line().curve(d3.curveBasis); // see https://github.com/d3/d3-shape#curves
|
||||
|
|
@ -145,7 +203,7 @@ function showElevationProfile(data, routeLen, isRiver) {
|
|||
const x = chartData.points[k][0];
|
||||
const y = yOffset + chartHeight;
|
||||
const c = biomesData.color[chartData.biome[k]];
|
||||
const dataTip = biomesData.name[chartData.biome[k]]+" (" + chartData.height[k] + " " + hu + ")";
|
||||
const dataTip = biomesData.name[chartData.biome[k]]+" (" + chartData.height[k] + " " + hu + ", cell " + chartData.cell[k] + ")";
|
||||
|
||||
g.append("rect").attr("stroke", c).attr("fill", c).attr("x", x).attr("y", y).attr("width", xscale(1)).attr("height", 15).attr("data-tip", dataTip);
|
||||
}
|
||||
|
|
@ -191,12 +249,17 @@ function showElevationProfile(data, routeLen, isRiver) {
|
|||
g = chart.append("g").attr("id", "epburglabels");
|
||||
var y1 = 0;
|
||||
var add = 15;
|
||||
|
||||
let xwidth = chartData.points[1][0] - chartData.points[0][0];
|
||||
for (let k=0; k<chartData.points.length; k++)
|
||||
{
|
||||
if (chartData.burg[k] > 0) {
|
||||
let b = chartData.burg[k];
|
||||
|
||||
var x1 = chartData.points[k][0];
|
||||
let x1 = chartData.points[k][0]; // left side of graph by default
|
||||
if (k > 0) x1 += xwidth/2; // center it if not first
|
||||
if (k == chartData.points.length-1)
|
||||
x1 = chartWidth + xOffset; // right part of graph
|
||||
y1+=add;
|
||||
if (y1 >= yOffset) { y1 = add; }
|
||||
var d1 = 0;
|
||||
|
|
@ -210,5 +273,15 @@ function showElevationProfile(data, routeLen, isRiver) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
function closeElevationProfile() {
|
||||
document.getElementById("epScaleRange").removeEventListener("change", draw);
|
||||
document.getElementById("epCurve").removeEventListener("change", draw);
|
||||
document.getElementById("epSave").removeEventListener("click", downloadCSV);
|
||||
|
||||
document.getElementById("elevationGraph").innerHTML = "";
|
||||
|
||||
modules.elevation = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue