cross compile build script
[fishladder.git] / vg / vg_ui.h
index 27c0645cacf05236c6e3b5ca942a310d5c51ee5f..f6fa8955333ac76f19987b477038c3c2dac6d70b 100644 (file)
@@ -1,30 +1,98 @@
 // Copyright (C) 2021 Harry Godden (hgn) - All Rights Reserved
-/*
 
-       Concurrent UI buffer system
-       Coordinate space:
+SHADER_DEFINE( shader_ui,
 
-   0,0 --- +(res:x)
-        |
-        |
-        |
-+(res:y)
+       // VERTEX
+       "layout (location=0) in vec2 a_co;"                     // i16, i16, .. ?
+       "layout (location=1) in vec2 a_uv;"                     // i16, i16
+       "layout (location=2) in vec4 a_colour;" // u32
+       "layout (location=3) in vec4 a_clip;"           // i16, i16, i16, i16
+       "uniform mat3 uPv;"
+       ""
+       "out vec2 aTexCoords;"
+       "out vec4 aColour;"
+       "out vec2 aWsp;"
+       "out vec4 aClip;"
+       ""
+       "void main()"
+       "{"
+               "gl_Position = vec4( uPv * vec3( a_co, 1.0 ), 1.0 );"
+               "aTexCoords = a_uv * 0.0078125;"
+               "aColour = a_colour;"
+               
+               "aWsp = a_co;"
+               "aClip = a_clip;"
+       "}",
        
-*/
-
-#define UI_AUTO_FILL 0
+       // FRAGMENT
+       "uniform sampler2D uTexGlyphs;"
+       "out vec4 FragColor;"
+       ""
+       "in vec2 aTexCoords;"
+       "in vec4 aColour;"
+       ""
+       "in vec2 aWsp;"
+       "in vec4 aClip;"
+       ""
+       "void main()"
+       "{"
+               "float clip_blend = step( aWsp.x, aClip.z ) * step( aWsp.y, aClip.w ) * step( aClip.x, aWsp.x ) * step( aClip.y, aWsp.y );"
+               "vec4 glyph = vec4(1.0,1.0,1.0,1.0);"
+               
+               "if( aColour.a == 0.0 )"
+               "{"
+                       "glyph = texture( uTexGlyphs, aTexCoords );"
+                       "glyph.a = smoothstep( 0.47, 0.53, glyph.r );"
+               "}"
+               "else"
+               "{"
+                       "glyph.a = aColour.a;"
+               "}"
+               
+               "FragColor = vec4( aColour.rgb, glyph.a*clip_blend );"
+       "}"
+       ,
+       UNIFORMS({ "uPv", "uTexGlyphs" })
+)
 
 // Types
-// ================================================================
+// ===========================================================================================================
+
 typedef i16                            ui_px;
 typedef u32                            ui_colour;
 typedef ui_px                          ui_rect[4];
 typedef struct ui_ctx  ui_ctx;
+typedef struct ui_colourset ui_colourset;
 
-struct ui_ctx
+// Relative to cursor p0
+enum ui_text_align
 {
-       ui_px padding;
+   k_text_align_left = 0,
+   k_text_align_right = 1,
+   k_text_align_center = 2
+};
 
+struct ui_colourset
+{
+       union
+       {
+               struct
+               {
+                       ui_colour main;
+                       ui_colour hover;
+                       ui_colour active;
+               };
+               struct
+               {
+                       ui_colour background;
+                       ui_colour bar;
+                       ui_colour bar_hover;
+               };
+       };
+};
+
+struct ui_ctx
+{
        struct ui_qnode
        {
                ui_rect                 rect;
@@ -34,17 +102,224 @@ struct ui_ctx
        }
        stack[ 32 ];
        
+       #pragma pack(push,1)
+       struct ui_vert
+       {
+               ui_px co[2];    //32 4
+               u8 uv[2];               //16 2
+               u32 colour;             //32 4
+               ui_rect clip;   //64 8
+       }
+       *verts;
+       #pragma pack(pop)
+       
+       u32 num_verts;
+       u16 *indices;
+       u32 num_indices;
+       
+       ui_rect clipping;
        ui_rect cursor;
        u32 stack_count;
        u32 capture_mouse_id;
+       int capture_lock;
+       u32 id_base;
+       int glyph_base;
        
        // User input
        ui_px mouse[2];
        int click_state;        // 0: released, 1: on down, 2: pressed, 3: on release
+       
+       ui_colourset *colours;
+       
+       GLuint vao;
+       GLuint vbo;
+       GLuint ebo;
+       
+       struct ui_image
+       {
+               ui_rect rc;
+               GLuint image;
+       }
+       images[16];
+       int image_count;
 };
 
