Merge pull request #5 from manticorp/copy_paste_latlng

feat: Add paste lat/lng ability, with additional documentation
manticorp · Mar 31, 2023 · 57483fa · 57483fa
2 parents ae5a4cc + ce86bd1
commit 57483fa
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 6 deletions.
diff --git a/instructions.html b/instructions.html
@@ -19,10 +19,53 @@ <h2>Aim</h2>
       </article>
       <article class="container content">
         <h2>How to Export</h2>
+        <div class="card is-pulled-right">
+          <div class="card-content">
+            <figure class="image">
+              <img src="public/im/latlng_inputs.png">
+              <figcaption>
+                Enter your latitude/longitude values here
+              </figcaption>
+            </figure>
+          </div>
+        </div>
         <p>Using the map at the top of the screen, choose a location. You can also manually type in a latitude and longitude.</p>
         <p>The orange rectangle shows the size of the exported image, and what will be included.</p>
         <p>The size of the exported area depends on the <strong>output zoom</strong> and the <strong>output size in pixels</strong>.</p>
         <p>After clicking 'Generate' a 16 bit PNG should await you.</p>
+        <h3>Explanation of different options</h3>
+        <table class="table is-fullwidth">
+          <tr><th>Latitude</th><td>The Latitude at the centre of the image</td></tr>
+          <tr><th>Longitude</th><td>The Longitude at the centre of the image</td></tr>
+          <tr><th>Zoom</th><td>The zoom level in the preview</td></tr>
+          <tr><th>Output Zoom</th><td>The zoom level to use for the output</td></tr>
+          <tr><th>Map Preview Type</th><td>The tiles to use in the preview at the top of the page</td></tr>
+          <tr><th>Output Width (px)</th><td>The output width of the entire image in pixels</td></tr>
+          <tr><th>Output Height (px)</th><td>The output height of the entire image in pixels</td></tr>
+          <tr><th>Default UE5 Sizes</th><td>A preset list of useful sizes for generating Unreal Engine 5 terrain</td></tr>
+          <tr><th>Normalisation Mode</th><td>The normalisation mode to use. See below for more information</td></tr>
+          <tr><th>Norm From</th><td>Overrides the normlisation "from" parameter. Can be useful when low height data is funky, e.g. at the coast (just use 0)</td></tr>
+          <tr><th>Norm To</th><td>Overrides the normlisation "to" parameter</td></tr>
+        </table>
+        <div class="card">
+          <div class="card-content">
+            <div class="content">
+              <h4>Top Tip: Copy &amp; Paste</h4>
+              <p>You can now copy and paste straight onto the page any lat/lng string. Acceptable formats include:</p>
+              <ul>
+                <li>03°04′33″S 37°21′12″E</li>
+                <li>3.0674° S, 37.3556° E</li>
+                <li>-3.0674, 37.3556</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <figure class="image">
+          <img src="public/im/mapview.png">
+          <figcaption>
+            The orange box shows the area that will be exported.
+          </figcaption>
+        </figure>
       </article>
       <article class="container content">
         <h2>Output</h2>

diff --git a/public/dist/css/main.css b/public/dist/css/main.css
diff --git a/public/dist/js/main.js b/public/dist/js/main.js
diff --git a/src/app.ts b/src/app.ts
@@ -569,6 +569,79 @@ export default class App {
       this.updatePhysicalDimensions();
       doHeightsDebounced();
     }));
