Arduino-Visual-Code-Editor - Блочный редактор кода⁠⁠

Всем привет! 👋

Я давно увлекаюсь Arduino, но постоянно сталкиваюсь с одной проблемой: когда скачиваешь чужой скетч, половину кода не понимаешь. Где тут пин? Какая задержка? А если я хочу поменять светодиод с 13-го пина на 9-й — где это искать?

Или начинаешь учить Arduino, а там куча непонятных слов: pinMode, digitalWrite, delay... Глаза разбегаются.

В общем, я решил сделать себе помощника и написал визуальный редактор кода.

Как это работает

Ты просто вставляешь свой скетч в левое окно, нажимаешь кнопку — и справа появляется тот же код, но уже интерактивный.

Вместо просто int ledPin = 13; ты видишь:

int [ledPin] = [13]

Где квадратные скобки — это поля для ввода. Кликнул по 13 — поменял на 9. Кликнул по ledPin — переименовал в myLed. И всё!

Что можно менять прямо в редакторе

• Тип переменной — хочешь сделать не int, а float или String? Пожалуйста, выпадающий список!

• Имя переменной — переименуй как хочешь.

• Значение — поменяй пин, задержку, текст.

• Режимы пина — OUTPUT, INPUT, INPUT_PULLUP — выбирай из списка.

• Состояние — HIGH или LOW.

• Задержку — можешь написать просто 500, а можешь delayTime / 2 — редактор понимает выражения.

• Условия в if и while — редактируй прямо в строке.

• Циклы for — каждую часть цикла можно поменять отдельно.

И всё это автоматически обновляет код внизу. Скопировал готовый код — вставил в Arduino IDE — залил на плату.

Пример

Был код:

text

int ledPin = 13; int delayTime = 500; void setup() { pinMode(ledPin, OUTPUT); } void loop() { digitalWrite(ledPin, HIGH); delay(delayTime); digitalWrite(ledPin, LOW); delay(delayTime); }

А стал вот такой визуальный конструктор:

text

int [ledPin] = [13] int [delayTime] = [500] pinMode([ledPin], [OUTPUT ▼]) digitalWrite([ledPin], [HIGH ▼]) delay([delayTime])

То есть ты видишь каждую строку, каждое значение, и можешь прямо там всё поменять. Никакого поиска по коду, никакой путаницы.

Почему это удобно

• Новичкам — сразу видно, что делает каждая строка.

• Опытным — быстро менять параметры без лишних движений.

• Преподавателям — показывать студентам, как работает код.

• Всем — экспериментировать без страха ошибиться в синтаксисе.

Где попробовать

Проект выложен на GitHub и работает прямо в браузере. Ничего скачивать и устанавливать не нужно.

🔗 Ссылка: https://GreenMan2022.github.io/Arduino-Visual-Code-Editor/

Просто открой, вставь свой код или выбери один из примеров, и экспериментируй.

Планы на будущее

Хочу добавить:

• Поддержку всех функций Arduino (пока что обрабатываются основные).

• Возможность сохранять проекты.

• Экспорт в файл .ino.

• Подсказки по коду прямо в редакторе.

Если у вас есть идеи или пожелания — пишите, буду рад обратной связи.

Буду рад если поставляете свои коды и напишете какие строки алгоритм не обрабатывает.

Ссылки

• Репозиторий на GitHub: https://github.com/GreenMan2022/Arduino-Visual-Code-Editor

• Онлайн-версия: https://GreenMan2022.github.io/Arduino-Visual-Code-Editor/

Всем спасибо за внимание! Если проект покажется полезным — ставьте звёздочки на GitHub, заходите, пробуйте, предлагайте идеи.

Сделано с ❤️ для сообщества Arduino.