pincode

app.py

@@ -2,76 +2,94 @@ from flask import Flask,request,render_template,jsonify,redirect, url_for, sessi
 import json
 import os
 import requests
-from wifi import Cell,Scheme
-from wireless import Wireless
+import subprocess
+from wifi_utils import *
 from flask_bootstrap import Bootstrap
 
+
+# wifi device name 
+WIFI_DEVICE='wlan0'
+
 app = Flask(__name__)
 bootstrap = Bootstrap(app)
 recent_dir = os.path.abspath(os.path.dirname(__file__))
-wifi_list = []
-wifi_name_list = []
-def wifi_scan():
-    wifi_list.clear()
-    wifi_name_list.clear()
-    wifi_name_list.append("TEST WIFI")
-    wireless = Wireless()
-    cells = Cell.all('wlan0')
-    for cell in cells:
-        wifi_list.append(cell)
-        wifi_name_list.append(cell.ssid)
-
-def print_wifi():
-    for i in wifi_name_list:
-        print(i)
 
-def getWifiCell(ssid):
-    for i in wifi_list:
-        if i.ssid == ssid:
-            return i
-    return None
+wifi_list = []
 
 def is_encrypted(cell):
-    if cell is not None:
-        return i.encrypted
+    if(cell.security == '--'):
+        return False
     else:
+        return True
+def getWifiCell(ssid):
+    global wifi_list
+    for cell in wifi_list:
+        if cell.ssid == ssid:
+            print(cell.ssid)
+            return cell
     return None
 
-def connect_wifi(ssid, password):
-    ret = wireless.connect(ssid,password)
-    if ret == False:
-        print("Error : Cannot Connect to Wifi {}".format(ssid))
-    else:
-        print("Success")
+def print_wifi():
+    for cell in wifi_list:
+        print(cell.ssid)
 
 
 @app.route('/')
-def main():
-    return render_template('demo.html')
+def index():
+    ret = restart_wifi()
+    if( ret == 1 ):
+        return redirect(url_for('wifi_scan'))
+    elif( ret == 0 ):
+        return redirect(url_for('pin_setup'))
+    return "OK"
+
 
 @app.route('/initial')
 def initial():
-    return 'HTTP OK'
+    return render_template('t.html')
 
 
 @app.route('/wifi_scan')
-def wifi_config():
-    wifi_scan()
-    return render_template('wifi.html', data=wifi_name_list)
+def wifi_scan():
+    global wifi_list
+    wifi_list = scan_wifi()
+    return render_template('wifi.html', data=wifi_list)
 
-@app.route('/wifi_pass/<string:ssid>', methods=['GET'])
+@app.route('/wifi_select/<string:ssid>', methods=['GET'])
+@app.route('/wifi_select/', methods=['GET'])
 def wifi_pass(ssid):
+    global wifi_list
+    delete_connection(ssid)
     print("Ready for Connecting to {}".format(ssid)) 
-    print_wifi()
+    if wifi_list == None:
+        wifi_list = scan_wifi()
+    for i in wifi_list:
+        print(i.ssid)
     cell = getWifiCell(ssid)
-    print(cell.ssid)
     if(cell is not None):
-        if(is_encrypted(cell) == True):
-            return render_template('index.html')
+        return render_template('index.html', data=ssid,isEnc=is_encrypted(cell))
     else:
-            return render_template('index.html', data=False)
+        return redirect(url_for('index'))
+
+
+
+@app.route('/wifi_conn', methods=["POST"])
+def wifi_conn():    
+    ssid = request.form.get('ssid')
+    passwd = request.form.get('password')
+    print("{} : {}".format(ssid, passwd))
+    ret = wifi_connect(ssid,passwd)
+    if ret is True:
+        return "Connection Success",200
     else:
-        return "{}".format(cell.ssid)
+        return "Connection Failed",500
+    return "Not Found",404
+
+@app.route('/pin_setup', methods=['GET'])
+def pin_setup():
+    arr = [1,2,3,4,5,6]
+    return render_template('pincode.html',ary_input=arr)
+
 
 if __name__ == '__main__':
     app.run(host='0.0.0.0',     port=8080, debug=True)

static/css/bootstrap-pincode-input.css

