feat(web): web server and basic dashboard

2019-04-22 09:49:31 +04:30
parent 8d4010b5dc
commit e18fc7692b
14 changed files with 254 additions and 31 deletions
@@ -4,6 +4,8 @@ from matplotlib import colors, cm
 import scipy.interpolate as interpolate
 from scipy import ndimage
 import math
+from io import BytesIO
+import base64

 WIDTH = 900
 HEIGHT = 450
@@ -27,21 +29,8 @@ GROUND_PROPORTION = 1 - WATER_PROPORTION
 DIRECTIONS = [(-1, -1), (-1, 0), (-1, 1), (1, 1), (1, 0), (1, -1), (0, -1), (0, 1)]

 def s(x):
-    # return x
    return -2 * x**3 + 3 * x**2

-# class Point(object):
-    # def __init__(self, x, y, z):
-        # self.x = x
-        # self.y = y
-        # self.z = z
-
-    # def is_ground(self):
-        # return self.z > WATER_LEVEL
-
-    # def is_water(self):
-        # return not(self.is_ground())
-
 def is_ground(value):
    return value > WATER_LEVEL

@@ -156,7 +145,7 @@ def constant_filter(a):
        return max(1, a[0])
    return 0

-def generate_map(width, height, continents=4):
+def generate_map(width=WIDTH, height=HEIGHT, continents=4):
    ground = np.zeros((width, height))
    ground_size = width * height * GROUND_PROPORTION

@@ -181,12 +170,16 @@ def generate_map(width, height, continents=4):
    ground = ndimage.gaussian_filter(ground, sigma=4)
    ground = ndimage.generic_filter(ground, constant_filter, size=1)
    print(np.min(ground), np.max(ground), MAX_ELEVATION)
-
    print(np.unique(ground))

    plt.imshow(ground.T, cmap=greys, norm=norm)
-    plt.show()

+    figfile = BytesIO()
+    plt.savefig(figfile, format='png')
+    figfile.seek(0)
+
+    return figfile

 if __name__ == "__main__":
    generate_map(WIDTH, HEIGHT)
+    plt.show()
@@ -0,0 +1,18 @@
+const mapSettings = document.getElementById('map-settings');
+//const board = document.getElementById('board');
+const map = document.getElementById('map');
+const spinner = document.getElementById('spinner');
+
+mapSettings.addEventListener('submit', (e) => {
+  console.log('form submit');
+  e.preventDefault();
+
+  spinner.classList.remove('d-none');
+  map.src = '/map?q=' + (new Date()).getTime();
+  map.classList.add('d-none');
+});
+
+map.addEventListener('load', () => {
+  spinner.classList.add('d-none');
+  map.classList.remove('d-none');
+});
@@ -0,0 +1,14 @@
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+}
+
+aside {
+  text-align: center;
+  width: 300px;
+  height: 100vh;
+}
+
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>World Map Generator</title>
+  <link rel='stylesheet' href="{{ url_for('static', filename='style.css') }}">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+</head>
+<body class='container-fluid'>
+  <div class='row'>
+    <main class='col d-flex justify-content-center align-items-center'>
+    <!-- <canvas id='board'></canvas> -->
+      <img src='/map' id='map'>
+
+      <div class='spinner-border text-primary' role='status' id='spinner'>
+        <span class='sr-only'>Loading...</span>
+      </div>
+    </main>
+
+    <aside class='col-3 px-4 bg-dark text-light text-center py-3'>
+      <h3>World Map Generator</h3>
+
+      <div class='panel px-4'>
+        <form class='mt-5' id='map-settings'>
+          <div class='form-group'>
+            <label name='preset'>Preset</label>
+            <select id='preset' name='preset' class='form-control'>
+              <option value='desert'>Desert</option>
+              <option value='forest'>Forest</option>
+            </select>
+          </div>
+        
+          <div class='form-group'>
+            <label name='mean-temperature'>Mean Temperature</label>
+            <input id='mean-temperature' name='mean-temperature' type='range' min='-50' max='50' class='form-control'>
+          </div>
+
+          <div class='form-group'>
+            <label name='mean-precipitation'>Mean Precipitation</label>
+            <input id='mean-precipitation' name='mean-precipitation' type='range' min='-50' max='50' class='form-control'>
+          </div>
+
+          <div class='form-group'>
+            <label name='min-elevation'>Minimum Elevation</label>
+            <input id='min-elevation' name='min-elevation' type='range' min='-100' max='100' class='form-control'>
+          </div>
+
+          <div class='form-group'>
+            <label name='max-elevation'>Maximum Elevation</label>
+            <input id='max-elevation' name='max-elevation' type='range' min='-100' max='100' class='form-control'>
+          </div>
+
+          <button type="submit" class="btn btn-primary">Generate</button>
+        </form>
+      </div>
+    </aside>
+  </div>
+
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+  <script src="{{ url_for('static', filename='script.js') }}"></script>
+</body>
+</html>
@@ -0,0 +1,13 @@
+from flask import Flask, render_template, make_response, send_file
+from index import generate_map
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/map')
+def get_map():
+    res = send_file(generate_map(), mimetype='image/png')
+    return res