This template demonstrates how to easily integrate HelloImGui to your own project.

You can use it as a starting point for your own project.

Template repository: https://github.com/pthom/hello_imgui_template

There are 3 ways to get HelloImGui with CMake. They are documented inside the CMakeLists.txt file. By default, option 2 below is used: HelloImGui is downloaded and built automatically at configure time.

If you added hello_imgui as a subfolder, you can add it to your project with:

add_subdirectory(external/hello_imgui)

The CMakeLists.txt file will download and build hello_imgui at configure time, and make the "hello_imgui_add_app" cmake function available, if hello-imgui is not found;

By default, you do not need to add HelloImGui as a dependency to your project, it will be downloaded and built automatically during CMake configure time. If you wish to use a local copy of HelloImGui, edit CMakeLists.txt and uncomment the add_subdirectory line.

Note: hello_imgui_add_app will automatically link your app to hello_imgui, embed the assets folder (for desktop, mobile, and emscripten apps), and the application icon.

You can install hello_imgui via vcpkg with:

vcpkg install "hello-imgui[opengl3-binding,glfw-binding]"

Then you can use it inside CMake with:

find_package(hello-imgui CONFIG REQUIRED) hello_imgui_add_app(hello_world hello_world.main.cpp)

(note: the vcpkg package is named "hello-imgui" with a dash, not "hello_imgui")

Anything in the assets/ folder located beside the app's CMakeLists will be bundled together with the app (for macOS, iOS, Android, Emscripten). The files in assets/app_settings/ will be used to generate the app icon, and the app settings.

assets/ ├── world.jpg # A custom asset. Any file or folder here will be deployed │ # with the app. ├── fonts/ │ ├── DroidSans.ttf # Default fonts used by HelloImGui │ └── fontawesome-webfont.ttf # (if not found, the default ImGui font will be used) │ ├── app_settings/ # Application settings │ ├── icon.png # This will be the app icon, it should be square │ │ # and at least 256x256. It will be converted │ │ # to the right format, for each platform (except Android) │ ├── icon.ico # (optional Windows icon. Will be used as exe file icon if present) │ ├── apple/ │ │ │── Info.plist # macOS and iOS app settings │ │ │ # (or Info.ios.plist + Info.macos.plist) │ │ └── Resources/ │ │ └── ios/ # iOS specific settings: storyboard │ │ └── LaunchScreen.storyboard │ │ │ ├── android/ # Android app settings: any file placed here will be deployed │ │ │── AndroidManifest.xml # (Optional manifest, HelloImGui will generate one if missing) │ │ └── res/ │ │ └── mipmap-xxxhdpi/ # Optional icons for different resolutions │ │ └── ... # Use Android Studio to generate them: │ │ # right click on res/ => New > Image Asset │ └── emscripten/ │ ├── shell.emscripten.html # Emscripten shell file │ │ # (this file will be cmake "configured" │ │ # to add the name and favicon) │ └── custom.js # Any custom file here will be deployed │ # in the emscripten build folder 

Note: This step is optional, since the CMakeLists.txt file will by default download and build hello_imgui at configure time.

In this example, we clone hello_imgui inside external/hello_imgui

Note: external/ is mentioned in .gitignore

mkdir -p external && cd external git clone https://github.com/pthom/hello_imgui.git cd ..

Add this line at the top of your CMakeLists.txt

add_subdirectory(external/hello_imgui)

mkdir build && cd build cmake .. make -j 4

Follow step 1 from the Linux/macOS section above.

mkdir build && cd build cmake ..

It should be located in build/helloworld_with_helloimgui.sln

You will need to clone hello_imgui. In this example, we clone hello_imgui inside hello_imgui_template/external/hello_imgui

mkdir -p external && cd external git clone https://github.com/pthom/hello_imgui.git cd ..

Notes:

• external/ is mentioned in .gitignore
• the main CMakeList will detect the presence of hello_imgui in external/hello_imgui, and will use it instead of downloading it.

# Set the ANDROID_HOME and ANDROID_NDK_HOME environment variables # For example: export ANDROID_HOME=/Users/YourName/Library/Android/sdk export ANDROID_NDK_HOME=/Users/YourName/Library/Android/sdk/ndk/26.1.10909125 mkdir build_android && cd build_android ../external/hello_imgui/tools/android/cmake_arm-android.sh ../

It should be located in build_android/hello_world_AndroidStudio.

mkdir -p external && cd external git clone --recurse-submodules https://github.com/pthom/hello_imgui.git cd ..

mkdir build_ios && cd build_ios

Run CMake with the following command, where you replace XXXXXXXXX with your Apple Developer Team ID, and com.your_website with your website (e.g. com.mycompany).

cmake .. \ -GXcode \ -DCMAKE_TOOLCHAIN_FILE=../external/hello_imgui/hello_imgui_cmake/ios-cmake/ios.toolchain.cmake \ -DHELLOIMGUI_USE_SDL2=ON \ -DHELLOIMGUI_HAS_OPENGL3=ON \ -DPLATFORM=OS64COMBINED \ -DHELLOIMGUI_FREETYPE_STATIC=ON \ -DCMAKE_XCODE_ATTRIBUTE_DEVELOPMENT_TEAM=XXXXXXXXX \ -DHELLO_IMGUI_BUNDLE_IDENTIFIER_URL_PART=com.your_website

Then, open the XCode project in build_ios/helloworld_with_helloimgui.xcodeproj

You can either install emsdk following the instruction on the emscripten website or you can use the script hello_imgui/tools/emscripten/install_emscripten.sh.

# Add emscripten tools to your path source ~/emsdk/emsdk_env.sh # cmake and build mkdir build_emscripten cd build_emscripten emcmake cmake .. -DCMAKE_BUILD_TYPE=Release # or Debug (Release builds lead to smaller files) make -j 4 # launch a webserver python3 -m http.server

Open a browser, and navigate to http://localhost:8000.