做网站必须认证吗,制作宣传册用什么app,小程序主题wordpress,wordpress新浪云平台Imgui(3) | 基于 imgui-SFML 的 mnist 数据集查看器 文章目录 Imgui(3) | 基于 imgui-SFML 的 mnist 数据集查看器0. 介绍1. 处理 mnist 数据集2. 显示单张图像和label2.1 显示单张图像2.2 点选列表后更新显示的图像2.3 显示 label2.4 使用完整的列表 总结 0. 介绍
把mnist数据…Imgui(3) | 基于 imgui-SFML 的 mnist 数据集查看器 文章目录 Imgui(3) | 基于 imgui-SFML 的 mnist 数据集查看器0. 介绍1. 处理 mnist 数据集2. 显示单张图像和label2.1 显示单张图像2.2 点选列表后更新显示的图像2.3 显示 label2.4 使用完整的列表 总结 0. 介绍
把mnist数据集保存为多张.png图像、 train-label.txt 后 编写一个 GUI 程序查看图像和对应的标签。
这是一个简陋的demo可以扩展它来支持其他数据集的显示。
规划:
处理 mnist 数据集显示单张图像和label图像文件名列表的显示点选列表item后切换显示的图像和label
1. 处理 mnist 数据集
from mnist import MNIST
import matplotlib.pyplot as plt
import numpy as np # 导入numpy
import osdef save_images_and_labels(images, labels, directory, label_filename):将图像和标签保存到指定目录。if not os.path.exists(directory):os.makedirs(directory)label_file_path os.path.join(directory, label_filename)with open(label_file_path, w) as label_file:for i, (image, label) in enumerate(zip(images, labels), start1):image_filename f{i}.pngimage_path os.path.join(directory, image_filename)# 将图像数据转换为NumPy数组并重塑image_array np.array(image, dtypenp.uint8).reshape(28, 28)# 保存图像plt.imsave(image_path, image_array, cmapgray)# 写入标签label_file.write(f{image_filename} {label}\n)def main():# 加载MNIST数据集mndata MNIST(mnist_data)train_images, train_labels mndata.load_training()test_images, test_labels mndata.load_testing()# 保存训练数据集save_images_and_labels(train_images, train_labels, train, train-label.txt)# 保存测试数据集save_images_and_labels(test_images, test_labels, test, test-label.txt)if __name__ __main__:main()目录结构:
train|-- 1.png|-- 2.png...|-- train-label.txt2. 显示单张图像和label
2.1 显示单张图像
简单起见 直接使用 imgui-SFML 进行窗口创建 方便后续直接添加 imgui 的 GUI widget. CMakeLists.txt 的写法查看之前的博客内容。
加载了 train/1.png 图像文件到 sf::Texture 对象通过 sf::Sprite 装载。 sprite 的好处是可以设定位置还可以缩放。 我放大了20倍。关键代码: sf::Texture texture;if (!texture.loadFromFile(../train/1.png)){std::cerr Error loading image std::endl;return -1;}sf::Sprite sprite;sprite.setTexture(texture);sprite.setScale(20, 20);sprite.setPosition(20, 20);完整代码:
#include imgui.h
#include imgui-SFML.h#include SFML/Graphics.hpp
#include SFML/System/Clock.hpp
#include SFML/Window/Event.hpp#include iostreamint main()
{constexpr int win_width 960;constexpr int win_height 640;sf::RenderWindow window(sf::VideoMode(win_width, win_height), mnist viewer);window.setFramerateLimit(60);bool ret ImGui::SFML::Init(window); // [imgui-SFML]if (!ret)return -1;sf::CircleShape shape(100.f);shape.setFillColor(sf::Color::Green);sf::Texture texture;if (!texture.loadFromFile(../train/1.png)){std::cerr Error loading image std::endl;return -1;}sf::Sprite sprite;sprite.setTexture(texture);sprite.setScale(10, 10); // 水平和垂直方向都放大20倍sprite.setPosition(20, 20);sf::Clock deltaClock;while (window.isOpen()){sf::Event event;while (window.pollEvent(event)){ImGui::SFML::ProcessEvent(window, event); // [imgui-SFML]if (event.type sf::Event::Closed){window.close();}}ImGui::SFML::Update(window, deltaClock.restart()); // [imgui-SFML]window.clear();window.draw(sprite);ImGui::SFML::Render(window); // [imgui-SFML]window.display();}ImGui::SFML::Shutdown(); // [imgui-SFML]return 0;
}2.2 点选列表后更新显示的图像
sprite 对象就是一个容器 或者说带有位置的放大镜 你随时可以换一个新的 texture 丢给它。 现在我们通过 imgui 显示一个 list 任意个一个 list item 被选中的时候就加载对应的图像文件获取 texture 后装到 sprite 里头界面上就看到更新的图像了: 关键代码: // 使用ImGui创建一个简单的列表ImGui::Begin(Image List);// 假设文件名为1.png到10.pngfor (int i 1; i 10; i) {std::string fileName std::to_string(i) .png;// 如果列表项被点击if (ImGui::Selectable(fileName.c_str(), currentFile fileName)) {currentFile fileName; // 更新当前选中的文件名// 加载对应的纹理if (!texture.loadFromFile(currentFile)) {std::cerr Failed to load currentFile std::endl;} else {sprite.setTexture(texture);}}}ImGui::End();2.3 显示 label
train-label.txt 每一行是 image_name image_label 的形式 例如:
1.png 0使用哈希表存储这一映射关系 然后每当通过GUI交互选择了新的文件名字时 从字典里查询出对应的 label。
在 imgui 里显示当前图像的 label 很简单 只需要添加 ImGui::Text, 并用 ImGui::Begin() 和 End() 包裹即可: int currentLabel label_map[currentFile];ImGui::Begin(Label Info);ImGui::Text(Current Image: %s, currentFile.c_str());ImGui::Text(Label: %d, currentLabel);ImGui::End();增大显示的字体
label 是我们关注的重要信息 要用大字体显示 label 需要先加载字体并执行build和刷新 否则程序运行阶段会遇到 imgui 的检查失败。
关键代码: // 加载字体const std::string asset_dir ../../games/Resources;const std::string font_path asset_dir /Arial.ttf;// 在这里添加字体ImFont* bigFont ImGui::GetIO().Fonts-AddFontFromFileTTF(font_path.c_str(), 24.0f);if (!bigFont) {std::cerr Failed to load font. std::endl;}// 构建字体图集ImGui::GetIO().Fonts-Build();// 更新SFML中的字体纹理ret ImGui::SFML::UpdateFontTexture();if (!ret)return -2;while(){while(){// 显示当前图像的标签if (!currentFile.empty()) {int currentLabel label_map[currentFile];ImGui::Begin(Label Info, nullptr, ImGuiWindowFlags_AlwaysAutoResize);ImGui::PushFont(bigFont); // 使用更大的字体ImGui::Text(Label: %d, currentLabel);ImGui::PopFont(); // 恢复默认字体ImGui::End();}}}如果不这样设定 会遇到这些报错:
Assertion failed: (g.IO.Fonts-IsBuilt() Font Atlas not built! Make sure you called ImGui_ImplXXXX_NewFrame() function for renderer backend, which should call io.Fonts-GetTexDataAsRGBA32() / GetTexDataAsAlpha8()), function ErrorCheckNewFrameSanityChecks, file imgui.cpp, line 9579.Assertion failed: (io.Fonts-TexID ! (ImTextureID) nullptr), function RenderDrawLists, file imgui-SFML.cpp, line 876.效果: 2.4 使用完整的列表
读取文件名字的时候原来是硬编码10张图现在改为从 unordered_map 里读取。 注意 由于这个数据量不大 因此没有另外开启线程。 for (int i 1; i 10; i) {std::string fileName std::to_string(i) .png;...}for (const auto kv : label_map){const std::string fileName kv.first;...}最终效果:
总结
通过使用 SFML 加载并显示了了图像(texture-sprite-window)。 通过使用 imgui, 显示了图像文件列表、 label 并且列表被选中元素和图像、 label 是联动的。
在设置 label 字体的时候 需要额外调用 imgui 的构建字体和 imgui-SFML 的刷新, 来避免运行时候的检查报错。
是一个很简陋的图像数据集查看工具可以进一步完善。
源码放在: https://github.com/zchrissirhcz/imgui-sfml-examples/tree/main/mnist-viewer