+@font-face {
+  font-family: "pincode-input-mask";
+  src: url(data:font/woff;charset:utf-8;base64,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) format("woff");
+}
+
+
+.pincode-input-text-masked {
+  font-family: pincode-input-mask;
+}
+
+
+.pincode-input-container {
+	display:inline-flex;
+	width:100%;
+}
+.pincode-input-container input.first {
+	border-top-right-radius:0px;
+	border-bottom-right-radius:0px;
+}
+.pincode-input-container input.last {
+	border-top-left-radius:0px;
+	border-bottom-left-radius:0px;
+	border-left-width:0px;
+}
+.pincode-input-container input.mid {
+	border-radius:0px;
+	border-left-width:0px;
+}
+.pincode-input-text, .form-control.pincode-input-text {
+	text-align:center;
+	flex-grow:1;
+}
+.pincode-input-error{
+	clear:both;
+}
+
+.pincode-input-container.touch .touchwrapper{
+	position:relative;
+	height:100%;
+	flex-grow:1;
+}
+.pincode-input-container.touch .touchwrapper .pincode-input-text{
+    display: block;
+    background-color:transparent;
+    background:transparent;
+	text-align:initial;
+	
+}
+.pincode-input-container.touch .touchwrapper .pincode-input-text.noletterspacing{
+	letter-spacing: 0 !important;
+}
+
+
+
+.pincode-input-container.touch .touch-flex{
+	display:flex;
+	align-items: stretch;
+    padding: 0;
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    z-index:-1;
+}
+
+.pincode-input-container.touch .touch-flex-cell{
+	flex-grow:1;
+	border:1px solid #ced4da;
+}
+

static/css/main.css

@@ -6,7 +6,9 @@
     width: auto;
     height: 50px;
 }
-
+input:focus{
+    color:blue;
+}
 td {
    cursor: pointer; 
 }

static/js/bootstrap-pincode-input.js

