드론 GCS 애플리케이션에 비행기 피치 조절 기능 추가하기
안녕하세요! 오늘은 드론의 기울기를 조절하는 슬라이더와 연동하여 비행기 이미지의 기울기가 변경되는 기능을 WPF 애플리케이션에 추가하는 방법을 소개하려고 합니다. 이 기능은 드론의 모의 피치(pitch)를 조절하는 기능으로, 사용자가 슬라이더를 통해 드론의 기울기를 시각적으로 조절하고 확인할 수 있게 해줍니다.
사실 천성 공돌이라 글 재주가 없어 AI를 이용해 글을 작성중입니다만은
내용은 실제로 제가 개발 했던 내용을 담고 있습니다.
궁금하신 점은 댓글로 문의해주세요.!
프로젝트 개요
드론의 기울기(피치)를 조절하는 기능은 드론의 비행 안정성을 높이고, 사용자에게 직관적인 제어 방법을 제공하는 중요한 요소입니다. 이번 포스트에서는 WPF를 사용하여 간단한 Ground Control Station(GCS) 애플리케이션에 슬라이더를 추가하고, 이를 통해 비행기 이미지의 기울기를 실시간으로 변경하는 기능을 구현해보겠습니다.
슬라이더 및 이미지 추가
먼저, 사용자 인터페이스(UI)에 슬라이더와 비행기 이미지를 추가하여 사용자가 기울기를 조절할 수 있도록 설정합니다. 이를 위해 MainWindow.xaml 파일을 수정합니다.
MainWindow.xaml
위 XAML 코드에서 주요 포인트는 다음과 같습니다:
- 슬라이더(Slider): 최소값 -30도, 최대값 30도로 설정되어 있으며, Pitch 속성과 양방향 바인딩됩니다. 사용자가 슬라이더를 조절하면 Pitch 속성의 값이 변경됩니다.
- 비행기 이미지(Image): 슬라이더의 값(Pitch)에 따라 이미지가 회전하도록 RotateTransform을 사용하여 바인딩합니다. RenderTransformOrigin을 (0.5, 0.5)로 설정하여 이미지의 중심을 기준으로 회전합니다.
ViewModel에 Pitch 속성 추가
다음으로, ViewModel에 Pitch 속성을 추가하여 슬라이더와 이미지의 회전이 연동되도록 설정합니다. MVVM 패턴을 따르는 DroneViewModel 클래스에 Pitch 속성을 추가합니다.
DroneViewModel.cs
using System.ComponentModel;
namespace SimpleGCS
{
public class DroneViewModel : INotifyPropertyChanged
{
private bool _isConnected = false;
private string _statusMessage = "Disconnected";
private double _pitch = 0; // 기울기 초기값은 0도
public bool IsConnected
{
get { return _isConnected; }
set
{
_isConnected = value;
OnPropertyChanged("IsConnected");
StatusMessage = value ? "Connected" : "Disconnected";
}
}
public string StatusMessage
{
get { return _statusMessage; }
set
{
_statusMessage = value;
OnPropertyChanged("StatusMessage");
}
}
public double Pitch
{
get { return _pitch; }
set
{
_pitch = value;
OnPropertyChanged("Pitch");
}
}
public RelayCommand ConnectCommand { get; }
public RelayCommand DisconnectCommand { get; }
public DroneViewModel()
{
ConnectCommand = new RelayCommand(ConnectDrone, () => !IsConnected);
DisconnectCommand = new RelayCommand(DisconnectDrone, () => IsConnected);
}
private void ConnectDrone()
{
IsConnected = true;
}
private void DisconnectDrone()
{
IsConnected = false;
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string name)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
}
}
주요 포인트:
- Pitch 속성: double 타입으로 선언되었으며, 슬라이더의 값과 바인딩됩니다. 슬라이더가 조절되면 Pitch 속성의 값이 변경되고, 이는 이미지의 회전에 반영됩니다.
- INotifyPropertyChanged 인터페이스: 속성 변경 시 UI에 알리기 위해 구현됩니다.
- 명령(Commands): ConnectCommand와 DisconnectCommand는 드론의 연결 상태를 관리합니다.
RelayCommand 클래스는 MVVM 패턴에서 명령을 구현하기 위해 자주 사용되며, 다음과 같이 간단히 구현할 수 있습니다:
RelayCommand.cs
using System;
using System.Windows.Input;
namespace SimpleGCS
{
public class RelayCommand : ICommand
{
private readonly Action _execute;
private readonly Func<bool> _canExecute;
public RelayCommand(Action execute, Func<bool> canExecute = null)
{
_execute = execute;
_canExecute = canExecute;
}
public bool CanExecute(object parameter)
{
return _canExecute == null || _canExecute();
}
public void Execute(object parameter)
{
_execute();
}
public event EventHandler CanExecuteChanged
{
add
{
CommandManager.RequerySuggested += value;
}
remove
{
CommandManager.RequerySuggested -= value;
}
}
public void RaiseCanExecuteChanged()
{
CommandManager.InvalidateRequerySuggested();
}
}
}
이제 ViewModel과 UI가 제대로 연결되었으므로, 슬라이더를 조절하면 비행기 이미지가 기울어지는 것을 확인할 수 있습니다.
기능 테스트
모든 설정이 완료되었으면, 애플리케이션을 실행하여 기능을 테스트해보겠습니다.
- 애플리케이션 실행: Visual Studio에서 프로젝트를 빌드하고 실행합니다.
- 연결 상태 확인: "Connect" 버튼을 클릭하여 드론을 연결합니다. 상태 메시지가 "Connected"로 변경되는 것을 확인합니다.
- 슬라이더 조절: 슬라이더를 좌우로 조절하여 비행기 이미지가 기울어지는지 확인합니다. 슬라이더의 최소값과 최대값(-30도 ~ 30도) 사이에서 이미지가 부드럽게 회전해야 합니다.
- 연결 해제: "Disconnect" 버튼을 클릭하여 드론 연결을 해제하고, 상태 메시지가 "Disconnected"로 변경되는지 확인합니다.
결론
이번 포스트에서는 WPF를 사용하여 드론 GCS 애플리케이션에 슬라이더를 추가하고, 이를 통해 비행기 이미지의 피치를 조절하는 기능을 구현해보았습니다. 이 기능은 드론의 기울기를 시각적으로 확인하고 제어할 수 있어, 사용자 경험을 향상시키는 데 큰 도움이 됩니다.
MVVM 패턴을 활용하여 View와 ViewModel을 깔끔하게 분리하고, 데이터 바인딩을 통해 UI 요소들이 실시간으로 동기화되도록 설정한 점도 중요한 포인트입니다. 앞으로 더 많은 기능을 추가하여 더욱 완성도 높은 드론 GCS 애플리케이션을 만들어보세요!
감사합니다.
