FMXLinux를 사용한 Linux64용 sgcUI: Linux 데스크톱을 위한 그리드, 차트, 게이지, 그리고 완성된 애플리케이션

· 컴포넌트
FMXLinux를 사용한 Linux64용 sgcUI: Linux 데스크톱을 위한 그리드, 차트, 게이지, 그리고 완성된 애플리케이션 | eSeGeCe 블로그
>_ 신규 · Linux64용 sgcUI

여러분의 Delphi 데스크톱 애플리케이션.
이제 Linux에서도.

FMXLinux를 설치하면 sgcUI FireMonkey 컨트롤이 Linux64의 실제 데스크톱 애플리케이션에서 실행됩니다. Windows와 macOS에 배포하는 것과 같은 폼, 같은 코드, 같은 모양 그대로입니다.

  • Delphi
  • FireMonkey
  • FMXLinux
  • Linux64
  • Ubuntu 22.04 이상
Linux 데스크톱에서 실행되는 sgcUI 기반 트레이딩 데스크 애플리케이션: 다크 테마의 관심 종목 그리드, 캔들스틱 차트, 섹터 트리맵, 게이지
274Linux64 데모
17UI 제품
5FireMonkey 플랫폼
1코드 베이스

Linux는 Delphi 데스크톱 개발자에게 늘 어려운 플랫폼이었습니다. 컴파일러는 Linux64를 지원하지만, 비주얼 애플리케이션에는 FireMonkey가 필요하고, Linux에서 FireMonkey를 쓰려면 FMXLinux 애드온이 필요합니다. 지금까지 sgcUI는 Linux64에서 비주얼이 아닌 부분만 제공했습니다. 데이터 모델, 가져오기와 내보내기, 그리고 PNG와 SVG로의 헤드리스 렌더링이 그것입니다.

오늘부터 달라집니다. IDE에 FMXLinux를 설치하면 sgcUI FireMonkey 컨트롤이 Linux64에서 컴파일되고 실행됩니다. 데이터 그리드, 차트, 게이지, 대시보드, 플래너, 지도, 다이어그램 등 스위트 전체가 대상입니다. 이 글의 모든 스크린샷은 Windows와 macOS에서 실행되는 것과 같은 데모 프로젝트를 Ubuntu에서 캡처한 것입니다.

Ubuntu에서 실행되는 실제 데모를 녹화한 1분짜리 Linux64용 sgcUI 영상입니다. YouTube에서도 볼 수 있습니다.

컨트롤만이 아닌 완성된 애플리케이션

UI 스위트를 평가하는 가장 좋은 방법은 완성된 애플리케이션을 보는 것입니다. sgcUI Suite 데모가 바로 그런 예입니다. 각 데모는 여러 제품을 하나의 프로그램으로 묶어 내비게이션, 실시간 데이터, 여러 페이지를 제공합니다. 이제 모든 데모가 수정 없이 Linux64에서 실행됩니다.

트레이딩 데스크

Markets 데모는 초당 약 1,000건의 업데이트를 보내는 시뮬레이터로 구동됩니다. 관심 종목 그리드는 가격이 움직일 때마다 빨간색과 초록색으로 깜박이고, 캔들스틱 차트에는 볼린저 밴드, 이동 평균, 거래량, RSI 패널이 표시되며, 섹터 트리맵은 시장의 흐름을 보여 줍니다.

Linux에서 보조 지표와 함께 표시된 캔들스틱 분석 차트
지표가 있는 분석 차트
Linux에서 표시된 섹터별 시장 히트 맵
섹터별 시장 히트 맵

공장 관제실

Factory 데모는 병입 공장용 HMI입니다. OEE 카드, 7세그먼트 병 카운터, 애니메이션 연결선이 있는 라인 공정 흐름도, 경보 패널, 원형 및 선형 게이지, 경보 한계가 있는 센서 12개의 실시간 추세를 보여 줍니다.

Linux의 Factory HMI: 다크 테마의 OEE 카드, 병 카운터, 공정 흐름 다이어그램, 경보 패널, 게이지
Ubuntu에서 실행한 Factory 데모의 라인 개요: 공정 다이어그램, 경보, 게이지, 카운터.
펌프 하나에 대형 게이지 세 개가 표시된 자산 상세 페이지
실시간 게이지가 있는 자산 상세
생산량과 에너지 수치가 표시된 공장 지도
지도 위의 공장들