+/* =========================================================
+ * bootstrap-pincode-input.js
+ *
+ * =========================================================
+ * Created by Ferry Kranenburg
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================= */
+
+;(function ($, window, document, undefined) {
+
+	"use strict";
+
+
+	// Create the defaults once
+	var pluginName = "pincodeInput";
+	var defaults = {
+		placeholders: undefined,						// seperate with a " "(space) to set an placeholder for each input box
+		inputs: 4,									    // 4 input boxes = code of 4 digits long
+		hidedigits: true,								// hide digits
+		pattern: '[0-9]*',
+		inputtype: 'number',
+		inputmode: 'numeric',
+		inputclass: '',									// could be changed to form-control-lg or any other class
+		letterspacingfix: 2.8,							// this value could be changed when the digits are not completely visible in touch device mode		
+		keydown: function (e) {
+		},
+		change: function (input, value, inputnumber) {		// callback on every input on change (keyup event)
+			//input = the input textbox DOM element
+			//value = the value entered by user (or removed)
+			//inputnumber = the position of the input box (in touch mode we only have 1 big input box, so always 1 is returned here)
+		},
+		complete: function (value, e, errorElement) {	// callback when all inputs are filled in (keyup event)
+			//value = the entered code
+			//e = last keyup event
+			//errorElement = error span next to to this, fill with html e.g. : $(errorElement).html("Code not correct");
+		}
+
+	};
+
+	// The actual plugin constructor
+	function Plugin(element, options) {
+		this.element = element;
+		this.settings = $.extend({}, defaults, options);
+		this._defaults = defaults;
+		this._name = pluginName;
+		this.init();
+	}
+
+	// Avoid Plugin.prototype conflicts
+	$.extend(Plugin.prototype, {
+		init: function () {
+			this.buildInputBoxes();
+
+		},
+		updateOriginalInput: function () {
+			var newValue = "";
+			$('.pincode-input-text', this._container).each(function (index, value) {
+				newValue += $(value).val().toString();
+			});
+			$(this.element).val(newValue);
+		},
+		check: function () {
+			var isComplete = true;
+			var code = "";
+			$('.pincode-input-text', this._container).each(function (index, value) {
+				code += $(value).val().toString();
+				if (!$(value).val()) {
+					isComplete = false;
+				}
+			});
+
+			if (this._isTouchDevice()) {
+				// check if single input has it all
+				if (code.length == this.settings.inputs) {
+					return true;
+				}
+			} else {
+				return isComplete;
+			}
+
+
+		},
+		buildInputBoxes: function () {
+			this._container = $('<div />').addClass('pincode-input-container');
+
+
+			var currentValue = [];
+			var placeholders = [];
+			var touchplaceholders = "";  // in touch mode we have just 1 big input box, and there is only 1 placeholder in this case
+
+			if (this.settings.placeholders) {
+				placeholders = this.settings.placeholders.split(" ");
+				touchplaceholders = this.settings.placeholders.replace(/ /g, "");
+			}
+
+			// If we do not hide digits, we need to include the current value of the input box
+			// This will only work if the current value is not longer than the number of input boxes.
+			if (this.settings.hidedigits == false && $(this.element).val() != "") {
+				currentValue = $(this.element).val().split("");
+			}
+
+			// make sure this is the first password field here
+			if (this.settings.hidedigits) {
+				this._pwcontainer = $('<div />').css("display", "none").appendTo(this._container);
+				this._pwfield = $('<input>').attr({
+                    'type': this.settings.inputtype,
+					'pattern': this.settings.pattern,
+					'inputmode': this.settings.inputmode,
+					'id': 'preventautofill',
+					'autocomplete': 'off'
+				}).addClass('pincode-input-text-masked').appendTo(this._pwcontainer);
+			}
+
+			if (this._isTouchDevice()) {
+				// set main class
+				$(this._container).addClass("touch");
+
+				// For touch devices we build a html table directly under the pincode textbox. The textbox will become transparent
+				// This table is used for styling only, it will display how many 'digits' the user should fill in.
+				// With CSS letter-spacing we try to put every digit visually insize each table cell.
+
+				var wrapper = $('<div />').addClass('touchwrapper touch' + this.settings.inputs).appendTo(this._container);
+				var input = $('<input>').attr({
+					'type': this.settings.inputtype,
+					'pattern': this.settings.pattern,
+					'inputmode': this.settings.inputmode,
+					'placeholder': touchplaceholders,
+					'maxlength': this.settings.inputs,
+					'autocomplete': 'off'
+				}).addClass(this.settings.inputclass + ' form-control pincode-input-text').appendTo(wrapper);
+
+				// calculate letter-spacing in Javascript since this isn't possible in CSS
+				var inputs = this.settings.inputs;
+				var letterspacingfix = this.settings.letterspacingfix;
+				setTimeout(function(){
+					var width = $(input).innerWidth() - ((inputs + letterspacingfix) * inputs);
+					var spacing = (width / inputs) ;
+					$(input).css({"letter-spacing":spacing + "px"});
+				},0);
+
+				
+
+				var touchtable = $('<div>').addClass('touch-flex').appendTo(wrapper);
+				// create touch background elements (for showing user how many digits must be entered)
+				for (var i = 0; i < this.settings.inputs; i++) {
+					if (i == (this.settings.inputs - 1)) {
+						$('<div/>').addClass('touch-flex-cell').addClass('last').appendTo(touchtable);
+					} else {
+						$('<div/>').addClass('touch-flex-cell').appendTo(touchtable);
+					}
+				}
+				if (this.settings.hidedigits) {
+					// hide digits
+					input.addClass('pincode-input-text-masked');
+				} else {
+					// show digits, also include default value
+					input.val($(this.element).val());
+                }
+
+				// add events
+				this._addEventsToInput(input, 1);
+
+			} else {
+				// for desktop mode we build one input for each digit
+				for (var i = 0; i < this.settings.inputs; i++) {
+
+					var input = $('<input>').attr({
+						'type': 'text',
+						'maxlength': "1",
+						'autocomplete': 'off',
+						'placeholder': (placeholders[i] ? placeholders[i] : undefined)
+					}).addClass(this.settings.inputclass + ' form-control pincode-input-text').appendTo(this._container);
+					if (this.settings.hidedigits) {
+						// hide digits
+						input.addClass('pincode-input-text-masked');
+					} else {
+						// show digits, also include default value
+						input.val(currentValue[i]);
+					}
+
+					if (i == 0) {
+						input.addClass('first');
+					} else if (i == (this.settings.inputs - 1)) {
+						input.addClass('last');
+					} else {
+						input.addClass('mid');
+					}
+
+					// add events
+					this._addEventsToInput(input, (i + 1));
+				}
+			}
+			
+			// hide original element and place this before it
+			$(this.element).css("display", "none");
+			this._container.insertBefore(this.element);
+
+			// error box
+			this._error = $('<div />').addClass('text-danger pincode-input-error').insertBefore(this.element);
+
+		},
+		enable: function () {
+			$('.pincode-input-text', this._container).each(function (index, value) {
+				$(value).prop('disabled', false);
+			});
+		},
+		disable: function () {
+			$('.pincode-input-text', this._container).each(function (index, value) {
+				$(value).prop('disabled', true);
+			});
+		},
+		focus: function () {
+			$('.pincode-input-text', this._container).first().select().focus();
+		},
+		clear: function () {
+			$('.pincode-input-text', this._container).each(function (index, value) {
+				$(value).val("");
+			});
+			this.updateOriginalInput();
+		},
+		_isTouchDevice: function () {
+			// I know, sniffing is a really bad idea, but it works 99% of the times
+			if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+				return true;
+			}
+		},
+		_addEventsToInput: function (input, inputnumber) {
+
+			input.on('focus', function (e) {
+				this.select();  // automatically select current value
+			});
+
+			input.on('keydown', $.proxy(function (e) {
+				if (this._pwfield) {
+					// Because we need to prevent password saving by browser
+					// remove the value here and change the type!
+					// we do this every time the user types
+					$(this._pwfield).attr({'type': 'text'});
+					$(this._pwfield).val("");
+				}
+
+				// prevent more input for touch device (we can't limit it)
+				if (this._isTouchDevice()) {
+					if (e.keyCode == 8 || e.keyCode == 46) {
+						// do nothing on backspace and delete
+					} else if ($(this.element).val().length == this.settings.inputs) {
+						e.preventDefault();
+						e.stopPropagation();
+					}
+
+				} else {
+					// in desktop mode, check if an number was entered
+
+					if (!(e.keyCode == 8                            // backspace key
+						|| e.keyCode == 9							// tab key
+						|| e.keyCode == 46                          // delete key
+						|| (e.keyCode >= 48 && e.keyCode <= 57)     // numbers on keyboard
+						|| (e.keyCode >= 96 && e.keyCode <= 105)    // number on keypad
+						|| ((this.settings.inputtype != 'number' && this.settings.inputtype != 'tel') && e.keyCode >= 65 && e.keyCode <= 90))   // alphabet
+					) {
+						e.preventDefault();     // Prevent character input
+						e.stopPropagation();
+					}
+
+				}
+
+				this.settings.keydown(e);
+			}, this));
+
+			input.on('keyup', $.proxy(function (e) {
+				// after every keystroke we check if all inputs have a value, if yes we call complete callback
+				if (!this._isTouchDevice()) {
+					// on backspace or delete go to previous input box
+					if (e.keyCode == 8 || e.keyCode == 46) {
+						// goto previous
+						$(e.currentTarget).prev().select();
+						$(e.currentTarget).prev().focus();
+					} else if ($(e.currentTarget).val() != "") {
+						$(e.currentTarget).next().select();
+						$(e.currentTarget).next().focus();
+					}
+				}
+
+				// update original input box
+				this.updateOriginalInput();
+
+				// oncomplete check
+				if (this.check()) {
+					this.settings.complete($(this.element).val(), e, this._error);
+				}
+
+				// onchange event for each input
+				if (this.settings.change) {
+					this.settings.change(e.currentTarget, $(e.currentTarget).val(), inputnumber);
+				}
+
+
+				// prevent more input for touch device (we can't limit it)
+				if (this._isTouchDevice()) {
+					if (e.keyCode == 8 || e.keyCode == 46) {
+						// do nothing on backspace and delete
+					} else if ($(this.element).val().length == this.settings.inputs) {
+						$(e.currentTarget).addClass("noletterspacing");
+						
+						$(e.currentTarget).select();
+						$(e.currentTarget).blur();		
+						
+						$(e.currentTarget).removeClass("noletterspacing");
+										
+					}
+				}
+
+			}, this));
+		}
+
+
+	});
+
+	// A really lightweight plugin wrapper around the constructor,
+	// preventing against multiple instantiations
+	$.fn[pluginName] = function (options) {
+		return this.each(function () {
+			if (!$.data(this, "plugin_" + pluginName)) {
+				$.data(this, "plugin_" + pluginName, new Plugin(this, options));
+			}
+		});
+	};
+
+})(jQuery, window, document);