+// Globals
+// ===========================================================================================================
+
+#define UI_GLYPH_SPACING_X 9
+
+static GLuint ui_glyph_texture = 0;
+static ui_colourset ui_default_colours = {
+       .main = 0xff807373,
+       .hover = 0xff918484,
+       .active = 0xffad9f9e
+};
+
+static ui_ctx ui_global_ctx;
+
+// Initialization
+// ===========================================================================================================
+
+static void ui_init_context( ui_ctx *ctx, int index_buffer_size )
+{
+       u32 vertex_buffer_size = (index_buffer_size+(index_buffer_size/2));
+       
+       // Generate the buffer we are gonna be drawing to
+       {
+               glGenVertexArrays(1, &ctx->vao);
+               glGenBuffers( 1, &ctx->vbo );
+               glGenBuffers( 1, &ctx->ebo );
+               glBindVertexArray( ctx->vao );
+               
+               glBindBuffer( GL_ARRAY_BUFFER, ctx->vbo );
+               
+               glBufferData( GL_ARRAY_BUFFER, vertex_buffer_size * sizeof( struct ui_vert ), NULL, GL_DYNAMIC_DRAW );
+               glBindVertexArray( ctx->vao );
+               
+               glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, ctx->ebo );
+               glBufferData( GL_ELEMENT_ARRAY_BUFFER, index_buffer_size * sizeof( u16 ), NULL, GL_DYNAMIC_DRAW );
+               
+               u32 const stride = sizeof( struct ui_vert );
+               
+               // XY
+               glVertexAttribPointer( 0, 2, GL_SHORT, GL_FALSE, stride, (void *)offsetof( struct ui_vert, co ) );
+               glEnableVertexAttribArray( 0 );
+               
+               // UV
+               glVertexAttribPointer( 1, 2, GL_UNSIGNED_BYTE, GL_FALSE, stride, (void *)offsetof( struct ui_vert, uv ) );
+               glEnableVertexAttribArray( 1 );
+               
+               // COLOUR
+               glVertexAttribPointer( 2, 4, GL_UNSIGNED_BYTE, GL_TRUE, stride, (void *)offsetof( struct ui_vert, colour ) );
+               glEnableVertexAttribArray( 2 );
+               
+               // CLIPPING
+               glVertexAttribPointer( 3, 4, GL_SHORT, GL_FALSE, stride, (void *)offsetof( struct ui_vert, clip ) );
+               glEnableVertexAttribArray( 3 );
+       }
+       
+       // Initialize default context
+       {
+               ctx->verts = (struct ui_vert *)malloc( vertex_buffer_size * sizeof(struct ui_vert) );
+               ctx->indices = (u16*)malloc( index_buffer_size * sizeof(u16) );
+
+      if( !ctx->colours )
+         ctx->colours = &ui_default_colours;
+       }
+}
+
+static void ui_context_free( ui_ctx *ctx )
+{
+       glDeleteVertexArrays( 1, &ctx->vao );
+       glDeleteBuffers( 1, &ctx->vbo );
+       glDeleteBuffers( 1, &ctx->ebo );
+       
+       free( ctx->verts );
+       free( ctx->indices );
+}
+
+static void ui_default_init(void)
+{
+       // Load default font
+   u32 compressed[] = {
+      #include "vg/vg_pxfont.h"
+   };
+
+   u32 pixels = 0, total = 256*256, data = 0;
+   u8 *image = malloc( total );
+   
+   while( pixels < total )
+   {
+      for( int b = 31; b >= 0; b-- )
+      {
+         image[ pixels ++ ] = (compressed[data] & (0x1 << b))? 0xff: 0x00;
+         
+         if( pixels >= total )
+         {
+            total = 0;
+            break;
+         }
+      }
+      data++;
+   }
+   
+   glGenTextures( 1, &ui_glyph_texture );
+   glBindTexture( GL_TEXTURE_2D, ui_glyph_texture );
+   
+   glTexImage2D( GL_TEXTURE_2D, 0, GL_R8, 256, 256, 0, GL_RED, GL_UNSIGNED_BYTE, image );
+   
+   vg_tex2d_clamp();
+   vg_tex2d_nearest();
+   
+   free( image );
+       
+       // Setup OpenGL memory
+       SHADER_INIT( shader_ui );
+       ui_init_context( &ui_global_ctx, 20000 );
+}
+
+static void ui_default_free(void)
+{
+   glDeleteTextures( 1, &ui_glyph_texture );
+       ui_context_free( &ui_global_ctx );
+}
+
+static struct ui_vert *ui_fill_rect_uv( ui_ctx *ctx, ui_rect rect, u32 colour, ui_px uv[4] );
+static void ui_draw( ui_ctx *ctx, m3x3f view_override )
+{
+       u32 num_indices_normal = ctx->num_indices;
+       
+       // Append images to back of buffer
+       for( int i = 0; i < ctx->image_count; i ++ )
+               ui_fill_rect_uv( ctx, ctx->images[i].rc, 0xffffffff, (ui_px[4]){0,0,128,128} );
+
+       glBindVertexArray( ctx->vao );
+       
+       glBindBuffer( GL_ARRAY_BUFFER, ctx->vbo );
+       glBufferSubData( GL_ARRAY_BUFFER, 0, ctx->num_verts * sizeof( struct ui_vert ), ctx->verts );
+       
+       glBindBuffer( GL_ELEMENT_ARRAY_BUFFER, ctx->ebo );
+       glBufferSubData( GL_ELEMENT_ARRAY_BUFFER, 0, ctx->num_indices * sizeof( u16 ), ctx->indices );
+       
+       glEnable(GL_BLEND);
+       glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
+       glBlendEquation(GL_FUNC_ADD);
+       
+       SHADER_USE( shader_ui );
+       
+       m3x3f view = M3X3_IDENTITY;
+       
+       if( !view_override )
+       {
+               view_override = view;
+       
+               m3x3_translate( view, (v3f){ -1.0f, 1.0f, 0.0f } );
+               m3x3_scale( view, (v3f){ 1.0f/((float)vg_window_x*0.5f), -1.0f/((float)vg_window_y*0.5f), 1.0f } );
+       }
+       
+       glUniformMatrix3fv( SHADER_UNIFORM( shader_ui, "uPv" ), 1, GL_FALSE, (float *)view_override );
+       
+       glActiveTexture( GL_TEXTURE0 );
+       glBindTexture( GL_TEXTURE_2D, ui_glyph_texture );
+       glUniform1i( SHADER_UNIFORM( shader_ui, "uTexGlyphs" ), 0 );
+       
+       glDrawElements( GL_TRIANGLES, num_indices_normal, GL_UNSIGNED_SHORT, (void*)(0) );
+       
+       // Draw image elements
+       for( int i = 0; i < ctx->image_count; i ++ )
+       {
+               struct ui_image *img = &ctx->images[i];
+               
+               glBindTexture( GL_TEXTURE_2D, img->image );
+               glDrawElements( GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, (void*)( (num_indices_normal + 6*i)*sizeof(u16) ) );
+       }
+       
+       glDisable(GL_BLEND);
+}
+
 // Rect controls
