add documentations (#27)

* add builing.md

* move soirce files to src

* add about dialog.

* add README details.

* update wrong link.

BUILDING.md

@@ -0,0 +1,46 @@
+# Building font-render-tester
+
+## Requirements
+
+__Font-Render-Tester__ is written in C++ and the build script is set to expect C++23 level of feature set.  At the moment only [Visual Studio 2022](https://visualstudio.microsoft.com/) is extensively compiled against. If you are using other compilers and have issues with, please feel free to report an issue or submit a pull request.
+
+In order to compile with __Visual Studio 2022__, it must be setup with C++ features. Make sure to install __Desktop development with C++__ workload.
+
+This project requires [CMake](https://cmake.org/) and [VCPKG Library Manager](https://github.com/microsoft/vcpkg). Please follow the installation instruction of each tools.
+
+Also, the environment `VCPKG_ROOT` is needed and it should point to the root directory of __VCPKG__ (eg. `c:\vcpkg`)
+
+## Building with IDE
+
+### Visual Studio Code
+Microsoft's [CMake Tools](https://marketplace.visualstudio.com/items?itemName=ms-vscode.cmake-tools) Extension is recommended.
+
+You should be able to open the project in Visual Studio Code and it will automatically setup anything needed, given that you have the C++ extension installed. 
+
+Upon the configure step at the first, the IDE will ask for the configure preset to use. Please select the `default` preset as it will setup build to use __VCPKG__. 
+
+### Visual Studio 2022
+
+In __Visual Studio 2022__, use `Open a local folder` or `File->Open->Folder...` in order to open the project.
+
+Upon opening the project, __Visual Studio__ will configure the project. This includes downloading any dependencies the project needs. 
+
+After the configure step is done, you should be able to run or debug the project right away.
+
+## Building with command line
+
+1. Change directory into the source directory.
+2. Run the following command:
+   ```sh
+   $ cmake --preset=default
+   ```
+   This will create a build directory call `build` and configure the project inside that directory. 
+
+   The configuring process includes downloading dependencies from the __VCPKG__ repository and building those dependencies. This will take a while.
+3. To build the project, run the following command:
+    ```sh
+    $ cmake --build ./build --config=Release
+    ```
+
+The executable files, along with required dll files and font files will be created at `<source_dir>/build/Release`.
+

CMakeLists.txt

@@ -1,22 +1,28 @@
 cmake_minimum_required(VERSION 3.19)
 
-# set the project name
 project(font-render-tester)
 
-# add the executable
 add_executable(font-render-tester
-        "colors.hpp"
-        "context.hpp"
-        "draw_glyph.cpp" "io_util.hpp"
-        "font.cpp" "font.hpp"
-        "imgui-filebrowser/imfilebrowser.h"
-        "main_scene.hpp" "main_scene.cpp"
-        "main.cpp"
-        "scene.hpp" "scene.cpp"
-        "settings.hpp" "settings.cpp"
-        "text_renderer.hpp" "text_renderer.cpp"
-        "texture.hpp" "texture.cpp"
+        "src/colors.hpp"
+        "src/context.hpp"
+        "src/draw_glyph.cpp"
+        "src/draw_glyph.hpp"
+        "src/font.cpp"
+        "src/font.hpp"
+        "src/io_util.hpp"
+        "src/main_scene.cpp"
+        "src/main_scene.hpp"
+        "src/main.cpp"
+        "src/scene.cpp"
+        "src/scene.hpp"
+        "src/settings.cpp"
+        "src/settings.hpp"
+        "src/text_renderer.cpp"
+        "src/text_renderer.hpp"
+        "src/texture.cpp"
+        "src/texture.hpp"
 )
+target_include_directories(font-render-tester PRIVATE imgui-filebrowser)
 
 target_compile_features(font-render-tester PRIVATE cxx_std_23)
 set_property(TARGET font-render-tester PROPERTY CXX_STANDARD 23)
@@ -35,8 +41,6 @@ find_package(SDL2 CONFIG REQUIRED)
 find_package(spdlog CONFIG REQUIRED)
 find_package(utf8cpp CONFIG REQUIRED)
 
-target_include_directories(font-render-tester PRIVATE ${STB_INCLUDE_DIRS})
-
 target_link_libraries(font-render-tester PRIVATE
         freetype 
         harfbuzz::harfbuzz

README.md

@@ -1 +1,56 @@
-# font-render-tester
+# Font-Render-Tester
+
+__Font-Render-Tester__ is a tool that shows previews of text in a given font and different settings. It
+supports font features like __font size__ and font variations (font width, weight, etc.). You can also
+turns on and off OpenType shaping to see how the give text would render with specific OpenType settings
+like __direction__, __script__ and __language__.
+
+__Font-Render-Tester__ also shows some of the basic font metrics information like __Ascend__ or __Decend__.
+
+Also, you can change fonts imediately from the list make it's quite useful to preview differnt font files.
+
+__Font-Render-Tester__ is written in modern C++ and uses FreeType2 for glyph rendering and Harfbuzz for
+OpenType shaping.
+
+## Motivations
+
+On my personal website, I'm maintaining a small list of games that support Thai and how they perform in
+that regards. I need to create screenshot to shows how Thai text should looks like comparing to the actual
+text in game. At first I was using Microsoft Word for that task. Later on I wants to learn more on how to
+properly implement the text rendering so I created my own tool.
+
+Also in my game engine, I need to specify the settings of the font metrics I'm using instead of reading
+the value from the font file. Since the tool can shows some basic font metrics value, I can use this to
+choose the font I'm going to use along with its metrics values.
+
+## Usage
+
+At the first run, the application works on its own font directory (the one used on the GUI). You can
+change the font directory by choose menu `File->Change font directory`.
+
+![Change Directory](doc/README/change_directory.webp)
+
+Once the font directory is set you can start playing with the toolbar on the right hand side.
+
+![Change font/font size](doc/README/change_font_size.webp)
+
+You can play with OpenType text shaping, either enable or disable. For my use I usually uses it to find if
+font can render Thai correctly when either text shaping is off or on, and when it's on does it need the
+specific algorithm for the language or not.
+
+![Toggle OpenType shaping](doc/README/opentype.webp)
+
+You can also change the text direction in certains lanuage, like vertical text in Japanese.
+
+__Notes__: screenshot contains lyrics from the song [_Sakura Iro Mau Koro_ by _Mika Nakashima_](https://www.youtube.com/watch?v=DZ_Ww5oCLPI) ℗2005 Sony Music Labels Inc.
+
+![Change text direction](doc/README/change_direction.webp)
+
+For variable fonts, you can change any of the 5 common axis, depends on whether or not the axis is
+supported by the given font.
+
+__Notes__: screenshot contains lyrics from the song
+[_Slow Dancing in a Burning Room_ by _John Mayer_(https://www.youtube.com/watch?v=5MkfBNl_3pw)
+℗2006 Aware Records LLC.
+
+![Variable Font](doc/README/variable_font.webp)

main_scene.cpp → src/main_scene.cpp

@@ -4,6 +4,7 @@
 #include "io_util.hpp"
 #include "settings.hpp"
 #include "text_renderer.hpp"
+#include "version.hpp"
 #include <algorithm>
 #include <array>
 #include <filesystem>
@@ -12,7 +13,9 @@
 #include <imgui_internal.h>
 #include <magic_enum_all.hpp>
 #include <magic_enum_containers.hpp>
+#include <nlohmann/json.hpp>
 #include <spdlog/spdlog.h>
+#include <utf8/cpp20.h>
 
 namespace {
 constexpr int toolbarWidth = 400;
@@ -63,6 +66,7 @@ void MainScene::CleanUp(Context &context) {
 
 void MainScene::DoUI(Context &context) {
   int newSelected = selectedFontIndex;
+  bool showAbout = false;
   if (ImGui::BeginMainMenuBar()) {
 
     if (ImGui::BeginMenu("File##menu")) {
@@ -96,9 +100,22 @@ void MainScene::DoUI(Context &context) {
       ImGui::EndMenu();
     }
 
+    if (ImGui::BeginMenu("Help##menu")) {
+      if (ImGui::MenuItem("About##help-menu")) {
+        showAbout = true;
+      }
+
+      ImGui::EndMenu();
+    }
+
     ImGui::EndMainMenuBar();
   }
 
+  if (showAbout) {
+    ImGui::OpenPopup("About##dialog");
+    showAbout = false;
+  }
+
   if (ImGui::BeginViewportSideBar(
           "status bar", nullptr, ImGuiDir_Down, ImGui::GetFrameHeight(),
           ImGuiWindowFlags_NoScrollbar | ImGuiWindowFlags_NoSavedSettings |
@@ -327,13 +344,45 @@ void MainScene::DoUI(Context &context) {
     }
   }
 
-  if (ImGui::BeginPopup("InvalidFont")) {
+  if (ImGui::BeginPopupModal("InvalidFont")) {
     ImGui::Text("Invalid Font File");
     if (ImGui::Button("Close")) {
       ImGui::CloseCurrentPopup();
     }
     ImGui::EndPopup();
   }
+
+  if (ImGui::BeginPopupModal("About##dialog")) {
+    ImGui::Text("Font-Render-Tester %d.%d.%d", majorVersion, minorVersion,
+                patchVersion);
+
+    ImGui::Text("http://github.com/wutipong/font-render-tester");
+
+    ImGui::SeparatorText("Dependencies");
+
+    ImGui::Text("Dear ImGui %s", ImGui::GetVersion());
+    ImGui::Text("FreeType %d.%d.%d", FREETYPE_MAJOR, FREETYPE_MINOR,
+                FREETYPE_PATCH);
+    ImGui::Text("Harfbuzz %s", HB_VERSION_STRING);
+    ImGui::Text("imgui-filebrowser");
+    ImGui::Text("Magic-Enum %d.%d.%d", MAGIC_ENUM_VERSION_MAJOR,
+                MAGIC_ENUM_VERSION_MINOR, MAGIC_ENUM_VERSION_PATCH);
+    ImGui::Text("NLOHMANM-JSON %d.%d.%d", NLOHMANN_JSON_VERSION_MAJOR,
+                NLOHMANN_JSON_VERSION_MINOR, NLOHMANN_JSON_VERSION_PATCH);
+    ImGui::Text("SDL %d.%d.%d", SDL_MAJOR_VERSION, SDL_MINOR_VERSION,
+                SDL_PATCHLEVEL);
+    ImGui::Text("spdlog %d.%d.%d", SPDLOG_VER_MAJOR, SPDLOG_VER_MINOR,
+                SPDLOG_VER_PATCH);
+    ImGui::Text("UTF8-CPP");
+
+    ImGui::Separator();
+
+    if (ImGui::Button("Close")) {
+      ImGui::CloseCurrentPopup();
+    }
+
+    ImGui::EndPopup();
+  }
 }
 
 void MainScene::OnDirectorySelected(Context &ctx,