static/js/pincode.js

+import ('/static/js/Keyboard.js')
+let Keyboard = window.SimpleKeyboard.default;
+
+let myKeyboard = new Keyboard({
+  onChange: input => onChange(input),
+  onKeyPress: button => onKeyPress(button),
+  theme: "hg-theme-default hg-layout-default myTheme",
+  layout: {
+    default: [
+      "1 2 3",
+      "4 5 6",
+      "7 8 9",
+      "{shift} 0 {bksp}"
+    ],
+  }
+});
+
+let ary_input = [];
+let index = 1
+function onChange(input) {
+  console.log("Input changed", ary_input);
+}
+
+function onKeyPress(button) {
+  console.log("index : ", index);
+  n = "slot-"+index
+  document.querySelector('input[id="'+n+'"]').value = '1';
+  index = index + 1;
+  ary_input.push(button)
+  document.querySelector('input[id="'+n+'"]').focus();
+  console.log("Button pressed", button);
+
+}

templates/index.html

@@ -31,20 +31,24 @@
                 document.getElementById("keyboard").style.visibility = 'hidden';
             }
         });
+        
     </script>
 {% endblock head %}
 
 {% block content%}
 <body class="bg-light m-5">
+    <p style="visibility:hidden" id="ssid">{{data}}</p>
     <h2 class="text-muted text-center m-5">Wifi  Password</h2>    
     <center>
