iicd/Inkycal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Inititial commit for release v2.0.0

Browse Source 
A lot of work-in-progress and far from complete.
Lots of improvements related to user-friendliness, fully new web-UI. Better infrastructure....
more coming soon
This commit is contained in:
Ace
2020-11-09 17:42:04 +01:00
parent b6c2534644
commit 5fa6102c0d
35 changed files with 2659 additions and 1767 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
server/app/__init__.py Normal file
View File

@@ -0,0 +1,7 @@
from flask import Flask
from config import Config
app = Flask(__name__)
app.config.from_object(Config)
from app import routes

16
server/app/config_loader.py Normal file
View File

@@ -0,0 +1,16 @@
from inkycal.modules import *
# get list of all modules inside inkycal-modules folder
modules = [i for i in dir() if i[0].isupper()]
# Add the config of each module to the list settings
settings = []
for module in modules:
command = f"conf = {module}.get_config()"
exec(command)
settings.append(conf)
# return the config of all modules for the web-ui
def get_all_config():
return settings

12
server/app/forms.py Normal file
View File

@@ -0,0 +1,12 @@
from flask_wtf import FlaskForm
from wtforms import BooleanField
#from wtforms import StringField, PasswordField, BooleanField, SubmitField, SelectField
#from wtforms.validators import DataRequired
class LoginForm(FlaskForm):
#username = StringField('api-key', validators=[DataRequired()])
#modules = SelectField(u'modules', choices = [(_[0], _[1]) for _ in modules])
remember_me = BooleanField('Show info section')
#submit = SubmitField('Sign In')

108
server/app/routes.py Normal file
View File

