Прогресс-бар в Delphi: компоненты TfrProgressBar и TfrxProgressBar из FastReport VCL

Индикатор прогресса — один из самых наглядных элементов интерфейса: он мгновенно показывает, сколько работы уже выполнено и сколько осталось до завершения процесса. В этой статье разберём, как добавить такой индикатор и в интерфейс Delphi-приложения, и в отчёты — с помощью новых компонентов TfrProgressBar и TfrxProgressBar.

Пользователям FastReport VCL Ultimate доступны дополнительные компоненты визуального интерфейса в рамках наборов FastEditors VCL и FastGrid VCL. Теперь эти наборы пополнились новым полезным редактором — TfrProgressBar, а отчёты — компонентом TfrxProgressBar. При этом компонент отчётов доступен не только владельцам Ultimate, но и всем, у кого есть доступ к основному компоненту отчётов — TfrxReport.

Далее подробно разберём свойства и возможности новых компонентов, а затем покажем их в деле: на примере демонстрационного проекта с реалистичными данными, который поставляется в составе FastReport VCL Ultimate.

Компонент TfrProgressBar: свойства и возможности

Компонент ProgressBar доступен в IDE на палитре FastEditors VCL и предназначен для отображения числовых значений в формате показателя прогресса. Компонент:

• поддерживает горизонтальное и вертикальное направление шкалы;
• автоматически рассчитывает и отображает процентное значение относительно заданного граничного диапазона;
• содержит коллекцию линий-маркеров и пороговых значений, позволяющих визуализировать диапазоны шкалы прогресса в различных стилях: сплошная заливка, градиентная заливка, текстура.

Рассмотрим основные свойства, отличающие этот компонент прогресса от других редакторов набора FastEditors VCL.

• Value — отображаемое числовое значение. Компонент автоматически форматирует его в зависимости от настроек визуального стиля и диапазона значений. Если ProgressBar используется внутри ячейки компонента FastGrid, то в качестве Value автоматически используется значение этой ячейки.
• Properties.CaptionColor — цвет отображаемого текста. Если это свойство имеет значение clDefault, цвет текста автоматически подстраивается под цвет фона так, чтобы надпись была заметна на любом фоне.
• Properties.CaptionHorizontalAlignment — выравнивание текста по горизонтали.
• Properties.CaptionVerticalAlignment — выравнивание текста по вертикали.
• Properties.CaptionOrientation — горизонтальное или вертикальное направление текста.
• Properties.CaptionType — тип форматирования текста. Может принимать значения frpbctPercent (автоматическое вычисление процентного значения в зависимости от диапазона MinValue/MaxValue), frpbctPosition (отображение текстового представления свойства Value без форматирования) или frpbctCustom (отображение текста, записанного в свойство Properties.ProgressCaption).
• Properties.MarkerLinesVisible — управляет видимостью маркерных линий на шкале прогресса. Эти линии задаются в коллекции Properties.Thresholds.
• Properties.MaxValue — максимальное значение шкалы для вычисления процента прогресса. Не может быть меньше значения Properties.MinValue.
• Properties.MinValue — минимальное значение шкалы для вычисления процента прогресса. Не может быть больше значения Properties.MaxValue.
• Properties.Orientation — направление изменения уровня шкалы прогресса в зависимости от Value: слева направо либо сверху вниз.
• Properties.ProgressBarStyle — стиль отображения шкалы прогресса. Может принимать значения frpbsSolid (сплошная заливка цветом Properties.ProgressBeginColor), frpbsGradient (градиентная заливка с плавным изменением цвета от Properties.ProgressBeginColor до Properties.ProgressEndColor) или frpbsBitmap (заливка текстурой из свойства Properties.ProgressBitmap).
• Properties.ProgressBeginColor — начальный цвет шкалы прогресса.
• Properties.ProgressEndColor — конечный цвет шкалы прогресса.
• Properties.ProgressBitmap — текстура для заливки шкалы прогресса для случая Properties.ProgressBarStyle = frpbsBitmap.
• Properties.ProgressCaption — текст подписи для случая Properties.CaptionType = frpbctCustom.
• ProgressChunkBorder — управление видимостью линии обвода для градиентного стиля заливки основной шкалы и пороговых значений.
• Properties.ProgressMargin — величина отступа шкалы прогресса от краёв компонента.
• Properties.ShowAsLEDs — включение и выключение визуального разделения шкалы прогресса на прямоугольники.
• Properties.Thresholds — коллекция пороговых значений (подробнее о ней — ниже).
• Properties.OnGetDisplayText — событие, которое позволяет вручную в коде изменить отображаемый на шкале текст (параметр AText) в зависимости от величины параметра AValue.