+    {% if isEnc is sameas true%}
     <div class="row align-items-center m-5 col-8">
         <div class="col-10 inline ">
             <input type="password" class="form-control input" id="wifi-password"
                 placeholder="Tap on the virtual keyboard to start">
         </div>
+        {% endif%}
         <div class="col-2 inline">
-            <button type="submit" class="btn btn-primary" id="login" style="height:50px">Login</button>
+            <button type="submit" class="btn btn-primary" id="conn" style="height:50px">Connect</button>
         </div>
     </div>
     <div class="row align-items-center">
@@ -55,7 +59,28 @@
     </center>
     <script src="{{url_for('static', filename='js/keyboard.min.js')}}"></script>
     <script src="{{url_for('static', filename='js/index.js')}}"></script>
+    <script>
+        
+        $('#conn').click(function(){
+            var x = document.getElementById('wifi-password');
+            pwd = x.value;
+            data="ssid="+$('#ssid').text()+"&password="+pwd;
+            console.log(data);
+            $.ajax({
+                type:"POST",
+                url:"http://localhost:8080/wifi_conn",
+                data : data,
+                success: function(data, status){
+                    alert(data);
+                    window.location.href="http://localhost:8080/pin_setup";
+                },
+                error: function(jqXhr, status, errorMessage){
+                    alert(errorMessage);
+                } 
                 
+            });
+        });
+    </script>
     <!-- keyboard js-->
 </body>
 {% block footer %}

templates/pincode.html

+{% extends "bootstrap/base.html" %}
+
+
+{% block head %}
+{{super()}}
+
+
+
+    <!-- bootstrap -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
+        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
+        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+        crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
+        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+        crossorigin="anonymous"></script>
+
+    <!-- keyboard css-->
+    <link rel="stylesheet" href="{{url_for('static',filename='css/keyboard.css')}}">
+    <link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}">
+    <script>
+        $(document).ready(function () {
+            document.getElementById("keyboard").style.visibility = 'visible';
+        });
+        
+    </script>
+{% endblock head %}
+
+{% block content%}
+<body class="bg-light m-5">
+    <h2 class="text-muted text-center m-5">PinCode Setup</h2>    
+    <center>
+    <div class="col align-items-center m-5 col-8">
+        <div class="col-10 inline ">
+            {% for i in range(6) %}
+            <input type="password" class="form-control input" id="slot-{{loop.index}}" maxlength="1">
+            {% endfor %}
+        </div>
+        <div class="col-2 inline">
+            <button type="submit" class="btn btn-primary" id="conn" style="height:50px">Connect</button>
+        </div>
+    </div>
+    <div class="row align-items-center">
+        <div class="col m-5 inline">
+            <div class="simple-keyboard" id="keyboard" style="visibility: hidden"></div>
+        </div>
+    </div>
+    </center>
+    <script src="{{url_for('static', filename='js/keyboard.min.js')}}"></script>
+    <script src="{{url_for('static', filename='js/pincode.js')}}"></script>
+    <script>
+        
+    </script>
+    <!-- keyboard js-->
+</body>
+{% block footer %}
+<footer class="footer" >
+   <div class="footer navbar-fixed-bottom text-center">
+        <p class="text-muted">&copy; NTUST PRLAB</p>
+    </div>
+</footer>
+{% endblock footer %}
+{% endblock %}
+
+
+
+
+

