From e04aaa0678bc2b65484d15b5945e8d16e81e3898 Mon Sep 17 00:00:00 2001 From: Kevin Lange Date: Wed, 30 Jan 2013 22:28:01 -0800 Subject: [PATCH] Add some more button state designs --- ttk-demo.c | 180 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 178 insertions(+), 2 deletions(-) diff --git a/ttk-demo.c b/ttk-demo.c index 57de2559..3525ff92 100644 --- a/ttk-demo.c +++ b/ttk-demo.c @@ -7,6 +7,9 @@ #include #include #include +#include +#include FT_FREETYPE_H +#include FT_CACHE_H #include "lib/window.h" #include "lib/graphics.h" @@ -83,6 +86,176 @@ void _ttk_draw_button(cairo_t * cr, int x, int y, int width, int height) { cairo_pattern_destroy(pat); } + { + cairo_surface_t * surface = cairo_get_target(cr); + gfx_context_t fake_context = { + .width = cairo_image_surface_get_width(surface), + .height = cairo_image_surface_get_height(surface), + .depth = 32, + .buffer = NULL, + .backbuffer = cairo_image_surface_get_data(surface) + }; + + set_font_face(FONT_SANS_SERIF); + set_font_size(13); + + char * title = "Regular Button"; + int str_width = draw_string_width(title); + draw_string(&fake_context, (width - str_width) / 2 + x, y + (height) / 2 + 4, rgb(49,49,49), title); + } + + cairo_restore(cr); +} + +void _ttk_draw_button_hover(cairo_t * cr, int x, int y, int width, int height) { + cairo_save(cr); + + cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND); + cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND); + + cairo_rounded_rectangle(cr, 2 + x, 2 + y, width - 4, height - 4, 2.0); + cairo_set_source_rgba(cr, 44.0/255.0, 71.0/255.0, 91.0/255.0, 29.0/255.0); + cairo_set_line_width(cr, 4); + cairo_stroke(cr); + + cairo_rounded_rectangle(cr, 2 + x, 2 + y, width - 4, height - 4, 2.0); + cairo_set_source_rgba(cr, 158.0/255.0, 169.0/255.0, 177.0/255.0, 1.0); + cairo_set_line_width(cr, 2); + cairo_stroke(cr); + + { + cairo_pattern_t * pat = cairo_pattern_create_linear(2 + x, 2 + y, 2 + x, 2 + y + height - 4); + cairo_pattern_add_color_stop_rgba(pat, 0, 1, 1, 1, 1); + cairo_pattern_add_color_stop_rgba(pat, 1, 229.0/255.0, 229.0/255.0, 246.0/255.0, 1); + cairo_rounded_rectangle(cr, 2 + x, 2 + y, width - 4, height - 4, 2.0); + cairo_set_source(cr, pat); + cairo_fill(cr); + cairo_pattern_destroy(pat); + } + + { + cairo_pattern_t * pat = cairo_pattern_create_linear(3 + x, 3 + y, 3 + x, 3 + y + height - 4); + cairo_pattern_add_color_stop_rgba(pat, 0, 252.0/255.0, 252.0/255.0, 254.0/255.0, 1); + cairo_pattern_add_color_stop_rgba(pat, 1, 212.0/255.0, 223.0/255.0, 251.0/255.0, 1); + cairo_rounded_rectangle(cr, 3 + x, 3 + y, width - 5, height - 5, 2.0); + cairo_set_source(cr, pat); + cairo_fill(cr); + cairo_pattern_destroy(pat); + } + + { + cairo_surface_t * surface = cairo_get_target(cr); + gfx_context_t fake_context = { + .width = cairo_image_surface_get_width(surface), + .height = cairo_image_surface_get_height(surface), + .depth = 32, + .buffer = NULL, + .backbuffer = cairo_image_surface_get_data(surface) + }; + + set_font_face(FONT_SANS_SERIF); + set_font_size(13); + + char * title = "Button with Hover Highlight"; + int str_width = draw_string_width(title); + draw_string(&fake_context, (width - str_width) / 2 + x, y + (height) / 2 + 4, rgb(49,49,49), title); + } + + cairo_restore(cr); + +} + +void _ttk_draw_button_select(cairo_t * cr, int x, int y, int width, int height) { + cairo_save(cr); + + cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND); + cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND); + + cairo_rounded_rectangle(cr, 2 + x, 2 + y, width - 4, height - 4, 2.0); + cairo_set_source_rgba(cr, 134.0/255.0, 173.0/255.0, 201.0/255.0, 1.0); + cairo_set_line_width(cr, 2); + cairo_stroke(cr); + + cairo_rounded_rectangle(cr, 2 + x, 2 + y, width - 4, height - 4, 2.0); + cairo_set_source_rgba(cr, 202.0/255.0, 211.0/255.0, 232.0/255.0, 1.0); + cairo_fill(cr); + + { + cairo_surface_t * surface = cairo_get_target(cr); + gfx_context_t fake_context = { + .width = cairo_image_surface_get_width(surface), + .height = cairo_image_surface_get_height(surface), + .depth = 32, + .buffer = NULL, + .backbuffer = cairo_image_surface_get_data(surface) + }; + + set_font_face(FONT_SANS_SERIF); + set_font_size(13); + + char * title = "Selected Button"; + int str_width = draw_string_width(title); + draw_string(&fake_context, (width - str_width) / 2 + x, y + (height) / 2 + 4, rgb(49,49,49), title); + } + + cairo_restore(cr); + +} + +void _ttk_draw_button_disabled(cairo_t * cr, int x, int y, int width, int height) { + cairo_save(cr); + + cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND); + cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND); + + cairo_rounded_rectangle(cr, 2 + x, 2 + y, width - 4, height - 4, 2.0); + cairo_set_source_rgba(cr, 44.0/255.0, 71.0/255.0, 91.0/255.0, 29.0/255.0); + cairo_set_line_width(cr, 4); + cairo_stroke(cr); + + cairo_rounded_rectangle(cr, 2 + x, 2 + y, width - 4, height - 4, 2.0); + cairo_set_source_rgba(cr, 152.0/255.0, 152.0/255.0, 152.0/255.0, 1.0); + cairo_set_line_width(cr, 2); + cairo_stroke(cr); + + { + cairo_pattern_t * pat = cairo_pattern_create_linear(2 + x, 2 + y, 2 + x, 2 + y + height - 4); + cairo_pattern_add_color_stop_rgba(pat, 0, 229.0/255.0, 229.0/255.0, 229.0/255.0, 1); + cairo_pattern_add_color_stop_rgba(pat, 1, 178.0/255.0, 178.0/255.0, 178.0/255.0, 1); + cairo_rounded_rectangle(cr, 2 + x, 2 + y, width - 4, height - 4, 2.0); + cairo_set_source(cr, pat); + cairo_fill(cr); + cairo_pattern_destroy(pat); + } + + { + cairo_pattern_t * pat = cairo_pattern_create_linear(3 + x, 3 + y, 3 + x, 3 + y + height - 4); + cairo_pattern_add_color_stop_rgba(pat, 0, 210.0/255.0, 210.0/255.0, 210.0/255.0, 1); + cairo_pattern_add_color_stop_rgba(pat, 1, 165.0/255.0, 166.0/255.0, 170.0/255.0, 1); + cairo_rounded_rectangle(cr, 3 + x, 3 + y, width - 5, height - 5, 2.0); + cairo_set_source(cr, pat); + cairo_fill(cr); + cairo_pattern_destroy(pat); + } + + { + cairo_surface_t * surface = cairo_get_target(cr); + gfx_context_t fake_context = { + .width = cairo_image_surface_get_width(surface), + .height = cairo_image_surface_get_height(surface), + .depth = 32, + .buffer = NULL, + .backbuffer = cairo_image_surface_get_data(surface) + }; + + set_font_face(FONT_SANS_SERIF); + set_font_size(13); + + char * title = "Disabled Button"; + int str_width = draw_string_width(title); + draw_string(&fake_context, (width - str_width) / 2 + x, y + (height) / 2 + 4, rgb(100,100,100), title); + } + cairo_restore(cr); } @@ -104,9 +277,12 @@ void ttk_window_draw(ttk_window_t * window) { _ttk_draw_button(cr, 4, 4, window->width - 8, 40); _ttk_draw_button(cr, 4, 48 + 4, (window->width / 2) - 8, 40); - _ttk_draw_button(cr, 4 + (window->width / 2), 48 + 4, (window->width / 2) - 8, 40); + _ttk_draw_button_hover(cr, 4 + (window->width / 2), 48 + 4, (window->width / 2) - 8, 40); - _ttk_draw_button(cr, 4, 48 + 48 + 4, window->width - 8, window->height - 48 - 48 - 8); + _ttk_draw_button_select(cr, 4, 2 * 48 + 4, (window->width / 2) - 8, 40); + _ttk_draw_button_disabled(cr, 4 + (window->width / 2), 2 * 48 + 4, (window->width / 2) - 8, 40); + + _ttk_draw_button(cr, 4, 3 * 48 + 4, window->width - 8, window->height - (3 * 48) - 8); /* Paint the window's internal surface onto the backbuffer */ cairo_set_source_surface(cr_main, internal_surface, (double)window->off_x, (double)window->off_y);