Создание визуализатора программного кода для отображения процесса формирования связных списков

Восприятие и усвоение информации во многом зависит от способа передачи информации. Утверждается, что текстовое сообщение, усваивается на 7%; сообщение, переданное с помощью аудио-технологий – на 38%; «визуализация» информации способствует усвоению более чем у 55% людей [1 ]. При разработке программ с использованием абстрактных типов данных, визуализация алгоритмов, просмотр текущего состояния объекта визуализации – становятся актуальными. В связи с этим были рассмотрены средства визуализации отладчика Visual Studio.

Под визуализатором понимается компонент пользовательского интерфейса отладчика Visual Studio. Объект визуализатор создает диалоговое окно или другой интерфейс для отображения переменной или объекта способом, подходящим для того или иного типа данных. Так, например, HTML-визуализатор интерпретирует строку HTML и отображает результат в виде, аналогичном отображению в окне браузера. Некоторые визуализаторы позволяют не только просматривать, но и редактировать данные. Например, отладчик Visual Studio 2015 содержит шесть стандартных визуализаторов (В VS 2010 существует четыре визуализатора): текст; HTML; XML; JSON визуализаторы, которые работают со строковыми объектами; визуализатор дерева WPF для отображения свойств визуального дерева объекта WPF; средство визуализации наборов данных, который работает с объектами DataSet, DataView и DataTable.

На рисунках 1 и 2 показан результат работы визуализатора отладчика для следующих возможностей: «Средство визуализации текста» и «Визуализатор HTML». Точка останова – строка программного кода: Console.WriteLine(" a="+a); .

class Program { static void Main(string[] args)

{ string a = "ОСНОВЫ CРЕДСТВ ВИЗУАЛИЗАЦИИ ";

Console.WriteLine(" a="+a); Console.ReadKey(); } }

Рис. 1. Окно локальных переменных «Локальные» для выбора визуализатора

Рис. 2. Окна выбранных визуализаторов для объекта строкового типа

Архитектура визуализатора отладчика состоит из двух частей: Код отладчика — код, который запускается в отладчике Visual Studio. Этот код создает и отображает пользовательский интерфейс визуализатора. Код, который необходимо отладить — код, который выполняется внутри процесса, отлаживаемого в Visual Studio (отлаживаемая программа).

Объекты данных, которые требуется визуализировать (например, строковые объекты), принадлежат отлаживаемому процессу. Отлаживаемой программой передается объект данных отладчику. После чего отладчик «выводит» данные     с помощью созданного пользовательского интерфейса.

Существует возможность создавать собственные визуализаторы и устанавливать их в отладчик Visual Studio. Возможности Visual Studio позволяют создавать пользовательский визуализатор несколькими способами: «вручную» и используя шаблон элемента визуализатора[1].

На рисунке 3 представлен результат работы визуализатора пользователя для отображения однонаправленного списка из трех элементов с выводом реальных адресов расположения каждого из компонентов списка в динамической памяти. Например, первый элемент списка с информационным полем 10 располагается по адресу 50928592, адресное поле next хранит адрес следующего элемента с информационным полем 11, который располагается по адресу 50930120.

Рис. 3. Визуализатор пользователя для однонаправленного списка

Графическое представление элементов списка реализовано с помощью пространства имен System.Drawing.Drawing2D.

В процессе работы программы создается структура, заполняется данными, а затем происходит вызов самого визуализатора. При запуске визуализатора вызывается функция Show, выполняющая две задачи: получить объект структуры и создать форму для отображения списка:

public classVisualizerKurs : DialogDebuggerVisualizer

{ private OneLink thisObject;

protected override void Show (IDialogVisualizerService windowService, IVisualizerObjectProvider objectProvider)

{ if (windowService == null)

throw new ArgumentNullException("windowService")

if (objectProvider == null)

throw new ArgumentNullException ("objectProvider");

windowService.ShowDialog(displayForm); }  }

Разработанный метод CheckFour реализует вариант отображения списка: если элементов не более трех, то список будет представлен аналогично рисунку 2; иначе перед последним элементом списка «ставится» многоточие:

Для визуализации отдельных элементов был разработан статический класс StructPainter на основе System.Drawing.Drawing2D. Изначально, необходимо получить ссылку на форму, на которой будут отображены элементы списка и инициализировать графику (метод start):

Public static void start(Form temp)

{ form = temp; graphics = form.CreateGraphics(); }

Визуализация отдельного объекта происходит в два этапа: сбор данных (метод PaintTableOneLink) и работа с графикой. Метод PaintTableOneLink является небезопасным участком кода в C#, так как получает адрес ячеек памяти. Для компиляции проекта, необходимо разрешить небезопасный код в свойствах проекта.

Метод PaintTableOneLink:

Unsafe public static bool PaintTableOneLink(OneLinkobj) {TypedReferencetrObj = __makeref(obj);

IntPtr tempPtr1 = **(IntPtr**)(&trObj);

string adr1 = tempPtr1.ToString();

string data = obj.d.ToString();

string adr3 = "";

bool ans = false;

IntPtr tempPtr3 = **(IntPtr**)(&trObj3);

adr3 = tempPtr3.ToString(); ans = true; }

PaintTableOneLinkInterior(adr1, adr3, data);

return ans;}

Собранные данные передаются в метод PaintTableOneLinkInterior, для последующей визуализации.

Private static void PaintTableOneLinkInterior (string adr1, string adr3, string data)

• {    int width = 70; int height = 35; intfontSize = 10;

graphics.DrawRectangle (fatPen, lastCoordinateX, lastCoordinateY, width * 3, height);

graphics.DrawRectangle (fatPen, lastCoordinateX, lastCoordinateY, width, height);

graphics.DrawString (adr1, new Font("Arial", fontSize), newSolidBrush (textColor), newPointF(lastCoordinateX + 8, lastCoordinateY + 6) );

graphics.DrawRectangle (mainPen, lastCoordinateX + width, lastCoordinateY, width, height);

graphics.DrawString ( data, new Font ("Arial", fontSize), newSolidBrush (textColor), newPointF(lastCoordinateX + 22 + width, lastCoordinateY + 6) ); graphics.DrawRectangle (mainPen, lastCoordinateX + 2 * width, lastCoordinateY, width, height);

graphics.DrawString( adr3, new Font ("Arial", fontSize), newSolidBrush(textColor), newPointF(lastCoordinateX + 11 + 2 * width, lastCoordinateY + 6));

lastCoordinateX += 3 * width; }

Класс содержит различные свойства, от координат последнего визуализированного элемента, до цвета кисти, а также методы, которые позволяют изменить свойства вручную.

namespaceNotBadVisualizer { [DebuggerVisualizer(typeof(VisualizerKurs))] [Serializable]

Class OneLink { publicintd;publicOneLinknext; }

Class Program

{ staticOneLinkGenerateLink (int[] items)

{ int[] input = newint[5] { 10, 11, 12, 13, 14 }; OneLinkt = newOneLink();

t = GenerateLink(input); VisualizerKurs.TestShowVisualizer(t);

}   }}

В функции main создается однонаправленный линейный список из 5 элементов, затем вызывается код визуализатора, привязанный к классу списка OneLink.