Пороговые значения: коллекция Properties.Thresholds

Все эти свойства позволяют гибко настроить визуальный стиль отображения шкалы прогресса и при необходимости использовать несколько различных диапазонов значений и маркеров:

Каждое пороговое значение коллекции Properties.Thresholds имеет следующие свойства:

• Value — значение шкалы, начиная с которого стиль и цвета заливки шкалы меняются на те, что указаны в данном пороговом значении;
• BeginColor — цвет начала заливки данного порогового значения;
• EndColor — цвет окончания заливки данного порогового значения;
• MarkerLineColor — цвет линии-маркера, отмечающего Value на шкале;
• MarkerLineSize — толщина линии-маркера, отмечающего Value на шкале;
• MarkerLineVisible — управление видимостью линии-маркера;
• ProgressBarStyle — стиль заливки шкалы прогресса данного порога;
• ProgressBorderVisible — управление видимостью линии обвода данного порога;
• ProgressVisible — управление видимостью шкалы прогресса данного порога (если шкала прогресса порога не видима, то для неё берутся параметры основной шкалы — это удобно, если нужно изобразить только линию-маркер).

Компонент отчёта TfrxProgressBar

Похожим набором свойств обладает и специальный компонент TfrxProgressBar, доступный в отчётах. Чтобы встроить его в свой отчёт:

1.    положите на форму невизуальный компонент TfrxProgressBarObject — он автоматически добавит необходимые модули в ваш проект;
2.    откройте дизайнер отчёта с помощью компонента TfrxReport;
3.    выберите компонент прогресса на панели компонентов и поместите его на страницу отчёта.

По сравнению с интерфейсным компонентом у компонента отчёта есть ряд особенностей:

• ShowGeneralBorder — позволяет показать или спрятать рамку вокруг объекта;
• DataField и DataSet — позволяют привязать компонент к одному из полей набора данных и автоматически брать значения прогресса из него;
• ProgressCaptionExpression — позволяет задать выражение, чтобы вручную отформатировать значение прогресса, получаемое из поля данных.

Пример использования: контроль температуры плавильной печи

Компонент отображения прогресса удобно использовать в приложениях, где требуется визуализировать значения в динамике в сравнении с граничными и пороговыми значениями: в системах управления технологическими процессами, для отслеживания KPI или для контроля заполненности склада.
Для демонстрации возможностей ProgressBar мы выбрали металлургию. В ней как раз важны пороговые значения температур и изменчивость технологического процесса плавки, а срезы данных хорошо подходят для печати. Иными словами, здесь есть всё, в чём ProgressBar хорош.

Симуляция процесса плавки

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

Исходный код симуляции можно найти в демонстрационном проекте FastGrid в модулях frFurnaceZones и frFurnaceSimulator, а основной код работы с компонентом — в модуле ProgressBarDemo.

Настройка колонки FastGrid и компонентов прогресса

Основная работа в этом проекте происходит в обработчиках событий OnShow и UpdateUI.

В OnShow создаётся набор данных на основе стандартного компонента TClientDataSet и реализуется привязка этих данных к FastGrid. Разумеется, FastGrid умеет работать с данными и напрямую, без посредника в виде DataSet, но в этом проекте мы хотели показать возможности печати данных, отформатированных с помощью ProgressBar, как напрямую из источника, так и через FastGrid. А для этого лучше подойдёт универсальное хранилище данных в виде TClientDataSet или другого похожего компонента.

Далее в обработчике OnShow настраиваются свойства колонки FastGrid, которая отвечает за отображение прогресса, а также свойства отдельных компонентов TfrProgressBar, расположенных на схеме плавильной печи:

gFurnaceTableView1.Columns.RetrieveMissingColumns;
LColumn := gFurnaceTableView1.Columns[0];
LColumn.Caption := 'Furnace Zone';
LColumn.Options.Editing := False;
LColumn.PropertiesClass := TfrEditProperties;
LColumn := gFurnaceTableView1.Columns[1];
LColumn.Caption := 'Temperature, C';
LColumn.Width := 300;
LColumn.PropertiesClass := TfrProgressBarProperties;
LProperties := TfrProgressBarProperties(LColumn.Properties);
LProperties.CaptionType := frpbctPosition;
LProperties.CaptionColor := clBlack;
LProperties.ProgressBarStyle := frpbsGradient;
LProperties.MaxValue := FConfig.ScaleMax;
LProperties.MinValue := FConfig.ScaleMin;
LProperties.MarkerLinesVisible := True;
LProperties.CaptionType := frpbctPosition;
LProperties.ProgressBeginColor := clWhite;
LProperties.ProgressEndColor := FConfig.Thresholds[0].Color;
LProperties.ProgressChunkBorder := False;
LProperties.OnGetDisplayText := DoGetDisplayText;
for J := 1 to Length(FConfig.Thresholds) - 1 do
begin
  LThresholdItem := LProperties.Thresholds.Add;
  LThresholdItem.MarkerLineVisible := False;
  LThresholdItem.ProgressBarStyle := frpbsGradient;
  LThresholdItem.MarkerLineVisible := FConfig.Thresholds[J].Caption = 'Overheat';
  LThresholdItem.MarkerLineSize := 2;
  LThresholdItem.Value := FConfig.Thresholds[J - 1].UpperBound;
  LThresholdItem.BeginColor := FConfig.Thresholds[J - 1].Color;
  LThresholdItem.EndColor := FConfig.Thresholds[J].Color;
