Разработка специализированного графика для отображения ЭКГ с использованием Canvas на плафторме .NET for Android

1. Введение

В современной медицине точное отображение электрокардиограммы (ЭКГ) играет ключевую роль в диагностике и мониторинге сердечно-сосудистых заболеваний. Разработка специализированного графика для визуализации ЭКГ в реальном времени на мобильных устройствах требует не только глубокого понимания медицинских стандартов, но и тщательного выбора технологий для реализации. В статье мы рассмотрим процесс создания такого графика с использованием технологии Canvas, обсудим возникшие проблемы и найденные решения.

2. Выбор технологии: почему Canvas?

При разработке графика ЭКГ выбор Canvas в качестве основной технологии был обусловлен несколькими ключевыми факторами:

1. Высокая точность отображения: Canvas позволяет контролировать отрисовку на уровне пикселей, что критически важно для соответствия стандартной миллиметровой сетке ЭКГ.

2. Эффективность в отрисовке линейных элементов: ЭКГ-сигнал представляет собой набор соединенных линий, и Canvas предоставляет оптимизированные методы для их отрисовки.

3. Полный контроль над процессом отрисовки: Есть возможность настроить отображение различных элементов графика (оси, сетка, сигнал) в соответствии с требуемыми медицинскими стандартами.

4. Гибкость в реализации интерактивности: Canvas облегчает реализацию динамического обновления графика, масштабирования и перемещения при помощи жестов.

5. Оптимизация производительности: Во время длительных сеансов записи накапливается большой объем информации, но благодаря собственной реализации графика мы можем точно контролировать расход памяти и рисовать только видимую его часть (см. gif ниже).

Использование Canvas обеспечивает необходимый баланс между точностью отображения, производительностью и гибкостью разработки, что делает его оптимальным выбором для создания специализированного графика ЭКГ.

3. Первоначальная реализация графика ЭКГ

// scaledPointSize - зависит от DPI  for (int i = position, valuesCount, i < _ecg.Count   && valuesCount * scaledPointSize < Width; valuesCount++, i++) { ECGSample sample = _ecg[i];  float sampleX = (float)(valuesCount * scaledPointSize);  float sampleY = graphCenter - (sample.Value * scaledPointSize);  chartLines.AddRange(new [] { prevSampleX, prevSampleY, sampleX, sampleY });  prevSampleX = sampleX; prevSampleY = sampleY; }  canvas.DrawLines(chartLines.ToArray(), Style.GraphPaint);

Код отображения сетки

for (int y = 0; y < Height + microCellSize; y += microCellSize) {         microCellsLines.AddRange(new float[] { 0, y, Width, y }); }   for (int x = 0; x < Width + microCellSize; x += microCellSize) {     microCellsLines.AddRange(new float[] { x, 0, x, Height }); }   for (int y = 0; y < Height + cellSize; y += cellSize) {         cellsLines.AddRange(new float[] { 0, y, Width, y }); }   for (int x = 0; x < Width + cellSize; x += cellSize) {     cellsLines.AddRange(new float[] { x, 0, x, Height }); }   canvas.DrawLines(microCellsLines.ToArray(), Style.MicroCellPaint); canvas.DrawLines(cellsLines.ToArray(), Style.CellPaint);

Код создает два набора линий для большой сетки (одна клетка — 5 миллиметров) и для маленькой (одна клетка — 1 миллиметр). Затем происходит отрисовка при помощи DrawLines.

P.S. В данном примере показан сам механизм отрисовки без учета DPI.

4. Отрисовка и синхронизация дополнительного графика

Одной из интересных задач стало отображение дополнительного графика, который должен двигаться синхронно с основным графиком ЭКГ, несмотря на отличающуюся частоту дискретизации. Решение заключалось в привязке значений второго графика к точкам графика ЭКГ:

// scaledPointSize - зависит от DPI  for (int i = position, valuesCount, i < _ecg.Count && valuesCount * scaledPointSize < Width; valuesCount++, i++) { ECGSample sample = _ecg[i]; float sampleX = (float)(valuesCount * scaledPointSize);  float sampleY = graphCenter - (sample.Value * scaledPointSize);  chartLines.AddRange(new [] { prevSampleX, prevSampleY, sampleX, sampleY });  prevSampleX = sampleX; prevSampleY = sampleY;  if (sample.Activity != -1)   {       float extraChartSampleY = CalculateExtraChartY(sample.ExtraChartValue);          extraChartLines.AddRange(new[] {      prevExtraChartSampleX,      prevExtraChartSampleY,      sampleX, // берем X координату от основого графика, тем самым достагаем синхронизации     extraChartSampleY });          prevExtraChartSampleY = extraChartSampleY;         prevExtraChartSampleX = sampleX; }                                                                                                                   } canvas.DrawLines(chartLines.ToArray(), Style.GraphPaint); canvas.DrawLines(extraChartLines.ToArray(), Style.ExtraChartPaint);

