Временная диаграмма показывает, как меняются логические уровни сигналов во времени и в каком порядке: какой фронт тактирует данные, когда приёмник защёлкивает бит, где начинается и кончается кадр. Такими диаграммами начинается описание любого цифрового интерфейса в даташите, и их же рисуют в документации к своим платам и прошивкам. Рисовать их в графическом редакторе долго, а править ещё дольше, поэтому в электронике прижилась текстовая запись: один символ — один такт.
Как записать сигнал
Каждая строка — один сигнал: имя, двоеточие, строка диаграммы, затем подписи полей данных через пробел. Пример: CS: 10......1 — сигнал выбора, который опускается в начале и поднимается через восемь тактов.
| Символ | Что рисует |
|---|---|
0, 1 | низкий и высокий уровень, переход — с наклонным фронтом |
l, h | низкий и высокий уровень, переход — с вертикальным фронтом, как у WaveDrom |
p, n | период такта с нарастающего или спадающего фронта, фронты вертикальные; P, N — со стрелкой на фронте |
x | неизвестное или безразличное значение — заштрихованное поле |
z | третье (высокоимпедансное) состояние — линия посередине |
=, 2…9 | поле данных со следующей подписью; цифра выбирает цвет поля |
. | предыдущее состояние продолжается ещё один такт; такт повторяет период |
| | то же, что точка, с меткой разрыва: часть времени пропущена |
- | ничего не рисовать (расширение gaw.ru для строк-подписей) |
Пустая строка или --- отделяет группы сигналов промежутком, строка с # — комментарий.
Команды начинаются с @:
@title текст— заголовок над диаграммой;@scale 1.5— ширина такта относительно обычной, от 0,5 до 4;@mark 3.5 START— вертикальная пунктирная отметка на моменте 3,5 такта с подписью: так отмечают START и STOP, момент выборки, срабатывание прерывания.
Если в строке ошибка, редактор называет её номер и рисует остальное.
Примеры по документации
Три примера в редакторе нарисованы по первоисточникам, и тесты страницы проверяют каждый из них на условия из документа.
I²C — по NXP UM10204. Условие START — спад SDA, пока SCL в высоком уровне, STOP — подъём SDA при высоком SCL (раздел 3.1.4, рис. 5). Между ними SDA меняется только при низком SCL и стабильна, пока SCL высокий (3.1.3). В примере ведущий передаёт адрес 0x50 старшим битом вперёд, бит R/W = 0 (запись) и получает ACK: на девятом такте ведомый держит SDA в низком уровне (3.1.6). Транзакцию целиком, с данными и временами по режимам шины, разбирает калькулятор транзакции I²C.
SPI, режим 0 — по справочному руководству ST RM0008 (раздел 25.3.1, рис. 240). При CPOL = 0 линия SCK в покое низкая, при CPHA = 0 данные захватываются по первому фронту — нарастающему. Значит, передатчик выставляет старший бит сразу после спада NSS, а следующие биты — по спадающим фронтам SCK. Пока NSS в высоком уровне, линия MISO показана в третьем состоянии: невыбранный ведомый не должен управлять общей линией, иначе он мешал бы другим ведомым на шине. Остальные три режима и предельную частоту считает калькулятор кадра SPI.
UART 8E1 — по даташиту ATmega328P, Microchip DS40002061B (раздел 20.4, рис. 20-4). Свободная линия — высокий уровень, кадр открывает старт-бит низкого уровня, данные идут младшим битом вперёд, за ними бит чётности и стоп-бит высокого уровня. Символ «A» = 0x41 содержит две единицы, поэтому бит чётной чётности — исключающее ИЛИ битов данных — равен нулю (раздел 20.4.1). Кадр с любой скоростью и форматом разберёт калькулятор кадра UART.
Нотация WaveDrom и отличия
Символы строки диаграммы — подмножество нотации WaveDrom, открытого JavaScript-движка временных диаграмм, которую понимают многие генераторы документации. Поддерживаются 0 1 h l p n P N x z = 2…9 . |; строку из поля wave, в которой нет других символов, можно перенести без правок. Отличия:
- описание — не JSON, а строки «имя: диаграмма подписи»; подписи полей идут в той же строке, а не в массиве
data; - нет стрелок между точками диаграммы (
nodeиedge), вложенных групп сигналов и блоковheadиfoot— вместо них отметки@markи заголовок@title; - нет символов
uиd(подтяжка к питанию и к земле) — используйтеzи подпись; не поддерживаются иH,L,<,>и другие символы полного набора WaveDrom — редактор назовёт такой символ в сообщении об ошибке; - символ
-— наше расширение для пустых участков.
Экспорт и ссылка
Кнопка «Скачать SVG» сохраняет векторный файл: его можно вставить в документацию на Markdown, в отчёт LibreOffice или доработать в Inkscape. «Скачать PNG» рисует ту же диаграмму с удвоенным разрешением. Цвета в файлах фиксированные, на белом фоне, чтобы диаграмма одинаково выглядела в светлой и тёмной теме читателя.
Текст диаграммы хранится в адресе страницы после знака # — кнопка копирования даёт ссылку, по которой откроется та же диаграмма. Эту часть адреса браузер на сервер не передаёт. Чтобы вернуться к диаграмме позже, её можно сохранить в браузере под своим названием.
Ограничения
- До 40 сигналов, до 200 тактов в строке и до 4000 символов в описании — этого хватает на кадр любого из распространённых интерфейсов; длинные посылки удобнее показывать с разрывом
|. - Время на диаграмме условное: такты одинаковой ширины, без масштаба в наносекундах. Времена установки и удержания, длительности фронтов берут из таблиц даташита; для I²C их по режимам шины считает калькулятор TIMINGR STM32.
- Ширина колонки имён и подписей рассчитывается по моноширинному шрифту; длинная подпись в коротком поле выходит за его границы — увеличьте
@scaleили растяните поле точками.
Частые вопросы
Чем этот редактор отличается от WaveDrom?
Редактор понимает подмножество символов поля wave из WaveDrom: 0 1 h l p n P N x z = 2–9 . и |. Строку, в которой нет других символов, можно перенести без правок; символов u, d, H, L, <, > и остальных из полного набора WaveDrom редактор не знает и сообщает об ошибке. Описание пишется не в JSON, а построчно: имя, двоеточие, диаграмма и подписи. Нет стрелок между узлами (node и edge), групп сигналов и конфигурации head и foot; вместо них — вертикальные отметки @mark и заголовок @title. Код рисования свой, внешних библиотек страница не загружает.
Куда сохраняется диаграмма и видит ли её сервер?
Текст диаграммы хранится в адресе страницы после знака #. Эта часть адреса браузер на сервер не отправляет, поэтому ссылку можно переслать, а сама диаграмма нигде, кроме ссылки, не хранится. Кнопка «Сохранить» кладёт копию в хранилище этого браузера, на другом устройстве её не будет.
Как нарисовать шину с данными?
Поле данных — символ = или цифра от 2 до 9 (цифра задаёт цвет), точки продлевают поле, а подписи пишутся после диаграммы через пробел: «DATA: x=.=.x 0xA5 0x3C». Подпись с пробелами берут в двойные кавычки. Два поля подряд рисуются со скрещиванием линий — так на диаграммах показывают смену значения на шине.
Как показать тактовый сигнал?
Символ p — один период такта, который начинается с нарастающего фронта, n — со спадающего; точки после него повторяют период. P и N рисуют то же со стрелкой на активном фронте. Если нужно показать сигнал с точностью до полупериода, как в примере SPI, такт записывают уровнями 0 и 1: тогда один символ — половина периода.
Можно ли вставить диаграмму в документацию?
Да: SVG — векторный файл, он масштабируется без потерь и открывается в браузере, Inkscape, draw.io, LibreOffice и вставляется в Markdown-документацию. PNG рисуется с удвоенным разрешением — для сообщений и презентаций. В экспортированных файлах светлый фон и фиксированные цвета, они не зависят от темы сайта.
Источники
- NXP UM10204. I2C-bus specification and user manual, Rev. 7.0, 1 October 2021 — раздел 3.1.3 и рис. 4 — SDA стабильна, пока SCL в высоком уровне, и меняется только при низком SCL; 3.1.4 и рис. 5 — START: спад SDA при высоком SCL, STOP: подъём SDA при высоком SCL; 3.1.5 — старшим битом вперёд; 3.1.6 — ACK: приёмник держит SDA в низком уровне на девятом такте; 3.1.10 — 7-битный адрес и бит R/W, ноль — запись
- STMicroelectronics RM0008. Reference manual STM32F101xx, STM32F102xx, STM32F103xx, STM32F105xx and STM32F107xx, Rev 21, February 2021 — раздел 25.3.1, «Clock phase and clock polarity», рис. 240 «Data clock timing diagram»: CPOL = 0 — SCK в покое низкий; CPHA = 0 — данные захватываются по первому фронту SCK (нарастающему при CPOL = 0); при LSBFIRST = 0 первым идёт старший бит
- Microchip DS40002061B. ATmega48A/PA/88A/PA/168A/PA/328/P Data Sheet, 2020 — раздел 20.4 «Frame Formats», рис. 20-4: старт-бит всегда низкий, затем данные младшим битом вперёд, бит чётности, стоп-бит всегда высокий, свободная линия (IDLE) — высокий уровень; 20.4.1: чётность — исключающее ИЛИ битов данных, для нечётной она инвертируется
- WaveDrom — digital timing diagram rendering engine (описание нотации wave) — откуда взято подмножество символов строки wave: 0 1 h l p n P N x z = 2–9 . |; редактор gaw.ru — собственная реализация этого подмножества, без кода WaveDrom
Где пригодится
Встроить калькулятор на свой сайт
Скопируйте код и вставьте его в HTML страницы, статьи или вики. Виджет бесплатный, без рекламы, счётчиков и cookie. Условие одно — ссылка на GAW под рамкой остаётся на месте. Подробнее о виджетах
<iframe src="https://gaw.ru/embed/timing-diagram-editor/" title="Редактор временных диаграмм" width="100%" height="640" style="border:1px solid #e3e5e9;border-radius:8px" loading="lazy" allow="clipboard-write"></iframe>
<p style="margin:6px 0 0;font-size:14px">Калькулятор: <a href="https://gaw.ru/tools/timing-diagram-editor/">Редактор временных диаграмм</a> — GAW.ru</p>Автоподстройка высоты рамки
Если сайт разрешает скрипты, добавьте этот код один раз в любом месте страницы: рамка будет менять высоту вместе с результатом расчёта.
<script>window.addEventListener("message",function(e){if(e.origin!=="https://gaw.ru"||!e.data||e.data.type!=="gaw:embed-height")return;var f=document.querySelectorAll('iframe[src^="https://gaw.ru/embed/"]');for(var i=0;i<f.length;i++)if(f[i].contentWindow===e.source)f[i].style.height=e.data.height+"px"})</script>Обновлено .
Нашли ошибку в расчёте?