templates/t.html

+<!DOCTYPE HTML>
+
+<html>
+    <head>
+        <title>Bootstrap Pincode Input examples</title>
+        <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <link href="/static/css/bootstrap-pincode-input.css" rel="stylesheet">
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-2.1.4.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
+	<script type="text/javascript" src="/static/js/bootstrap-pincode-input.js"></script>
+    <script>
+        $(document).ready(function() {
+            $('#pincode-input1').pincodeInput({hidedigits:false,complete:function(value, e, errorElement){
+            	
+            	$("#pincode-callback").html("This is the 'complete' callback firing. Current value: " + value);
+            	
+            	// check the code
+            	if(value!="1234"){
+            		$(errorElement).html("The code is not correct. Should be '1234'");
+            	}else{
+            		alert('code is correct!');
+            	}
+            	
+            }});
+            $('#pincode-input5').pincodeInput({hidedigits:true,inputs:4,placeholders:"0 0 0 1",change: function(input,value,inputnumber){
+            	$("#pincode-callback2").html("onchange from input number "+inputnumber+", current value: " + value);
+            }});
+            
+            $('#pincode-input4').pincodeInput({hidedigits:false,inputs:4});
+            $('#pincode-input2').pincodeInput({hidedigits:false,inputs:6,complete:function(value, e, errorElement){
+            	$("#pincode-callback").html("Complete callback from 6-digit test: Current value: " + value);
+            	
+            	$(errorElement).html("I'm sorry, but the code not correct");
+            }});
+            $('#pincode-input6').pincodeInput({hidedigits:false,inputs:4});
+            $('#pincode-input7').pincodeInput({hidedigits:false,inputs:4,inputclass:'form-control-lg'});
+            
+        });
+    </script>
+    </head>
+    <body>
+
+    <div class="container">
+        <h1>Bootstrap Pincode Input examples</h1>
+        
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-md-12">
+                	<br/>
+                	<br/>
+                	<button onclick="javascript:location.href = 'https://github.com/fkranenburg/bootstrap-pincode-input'" class="btn-primary"> Download on Github</button>
+                	<br/>
+                	<br/>
+                	<br/>
+                	<p>
+                		This simple jQuery widget is created by Ferry Kranenburg.<br/>
+                		You need a input type text and Bootstrap.<br/>
+                		After entering a pincode the value will be updated in the original textbox.<br/>
+                		<br/>
+                		It supports a callback after all digits are entered and backspace is allowed.
+
+                	</p>
+             		<br/>
+                    <br/>
+                    <h4>Basic Example (normal input box)</h4>
+                    <br/>
+                    <br/>
+                    <div style="width:200px">
+                        <input type="text" id="pincode-input1"  >
+                    </div>
+            		<br/>
+                    <br/>
+                    <b>Methods:</b><br/>
+                    <a href="#" onclick="javascript:$('#pincode-input1').pincodeInput().data('plugin_pincodeInput').focus()">focus</a><br/>
+                    <a href="#" onclick="javascript:$('#pincode-input1').pincodeInput().data('plugin_pincodeInput').clear()">clear</a><br/>
+                    <br/>
+                    <br/>
+                    <h4>4 hidden digits example with placeholders and onchange for every input</h4>
+                    <br/>
+                    <div style="width:300px">
+                        <input type="text" id="pincode-input5"  >
+                    </div>
+                    <span id="pincode-callback2"></span>
+                    <br/>
+                    <br/>
+                    <h4>6 visible digits example</h4>
+                    <br/>
+                    <div style="width:200px">
+                        <input type="text" id="pincode-input2"  >
+                    </div>
+                    
+                    complete callback:
+                    <span id="pincode-callback"></span>
+                    <br/>
+                    <br/>
+                    <h4>4 visible digits example</h4>
+                    <br/>
+                    <div style="width:200px">
+                        <input type="text" id="pincode-input4"  >
+                    </div>
+                    <br/>
+                    <br/>
+  
+                    <br/>
+                    <h4>with default value (3631)</h4>
+                    <br/>
+                    <div style="width:200px">
+                        <input type="text" id="pincode-input6" value="3631" >
+                    </div>
+                    <br/>
+                    <h4>large inputboxes (using form-control-lg class)</h4>
+                    <br/>
+                    <div style="width:400px">
+                        <input type="text" id="pincode-input7" value="" >
+                    </div>
+                    <br/>
+                    <br/>
+                </div>
+            </div>
+        </div>
+
+
+
+
+        </div>
+
+    </body>
+</html>

