+
+
+
+Главный цикл работает на частоте 1000 Гц. Передача данных между подсистемами происходит через глобальные переменные:
+
+* `t` *(float)* — текущее время шага, *с*.
+* `dt` *(float)* — дельта времени между текущим и предыдущим шагами, *с*.
+* `gyro` *(Vector)* — данные с гироскопа, *рад/с*.
+* `acc` *(Vector)* — данные с акселерометра, *м/с2*.
+* `rates` *(Vector)* — отфильтрованные угловые скорости, *рад/с*.
+* `attitude` *(Quaternion)* — оценка ориентации (положения) дрона.
+* `controls` *(float[])* — пользовательские управляющие сигналы с пульта, нормализованные в диапазоне [-1, 1].
+* `motors` *(float[])* — выходные сигналы на моторы, нормализованные в диапазоне [-1, 1] (возможно вращение в обратную сторону).
+
+## Исходные файлы
+
+Исходные файлы прошивки находятся в директории `flix`. Ключевые файлы:
+
+* [`flix.ino`](https://github.com/okalachev/flix/blob/canonical/flix/flix.ino) — основной входной файл, скетч Arduino. Включает определение глобальных переменных и главный цикл.
+* [`imu.ino`](https://github.com/okalachev/flix/blob/canonical/flix/imu.ino) — чтение данных с датчика IMU (гироскоп и акселерометр), калибровка IMU.
+* [`rc.ino`](https://github.com/okalachev/flix/blob/canonical/flix/rc.ino) — чтение данных с RC-приемника, калибровка RC.
+* [`mavlink.ino`](https://github.com/okalachev/flix/blob/canonical/flix/mavlink.ino) — взаимодействие с QGroundControl через MAVLink.
+* [`estimate.ino`](https://github.com/okalachev/flix/blob/canonical/flix/estimate.ino) — оценка ориентации дрона, комплементарный фильтр.
+* [`control.ino`](https://github.com/okalachev/flix/blob/canonical/flix/control.ino) — управление ориентацией и угловыми скоростями дрона, трехмерный двухуровневый каскадный PID-регулятор.
+* [`motors.ino`](https://github.com/okalachev/flix/blob/canonical/flix/motors.ino) — управление выходными сигналами на моторы через ШИМ.
+
+Вспомогательные файлы включают:
+
+* [`vector.h`](https://github.com/okalachev/flix/blob/canonical/flix/vector.h), [`quaternion.h`](https://github.com/okalachev/flix/blob/canonical/flix/quaternion.h) — реализация библиотек векторов и кватернионов проекта.
+* [`pid.h`](https://github.com/okalachev/flix/blob/canonical/flix/pid.h) — реализация общего ПИД-регулятора.
+* [`lpf.h`](https://github.com/okalachev/flix/blob/canonical/flix/lpf.h) — реализация общего фильтра нижних частот.
diff --git a/docs/book/gyro.md b/docs/book/gyro.md
new file mode 100644
index 0000000..63ea371
--- /dev/null
+++ b/docs/book/gyro.md
@@ -0,0 +1,262 @@
+# Гироскоп
+
+
|
|
+
+MEMS-гироскоп обычно интегрирован в инерциальный модуль (IMU), в котором также находятся акселерометр и магнитометр. Модуль IMU часто называют 9-осевым датчиком, потому что он измеряет:
+
+* Угловую скорость вращения по трем осям (гироскоп).
+* Ускорение по трем осям (акселерометр).
+* Магнитное поле по трем осям (магнитометр).
+
+Flix поддерживает следующие модели IMU:
+
+* InvenSense MPU-9250.
+* InvenSense MPU-6500.
+* InvenSense ICM-20948.
+
+> [!NOTE]
+> MEMS-гироскоп измеряет угловую скорость вращения объекта.
+
+## Интерфейс подключения
+
+Большинство модулей IMU подключаются к микроконтроллеру через интерфейсы I²C и SPI. Оба этих интерфейса являются *шинами данных*, то есть позволяют подключить к одному микроконтроллеру несколько устройств.
+
+**Интерфейс I²C** использует два провода для передачи данных и тактового сигнала. Выбор устройства для коммуникации происходит при помощи передачи адреса устройства на шину. Разные устройства имеют разные адреса, и микроконтроллер может последовательно общаться с несколькими устройствами.
+
+**Интерфейс SPI** использует два провода для передачи данных, еще один для тактового сигнала и еще один для выбора устройства. При этом для каждого устройства на шине выделяется отдельный GPIO-пин для выбора. В разных реализациях этот пин называется CS/NCS (Chip Select) или SS (Slave Select). Когда CS-пин устройства активен (напряжение на нем низкое), устройство выбрано для общения.
+
+В полетных контроллерах IMU обычно подключают через SPI, потому что он обеспечивает значительно бо́льшую скорость передачи данных и меньшую задержку. Подключение IMU через интерфейс I²C (например, в случае нехватки пинов микроконтроллера) возможно, но не рекомендуется.
+
+Подключение IMU к микроконтроллеру ESP32 через интерфейс SPI выглядит так:
+
+|Пин платы IMU|Пин ESP32|
+|-|-|
+|VCC/3V3|3V3|
+|GND|GND|
+|SCL|IO18|
+|SDA *(MOSI)*|IO23|
+|SAO/AD0 *(MISO)*|IO19|
+|NCS|IO5|
+
+Кроме того, многие IMU могут «будить» микроконтроллер при наличии новых данных. Для этого используется пин INT, который подключается к любому GPIO-пину микроконтроллера. При такой конфигурации можно использовать прерывания для обработки новых данных с IMU, вместо периодического опроса датчика. Это позволяет снизить нагрузку на микроконтроллер в сложных алгоритмах управления.
+
+> [!WARNING]
+> На некоторых платах IMU, например, на ICM-20948, отсутствует стабилизатор напряжения, поэтому их нельзя подключать к пину VIN ESP32, который подает напряжение 5 В. Допустимо питание только от пина 3V3.
+
+## Работа с гироскопом
+
+Для взаимодействия с IMU, включая работу с гироскопом, в Flix используется библиотека *FlixPeriph*. Библиотека устанавливается через менеджер библиотек Arduino IDE:
+
+
+
+Чтобы работать с IMU, используется класс, соответствующий модели IMU: `MPU9250`, `MPU6500` или `ICM20948`. Классы для работы с разными IMU имеют единообразный интерфейс для основных операций, поэтому возможно легко переключаться между разными моделями IMU. Датчик MPU-6500 практически полностью совместим с MPU-9250, поэтому фактически класс `MPU9250` поддерживает обе модели.
+
+## Ориентация осей гироскопа
+
+Данные с гироскопа представляют собой угловую скорость вокруг трех осей: X, Y и Z. Ориентацию этих осей у IMU InvenSense можно легко определить по небольшой точке в углу чипа. Оси координат и направление вращения для измерений гироскопа обозначены на диаграмме:
+
+
+
+Расположение осей координат в популярных платах IMU:
+
+|GY-91|MPU-92/65|ICM-20948|
+|-|-|-|
+|
|
|
|
+
+Магнитометр IMU InvenSense обычно является отдельным устройством, интегрированным в чип, поэтому его оси координат могут отличаться. Библиотека FlixPeriph скрывает это различие и приводит данные с магнитометра к системе координат гироскопа и акселерометра.
+
+## Чтение данных
+
+Интерфейс библиотеки FlixPeriph соответствует стилю, принятому в Arduino. Для начала работы с IMU необходимо создать объект соответствующего класса и вызвать метод `begin()`. В конструктор класса передается интерфейс, по которому подключен IMU (SPI или I²C):
+
+```cpp
+#include 
+
+## Конфигурация гироскопа
+
+В коде Flix настройка IMU происходит в функции `configureIMU`. В этой функции настраиваются три основных параметра гироскопа: диапазон измерений, частота сэмплов и частота LPF-фильтра.
+
+### Частота сэмплов
+
+Большинство IMU могут обновлять данные с разной частотой. В полетных контроллерах обычно используется частота обновления от 500 Гц до 8 кГц. Чем выше частота сэмплов, тем выше точность управления полетом, но и больше нагрузка на микроконтроллер. В Flix используется частота сэмплов 1 кГц.
+
+Частота сэмплов устанавливается методом `setSampleRate()`. В Flix используется частота 1 кГц:
+
+```cpp
+IMU.setRate(IMU.RATE_1KHZ_APPROX);
+```
+
+Поскольку не все поддерживаемые IMU могут работать строго на частоте 1 кГц, в библиотеке FlixPeriph существует возможность приближенной настройки частоты сэмплов. Например, у IMU ICM-20948 при такой настройке реальная частота сэмплирования будет равна 1125 Гц.
+
+Другие доступные для установки в библиотеке FlixPeriph частоты сэмплирования:
+
+* `RATE_MIN` — минимальная частота сэмплов для конкретного IMU.
+* `RATE_50HZ_APPROX` — значение, близкое к 50 Гц.
+* `RATE_1KHZ_APPROX` — значение, близкое к 1 кГц.
+* `RATE_8KHZ_APPROX` — значение, близкое к 8 кГц.
+* `RATE_MAX` — максимальная частота сэмплов для конкретного IMU.
+
+#### Диапазон измерений
+
+Большинство MEMS-гироскопов поддерживают несколько диапазонов измерений угловой скорости. Главное преимущество выбора меньшего диапазона — бо́льшая чувствительность. В полетных контроллерах обычно выбирается максимальный диапазон измерений от –2000 до 2000 градусов в секунду, чтобы обеспечить возможность динамичных маневров.
+
+В библиотеке FlixPeriph диапазон измерений гироскопа устанавливается методом `setGyroRange()`:
+
+```cpp
+IMU.setGyroRange(IMU.GYRO_RANGE_2000DPS);
+```
+
+### LPF-фильтр
+
+IMU InvenSense могут фильтровать измерения на аппаратном уровне при помощи фильтра нижних частот (LPF). Flix реализует собственный фильтр для гироскопа, чтобы иметь больше гибкости при поддержке разных IMU. Поэтому для встроенного LPF устанавливается максимальная частота среза:
+
+```cpp
+IMU.setDLPF(IMU.DLPF_MAX);
+```
+
+## Калибровка гироскопа
+
+Как и любое измерительное устройство, гироскоп вносит искажения в измерения. Наиболее простая модель этих искажений делит их на статические смещения (*bias*) и случайный шум (*noise*):
+
+\\[ gyro_{xyz}=rates_{xyz}+bias_{xyz}+noise \\]
+
+Для качественной работы подсистемы оценки ориентации и управления дроном необходимо оценить *bias* гироскопа и учесть его в вычислениях. Для этого при запуске программы производится калибровка гироскопа, которая реализована в функции `calibrateGyro()`. Эта функция считывает данные с гироскопа в состоянии покоя 1000 раз и усредняет их. Полученные значения считаются *bias* гироскопа и в дальнейшем вычитаются из измерений.
+
+Программа для вывода данных с гироскопа с калибровкой:
+
+```cpp
+#include 
+
+График данных с гироскопа в состоянии покоя после калибровки:
+
+
+
+Откалиброванные данные с гироскопа вместе с данными с акселерометра поступают в *подсистему оценки состояния*.
+
+## Дополнительные материалы
+
+* [MPU-9250 datasheet](https://invensense.tdk.com/wp-content/uploads/2015/02/PS-MPU-9250A-01-v1.1.pdf).
+* [MPU-6500 datasheet](https://invensense.tdk.com/wp-content/uploads/2020/06/PS-MPU-6500A-01-v1.3.pdf).
+* [ICM-20948 datasheet](https://invensense.tdk.com/wp-content/uploads/2016/06/DS-000189-ICM-20948-v1.3.pdf).
diff --git a/docs/book/img b/docs/book/img
new file mode 120000
index 0000000..6ffc6ca
--- /dev/null
+++ b/docs/book/img
@@ -0,0 +1 @@
+../img
\ No newline at end of file
diff --git a/docs/img/flixperiph.png b/docs/img/flixperiph.png
new file mode 100644
index 0000000..580f669
Binary files /dev/null and b/docs/img/flixperiph.png differ
diff --git a/docs/img/gyro-calibrated-plotter.png b/docs/img/gyro-calibrated-plotter.png
new file mode 100644
index 0000000..bf48025
Binary files /dev/null and b/docs/img/gyro-calibrated-plotter.png differ
diff --git a/docs/img/gyro-plotter.png b/docs/img/gyro-plotter.png
new file mode 100644
index 0000000..161b60c
Binary files /dev/null and b/docs/img/gyro-plotter.png differ
diff --git a/docs/img/gyro-uncalibrated-plotter.png b/docs/img/gyro-uncalibrated-plotter.png
new file mode 100644
index 0000000..c9a21c9
Binary files /dev/null and b/docs/img/gyro-uncalibrated-plotter.png differ
diff --git a/docs/img/gyroscope.jpg b/docs/img/gyroscope.jpg
new file mode 100644
index 0000000..eddca31
Binary files /dev/null and b/docs/img/gyroscope.jpg differ
diff --git a/docs/img/imu-axes.svg b/docs/img/imu-axes.svg
new file mode 100644
index 0000000..791a2ea
--- /dev/null
+++ b/docs/img/imu-axes.svg
@@ -0,0 +1,119 @@
+
diff --git a/docs/img/mpu9250.jpg b/docs/img/mpu9250.jpg
new file mode 100644
index 0000000..404c310
Binary files /dev/null and b/docs/img/mpu9250.jpg differ
diff --git a/docs/js.js b/docs/js.js
new file mode 100644
index 0000000..33e74f7
--- /dev/null
+++ b/docs/js.js
@@ -0,0 +1,7 @@
+// Enable zoom on images larger than 300px
+document.querySelectorAll('.content img').forEach(function (img) {
+ var width = img.getAttribute('width');
+ if (!width || width >= 300) {
+ img.setAttribute('data-action', 'zoom');
+ }
+});
diff --git a/docs/theme/index.hbs b/docs/theme/index.hbs
new file mode 100644
index 0000000..af88d5b
--- /dev/null
+++ b/docs/theme/index.hbs
@@ -0,0 +1,336 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/zoom.css b/docs/zoom.css
new file mode 100644
index 0000000..96d787b
--- /dev/null
+++ b/docs/zoom.css
@@ -0,0 +1,31 @@
+img[data-action="zoom"] {
+ cursor: zoom-in;
+}
+.zoom-img,
+.zoom-img-wrap {
+ position: relative;
+ z-index: 666;
+ transition: all 300ms;
+}
+img.zoom-img {
+ cursor: zoom-out;
+}
+.zoom-overlay {
+ cursor: zoom-out;
+ z-index: 420;
+ background: #fff;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ filter: "alpha(opacity=0)";
+ opacity: 0;
+ transition: opacity 300ms;
+}
+.zoom-overlay-open .zoom-overlay {
+ filter: "alpha(opacity=100)";
+ opacity: 1;
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL2Nzcy96b29tLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGdCQUFnQjtDQUNqQjtBQUNEOztFQUVFLG1CQUFtQjtFQUNuQixhQUFhO0VBQ2Isc0JBQXNCO0NBQ3ZCO0FBQ0Q7RUFDRSxpQkFBaUI7Q0FDbEI7QUFDRDtFQUNFLGlCQUFpQjtFQUNqQixhQUFhO0VBQ2IsaUJBQWlCO0VBQ2pCLGdCQUFnQjtFQUNoQixPQUFPO0VBQ1AsUUFBUTtFQUNSLFNBQVM7RUFDVCxVQUFVO0VBQ1YsMkJBQTJCO0VBQzNCLFdBQVc7RUFDWCwrQkFBK0I7Q0FDaEM7QUFDRDtFQUNFLDZCQUE2QjtFQUM3QixXQUFXO0NBQ1oiLCJmaWxlIjoiem9vbS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJpbWdbZGF0YS1hY3Rpb249XCJ6b29tXCJdIHtcbiAgY3Vyc29yOiB6b29tLWluO1xufVxuLnpvb20taW1nLFxuLnpvb20taW1nLXdyYXAge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIHotaW5kZXg6IDY2NjtcbiAgdHJhbnNpdGlvbjogYWxsIDMwMG1zO1xufVxuaW1nLnpvb20taW1nIHtcbiAgY3Vyc29yOiB6b29tLW91dDtcbn1cbi56b29tLW92ZXJsYXkge1xuICBjdXJzb3I6IHpvb20tb3V0O1xuICB6LWluZGV4OiA0MjA7XG4gIGJhY2tncm91bmQ6ICNmZmY7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgdG9wOiAwO1xuICBsZWZ0OiAwO1xuICByaWdodDogMDtcbiAgYm90dG9tOiAwO1xuICBmaWx0ZXI6IFwiYWxwaGEob3BhY2l0eT0wKVwiO1xuICBvcGFjaXR5OiAwO1xuICB0cmFuc2l0aW9uOiAgICAgIG9wYWNpdHkgMzAwbXM7XG59XG4uem9vbS1vdmVybGF5LW9wZW4gLnpvb20tb3ZlcmxheSB7XG4gIGZpbHRlcjogXCJhbHBoYShvcGFjaXR5PTEwMClcIjtcbiAgb3BhY2l0eTogMTtcbn1cbiJdfQ== */
\ No newline at end of file
diff --git a/docs/zoom.js b/docs/zoom.js
new file mode 100644
index 0000000..1dd271c
--- /dev/null
+++ b/docs/zoom.js
@@ -0,0 +1,281 @@
+/* https://github.com/spinningarrow/zoom-vanilla.js
+
+The MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+*/
+
++function () { "use strict";
+ var OFFSET = 80
+
+ // From http://youmightnotneedjquery.com/#offset
+ function offset(element) {
+ var rect = element.getBoundingClientRect()
+ var scrollTop = window.pageYOffset ||
+ document.documentElement.scrollTop ||
+ document.body.scrollTop ||
+ 0
+ var scrollLeft = window.pageXOffset ||
+ document.documentElement.scrollLeft ||
+ document.body.scrollLeft ||
+ 0
+ return {
+ top: rect.top + scrollTop,
+ left: rect.left + scrollLeft
+ }
+ }
+
+ function zoomListener() {
+ var activeZoom = null
+ var initialScrollPosition = null
+ var initialTouchPosition = null
+
+ function listen() {
+ document.body.addEventListener('click', function (event) {
+ if (event.target.getAttribute('data-action') !== 'zoom' ||
+ event.target.tagName !== 'IMG') return
+
+ zoom(event)
+ })
+ }
+
+ function zoom(event) {
+ event.stopPropagation()
+
+ if (document.body.classList.contains('zoom-overlay-open')) return
+
+ if (event.metaKey || event.ctrlKey) return openInNewWindow()
+
+ closeActiveZoom({ forceDispose: true })
+
+ activeZoom = vanillaZoom(event.target)
+ activeZoom.zoomImage()
+
+ addCloseActiveZoomListeners()
+ }
+
+ function openInNewWindow() {
+ window.open(event.target.getAttribute('data-original') ||
+ event.target.currentSrc ||
+ event.target.src,
+ '_blank')
+ }
+
+ function closeActiveZoom(options) {
+ options = options || { forceDispose: false }
+ if (!activeZoom) return
+
+ activeZoom[options.forceDispose ? 'dispose' : 'close']()
+ removeCloseActiveZoomListeners()
+ activeZoom = null
+ }
+
+ function addCloseActiveZoomListeners() {
+ // todo(fat): probably worth throttling this
+ window.addEventListener('scroll', handleScroll)
+ document.addEventListener('click', handleClick)
+ document.addEventListener('keyup', handleEscPressed)
+ document.addEventListener('touchstart', handleTouchStart)
+ document.addEventListener('touchend', handleClick)
+ }
+
+ function removeCloseActiveZoomListeners() {
+ window.removeEventListener('scroll', handleScroll)
+ document.removeEventListener('keyup', handleEscPressed)
+ document.removeEventListener('click', handleClick)
+ document.removeEventListener('touchstart', handleTouchStart)
+ document.removeEventListener('touchend', handleClick)
+ }
+
+ function handleScroll(event) {
+ if (initialScrollPosition === null) initialScrollPosition = window.pageYOffset
+ var deltaY = initialScrollPosition - window.pageYOffset
+ if (Math.abs(deltaY) >= 40) closeActiveZoom()
+ }
+
+ function handleEscPressed(event) {
+ if (event.keyCode == 27) closeActiveZoom()
+ }
+
+ function handleClick(event) {
+ event.stopPropagation()
+ event.preventDefault()
+ closeActiveZoom()
+ }
+
+ function handleTouchStart(event) {
+ initialTouchPosition = event.touches[0].pageY
+ event.target.addEventListener('touchmove', handleTouchMove)
+ }
+
+ function handleTouchMove(event) {
+ if (Math.abs(event.touches[0].pageY - initialTouchPosition) <= 10) return
+ closeActiveZoom()
+ event.target.removeEventListener('touchmove', handleTouchMove)
+ }
+
+ return { listen: listen }
+ }
+
+ var vanillaZoom = (function () {
+ var fullHeight = null
+ var fullWidth = null
+ var overlay = null
+ var imgScaleFactor = null
+
+ var targetImage = null
+ var targetImageWrap = null
+ var targetImageClone = null
+
+ function zoomImage() {
+ var img = document.createElement('img')
+ img.onload = function () {
+ fullHeight = Number(img.height)
+ fullWidth = Number(img.width)
+ zoomOriginal()
+ }
+ img.src = targetImage.currentSrc || targetImage.src
+ }
+
+ function zoomOriginal() {
+ targetImageWrap = document.createElement('div')
+ targetImageWrap.className = 'zoom-img-wrap'
+ targetImageWrap.style.position = 'absolute'
+ targetImageWrap.style.top = offset(targetImage).top + 'px'
+ targetImageWrap.style.left = offset(targetImage).left + 'px'
+
+ targetImageClone = targetImage.cloneNode()
+ targetImageClone.style.visibility = 'hidden'
+
+ targetImage.style.width = targetImage.offsetWidth + 'px'
+ targetImage.parentNode.replaceChild(targetImageClone, targetImage)
+
+ document.body.appendChild(targetImageWrap)
+ targetImageWrap.appendChild(targetImage)
+
+ targetImage.classList.add('zoom-img')
+ targetImage.setAttribute('data-action', 'zoom-out')
+
+ overlay = document.createElement('div')
+ overlay.className = 'zoom-overlay'
+
+ document.body.appendChild(overlay)
+
+ calculateZoom()
+ triggerAnimation()
+ }
+
+ function calculateZoom() {
+ targetImage.offsetWidth // repaint before animating
+
+ var originalFullImageWidth = fullWidth
+ var originalFullImageHeight = fullHeight
+
+ var maxScaleFactor = originalFullImageWidth / targetImage.width
+
+ var viewportHeight = window.innerHeight - OFFSET
+ var viewportWidth = window.innerWidth - OFFSET
+
+ var imageAspectRatio = originalFullImageWidth / originalFullImageHeight
+ var viewportAspectRatio = viewportWidth / viewportHeight
+
+ if (originalFullImageWidth < viewportWidth && originalFullImageHeight < viewportHeight) {
+ imgScaleFactor = maxScaleFactor
+ } else if (imageAspectRatio < viewportAspectRatio) {
+ imgScaleFactor = (viewportHeight / originalFullImageHeight) * maxScaleFactor
+ } else {
+ imgScaleFactor = (viewportWidth / originalFullImageWidth) * maxScaleFactor
+ }
+ }
+
+ function triggerAnimation() {
+ targetImage.offsetWidth // repaint before animating
+
+ var imageOffset = offset(targetImage)
+ var scrollTop = window.pageYOffset
+
+ var viewportY = scrollTop + (window.innerHeight / 2)
+ var viewportX = (window.innerWidth / 2)
+
+ var imageCenterY = imageOffset.top + (targetImage.height / 2)
+ var imageCenterX = imageOffset.left + (targetImage.width / 2)
+
+ var translateY = Math.round(viewportY - imageCenterY)
+ var translateX = Math.round(viewportX - imageCenterX)
+
+ var targetImageTransform = 'scale(' + imgScaleFactor + ')'
+ var targetImageWrapTransform =
+ 'translate(' + translateX + 'px, ' + translateY + 'px) translateZ(0)'
+
+ targetImage.style.webkitTransform = targetImageTransform
+ targetImage.style.msTransform = targetImageTransform
+ targetImage.style.transform = targetImageTransform
+
+ targetImageWrap.style.webkitTransform = targetImageWrapTransform
+ targetImageWrap.style.msTransform = targetImageWrapTransform
+ targetImageWrap.style.transform = targetImageWrapTransform
+
+ document.body.classList.add('zoom-overlay-open')
+ }
+
+ function close() {
+ document.body.classList.remove('zoom-overlay-open')
+ document.body.classList.add('zoom-overlay-transitioning')
+
+ targetImage.style.webkitTransform = ''
+ targetImage.style.msTransform = ''
+ targetImage.style.transform = ''
+
+ targetImageWrap.style.webkitTransform = ''
+ targetImageWrap.style.msTransform = ''
+ targetImageWrap.style.transform = ''
+
+ if (!'transition' in document.body.style) return dispose()
+
+ targetImageWrap.addEventListener('transitionend', dispose)
+ targetImageWrap.addEventListener('webkitTransitionEnd', dispose)
+ }
+
+ function dispose() {
+ targetImage.removeEventListener('transitionend', dispose)
+ targetImage.removeEventListener('webkitTransitionEnd', dispose)
+
+ if (!targetImageWrap || !targetImageWrap.parentNode) return
+
+ targetImage.classList.remove('zoom-img')
+ targetImage.style.width = ''
+ targetImage.setAttribute('data-action', 'zoom')
+
+ targetImageClone.parentNode.replaceChild(targetImage, targetImageClone)
+ targetImageWrap.parentNode.removeChild(targetImageWrap)
+ overlay.parentNode.removeChild(overlay)
+
+ document.body.classList.remove('zoom-overlay-transitioning')
+ }
+
+ return function (target) {
+ targetImage = target
+ return { zoomImage: zoomImage, close: close, dispose: dispose }
+ }
+ }())
+
+ zoomListener().listen()
+}()
+
+
+
+ {{#if live_reload_endpoint}}
+
+
+ {{/if}}
+
+ {{#if google_analytics}}
+
+
+ {{/if}}
+
+ {{#if playground_line_numbers}}
+
+ {{/if}}
+
+ {{#if playground_copyable}}
+
+ {{/if}}
+
+ {{#if playground_js}}
+
+
+
+
+
+ {{/if}}
+
+ {{#if search_js}}
+
+
+
+ {{/if}}
+
+
+
+
+
+
+ {{#each additional_js}}
+
+ {{/each}}
+
+ {{#if is_print}}
+ {{#if mathjax_support}}
+
+ {{else}}
+
+ {{/if}}
+ {{/if}}
+
+
+ {{> header}}
+
+
+
+ {{#if search_enabled}}
+
+
+
+
+
+
+
+
+ {{/if}}
+
+
+
+
+
+
+ {{{ content }}}
+
+
+
+
+