Всем доброго времени суток! Это мой первый пост на Хабре в расчете на конструктивную критику и советы на дальнейшее развитие.
Предыстория
Я обучаюсь веб-разработке и во время обучения ко мне обратилась знакомая психолог и попросила:
Не мог ли бы ты написать программу для подсчета мандал?
И требования к проекту:
перевод слова в цифры по алфавиту;
генерация шестиугольной сетки радиусом в количество цифр переведенного слова с заданным размером грани ячейки и размером холста;
расстановка цифр в каждую ячейку по заранее определенному методу;
иметь возможность изменения цвета во всех ячейках с одинаковым номером;
иметь возможность подбора цвета с изображения;
вывод полученного изображения в файл для последующего распечатывания;
опционально иметь возможность вернуться к ранее созданной мандале для ее редактирования.
Для обучения мне это показалось классным кейсом. Я взялся за работу и принялся обдумывать какими средствами ее выполнить. Сразу на ум пришло: PyQt 5, книгу по которому мне заботливо подарили год назад, и веб-приложение. PyQt 5 я не знаю, да и не моя сфера обучения, а потому буду писать веб приложение. Для бекенда был выбран Flask, т.к. один из кейсов во время обучения был интеграция приложения Salesforce с Telegram ботом (Да. Я обучаюсь разработке на Salesforce) и Flask показался весьма простым и гибким фреймворком. Фронтенд было решено делать на Bootstrap и JQuery.
В связи с тем, что у моего знакомого психолога нет навыков работы с командной строкой, а так же работы с Photoshop или CorelDraw, было решено написать фронтенд, бекенд, скрипт Powershell для запуска виртуального окружения Python и открытия браузера по умолчанию на заданный адрес.
Ниже присланное мне изображение по расчету мандалы.
Генерация изображения
Как произвести генерацию шестиугольной сетки? Проведя поиск я наткнулся на статью. Пройдя к источнику, нашел библиотеки для различных языков программирования.
Это первый подобный опыт работы с изображением, используя JS, первая реализация была выполнена на Canvas, сетку выводила библиотека Honeycomb.
Длинный кусок кода
function buildMandalaVer12(countHex, strToHex) {
var element = document.getElementById("stage");
element.height = window.innerHeight;
element.width = window.innerWidth;
var stage = new createjs.Stage("stage");
stage.x = window.innerWidth / 2;
stage.y = window.innerHeight / 2;
var grid = new Grid();
grid.tileSize = 30;
grid.tileSpacing = 0;
grid.pointyTiles = false;
var stageTransformer = new StageTransformer().initialize({
element: element,
stage: stage
});
stageTransformer.addEventListeners();
var coordinates = grid.hexagon(0, 0, countHex, true);
let breakIter = false;
let stepRay = 0;
let stepBreak = 0;
let interimStep = 0;
let u = 1;
for (var i = 0; i < coordinates.length; i++) {
var q = coordinates[i].q,
r = coordinates[i].r,
center = grid.getCenterXY(q, r),
hexagon = new createjs.Shape();
if (u == stepBreak){
breakIter = false;
u = 0;
}
if (!breakIter) {
let str = strToHex[stepRay];
var text = new createjs.Text(str, "10px Arial", "#ff7700");
text.textBaseline = "alphabetic";
text.set({
textAlign: "center",
textBaseline: "middle",
x: center.x,
y: center.y,
rotation: -90
});
if (stepRay > 0) {
interimStep += 1;
}
}
if (interimStep == 6) {
breakIter = true;
interimStep = 1;
stepBreak += 1;
} else {
u += 1;
}
if (i + 1 == 1) {
stepRay = 1
}
hexagon.id = i;
hexagon.id2 = i;
// раскаска диагональных линий
if ((q == 0 && r == 0) || q == 0 || r == 0 || ((q * -1) == r)) {
hexagon.graphics
.beginFill("rgba(150,0,0,1)")
// .beginFill("rgba(150,150,150,1)")
.beginStroke("rgba(250,250,250,1)")
.drawPolyStar(0, 0, grid.tileSize, 6, 0, 0);
} else {
hexagon.graphics
.beginFill("rgba(150,150,150,1)")
.beginStroke("rgba(250,250,250,1)")
.drawPolyStar(0, 0, grid.tileSize, 6, 0, 0);
}
hexagon.q = q;
hexagon.r = r;
hexagon.x = center.x;
hexagon.y = center.y;
hexagon.addEventListener("click", function (event) {
if (!stageTransformer.mouse.moved) {
console.log(event.target.id)
event.target.graphics
.clear()
.beginFill("rgba(150,0,0,1)")
.beginStroke("rgba(50,0,0,1)")
.drawPolyStar(0, 0, grid.tileSize, 6, 0, 0);
}
});
stage.addChild(hexagon);
stage.addChild(text);
}
stage.set({
rotation: 90
});
var tick = function (event) {
stage.update();
};
tick();
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick);
return true;
}Размеры в SVG считаются в пикселях, а значит миллиметры необходимо перевести. На developer.mozilla.org сказано:
Ок. Значит параметры вводимые в форме настроек генерации переводим и устанавливаем для параметров сетки.
Код генерации сетки
let preload = document.getElementById('preloader');
// перевод мм в пиксели
let dWith = modelMandala.source.pageSize.width * 3.543307;
let dHeight = modelMandala.source.pageSize.height * 3.543307;
let dRangeMm = modelMandala.source.rangeMm * 3.543307;
// генерация сетки и пересчет координат
let options = new BHex.Drawing.Options(dRangeMm, BHex.Drawing.Static.Orientation.PointyTop, new BHex.Drawing.Point(dWith, dHeight));
let gridBHex = new BHex.Grid(modelMandala.source.countWord);
let gridForPaint = new BHex.Drawing.Drawing(gridBHex, options);Теперь нужно создать само изображение на основе координат. Для этого SVG.js передаем координаты для отрисовки Polygon и элемента Text для большей наглядности.
// создание нового объекта svg и добавление его в <object> на странице
modelMandala.source.drawThisFigure = SVG().addTo(preload).size(dWith, dHeight).id("svgImg2");
document.getElementById("svgImg2").setAttribute('style', 'shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd');
let fontSize = modelMandala.source.rangeFontSize;
// отрисовка шестиугольников и элементов Text
for (let i = 0; i < gridForPaint.grid.hexes.length; i++) {
modelMandala.source.drawThisFigure.polygon(gridForPaint.grid.hexes[i].points.map(({x, y}) => `${x},${y}`))
.fill('none')
.stroke({width: 1, color: '#000000'})
.css({cursor: 'pointer'})
.addClass('polygon')
.addClass('999')
.addClass(`${gridForPaint.grid.hexes[i].x},${gridForPaint.grid.hexes[i].y}`)
.element('title').words(`${gridForPaint.grid.hexes[i].x},${gridForPaint.grid.hexes[i].y}`)
modelMandala.source.drawThisFigure
.text(`${gridForPaint.grid.hexes[i].x},${gridForPaint.grid.hexes[i].y}`)
.font({
size: fontSize,
anchor: 'middle',
leading: 1.4,
fill: modelMandala.source.colorWord
})
.addClass(`${gridForPaint.grid.hexes[i].x},${gridForPaint.grid.hexes[i].y}`)
.translate(gridForPaint.grid.hexes[i].center.x, gridForPaint.grid.hexes[i].center.y + 3);
}И добавление события по клику для вызова модального окна с палитрой.
for (let i = 0; i < modelMandala.source.drawThisFigure.node.children.length; i++) {
if (modelMandala.source.drawThisFigure.node.children[i].tagName === "polygon") {
let str = modelMandala.source.drawThisFigure.node.children[i].classList[2];
dataPolygonMap.set(str, i);
modelMandala.source.drawThisFigure.node.children[i].onclick = function () {
SetColorPolygonFunc();
polygonObj = modelMandala.source.drawThisFigure.node.children[i];
}
}
if (modelMandala.source.drawThisFigure.node.children[i].tagName === "text") {
let str = modelMandala.source.drawThisFigure.node.children[i].classList[0];
dataTextMap.set(str, i);
}
}Но изображение отрисовывается не полностью,а лишь частью.
Посмотрев координаты стало понятно, что рассчет идет от центра (координаты 0,0), а в документации SVG говорится, что есть несколько областей для просмотра. Пользовательская область задается параметром Viewbox = "0 0 0 0". Ок. Делим размер всего холста на -2.
modelMandala.source.drawThisFigure.viewbox(dWith / -2 + ' ' + dHeight / -2 + ' ' + dWith + ' ' + dHeight);Далее необходимо провести рассчет значений во внутренних многоугольниках. Условно всю мандалу можно поделить на шесть секторов. Можно взять координаты сетки, их я сохранял в виде класса для каждого polygon, и на их основе произвести рассчет как на бумаге: берем два базовых шестиугольника, складываем цифры в них и записываем полученное значение в нужный нам шестиугольник, и так до конца. Для этого при добавлении event в каждый шестиугольник я добавлял его координаты в Map, сам SVG сохранил в глобальную переменную, а при перессчете координат создавал многоуровневый массив с координатами для каждого сектора.
// объект для сохранения всех данных в процессе работы
let modelMandala = {
rayA: {
rayCoord: [],
sector: []
},
rayB: {
rayCoord: [],
sector: []
},
rayC: {
rayCoord: [],
sector: []
},
... // вызов функции для просчета координат и собственно значений в шестиугольниках
if (modelMandala.source.mandalaVersion === 1 || modelMandala.source.mandalaVersion === 2 || modelMandala.source.mandalaVersion === 3 || modelMandala.source.mandalaVersion === 4) {
axialDataSetFunc();
}
if (modelMandala.source.mandalaVersion === 5 || modelMandala.source.mandalaVersion === 6 || modelMandala.source.mandalaVersion === 7 || modelMandala.source.mandalaVersion === 8) {
borderDataSetFunc();
}// заполнение мандалы "по грани" координатами
function getArrOnBorderAndSector() {
let resArr = [];
let interimArr = [];
let step = modelMandala.source.countWord;
// ray A
let a = modelMandala.source.countWord, b = 0;
let a2 = a, b2 = b, interimStep = step;
for (let i = 1; i <= step; i++) {
for (let y = 1; y <= interimStep; y++) {
if (i === 1) {
y === 1 ? modelMandala.rayA.rayCoord.push([a2, b2]) : modelMandala.rayA.rayCoord.push([a2, --b2])
} else {
y === 1 ? interimArr.push([a2, b2]) : interimArr.push([a2, --b2])
}
}
a -= 1; b = 0; a2 = a; b2 = b;
interimStep -= 1;
if (i !== 1) {
resArr.push(interimArr);
interimArr = [];
}
}
modelMandala.rayA.sector.push(resArr);
resArr = [];
// ray B
...// установка значений в класс для автовыбора при расскращивании.
function axialDataSet() {
$('.navbar').width(0)
getArrOnRayAndSector();
// установка значений по осям
let numb = 1;
for (let key in modelMandala) {
numb = 1;
if (key === "source") break;
for (let i = 0; i < modelMandala[key].rayCoord.length; i++) {
let obj = getValOnCoordinate(modelMandala.source.drawThisFigure, modelMandala[key].rayCoord[i][0], modelMandala[key].rayCoord[i][1], false);
obj.classList.replace('999', String(modelMandala.source.wordInInt[numb]));
obj.firstChild.innerHTML = String(modelMandala.source.wordInInt[numb]);
obj.attributes.fill.value = '#f62b58';
let objText = getValOnCoordinate(modelMandala.source.drawThisFigure, modelMandala[key].rayCoord[i][0], modelMandala[key].rayCoord[i][1], true);
objText.firstChild.innerHTML = String(modelMandala.source.wordInInt[numb]);
numb++;
}
}
// установка значений по полям
for (let key in modelMandala) {
let countStep = 1;
if (key === "source") break;
for (let i = 0; i < modelMandala[key].sector[0].length; i++) {
for (let u = 0; u < modelMandala[key].sector[0][i].length; u++) {
let objForChange = getValOnCoordinate(modelMandala.source.drawThisFigure, modelMandala[key].sector[0][i][u][0], modelMandala[key].sector[0][i][u][1], false);
let objParent1, objParent2;
if (key === "rayA") {
objParent1 = getValOnCoordinate(modelMandala.source.drawThisFigure, modelMandala[key].sector[0][i][u][0] - 1, modelMandala[key].sector[0][i][u][1], false);
objParent2 = getValOnCoordinate(modelMandala.source.drawThisFigure, modelMandala[key].sector[0][i][u][0] - 1, modelMandala[key].sector[0][i][u][1] + 1, false);
}
...
let res = Number(objParent1.classList[1]) + Number(objParent2.classList[1]);
if (res >= 10) {
res = String(res);
res = Number(res[0]) + Number(res[1]);
}
objForChange.classList.replace('999', String(res));
objForChange.firstChild.innerHTML = String(res);
objForChange.attributes.fill.value = '#f62bdb';
let objText = getValOnCoordinate(modelMandala.source.drawThisFigure, modelMandala[key].sector[0][i][u][0], modelMandala[key].sector[0][i][u][1], true);
objText.firstChild.innerHTML = String(res);
}
}
}
// установка центрального значения
let obj = getValOnCoordinate(modelMandala.source.drawThisFigure, 0, 0, false);
obj.classList.replace('999', String(modelMandala.source.wordInInt[0]));
obj.firstChild.innerHTML = String(modelMandala.source.wordInInt[0]);
obj.attributes.fill.value = '#f62b58';
let objText = getValOnCoordinate(modelMandala.source.drawThisFigure, 0, 0, true);
objText.firstChild.innerHTML = String(modelMandala.source.wordInInt[0]);
objText.setAttribute("font-weight", "900");
$('#getImageSchema').popover('enable');
$('#getImageSchema').removeClass("invisible");
$('#getImageColor').removeClass("invisible");
$('.navbar').width(document.documentElement.scrollWidth)
setProgress(true);
}В приведенном выше кода описано: перессчет координат по секторам и создание многомерных массивов, расставления значений, начиная с осей мандалы, и перессчет значений на основе порядка массива координат в каждую ячейку для каждого сектора. Получение значений двух базовых шестиугольников производится в функции getValOnCoordinate
// получение координаты из ListStyle
function getValOnCoordinate(stage, o1, o2, text) {
let strForSearch = String(o1) + "," + String(o2);
if (text) {
let o = dataTextMap.get(strForSearch);
return stage.node.children[o];
} else {
let o = dataPolygonMap.get(strForSearch);
return stage.node.children[o];
}
}Результат работы:
Интрефейс для работы
Было решено дать полную свободу действий в настройке изображения на свой вкус и цвет и создать два меню: для сохранения в базу, для генерации и сохранения в файл избражения или схемы. Предполагается, что готовое изображение будет распечатываться в виде схемы и некто будет его раскрашивать по номерам. Прошу не пинать, т.к. проект я рассматривал только с точки зрения опыта, а не подтекста использования на людях. Итого: меню для генерации и сохрания в файл и меню для сохранения в базу.
Так же один из элементов интерфейса является палитра, выполненная в Modal. Имеется две палитры на выбор: обыная и по требованию выбор цвета с рисунка.
И уведомляшки о сохранении, загрузке и удалении готового рисунка.
Весь HTML код написан в шаблонах Flask и отражать его в статье нет смысла, т.к. это обычная верстка с применением Bootstrap.
Сохранение изображения в файл
Изначально была задумка отдавать пользователю SVG файл, но из-за отсутствия навыков работы в Corel самым простым решением было выводить pdf с заданным размером страницы и в последующем его печатать.
Сам процесс перевода SVG в pdf на фронте (ссылка) оказался чрезвычайно долгим, т.к. происходил полный перебор SVG со страницы, генерация pdf и последущее добавление polygon в файл. Проще всего оказалось отдать файл на back-end, конвертировать его там и отдать pdf пользователю. Отдача SVG происходит Ajax в виде строки, которая записвается в файл, а дальше вступает в действие Cariosvg. После готовый pdf отдается на фронтенд ответом на Ajax в виде бинарной строки.
Код сохранения svg, его перевода в pdf и отдача файла пользователю
/*
* сохранение изображения
* */
$("#getImageSchema").on('click', function () {
setProgress(false);
for (let i = 0; i < modelMandala.source.drawThisFigure.node.children.length; i++) {
if (modelMandala.source.drawThisFigure.node.children[i].tagName === "polygon") {
modelMandala.source.drawThisFigure.node.children[i].attributes.fill.value = '#ffffff';
}
}
getPdf();
});
$("#getImageColor").on('click', function () {
setProgress(false);
getPdf();
});
function getPdf() {
let dWith = modelMandala.source.pageSize.width * 3.543307;
let dHeight = modelMandala.source.pageSize.height * 3.543307;
let svh = new XMLSerializer().serializeToString(document.getElementById('svgImg2'))
$.ajax({
type: "POST",
url: "/upload",
data: {data: svh, pWidth: dWith, pHeight: dHeight},
dataType: 'binary',
xhrFields: {
'responseType': 'blob'
},
}).done(function (data, status, xhr) {
let link = document.createElement('a'), filename = modelMandala.source.word + '.pdf';
link.href = URL.createObjectURL(data);
link.download = filename;
link.click();
setProgress(true);
});
}@app.route('/upload', methods=['POST'])
def upload():
if os.path.exists(uploads_dir + '\\test.svg'):
os.remove(uploads_dir + '\\test.svg')
if os.path.exists(uploads_dir + '\\test.pdf'):
os.remove(uploads_dir + '\\test.pdf')
f = open(uploads_dir + '\\test.svg', 'w')
f.write(request.form['data'])
f.close()
x = threading.Thread(target=cairosvg.svg2pdf(url=uploads_dir + '\\test.svg', write_to=uploads_dir + '\\test.pdf'),
args=(1,))
x.start()
x.join()
return send_file(filename_or_fp=uploads_dir + '\\test.pdf', mimetype='application/pdf; version="1.5"',
as_attachment=True)Сохранение и восстановление данных из базы также просто. На python передается json со всеми данными объекта modelMandala и сериализованный SVG. Используя sqlalchemy сохраняю эти данные в файл SQLite.
Далее должо было быть написание скрипта powershell для запуска Fask и в целом на этом можно было бы заканчивать, но...
Послесловие
Не интересуясь возможностями JS и случайно наткнувшись на пост я открыл для себя Electron JS и подумал: а что если все приложение упаковать pyinstaller и при запуске Electron приложения производит запуск упакованного файла python, а при закрытии окна завершать его работу? Для конечного пользователя это устраняет необходимость установки python и наличия открытого окна консоли powershell. В итоге так и было сделано. Ниже файл render.js для electron и package.json для сборки приложения.
render.js
"use strict";
const {app, BrowserWindow, session, Menu, MenuItem} = require("electron");
const path = require("path");
let mainWindow = null;
let subpy = null;
const PY_DIST_FOLDER = "dist-python";
const PY_SRC_FOLDER = "web_app";
const PY_MODULE = "wsgi.py";
const isRunningInBundle = () => {
return require("fs").existsSync(path.join(__dirname, PY_DIST_FOLDER));
};
const getPythonScriptPath = () => {
if (!isRunningInBundle()) {
return path.join(__dirname, PY_SRC_FOLDER, PY_MODULE);
}
if (process.platform === "win32") {
return path.join(
__dirname,
PY_DIST_FOLDER,
PY_MODULE.slice(0, -3) + ".exe"
);
}
return path.join(__dirname, PY_DIST_FOLDER, PY_MODULE);
};
const startPythonSubprocess = () => {
let script = getPythonScriptPath();
if (isRunningInBundle()) {
subpy = require("child_process").execFile(script, []);
} else {
subpy = require("child_process").spawn("python", [script]);
}
};
const killPythonSubprocesses = main_pid => {
const python_script_name = path.basename(getPythonScriptPath());
let cleanup_completed = false;
const psTree = require("ps-tree");
psTree(main_pid, function (err, children) {
let python_pids = children
.filter(function (el) {
return el.COMMAND == python_script_name;
})
.map(function (p) {
return p.PID;
});
python_pids.forEach(function (pid) {
process.kill(pid);
});
subpy = null;
cleanup_completed = true;
});
return new Promise(function (resolve, reject) {
(function waitForSubProcessCleanup() {
if (cleanup_completed) return resolve();
setTimeout(waitForSubProcessCleanup, 30);
})();
});
};
const createMainWindow = () => {
mainWindow = new BrowserWindow({
width: 1366,
height: 768,
icon: __dirname + "/icon.ico",
fullscreen: true,
frame: true,
resizeable: true
});
mainWindow.loadURL("http://localhost:5000/");
mainWindow.on("closed", function () {
mainWindow = null;
});
};
app.on("ready", function () {
startPythonSubprocess();
createMainWindow();
setTimeout(()=>{
mainWindow.loadURL("http://localhost:5000/");
}, 5);
});
const template = [
{
role: 'Help',
submenu: [
{
role: 'reload'
},
{
role: 'close'
}
]
}
]
const menu = Menu.buildFromTemplate(template)
app.on("browser-window-created", function (e, window) {
window.setMenu(menu);
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
let main_process_pid = process.pid;
killPythonSubprocesses(main_process_pid).then(() => {
app.quit();
});
}
});
app.on("activate", () => {
if (subpy == null) {
startPythonSubprocess();
}
if (mainWindow === null) {
createMainWindow();
}
});
app.on("quit", function () {
session.defaultSession.clearCache();
});
package.json для сборки приложения
{
"name": "MandalaApp",
"version": "1.2.0",
"description": "",
"main": "renderer.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron .",
"package": "npm run -s package-python && npm run -s package-electron && npm run -s package-cleanup",
"package-python": "pyinstaller -w --onefile --add-binary web_app/venv/Lib/site-packages/cairosvg;cairosvg --add-binary web_app/venv/Lib/site-packages/cairocffi;cairocffi --add-binary web_app/venv/Lib/site-packages/PIL;pillow --add-binary web_app/venv/Lib/site-packages/defusedxml;defusedxml --add-binary web_app/venv/Lib/site-packages/tinycss2;tinycss2 --add-binary web_app/venv/Lib/site-packages/cssselect2;cssselect2 --add-binary web_app/venv/Lib/site-packages/cffi;cffi --add-binary web_app/venv/Lib/site-packages/pycparser;pycparser --add-binary web_app/venv/Lib/site-packages/webencodings;webencodings --add-data web_app/templates;templates --add-data web_app/static;static --add-data web_app/instance;instance --add-data web_app/migrations;migrations --add-data web_app/instance/app.db;instance web_app/wsgi.py web_app/app.py web_app/config.py web_app/identifier.sqlite web_app/models.py web_app/routes.py --distpath dist-python",
"package-electron": "electron-builder"
},
"build": {
"appId": "com.MandalaApp.klim-app",
"productName": "MandalaApp",
"asar": false,
"asarUnpack": [
"**/*.node"
],
"mac": {
"category": "public.app-category.utilities"
},
"files": [
"renderer.js",
"icon.ico",
"node_modules/**/*"
],
"extraResources": [
{
"from": "dist-python/",
"to": "app/dist-python",
"filter": [
"**/*"
]
}
]
},
"author": "Ilia Klimchik https://github.com/klimchak",
"license": "MIT",
"dependencies": {
"ps-tree": "^1.2.0"
},
"devDependencies": {
"electron": "^9.2.0",
"electron-builder": "^22.8.0"
}
}
В итоге получилось десктопное приложение по всем заранее оговоренным требованиям.
Более подробно посмотреть код можно на GitHub.
P.s. Прошу сильно не забрасывать камнями. Буду рад любой конструкивной критике, code review, советам по иной реализации, а так же по обучению и направлению развития в web-разработке.