templates/wifi.html

@@ -15,13 +15,15 @@
 		<tr>
             <th scope="col" class="text-center">Index</th>
 		    <th scope="col" class="text-center">SSID</th>
+		    <th scope="col" class="text-center">SECURITY</th>
 		</tr>
 		</thead>
 		<tbody>
-            {% for ssid in data %}
-            <tr onclick="getSSID(this,'{{ssid}}')">
+            {% for cell in data %}
+            <tr onclick="getSSID(this,'{{cell.ssid}}')">
                 <td class="text-center">{{loop.index}}</td>
-                <td class="text-center">{{ssid}}</td>
+                <td class="text-center">{{cell.ssid}}</td>
+                <td class="text-center">{{cell.security}}</td>
 			</tr>
             {% endfor %}
 		</tbody>
@@ -63,10 +65,7 @@
             console.log(ssid);
         };
         $('#button').click(function(){
-            
-            console.log(_ssid);
-            prev_item.style.backgroundColor = '#FFFFFF';
-            prev_item = null;
+            window.location.href= "http://localhost:8080/wifi_select/"+_ssid;
         });
     </script>
 

wifi_utils.py

+import os
+import subprocess
+
+WIFI_DEVICE='wlan0'
+
+class Wifi_cell:
+    def __init__(self,ssid, mode, channel, rate, signal, security):
+        self.ssid=ssid
+        self.mode=mode
+        self.channel=channel
+        self.rate=rate
+        self.signal=signal
+        self.security=security
+
+
+def shell_exec(cmd):
+    return subprocess.Popen(
+            cmd, shell=True,
+            stdout=subprocess.PIPE,
+            stderr=subprocess.STDOUT
+            ).stdout.read().decode()
+
+
+def scan_wifi():
+    cmd="nmcli d wifi list"
+    resp = shell_exec(cmd)
+    ret = []
+    for line in resp.splitlines():
+        info = line.split()
+        if(info[0] == '*'):
+            cell = Wifi_cell(info[1],info[2],info[3],info[4],info[5],info[6])
+        else:
+            cell = Wifi_cell(info[0],info[1],info[2],info[3],info[4],info[5])
+        ret.append(cell)
+    return ret
+
+def wifi_connect(ssid, password):
+    cmd = "nmcli d wifi connect {} password {} con-name wifi_test".format(ssid, password)
+    resp = shell_exec(cmd)
+    print(resp)
+    if "failed" in resp or "Error" in resp:
+        return False
+    else:
+        return True
+
+def delete_connection(ssid):
+    cmd = "nmcli c"      
+    conns = shell_exec(cmd)
+    for i in conns.splitlines():
+        con = i.split()
+        print(con)
+        _ssid = con[0]
+        print(_ssid)
+        if _ssid == ssid:
+            del_cmd = "nmcli c delete {}".format(con[1])
+            shell_exec(del_cmd)            
+
+
+def start_wifi():
+    cmd = "nmcli r wifi on"
+    resp = shell_exec(cmd)
+    if "successfully" in resp:
+        return True
+    else:
+        return False
+
+def stop_wifi():
+    cmd = "nmcli r wifi off"
+    resp = shell_exec(cmd)
+    return True
+
+def restart_wifi():
+    resp = shell_exec('nmcli device status | grep {}'.format(WIFI_DEVICE))
+    print(resp)
+    status = resp.strip().split()[2]
+    print("wifi device {} is {}".format(WIFI_DEVICE, status))
+    if ( status == "unavailable" ):        
+        shell_exec('nmcli r wifi on')
+        return 1
+    elif ( status == "disconnected" ):
+        return 1
+    else:
+        return 0
+