This is a small library that allows to stream a Dear ImGui scene to multiple WebSocket clients at once

Actions Status

imgui-ws

Dear ImGui over WebSockets

This is a small library that allows to stream a Dear ImGui scene to multiple WebSocket clients at once. This is achieved by sending Dear ImGui's DrawData structure which is then rendered in the browser using WebGL. To reduce the amount of network traffic, we send only the diffs between sequential frames (for more info - see #1).

Live examples

These are sample applications using imgui-ws, running on a Linode 2GB instance:

Example URL Description
demo-null http://imgui-ws.ggerganov.com:5001/ Dear ImGui's demo app
basic-null http://imgui-ws.ggerganov.com:5002/ Basic read-only data visualization
textures-null http://imgui-ws.ggerganov.com:5003/ Textures example

Tools

There are a few tools that help with the development and the optimization of the ImDrawData compression:

  • record-sdl2

    Record the ImDrawData for all rendered frames in a Dear ImGui session

    ./bin/record-sdl2 session.imdd
    
  • replay-sdl2

    Replay a session recorded with the record-sdl2 tool

    ./bin/replay-sdl2 session.imdd
    
  • compressor-benchmark

    Run the available ImDrawData compression algorithms on various pre-recorded Dear ImGui sessions. Reports compression ratio, average required bandwidth and cpu utilization:

    ./bin/compressor-benchmark session0.imdd [session1.imdd] [session2.imdd] [...]
    

Building & running

# build
git clone https://github.com/ggerganov/imgui-ws --recursive
cd imgui-ws && mkdir build && cd build
cmake ..
make

# running
./bin/demo-null 5000

Open some browsers and point them to http://localhost:5000/

Dependencies

Screenshot

imgui-ws

Credits

