오전 : 위젯 제작
오후 : 앱 제작
참고 교재 : 사물 인터넷을 위한 리눅스 프로그래밍 with 라즈베리파이 p638~
Command Line Interface(CLI)
ctrl alt f3을 누르면 서버/개발환경용(CLI)으로 변경되고
GUI로 돌아가려면 ctrl alt f2를 누른다
~/$ runlevel
N 5
처음 부팅을 바로 해서 이전 모드가 없다(NON)
지금 runlevel은 5이다
하지만
init 3명령어로 runlevel을 변경할 수 있다
다시 돌아가려면
ctrl alt f2 또는 sudo init 5명령어를 입력한다
GTK 라이브러리 : GUI를 위한 라이브러리
NMS(Network Management System)
Qt
모듈을 분리해 최적화된 메모리 사용 가능
일부 버전은 qt 사이트에서 다운 받을 수 있지만 우리는 이미 빌드 된 것을 pi로 옮김
~/Qt$ mkdir Examples ; cd Examples
~/Qt/Examples$ mkdir p657_helloworld ; cd p657_helloworld
~/Qt/Examples/p657_helloworld$ vi helloworld.cpp아래 내용 작성
#include <QApplication> /* app 객체를 생성하기 위해 꼭 필요함 */
#include <QLabel>
int main(int argc, char **argv)
{
QApplication app(argc, argv); /* QApplication 객체 생성 */
QLabel * hello = new QLabel("<font color=blue>Hello <i>World!</i><font>", 0); /* new : 동적 할당을 위함, 제거는 delete / 0 : root window */
hello->show(); /* 위젯의 화면 표시 */
return app.exec(); /* Qt의 메인 이벤트 루프 실행 */
}~/Qt/Examples/p657_helloworld$ qmake -project -o helloworl.pro만약 -o가 없으면 기본 디폴트로 디렉토리 이름으로 만든다
이 상태에서
qmake 를 하고
make 를 하면 오류가 나온다.pro 파일에 다음을 추가해야한다
4 QT += widgets그리고 make 다시 한 뒤
실행하면
위젯이라서 putty가 아니라 우분투에서 직접 실행해야 한다!!
root window의 크기 및 글자의 위치 조절이 가능하다
x를 누르거나 ctrl + c를 입력하면 quit() 함수 호출로 종료된다
이제 위젯의 크기를 조절해볼 것이다(resize(가로, 세로))
9 hello->resize(280, 135);위의 내용을 추가하고
다시 make 한다
위치도 조절한다(move(x, y))
창의 위치는 맨 왼쪽 위가 (0, 0)이다
10 hello->move(300,300);
Qt 위젯의 상속 관계
참고자료 : https://doc.qt.io/qt-6/qlabel.html
위젯에서 종료버튼을 추가하는 내용 실습
3 #include <QPushButton>
13 QPushButton * button = new QPushButton("Quit", 0);
14 QObject::connect(button, SIGNAL(clicked()), &app, SLOT(quit()));
quit를 누르면 모두 종료된다
교수님 소스를 가져온다
~/Qt/Examples/Chapter10/customwidget$ qmake
~/Qt/Examples/Chapter10/customwidget$ make
똑같이 동작한다
quit 버튼의 위치를 조정하고 싶으면
button->move(50,50)이라고 입력하면 된다
사용자 정의 시그널 사용 실습
16 // connect(button, SIGNAL(clicked()), qApp, SLOT(quit()));
17 connect(button, SIGNAL(clicked()), this, SLOT(processClick()));
18 connect(this, SIGNAL(widgetClicked()), qApp, SLOT(quit()));
19 }
20
21 void CustomWidget::processClick()
22 {
23 emit widgetClicked();
24 }
CustomWidget.cpp에서 막고
9 signals:
10 void widgetCliced();
11 public slots:
12 void processClick();CustomWidget.h에서 추가한다
qmake, make 함
RadioButton도 확인했다
Qt Create 실습
나머지는 default로 설정하고 finish 한다
ui를 더블클릭하고 상단의 signal/slot을 클릭한다
1. dial을 추가하고 pagestep(10)
2. progress bar를 다이얼 박스 안에 넣고 value 변경 가능하다
오른쪽 MainWidget 금지표시 우클릭 layout-layoutvertical 선택하면 크기가 아래로 꽉 차게 된다
다이얼 클릭후 아래 바로 드래그하면 connection ui가 나온다
여기서 dial에 valuechanged 로 설정하고 progressbar를 setvalue로 설정한다
이러면 다이얼 조절로 바의 value를 설정할 수 있다
상단에 edit widget을 누르면 다시 편집 가능하고, 바의 value를 0으로 설정한다
이제 버튼을 추가해본다
왼쪽에 push라고 검색해서 추가한다
버튼 우클릭해서 go to slot을 선택하고 클릭으로 설정하면 함수 틀이 만들어진다
qApp->quit();이 상태에서 우측에 버튼을 하나 더 추가하고 싶다
layout을 풀고
Horizontal layout을 하나 가져오고 기존의 버튼을 이동시킨다
그리고 버튼을 하나 추가하면 무조건 좌우로 이동한다
버튼 더블클릭으로 1번째는 bt0, 2번째는 bt1로 이름을 설정하고
hbox를 다시 다이얼 아래로 넣고 layout을 vertical로 한다
버튼의 비율을 조절하고 싶으면 layout strech를 8,1,1로 설정
object 이름을 bt0, bt1로 바꾼다
다시 cpp로 가서 시그널 슬롯을 써 볼 것이다
9 connect(ui->)이상태에서 컴파일을 한번 한다
9 connect(ui->bt0, SIGNAL(clicked()), qApp, SLOT(quit()));이제 실행해서 0번 누르면 종료된다
근데 bt1이 안먹는데, 객체 이름을 bt1로 바꿨기 때문이다
그래서 다시 go to slot을 한다
그리고 헤더파일에서도 지운다
그럼 잘 됨
헤더 slots에
void test_slot();추가하고
cpp에 함수로 만들어준다
void MainWidget::test_slot()
{
qApp->quit();
}그리고 9번라인의 quit()를 test_slot()으로 변경한다
실습
test_slot()함수의 내용을 주석처리한다
ui에서 상단의 widget 선택 후 버튼을 선택하고 쭉 내리면 checkable을 체크하고 실행한다
눌렀을 때 on/off를 표시하려 한다
cpp를 수정하고
9 connect(ui->bt0, SIGNAL(clicked(bool)), qApp, SLOT(test_slot(bool)));h와 함수를 (bool bCheck)으로 수정해준다
그리고
if(bCheck)
//if(ui->bt0->isChecked())
ui->bt0 ->setText("On");
else
ui->bt0 ->setText("Off");로 넣고 실행하면 누를때 on/off가 보인다
Socket
새로 만든다
탭 위젯을 사용해 볼 것이다
검색에 tab을 검색해서 tab widget을 가져온다
사이즈는 400x320으로 우선 설정한다
이름을 위와 같이 설정했다
새로운 클래스나 ui를 만들 수 있다
아래로 쭉 따라가면서 설정한다
만들어진 상태에서 400x320으로 변경한 뒤 다이얼을 추가한다
하지만 이렇다고 나오는게 아니다
헤더에
#include "tab1devicecontrol.h"추가해주고 변수를 추가해 줄 것이다(private)
Tab1DeviceControl * pTab1DeviceControl;그리고 cpp에
pTab1DeviceControl = new Tab1DeviceControl(ui->pTab1);추가한다
그런데 이렇게만 하면 화면을 조절할 때 다이얼이 같이 움직이지 않는다
ui->pTab1->setLayout(pTab1DeviceControl->layout());윗줄 바로 아래에 이 내용을 추가한다
만약 안된다면 layout break를 해제할 것
이제 ui를 꾸밀 것이다
layout을 해제한다
horizontal box를 추가하고 push버튼 2개, 콤보박스 하나 추가한다
이렇게 추가해준다
이름을 이렇게 설정한다
스타트 버튼을 클릭할 수 있게 한다
horizontal box를 추가하고 다이얼을 넣은 뒤 lcd 박스를 우측에 넣는다
lcd 박스 설정을 위와 같이 해준다
다이얼로그 설정은 굵은 글씨들만 바뀐 것이다
그리고 이름 바꿔준다
이제 hbox를 하나 두고 grid layout을 하나 가져온다
체크박스를 가져와서 다음과 같이 만들어준다
복사해서 1~8까지 기입한다
넣어준다!
그리고 위의 lcd처럼 똑같이 하나 만든다
크기 조절만 하면 된다
체크박스들과 gridbox, bar 이름을 변경한다
확장성을 생각하면 layout을 많이 쓰는게 좋다
progress bar도 넣어준다
led 값을 조절하기 위해 한다
bar는 255일때 100퍼여야 하니까 비율이 필요하다
위와 같이 미리 설정해준다
헤더에도 추가해주고
cpp에 함수로도 추가한다
quit도 적용한다
~/Qt/Examples/AiotClient$ cp /home/ubuntu/Qt/tetrixPi/keyled.cpp .
~/Qt/Examples/AiotClient$ cp /home/ubuntu/Qt/tetrixPi/keyled.h .
추가해서
두개를 가져왔다
tab1devicecontrol.h에
#include "keyled.h"추가해주고
tab1devicecontrol.cpp에
pKeyLed = new KeyLed(this);
connect(ui->pDialLed, SIGNAL(valueChanged(int)), pKeyLed, SLOT(writeLedData(int)));9번 라인에 추가한다
keyled.h에
#include <QApplication>추가하고
keyled.cpp에
qApp->quit();11번 라인에 추가한다
그런데 이 코드는 결국 라즈베리파이에서 해야하니까
폴더 자체를 라즈베리로 옮겨서 qmake - make 하고
