add an openweathermap widget to the webpage

more of a gimmick ...

the api key is read from the ini file passed via SEEPARKINI
(and not via flask's config mechanism as this expects a python file)

fun fact: the api key will appear in the javaescript in the page anyway

diff --git a/web/README b/web/README
index 7458e9fc52e47cc3f5e367ad3c18390001c84f8d..19ec5859a3f059dfa5c6c2ffeb22386751a9d6d1 100644 (file)
--- a/web/README
+++ b/web/README
@@ -1,7 +1,7 @@
 Needed package: python3-flask
 
 Start with:
-FLASK_APP=seepark_web.py FLASK_DEBUG=1 flask run
+FLASK_APP=seepark_web.py FLASK_DEBUG=1 SEEPARKINI=~/seewasser.ini flask run
 
 Go to:
 http://127.0.0.1:5000/

diff --git a/web/seepark_web.py b/web/seepark_web.py
index fa08f12480bf96d5a6ace7283fdf1b579efd1b7c..526317407ed5382524d7c8198f62803b5aa12a70 100644 (file)
--- a/web/seepark_web.py
+++ b/web/seepark_web.py
@@ -1,8 +1,14 @@
 from flask import Flask, render_template, jsonify
 from random import uniform
 import time
+import configparser
+import os
 app = Flask(__name__)
 
+config = configparser.ConfigParser()
+config.read(os.environ['SEEPARKINI'])
+apikey = config.get('openweathermap', 'apikey');
+
 @app.route('/data/', defaults={'timespan': 1})
 @app.route("/data/<int:timespan>", methods=['GET'])
 def data(timespan):
@@ -36,5 +42,5 @@ def data(timespan):
 
 @app.route("/")
 def index():
-    return render_template('seepark_web.html')
+    return render_template('seepark_web.html', apikey=apikey)
 

diff --git a/web/static/seepark_web.css b/web/static/seepark_web.css
index 5cf1aadaffaf060caa37fd38d87cf631e95d13bf..6ddd30ab5198fb3eace372412793cb7a78632921 100644 (file)
--- a/web/static/seepark_web.css
+++ b/web/static/seepark_web.css
@@ -21,8 +21,12 @@ button {
     border: 1px solid;
 }
 
-#buttonbar {
+#buttonbar, #openweathermap-widget-15 {
     margin: 0 auto;
     text-align: center;
     padding-top: 1em;
 }
+
+#openweathermap-widget-15 {
+    width: 300px;
+}

diff --git a/web/templates/seepark_web.html b/web/templates/seepark_web.html
index 746e9a5ce5cd8e134e4233d1a78b5537bd827fb3..4d136e3e6dc2bcf538c61ead8c59f8454b7ea328 100644 (file)
--- a/web/templates/seepark_web.html
+++ b/web/templates/seepark_web.html
@@ -25,6 +25,28 @@
                        <button onclick="loaddays(365)">Jahr</button>
                </div>
 
+               <!-- openweathermap widget -->
+               <div id="openweathermap-widget-15"></div>
+               <script>
+               window.myWidgetParam ? window.myWidgetParam : window.myWidgetParam = [];
+               window.myWidgetParam.push({
+                       id: 15,
+                       cityid: '3319578',
+                       appid: '{{ apikey }}',
+                       units: 'metric',
+                       containerid: 'openweathermap-widget-15',
+                       lang: 'de',
+               });
+               (function() {
+                       var script = document.createElement('script');
+                       script.async = true;
+                       script.charset = "utf-8";
+                       script.src = "//openweathermap.org/themes/openweathermap/assets/vendor/owm/js/weather-widget-generator.js";
+                       var s = document.getElementsByTagName('script')[0];
+                       s.parentNode.insertBefore(script, s);
+               })();
+               </script>
+
                <!-- Load own javascript code -->
                <script src="{{url_for('static', filename='seepark_web.js')}}"></script>