Dates are converted to and from the seconds in time_t which is limited to long max 2147483647 which is Tuesday, January 19, 2038. When this date overflows the value becomes negative so converting 1/1/2040 ends up being a date in 1903.

https://groups.google.com/forum/#!topic/emscripten-discuss/_yFz-SFf5Vg

https://bit.dev/mui-org/material-ui/text-field

• reactive data validation
• on-hover textfield & button effects
• password textfield
• textfield with icon
• textfield label animation

backup of https://www.reddit.com/r/cpp/comments/dcwq61/how_you_can_create_c_gui_framework_and_maybe_earn/

Story about C++ UI framework what deserves to exist

I just wanted portable and small alternative to electron, without javascript. So small and portable that it can be used as browser game GUI. A lot of games use C++... and C++ can be run in browser via emscripten! Bingo!

I started searching for opensource or free-for-indie-devs C++ UI solutions.

• QT - is is great. But QT widgets are not such style & animation friendly as HTML/CSS. QT qml = javascript overhead = not suitable for browser game.

• CoherentGT - awesome. But no browser support + javascript overhead.

• flutter - uses Dart and GC. flutter engine is C++ and uses SKIA

• ... (you can continue this list)

Wait - flutter engine is C++? SKIA? SKIA is used by chromium, flutter, android. Fast and cross-platform. So small and portable that it can be used as browser game GUI! Why we don`t have (production ready) SKIA based C++ UI frameworks?

Lets extract HTML/CSS engine from cobalt.foo (chromium fork), add ui (widgets) from chromium https://github.com/blockspacer/skia-opengl-emscripten/blob/master/src/skia_ui_demo.cc#L520, add CMake and emscripten support https://groups.google.com/forum/#!topic/cobalt-dev/USoNfkEurTg

hooray! - we created something similar to CoherentGT and QT. Someone can start company and earn money from that approach! (have you heard about Ultralight?)

Wait - we have our own HTML/CSS engine, so we can customize it! Lets add some features from angular / vue.js / etc. 3f3dd20

Lets start small and just render box as custom HTML Node https://github.com/blockspacer/skia-opengl-emscripten/blob/master/src/extended_html/input_box/input_node.cc#L28

Now we want to add click callback, like so https://github.com/blockspacer/skia-opengl-emscripten/blob/master/resources/html/index.html#L74

I use ugly EXT__on-click-print__EXT syntax, but you can make it better.

We can run it in browser via emscripten (WASM) and it uses tiny HTML engine under hood. It means that we can add https://github.com/mbasso/asm-dom support and build web pages using C++! (tiny HTML engine can be used for shadow dom). So we can create trully cross-platform UI solution that can be not only rendered using SKIA on native platform, but even run in browser/electron as usual web page! Soon browsers will add WASM DOM modification support and it will become fast and with C++ lifetime checks ( see lifetime branch of https://github.com/mgehre/llvm-project ) we will help to create safe C++ web apps / SPA.

Note what now cobalt.foo supports flexbox and can render using opengl, so it can be even faster and smaller (through i used only SKIA because of awesome SKOTTIE/lottie animation support)

I hope someone will find that ideas and code from blockspacer/skia-opengl-emscripten useful.

Again - Why we don`t have (production ready) SKIA based C++ UI frameworks?

https://codepen.io/udyux/pen/EwwPgr

(as of 2019) I`m searching for any feature rich (like HTML/CSS) UI solutions for web games that can:

• use animations (like CSS transforms)
• be fast, performance matters for web games
• can support multiple surfaces in 3D (like multiple PC screens in WEB VR game world)
• can support browser, mobile, native, e.t.c. without a lot of code changes
• be small enough to be used in browser
• with ability to turn on/off features or modify source code
• support UTF8 fonts, font rendering and i18n matters
• support shape drawing, curves
• can be used without a lot of boilerplate code (supports reactivity, custom widgets, e.t.c.)
• free for small dev teams (indie developers)
• (optional) can support animation formats like lottie/SKOTTIE

That's why i started that code repo. Maybe i don`t know something and there are some UI solutions suitable for web game dev. Please tell me if you know about them.

