開發環境搭建

項目運行環境

開發調試環境建議使用Ubuntu22.04 Desktop

TinyPiXOS開發環境可以通過 源碼編譯安裝 或者 下載安裝包 進行開發環境配置。

VSCode開發工具

建議使用Visual Studio Code進行項目開發，使用CMake進行工程管理。

VSCode可以直接安裝在Ubuntu虛擬機當中使用，同時也可以將VSCode安裝在Windows/Mac宿主機上，使用 ms-vscode-remote.remote-ssh、ms-vscode-remote.remote-ssh-edit、ms-vscode.remote-explorer插件通過ssh遠程鏈接虛擬機進行開發。（具體配置方法可自行搜索）

推薦安裝插件清單

extensions.txt

cheshirekow.cmake-format
cschlosser.doxdocgen
josetr.cmake-language-support-vscode
mhutchie.git-graph
ms-ceintl.vscode-language-pack-zh-hans
ms-vscode-remote.remote-ssh
ms-vscode-remote.remote-ssh-edit
ms-vscode.cmake-tools
ms-vscode.cpptools
ms-vscode.cpptools-extension-pack
ms-vscode.cpptools-themes
ms-vscode.makefile-tools
ms-vscode.remote-explorer
shd101wyy.markdown-preview-enhanced
zchrissirhcz.cmake-highlight

安裝VSCode插件

1. 將VSCode添加到系統路徑(環境變量)

   • MacOS/Linux
     1. 打開 VSCode。
     2. 按下Command + Shift + P打開命令面板。
     3. 輸入Shell Command: Install ‘code’ command in PATH并按下 Enter。
   • Windows
     1. 打開 VSCode。
     2. 按下Ctrl + Shift + P打開命令面板。
     3. 輸入Shell Command: Install ‘code’ command in PATH并按下 Enter。
     4. 重啟命令提示符或 PowerShell。

2. 安裝插件

   可先把extensions.txt文件復制到該設備，接著在終端中運行以下腳本：

   • MacOS/Linux

     cat extensions.txt | xargs -L 1 code --install-extension

   • Windows

     Get-Content extensions.txt | ForEach-Object { code --install-extension $_ }

上述腳本會逐行讀取extensions.txt文件中的插件名稱，并且使用code --install-extension命令來安裝這些插件。

簡單示例程序

直接使用g++構建一個實例程序，g++需要支持C++11，建議版本11.4。

1. 創建main.cpp，構建一個顯示一個按鈕的實例程序

main.cpp

#include "TpApp.h"
#include "TpMainWindow.h"
#include "TpButton.h"

int32_t main(int32_t argc, char *argv[])
{
    // 構建主事件循環對象
    TpApp app(argc, argv);

    // 創建主窗體對象
    TpMainWindow *vScreen = new TpMainWindow();
    // 設置主窗體背景顏色
    vScreen->setBackGroundColor(_RGBA(128, 128, 128, 255));
    // 將主窗體綁定至app
    app.bindVScreen(vScreen);

    // 創建一個按鈕對象，設置按鈕文本為"北京市"，按鈕放置在 vScreen 窗體上顯示
    TpButton *button1 = new TpButton("北京市", vScreen);
    // 設置按鈕的尺寸
    button1->setSize(300, 64);
    // 設置按鈕顯示在父窗體（vScreen）的坐標
    button1->move(150, 150);
    // 綁定按鈕信號槽，按鈕在被點擊后觸發該信號，進入該匿名函數
    connect(button1, onClicked, [=](bool checked)
            { std::cout << "按鈕被點擊" << std::endl; });

    // 手動更新主窗體
    vScreen->update();

    // 運行主事件循環
    return app.run();
}

2. 創建編譯腳本cross與main.cpp在同級目錄

cross

g++ main.cpp -o button -I. -I/usr/include/TinyPiX -I/usr/include/TinyPiX/TpWM -I/usr/include/TinyPiX/TpUtils -I/usr/include/TinyPiX/TpExtUtils -I/usr/include/TinyPiX/TpGUI -I/usr/include/TinyPiX/TpGUI/Core -I/usr/include/TinyPiX/TpGUI/Screen -I/usr/include/TinyPiX/TpGUI/Widgets -I/usr/include/TinyPiX/TpGUI/Core -L/usr/lib -L/usr/lib/TinyPiX -lTpUtils -lTpExtUtils -lTpGUI

3. 運行編譯腳本

需要cross文件有可執行權限，若無可執行權限可使用chmod命令修改權限

chmod 777 cross
./cross

4. 運行程序

編譯成功后會在當前目錄下生成一個button可執行文件。執行button前需要啟動TpWM

#TpWM
./button

詳細教程

• 應用開發詳細教程參考開發第一個APP
• 組件開發詳細教程參考自定義組件
• 示例程序examples

版權所有

版權歸屬：TinyPiXOS

許可證：署名-相同方式共享 4.0 國際 (CC-BY-SA-4.0)