Пикабу ТВ
10 постов
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 и работает прямо в браузере. Ничего скачивать и устанавливать не нужно.
Просто открой, вставь свой код или выбери один из примеров, и экспериментируй.
Планы на будущее
Хочу добавить:
Поддержку всех функций Arduino (пока что обрабатываются основные).
Возможность сохранять проекты.
Экспорт в файл .ino.
Подсказки по коду прямо в редакторе.
Если у вас есть идеи или пожелания — пишите, буду рад обратной связи.
Буду рад если поставляете свои коды и напишете какие строки алгоритм не обрабатывает.
Ссылки
Репозиторий на GitHub: https://github.com/GreenMan2022/Arduino-Visual-Code-Editor
Онлайн-версия: https://GreenMan2022.github.io/Arduino-Visual-Code-Editor/
Всем спасибо за внимание! Если проект покажется полезным — ставьте звёздочки на GitHub, заходите, пробуйте, предлагайте идеи.
Сделано с ❤️ для сообщества Arduino.
Показать полностью