Результат

5. Оптимизация производительности

В процессе разработки графика ЭКГ одной из ключевых задач стала оптимизация производительности отрисовки. Изначальная реализация с использованием метода DrawPatch показала недостаточную эффективность при работе с большими объемами данных ЭКГ. В ходе исследования и экспериментов был осуществлен переход к методу DrawLines, что привело к значительному повышению производительности.

Причины перехода:

1. Ограничения DrawPatch:

   • Метод DrawPatch, несмотря на свою универсальность, оказался недостаточно оптимизированным для специфики отрисовки графика ЭКГ.

   • При большом количестве точек данных производительность начинала существенно падать.

2. Преимущества DrawLines:

   • В результате поиска альтернативных решений было обнаружено, что метод DrawLines использует аппаратную акселерацию.

   • Аппаратная акселерация позволяет задействовать возможности графического процессора для ускорения отрисовки линий.

Результаты оптимизации:

• После перехода на метод DrawLines производительность отрисовки графика ЭКГ выросла в два с половиной раза. (см. результаты бенчмарка ниже)

• Рост производительности позволил обрабатывать и отображать большие объемы данных ЭКГ с высокой частотой обновления, что критически важно для точного отображения динамики сердечного ритма в реальном времени.

// Бенчмарк, отрисока 200 точек графика 1000 раз  Stopwatch watchDrawLines = new Stopwatch();   Stopwatch watchDrawPath = new Stopwatch();  for (int r = 0; r < 1000; r++) { for (int i = position, valuesCount, i < _ecg.Count   && valuesCount * scaledPointSize < Width; valuesCount++, i++) { ECGSample sample = _ecg[i];  float sampleX = (float)(valuesCount * scaledPointSize);  float sampleY = graphCenter - (sample.Value * scaledPointSize);  watchDrawLines.Start();   chartLines.AddRange(new [] { prevSampleX, prevSampleY, sampleX, sampleY }); watchDrawLines.Stop();  watchDrawPath.Start();   chartPath.LineTo(sampleX, sampleY);   watchDrawPath.Stop();  prevSampleX = sampleX; prevSampleY = sampleY; }  watchDrawLines.Start();   canvas.DrawLines(chartLines.ToArray(), Style.GraphPaint);   watchDrawLines.Stop();  watchDrawPath.Start();   canvas.DrawPath(chartPath, Style.GraphPaint);   watchDrawPath.Stop(); }  Debug.WriteLine($"Draw lines time: {watchDrawLines.Elapsed.TotalMilliseconds}"); Debug.WriteLine($"Draw path time: {watchDrawPath.Elapsed.TotalMilliseconds}");  // Output: // Draw lines time: 334.0327 // Draw path time: 846.5474

6. Реализация интерактивности

Для реализации интерактивности мы не использовали стандартные решения или сторонние библиотеки. Поиск и интеграция готового решения, удовлетворяющего всем нашим требованиям, могли занять больше времени, чем разработка собственного. Кроме того, с помощью собственного решения мы добились большей гибкости, что было крайне важно с учетом специфики проекта. В результате был использован стандартный event Touch и добавлена поддержка как простых жестов одним касанием, так и мультитач-жестов.

