Skip to content

P
postbox
Commit f4ad973c authored by Wen Wei Li's avatar Wen Wei Li
Browse files
Options

pincode layout

parent 0da28b71
Hide whitespace changes
Inline Side-by-side
Showing with 38 additions and 17 deletions
app.py
View file @ f4ad973c
...@@ -7,7 +7,7 @@ from wifi_utils import * ...@@ -7,7 +7,7 @@ from wifi_utils import *
from flask_bootstrap import Bootstrap from flask_bootstrap import Bootstrap
# wifi device name # wifi device name
WIFI_DEVICE='wlan0' WIFI_DEVICE='wlan0'
app = Flask(__name__) app = Flask(__name__)
...@@ -60,7 +60,7 @@ def wifi_scan(): ...@@ -60,7 +60,7 @@ def wifi_scan():
def wifi_pass(ssid): def wifi_pass(ssid):
global wifi_list global wifi_list
delete_connection(ssid) delete_connection(ssid)
print("Ready for Connecting to {}".format(ssid)) print("Ready for Connecting to {}".format(ssid))
if wifi_list == None: if wifi_list == None:
wifi_list = scan_wifi() wifi_list = scan_wifi()
for i in wifi_list: for i in wifi_list:
...@@ -74,7 +74,7 @@ def wifi_pass(ssid): ...@@ -74,7 +74,7 @@ def wifi_pass(ssid):
@app.route('/wifi_conn', methods=["POST"]) @app.route('/wifi_conn', methods=["POST"])
def wifi_conn(): def wifi_conn():
ssid = request.form.get('ssid') ssid = request.form.get('ssid')
passwd = request.form.get('password') passwd = request.form.get('password')
print("{} : {}".format(ssid, passwd)) print("{} : {}".format(ssid, passwd))
......
static/css/main.css
View file @ f4ad973c
...@@ -10,5 +10,9 @@ input:focus{ ...@@ -10,5 +10,9 @@ input:focus{
color:blue; color:blue;
} }
td { td {
cursor: pointer; cursor: pointer;
}
input.input_margin{
margin-right: 6%;
} }
static/js/pincode.js
View file @ f4ad973c
...@@ -16,18 +16,35 @@ let myKeyboard = new Keyboard({ ...@@ -16,18 +16,35 @@ let myKeyboard = new Keyboard({
}); });
let ary_input = []; let ary_input = [];
let index = 1 let index = 1;
function onChange(input) { function onChange(input) {
if ( ary_input.length > 6 ){
ary_input.pop();
}
console.log("Input changed", ary_input); console.log("Input changed", ary_input);
} }
function onKeyPress(button) { function onKeyPress(button) {
console.log("index : ", index); console.log("index : ", index);
n = "slot-"+index if ( String(button) == "{bksp}" && index > 1 ){
document.querySelector('input[id="'+n+'"]').value = '1'; index= index - 1;
index = index + 1; n = "slot-" + index;
ary_input.push(button) document.querySelector('input[id="'+n+'"]').value = '';
ary_input.pop();
}else if( String(button) == "{bksp}" && index == 1){
console.log("back to the first pin code");
}else if (index < 7 ){
n = "slot-" + index;
document.querySelector('input[id="'+n+'"]').value = button;
index = index + 1;
ary_input.push(button);
}else{
console.log("index over 6");
}
document.querySelector('input[id="'+n+'"]').focus(); document.querySelector('input[id="'+n+'"]').focus();
console.log("Button pressed", button); console.log("Button pressed", button);
} }
templates/demo.html
View file @ f4ad973c
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<link href="http://code.jquery.com/ui/1.9.0/themes/ui-darkness/jquery-ui.css" rel="stylesheet"> <link href="http://code.jquery.com/ui/1.9.0/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<link href="../static/css/keyboard.css" rel="stylesheet"> <link href="../static/css/keyboard.css" rel="stylesheet">
<link href="../static/css/style.css" rel="stylesheet"> <link href="../static/css/style.css" rel="stylesheet">
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<body > <body >
<div class="page-wrap"> <div class="page-wrap">
......
templates/pincode.html
View file @ f4ad973c
...@@ -26,18 +26,18 @@ ...@@ -26,18 +26,18 @@
$(document).ready(function () { $(document).ready(function () {
document.getElementById("keyboard").style.visibility = 'visible'; document.getElementById("keyboard").style.visibility = 'visible';
}); });
</script> </script>
{% endblock head %} {% endblock head %}
{% block content%} {% block content%}
<body class="bg-light m-5"> <body class="container mx-auto bg-light m-5">
<h2 class="text-muted text-center m-5">PinCode Setup</h2> <h2 class="text-muted text-center m-5">PinCode Setup</h2>
<center> <center>
<div class="col align-items-center m-5 col-8"> <div class="row col mx-auto m-5 col-8">
<div class="col-10 inline "> <div class="col-sm">
{% for i in range(6) %} {% for i in range(6) %}
<input type="password" class="form-control input" id="slot-{{loop.index}}" maxlength="1"> <input type="password" class="form-control input float-left col-sm-1 text-center input_margin" id="slot-{{loop.index}}" disabled="true" maxlength="1">
{% endfor %} {% endfor %}
</div> </div>
<div class="col-2 inline"> <div class="col-2 inline">
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
<script src="{{url_for('static', filename='js/keyboard.min.js')}}"></script> <script src="{{url_for('static', filename='js/keyboard.min.js')}}"></script>
<script src="{{url_for('static', filename='js/pincode.js')}}"></script> <script src="{{url_for('static', filename='js/pincode.js')}}"></script>
<script> <script>
</script> </script>
<!-- keyboard js--> <!-- keyboard js-->
</body> </body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment