LCUI

A small C library for building user interfaces with C, XML and CSS.

Table of contents

• Table of contents
• Introduction
  • Features
  • Screenshots
  • Architecture
  • Design references
• Compilation
• Installation
• Contribution
• Documentation
• FAQ
• License

Introduction

LCUI (LC's UI Library) is a small C library for building user interfaces.

中文版说明文档

Features

• Written in C: Suitable for small applications written primarily in C.language designed for LCUI, it makes it easier to create interactive UIs.
• Cross platform: Support for Windows and Linux, you can write Windows Desktop apps and Universal Windows Platform apps, as well as Linux Desktop apps.
• XML + CSS: Includes XML and CSS parsers, you can use XML and CSS to describe interface structure and style.
• Web-like development experience: Since the design and implementation of LCUI's functions, including layout, CSS, and renderer, are mostly referenced from MDN documents and some popular web front-end development libraries, its development experience and interface effects will have some similarities to web pages. If you already have experience writing web pages with HTML and CSS, it will be easier to get started.
• Flexible: Support for adapting the interface to screens of different pixel densities by setting global scaling. Support for using screen density related sp and dp units to describe position and size of the elements.

Screenshots

Architecture

Over time LCUI has been built up to be based on various libraries, as shown below:

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃                                                               ┃
┃                        LCUI Application                       ┃
┃                                                               ┃
┃        ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓        ┃
┃        ┃                    LCUI 3                   ┃        ┃
┃      ┏━┻━━━━━━━━━┳━━━━━━━━━━━━┳━━━━━━━━━━━━┳━━━━━━━━━┻━┓      ┃
┃      ┃ ui-server ┃ ui-widgets ┃ ui-builder ┃ ui-anchor ┃      ┃
┃    ┏━┻━━━━━━━━━━━┻━━━━━━━━━━━━┻━━━━━━━━━━━━┻━━━━━━━━━━━┻━┓    ┃
┃    ┃ platform ┃    ui    ┃  worker  ┃  timer  ┃  cursor  ┃    ┃
┣━━━━┻━━━━━━━━━━┻━━━━━━━━━━┻━━━━━━━━━━┻━━━━━━━━━┻━━━━━━━━━━┻━━━━┫
┃ thread ┃ yutil  ┃ image  ┃   css   ┃ paint  ┃  font  ┃  text  ┃
┗━━━━━━━━┻━━━━━━━━┻━━━━━━━━┻━━━━━━━━━┻━━━━━━━━┻━━━━━━━━┻━━━━━━━━┛

• lib/css: CSS (Cascading Style Sheet) parser and selection engine, providing CSS parsing and selection capabilities.
• lib/image: Image file manipulation library, provides BMP, JPG, PNG image file reading ability and PNG write ability.
• lib/paint: 2D graphics library.
• lib/platform: Platform library, provides cross-platform unified system related API, including message loop, window management, input method, etc.
• lib/text: Text typesetting library, provides text typesetting capabilities.
• lib/thread: Thread library, providing cross-platform multithreading capabilities.
• lib/timer: Timer library, provides the ability to perform operations on a scheduled basis.
• lib/ui: Graphical interface core library, providing UI component management, event queue, style calculation, drawing and other necessary UI capabilities.
• lib/ui-anchor: Anchor widget, provide capabilities similar to hyperlinks.
• lib/ui-builder: UI Builder, provides the ability to create a UI from the content of an XML file.
• lib/ui-cursor: Cursor, provides cursor drawing capability.
• lib/ui-server: UI Server, provides the ability to map UI widgets to system Windows.
• lib/ui-widgets: UI widget library, provides basic UI components like text, buttons, scrollbars, and so on.
• lib/worker: Worker thread library, provides simple worker thread communication and management capabilities.
• lib/yutil: Utility library, provides linked list, hash table, red black tree, string and other related common functions.

Design references

• SDL — X11 driver code reference
• FreeType — Data structure naming style reference
• LevelDB — Function naming style reference
• jQuery — Widget operation method naming style reference
• MDN — CSS standard reference

Compilation

Install XMake and run the following command:

# Clone repository
git clone https://github.com/lc-soft/LCUI.git

# Go into the repository
cd LCUI

# Build
xmake

If you want to experience the results of the test program:

# Package the built files for building the test program
xmake package

# Go into test directory
cd test

# Build
xmake -P .

# Run
xmake run -P . -w . helloworld

Installation

xmake install

# Or install it in your custom directory
xmake install -o /path/to/your/custom/installdir

Contribution

Think LCUI is slow to update? there are many ways to contribute to LCUI.

• Submit bugs and help us verify fixes as they are checked in.
• Share some interesting ideas related to GUI development in the issues page.
• Search for FIXME comments in the source code and try to fix them.
• Fund the issues that interest you on IssueHunt to attract other developers to contribute.
• Review the source code changes.
• Contribute bug fixes.

LCUI has adopted the code of conduct defined by the Contributor Covenant. This document is used across many open source communities, and we think it articulates our values well. For more, see the Code of Conduct.

Documentation

• Tutorial: https://docs.lcui.lc-soft.io/ (Chinese version only)
• Changelog: docs/CHANGES.md

The English version of the documentation is not available, because the author does not have time to write the English version, please read the files in the test directory and related projects to learn how to use LCUI.

FAQ

1. Why develop it?

   • Explore and experiment new GUI development way
   • Let other developers share about how to write better code
   • Make it easier for me to find better jobs to make more money
   • Pass the time

2. Is this a browser kernel? Or a development library like Electron that integrates the browser environment?

   No, you can think of it as a traditional GUI development library that applied some Web technologies.

3. What do I need to pay attention to if I'm going to use it?

   We recommend that your project meet the following requirements:

   • The user interface is simple and does not require advanced features such as tables, animations, and transformations.
   • The code design is reasonable, and the core function code and UI logic code are independent of each other. Even if you find that the requirements are not met after using LCUI, you can easily migrate to other GUI libraries.

4. Why do I choose the LCUI instead of Electron?

   In contrast to fully functional Electron, these features of LCUI, such as small binary file size and low memory usage, are not worth mentioning, except for technical research and share, you have no reason to use LCUI.

5. Is it the same as writing a web page?

   Not exactly, there are the following differences need to be noted:

   • The interface description file format is XML, slightly different from HTML.
   • You need to implement all the features of your application in C code, which is much less development efficiency than JavaScript.
   • No <script> tag, you can't embed JavaScript or C code like HTML.
   • The widget is the basic layout element, not the text, and there is no inline display type.
   • The scrollbar is a widget, and the overflow: scroll; style doesn't show scrollbars automatically, you need to create it and specify the container and scroll layer.
   • All text is rendered by the TextView widget, which has a display type of block instead of inline.
   • The widget does not overflow the bounding box of the parent widget, and the effect is similar to the applied style: overflow: hidden;.
   • An absolutely positioned widget is always relative to its parent widget, not the first non-statically positioned widget of the parent.
   • There are no tools like Chrome Devtools to debug graphical interfaces, you need to rely on your own imagination and development experience to verify that the bug is from your code or LCUI.。

6. How about CSS support?

   The following is a list of supported CSS features. Checked is supported (But does not mean full support). Unlisted properties are not supported by default.

   CSS feature coverage

   • at rules
     • @font-face
     • @keyframes
     • @media
   • keywords
     • !important
   • selectors
     • *
     • type
     • #id
     • .class
     • :hover
     • :focus
     • :active
     • :first-child
     • :last-child
     • [attr="value"]
     • :not()
     • :nth-child()
     • parent > child
     • a ~ b
     • ::after
     • ::before
     • ...
   • units
     • px
     • dp
     • sp
     • pt
     • %
     • rem
     • vh
     • vw
   • properties
     • top, right, bottom, left
     • width, height
     • visibility
     • display
       • none
       • inline-block
       • block
       • flex
       • inline-flex
       • inline
       • grid
       • table
       • table-cell
       • table-row
       • table-column
       • ...
     • position
       • static
       • relative
       • absolute
       • fixed
     • box-sizing
       • border-box
       • content-box
     • border
     • border-radius
     • background-color
     • background-image
     • background-position
     • background-cover
     • background
     • pointer-events
     • font-face
     • font-family
     • font-size
     • font-style
     • flex
     • flex-shrink
     • flex-grow
     • flex-basis
     • flex-wrap
     • flex-direction
     • justify-content
       • flex-start
       • center
       • flex-end
     • align-items
       • flex-start
       • center
       • flex-end
       • stretch
     • float
     • transition
     • transform
     • ...

License

The LCUI Project is released under the MIT License.