-// ==========================================================
+// ===========================================================================================================
 
 static void ui_rect_copy( ui_rect src, ui_rect dst )
 {
@@ -54,28 +329,20 @@ static void ui_rect_copy( ui_rect src, ui_rect dst )
        dst[3] = src[3];
 }
 
-static void ui_rect_pad( ui_ctx *ctx, ui_rect rect )
+static void ui_rect_pad( ui_rect rect, ui_px pad )
 {
-       rect[0] += ctx->padding;
-       rect[1] += ctx->padding;
-       rect[2] -= ctx->padding*2;
-       rect[3] -= ctx->padding*2;
+       rect[0] += pad;
+       rect[1] += pad;
+       rect[2] -= pad*2;
+       rect[3] -= pad*2;
 }
 
-static void ui_vis_rect( ui_rect rect, u32 colour )
-{
-       v2f p0;
-       v2f p1;
-       
-       p0[0] = rect[0];
-       p0[1] = rect[1];
-       p1[0] = rect[0]+rect[2];
-       p1[1] = rect[1]+rect[3];
+// Stack control
+// ===========================================================================================================
 
-       vg_line( p0, (v2f){p1[0],p0[1]}, colour );
-       vg_line( (v2f){p1[0],p0[1]}, p1, colour );
-       vg_line( p1, (v2f){p0[0],p1[1]}, colour );
-       vg_line( (v2f){p0[0],p1[1]}, p0, colour );
+static struct ui_qnode *ui_current( ui_ctx *ctx )
+{
+       return &ctx->stack[ ctx->stack_count-1 ];
 }
 
 static void ui_new_node( ui_ctx *ctx )
@@ -89,50 +356,278 @@ static void ui_new_node( ui_ctx *ctx )
        
        if( parent->mouse_over )
        {
-               if( ctx->mouse[0] >= node->rect[0] && ctx->mouse[0] <= node->rect[0]+node->rect[2] &&
-                        ctx->mouse[1] >= node->rect[1] && ctx->mouse[1] <= node->rect[1]+node->rect[3] )
+               if( ctx->mouse[0] >= node->rect[0] && ctx->mouse[0] < node->rect[0]+node->rect[2] &&
+                        ctx->mouse[1] >= node->rect[1] && ctx->mouse[1] < node->rect[1]+node->rect[3] )
                        node->mouse_over = 1;
                else
                        node->mouse_over = 0;
        }
+       else
+       {
+               node->mouse_over = 0;
+       }
 }
 
 static int ui_hasmouse( ui_ctx *ctx )
 {
-       struct ui_qnode *node = &ctx->stack[ ctx->stack_count-1 ];
+       struct ui_qnode *node = ui_current( ctx );
        return (node->mouse_over && (node->capture_id == ctx->capture_mouse_id));
 }
 
 static void ui_end( ui_ctx *ctx )
 {
        struct ui_qnode *node = &ctx->stack[ --ctx->stack_count ];
-
        ui_rect_copy( node->rect, ctx->cursor );
-       ui_vis_rect( ctx->cursor, (node->mouse_over && (node->capture_id == ctx->capture_mouse_id))? 0xffff0000: 0xff0000ff );
 }
 
 static void ui_end_down( ui_ctx *ctx )
 {
-       ui_px height = ctx->stack[ ctx->stack_count ].rect[3];
+       ui_px height = ui_current( ctx )->rect[3];
        ui_end( ctx );
        ctx->cursor[1] += height;
 }
 
 static void ui_end_right( ui_ctx *ctx )
 {
-       ui_px width = ctx->stack[ ctx->stack_count ].rect[2];
+       ui_px width = ui_current( ctx )->rect[2];
        ui_end( ctx );
        ctx->cursor[0] += width;
 }
 
