MyTetra Share
Делитесь знаниями!
универсальный шаблон проекта, который объединяет Electron (для GUI) и PlatformIO
Время создания: 30.08.2025 16:04
Автор: alensav
Текстовые метки: electron platformio
Раздел: PLATFORMIO
Запись: alensav/MyTetra2/main/base/1756559070ggeinmusg8/text.html на raw.githubusercontent.com

Универсальный шаблон проекта, который объединяет Electron (для GUI) и PlatformIO


1.Цель: Проект "Electron + PlatformIO"

my-iot-app/

├── electron/ # GUI на Electron

│ ├── main.js # Основной процесс

│ ├── preload.js # Безопасный доступ к Node.js

│ └── index.html # Интерфейс

├── firmware/ # Прошивки для микроконтроллеров

│ └── platformio.ini # Конфиг PlatformIO

│ └── src/main.cpp # Код для ESP32/Arduino

├── package.json # Запуск Electron и скрипты

└── README.md

----------------------------------------------------------------------------------------------

Шаг 1: Создайте структуру проекта

mkdir -p my-iot-app/{electron,firmware/src}

cd my-iot-app

---------------------------------------------------------------------

Шаг 2: Инициализируйте Electron

cd electron

npm init -y

npm install electron --save-dev

-------------------------------------------------------------------------------------------

Создайте main.js (основной процесс Electron)

cat > main.js << 'EOF'

const { app, BrowserWindow, ipcMain } = require('electron')

const path = require('path')

const { spawn } = require('child_process')


function createWindow () {

const win = new BrowserWindow({

width: 1000,

height: 700,

webPreferences: {

preload: path.join(__dirname, 'preload.js'),

nodeIntegration: false

}

})


win.loadFile('index.html')

}


app.whenReady().then(() => {

createWindow()


app.on('activate', () => {

if (BrowserWindow.getAllWindows().length === 0) createWindow()

})

})


app.on('window-all-closed', () => {

if (process.platform !== 'darwin') app.quit()

})


// Обработка команды PlatformIO

ipcMain.handle('run-pio', async (event, command) => {

return new Promise((resolve, reject) => {

const pio = spawn('platformio', command.split(' '), { cwd: '../firmware' })

let output = ''


pio.stdout.on('data', (data) => { output += data })

pio.stderr.on('data', (data) => { output += data })


pio.on('close', (code) => {

if (code === 0) {

resolve(output)

} else {

reject(new Error(output))

}

})

})

})

EOF

---------------------------------------------------------------------------------------------

Создайте preload.js

cat > preload.js << 'EOF'

const { contextBridge, ipcRenderer } = require('electron')


contextBridge.exposeInMainWorld('platformIO', {

run: (command) => ipcRenderer.invoke('run-pio', command)

})

EOF

------------------------------------------------------------------------------------

Создайте index.html (интерфейс)

cat > index.html << 'EOF'

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Electron + PlatformIO</title>

<style>

body { font-family: Arial, sans-serif; padding: 20px; }

button { padding: 10px 15px; font-size: 16px; margin: 10px 0; }

pre { background: #f0f0f0; padding: 10px; border-radius: 5px; }

</style>

</head>

<body>

<h1>Управление микроконтроллерами</h1>

<button onclick="uploadFirmware()">Загрузить прошивку</button>

<button onclick="monitorSerial()">Монитор порта</button>

<pre id="output"></pre>


<script>

async function uploadFirmware() {

const output = await window.platformIO.run('run --target upload')

document.getElementById('output').textContent = output

}


async function monitorSerial() {

const output = await window.platformIO.run('device monitor')

document.getElementById('output').textContent = output

}

</script>

</body>

</html>

EOF

---------------------------------------------------------------------------------------------

Шаг 3: Настройте PlatformIO

cd ../firmware

platformio init --board esp32dev

---------------------------------------------

Или для другой платы:


--board uno — Arduino Uno

--board bluepill_f103c8 — STM32

=========================================

Пример src/main.cpp (ESP32)

#include <Arduino.h>


void setup() {

Serial.begin(115200);

pinMode(LED_BUILTIN, OUTPUT);

}


void loop() {

Serial.println("Hello from ESP32!");

digitalWrite(LED_BUILTIN, HIGH);

delay(500);

digitalWrite(LED_BUILTIN, LOW);

delay(500);

}

---------------------------------------------------------------------------------------------

Шаг 4: Настройте корневой pa Шаг 4: Настройте корневой package.json

cd ..

cat > package.json << 'EOF'

{

"name": "electron-platformio-iot",

"version": "1.0.0",

"description": "GUI for PlatformIO projects using Electron",

"main": "electron/main.js",

"scripts": {

"start": "electron electron/main.js --no-sandbox --disable-setuid-sandbox",

"firmware:build": "platformio run",

"firmware:upload": "platformio run --target upload",

"firmware:monitor": "platformio device monitor"

},

"devDependencies": {

"electron": "^37.4.0"

}

}

EOF

----------------------------------------------

Шаг 5: Запуск

npm start

------------------------------------------------------------------------------------------

Сохраните шаблон

bash

# Вернитесь в домашнюю папку

cd ~

# Сделайте архив шаблона

tar -czf electron-platformio-template.tar.gz my-iot-app/


Так же в этом разделе:
 
MyTetra Share v.0.67
Яндекс индекс цитирования