Fleet, ERP, 프로젝트 포트폴리오

Fleet 데모는 스페인과 포르투갈 지도에서 차량 48대를 추적하며, 경로, 정차 지점, 차량 그리드, 경보 목록을 제공합니다. ERP 데모는 KPI 카드, 차트, 게이지, 고객 지도가 있는 대시보드로 시작해 고객, 계획, 보고서, 분석 페이지로 이어집니다. Portfolio 데모는 프로젝트 12개와 작업 520개를 크리티컬 패스가 표시된 Gantt 차트로 일정 관리합니다.

Linux의 차량 운영 애플리케이션: KPI 카드, 차량과 경로가 표시된 지도, 차량 그리드, 경보
실시간 차량 운영: KPI 카드, 차량과 경로가 표시된 지도, 그리드 두 개.
KPI 카드, 차트, 게이지, 지도가 있는 ERP 대시보드
ERP 대시보드
운전자별로 색상을 구분한 주간 배송 캘린더
배송 계획 캘린더
게이지, 버블 차트, 지도, 트리맵이 있는 프로젝트 포트폴리오 개요
포트폴리오 개요
크리티컬 패스가 표시된 포트폴리오 Gantt 차트
크리티컬 패스가 있는 포트폴리오 Gantt
색상 레인으로 그린 허브 네트워크 다이어그램
허브 네트워크 다이어그램
데이터셋에 바인딩된 조직도
데이터셋으로 만든 조직도

sgcUI가 Linux 데스크톱에 가져오는 것

sgcUI는 하나의 코어, 하나의 테마 엔진, 하나의 작업 방식을 공유하는 네이티브 UI 제품군입니다. Linux64에서는 스위트 전체의 FireMonkey 컨트롤을 사용할 수 있습니다.

Linux의 sgcCharts: 범위 영역, 선, 목표 밴드가 있는 막대
sgcCharts
Linux의 sgcGauges 갤러리: 원형, 링, 나침반, 시계, 디지털, LED 게이지
sgcGauges
Linux의 sgcPlanner Gantt: 연결선, 기준선, 크리티컬 패스 표시
sgcPlanner Gantt
Linux의 sgcPivotGrid: 히트 맵 셀과 필드 목록
sgcPivotGrid
Linux의 sgcMaps: 레이어 패널, 확대 축소 버튼, 축척 막대
sgcMaps
Linux의 트리맵 차트와 깔때기형 차트
트리맵과 깔때기형 차트

그리드는 따로 한 장을 보여 드릴 만합니다. Ubuntu에서 행 100,000개로 실행한 FilterAndFind 데모이며, 헤더의 필터 버튼, 필터 행, “Ask the grid” 상자가 보입니다. 마우스 휠로 부드럽게 스크롤되고, Ctrl+End를 누르면 100,000번째 행으로 바로 이동합니다.

Linux에서 행 100,000개를 표시하는 sgcGrid: 헤더 필터와 필터 행
Ubuntu에서 행 100,000개를 표시하는 sgcGrid.

필요한 환경

Linux64용 sgcUI는 Ubuntu 22.04와 Ubuntu 24.04에서 Delphi 13 및 FMXLinux 1.84로 테스트했습니다.

첫 Linux64 애플리케이션 만들기

1FMXLinux 설치IDE 안에서 GetIt으로
2Linux 연결PAServer와 Linux SDK
3플랫폼 추가FireMonkey 프로젝트에 Linux 64-bit 추가
4실행같은 폼이 Linux 데스크톱에서 실행됩니다
  1. GetIt에서 FMXLinux를 설치하고 IDE를 다시 시작합니다.
  2. Linux 머신에서 PAServer를 시작하고, IDE에서 연결 프로필을 만든 다음 Linux SDK를 가져옵니다. 다른 Delphi Linux64 프로젝트와 같은 절차입니다.
  3. sgcUI Source 폴더를 Linux 64-bit 라이브러리 경로(Tools, Options, Language, Delphi, Library)에 추가하여 컴파일러가 해당 플랫폼용 sgcUI 유닛을 찾도록 합니다.
  4. FireMonkey 애플리케이션을 열거나 새로 만들고, Projects 창에서 대상 플랫폼 Linux 64-bit를 추가한 다음 선택합니다.
  5. 폼에 sgcUI 컨트롤을 놓고 실행합니다. IDE가 프로젝트를 컴파일하고 PAServer를 통해 배포한 뒤 Linux 데스크톱에서 시작합니다.

