Електроніка, схеми, плати, статті - сторінка 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.

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