[Renderers/Terminal] Feature/terminal renderer

CMakeLists.txt

@@ -9,6 +9,7 @@ add_subdirectory("examples/raylib-sidebar-scrolling-container")
 #  add_subdirectory("examples/cairo-pdf-rendering") Some issue with github actions populating cairo, disable for now
 if(NOT MSVC)
   add_subdirectory("examples/clay-official-website")
+  add_subdirectory("examples/ncurses-sidebar-scrolling-container")
 endif()
 add_subdirectory("examples/introducing-clay-video-demo")
 add_subdirectory("examples/SDL2-video-demo")

examples/ncurses-sidebar-scrolling-container/CMakeLists.txt

@@ -0,0 +1,18 @@
+cmake_minimum_required(VERSION 3.27)
+project(clay_examples_textui_sidebar_scrolling_container C)
+set(CMAKE_C_STANDARD 99)
+
+add_executable(clay_examples_textui_sidebar_scrolling_container main.c multi-compilation-unit.c)
+
+target_compile_options(clay_examples_textui_sidebar_scrolling_container PUBLIC)
+target_include_directories(clay_examples_textui_sidebar_scrolling_container PUBLIC .)
+
+target_link_libraries(clay_examples_textui_sidebar_scrolling_container PUBLIC ncurses)
+set(CMAKE_CXX_FLAGS_DEBUG "-Wall -Werror -DCLAY_DEBUG")
+set(CMAKE_CXX_FLAGS_RELEASE "-O3")
+
+add_custom_command(
+        TARGET clay_examples_textui_sidebar_scrolling_container POST_BUILD
+        COMMAND ${CMAKE_COMMAND} -E copy_directory
+        ${CMAKE_CURRENT_SOURCE_DIR}/resources
+        ${CMAKE_CURRENT_BINARY_DIR}/resources)

examples/ncurses-sidebar-scrolling-container/Readme.md

@@ -0,0 +1,39 @@
+# textui/console renderer example
+
+## Introduction
+This renderer example utilizes ncurses and a mostly implemented library which converts the clay draw commands into ncurses commands.
+A console rendering is very limited, and all coordinates are simply rounded via integer division to the coordinate system of a terminal.
+
+## What works
+- Rectangles draw approximately correctly with the right color
+- Text wraps, and is well placed
+- Clicking a location on a scroll bar moves the scrolled area
+- Debug mode highlights on click
+- Window resize and layout reaction
+
+## What doesn't work
+- Image rendering
+- Sub character rectangles
+- Text fonts and colors
+- Clay extensions
+- Clay scissor mode
+
+## Reasonable expectations
+This renderer is intended to allow for a nearly dependency free implementation of Clay, and nearly all linux distributions have ncurses installed.
+This renderer will allow for quick visualization of layouts. There is no graphics acceleration though this example is quite responsive.
+The unit of a terminal is a character, not a pixel, so there is only so much detail that can be rendered. The default character size defined in the renderer is 5x8 pixels.
+
+## What could work
+- More precise rendering of borders and rectangles, this could be implemented with box-drawing characters: https://en.wikipedia.org/wiki/Box-drawing_characters
+- The mouse wheel on some terminals
+- Images with an additional dependency on something like kitty: https://sw.kovidgoyal.net/kitty/graphics-protocol/
+- Better text coloring by matching the background
+
+## Setup
+You'll have to setup an event loop using getch(), and pay attention to the various init functions in main.c
+Then it's the regular Clay layout definition and calls to the renderer function.
+
+## Conclusion
+The truth is that if you're willing to learn ncurses and how it handles windows you can get a better terminal experience without Clay.
+This example shows that for quick terminal apps, Clay could be extremely effective for organizing a user interface in the terminal.
+I hope that this renderer helps many people build fun and cool projects by lowering the barrier to a framwork.

examples/ncurses-sidebar-scrolling-container/multi-compilation-unit.c

@@ -0,0 +1,9 @@
+#include "../../clay.h"
+
+// NOTE: This file only exists to make sure that clay works when included in multiple translation units.
+
+void SatisfyCompiler() {
+    CLAY(CLAY_ID("SatisfyCompiler"), CLAY_LAYOUT({})) {
+      CLAY_TEXT(CLAY_STRING("Test"), CLAY_TEXT_CONFIG({ .fontId = 0, .fontSize = 24 }));
+    }
+}