+
+    window.addEventListener('paste', (event : ClipboardEvent) => {
+      // @ts-ignore
+      let paste = (event.clipboardData || window.clipboardData).getData("text");
+      console.log(event, paste);
+      if (paste) {
+        if (this.isPasteableText(paste)) {
+          const latLng = this.getLatLngFromText(paste);
+          console.log('Pasted latLng', latLng);
+
+          this.storeValue('latitude', latLng.latitude.toString());
+          this.storeValue('longitude', latLng.longitude.toString());
+          this.inputs.latitude.val(latLng.latitude);
+          this.inputs.longitude.val(latLng.longitude);
+          this.map.setView({
+            lat: parseFloat(this.inputs.latitude.val().toString()),
+            lng: parseFloat(this.inputs.longitude.val().toString())
+          });
+          this.updatePhysicalDimensions();
+          doHeightsDebounced();
+        } else {
+          console.log('Text was not pasteable', paste);
+        }
+      }
+    });
+  }
+  getLatLngFromText(text : string) : LatLng|null {
+    const google = /([0-9]{1,3}.?[0-9]*)°? ?(S|N), ?([0-9]{1,3}.?[0-9]*)°? ?(E|W)/;
+    const gmatch = text.trim().match(google);
+    if (gmatch) {
+      let latitude = parseFloat(gmatch[1]);
+      let longitude = parseFloat(gmatch[3]);
+      if (gmatch[2].toUpperCase() === 'S') {
+        latitude = -latitude;
+      }
+      if (gmatch[4].toUpperCase() === 'W') {
+        longitude = -longitude;
+      }
+      return {
+        latitude,
+        longitude
+      };
+    }
+    const generic = /([-0-9]{1,3}.?[0-9]*) *, *([-0-9]{1,3}.?[0-9]*)/;
+    const genmatch = text.trim().match(generic);
+    if (genmatch) {
+      let latitude = parseFloat(genmatch[1]);
+      let longitude = parseFloat(genmatch[2])
+      return {
+        latitude,
+        longitude
+      };
+    }
+    const degreesMinsSecs = /([0-9]{1,2})[*°] *([0-9]{1,2})[′'] *([0-9]{1,2})[″"] *(S|N) ?([0-9]{1,2})[*°] *([0-9]{1,2})[′'] *([0-9]{1,2})[″"] *(E|W)/;
+    const dmsmatch = text.trim().match(degreesMinsSecs);
+    if (dmsmatch) {
+      let latitude  = parseFloat(dmsmatch[1]) + parseFloat(dmsmatch[2])/60 + parseFloat(dmsmatch[3])/(60*60);
+      let longitude = parseFloat(dmsmatch[5]) + parseFloat(dmsmatch[6])/60 + parseFloat(dmsmatch[7])/(60*60);
+      if (dmsmatch[4].toUpperCase() === 'S') {
+        latitude = -latitude;
+      }
+      if (dmsmatch[8].toUpperCase() === 'W') {
+        longitude = -longitude;
+      }
+      return {
+        latitude,
+        longitude
+      };
+    }
+    return null;
+  }
+  isPasteableText(text : string) : boolean {
+    return this.getLatLngFromText(text) !== null;
   }
   newState() : ConfigState {
     return {

diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
@@ -38,7 +38,7 @@ $text-light: $grey-light;
 $box-background-color: $background;
 
 $card-shadow: none;
-$card-background-color: darken($body-background-color, 1);
+$card-background-color: $background;
 $card-header-box-shadow: none;
 $card-header-background-color: darken($body-background-color, 3);
 $card-footer-background-color: darken($body-background-color, 3);
@@ -65,7 +65,7 @@ $input-icon-active-color: $input-color;
 
 $table-color: $text;
 $table-head-color: $grey-lighter;
-$table-background-color: $grey-dark;
+$table-background-color: $background;
 $table-cell-border: 1px solid $grey;
 $table-row-hover-background-color: $grey-darker;
 $table-striped-row-even-background-color: $grey-darker;

diff --git a/src/templates/footer.html b/src/templates/footer.html
@@ -1,5 +1,6 @@
     <footer class="footer">
       <div class="content has-text-centered">
+        <p>Tip: You can copy and paste a latititude/longitude string anywhere on this page to input it straight into the respective inputs.</p>
         <p>
           <strong>Unreal Engine 16 Bit Grayscale PNG Heightmap Generator</strong>
           &bullet;