-static void ui_capture_mouse( ui_ctx *ctx, int id )
+static void ui_fill_y( ui_ctx *ctx )
+{
+       struct ui_qnode *node = ui_current( ctx );
+       ctx->cursor[3] = node->rect[3] - (ctx->cursor[1]-node->rect[1]);
+}
+
+static void ui_fill_x( ui_ctx *ctx )
 {
+       struct ui_qnode *node = ui_current( ctx );
+       ctx->cursor[2] = node->rect[2] - (ctx->cursor[0]-node->rect[0]);
+}
+
+// Alignment: | []   | -> |    []|
+static void ui_align_bottom( ui_ctx *ctx )
+{
+       struct ui_qnode *node = ui_current( ctx );
+       ctx->cursor[1] = node->rect[1] + node->rect[3] - ctx->cursor[3];
+}
+
+static void ui_align_right( ui_ctx *ctx )
+{
+       struct ui_qnode *node = ui_current( ctx );
+       ctx->cursor[0] = node->rect[0] + node->rect[2] - ctx->cursor[2];
+}
+
+static void ui_align_top( ui_ctx *ctx )
+{
+       ctx->cursor[1] = ui_current( ctx )->rect[1];
+}
+
+static void ui_align_left( ui_ctx *ctx )
+{
+       ctx->cursor[0] = ui_current( ctx )->rect[0];
+}
+
+static void ui_clamp_rect( ui_rect parent, ui_rect dest )
+{
+       dest[0] = vg_min( parent[0] + parent[2] - dest[2], dest[0] );
+       dest[1] = vg_min( parent[1] + parent[3] - dest[3], dest[1] );
+       dest[0] = vg_max( parent[0], dest[0] );
+       dest[1] = vg_max( parent[1], dest[1] );
+}
+
+static u32 ui_group_id( ui_ctx *ctx, u32 lesser_unique )
+{
+       return ctx->id_base | lesser_unique;
+}
+
+static void ui_capture_mouse( ui_ctx *ctx, u32 id )
+{
+       u32 group_uid = ui_group_id(ctx,id);
+
        struct ui_qnode *node = &ctx->stack[ ctx->stack_count-1 ];
-       node->capture_id = id;
+       node->capture_id = group_uid;
        
-       if( node->mouse_over )
+       if( !ctx->capture_lock && node->mouse_over )
        {
-               ctx->capture_mouse_id = id;
+               ctx->capture_mouse_id = group_uid;
+       }
+}
+
+static int ui_want_mouse( ui_ctx *ctx )
+{
+       return ctx->capture_mouse_id == 0? 0: 1;
+}
+
+static void ui_set_clip( ui_ctx *ctx, ui_rect clip )
+{
+       ctx->clipping[0] = clip[0];
+       ctx->clipping[1] = clip[1];
+       ctx->clipping[2] = clip[0] + clip[2];
+       ctx->clipping[3] = clip[1] + clip[3];
+}
+
+static void ui_release_clip( ui_ctx *ctx )
+{
+       ctx->clipping[0] = -32000;
+       ctx->clipping[1] = -32000;
+       ctx->clipping[2] =  32000;
+       ctx->clipping[3] =  32000;
+}
+
+// Drawing
+// ===========================================================================================================
+
+static struct ui_vert *ui_fill_rect_uv( ui_ctx *ctx, ui_rect rect, u32 colour, ui_px uv[4] )
+{
+       struct ui_vert *vertices = &ctx->verts[ ctx->num_verts ];
+       vertices[0].co[0] = rect[0];
+       vertices[0].co[1] = rect[1];
+       vertices[0].uv[0] = uv[0];
+       vertices[0].uv[1] = uv[1];
+       vertices[0].colour = colour;
+       vertices[1].co[0] = rect[0]+rect[2];
+       vertices[1].co[1] = rect[1];
+       vertices[1].uv[0] = uv[2];
+       vertices[1].uv[1] = uv[1];
+       vertices[1].colour = colour;
+       vertices[2].co[0] = rect[0]+rect[2];
+       vertices[2].co[1] = rect[1]+rect[3];
+       vertices[2].uv[0] = uv[2];
+       vertices[2].uv[1] = uv[3];
+       vertices[2].colour = colour;
+       vertices[3].co[0] = rect[0];
+       vertices[3].co[1] = rect[1]+rect[3];
+       vertices[3].uv[0] = uv[0];
+       vertices[3].uv[1] = uv[3];
+       vertices[3].colour = colour;
+       u16 ind_start = ctx->num_verts;
+       u16 *indices = &ctx->indices[ ctx->num_indices ];
+       
+       ui_rect_copy( ctx->clipping, vertices[0].clip );
+       ui_rect_copy( ctx->clipping, vertices[1].clip );
+       ui_rect_copy( ctx->clipping, vertices[2].clip );
+       ui_rect_copy( ctx->clipping, vertices[3].clip );
+       
+       indices[0] = ind_start+0;
+       indices[1] = ind_start+2;
+       indices[2] = ind_start+1;
+       
+       indices[3] = ind_start+0;
+       indices[4] = ind_start+3;
+       indices[5] = ind_start+2;
+       
+       ctx->num_indices += 6;
+       ctx->num_verts += 4;
+       
+       return vertices;
+}
+
+static struct ui_vert *ui_fill_rect( ui_ctx *ctx, ui_rect rect, u32 colour )
+{
+       return ui_fill_rect_uv( ctx, rect, colour, (ui_px[4]){ 4,4, 4,4 } );
+}
+
+static ui_px ui_text_line_offset( const char *str, ui_px scale, enum ui_text_align align )
+{
+   if( align == k_text_align_left )
+      return 0;
+
+   int length = 0;
+   const char *_c = str;
+   char c;
+
+   while( (c = *(_c ++)) )
+      if( c >= 32 && c <= 126 )
+         length ++;
+      else if( c == '\n' )
+         break;
+
+   if( align == k_text_align_right )
+      return -length * scale*8;
+   else
+      return (-length * scale*8) / 2;
+}
+
+static void ui_text( ui_ctx *ctx, ui_px pos[2], const char *str, ui_px scale, enum ui_text_align align )
+{
+       ui_rect text_cursor;
+       u32 current_colour = 0x00ffffff;
+       
+   const char *_c = str;
+       u8 c;
+
+       text_cursor[0] = pos[0] + ui_text_line_offset( str, scale, align );
+       text_cursor[1] = pos[1];
+       text_cursor[2] = 8*scale;
+       text_cursor[3] = 14*scale;
+
+       while( (c = *(_c ++)) )
+       {
+               if( c == '\n' )
+               {
+                       text_cursor[1] += 14*scale;
+                       text_cursor[0] = pos[0] + ui_text_line_offset( _c, scale, align );
+                       continue;
+               }
+               else if( c >= 33 )
+               {
+                       u8 glyph_base[2];
+                       u8 glyph_index = c;
+                       glyph_base[0] = glyph_index & 0xf;
+                       glyph_base[1] = (glyph_index-glyph_base[0])>>4;
+                       
+                       glyph_base[0] *= 8;
+                       glyph_base[1] *= 8;
+                       
+                       ui_fill_rect_uv( ctx, text_cursor, current_colour, (ui_px[4]){glyph_base[0]+2,glyph_base[1]+1,glyph_base[0]+6,glyph_base[1]+8} );
+               }
+               else if( c == '\x1B' )
+               {
+                       _c ++;
+                       u16 colour_id = 0;
+                       for( int i = 0; i < 3; i ++ )
+                       {
+                               if( _c[i] )
+                               {
+                                       if( _c[i] == 'm' )
+                                       {
+                                               _c = _c + i + 1;
+                                               
+                                               switch( colour_id )
+                                               {
+                                                       case '0': current_colour = 0x00ffffff; break;
+                                                       case '3'|'1'<<8: current_colour = 0x00201fee; break;
+                                                       case '3'|'2'<<8: current_colour = 0x0037e420; break;
+                                                       case '3'|'3'<<8: current_colour = 0x000ed8e2; break;
+                                                       case '3'|'4'<<8: current_colour = 0x00f15010; break;
+                                                       case '3'|'5'<<8: current_colour = 0x00ee20ee; break;
+                                                       case '3'|'6'<<8: current_colour = 0x00eeee20; break;
+                                                       case '3'|'7'<<8: current_colour = 0x00ffffff; break;
+                                               }
+                                               
+                                               break;
+                                       }
+                                       
+                                       colour_id |= _c[i] << (i*8);
+                               } 
+                               else
+                               {
+                                       _c = _c +i;
+                                       break;
+                               }
+                       }
+
+         continue;
+               }
+      else if( c == '\t' )
+      {
+         text_cursor[0] += UI_GLYPH_SPACING_X*scale*4;
+         continue;
+      }
+               
+       text_cursor[0] += UI_GLYPH_SPACING_X*scale;
        }
 }
 
