web-UI refactoring

Added wpa_supplicant.conf generator
refactored web-ui to support dynamic additions of modules
added support for module height by ratio (or percentage)
Changed format of settings file slightly to support info section height

server/app/routes.py

@@ -22,7 +22,7 @@ def wifi_setup():
 
 
 # Inkycal-setup
-@app.route('/inkycal_config', methods=['GET', 'POST'])
+@app.route('/inkycal-config-v2-0-0', methods=['GET', 'POST'])
 
 def inkycal_config():
     form = LoginForm()
@@ -38,16 +38,20 @@ def inkycal_config():
         language = request.form.get('language')
         info_section = True if (request.form.get('info_section') == "on") else False
 
+        info_height = int(request.form.get('info_section_height')) if info_section == True else None
+
         # template for basic settings
         template = {
             "model": model,
             "update_interval": update_interval,
             "orientation": int(request.form.get('orientation')),
             "info_section": info_section,
+            "info_section_height": info_height,
             "calibration_hours": [calibration_hour_1, calibration_hour_2, calibration_hour_3],
             "modules": [],
             }
 
+
         # common module config (shared by all modules)
         padding_x = int(request.form.get('padding_x'))
         padding_y = int(request.form.get('padding_y'))
@@ -56,30 +60,42 @@ def inkycal_config():
 
         common_settings = {"padding_x":padding_x, "padding_y":padding_y, "fontsize":fontsize, "language":language}
 
-        # display size
-        display_size = Display.get_display_size(model)
-        width, height = int(display_size[0]), int(display_size[1])
-        
-
         # loop over the modules, add their config data based on user selection, merge the common_settings into each module's config
-        for i in range(1,4):
-            conf = {}
-            module = 'module'+str(i)
-            if request.form.get(module) != "None":
+        no_of_modules = int(request.form.get("module_counter"))
 
+        # display size ---- Since Inkycal works in vertical mode (only), the width and height have to be flipped here
+        display_size = Display.get_display_size(model) # returns width,height but flipping these for vertical mode
+        height, width = int(display_size[0]), int(display_size[1])
+
+        # If info section was active, substract the height of the info section from the display height
+        if info_section == True:
+            height = height-info_height
+
+        # get all module heights, calculate single part
+        module_sizes = [int(request.form.get("module"+str(i)+"_height")) for i in range(1, no_of_modules+1)]
+
+        if sum(module_sizes) != 0:
+            single_part = height / sum(module_sizes)
+
+        for i in range(1, no_of_modules+1):
+            conf = {}
+            module = 'selected_module'+str(i)
+
+            if request.form.get(module) != "None":
                 conf = {"position":i , "name": request.form.get(module), "config":{}}
 
                 for modules in settings:
                     if modules['name'] == request.form.get(module):
 
-                        conf['config']['size'] = (width, int(height*int(request.form.get(module+'_height')) /100))
+                        module_height = int( request.form.get("module"+str(i)+"_height") )
+                        conf['config']['size'] = (width, int(single_part*module_height) )
 
                         # Add required fields to the config of the module in question
                         # True/False choices are converted to string for some reason, leading to incorrect values
                         # Convert "True" to True, "False" to False and empty input to None
                         if 'requires' in modules:
                             for key in modules['requires']:
-                                val = request.form.get(module+'_'+key).replace(" ", "")
+                                val = request.form.get('module'+str(i)+'_'+key).replace(" ", "")
                                 if val == "True":
                                     val = True
                                 elif val == "False":
@@ -95,7 +111,7 @@ def inkycal_config():
                         if 'optional' in modules:
                             for key in modules['optional']:
                                 if request.form.get(module+'_'+key):
-                                    val = request.form.get(module+'_'+key).replace(" ", "")
+                                    val = request.form.get('module'+str(i)+'_'+key).replace(" ", "")
                                     if val == "True":
                                         val = True
                                     elif val == "False":
@@ -124,4 +140,6 @@ def inkycal_config():
         except Exception as e:
             flash(str(e))
 
-    return render_template('inkycal_config.html', title='Inkycal-Setup', conf=settings, form=form)
+
+    return render_template('inkycal-config-v2-0-0.html', title='Inkycal-Setup', conf=settings, form=form)
+

server/app/templates/base.html

@@ -31,7 +31,7 @@
                         </li>
 
                         <li class="nav-item">
-                            <a class="nav-link" href="/inkycal_config">Setup</a>
+                            <a class="nav-link" href="/inkycal-config-v2-0-0">Setup</a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link" href="/setup_wifi">WiFi-setup</a>

server/app/templates/inkycal-config-v2-0-0.html

