From 2a7ede6c627cd9dddd46d68d361deae6cd0ef848 Mon Sep 17 00:00:00 2001
From: Jitse-Jan <code@jitsejan.com>
Date: Wed, 24 Feb 2021 02:07:25 +0000
Subject: [PATCH 1/4] Upgraded Python version

---
 .gitignore                     |   2 +
 Pipfile                        |   9 +-
 Pipfile.lock                   | 201 ---------------------------------
 app.py                         |  58 +++++-----
 templates/layouts/base.html    |   6 +-
 templates/layouts/results.html |   2 +-
 6 files changed, 44 insertions(+), 234 deletions(-)
 delete mode 100644 Pipfile.lock

diff --git a/.gitignore b/.gitignore
index 894a44c..3e244c1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -102,3 +102,5 @@ venv.bak/
 
 # mypy
 .mypy_cache/
+Pipfile.lock
+images/*.csv
diff --git a/Pipfile b/Pipfile
index b3a20bb..f262858 100644
--- a/Pipfile
+++ b/Pipfile
@@ -8,6 +8,13 @@ verify_ssl = true
 [packages]
 matplotlib = "*"
 flask = "*"
+mypy = "*"
+flake8 = "*"
+isort = "*"
+black = "*"
 
 [requires]
-python_version = "3.6"
+python_version = "3.9"
+
+[pipenv]
+allow_prereleases = true
diff --git a/Pipfile.lock b/Pipfile.lock
deleted file mode 100644
index 35a6251..0000000
--- a/Pipfile.lock
+++ /dev/null
@@ -1,201 +0,0 @@
-{
-    "_meta": {
-        "hash": {
-            "sha256": "2a815e3fa3e0e0fd50b765a100a31a278a7a72a4985d9902ece9ef6597a6c554"
-        },
-        "pipfile-spec": 6,
-        "requires": {
-            "python_version": "3.6"
-        },
-        "sources": [
-            {
-                "name": "pypi",
-                "url": "https://pypi.org/simple",
-                "verify_ssl": true
-            }
-        ]
-    },
-    "default": {
-        "click": {
-            "hashes": [
-                "sha256:2335065e6395b9e67ca716de5f7526736bfa6ceead690adf616d925bdc622b13",
-                "sha256:5b94b49521f6456670fdb30cd82a4eca9412788a93fa6dd6df72c94d5a8ff2d7"
-            ],
-            "version": "==7.0"
-        },
-        "cycler": {
-            "hashes": [
-                "sha256:1d8a5ae1ff6c5cf9b93e8811e581232ad8920aeec647c37316ceac982b08cb2d",
-                "sha256:cd7b2d1018258d7247a71425e9f26463dfb444d411c39569972f4ce586b0c9d8"
-            ],
-            "version": "==0.10.0"
-        },
-        "flask": {
-            "hashes": [
-                "sha256:13f9f196f330c7c2c5d7a5cf91af894110ca0215ac051b5844701f2bfd934d52",
-                "sha256:45eb5a6fd193d6cf7e0cf5d8a5b31f83d5faae0293695626f539a823e93b13f6"
-            ],
-            "index": "pypi",
-            "version": "==1.1.1"
-        },
-        "itsdangerous": {
-            "hashes": [
-                "sha256:321b033d07f2a4136d3ec762eac9f16a10ccd60f53c0c91af90217ace7ba1f19",
-                "sha256:b12271b2047cb23eeb98c8b5622e2e5c5e9abd9784a153e9d8ef9cb4dd09d749"
-            ],
-            "version": "==1.1.0"
-        },
-        "jinja2": {
-            "hashes": [
-                "sha256:74320bb91f31270f9551d46522e33af46a80c3d619f4a4bf42b3164d30b5911f",
-                "sha256:9fe95f19286cfefaa917656583d020be14e7859c6b0252588391e47db34527de"
-            ],
-            "version": "==2.10.3"
-        },
-        "kiwisolver": {
-            "hashes": [
-                "sha256:05b5b061e09f60f56244adc885c4a7867da25ca387376b02c1efc29cc16bcd0f",
-                "sha256:210d8c39d01758d76c2b9a693567e1657ec661229bc32eac30761fa79b2474b0",
-                "sha256:26f4fbd6f5e1dabff70a9ba0d2c4bd30761086454aa30dddc5b52764ee4852b7",
-                "sha256:3b15d56a9cd40c52d7ab763ff0bc700edbb4e1a298dc43715ecccd605002cf11",
-                "sha256:3b2378ad387f49cbb328205bda569b9f87288d6bc1bf4cd683c34523a2341efe",
-                "sha256:400599c0fe58d21522cae0e8b22318e09d9729451b17ee61ba8e1e7c0346565c",
-                "sha256:47b8cb81a7d18dbaf4fed6a61c3cecdb5adec7b4ac292bddb0d016d57e8507d5",
-                "sha256:53eaed412477c836e1b9522c19858a8557d6e595077830146182225613b11a75",
-                "sha256:58e626e1f7dfbb620d08d457325a4cdac65d1809680009f46bf41eaf74ad0187",
-                "sha256:5a52e1b006bfa5be04fe4debbcdd2688432a9af4b207a3f429c74ad625022641",
-                "sha256:5c7ca4e449ac9f99b3b9d4693debb1d6d237d1542dd6a56b3305fe8a9620f883",
-                "sha256:682e54f0ce8f45981878756d7203fd01e188cc6c8b2c5e2cf03675390b4534d5",
-                "sha256:76275ee077772c8dde04fb6c5bc24b91af1bb3e7f4816fd1852f1495a64dad93",
-                "sha256:79bfb2f0bd7cbf9ea256612c9523367e5ec51d7cd616ae20ca2c90f575d839a2",
-                "sha256:7f4dd50874177d2bb060d74769210f3bce1af87a8c7cf5b37d032ebf94f0aca3",
-                "sha256:8944a16020c07b682df861207b7e0efcd2f46c7488619cb55f65882279119389",
-                "sha256:8aa7009437640beb2768bfd06da049bad0df85f47ff18426261acecd1cf00897",
-                "sha256:9105ce82dcc32c73eb53a04c869b6a4bc756b43e4385f76ea7943e827f529e4d",
-                "sha256:933df612c453928f1c6faa9236161a1d999a26cd40abf1dc5d7ebbc6dbfb8fca",
-                "sha256:939f36f21a8c571686eb491acfffa9c7f1ac345087281b412d63ea39ca14ec4a",
-                "sha256:9491578147849b93e70d7c1d23cb1229458f71fc79c51d52dce0809b2ca44eea",
-                "sha256:9733b7f64bd9f807832d673355f79703f81f0b3e52bfce420fc00d8cb28c6a6c",
-                "sha256:a02f6c3e229d0b7220bd74600e9351e18bc0c361b05f29adae0d10599ae0e326",
-                "sha256:a0c0a9f06872330d0dd31b45607197caab3c22777600e88031bfe66799e70bb0",
-                "sha256:aa716b9122307c50686356cfb47bfbc66541868078d0c801341df31dca1232a9",
-                "sha256:acc4df99308111585121db217681f1ce0eecb48d3a828a2f9bbf9773f4937e9e",
-                "sha256:b64916959e4ae0ac78af7c3e8cef4becee0c0e9694ad477b4c6b3a536de6a544",
-                "sha256:d22702cadb86b6fcba0e6b907d9f84a312db9cd6934ee728144ce3018e715ee1",
-                "sha256:d3fcf0819dc3fea58be1fd1ca390851bdb719a549850e708ed858503ff25d995",
-                "sha256:d52e3b1868a4e8fd18b5cb15055c76820df514e26aa84cc02f593d99fef6707f",
-                "sha256:db1a5d3cc4ae943d674718d6c47d2d82488ddd94b93b9e12d24aabdbfe48caee",
-                "sha256:e3a21a720791712ed721c7b95d433e036134de6f18c77dbe96119eaf7aa08004",
-                "sha256:e8bf074363ce2babeb4764d94f8e65efd22e6a7c74860a4f05a6947afc020ff2",
-                "sha256:f16814a4a96dc04bf1da7d53ee8d5b1d6decfc1a92a63349bb15d37b6a263dd9",
-                "sha256:f2b22153870ca5cf2ab9c940d7bc38e8e9089fa0f7e5856ea195e1cf4ff43d5a",
-                "sha256:f790f8b3dff3d53453de6a7b7ddd173d2e020fb160baff578d578065b108a05f",
-                "sha256:fe51b79da0062f8e9d49ed0182a626a7dc7a0cbca0328f612c6ee5e4711c81e4"
-            ],
-            "version": "==1.1.0"
-        },
-        "markupsafe": {
-            "hashes": [
-                "sha256:00bc623926325b26bb9605ae9eae8a215691f33cae5df11ca5424f06f2d1f473",
-                "sha256:09027a7803a62ca78792ad89403b1b7a73a01c8cb65909cd876f7fcebd79b161",
-                "sha256:09c4b7f37d6c648cb13f9230d847adf22f8171b1ccc4d5682398e77f40309235",
-                "sha256:1027c282dad077d0bae18be6794e6b6b8c91d58ed8a8d89a89d59693b9131db5",
-                "sha256:24982cc2533820871eba85ba648cd53d8623687ff11cbb805be4ff7b4c971aff",
-                "sha256:29872e92839765e546828bb7754a68c418d927cd064fd4708fab9fe9c8bb116b",
-                "sha256:43a55c2930bbc139570ac2452adf3d70cdbb3cfe5912c71cdce1c2c6bbd9c5d1",
-                "sha256:46c99d2de99945ec5cb54f23c8cd5689f6d7177305ebff350a58ce5f8de1669e",
-                "sha256:500d4957e52ddc3351cabf489e79c91c17f6e0899158447047588650b5e69183",
-                "sha256:535f6fc4d397c1563d08b88e485c3496cf5784e927af890fb3c3aac7f933ec66",
-                "sha256:62fe6c95e3ec8a7fad637b7f3d372c15ec1caa01ab47926cfdf7a75b40e0eac1",
-                "sha256:6dd73240d2af64df90aa7c4e7481e23825ea70af4b4922f8ede5b9e35f78a3b1",
-                "sha256:717ba8fe3ae9cc0006d7c451f0bb265ee07739daf76355d06366154ee68d221e",
-                "sha256:79855e1c5b8da654cf486b830bd42c06e8780cea587384cf6545b7d9ac013a0b",
-                "sha256:7c1699dfe0cf8ff607dbdcc1e9b9af1755371f92a68f706051cc8c37d447c905",
-                "sha256:88e5fcfb52ee7b911e8bb6d6aa2fd21fbecc674eadd44118a9cc3863f938e735",
-                "sha256:8defac2f2ccd6805ebf65f5eeb132adcf2ab57aa11fdf4c0dd5169a004710e7d",
-                "sha256:98c7086708b163d425c67c7a91bad6e466bb99d797aa64f965e9d25c12111a5e",
-                "sha256:9add70b36c5666a2ed02b43b335fe19002ee5235efd4b8a89bfcf9005bebac0d",
-                "sha256:9bf40443012702a1d2070043cb6291650a0841ece432556f784f004937f0f32c",
-                "sha256:ade5e387d2ad0d7ebf59146cc00c8044acbd863725f887353a10df825fc8ae21",
-                "sha256:b00c1de48212e4cc9603895652c5c410df699856a2853135b3967591e4beebc2",
-                "sha256:b1282f8c00509d99fef04d8ba936b156d419be841854fe901d8ae224c59f0be5",
-                "sha256:b2051432115498d3562c084a49bba65d97cf251f5a331c64a12ee7e04dacc51b",
-                "sha256:ba59edeaa2fc6114428f1637ffff42da1e311e29382d81b339c1817d37ec93c6",
-                "sha256:c8716a48d94b06bb3b2524c2b77e055fb313aeb4ea620c8dd03a105574ba704f",
-                "sha256:cd5df75523866410809ca100dc9681e301e3c27567cf498077e8551b6d20e42f",
-                "sha256:e249096428b3ae81b08327a63a485ad0878de3fb939049038579ac0ef61e17e7"
-            ],
-            "version": "==1.1.1"
-        },
-        "matplotlib": {
-            "hashes": [
-                "sha256:1febd22afe1489b13c6749ea059d392c03261b2950d1d45c17e3aed812080c93",
-                "sha256:31a30d03f39528c79f3a592857be62a08595dec4ac034978ecd0f814fa0eec2d",
-                "sha256:4442ce720907f67a79d45de9ada47be81ce17e6c2f448b3c64765af93f6829c9",
-                "sha256:796edbd1182cbffa7e1e7a97f1e141f875a8501ba8dd834269ae3cd45a8c976f",
-                "sha256:934e6243df7165aad097572abf5b6003c77c9b6c480c3c4de6f2ef1b5fdd4ec0",
-                "sha256:bab9d848dbf1517bc58d1f486772e99919b19efef5dd8596d4b26f9f5ee08b6b",
-                "sha256:c1fe1e6cdaa53f11f088b7470c2056c0df7d80ee4858dadf6cbe433fcba4323b",
-                "sha256:e5b8aeca9276a3a988caebe9f08366ed519fff98f77c6df5b64d7603d0e42e36",
-                "sha256:ec6bd0a6a58df3628ff269978f4a4b924a0d371ad8ce1f8e2b635b99e482877a"
-            ],
-            "index": "pypi",
-            "version": "==3.1.1"
-        },
-        "numpy": {
-            "hashes": [
-                "sha256:0b0dd8f47fb177d00fa6ef2d58783c4f41ad3126b139c91dd2f7c4b3fdf5e9a5",
-                "sha256:25ffe71f96878e1da7e014467e19e7db90ae7d4e12affbc73101bcf61785214e",
-                "sha256:26efd7f7d755e6ca966a5c0ac5a930a87dbbaab1c51716ac26a38f42ecc9bc4b",
-                "sha256:28b1180c758abf34a5c3fea76fcee66a87def1656724c42bb14a6f9717a5bdf7",
-                "sha256:2e418f0a59473dac424f888dd57e85f77502a593b207809211c76e5396ae4f5c",
-                "sha256:30c84e3a62cfcb9e3066f25226e131451312a044f1fe2040e69ce792cb7de418",
-                "sha256:4650d94bb9c947151737ee022b934b7d9a845a7c76e476f3e460f09a0c8c6f39",
-                "sha256:4dd830a11e8724c9c9379feed1d1be43113f8bcce55f47ea7186d3946769ce26",
-                "sha256:4f2a2b279efde194877aff1f76cf61c68e840db242a5c7169f1ff0fd59a2b1e2",
-                "sha256:62d22566b3e3428dfc9ec972014c38ed9a4db4f8969c78f5414012ccd80a149e",
-                "sha256:669795516d62f38845c7033679c648903200980d68935baaa17ac5c7ae03ae0c",
-                "sha256:75fcd60d682db3e1f8fbe2b8b0c6761937ad56d01c1dc73edf4ef2748d5b6bc4",
-                "sha256:9395b0a41e8b7e9a284e3be7060db9d14ad80273841c952c83a5afc241d2bd98",
-                "sha256:9e37c35fc4e9410093b04a77d11a34c64bf658565e30df7cbe882056088a91c1",
-                "sha256:a0678793096205a4d784bd99f32803ba8100f639cf3b932dc63b21621390ea7e",
-                "sha256:b46554ad4dafb2927f88de5a1d207398c5385edbb5c84d30b3ef187c4a3894d8",
-                "sha256:c867eeccd934920a800f65c6068acdd6b87e80d45cd8c8beefff783b23cdc462",
-                "sha256:dd0667f5be56fb1b570154c2c0516a528e02d50da121bbbb2cbb0b6f87f59bc2",
-                "sha256:de2b1c20494bdf47f0160bd88ed05f5e48ae5dc336b8de7cfade71abcc95c0b9",
-                "sha256:f1df7b2b7740dd777571c732f98adb5aad5450aee32772f1b39249c8a50386f6",
-                "sha256:ffca69e29079f7880c5392bf675eb8b4146479d976ae1924d01cd92b04cccbcc"
-            ],
-            "version": "==1.17.3"
-        },
-        "pyparsing": {
-            "hashes": [
-                "sha256:6f98a7b9397e206d78cc01df10131398f1c8b8510a2f4d97d9abd82e1aacdd80",
-                "sha256:d9338df12903bbf5d65a0e4e87c2161968b10d2e489652bb47001d82a9b028b4"
-            ],
-            "version": "==2.4.2"
-        },
-        "python-dateutil": {
-            "hashes": [
-                "sha256:7e6584c74aeed623791615e26efd690f29817a27c73085b78e4bad02493df2fb",
-                "sha256:c89805f6f4d64db21ed966fda138f8a5ed7a4fdbc1a8ee329ce1b74e3c74da9e"
-            ],
-            "version": "==2.8.0"
-        },
-        "six": {
-            "hashes": [
-                "sha256:3350809f0555b11f552448330d0b52d5f24c91a322ea4a15ef22629740f3761c",
-                "sha256:d16a0141ec1a18405cd4ce8b4613101da75da0e9a7aec5bdd4fa804d0e0eba73"
-            ],
-            "version": "==1.12.0"
-        },
-        "werkzeug": {
-            "hashes": [
-                "sha256:7280924747b5733b246fe23972186c6b348f9ae29724135a6dfc1e53cea433e7",
-                "sha256:e5f4a1f98b52b18a93da705a7458e55afb26f32bff83ff5d19189f92462d65c4"
-            ],
-            "version": "==0.16.0"
-        }
-    },
-    "develop": {}
-}
diff --git a/app.py b/app.py
index 24afe3c..f49ec93 100644
--- a/app.py
+++ b/app.py
@@ -1,64 +1,66 @@
-from __future__ import print_function
-from flask import Flask, render_template, make_response
-from flask import redirect, request, jsonify, url_for
-
 import io
 import os
 import uuid
+
+import numpy as np
+from flask import Flask, jsonify, make_response, render_template, request
 from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
 from matplotlib.figure import Figure
-import numpy as np
 
 app = Flask(__name__)
-app.secret_key = 's3cr3t'
+app.secret_key = "s3cr3t"
 app.debug = True
 app._static_folder = os.path.abspath("templates/static/")
 
-@app.route('/', methods=['GET'])
+
+@app.route("/", methods=["GET"])
 def index():
-    title = 'Create the input'
-    return render_template('layouts/index.html',
-                           title=title)
+    title = "Create the input"
+    return render_template("layouts/index.html", title=title)
+
 
-@app.route('/results/<uuid>', methods=['GET'])
+@app.route("/results/<uuid>", methods=["GET"])
 def results(uuid):
-    title = 'Result'
+    title = "Result"
     data = get_file_content(uuid)
-    return render_template('layouts/results.html',
-                           title=title,
-                           data=data)
+    return render_template("layouts/results.html", title=title, data=data)
 
-@app.route('/postmethod', methods = ['POST'])
+
+@app.route("/postmethod", methods=["POST"])
 def post_javascript_data():
-    jsdata = request.form['canvas_data']
+    jsdata = request.form["canvas_data"]
     unique_id = create_csv(jsdata)
-    params = { 'uuid' : unique_id }
+    params = {"uuid": unique_id}
     return jsonify(params)
 
-@app.route('/plot/<imgdata>')
+
+@app.route("/plot/<imgdata>")
 def plot(imgdata):
-    data = [float(i) for i in imgdata.strip('[]').split(',')]
+    data = [float(i) for i in imgdata.strip("[]").split(",")]
     data = np.reshape(data, (200, 200))
     fig = Figure()
     axis = fig.add_subplot(1, 1, 1)
-    axis.axis('off')
-    axis.imshow(data, interpolation='nearest')
+    axis.axis("off")
+    axis.imshow(data, interpolation="nearest")
     canvas = FigureCanvas(fig)
     output = io.BytesIO()
     canvas.print_png(output)
     response = make_response(output.getvalue())
-    response.mimetype = 'image/png'
+    response.mimetype = "image/png"
     return response
 
+
 def create_csv(text):
     unique_id = str(uuid.uuid4())
-    with open('images/'+unique_id+'.csv', 'a') as file:
-        file.write(text[1:-1]+"\n")
+    with open("images/" + unique_id + ".csv", "a") as file:
+        file.write(text[1:-1] + "\n")
     return unique_id
 
+
 def get_file_content(uuid):
-    with open('images/'+uuid+'.csv', 'r') as file:
+    with open("images/" + uuid + ".csv", "r") as file:
         return file.read()
 
-if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=5000)
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=5000)
diff --git a/templates/layouts/base.html b/templates/layouts/base.html
index 9dc3228..489a84d 100644
--- a/templates/layouts/base.html
+++ b/templates/layouts/base.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="/static/css/style.css">
     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
     <script src="/static/js/script.js"></script>
-    <title>{% block title %}{% endblock %} - Simple Flask app</title>
+    <title>{% block title %}{% endblock %} - Python & Javascript</title>
     {% endblock %}
   </head>
   <body>
@@ -23,7 +23,7 @@
           <div class="navbar-collapse collapse">
             <ul class="nav navbar-nav navbar-right">
               <li><a href="/">Home</a></li>
-              <li><a href="/results">Results</a></li>
+              <li><a href="/results/">Results</a></li>
             </ul>
           </div>
         </nav>
@@ -32,7 +32,7 @@
     {% block content %}{% endblock %}</div>
     <div id="footer" class="container text-center">
       {% block footer %}
-      &copy; Copyright 2017-2019 by Jitse-Jan.
+      &copy; Copyright 2017-2021 by Jitse-Jan.
       {% endblock %}
     </div>
     <footer>
diff --git a/templates/layouts/results.html b/templates/layouts/results.html
index 842fc04..fbdedc2 100644
--- a/templates/layouts/results.html
+++ b/templates/layouts/results.html
@@ -5,7 +5,7 @@
 {% endblock %}
 {% block content %}
 <div class="row text-center">
-  <h1>Results</h1>
+  <h1>Result</h1>
   <img src="{{ url_for('plot', imgdata = data) }}" alt="Image Placeholder" height="500">
 </div>
 {% endblock %}

From 3a7ab80f78ac991ce17fecad352ea03bb16955cd Mon Sep 17 00:00:00 2001
From: Jitse-Jan <code@jitsejan.com>
Date: Wed, 24 Feb 2021 02:17:47 +0000
Subject: [PATCH 2/4] Added file to separate result with one and all images

---
 templates/layouts/result.html | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 templates/layouts/result.html

diff --git a/templates/layouts/result.html b/templates/layouts/result.html
new file mode 100644
index 0000000..fbdedc2
--- /dev/null
+++ b/templates/layouts/result.html
@@ -0,0 +1,11 @@
+{% extends "layouts/base.html" %}
+{% block title %}{{title}}{% endblock %}
+{% block head %}
+  {{ super() }}
+{% endblock %}
+{% block content %}
+<div class="row text-center">
+  <h1>Result</h1>
+  <img src="{{ url_for('plot', imgdata = data) }}" alt="Image Placeholder" height="500">
+</div>
+{% endblock %}

From cd93efc3e3a6ccbf794e1a3fe7e0578baf3e52e4 Mon Sep 17 00:00:00 2001
From: Jitse-Jan <code@jitsejan.com>
Date: Wed, 24 Feb 2021 02:37:28 +0000
Subject: [PATCH 3/4] Refactored from uuid to unique_id

---
 README.md                      | 22 +++++++++++-----------
 app.py                         | 34 ++++++++++++++++++++++++----------
 templates/layouts/results.html |  7 ++++---
 templates/static/css/style.css |  4 ++++
 templates/static/js/script.js  |  3 ++-
 5 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/README.md b/README.md
index a3b90d3..2d5b706 100644
--- a/README.md
+++ b/README.md
@@ -33,14 +33,14 @@ In this project I am experimenting with sending data between Javascript and Pyth
 
 ### Important bits
 
-Send the `outputData` from Javascript to Python with a POST call to postmethod and use the form variable canvas_data. The POST call give a response from Python and the page is redirected to the results page with the given uuid.
+Send the `outputData` from Javascript to Python with a POST call to postmethod and use the form variable canvas_data. The POST call give a response from Python and the page is redirected to the results page with the given unique ID.
 
 ```javascript
 ...
 $.post( "/postmethod", {
   canvas_data: JSON.stringify(outputData)
 }, function(err, req, resp){
-  window.location.href = "/results/"+resp["responseJSON"]["uuid"];  
+  window.location.href = "/results/"+resp["responseJSON"]["unique_id"];  
 });
 ...
 ```
@@ -49,11 +49,11 @@ Retrieve the `canvas_data` from the POST request and write the content to a file
 
 ```python
 ...
-@app.route('/postmethod', methods = ['POST'])
+@app.route('/postmethod', methods=['POST'])
 def post_javascript_data():
     jsdata = request.form['canvas_data']
     unique_id = create_csv(jsdata)
-    params = { 'uuid' : unique_id }
+    params = {'unique_id': unique_id }
     return jsonify(params)
 ...
 ```
@@ -87,10 +87,10 @@ def index():
     return render_template('layouts/index.html',
                            title=title)
 
-@app.route('/results/<uuid>', methods=['GET'])
-def results(uuid):
+@app.route('/results/<unique_id>', methods=['GET'])
+def results(unique_id):
     title = 'Result'
-    data = get_file_content(uuid)
+    data = get_file_content(unique_id)
     return render_template('layouts/results.html',
                            title=title,
                            data=data)
@@ -99,7 +99,7 @@ def results(uuid):
 def post_javascript_data():
     jsdata = request.form['canvas_data']
     unique_id = create_csv(jsdata)
-    params = { 'uuid' : unique_id }
+    params = { 'unique_id' : unique_id }
     return jsonify(params)
 
 @app.route('/plot/<imgdata>')
@@ -123,8 +123,8 @@ def create_csv(text):
         file.write(text[1:-1]+"\n")
     return unique_id
 
-def get_file_content(uuid):
-    with open('images/'+uuid+'.csv', 'r') as file:
+def get_file_content(unique_id):
+    with open('images/'+unique_id+'.csv', 'r') as file:
         return file.read()
 
 if __name__ == '__main__':
@@ -199,7 +199,7 @@ $( document ).ready(function() {
     $.post( "/postmethod", {
       canvas_data: JSON.stringify(outputData)
     }, function(err, req, resp){
-      window.location.href = "/results/"+resp["responseJSON"]["uuid"];  
+      window.location.href = "/results/"+resp["responseJSON"]["unique_id"];  
     });
   }
   
diff --git a/app.py b/app.py
index f49ec93..8ecf689 100644
--- a/app.py
+++ b/app.py
@@ -1,3 +1,4 @@
+import glob
 import io
 import os
 import uuid
@@ -9,28 +10,37 @@
 
 app = Flask(__name__)
 app.secret_key = "s3cr3t"
-app.debug = True
+app.debug = False
 app._static_folder = os.path.abspath("templates/static/")
 
 
 @app.route("/", methods=["GET"])
 def index():
-    title = "Create the input"
+    title = "Create the input image"
     return render_template("layouts/index.html", title=title)
 
 
-@app.route("/results/<uuid>", methods=["GET"])
-def results(uuid):
+@app.route("/results/", methods=["GET"])
+def results():
+    title = "Results"
+    datalist = []
+    for csv in glob.iglob("images/*.csv"):
+        datalist.append(get_file_content(csv))
+    return render_template("layouts/results.html", title=title, datalist=datalist)
+
+
+@app.route("/results/<unique_id>", methods=["GET"])
+def result_for_uuid(unique_id):
     title = "Result"
-    data = get_file_content(uuid)
-    return render_template("layouts/results.html", title=title, data=data)
+    data = get_file_content(get_file_name(unique_id))
+    return render_template("layouts/result.html", title=title, data=data)
 
 
 @app.route("/postmethod", methods=["POST"])
 def post_javascript_data():
     jsdata = request.form["canvas_data"]
     unique_id = create_csv(jsdata)
-    params = {"uuid": unique_id}
+    params = {"unique_id": unique_id}
     return jsonify(params)
 
 
@@ -52,13 +62,17 @@ def plot(imgdata):
 
 def create_csv(text):
     unique_id = str(uuid.uuid4())
-    with open("images/" + unique_id + ".csv", "a") as file:
+    with open(get_file_name(unique_id), "a") as file:
         file.write(text[1:-1] + "\n")
     return unique_id
 
 
-def get_file_content(uuid):
-    with open("images/" + uuid + ".csv", "r") as file:
+def get_file_name(unique_id):
+    return f"images/{unique_id}.csv"
+
+
+def get_file_content(filename):
+    with open(filename, "r") as file:
         return file.read()
 
 
diff --git a/templates/layouts/results.html b/templates/layouts/results.html
index fbdedc2..f0d8f47 100644
--- a/templates/layouts/results.html
+++ b/templates/layouts/results.html
@@ -4,8 +4,9 @@
   {{ super() }}
 {% endblock %}
 {% block content %}
-<div class="row text-center">
-  <h1>Result</h1>
-  <img src="{{ url_for('plot', imgdata = data) }}" alt="Image Placeholder" height="500">
+<div class="row"></div>
+{% for data in datalist %}
+  <img class="results-img" src="{{ url_for('plot', imgdata = data) }}" alt="Image Placeholder">
+{% endfor %}
 </div>
 {% endblock %}
diff --git a/templates/static/css/style.css b/templates/static/css/style.css
index a0e0de1..19785c7 100644
--- a/templates/static/css/style.css
+++ b/templates/static/css/style.css
@@ -1,6 +1,10 @@
 .btn{
     background-color: rgb(102,153,255);
 }
+img.results-img{
+    float: left;
+    height: 100px;
+}
 #inputCanvas{
     border: 2px solid rgb(102,153,255);
 }
diff --git a/templates/static/js/script.js b/templates/static/js/script.js
index 88a0fd5..15ee4c7 100644
--- a/templates/static/js/script.js
+++ b/templates/static/js/script.js
@@ -61,7 +61,8 @@ $( document ).ready(function() {
     $.post( "/postmethod", {
       canvas_data: JSON.stringify(outputData)
     }, function(err, req, resp){
-      window.location.href = "/results/"+resp["responseJSON"]["uuid"];  
+      window.location.href = "/results/"+resp["responseJSON"]["unique_id"];  
+      console.log(resp);
     });
   }
 

From 78c4de7c3db1534b11935814eb30de1cb5b09536 Mon Sep 17 00:00:00 2001
From: Jitse-Jan <code@jitsejan.com>
Date: Wed, 24 Feb 2021 02:52:24 +0000
Subject: [PATCH 4/4] Updated the README

---
 README.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/README.md b/README.md
index 2d5b706..8b53432 100644
--- a/README.md
+++ b/README.md
@@ -19,8 +19,6 @@ Open http://127.0.0.1:5000/, draw a character, click on Send and watch your term
 
 <img src="images/out.png" alt="image-20191206022811472" style="zoom:33%;" />
 
-
-
 ### Introduction
 
 In this project I am experimenting with sending data between Javascript and Python using the web framework Flask. Additionally I will use matplotlib to generate a dynamic graph based on the provided user input data.