private void OnTouch(object? sender, TouchEventArgs e) { if (e.Event == null) return;  if (e.Event.PointerCount == 2) { StopSingleTouchEventHandling(); HandleTwoTouches(e.Event); } else if (e.Event.PointerCount == 1) { StopTwoTouchesEventHandling(); HandleSingleTouch(e.Event); } }

 private void HandleSingleTouch(MotionEvent touchEvent) {     if (PinchGestureStarted)         return;      if (touchEvent.Action == MotionEventActions.Down && !MoveGestureStarted)     {         _touchXPosition = touchEvent.GetX();         _touchYPosition = touchEvent.GetY();     }     else if (MoveGestureStarted && touchEvent.Action == MotionEventActions.Move)     {         float deltaX = (_touchXPosition.Value - touchEvent.GetX());         float deltaY = (_touchYPosition.Value - touchEvent.GetY());  // Далее на основе полученных дельт вычисляется сдвиг графика под двум осям     } }

 private void HandleTwoTouches(MotionEvent touchEvent) {     PointF GetPinchGestureDelta(PointF start1, PointF start2, PointF end1, PointF end2)     {         float initialDistanceX = Math.Abs(start2.X - start1.X);         float initialDistanceY = Math.Abs(start2.Y - start1.Y);          float finalDistanceX = Math.Abs(end2.X - end1.X);         float finalDistanceY = Math.Abs(end2.Y - end1.Y);          float deltaX = finalDistanceX / initialDistanceX;         float deltaY = finalDistanceY / initialDistanceY;          return new PointF(deltaX, deltaY);     }      int point1Id = touchEvent.GetPointerId(0);     int point2Id = touchEvent.GetPointerId(1);      PointF point1 = new PointF(touchEvent.GetX(point1Id), touchEvent.GetY(point1Id));          PointF point2 = new PointF(touchEvent.GetX(point2Id), touchEvent.GetY(point2Id));      if ((touchEvent.Action == MotionEventActions.Pointer1Down || touchEvent.Action == MotionEventActions.Pointer2Down) && !PinchGestureStarted)     {         _startPoint1 = point1;         _startPoint2 = point2;         _startSampleHorizontalScale = SampleHorizontalScale;         _startSampleVerticalScale = SampleVerticalScale;     }     else if (touchEvent.Action == MotionEventActions.Move && PinchGestureStarted)     {         PointF ratios = GetPinchGestureDelta(_startPoint1.Value, _startPoint2.Value, point1, point2);          SampleVerticalScale = _startSampleVerticalScale.Value * ratios.Y;         SampleHorizontalScale = _startSampleHorizontalScale.Value * ratios.X;     }     else if (touchEvent.Action == MotionEventActions.Pointer1Up || touchEvent.Action == MotionEventActions.Pointer2Up && PinchGestureStarted)     {         StopTwoTouchesEventHandling();     }Код по двум точкам определяет вертикальную и горизонтальную дельту, отталкиваясь от начальных точек соприкосновения. Далее по этим дельтам происходит масштабирование графика. }

7. Тестирование и валидация

Одним из критических аспектов разработки специализированного графика ЭКГ является обеспечение точности отображения данных. Для проверки соответствия отображаемой миллиметровой сетки реальным физическим размерам был разработан следующий подход:

Первоначальный метод проверки и его ограничения:

1. Использование физической линейки:

   • Изначально была предпринята попытка измерения с помощью обычной физической линейки.

   • Выявленные проблемы:

     • Сенсорный экран реагировал на касания линейки, что мешало точным измерениям.

     • Сложность в обеспечении точного позиционирования линейки на экране.

Использование виртуальной линейки:

2. Применение виртуальной линейки:

   • Было найдено приложение On-screen Ruler, которое отображает виртуальную линейку непосредственно на экране устройства.

   • Преимущества метода:

     • Линейка основывается на DPI устройства, что обеспечивает точность измерений.

     • Гибкие настройки позволяют корректировать отображение делений линейки.

     • Удобство позиционирования виртуальной линейки на экране устройства

Процесс валидации графика:

1. Калибровка виртуальной линейки:

   • Сравнение виртуальной линейки с физической для подтверждения точности отображения.

   • При необходимости, настройка параметров виртуальной линейки для обеспечения соответствия физическим размерам.

2. Проверка отображения миллиметровки:

   • Использование откалиброванной виртуальной линейки для измерения расстояний между линиями сетки на графике ЭКГ.

   • Проверка соответствия одного деления сетки одному миллиметру.

3. Валидация масштаба графика:

   • Измерение амплитуды и временных интервалов ЭКГ-сигнала с помощью виртуальной линейки.

   • Сравнение полученных значений с ожидаемыми стандартными параметрами ЭКГ.

8. Заключение

В ходе разработки специализированного графика для отображения ЭКГ с использованием Canvas удалось достичь следующих ключевых результатов:

1. Точность отображения:

   • Реализовано точное отображение графика ЭКГ в соответствии с медицинскими нормами.

   • Достигнуто корректное отображение миллиметровой сетки, что критически важно для интерпретации ЭКГ.

2. Высокая производительность:

   • График отрисовывается плавно даже на устройствах с ограниченными ресурсами.

   • Оптимизация с использованием метода DrawLines вместо DrawPatch позволила увеличить производительность в два с половиной раза.

3. Гибкость и расширяемость:

   • Успешно реализована синхронизация основного графика ЭКГ с дополнительным графиком, имеющим меньшую частоту дискретизации.

   • Разработанная архитектура позволяет легко добавлять новые функции и графики.

4. Точность измерений:

   • Разработан и применен эффективный метод проверки точности отображения с использованием виртуальной линейки (On-screen Ruler).

   • Обеспечено соответствие отображаемых данных реальным физическим размерам.

5. Оптимизация для различных устройств:

   • График корректно отображается на устройствах с разными разрешениями экрана и DPI.

Разработанное решение представляет собой надежный и эффективный инструмент для визуализации ЭКГ, который легко адаптируется к различным медицинским приложениям и может быть использован в исследованиях в области кардиологии.