renderers/ncurses/clay_renderer_ncurses.c

@@ -0,0 +1,129 @@
+//#include <stdio.h>
+#include <curses.h>
+#define CLAY_IMPLEMENTATION
+#include "../../clay.h"
+
+#define HPIXELS_PER_CHAR 5 //these are used to convert between Clay pixel space and terminal character locations
+#define VPIXELS_PER_CHAR 8
+
+void Clay_ncurses_Render(WINDOW * win, Clay_RenderCommandArray renderCommands);
+
+void Clay_ncurses_Render(WINDOW * win, Clay_RenderCommandArray renderCommands){
+    short color_pair = 1; //increment on use, 0 is reserved
+    short color = 10; //get passed reserved colors
+    //maybe keep a list of Clay colors and only init a new color if required.
+    //clear the screen/window
+    clear();//sets cursor to 0,0
+    for(int i = 0; i < renderCommands.length; i++){
+        //handle every command
+        switch (renderCommands.internalArray[i].commandType){
+            case CLAY_RENDER_COMMAND_TYPE_NONE:
+                continue;
+            case CLAY_RENDER_COMMAND_TYPE_RECTANGLE:
+                Clay_RectangleElementConfig *rectangle_config = renderCommands.internalArray[i].config.rectangleElementConfig;
+                init_color(color, rectangle_config->color.r, rectangle_config->color.g, rectangle_config->color.b);
+                init_pair(color_pair, color, color);
+                attr_on(color_set(color_pair,0),0);
+                for(int j = 0; j < renderCommands.internalArray[i].boundingBox.height/VPIXELS_PER_CHAR; j++){
+                    mvhline(renderCommands.internalArray[i].boundingBox.y/VPIXELS_PER_CHAR + j, renderCommands.internalArray[i].boundingBox.x/HPIXELS_PER_CHAR, '#', renderCommands.internalArray[i].boundingBox.width/HPIXELS_PER_CHAR);
+                }
+                attr_off(color_set(color_pair,0),0);
+                color_pair++;
+                color++;
+                //TODO render radius corners
+                break;
+            case CLAY_RENDER_COMMAND_TYPE_BORDER:
+                Clay_BorderElementConfig *border_config = renderCommands.internalArray[i].config.borderElementConfig;
+                //just get a border on there for now
+                if(border_config->top.width > 0){
+                    init_color(color, border_config->top.color.r, border_config->top.color.g, border_config->top.color.b);
+                    init_pair(color_pair, color, COLOR_CYAN);//TODO get color at target location and init pair with that background
+                    attr_on(color_set(color_pair,0),0);
+                    mvhline(renderCommands.internalArray[i].boundingBox.y/VPIXELS_PER_CHAR, renderCommands.internalArray[i].boundingBox.x/HPIXELS_PER_CHAR + 1, '-', renderCommands.internalArray[i].boundingBox.width/HPIXELS_PER_CHAR - 2);
+                    attr_off(color_set(color_pair,0),0);
+                    color_pair++; //can we just check of the color requested is already there?
+                    color++;
+                }
+                if(border_config->bottom.width > 0){
+                    init_color(color, border_config->bottom.color.r, border_config->bottom.color.g, border_config->bottom.color.b);
+                    init_pair(color_pair, color, COLOR_CYAN);//TODO get color at target location and init pair with that background
+                    attr_on(color_set(color_pair,0),0);
+                    mvhline(renderCommands.internalArray[i].boundingBox.y/VPIXELS_PER_CHAR + renderCommands.internalArray[i].boundingBox.height/VPIXELS_PER_CHAR, renderCommands.internalArray[i].boundingBox.x/HPIXELS_PER_CHAR + 1, '-', renderCommands.internalArray[i].boundingBox.width/HPIXELS_PER_CHAR - 2);
+                    attr_off(color_set(color_pair,0),0);
+                    color_pair++;
+                    color++;
+                }
+                if(border_config->left.width > 0){
+                    init_color(color, border_config->left.color.r, border_config->left.color.g, border_config->left.color.b);
+                    init_pair(color_pair, color, COLOR_CYAN);//TODO get color at target location and init pair with that background
+                    attr_on(color_set(color_pair,0),0);
+                    mvvline(renderCommands.internalArray[i].boundingBox.y/VPIXELS_PER_CHAR + 1, renderCommands.internalArray[i].boundingBox.x/HPIXELS_PER_CHAR, '|', renderCommands.internalArray[i].boundingBox.height/VPIXELS_PER_CHAR - 1);
+                    attr_off(color_set(color_pair,0),0);
+                    color_pair++;
+                    color++;
+                }
+                if(border_config->right.width > 0){
+                    init_color(color, border_config->right.color.r, border_config->right.color.g, border_config->right.color.b);
+                    init_pair(color_pair, color, COLOR_CYAN);//TODO get color at target location and init pair with that background
+                    attr_on(color_set(color_pair,0),0);
+                    mvvline(renderCommands.internalArray[i].boundingBox.y/VPIXELS_PER_CHAR + 1, renderCommands.internalArray[i].boundingBox.x/HPIXELS_PER_CHAR + renderCommands.internalArray[i].boundingBox.width/HPIXELS_PER_CHAR - 1, '|', renderCommands.internalArray[i].boundingBox.height/VPIXELS_PER_CHAR - 1);
+                    attr_off(color_set(color_pair,0),0);
+                    color_pair++;
+                    color++;
+                }
+                break;
+            case CLAY_RENDER_COMMAND_TYPE_TEXT:
+                Clay_TextElementConfig *text_config = renderCommands.internalArray[i].config.textElementConfig;
+                attr_on(color_set(0,0),0);
+                int x = renderCommands.internalArray[i].boundingBox.x/HPIXELS_PER_CHAR;
+                int y = renderCommands.internalArray[i].boundingBox.y/VPIXELS_PER_CHAR; //text is referenced from bottom corner?
+                int w = renderCommands.internalArray[i].boundingBox.width/HPIXELS_PER_CHAR;
+                int h = renderCommands.internalArray[i].boundingBox.height/VPIXELS_PER_CHAR;
+                int line = 0;
+                int column = 0;
+                for (int k = 0; k < renderCommands.internalArray[i].text.length; k++) {
+                    if (column >= w) {
+                        column = 0;
+                        line += 1;
+                    }
+                    mvaddch(y + line, x + column, renderCommands.internalArray[i].text.chars[k]);
+                    column += 1;
+                }
+                break;
+            case CLAY_RENDER_COMMAND_TYPE_IMAGE:
+            case CLAY_RENDER_COMMAND_TYPE_SCISSOR_START:
+            case CLAY_RENDER_COMMAND_TYPE_SCISSOR_END:
+            case CLAY_RENDER_COMMAND_TYPE_CUSTOM:
+            default: continue;
+        }
+    }
+    attr_on(color_set(0,0),0);
+    mvwprintw(win, 0, 0, "Number of color pairs used: %i", color_pair);
+    refresh();//update the screen/window
+}
+
+
+//written by EmmanuelMess: https://github.com/nicbarker/clay/pull/91/commits/7ce74ba46c01f32e4517032e9da76bf54ecf7a43
+static inline Clay_Dimensions ncurses_MeasureText(Clay_String *text, Clay_TextElementConfig *config) {
+	Clay_Dimensions textSize = { 0 };
+	float maxTextWidth = 0.0f;
+	float lineTextWidth = 0;
+	float textHeight = 1;
+
+	for (int i = 0; i < text->length; ++i)
+	{
+		if (text->chars[i] == '\n') {
+			maxTextWidth = maxTextWidth > lineTextWidth ? maxTextWidth : lineTextWidth;
+			lineTextWidth = 0;
+			textHeight++;
+			continue;
+		}
+		lineTextWidth++;
+	}
+	maxTextWidth = maxTextWidth > lineTextWidth ? maxTextWidth : lineTextWidth;
+
+	textSize.width = maxTextWidth*HPIXELS_PER_CHAR;
+	textSize.height = textHeight*VPIXELS_PER_CHAR;
+
+	return textSize;
+}