@@ -150,12 +645,27 @@ static void ui_begin( ui_ctx *ctx, ui_px res_x, ui_px res_y )
        ctx->stack[0].mouse_over = 1;
        
        ctx->stack_count = 1;
+       
+       ctx->num_verts = 0;
+       ctx->num_indices = 0;
+       
+       ui_release_clip( ctx );
+       
+       if( ctx->click_state == 0 )
+               ctx->capture_mouse_id = 0;
+       
+       ctx->image_count = 0;
 }
 
 static void ui_resolve( ui_ctx *ctx )
 {
        if( ctx->stack_count-1 )
                vg_exiterr( "[UI] Mismatched node create/drestroy!" );
+       
+       if( ctx->click_state == 3 || ctx->click_state == 0 )
+       {
+               ctx->capture_lock = 0;
+       }
 }
 
 // User Input piping
@@ -169,90 +679,226 @@ static void ui_set_mouse( ui_ctx *ctx, int x, int y, int click_state )
        ctx->click_state = click_state;
 }
 
-static void ui_test(void)
-{
-       /*
-               +------------------------------------------------------+
-               | Central Market                                    [x]|
-               +------+--------------+-+------------------------------+
-               | Buy  | Balance      |#| [filters] [favorites]        |
-               | <>_  | () 2,356     |#|----------------------------+-+
-               |------|--------------|#| [] potion of madness     4 |#| 
-               | Sell | \ Main sword |#|----------------------------|#|
-               | _*^  |--------------|#| [] Balance of time      23 | |
-               |------| * Side arm   |#|----------------------------| |
-               | 235  |--------------| | [] Strength          5,300 | |
-               |      | () Sheild    | |----------------------------| |
-               |      |--------------| | [] Bewilder          2,126 | |
-               |      [ & Spells     ] |----------------------------| |
-               |      |--------------| | [] Eternal flames        6 | |
-               +------+--------------+-+----------------------------+-+
-       */
-       
-       ui_ctx ctx = { .padding = 8 };
-       
-       ui_begin( &ctx, vg_window_x, vg_window_y );
-       
-       // TODO: Find a more elegent form for this
-       int mouse_state = 0;
-       if( vg_get_button( "primary" ) ) mouse_state = 2;
-       if( vg_get_button_down( "primary" ) ) mouse_state = 1;
-       if( vg_get_button_up( "primary" ) ) mouse_state = 3;
+// High level controls
+// ====================================================================
+
+struct ui_window
+{
+       const char *title;
+       ui_rect transform;
+       
+       int     drag;
+       ui_px drag_offset[2];
+};
+
+enum button_state
+{
+       k_button_released = 0,
+       k_button_start_click,
+       k_button_click,
+       k_button_hold
+};
+
+static int ui_button( ui_ctx *ctx, u32 id )
+{
+       ui_new_node( ctx );
+       {
+               ui_capture_mouse( ctx, id );
                
-       ui_set_mouse( &ctx, vg_mouse[0], vg_mouse[1], mouse_state );
+               if( ui_hasmouse(ctx) )
+               {
+                       ui_fill_rect( ctx, ctx->cursor, ctx->colours->hover );
+                       
+                       if( ctx->click_state == 1 )
+                       {
+                               ctx->capture_lock = 1;
+                               return k_button_start_click;
+                       }
+                       else if( ctx->capture_lock && ctx->click_state == 3 )
+                               return k_button_click;
+                       else if( ctx->capture_lock && ctx->click_state == 2 )
+                               return k_button_hold;
+               }
+               else
+                       ui_fill_rect( ctx, ctx->cursor, ctx->colours->main );
+       }
        
-       static ui_px window_x = 20;
-       static ui_px window_y = 20;
-       static int window_drag = 0;
-       static ui_px drag_offset[2];
+       return k_button_released;
+}
 
-       if( window_drag )
+static int ui_window( ui_ctx *ctx, struct ui_window *window, u32 control_group )
+{
+       ctx->id_base = control_group << 16;
+
+       if( window->drag )
        {
-               window_x = ctx.mouse[0]+drag_offset[0];
-               window_y = ctx.mouse[1]+drag_offset[1];
+               window->transform[0] = ctx->mouse[0]+window->drag_offset[0];
+               window->transform[1] = ctx->mouse[1]+window->drag_offset[1];
+               
+               ui_clamp_rect( ctx->stack[0].rect, window->transform );
                
-               if( ctx.click_state == 0 )
+               if( ctx->click_state == 0 || ctx->click_state == 3 )
                {
-                       window_drag = 0;
+                       window->drag = 0;
                }
        }
        
-       ctx.cursor[0] = window_x;
-       ctx.cursor[1] = window_y;
-       ctx.cursor[2] = 500;
-       ctx.cursor[3] = 350;
+       ui_rect_copy( window->transform, ctx->cursor );
        
-       ui_new_node( &ctx );
+       ui_new_node( ctx );
        {
-               ctx.cursor[0] += 20;
-               ctx.cursor[1] += 20;
-               ctx.cursor[2] = 150;
-               ctx.cursor[3] = 25;
+               ui_capture_mouse( ctx, __COUNTER__ );
                
-               ui_capture_mouse( &ctx, 1 );
-               
-               ui_new_node( &ctx );
+               // Drag bar
+               ctx->cursor[3] = 25;            
+               ui_new_node( ctx );
                {
-                       ui_capture_mouse( &ctx, 2 );
+                       ui_capture_mouse( ctx, __COUNTER__ );
+                       
+                       struct ui_vert *drag_bar = ui_fill_rect( ctx, ctx->cursor, 0xff555555 );
+                       
+                       // title..
+                       ctx->cursor[0] += 2;
+                       ctx->cursor[1] += 2;
+                       ui_text( ctx, ctx->cursor, window->title, 2, 0 );
+                       
+                       // Close button
+                       ctx->cursor[3] = 25;
+                       ctx->cursor[2] = 25;
+                       ui_align_right( ctx );
+                       ui_align_top( ctx );
+                       ui_rect_pad( ctx->cursor, 4 );
+                       
+                       if( ui_button( ctx, __COUNTER__ ) )
+                       {
+                               vg_info( "Click clacked\n" );
+                       }
+                       ctx->cursor[0] += 2;
+                       ui_text( ctx, ctx->cursor, "x", 2, 0 );
+                       ui_end( ctx );
                        
-                       if( ui_hasmouse( &ctx ) )
+                       if( ui_hasmouse( ctx ) )
                        {
-                               if( ctx.click_state == 1 ) // start drag
+                               drag_bar[0].colour = 0xff777777;
+                               drag_bar[1].colour = 0xff777777;
+                               drag_bar[2].colour = 0xff777777;
+                               drag_bar[3].colour = 0xff777777;
+                       
+                               // start drag
+                               if( ctx->click_state == 1 )
                                {
-                                       window_drag = 1;
-                                       drag_offset[0] = window_x-ctx.mouse[0];
-                                       drag_offset[1] = window_y-ctx.mouse[1];
+                                       window->drag = 1;
+                                       window->drag_offset[0] = window->transform[0]-ctx->mouse[0];
+                                       window->drag_offset[1] = window->transform[1]-ctx->mouse[1];
                                }
                        }
                }
-               ui_end( &ctx );
+               ui_end_down( ctx );
        }
-       ui_end( &ctx );
        
-       ui_resolve( &ctx );
+       return 1;
+}
+
+struct ui_scrollbar
+{
+       int     drag;
+       ui_px drag_offset;
        
-       m3x3f view = M3X3_IDENTITY;
-       m3x3_translate( view, (v3f){ -1.0f, 1.0f, 0.0f } );
-       m3x3_scale( view, (v3f){ 1.0f/((float)vg_window_x*0.5f), -1.0f/((float)vg_window_y*0.5f), 1.0f } );
-       vg_lines_drawall( (float*)view );
+       ui_px py;
+       ui_px bar_height;
+       ui_px view_height;
+};
+
+static void ui_scrollbar( ui_ctx *ctx, struct ui_scrollbar *scrollbar, u32 id )
+{
+       scrollbar->view_height = ctx->cursor[3];
+
+       if( scrollbar->drag )
+       {
+               scrollbar->py = ctx->mouse[1]+scrollbar->drag_offset;
+               scrollbar->py = VG_MAX( scrollbar->py, 0 );
+               scrollbar->py = VG_MIN( scrollbar->py, ctx->cursor[3] - scrollbar->bar_height );
+               
+               if( ctx->click_state == 0 || ctx->click_state == 3 )
+                       scrollbar->drag = 0;
+       }
+       
+       ui_new_node( ctx );
+       {
+               ui_fill_rect( ctx, ctx->cursor, ctx->colours->background );
+               ui_capture_mouse( ctx, id );
+               
+               ctx->cursor[1] += scrollbar->py;
+               ctx->cursor[3] = scrollbar->bar_height;
+               
+               ui_new_node( ctx );
+               {
+                       ui_capture_mouse( ctx, __COUNTER__ );
+                       struct ui_vert *drag_bar = ui_fill_rect( ctx, ctx->cursor, ctx->colours->bar );
+
+                       if( ui_hasmouse( ctx ) || scrollbar->drag )
+                       {
+                               drag_bar[0].colour = ctx->colours->bar_hover;
+                               drag_bar[1].colour = ctx->colours->bar_hover;
+                               drag_bar[2].colour = ctx->colours->bar_hover;
+                               drag_bar[3].colour = ctx->colours->bar_hover;
+                       
+                               // start drag
+                               if( ctx->click_state == 1 )
+                               {
+                                       scrollbar->drag = 1;
+                                       scrollbar->drag_offset = scrollbar->py - ctx->mouse[1];
+                               }
+                       }
+               }
+               ui_end_down( ctx );
+       }
+       ui_end( ctx );
+}
+
+static ui_px ui_calculate_content_scroll( struct ui_scrollbar *scrollbar, ui_px content )
+{
+       float overlap = vg_maxf( 0.0f, (float)(content - scrollbar->view_height) );
+       
+       float range = scrollbar->view_height - scrollbar->bar_height;
+       return ((float)scrollbar->py / range) * overlap;
 }
+
+static void ui_push_image( ui_ctx *ctx, ui_rect rc, GLuint image )
+{
+       struct ui_image *img = &ctx->images[ ctx->image_count ++ ];
+       ui_rect_copy( rc, img->rc );
+       img->image = image;
+}
+
+// Shortnames
+#define gui_draw(...) ui_draw( &ui_global_ctx, __VA_ARGS__)
+#define gui_current(...) ui_current( &ui_global_ctx, __VA_ARGS__)
+#define gui_new_node() ui_new_node( &ui_global_ctx )
+#define gui_hasmouse(...) ui_hasmouse( &ui_global_ctx, __VA_ARGS__)
+#define gui_end() ui_end( &ui_global_ctx )
+#define gui_end_down() ui_end_down( &ui_global_ctx )
+#define gui_end_right() ui_end_right( &ui_global_ctx )
+#define gui_fill_y() ui_fill_y( &ui_global_ctx)
+#define gui_fill_x() ui_fill_x( &ui_global_ctx)
+#define gui_align_bottom() ui_align_bottom( &ui_global_ctx )
+#define gui_align_right() ui_align_right( &ui_global_ctx )
+#define gui_align_top() ui_align_top( &ui_global_ctx )
+#define gui_align_left() ui_align_left( &ui_global_ctx )
+#define gui_clamp_rect(...) ui_clamp_rect( &ui_global_ctx, __VA_ARGS__)
+#define gui_group_id(...) ui_group_id( &ui_global_ctx, __VA_ARGS__)
+#define gui_capture_mouse(...) ui_capture_mouse( &ui_global_ctx, __VA_ARGS__)
+#define gui_set_clip(...) ui_set_clip( &ui_global_ctx, __VA_ARGS__)
+#define gui_release_clip() ui_release_clip( &ui_global_ctx )
+#define gui_fill_rect_uv(...) ui_fill_rect_uv( &ui_global_ctx, __VA_ARGS__)
+#define gui_fill_rect(...) ui_fill_rect( &ui_global_ctx, __VA_ARGS__)
+#define gui_text(...) ui_text( &ui_global_ctx, __VA_ARGS__)
+#define gui_begin(...) ui_begin( &ui_global_ctx, __VA_ARGS__)
+#define gui_resolve(...) ui_resolve( &ui_global_ctx, __VA_ARGS__)
+#define gui_set_mouse(...) ui_set_mouse( &ui_global_ctx, __VA_ARGS__)
+#define gui_button(...) ui_button( &ui_global_ctx, __VA_ARGS__)
+#define gui_window(...) ui_window( &ui_global_ctx, __VA_ARGS__)
+#define gui_want_mouse() ui_want_mouse( &ui_global_ctx )
+#define gui_push_image(...) ui_push_image( &ui_global_ctx, __VA_ARGS__ )
+#define gui_scrollbar(...) ui_scrollbar( &ui_global_ctx, __VA_ARGS__)
+#define gui_reset_colours(...) ui_reset_colours( &ui_global_ctx )