end;
pbLoading.Properties.Assign(LProperties);
pbLoading.Properties.Thresholds.Assign(LProperties.Thresholds);
pbLoading.Properties.CaptionType := frpbctPercent;
pbMelting.Properties.Assign(LProperties);
pbMelting.Properties.Thresholds.Assign(LProperties.Thresholds);
pbMelting.Properties.CaptionType := frpbctPercent;
pbDischarge.Properties.Assign(LProperties);
pbDischarge.Properties.Thresholds.Assign(LProperties.Thresholds);
pbDischarge.Properties.Orientation := frpboVertical;
pbDischarge.Properties.CaptionType := frpbctPercent;
pbOverheat.Properties.Assign(LProperties);
pbOverheat.Properties.Thresholds.Assign(LProperties.Thresholds);
pbOverheat.Properties.Orientation := frpboVertical;
pbOverheat.Properties.CaptionType := frpbctPercent;
pbLining.Properties.Assign(LProperties);
pbLining.Properties.Thresholds.Assign(LProperties.Thresholds);
pbLining.Properties.Orientation := frpboVertical;
pbLining.Properties.CaptionType := frpbctPercent;

Подробнее про работу с компонентом FastGrid вы можете прочитать в статье «Подробный обзор возможностей библиотеки FastGrid».

Обновление данных по таймеру

В обработчике события UpdateUI осуществляется обновление значений в наборе данных и отдельных компонентах по таймеру:

procedure TfrmProgressBar.UpdateUI;
var
  I: Integer;
  LZoneRuntime: TFurnaceZoneRuntime;
  LControl: TfrProgressBar;
  LZoneName: string;
begin
  dmData.cdsZones.DisableControls;
  try
    dmData.cdsZones.First;
    for I := 0 to Length(FProcess.FRuntime) - 1 do
    begin
      LZoneRuntime := FProcess.FRuntime[I];
      dmData.cdsZones.Edit;
      dmData.cdsZones.FieldByName('Temperature').AsFloat := LZoneRuntime.CurrentTemp;
      dmData.cdsZones.Post;
      dmData.cdsZones.Next;
      LZoneName := LZoneRuntime.Zone.Name;
      if LZoneName = 'Loading zone' then
        LControl := pbLoading
      else if LZoneName = 'Melting zone' then
        LControl := pbMelting
      else if LZoneName = 'Overheat zone' then
        LControl := pbOverheat
      else if LZoneName = 'Discharge zone' then
        LControl := pbDischarge
      else
        LControl := pbLining;
      LControl.Value := LZoneRuntime.CurrentTemp;
    end;
  finally
    dmData.cdsZones.EnableControls;
  end;
  // General progress
  lOrders.Caption := ' Furnace Grid - Progress: ' +
    IntToStr(Round(FProcess.Progress01 * 100)) + ' % finished. ' +
    Format('Melting time: %s', [FormatDateTime('nn:ss', FProcess.TotalElapsed / SecsPerDay)]);
end;

Настройка компонента отчёта

Настройка компонента отчёта и привязка его к данным осуществляется в дизайнере отчётов следующим образом:

В результате получаем небольшое приложение, которое наглядно демонстрирует стадии нагрева и плавления в печи:

При этом в любой момент времени можно получить срез температурных данных в форме отчёта:

Заключение

Компоненты TfrProgressBar и TfrxProgressBar — удобные инструменты, которые позволяют добавить визуальную индикацию прогресса не только в пользовательский интерфейс вашего приложения, но и в отчёты. Привязка к данным, встраивание в ячейки сетки, гибкие настройки стилей шкал и текста — всё это помогает легко и быстро представить информацию в удобном для восприятия виде.

Если в ваших задачах встречаются мониторинг технологических процессов, KPI-дашборды или отчёты о ходе выполнения задач — скачайте последнюю версию FastReport VCL Ultimate, откройте демонстрационный проект FastGrid и попробуйте новый индикатор прогресса на своих данных.