Електроніка, схеми, плати, статті - сторінка 4

Вітаю. Починаю наступну, другу серію прикладів Flask + Vue. У цій серії будуть наступні статті:

• Згадати все (ця стаття)
• Посторінковий вивід даних (пагінація). Як зробити правильно
• Посторінковий вивід даних + сортування + пошук
• Проста Аутентифікація
• Авторизація
• Наводимо красу. Кастомний вигляд компоненту "Product"
• Знову переробляємо backend. SQLAlchemy, Migrate, Marshmallow, JWT
• Використання систем збірки проекту. Webpack

Порівняння характеристик дерев'яного бісколлекторного мотора з різними роторами.

(Оновлено 06.04.2021)
Плата керування безколекторними PMSM моторами на базі модуля мікроконтроллера STM32F103RBT6. Це бюджетний варіант плати для вивчення MCSDK, який Ви можете зібрати власноруч з доступних у вільному продажу компонентів. Ви можете завантажити схему і файли для виготовлення плати нижче. Інформація по цьому проекту постійно буде оновлюватися, коригуватися і доповнюватися на цій сторінці.

Схема

Призначення

Вигляд плати

Вигляд плати зверху

Вигляд плати знизу

Векторне управління безколекторним мотором. Як програмно керувати обертами мотора за допомогою потенціометра. X-CUBE-MCSDK, STM32 Motor Control Software Development Kit (MCSDK) для мікроконтролерів STM32.

Це покрокова інструкція, як підняти у продакшені додаток, написаний на Flask, за допомогою GUNICORN та NGNIX. Отже, ми створили web-додаток за допомогою мікрофреймвока Flask. Ми його запускали та тестували на http://localhost:5000/. Але, у такому вигляді, на робочому сервері йому жити - не можна. Він не потягне навантаження і це може бути небезпечно. Як його підняти у продакшені? Для цього ми будемо використовувати GUNICORN і NGNIX.

Векторне управління безколекторним мотором. Як програмно керувати обертами мотора за допомогою X-CUBE-MCSDK, STM32 Motor Control Software Development Kit (MCSDK) для мікроконтролерів STM32.

Векторне управління безколекторним мотором. Створення проекту і запуск бесколлекторного мотора за допомогою X-CUBE-MCSDK, STM32 Motor Control Software Development Kit (MCSDK) для мікроконтролерів STM32.

Отже, на Vue можна робити параметричні креслення у форматі SVG, а потім зберегти як окремий SVG-файл. Що таке параметричне креслення і кому воно потрібно? Уявіть що Ви працюєте закрійником, всі викрійки типові, різні тільки розміри. Було б дуже зручно, якби Ви вбили основні розміри (параметри), а програма сама побудувала б креслення. Так само це стосується інших галузей, де треба завдати декілька параметрів і отримати креслення. Наприклад, Ви займаєтесь виготовленням коробок з картону, тощо. І, щоб скоротити час на креслення і вчасно виконати замовлення клієнта, Вам потрібна система для швидкої побудови креслення.

У цьому прикладі я буду "малювати" статор електричного двигуна.

Переглянути приклад SVG креслення на Vue

Відео про Метод вимірювання моменту мотора. Пристрій для вимірювання моменту мотора і побудови графіків потужності, оборотів, КПД. Використання тензодатчика для побудови електронного пристрою для вимірювання моменту.

Одного разу, в одному з проектів знадобилося мені створити візуальний компонент, який би зображував хід якогось процесу. Наприклад, користувач заповнює данні і цей процес розбитий на кроки. Треба якось красивенько йому показати, що зараз це крок №2 з 4. Або у відсотках і щоб візуально було ясно скільки ще йому страждати або чекати. Звісно, що і кількість "кроків" і кольори і розмір у різних місцях де буде використано цей компонент будуть різні. CSS - в даному випадку не вирішував задачу. З картинками заморочуватися не хотілося, тому вирішив спробувати SVG. Оскільки векторна графіка SVG виписується тегами проблем не повинно бути (принаймні для Vue). Далі приклад компонента (трохи спрощений від того про який я писав), який являє собою простенький SVG - компонент.

Переглянути приклад SVG компонент на Vue

Backend + Frontend

В этом финальном примере переделан фронтенд на работу с реальным бекендом. Теперь приложение на Flask (backend) и приложение на Vue (frontend) работают вместе. И для переделки фронтенда из прошлого примера пришлось… всего то переделать один миксин crud. Это меньше 100 строк размашистого кода.

Еще в appDataset добавлен параметр url для каждого instance.

Все прочие доработки связаны с «наведением красоты». Таким образом, благодаря тому, что структура приложения разделена на компоненты и миксины, понадобились минимальные переделки.

CORS

Cross-origin resource sharing (CORS) - совместное использование ресурсов между разными источниками.

Дело в том, что если Java Script будет обращаться к бекенду с другого домена, то он не сможет получить данные без особого разрешения, таковы правила безопасности для JavaScript. На этапе разработки удобно, если такая возможность будет. Например, бэкенд работает на одном домене (на каком то удаленном сервере), а разработка фронтенда ведется на другом домене или на локальном домене (localhost).

В этом примере сделана небольшая доработка. Применен модуль cross_origin, который решает эту проблему.