Skip to content
This repository was archived by the owner on Apr 10, 2021. It is now read-only.

docs

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

docs

README.md

 

skg

SKIA based C++ HTML/CSS UI

A fully open source, powerful solution for HTML/CSS UI. C++ HTML/CSS UI. Supports subset of HTML/CSS. Based on chromium/cobalt.foo without JavaScript overhead. Uses SKIA 2D graphics library. Can be used to build UI for cross-platform app or game. Can support browser as HTML5 web framework or WebGL UI renderer.

Features

  • CSS animations from cobalt.foo
  • CSS Flexbox from cobalt.foo
  • Lottie animation format (skottie/Bodymovin animation) see https://skia.org/user/modules/skottie
  • Modified cobalt.foo to support mouse events propagation with ScrollTop/ScrollLeft
  • skia compiled to browser (emscripten WASM)
  • made optional: video/audio support from cobalt.foo. You can use custom libs to add video/audio support.
  • JS (V8) disabled. Use C++ for better speed and app size.
  • cobalt.foo (chromium`s fork) ported to browser (WebGL2, emscripten, WASM).
    • updated cobalt.foo to new SKIA version
    • updated cobalt.foo to new chromiums base version (removed base` folder duplication)
    • added custom tags / controls (similar to React.js/Vue.js)
  • (needs more testing) cobalt.foo ported to HTML5 tags (maps tags from cobalt to HTML5 tags). You can use that project to create websites or web frameworks.
  • (needs more testing) renderer from cobalt.foo ported to Windows 10 x64
  • chromium ui/views (widget based UI framework) from Blink ported to WASM (and other OS)
  • chromium base (libchrome) from Blink ported to WASM (and other OS)
  • WTF (Web Template Framework) from Blink ported to WASM (and other OS)
  • custom fonts
  • unicode fonts and harfbuzz
  • uses SDL2 to create window on Unix
  • uses emscripten.h to handle window on browser (emscripten WASM)
  • uses CMake (replaced chromium`s GN with CMake)
  • supports WebGL 2 / GLSL 300 es as there really isn`t a reason to support WebGL 1 at this point
  • supports WASM as there really isn`t a reason to support ASM.js at this point
  • Most features from cobalt.foo/chromium can be turned on/off via CMake options. Useful for platforms what require small resulting app size (browser WASM, mobile, etc.)

Project status

In development

TODO: move .md file from ./docs/TODO.md

FAQ

  • What is it?

Lightweight HTML/CSS rendering engine for apps, games and single-page web application (SPA)

Because SKIA is cross-platform, project can support wide range of platforms, including Linux, Windows, MacOS, Android, iOS, browser (WASM) and many more.

Tested platforms:

  • Linux
  • Browser with threading support (WASM MT). Prefer WASM MT because it is more stable.
  • Browser without threading support (WASM ST)
  • (needs more testing) Windows
  • (needs more testing) Native HTML5/JS web framework (without SKIA / OpenGL / WebGL2)

IN-DEV / planned platforms:

  • (planned) Android
  • (planned) Renderer backend (without SKIA): OpenGL / WebGL2 / imgui / nanoVG
  • (planned) Widgets/controls integration: imgui
  • (planned) Widgets/controls integration: QT

It can be integrated into games or game engines using render-to-texture or SKIA GrBackendRenderTarget, real-time 3D applications, fullscreen applications, embedded applications and many more.

Contributions are welcome.

  • WHY?

Inspired by:

Let`s combine best of them all together.

  • How It Works?

Started over with cobalt.foo, stripped it to the bare-minimum. Added support for web components, scrolling, ui/views widget framework from chromium.

  • Can't build?

Check readme & issues. Don't forget to replace files based on patches.

  • Project name? SKG? SKEMGL?

    • skia - Skia is an open source 2D graphics library
    • opengl - cross-language, cross-platform application programming interface (API) for rendering 2D and 3D vector graphics
    • emscripten - Emscripten is a toolchain for compiling to asm.js and WebAssembly, built using LLVM, that lets you run C and C++ on the web at near-native speed

  • C++?

C++ can be bound to many languages. Feel free to add any third-party bindings.

  • C++ on Web?

Modern C++ can use sanitizers and lifetime checkers to prevent memory and threading issues ( see lifetime branch of https://github.com/mgehre/llvm-project )

For hot-code reload (edit running app without recompile) in C++ you can use Cling ( see https://github.com/derofim/cling-cmake )

Use code generators to reduce the amount of boilerplate code in your C++ projects, for example https://github.com/blockspacer/CXXCTP

Use customizable template engine to generate CSS/HTML, for example https://github.com/blockspacer/CXTPL

SKIA uses WASM and canvas/WebGL to draw on web. In theory, it is possible to add https://github.com/mbasso/asm-dom support or houdini bindings (CSS Paint API).

  • Alternatives?

See #6

Need to review opensource LICENSE-s used by thirdparty libs. Any help wanted. See issues: #4

Project goals

Create GUI framework that is

  • Free
  • Opensource
  • Lightweight
  • Customizable
  • Can use animations
  • 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, etc. without a lot of code changes
  • Small enough to be used in browser
  • With ability to turn on/off features and modify source code
  • Can support UTF8 fonts, font rendering and i18n matters
  • Can support vector graphics, shape drawing, curves. Vector graphics can be scaled larger or smaller and still look perfect for all resolutions
  • Can be used without a lot of boilerplate code (supports reactivity, custom widgets, etc.)
  • Can support animation formats like lottie (SKOTTIE)
  • Can render both on CPU and GPU
  • Can be integrated with existing apps or game engines (integrates with existing window creation, threads management, etc.)
  • Can control low-level platform functionality (such as file system, rendering, clipboard, etc.).
  • Maintaining a solid framerate: It is not so important to make frames render faster as it is having them rendering constantly and without janks.
  • Ability to re-use existion low-level application layer: change file or thread creation code etc.
  • No build-in scripting language or virtual machine. Probably app needs to be run on platform with limited resources or already have a scripting solution.
  • Can support dynamic UI, with lots of animation per frame, worst-case scenarios (performance cliffs). Be prepared to paint every pixel on every frame.
  • Allow static linking with all libraries to eliminate dead code and use compilation techniques like Whole Program Optimization.
  • Uses reflection and data binding to provide a simple and powerful way to auto-update data between the model and the user interface.
  • Use declarative formats, like HTML, because thay are more compact than the equivalent procedural code. They also establish a clear separation between the markup that defines the UI and the code that makes the application do something. For example, a designer on your team could design a UI and then hand off the declarative format to the developer to add the procedural code.
  • Extendable with custom widgets, controls. Provide UI frameworks as separate projects. Elements like Button, CheckBox, Label, ListBox, ComboBox, Menu, TreeView, ToolBar, ProgressBar, Slider, TextBox, or PasswordBox.
  • Provides theming mechanisms
  • Focused on highly-optimized code. All aspects need to be kept under control: precise control on memory allocations, never create threads under the hood, it should always provide a renderer-agnostic API, and it should never communicate directly with the GPU
  • Focused on UI. Goal is to keep project small, but with ability to integrate third-party libraries

Lightweight

  • WASM with SKIA renderer: ~8.0MiB uncompressed (~4MiB compressed), size depends on enabled features and languages (i18n).
  • UNIX: ~22.0MiB uncompressed, size depends on enabled features and languages (i18n).
  • WASM without SKIA renderer (HTML5 native tags): ~3.0MiB
  • low memory usage

Can`t clone with git?

# see https://stackoverflow.com/a/21423542
git config --global url."https://".insteadOf git://

Clone with --recursive

sudo -E apt-get update
sudo -E apt-get install git build-essential wget
sudo apt-get install libgles2-mesa-dev libegl1-mesa-dev
sudo -E apt-get install build-essential --reinstall
git clone --recursive {repourl_here}

How to build on UNIX

See ./docs/BUILD_ON_UNIX.md

How to build on Windows

See ./docs/BUILD_ON_WINDOWS.md

TODO: move .md file from https://github.com/blockspacer/skia-opengl-emscripten/blob/cc6/docs/BUILD_ON_WINDOWS.md.txt

How to build for emscripten/WASM/HTML5

emscripten SDK tested on Ubuntu. Many operating systems can run Ubuntu container or Ubuntu VM.

See ./docs/BUILD_ON_UNIX.md

TODO: contribute docs about emscripten SDK usage on Windows.

How to apply patches

Just copy and replace files based on patches folder. See build instructions.

TODO: contribute git-based patches.

How to run in browser (enable emscripten support)

See ./docs/USAGE_WITH_EMSCRIPTEN.md

How to add custom language (i18n, icu, fonts)

  • modify languages in filters.json, see below.
  • add font file with support of your language

How to make icu data files smaller (ICU 64-2)

modify languages in filters.json (see ICU_DATA_FILTER_FILE below), more languages = bigger bundle size

See examples:

verify filters.json using jsonschemavalidator.net and (remove comments) https://github.com/unicode-org/icu/blob/release-64-2/icu4c/source/data/buildtool/filtration_schema.json

PROJ_ROOT=${PWD}
ls -artl ${PROJ_ROOT}
pip3 install --user hjson jsonschema
ICUROOT=${PROJ_ROOT}/thirdparty/icu_wrapper/third_party/icu
ls -artl ${ICUROOT}
cd ${ICUROOT}
mkdir build
cd build
ICU_DATA_FILTER_FILE="${ICUROOT}/../scripts/filters.json" \
  "${ICUROOT}/source/runConfigureICU" \
    Linux/gcc --disable-tests --with-data-packaging=archive \
    --enable-samples=no --enable-dyload=no \
    --enable-static --disable-shared
make clean
rm -rf build
make -j8
ls data/out
rm ${PROJ_ROOT}/resources/icu/icudtl.dat
cp ${ICUROOT}/build/data/out/icudt64l.dat ${PROJ_ROOT}/resources/icu/icudtl.dat
ls ${PROJ_ROOT}/resources/icu

see:

see:

How to make ICU smaller?

Define UCONFIG_NO_COLLATION or UCONFIG_ONLY_COLLATION, UCONFIG_NO_LEGACY_CONVERSION, UCONFIG_ONLY_HTML_CONVERSION, UCONFIG_NO_IDNA, etc.

see:

How to enable skottie/lottie support

Build with flags

-DENABLE_SKSG=TRUE;
-DENABLE_SKSHAPER=TRUE;
-DENABLE_SKOTTIE=TRUE;
-DENABLE_SKIA_UTILS=TRUE;
-DFORCE_DISABLE_SK_GPU=FALSE;