Linux 전용 코드를 작성할 필요는 없습니다. 다음은 Hello Grid 퀵 스타트의 전체 소스입니다. 디자이너에서 열 세 개를 정의한 TsgcFMXGrid 하나가 있는 폼입니다.

uses
  System.SysUtils, System.Classes, FMX.Types, FMX.Controls, FMX.Forms,
  // sgc
  sgcGrid_Data, sgcGrid_FMX;

procedure TfrmHelloGrid.FormCreate(Sender: TObject);
begin
  { BeginUpdate / EndUpdate repaint the grid once, after the last row }
  Grid.Data.BeginUpdate;
  try
    { AppendRow(Key, [City, Country, Population]) }
    Grid.Data.AppendRow('Madrid', ['Madrid', 'Spain', 3416771]);
    Grid.Data.AppendRow('Paris', ['Paris', 'France', 2102650]);
    Grid.Data.AppendRow('Berlin', ['Berlin', 'Germany', 3755251]);
    Grid.Data.AppendRow('Rome', ['Rome', 'Italy', 2749031]);
  finally
    Grid.Data.EndUpdate;
  end;
end;

차트도 같은 방식으로 동작합니다. TsgcFMXChart 컨트롤이 TsgcChart 컴포넌트를 그리고, 각 시리즈도 컴포넌트입니다. 여기서는 TsgcChartSeries_Line입니다. 코드는 점을 추가하는 것뿐입니다.

uses
  // sgc
  sgcCharts_Chart, sgcCharts_Series, sgcCharts_FMX;

const
  CS_VISITS: array [0 .. 6] of Integer = (420, 515, 480, 610, 590, 380, 350);

procedure TfrmHelloChart.FormCreate(Sender: TObject);
var
  i: Integer;
begin
  { X is the day, Y the visitors. The chart repaints by itself }
  for i := Low(CS_VISITS) to High(CS_VISITS) do
    serVisits.AddXY(i + 1, CS_VISITS[i]);
end;

Projects 창에서 Windows, macOS, Linux 64-bit 중 하나를 선택하면 같은 두 폼이 각 플랫폼에서 실행됩니다.

폼에서 고급 애플리케이션까지

위의 Suite 데모는 같은 구성 요소로 만들어졌으며, 소스 코드는 sgcUI와 함께 제공됩니다. 다음은 대규모 Linux64 애플리케이션을 관리하기 쉽게 만드는 방법입니다.

지금 체험하기: 컴파일된 Linux64 데모 274개

Linux에서 sgcUI가 실행되는 모습을 보려고 Delphi, FMXLinux, 라이선스를 갖출 필요는 없습니다. 모든 제품의 FireMonkey 데모, 총 274개 프로그램이 Linux64용으로 컴파일되어 하나의 아카이브에 담겨 있습니다.

sgcUI_bin_linux64.tar.xz 다운로드

tar -xJf sgcUI_bin_linux64.tar.xz
./run.sh              # choose a demo from the list
./run.sh Charts       # only the demos of one product

# or start one demo directly
cd Grid/FilterAndFind
GDK_BACKEND=x11 ./FilterAndFindFMX

데모는 Ubuntu 22.04 이상, 그리고 glibc 2.34 이상과 GTK3가 있는 다른 배포판에서 X11 또는 XWayland 디스플레이로 실행됩니다. 온라인 지도를 사용하는 데모에는 libcurl과 인터넷 연결도 필요합니다. 자세한 내용은 아카이브의 README.txt에 있습니다.

알아 두세요. 프린터 인쇄, 화면 낭독기 지원, 사용자 지정 창 제목 표시줄은 Linux64에서 사용할 수 없으며, 플로팅 도킹 패널도 비활성화됩니다. 그 외 FireMonkey 컨트롤의 모든 기능은 다른 플랫폼과 같은 코드입니다. 자세한 내용은 sgcUI 페이지와 도움말의 Platforms 항목에 정리되어 있습니다.

하나의 코드 베이스, 모든 데스크톱

Windows, macOS, 그리고 이제 Linux64까지, 같은 FireMonkey 폼과 같은 sgcUI 컨트롤로 지원합니다. 컴파일된 데모를 다운로드해서 여러분의 Linux 데스크톱에서 직접 실행해 보세요.

질문이나 의견이 있으신가요? 문의해 주세요. 코드를 직접 작성한 사람들이 답변해 드립니다.