@@ -0,0 +1,108 @@
from flask import render_template, flash, redirect, request, Response
from app import app
from app.forms import LoginForm
import json
from inkycal import Display
from .config_loader import get_all_config
settings = get_all_config()
# Home
@app.route('/')
@app.route('/index')
def index():
return render_template('index.html', title='Home')
# Wifi-setup
@app.route('/setup_wifi')
def wifi_setup():
return render_template('wifi.html', title='Wifi-setup')
# Inkycal-setup
@app.route('/inkycal_config', methods=['GET', 'POST'])
def inkycal_config():
form = LoginForm()
if form.validate_on_submit():
# General epaper settings
model = request.form.get('model')
update_interval = int(request.form.get('update_interval'))
calibration_hour_1 = int(request.form.get('calibration_hour_1'))
calibration_hour_2 = int(request.form.get('calibration_hour_2'))
calibration_hour_3 = int(request.form.get('calibration_hour_3'))
orientation: int(request.form.get('orientation'))
language = request.form.get('language')
info_section = True if (request.form.get('info_section') == "on") else False
# template for basic settings
template = {
"model": model,
"update_interval": update_interval,
"orientation": int(request.form.get('orientation')),
"info_section": info_section,
"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'))
fontsize = int(request.form.get('fontsize'))
language = request.form.get('language')
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 = display_size[0], 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":
#conf = {"position":i , "name": request.form.get(module), "height": int(request.form.get(module+'_height')), "config":{}}
conf = {"position":i , "name": request.form.get(module), "size": (width, int(height*int(request.form.get(module+'_height')) /100)), "config":{}}
for modules in settings:
if modules['name'] == request.form.get(module):
# Add required fields to the config of the module in question
if 'requires' in modules:
for key in modules['requires']:
conf['config'][key] = request.form.get(module+'_'+key).replace(" ", "")
# For optional fields, check if user entered/selected something. If not, and a default value was given,
# use the default value, else set the value of that optional key as None
if 'optional' in modules:
for key in modules['optional']:
if request.form.get(module+'_'+key):
conf['config'][key] = request.form.get(module+'_'+key).replace(" ", "")
else:
if "default" in modules["optional"][key]:
conf['config'][key] = modules["optional"][key]["default"]
else:
conf['config'][key] = None
# update the config dictionary
conf.update(common_settings)
template['modules'].append(conf)
# Send the data back to the server side in json dumps and convert the response to a downloadable settings.json file
try:
user_settings = json.dumps(template, indent=4).encode('utf-8')
response = Response(user_settings, mimetype="application/json", direct_passthrough=True)
response.headers['Content-Disposition'] = 'attachment; filename=settings.json'
return response
# redirect('/index')
except Exception as e:
flash(str(e))
return render_template('inkycal_config.html', title='Inkycal-Setup', conf=settings, form=form)

7
server/app/static/css/main.css Normal file
View File

File diff suppressed because one or more lines are too long

59
server/app/templates/base.html Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
{% if title %} <title>{{ title }}</title>
{% else %} <title>Inkycal</title> {% endif %}
<style> body { background-color: #eaeaea; } </style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<div class="container">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link" href="/index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/inkycal_config">Setup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/setup_wifi">WiFi-setup</a>
</li>
</ul>
</div>
</div>
<!-- show flashed messages-->
<hr>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</hr>
</div>
{% block content %}{% endblock %}
</body>
</html>

9
server/app/templates/index.html Normal file
View File

@@ -0,0 +1,9 @@
{% extends "base.html" %}
{% block content %}
<body>
<div class="container"><h4>Welcome to inkycal config portal</h4></div>
</body>
{% endblock %}

445
server/app/templates/inkycal_config.html Normal file
View File

@@ -0,0 +1,445 @@
{% extends "base.html" %}
<!-- Main container -->
{% block content %}
<!-- Wrap everything in a container-->
<div class="container">
<!-- heading -->
<h3>Inkycal-Setup v.2.0.0 BETA</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/dev_ver2_0/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-group">
<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 info section? (shows time of last display-update)</label>
</div>
</div>
<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</div>
<!-- module 1 selection -->
<div class="form-row">
<div class="col-md-10">
<label for="module1">Top section module</label>
<select class="form-control" id="module1" name="module1">
<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-2">
<label for="module1_height">Height in percent</label>
<input type="number" class="form-control" name="module1_height" value=10 placeholder=10 min=0 max=100>
</div>
</div><br>
<!-- placeholder div -->
<div id="module1_conf"></div>
<!-- module 2 selection -->
<div class="form-row">
<div class="col-md-10">
<label for="module2">Middle section module</label>
<select class="form-control" id="module2" name="module2">
<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-2">
<label for="module2_height">Height in percent</label>
<input type="number" class="form-control" name="module2_height" value=65 placeholder=65 min=0 max=100>
</div>
</div><br>
<!-- placeholder div -->
<div id="module2_conf"></div>
<!-- module 3 selection -->
<div class="form-row">
<div class="col-md-10">
<label for="module3">Bottom section module</label>
<select class="form-control" id="module3" name="module3">
<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-2">
<label for="module3_height">Height in percent</label>
<input type="number" class="form-control" name="module3_height" value=25 placeholder=25 min=0 max=100>
</div>
</div><br>
<!-- placeholder div -->
<div id="module3_conf"></div>
<!--Show config of selected modules-->
<script>
$(document).ready(function(){
$("#module1").change(function(){
$(this).find("option:selected").each(function(){
var module1_selection = $(this).attr("value");
console.log("Module 1 selected to: "+ module1_selection);
if(module1_selection != "None"){
// reset module 1 config (avoid showing duplicates)
$("#module1_conf").replaceWith('<div id="module1_conf"></div>');
// add and render the config for the selected module
var module1_template = document.querySelector("#"+module1_selection);
var clone = document.importNode(module1_template.content, true);
$("#module1_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
$("#module1_conf input").each(function(i) {
//console.log($(this).attr('name', $(this).attr('name').replace(module1_selection, "module1")));
$(this).attr('name', $(this).attr('name').replace(module1_selection, "module1"));
});
$("#module1_conf select").each(function(i) {
//console.log($(this).attr('name', $(this).attr('name').replace(module1_selection, "module1")));
$(this).attr('name', $(this).attr('name').replace(module1_selection, "module1"));
});
} else {
// revert to empty section
$("#module1_conf").replaceWith('<div id="module1_conf"></div>');
}
});
}).change();
$("#module2").change(function(){
$(this).find("option:selected").each(function(){
var module2_selection = $(this).attr("value");
console.log("Module 2 selected to: "+ module2_selection);
if(module2_selection != "None"){
// reset module 2 config (avoid showing duplicates)
$("#module2_conf").replaceWith('<div id="module2_conf"></div>');
// add and render the config for the selected module
var module2_template = document.querySelector("#"+module2_selection);
var clone = document.importNode(module2_template.content, true);
$("#module2_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
$("#module2_conf input").each(function(i) {
//console.log( $(this).attr('name').replace(module2_selection, "module2"));
$(this).attr('name', $(this).attr('name').replace(module2_selection, "module2"));
});
$("#module2_conf select").each(function(i) {
//console.log($(this).attr('name', $(this).attr('name').replace(module2_selection, "module2")));
$(this).attr('name', $(this).attr('name').replace(module2_selection, "module2"));
});
} else {
// revert to empty section
$("#module2_conf").replaceWith('<div id="module2_conf"></div>');
}
});
}).change();
$("#module3").change(function(){
$(this).find("option:selected").each(function(){
var module3_selection = $(this).attr("value");
console.log("Module 3 selected to: "+ module3_selection);
if(module3_selection != "None"){
// reset module 3 config (avoid showing duplicates)
$("#module3_conf").replaceWith('<div id="module3_conf"></div>');
// add and render the config for the selected module
var module3_template = document.querySelector("#"+module3_selection);
var clone = document.importNode(module3_template.content, true);
$("#module3_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
$("#module3_conf input").each(function(i) {
//console.log( $(this).attr('name').replace(module3_selection, "module3"));
$(this).attr('name', $(this).attr('name').replace(module3_selection, "module3"));
});
$("#module3_conf select").each(function(i) {
//console.log($(this).attr('name', $(this).attr('name').replace(module3_selection, "module3")));
$(this).attr('name', $(this).attr('name').replace(module3_selection, "module3"));
});
} else {
// revert to empty section
$("#module3_conf").replaceWith('<div id="module3_conf"></div>');
}
});
}).change();
});
</script>
<script>
(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>
<br>
<div class="form-group">
<button class="btn btn-primary" type="submit">Generate settings file</button>
</div>
</form>
</div>
{% endblock %}

13
server/app/templates/wifi.html Normal file
View File

@@ -0,0 +1,13 @@
{% extends "base.html" %}
<!-- Main container -->
{% block content %}
<!-- Wrap everything in a container-->
<div class="container">
<!-- heading -->
<h3>Raspberry Pi Wifi setup (coming soon)</h3>
</div>
{% endblock %}