to remove html parsing step

Requires Visual Studio 2017 (>=15.7.2) or 2019 (>=16.0.0)

You must install the “Desktop development with C++” component and the “MFC/ATL support” sub-components.

You must have the version 10.0.18362 or higher Windows 10 SDK installed. This can be installed separately or by checking the appropriate box in the Visual Studio Installer.

The SDK Debugging Tools must also be installed. If the Windows 10 SDK was installed via the Visual Studio installer, then they can be installed by going to: Control Panel → Programs → Programs and Features → Select the “Windows Software Development Kit” → Change → Change → Check “Debugging Tools For Windows” → Change. Or, you can download the standalone SDK installer and use it to install the Debugging Tools.

Add depot_tools to the start of your PATH (must be ahead of any installs of Python). Assuming you unzipped the bundle to C:\src\depot_tools, open:

Control Panel → System and Security → System → Advanced system settings → Modify the PATH system variable at the front

Use clang-cl!

# The easiest way to set Clang as the compiler is to use the -T parameter such as
cmake -G "Visual Studio 14 2015" -T v141_clang_c2 ...

v141_clang_c2 is subdir found from command:

find "C:\Program Files (x86)\Microsoft Visual Studio" -name "PlatformToolsets"

Download from http://releases.llvm.org/download.html or http://releases.llvm.org/9.0.0/LLVM-9.0.0-win64.exe

We will automatically load clang from the default installation path C:\Program Files\LLVM. If you prefer to use a different location you must manually add the bin folder to PATH.

Windows 7: Download and install at least PowerShell 3.0 https://www.microsoft.com/en-us/download/details.aspx?id=34595 (already available on Windows 10)

# (necessary to force CMake to choose MSVC over mingw GCC if you have it installed)
# set CC=cl
# set CXX=cl
cmake -E env LDFLAGS="-fuse-ld=lld"  cmake -H. -G Ninja -Bbuild -DCMAKE_C_COMPILER:PATH="C:\MeineProgramme\LLVM\bin\clang.exe" -DCMAKE_CXX_COMPILER:PATH="C:\MeineProgramme\LLVM\bin\clang++.exe" -DCMAKE_C_COMPILER_ID="Clang" -DCMAKE_CXX_COMPILER_ID="Clang" -DCMAKE_SYSTEM_NAME="Generic"

https://stackoverflow.com/a/46593308
https://chromium.googlesource.com/chromium/src/+/master/docs/windows_build_instructions.md
https://docs.microsoft.com/en-us/cpp/build/clang-support-cmake?view=vs-2019

like https://onsen.io/theme-roller/ or https://bit.dev/components

see

• https://cobalt.googlesource.com/cobalt/+/refs/heads/master/src/cobalt/renderer/glimp_shaders/glsl?autodive=0%2F%2F%2F%2F

See src/chromium/ui