@@ -0,0 +1,463 @@
+{% extends "base.html" %}
+
+<!-- Main container -->
+{% block content %}
+
+<!-- Wrap everything in a container-->
+<div class="container">
+
+<!-- heading -->
+<h3>Inkycal-Setup v.2.0.0</h3>
+
+<!-- project link-->
+<div class="alert alert-light" role="alert">
+  <a href="https://github.com/aceisace/Inky-Calendar">For Inkycal Project of ace innovation laboratory - aceinnolab.com - by aceisace</a><br>
+</div>
+
+<!-- Inkycal logo -->
+<img class="img-fluid" src="https://github.com/aceisace/Inky-Calendar/blob/development/Gallery/logo.png?raw=true" alt="Inkycal Logo">
+
+<br><br>
+
+<!-- Instructions -->
+<div class="alert alert-primary" role="alert">
+    <h4 class="alert-heading">Instructions</h4>
+    Insert your personal details and preferences and click on 'Generate'.<br>
+    Copy the downloaded file to the Raspberry Pi.<br>
+    The location does not matter, however, you need to know the path to this file.<br>
+    <hr>
+    <p class="mb-0">If no value is filled in for any of the row, the default value will be used.</p>
+</div>
+
+<!-- Main form -->
+<form class="needs-validation" method="post" novalidate>
+    {{ form.hidden_tag() }}
+
+    <h4> General settings </h4>
+
+    <!-- group E-Paper settings in a single row-->
+    <div class="form-row">
+
+    <!-- model selection start-->
+    <div class="col">
+        <label for="model">Model</label>
+        <select class="form-control" id="model" name="model">
+
+            <option value="9_in_7">                     9.7" ePaper                         </option>
+
+            <option value="epd_7_in_5_v3_colour">       7.5" v3 (880x528px) colour          </option>
+            <option value="epd_7_in_5_v3" selected>     7.5" v3 (880x528px) black-white     </option>
+
+            <option value="epd_7_in_5_v2_colour">       7.5" v2 (800x400px) colour          </option>
+            <option value="epd_7_in_5_v2">              7.5" v2 (800x400px) black-white     </option>
+
+            <option value="epd_7_in_5_colour">          7.5" v1 (600x384px) colour          </option>
+            <option value="epd_7_in_5">                 7.5" v1 (600x384px) black-white     </option>
+
+            <option value="epd_5_in_83_colour">         5.83" colour                        </option>
+            <option value="epd_5_in_83">                5.83" black-white                   </option>
+
+            <option value="epd_4_in_2_colour">          4.2" colour                         </option>
+            <option value="epd_4_in_2">                 4.2" black-white                    </option>
+        </select>
+    </div>
+
+
+    <!-- Update interval start-->
+    <div class="col">
+        <label>Update interval</label><br>
+        <select class="form-control" id="update_interval" name="update_interval">
+            <option value=60 checked>           every 60 minutes                        </option>
+            <option value=30>                   every 30 minutes                        </option>
+            <option value=20>                   every 20 minutes                        </option>
+            <option value=15>                   every 15 minutes                        </option>
+            <option value=10>                   every 10 minutes                        </option>
+        </select>
+    </div>
+
+    <!-- Update interval end-->
+
+
+    <!-- Orientation start -->
+    <div class="col">
+        <label>Orientation</label><br>
+
+        <select class="form-control" id="orientation" name="orientation">
+            <option value=0 checked>            Flex cable left                         </option>
+            <option value=180>                  Flex cable right                        </option>
+        </select>
+
+    </div>
+
+    </div><br> <!-- row end -->
+
+    <!-- Calibration start -->
+    <div class="form-group">
+        <label>When should the display be calibrated? (Leave blank if you're unsure)</label>
+
+        <!-- Info about calibration (collapsible info)-->
+        <details>
+
+            <summary>Info about calibration</summary>
+            <blockquote class="blockquote">
+                Calibration is a way to retain nice colours on ePaper displays. It works by flushing colours a few times on the entire display.
+                Please choose 3 hours in 24-hour format (0-24) to specify at which hours calibration should be executed.
+                Please also note that it takes around 10-20 minutes to calibrate, so best to choose hours when you won't be looking at Inkycal.
+            </blockquote>
+
+        </details>
+
+
+        <!-- Calibration hours input fields-->
+        <div class="form-row">
+            <div class="col">
+                <input type="number" class="form-control" name="calibration_hour_1" value=0 min=0 max=24>
+            </div>
+
+            <div class="col">
+                <input type="number" class="form-control" name="calibration_hour_2" value=12 min=0 max=24>
+                </div>
+
+            <div class="col">
+                <input type="number" class="form-control" name="calibration_hour_3" value=18 min=0 max=24>
+            </div>
+        </div>
+        <!-- Calibration hours input end-->
+    </div>
+    <!-- Calibration end-->
+
+    <!-- Info section -->
+    <div class="form-row">
+        <div class="col">
+            <div class="form-check">
+                <input type="checkbox" class="form-check-input" id="info_section" name="info_section">
+                <label class="form-check-label" for="info_section">Show time of last update?</label>
+            </div>
+        </div>
+
+        <div class="col" id="info_height">
+            <div class="form-check">
+                <label class="form-check-label" for="info_section_height">Height in pixels</label>
+                <input type="number" class="form-control" id="info_section_height" name="info_section_height" value=30 min=0 max=100>
+            </div>
+        </div>
+        
+    </div><br>
+
+    <h4> Common module settings </h4>
+    <div class="form-row">
+        <!-- language selection- shared by all modules -->
+        <div class="col">
+            <label for="language">Language</label>
+            <select class="form-control" id="language" name="language">
+
+                <option value="en" selected>    English                     </option>
+                <option value="de">             German                      </option>
+                <option value="ru">             Russian                     </option>
+                <option value="it">             Italian                     </option>
+                <option value="es">             Spanish                     </option>
+                <option value="fr">             French                      </option>
+                <option value="el">             Greek                       </option>
+                <option value="sv">             Swedish                     </option>
+                <option value="nl">             Dutch                       </option>
+                <option value="pl">             Polish                      </option>
+                <option value="ua">             Ukrainian                   </option>
+                <option value="nb">             Norwegian                   </option>
+                <option value="vi">             Vietnamese                  </option>
+                <option value="zh-tw">          Chinese-Taiwanese           </option>
+                <option value="zh">             Chinese                     </option>
+                <option value="ja">             Japanese                    </option>
+                <option value="ko">             Korean                      </option>
+
+            </select>
+        </div>
+
+
+        <!--fontsize selection - shared by all modules-->
+        <div class="col">
+            <label for="fontsize">Fontsize</label>
+            <input type="number" class="form-control" name="fontsize" placeholder=12 value=12 min=0 max=30>
+        </div>
+
+        <!--padding-top-bottom - shared by all modules-->
+        <div class="col">
+            <label for="padding_y">Padding top/bottom (in pixels) </label>
+            <input type="number" class="form-control" name="padding_y" placeholder=10 value=10 min=0 max=30>
+        </div>
+
+        <!--padding-left-right - shared by all modules-->
+        <div class="col">
+            <label for="padding_x">Padding right/left (in pixels) </label>
+            <input type="number" class="form-control" name="padding_x" placeholder=10 value=10 min=0 max=30>
+        </div>
+
+    </div><br>
+
+
+    <!--Create templates for modules with their respective config for later use-->
+    {% for module in conf %}
+    <template id={{ module["name"] }} >
+        <div class="card"><div class="card-header">{{ module["name_str"] }} config</div>
+            <div class="card-body">
+
+                {% if module['requires'] != {} %}
+                    <h5 class="card-title">Required config</h5>
+                {% endif %}
+
+                {% for key in module["requires"] %}
+                    {% if 'options' in module["requires"][key] %}
+                        <label for={{key}}>{{module["requires"][key]["label"]}} *</label>
+
+                        <select class="form-control" id={{key}} name={{ module["name"] }}_{{key}} required>
+                        {% for option in module["requires"][key]['options'] %}
+                            <option value={{option}}> {{option}} </option>
+                        {% endfor %}
+                        </select>
+
+                        <div class="invalid-feedback">Sorry, but this field should not be empty</div>
+                        <div class="valid-feedback"> Looks good! </div>
+                    {% endif %}
+
+                    {% if not 'options' in module["requires"][key] %}
+                        <label for={{key}}>{{module["requires"][key]["label"]}} *</label>
+                        <input type="text" class="form-control" id={{key}} name={{ module["name"] }}_{{key}} required>
+                        <div class="invalid-feedback">Sorry, but this field should not be empty</div>
+                        <div class="valid-feedback"> Looks good! </div>
+                    {% endif %}
+                    <br>
+                {% endfor %}
+
+
+                {% if module['optional'] != {} %}
+                    <h5 class="card-title">Optional config</h5>
+                {% endif %}
+
+                {% for key in module["optional"] %}
+
+                    {% if 'options' in module["optional"][key] %}
+                        <label for={{key}}>{{module["optional"][key]["label"]}}</label>
+
+                        <select class="form-control" id={{key}} name={{ module["name"] }}_{{key}}>
+                        {% for option in module["optional"][key]['options'] %}
+                            <option value={{option}}> {{option}} </option>
+                        {% endfor %}
+                        </select>
+
+                        <div class="invalid-feedback">Sorry, but this field should not be empty</div>
+                        <div class="valid-feedback"> Looks good! </div>
+                    {% endif %}
+
+                    {% if not 'options' in module["optional"][key] %}
+                        <label for={{key}}>{{module["optional"][key]["label"]}}</label>
+                        <input type="text" class="form-control" id={{key}} name={{ module["name"] }}_{{key}}>
+                    {% endif %}
+                {% endfor %}
+
+            </div>
+        </div>
+    </template>
+    {% endfor %}
+
+    <h4> Modules config </h4>
+
+    <div class="alert alert-primary" role="alert">
+        Fields marked with an asterisk(*) are required <br>
+        <hr>
+        Module height is calculated by ratio (parts) e.g. <br>
+        module 1 = 20 parts, module 2 = 30 parts -> total of 50 parts <br>
+        If your display has a height of 400 px, then each part is: 400/50 = 8px <br>
+        Module 1 with 30 parts will have 20 * 8px = 160 px <br>
+        Module 2 with 50 parts will have 30 * 8px = 240 px <br>
+    </div>
+
+    <!-- Basic template to choose module -->
+    <template id='module_template'>
+
+        <div id="module_id">
+            <div class="form-row">
+                <div class="col-md-8">
+                <label for="module" id="module_label">Module</label>
+                    <select class="form-control" id="selected_module" name="selected_module">
+                        <option value="None" checked>Empty</option>
+                        {% for module in conf%}
+                            <option value={{ module['name'] }} > {{module['name_str'] }} </option>
+                        {% endfor %}
+                    </select>
+                </div>
+
+                <div class="col-md-4">
+                    <label for="module_height">Module height (by ratio)</label>
+                    <input type="number" class="form-control" id="module_height" name="module_height" value=20 placeholder=20 min=0 max=1200>
+                </div>
+
+            </div><br>
+            <div id="module_conf"></div>
+        </div>
+
+    </template>
+
+    <div class="module_section" id="modules"><!-- modules are added in this div --></div>
+
+
+    <br>
+    <div class="form-group">
+        <input class="btn btn-success" type="button" id="add_module" value="Add module">
+        <input class="btn btn-warning" type="button" id="remove_module" value="Remove last module">
+    </div>
+
+    <input type="number" class="d-none" id="module_counter" name="module_counter" value=0 min=0 max=10 readonly>
+
+<!--Show config of selected modules-->
+<script>
+$(document).ready(function(){
+
+var num_modules = 0;
+
+function add_module() {
+
+    num_modules += 1;
+    var new_name = 'module'+num_modules;
+    console.log('added module:',new_name);
+
+    var content = document.getElementById("module_template").content;
+    var targetContainer = document.getElementById("modules");
+    targetContainer.appendChild(document.importNode(content, true));
+
+    $('#module_id').attr("id", new_name);
+
+    $('#selected_module').attr("name", $('#selected_module').attr("name")+num_modules);
+    $('#selected_module').attr("id", $('#selected_module').attr("id")+num_modules);
+
+    $('#module_label').text("Module "+num_modules);
+    $('#module_label').attr("id", new_name+'_label');
+
+    $('#module_height').attr("name", new_name+'_height');
+    $('#module_height').attr("id", new_name+'_height');
+
+    $('#module_conf').attr("name", new_name+'_conf');
+    $('#module_conf').attr("id", new_name+'_conf');
+
+    $('#module_counter').attr('value', num_modules);
+}
+
+function remove_module() {
+    var new_name = 'module'+num_modules;
+    //console.log('removing last module');
+    $('#module'+num_modules).remove();
+    num_modules -= 1;
+    $('#module_counter').attr('value', num_modules);
+}
+
+$('#add_module').click(function(){
+    if (num_modules >= 10) {
+        console.log('you have exceeded the max number of modules!');
+        return false
+    } else {
+    add_module();
+    }
+})
+
+$('#remove_module').click(function(){
+    if (num_modules <= 0) {
+        console.log('Cannot remove any more modules!');
+        return false
+    } else {
+    console.log('removed module'+num_modules);
+    remove_module();
+    }
+})
+
+$("#info_height").hide();
+
+$("#info_section").click(function(){
+    if($(this).prop("checked") == true){
+        $('#info_height').show();
+    } else {
+        $('#info_height').hide();
+    }
+});
+
+function insert_config(module_no, module_name) {
+    console.log('module', module_no, ' set to ', module_name);
+
+    remove_config(module_no);
+
+    var module_template = document.querySelector("#"+module_name);
+    var clone = document.importNode(module_template.content, true);
+    $("#module"+module_no+"_conf").append(clone);
+
+    // With the selected module name known, we can replace the name tag of that module's config for unique id's
+    // This allows having multiple modules running with different configs for each instance
+
+    $("#module"+module_no+"_conf input").each(function(i) {
+        $(this).attr('id', "module"+module_no+"_"+$(this).attr('id'));
+        $(this).attr('name', $(this).attr('name').replace(module_name, "module"+module_no));
+    });
+
+    $("#module"+module_no+"_conf select").each(function(i) {
+        $(this).attr('id', "module"+module_no+"_"+$(this).attr('id'));
+        $(this).attr('name', $(this).attr('name').replace(module_name, "module"+module_no));
+    });
+
+}
+
+function remove_config(module_number) {
+    $("#module"+module_number+"_conf").empty();
+}
+
+$('#add_module, #remove_module').on('click',function() { //every time the add/remove module button is clicked
+
+    $("[id^=selected_module]").on('change',function() {
+
+        if ($(this).find("option:selected").val() == "None") { //check if parent is a certain name
+
+            var module_index = $(this).attr('id').replace('selected_module', "");
+            var is_module = $.isNumeric(module_index);
+            //console.log("module_index", module_index, "is_module", is_module);
+            if (is_module) { remove_config(module_index); }
+
+        } else {
+            console.log("found module");
+            var module_name = $(this).find("option:selected").val();
+            //console.log($(this).attr('id'));
+            var module_index = $(this).attr('id').replace('selected_module', "");
+            var is_module = $.isNumeric(module_index);
+            //console.log("name of module:", module_name, "index_of_module:", module_index, "is this a module: ", is_module);
+            if (document.getElementById(module_name) && is_module) {
+                insert_config(module_index, module_name);
+            }
+        }
+    });
+
+    });
+});
+</script>
+
+
+<script> // validation
+(function() {
+  'use strict';
+  window.addEventListener('load', function() {
+    var forms = document.getElementsByClassName('needs-validation');
+    var validation = Array.prototype.filter.call(forms, function(form) {
+      form.addEventListener('submit', function(event) {
+        if (form.checkValidity() === false) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+        form.classList.add('was-validated');
+      }, false);
+    });
+  }, false);
+})();
+</script>
+
+
+<div class="form-group"><br>
+    <button class="btn btn-primary btn-lg btn-block" type="submit">Generate settings file</button>
+</div>
+
+</form>
+
+</div>
+{% endblock %}

server/app/templates/wifi.html

@@ -7,7 +7,394 @@
 <div class="container">
 
 <!-- heading -->
-<h3>Raspberry Pi Wifi setup (coming soon)</h3>
+<h3>Raspberry Pi Wifi setup</h3>
 
+<!-- Instructions -->
+<div class="alert alert-primary" role="alert">
+    <h4 class="alert-heading">Instructions</h4>
+    Insert your Wi-Fi network's details in the form below, then click on generate [wpa_supplicant.conf]<br>
+    If not done already, flash Raspberry Pi OS on a micro SD card and open the /boot folder on your computer<br>
+    Copy the wpa_supplicant.conf file in this folder, eject the microSD card, insert it in the Raspberry Pi and boot.<br>
+    Your Raspberry Pi should now be connected to the network you have entered on this page.<br>
+    <hr>
+    <p class="mb-0">Don't worry, none of your details are shared with anyone, this page does not send any data to anywhere.</p>
 </div>
+
+
+<form novalidate>
+<div class="form-group">
+    <label for="country">Country</label>
+    <select class="form-control" id="country">
+        <option value="AF">Afghanistan</option>
+        <option value="AX">Aland Islands</option>
+        <option value="AL">Albania</option>
+        <option value="DZ">Algeria</option>
+        <option value="AS">American Samoa</option>
+        <option value="AD">Andorra</option>
+        <option value="AO">Angola</option>
+        <option value="AI">Anguilla</option>
+        <option value="AQ">Antarctica</option>
+        <option value="AG">Antigua and Barbuda</option>
+        <option value="AR">Argentina</option>
+        <option value="AM">Armenia</option>
+        <option value="AW">Aruba</option>
+        <option value="AU">Australia</option>
+        <option value="AT">Austria</option>
+        <option value="AZ">Azerbaijan</option>
+
+        <option value="BS">Bahamas</option>
+        <option value="BH">Bahrain</option>
+        <option value="BD">Bangladesh</option>
+        <option value="BB">Barbados</option>
+        <option value="BY">Belarus</option>
+        <option value="BE">Belgium</option>
+        <option value="BZ">Belize</option>
+        <option value="BJ">Benin</option>
+        <option value="BM">Bermuda</option>
+        <option value="BT">Bhutan</option>
+        <option value="BO">Bolivia</option>
+        <option value="BA">Bosnia and Herzegovina</option>
+        <option value="BW">Botswana</option>
+        <option value="BV">Bouvet Island</option>
+        <option value="BR">Brazil</option>
+        <option value="IO">British Indian Ocean Territory</option>
+        <option value="VG">British Virgin Islands</option>
+        <option value="BN">Brunei Darussalam</option>
+        <option value="BG">Bulgaria</option>
+        <option value="BF">Burkina Faso</option>
+        <option value="BI">Burundi</option>
+
+        <option value="KH">Cambodia</option>
+        <option value="CM">Cameroon</option>
+        <option value="CA">Canada</option>
+        <option value="CV">Cape Verde</option>
+        <option value="KY">Cayman Islands</option>
+        <option value="CF">Central African Republic</option>
+        <option value="TD">Chad</option>
+        <option value="CL">Chile</option>
+        <option value="CN">China</option>
+        <option value="CX">Christmas Island</option>
+        <option value="CC">Cocos (Keeling) Islands</option>
+        <option value="CO">Colombia</option>
+        <option value="KM">Comoros</option>
+        <option value="CG">Congo(Brazzaville)</option>
+        <option value="CD">Congo, (Kinshasa)</option>
+        <option value="CK">Cook Islands</option>
+        <option value="CR">Costa Rica</option>
+        <option value="CI">Cote d\Ivoire</option>
+        <option value="HR">Croatia</option>
+        <option value="CU">Cuba</option>
+        <option value="CY">Cyprus</option>
+        <option value="CZ">Czech Republic</option>
+
+        <option value="DK">Denmark</option>
+        <option value="DJ">Djibouti</option>
+        <option value="DM">Dominica</option>
+        <option value="DO">Dominican Republic</option>
+
+        <option value="EC">Ecuador</option>
+        <option value="EG">Egypt</option>
+        <option value="SV">El Salvador</option>
+        <option value="GQ">Equatorial Guinea</option>
+        <option value="ER">Eritrea</option>
+        <option value="EE">Estonia</option>
+        <option value="ET">Ethiopia</option>
+
+        <option value="FK">Falkland Islands (Malvinas)</option>
+        <option value="FO">Faroe Islands</option>
+        <option value="FJ">Fiji</option>
+        <option value="FI">Finland</option>
+        <option value="FR">France</option>
+        <option value="GF">French Guiana</option>
+        <option value="PF">French Polynesia</option>
+        <option value="TF">French Southern Territories</option>
+
+        <option value="GA">Gabon</option>
+        <option value="GM">Gambia</option>
+        <option value="GE">Georgia</option>
+        <option value="DE" selected>Germany</option>
+        <option value="GH">Ghana</option>
+        <option value="GI">Gibraltar</option>
+        <option value="GR">Greece</option>
+        <option value="GL">Greenland</option>
+        <option value="GD">Grenada</option>
+        <option value="GP">Guadeloupe</option>
+        <option value="GU">Guam</option>
+        <option value="GT">Guatemala</option>
+        <option value="GG">Guernsey</option>
+        <option value="GN">Guinea</option>
+        <option value="GW">Guinea-Bissau</option>
+        <option value="GY">Guyana</option>
+
+        <option value="HT">Haiti</option>
+        <option value="HM">Heard and Mcdonald Islands</option>
+        <option value="VA">Holy See(Vatican City State)</option>
+        <option value="HN">Honduras</option>
+        <option value="HK">Hong Kong, SAR China</option>
+        <option value="HU">Hungary</option>
+
+        <option value="IS">Iceland</option>
+        <option value="IN">India</option>
+        <option value="ID">Indonesia</option>
+        <option value="IR">Iran, Islamic Republic of</option>
+        <option value="IQ">Iraq</option>
+        <option value="IE">Ireland</option>
+        <option value="IM">Isle of Man</option>
+        <option value="IL">Israel</option>
+        <option value="IT">Italy</option>
+
+        <option value="JM">Jamaica</option>
+        <option value="JP">Japan</option>
+        <option value="JE">Jersey</option>
+        <option value="JO">Jordan</option>
+
+        <option value="KZ">Kazakhstan</option>
+        <option value="KE">Kenya</option>
+        <option value="KI">Kiribati</option>
+        <option value="KP">Korea(North)</option>
+        <option value="KR">Korea(South)</option>
+        <option value="KW">Kuwait</option>
+        <option value="KG">Kyrgyzstan</option>
+
+        <option value="LA">Lao PDR</option>
+        <option value="LV">Latvia</option>
+        <option value="LB">Lebanon</option>
+        <option value="LS">Lesotho</option>
+        <option value="LR">Liberia</option>
+        <option value="LY">Libya</option>
+        <option value="LI">Liechtenstein</option>
+        <option value="LT">Lithuania</option>
+        <option value="LU">Luxembourg</option>
+
+        <option value="MO">Macao, SAR China</option>
+        <option value="MK">Macedonia, Republic of</option>
+        <option value="MG">Madagascar</option>
+        <option value="MW">Malawi</option>
+        <option value="MY">Malaysia</option>
+        <option value="MV">Maldives</option>
+        <option value="ML">Mali</option>
+        <option value="MT">Malta</option>
+        <option value="MH">Marshall Islands</option>
+        <option value="MQ">Martinique</option>
+        <option value="MR">Mauritania</option>
+        <option value="MU">Mauritius</option>
+        <option value="YT">Mayotte</option>
+        <option value="MX">Mexico</option>
+        <option value="FM">Micronesia, Federated States of</option>
+        <option value="MD">Moldova</option>
+        <option value="MC">Monaco</option>
+        <option value="MN">Mongolia</option>
+        <option value="ME">Montenegro</option>
+        <option value="MS">Montserrat</option>
+        <option value="MA">Morocco</option>
+        <option value="MZ">Mozambique</option>
+        <option value="MM">Myanmar</option>
+
+        <option value="NA">Namibia</option>
+        <option value="NR">Nauru</option>
+        <option value="NP">Nepal</option>
+        <option value="NL">Netherlands</option>
+        <option value="AN">Netherlands Antilles</option>
+        <option value="NC">New Caledonia</option>
+        <option value="NZ">New Zealand</option>
+        <option value="NI">Nicaragua</option>
+        <option value="NE">Niger</option>
+        <option value="NG">Nigeria</option>
+        <option value="NU">Niue</option>
+        <option value="NF">Norfolk Island</option>
+        <option value="MP">Northern Mariana Islands</option>
+        <option value="NO">Norway</option>
+
+        <option value="OM">Oman</option>
+
+        <option value="PK">Pakistan</option>
+        <option value="PW">Palau</option>
+        <option value="PS">Palestinian Territory</option>
+        <option value="PA">Panama</option>
+        <option value="PG">Papua New Guinea</option>
+        <option value="PY">Paraguay</option>
+        <option value="PE">Peru</option>
+        <option value="PH">Philippines</option>
+        <option value="PN">Pitcairn</option>
+        <option value="PL">Poland</option>
+        <option value="PT">Portugal</option>
+        <option value="PR">Puerto Rico</option>
+
+        <option value="QA">Qatar</option>
+
+        <option value="RE">Réunion</option>
+        <option value="RO">Romania</option>
+        <option value="RU">Russian Federation</option>
+        <option value="RW">Rwanda</option>
+
+        <option value="SH">Saint Helena</option>
+        <option value="KN">Saint Kitts and Nevis</option>
+        <option value="LC">Saint Lucia</option>
+        <option value="PM">Saint Pierre and Miquelon</option>
+        <option value="VC">Saint Vincent and Grenadines</option>
+        <option value="BL">Saint-Barthélemy</option>
+        <option value="MF">Saint-Martin (French part)</option>
+        <option value="WS">Samoa</option>
+        <option value="SM">San Marino</option>
+        <option value="ST">Sao Tome and Principe</option>
+        <option value="SA">Saudi Arabia</option>
+        <option value="SN">Senegal</option>
+        <option value="RS">Serbia</option>
+        <option value="SC">Seychelles</option>
+        <option value="SL">Sierra Leone</option>
+        <option value="SG">Singapore</option>
+        <option value="SK">Slovakia</option>
+        <option value="SI">Slovenia</option>
+        <option value="SB">Solomon Islands</option>
+        <option value="SO">Somalia</option>
+        <option value="ZA">South Africa</option>
+        <option value="GS">South Georgia and the South Sandwich Islands</option>
+        <option value="SS">South Sudan</option>
+        <option value="ES">Spain</option>
+        <option value="LK">Sri Lanka</option>
+        <option value="SD">Sudan</option>
+        <option value="SR">Suriname</option>
+        <option value="SJ">Svalbard and Jan Mayen Islands</option>
+        <option value="SZ">Swaziland</option>
+        <option value="SE">Sweden</option>
+        <option value="CH">Switzerland</option>
+        <option value="SY">Syrian Arab Republic (Syria)</option>
+
+        <option value="TW">Taiwan, Republic of China</option>
+        <option value="TJ">Tajikistan</option>
+        <option value="TZ">Tanzania, United Republic of</option>
+        <option value="TH">Thailand</option>
+        <option value="TL">Timor-Leste</option>
+        <option value="TG">Togo</option>
+        <option value="TK">Tokelau</option>
+        <option value="TO">Tonga</option>
+        <option value="TT">Trinidad and Tobago</option>
+        <option value="TN">Tunisia</option>
+        <option value="TR">Turkey</option>
+        <option value="TM">Turkmenistan</option>
+        <option value="TC">Turks and Caicos Islands</option>
+        <option value="TV">Tuvalu</option>
+
+        <option value="UG">Uganda</option>
+        <option value="UA">Ukraine</option>
+        <option value="AE">United Arab Emirates</option>
+        <option value="GB">United Kingdom</option>
+        <option value="US">United States of America</option>
+        <option value="UY">Uruguay</option>
+        <option value="UM">US Minor Outlying Islands</option>
+        <option value="UZ">Uzbekistan</option>
+
+        <option value="VU">Vanuatu</option>
+        <option value="VE">Venezuela(Bolivarian Republic)</option>
+        <option value="VN">Viet Nam</option>
+        <option value="VI">Virgin Islands, US</option>
+
+        <option value="WF">Wallis and Futuna Islands</option>
+        <option value="EH">Western Sahara</option>
+
+        <option value="YE">Yemen</option>
+
+        <option value="ZM">Zambia</option>
+        <option value="ZW">Zimbabwe</option>
+    </select>
+</div>
+
+
+<div class="form-group">
+    <label for="security_type">Security Type</label>
+    <select class="form-control" id="security_type">
+
+        <option value="wpa_pass" selected>WPA/WPA2 (most common option)</option>
+        <option value="wpa">Open Network (no password)</option>
+        <option value="hidden_pass">Hidden SSID with password</option>
+        <option value="hidden">Hidden SSID (no password)</option>
+
+    </select>
+</div>
+
+<div class="form-group">
+    <label for="ssid">SSID (Name of network)</label>
+    <input class="form-control" type="text" id="ssid">
+</div>
+
+<div class="form-group">
+    <label for="password">password</label>
+    <input class="form-control" type="text" id="password">
+</div>
+
+<div class="form-group">
+    <div class="card">
+      <div class="card-body">
+        <h5 class="card-title">Preview</h5>
+        <p class="card-text" id="wpa"></p>
+      </div>
+    </div>
+</div>
+
+
+<div class="form-group">
+    <button type="button" class="btn btn-primary" onclick="getHTML('wpa_supplicant.conf', 'wpa', 'text/plain')">Download wpa_supplicant.conf</button>
+</div>
+
+</form>
+</div>
+
+<script>
+$(document).ready(function(){
+
+    $("#security_type").change(function(){
+        var security_type = $("#security_type").val();
+        //console.log('security_type', security_type);
+
+    if (security_type=="wpa" || security_type=="hidden"){
+        $("#password").replaceWith('<input class="form-control" type="text" id="password" readonly>')
+    } else { $("#password").replaceWith('<input class="form-control" type="text" id="password">') }
+    });
+
+    $('form').on('input', function(){
+        var country = $("#country").val();
+        var security_type = $("#security_type").val();
+        var ssid =  ( $("#ssid").val() != null ) ?  $("#ssid").val().trim() : "";
+        var password = ( $("#password").val() != null ) ? $("#password").val().trim() : "";
+
+        var wpa = [
+        "country="+country,
+        "update_config=1",
+        "ctrl_interface=/var/run/wpa_supplicant",
+        "network={",
+        '    ssid="'+ssid+'"',
+        ];
+
+        if (security_type=="wpa"){
+            wpa.push("    key_mgmt=NONE");
+        } else if (security_type=="wpa_pass"){
+            wpa.push('    psk="'+password+'"',"    key_mgmt=WPA-PSK")
+        } else if (security_type=="hidden"){
+            wpa.push("    key_mgmt=NONE","    scan_ssid=1")
+        } else if (security_type=="hidden_pass"){
+            wpa.push('    psk="'+password+'"', "    scan_ssid=1")
+        }
+        wpa.push("}");
+        //console.log(wpa.join('\n'));
+
+        document.getElementById("wpa").innerHTML = wpa.join("<br />").replaceAll('    ', '&nbsp;&nbsp;&nbsp;&nbsp;');
+    });
+
+    }).change();
+</script>
+
+<script>
+function getHTML(filename, id, mimeType) {
+var elHtml = document.getElementById(id).innerText;
+if (navigator.msSaveBlob) {
+  navigator.msSaveBlob(new Blob([elHtml], { type: mimeType + ';charset=utf-8;' }), filename);
+} else {
+    var link = document.createElement('a');
+    mimeType = mimeType || 'text/plain';
+    link.setAttribute('download', filename);
+    link.setAttribute('href', 'data:' + mimeType  +  ';charset=utf-8,' + encodeURIComponent(elHtml));
+    link.click();
+}}
+</script>
+
 {% endblock %}