Development Environment Setup

Runtime Environment

We recommend using Ubuntu22.04桌面版系统 for the development and debugging environment.

Configure the TinyPiXOS development environment via Source Build or Package Installation.

VSCode IDE

Use Visual Studio Code for development, and manage projects with CMake.

You can install VSCode directly in the Ubuntu VM, or install VSCode on your Windows/Mac host and use ms-vscode-remote.remote-ssh, ms-vscode-remote.remote-ssh-edit, ms-vscode.remote-explorer extensions to develop via ssh into the VM. (Search online for configuration details)

Recommended Extensions

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

Install VSCode Extensions

1. Add VSCode to system PATH (environment variable)

   • MacOS/Linux
     1. Open VSCode.
     2. Press Command + Shift + P to open the Command Palette.
     3. Enter Shell Command: Install ‘code’ command in PATH and press Enter.
   • Windows
     1. Open VSCode.
     2. Press Ctrl + Shift + P to open the Command Palette.
     3. Enter Shell Command: Install ‘code’ command in PATH and press Enter.
     4. Restart Command Prompt or PowerShell.

2. Install extensions

   Copy the extensions.txt file to the device, then run:

   • MacOS/Linux

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

   • Windows

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

The scripts read extensions.txt line by line and install each extension using code --install-extension.

Simple Example Program

Build a sample program with g++. Ensure C++11 support; recommended g++ version is 11.4.

1. Create main.cpp to show a window with a button

main.cpp

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

int32_t main(int32_t argc, char *argv[])
{
    // Create the main event loop object
    TpApp app(argc, argv);

    // Create the main window object
    TpMainWindow *vScreen = new TpMainWindow();
    // Set main window background color
    vScreen->setBackGroundColor(_RGBA(128, 128, 128, 255));
    // Bind main window to app
    app.bindVScreen(vScreen);

    // Create a button with text "Beijing", placed on vScreen
    TpButton *button1 = new TpButton("Beijing", vScreen);
    // Set button size
    button1->setSize(300, 64);
    // Position the button on the parent window (vScreen)
    button1->move(150, 150);
    // Connect the button's clicked signal to a lambda
    connect(button1, onClicked, [=](bool checked)
            { std::cout << "Button clicked" << std::endl; });

    // Manually update the main window
    vScreen->update();

    // Run the main event loop
    return app.run();
}

2. Create the build script cross in the same directory as 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. Run the build script

Ensure the cross file is executable. If not, grant permission with chmod.

chmod 777 cross
./cross

4. Run the program

After a successful build, a button executable is generated in the current directory. Start TpWM before executing button.

#TpWM
./button

Detailed Tutorials

• Application Development see Develop the First APP
• Component Development see Custom Components
• Sample Programs examples

Copyright

Copyright Ownership:TinyPiXOS

License under:Attribution-ShareAlike 4.0 International (CC-BY-SA-4.0)