I`m stuck (not enough time) with SDL2/emscripten-HTML5 mouse coords to chromium ui mouse coords conversion.

I removed window concept from chromium ui, so we use only one window always and can provide custom windowing system like SDL2 or emscripten-HTML5.

Key press events works fine, see aaf49fe

Need to fix SetCursorScreenPoint
4ad92df

chromium/ui widget may be contained/moved with parent cobalt html node.

SetCursorScreenPoint start point must be always widow top-left corner for chromium/ui widget, but parent cobalt html node position may be anywhere. So we just need cobalt click event coords to top-left corner offset coordinate conversion.

Need to add any src/chromium/ui widget as HTML node, see src/cobalt/src/cobalt/render_tree/custom_node.h and src/extended_html/input_box/input_node.h as examples

https://vuejs.org/v2/guide/routing.html

We can use CXTPL as HTML/CSS template engine.

Think about SCSS, pug, e.t.c.

https://github.com/blockspacer/CXTPL

• checkboxes
• tabs
• scrollbars
• etc

https://snipcart.com/blog/vuejs-transitions-animations

Now project can support any GUI via custom cobalt html nodes.

Some ideas:

• add html/css support to IMGUI
• add html/css support QT widgets
• add html/css support to Godot UI widgets
• e.t.c.

You can create them in two ways:

• Complex way: see cobalt/render_tree/skottie_node.h
• Better and easier way: see src/cobalt/src/cobalt/render_tree/custom_node.h and src/extended_html/input_box/input_node.h

Just wrap your GUI element into html node and bind cobalt event to your GUI event.

You may also need to convert your GUI element into pixels, so it will be possible to use it as SKIA texture. For very complex UI you may want to create one big texture instead of a lot of smaller ones (for performance reasons).

Your GUI system will gain not only ease of designing via html/css, but also css animation system, 3D on-hover effects, e.t.c.

Related to #2

• codegen for custom html tag creation. C++ class with callbacks to html tag auto-binding.
• codegen for pug-like html template engine
• codegen for scss-like css template engine

see

• https://cobalt.googlesource.com/cobalt/+/refs/heads/master/src/cobalt/debug/remote/debug_web_server.cc?autodive=0%2F%2F%2F%2F
• https://cobalt.googlesource.com/cobalt/+/refs/heads/master/src/cobalt/webdriver/web_driver_module.h?autodive=0%2F%2F%2F
• https://cobalt.googlesource.com/cobalt/+/refs/heads/master/src/cobalt/doc/web_debugging.md?autodive=0%2F%2F%2F

It supports flexbox now!

to remove parsing step

That project stands on shoulders of giants: cobalt.foo project.

See licenses_cobalt.txt https://cobalt.googlesource.com/cobalt/+/refs/heads/master/src/cobalt/content/licenses/licenses_cobalt.txt?autodive=0%2F

cobalt.foo consists of a lot smaller projects with complex, but opensource LICENSE`s.

I want to make my own source code modifications opensource (like MIT/e.t.c., only for added features), but not conflict with cobalt.foo LICENSE.

Any help wanted.

• (In minimal feature build, without SKIA/opengl) we can use cobalt`s HTML parser to create virtual dom HTML and C++ WASM to handle logic. I mean - modify HTML via https://github.com/mbasso/asm-dom, but keep logic in C++ insted of JS. It may be next-gen web framework after WASM GC/DOM Integration
• For Desktop - as Electron without JS engine/e.t.c. overhead
• For Games - power of SKIA, SKOTTIE, CSS animations, opengl, e.t.c. with any GUI
• We can use cling for hot code reload without closing app, like in Flutter. Cling may be removed from production deps, no overhead! (https://github.com/derofim/cling-cmake)
• We can use C++ template engine - CXTPL (from https://github.com/blockspacer/CXXCTP ) with HTML/CSS templates, no need to use SCSS e.t.c. - just combine C++ and CSS (and pass any complex C++ variables to HTML/CSS without binding!).
• We can bundle some assets in code, like vector icons via code generation, prefer opensource generator like https://github.com/blockspacer/CXXCTP
• We can build html to C++ code, for max performance
• Made ICU data file (icudtl.dat) smaller, so it became small enough for browser.
• Some features can be turned off. Smallest size = 200Kib - only SKIA. Max size = ~7MiB
• In theory, SKIA may be replaced by opengl line drawing (smaller size, but no SKOTTIE support) or CSS Paint (as in Flutter for browser).
• We can use RxCpp, e.t.c. for UI reactivity

What do you think?

UPD:
It is possible to compile HTML into WASM that calls JS elem.addChild, like in Svelte https://svelte.dev/tutorial/reactive-statements
It is possible to compile CSS with special $componentGUID keyword to create component-local styles, like in Svelte