Comments
  • Web keyCode seem not compatible with imgui IO.KeysDown

    Web keyCode seem not compatible with imgui IO.KeysDown

    When i test ctrl event, ctrl event not enable. I think key id is not compatible. open demo-null and "Inputs Navigation & Focus" -> "Keyboard, Gamepad & Navigation State"

    1. pressed x, name is right
    2. pressed s, name is wrong, and not high light in virtual keyboard
  • Add connect and disconnect callbacks

    Add connect and disconnect callbacks

    Allowing the calling application to be notified of connects and disconnects simplifies logic around these events. Previously, the only solution was a busy loop which called takeEvents(), requiring a separate thread if the main thread needed to do other work. This solution allows these events to propagate asynchronously. These handlers were not added to Incppect because they would be called through the ImGuiWS class anyway and Incppect makes these events available to ImGuiWS. Additionally, if ImGuiWS is not being used to render frames but instead as a proxy for Incppect, this again simplifies the logic needed to respond to these events.

  • Is right mouse down event disable?

    Is right mouse down event disable?

    When i try http://85.90.246.132:5001/ demo, go to "Popups & Modal Windows" -> "Context menus", right click button is not open popups windows. Have same way to fix it?

  • Add TakeControl event

    Add TakeControl event

    This is a simple addition to the events list which could allow a client to send a TakeControl event to the server. The server could handle this request by giving mouse control to that client and rendering the window size of that client.

  • Server headless mode

    Server headless mode

    See if there is a way to avoid creating application window on the server and still generate ImDrawData. This would allow to start a remote instance on a cloud instance where we don't have GUI.

    Looks like https://github.com/ocornut/imgui/blob/master/examples/example_null/main.cpp should be exactly what we are looking for.

  • ImDrawData compression benchmarks

    ImDrawData compression benchmarks

    Description

    The goal is to create a simple framework for benchmarking various ImDrawData compression approaches by running them on the same input buffers and reporting the computation time and compression factors. This will help finding the best compression approach for #1

    • [X] Record generated ImDrawData buffers generated from various scenes and store them in binary files
    • [x] Implement a tool that reads those files and passes them to a custom compression function in the same way as if the buffers were generated by Dear ImGui. The tool would record the processing time and the output size.
    • [X] Implement a tool that renders the binary files (i.e. replay) for display purposes
  • Enable 32-bit vertex indices

    Enable 32-bit vertex indices

    ref #5

    • This change enables 32-bit vertex indices in Dear ImGui and also makes the WebGL renderer use 32-bit vertex arrays
    • Your browser must support the OES_element_index_uint extension in order to run this
    • After checking out this branch, make sure to remove CMakeCache.txt from your build folder and re-build the project

    For now, I don't want to merge this into master yet, because I am not sure how many devices support this WebGL extension. Maybe we need to add some fallback logic if it is not supported.

  • How to add Ctrl+c Ctrl+v Ctrl+A function?

    How to add Ctrl+c Ctrl+v Ctrl+A function?

    Thanks for this brilliant project! I think if I can copy and paste some text on imgui-ws . But i tried and failed. Take a look at source code:

          struct Event {
              enum Type {
                  Unknown = 0,
                  Connected,
                  Disconnected,
                  MouseMove,
                  MouseDown,
                  MouseUp,
                  MouseWheel,
                  KeyPress,
                  KeyDown,
                  KeyUp,
                  Resize,
                  TakeControl,
              };
    

    Is it difficult to add c-v c-x function?This will be very helpful. thanks~

  • Example for sending external texture/ draw data to clients

    Example for sending external texture/ draw data to clients

    Hi @ggerganov

    Thanks for your work on imgui-ws, it's a great implementation and should be very useful.

    Just wondering if you could provide a quick example for properly rendering external opengl textures in imgui windows.

    I can successfully render using normal imgui in a glfw window, however get a blank screen when viewing via imgui-ws.

    I have looked at the setTexture function in the header file, however am unsure how this ties in with a texture already rendered using imgui and whether I would need to setTexture for imgui-ws when constructing the original opengl3 texture, etc.

    I am also unsure if a rendered opengl texture inside a imgui window is counted inside ImGuiDrawData() when imguiWS.setDrawData(ImGui::GetDrawData()); is called. A quick example or a few pointers would be great.

    Kind regards,

    Tom. imgui-ws_texture_window

  • Improve compression of ImDrawData buffers

    Improve compression of ImDrawData buffers

    Description

    It is essential for the successful application of this WebSocket approach to minimise the amount of network traffic between the server and the clients. The WebSocket spec allows for extensions that perform general compression on the transmitted data, but it can only do so much. A custom approach, handcrafted for ImDrawData could significantly reduce the network traffic.

    Current implementation

    The differences are calculated per ImDrawList. For each ImDrawList, we store the position of the first vertex and subtract this value from all vertices in the draw list. This makes the ImDrawList invariant to shifts. The client takes care to restore the position offset before rendering the data.

    If the current ImDrawList curList has the same size as it had in the previous frame prevList - the binary contents of curList and prevList are xored and run-length encoded. Otherwise - we send the full curList.

    Ideas to explore

    • [X] Per DrawList differences
    • [ ] Deinterleave ImDrawVtx fields
    • [ ] Rate control of focused/hovered windows
    • [ ] Alternative ImDrawList structure
Built a peer-to-peer group based file sharing system where users could share or download files from the groups they belonged to. Supports parallel downloading with multiple file chunks from multiple peers.

Mini-Torrent Built a peer-to-peer group based file sharing system where users could share or download files from the groups they belonged to. Supports

Nov 15, 2021
Small and fast cross-platform networking library, with support for messaging, IPv6, HTTP, SSL and WebSocket.

frnetlib Frnetlib, is a cross-platform, small and fast networking library written in C++. There are no library dependencies (unless you want to use SS

Nov 25, 2022
Cross-platform library for building Telegram clients

TDLib (Telegram Database library) is a cross-platform library for building Telegram clients. It can be easily used from almost any programming language.

Jan 8, 2023
FreeRDP is a free remote desktop protocol library and clients

FreeRDP is a free implementation of the Remote Desktop Protocol (RDP), released under the Apache license. Enjoy the freedom of using your software wherever you want, the way you want it, in a world where interoperability can finally liberate your computing experience.

Dec 31, 2022
Built a client-server application using TCP and UDP sockets, in which the clients can subscribe/unsubscribe to various topics.

Built a client-server application using TCP and UDP sockets, in which the clients can subscribe/unsubscribe to various topics.

Jun 22, 2022
Mongoose Embedded Web Server Library - a multi-protocol embedded networking library with TCP/UDP, HTTP, WebSocket, MQTT built-in protocols, async DNS resolver, and non-blocking API.
Mongoose Embedded Web Server Library - a multi-protocol embedded networking library with TCP/UDP, HTTP, WebSocket,  MQTT built-in protocols, async DNS resolver, and non-blocking API.

Mongoose - Embedded Web Server / Embedded Networking Library Mongoose is a networking library for C/C++. It implements event-driven non-blocking APIs

Jan 1, 2023
Rust bindings for Pixar's Universal Scene Description (USD)

Getting started Make sure you have cppmm built/working. https://github.com/vfx-rs/cppmm Build usd 21.11 Then run bash bind.sh. You need to make sure a

Dec 9, 2022
Cross-platform, efficient, customizable, and robust asynchronous HTTP/WebSocket server C++14 library with the right balance between performance and ease of use

What Is RESTinio? RESTinio is a header-only C++14 library that gives you an embedded HTTP/Websocket server. It is based on standalone version of ASIO

Jan 6, 2023
Ultra fast and low latency asynchronous socket server & client C++ library with support TCP, SSL, UDP, HTTP, HTTPS, WebSocket protocols and 10K connections problem solution
Ultra fast and low latency asynchronous socket server & client C++ library with support TCP, SSL, UDP, HTTP, HTTPS, WebSocket protocols and 10K connections problem solution

CppServer Ultra fast and low latency asynchronous socket server & client C++ library with support TCP, SSL, UDP, HTTP, HTTPS, WebSocket protocols and

Jan 3, 2023
C++ websocket client/server library

WebSocket++ (0.8.2) WebSocket++ is a header only C++ library that implements RFC6455 The WebSocket Protocol. It allows integrating WebSocket client an

Jan 8, 2023
An easy to use and powerful open source websocket library written in C.

libwebsock Easy to use C library for websockets This library allows for quick and easy development of applications that use the websocket protocol, wi

Nov 13, 2022
Dec 15, 2022
websocket and http client and server library, coming with ws, a command line swiss army knife utility

Hello world IXWebSocket is a C++ library for WebSocket client and server development. It has minimal dependencies (no boost), is very simple to use an

Jan 5, 2023
A Lightweight and fully asynchronous WebSocket client library based on libev

libuwsc(中文) A Lightweight and fully asynchronous WebSocket client library based on libev for Embedded Linux. And provide Lua-binding. Why should I cho

Dec 24, 2022
HTTP and WebSocket built on Boost.Asio in C++11
HTTP and WebSocket built on Boost.Asio in C++11

HTTP and WebSocket built on Boost.Asio in C++11 Branch Linux/OSX Windows Coverage Documentation Matrix master develop Contents Introduction Appearance

Jan 4, 2023
Custom WebSocket implementation in C for educational and recreational purposes.

C WebSockets WARNING! The library is in an active development state and is not even alpha yet. Use it at your own risk. Nothing is documented, anythin

May 25, 2022
Pushpin is a reverse proxy server written in C++ that makes it easy to implement WebSocket, HTTP streaming, and HTTP long-polling services.
Pushpin is a reverse proxy server written in C++ that makes it easy to implement WebSocket, HTTP streaming, and HTTP long-polling services.

Pushpin is a reverse proxy server written in C++ that makes it easy to implement WebSocket, HTTP streaming, and HTTP long-polling services. The project is unique among realtime push solutions in that it is designed to address the needs of API creators. Pushpin is transparent to clients and integrates easily into an API stack.

Jan 2, 2023
cuehttp is a modern c++ middleware framework for http(http/https)/websocket(ws/wss).

cuehttp 简介 cuehttp是一个使用Modern C++(C++17)编写的跨平台、高性能、易用的HTTP/WebSocket框架。基于中间件模式可以方便、高效、优雅的增加功能。cuehttp基于boost.asio开发,使用picohttpparser进行HTTP协议解析。内部依赖了nl

Dec 17, 2022
WSServer is a fast, configurable, and extendable WebSocket Server for UNIX systems written in C (C11).

WSServer a C WebSocket Server WSServer is a fast, configurable, and extendable WebSocket Server for UNIX systems written in C (C11). As of version 2.0

Dec 8, 2022