|
Post by alexfish on Aug 25, 2014 9:32:00 GMT 1
Hi Vovchik
only thing can think of a regards muli pattern is to use the context
https://developer.gnome.org/gtk3/stable/GtkStyleContext.html
if got gtk3 docs it gives brief outline of what can be done , but not sure how one would override any settings css wise If any.
so here in most cases can only Assume.
Gtk context uses Cairo CR , we have done loads of that in the past.( Re Goo Canvas) + all the bits to draw the CR are in GFX.
looking through the info at the site there is
HTH Alex
|
|
|
Post by vovchik on Aug 25, 2014 10:43:44 GMT 1
Dear Alex,
Thanks. I am reading. And also found this:
/* Compile With: * gcc stylecontext.c -o stylecontext -Wall `pkg-config --libs gtk+-3.0 --cflags` */
#include <gtk/gtk.h> static void test_parse_selectors (void) { GtkCssProvider *provider; GError *error; gboolean res; gint i; const gchar *valid[] = { "* {}", "E {}", "E F {}", "E > F {}", "E#id {}", "#id {}", "tab:first-child {}", "tab:last-child {}", "tab:nth-child(first) {}", "tab:nth-child(last) {}", "tab:nth-child(even) {}", "tab:nth-child(odd) {}", "tab:sorted {}", ".some-class {}", ".some-class.another-class {}", ".some-class .another-class {}", "E * {}", "E .class {}", "E > .foo {}", "E > #id {}", "E:active {}", "E:prelight {}", "E:hover {}", "E:selected {}", "E:insensitive {}", "E:inconsistent {}", "E:focused {}", "E:active:prelight {}", "* > .notebook tab:first-child .label:focused {}", "E, F {}", "E, F /* comment here */ {}", "E,/* comment here */ F {}", "E1.e1_2 #T3_4 {}", "E:first-child {}", "E:last-child {}", "E:nth-child(first) {}", "E:nth-child(last) {}", "E:nth-child(even) {}", "E:nth-child(odd) {}", "E:sorted {}", "E:focused tab {}", NULL };
error = NULL; for (i = 0; valid[i]; i++) { provider = gtk_css_provider_new (); res = gtk_css_provider_load_from_data (provider, valid[i], -1, &error); if (error) g_print ("parsing '%s': got unexpected error: %s\n", valid[i], error->message); g_assert_no_error (error); g_assert (res);
g_object_unref (provider); } }
static void test_path (void) { GtkWidgetPath *path; GtkWidgetPath *path2; gint pos; GtkRegionFlags flags;
path = gtk_widget_path_new (); g_assert_cmpint (gtk_widget_path_length (path), ==, 0);
pos = gtk_widget_path_append_type (path, GTK_TYPE_WINDOW); g_assert_cmpint (pos, ==, 0); g_assert_cmpint (gtk_widget_path_length (path), ==, 1); g_assert (gtk_widget_path_iter_get_object_type (path, 0) == GTK_TYPE_WINDOW); g_assert (gtk_widget_path_is_type (path, GTK_TYPE_WIDGET)); g_assert (gtk_widget_path_iter_get_name (path, 0) == NULL);
pos = gtk_widget_path_append_type (path, GTK_TYPE_WIDGET); g_assert_cmpint (pos, ==, 1); g_assert_cmpint (gtk_widget_path_length (path), ==, 2); gtk_widget_path_iter_set_object_type (path, pos, GTK_TYPE_BUTTON); g_assert (gtk_widget_path_is_type (path, GTK_TYPE_BUTTON)); g_assert (gtk_widget_path_has_parent (path, GTK_TYPE_WIDGET)); g_assert (gtk_widget_path_has_parent (path, GTK_TYPE_WINDOW)); g_assert (!gtk_widget_path_has_parent (path, GTK_TYPE_DIALOG)); g_assert (gtk_widget_path_iter_get_name (path, 1) == NULL);
gtk_widget_path_iter_set_name (path, 1, "name"); g_assert (gtk_widget_path_iter_has_name (path, 1, "name"));
gtk_widget_path_iter_add_class (path, 1, "class1"); gtk_widget_path_iter_add_class (path, 1, "class2"); g_assert (gtk_widget_path_iter_has_class (path, 1, "class1")); g_assert (gtk_widget_path_iter_has_class (path, 1, "class2")); g_assert (!gtk_widget_path_iter_has_class (path, 1, "class3"));
path2 = gtk_widget_path_copy (path); g_assert (gtk_widget_path_iter_has_class (path2, 1, "class1")); g_assert (gtk_widget_path_iter_has_class (path2, 1, "class2")); g_assert (!gtk_widget_path_iter_has_class (path2, 1, "class3")); gtk_widget_path_free (path2);
gtk_widget_path_iter_remove_class (path, 1, "class2"); g_assert (gtk_widget_path_iter_has_class (path, 1, "class1")); g_assert (!gtk_widget_path_iter_has_class (path, 1, "class2")); gtk_widget_path_iter_clear_classes (path, 1); g_assert (!gtk_widget_path_iter_has_class (path, 1, "class1"));
gtk_widget_path_iter_add_region (path, 1, "tab", 0); gtk_widget_path_iter_add_region (path, 1, "title", GTK_REGION_EVEN | GTK_REGION_FIRST);
g_assert (gtk_widget_path_iter_has_region (path, 1, "tab", &flags) && flags == 0); g_assert (gtk_widget_path_iter_has_region (path, 1, "title", &flags) && flags == (GTK_REGION_EVEN | GTK_REGION_FIRST)); g_assert (!gtk_widget_path_iter_has_region (path, 1, "extension", NULL));
path2 = gtk_widget_path_copy (path); g_assert (gtk_widget_path_iter_has_region (path2, 1, "tab", &flags) && flags == 0); g_assert (gtk_widget_path_iter_has_region (path2, 1, "title", &flags) && flags == (GTK_REGION_EVEN | GTK_REGION_FIRST)); g_assert (!gtk_widget_path_iter_has_region (path2, 1, "extension", NULL)); gtk_widget_path_free (path2);
gtk_widget_path_free (path); }
static void test_match (void) { GtkStyleContext *context; GtkWidgetPath *path; GtkCssProvider *provider; GError *error; const gchar *data; GdkRGBA color; GdkRGBA expected;
error = NULL; provider = gtk_css_provider_new ();
gdk_rgba_parse (&expected, "#fff");
context = gtk_style_context_new ();
path = gtk_widget_path_new (); gtk_widget_path_append_type (path, GTK_TYPE_WINDOW); gtk_widget_path_append_type (path, GTK_TYPE_BOX); gtk_widget_path_append_type (path, GTK_TYPE_BUTTON); gtk_widget_path_iter_set_name (path, 0, "mywindow"); gtk_widget_path_iter_add_class (path, 2, "button"); gtk_style_context_set_path (context, path); gtk_widget_path_free (path);
gtk_style_context_add_provider (context, GTK_STYLE_PROVIDER (provider), GTK_STYLE_PROVIDER_PRIORITY_USER);
data = "* { color: #fff }"; gtk_css_provider_load_from_data (provider, data, -1, &error); g_assert_no_error (error); gtk_style_context_invalidate (context); gtk_style_context_get_color (context, GTK_STATE_FLAG_NORMAL, &color); g_assert (gdk_rgba_equal (&color, &expected));
data = "* { color: #f00 }\n" "GtkButton { color: #fff }"; gtk_css_provider_load_from_data (provider, data, -1, &error); g_assert_no_error (error); gtk_style_context_invalidate (context); gtk_style_context_get_color (context, GTK_STATE_FLAG_NORMAL, &color); g_assert (gdk_rgba_equal (&color, &expected));
data = "* { color: #f00 }\n" "GtkButton { color: #fff }\n" "GtkWindow > GtkButton { color: #000 }"; gtk_css_provider_load_from_data (provider, data, -1, &error); g_assert_no_error (error); gtk_style_context_invalidate (context); gtk_style_context_get_color (context, GTK_STATE_FLAG_NORMAL, &color); g_assert (gdk_rgba_equal (&color, &expected));
data = "* { color: #f00 }\n" ".button { color: #fff }"; gtk_css_provider_load_from_data (provider, data, -1, &error); g_assert_no_error (error); gtk_style_context_invalidate (context); gtk_style_context_get_color (context, GTK_STATE_FLAG_NORMAL, &color); g_assert (gdk_rgba_equal (&color, &expected));
data = "* { color: #f00 }\n" "GtkButton { color: #000 }\n" ".button { color: #fff }"; gtk_css_provider_load_from_data (provider, data, -1, &error); g_assert_no_error (error); gtk_style_context_invalidate (context); gtk_style_context_get_color (context, GTK_STATE_FLAG_NORMAL, &color); g_assert (gdk_rgba_equal (&color, &expected));
data = "* { color: #f00 }\n" "GtkButton { color: #000 }\n" "GtkWindow GtkButton { color: #fff }"; gtk_css_provider_load_from_data (provider, data, -1, &error); g_assert_no_error (error); gtk_style_context_invalidate (context); gtk_style_context_get_color (context, GTK_STATE_FLAG_NORMAL, &color); g_assert (gdk_rgba_equal (&color, &expected));
data = "* { color: #f00 }\n" ".button { color: #000 }\n" "GtkWindow .button { color: #fff }"; gtk_css_provider_load_from_data (provider, data, -1, &error); g_assert_no_error (error); gtk_style_context_invalidate (context); gtk_style_context_get_color (context, GTK_STATE_FLAG_NORMAL, &color); g_assert (gdk_rgba_equal (&color, &expected));
data = "* { color: #f00 }\n" "* .button { color: #000 }\n" "#mywindow .button { color: #fff }"; gtk_css_provider_load_from_data (provider, data, -1, &error); g_assert_no_error (error); gtk_style_context_invalidate (context); gtk_style_context_get_color (context, GTK_STATE_FLAG_NORMAL, &color); g_assert (gdk_rgba_equal (&color, &expected));
data = "* { color: #f00 }\n" "GtkWindow .button { color: #000 }\n" "GtkWindow#mywindow .button { color: #fff }"; gtk_css_provider_load_from_data (provider, data, -1, &error); g_assert_no_error (error); gtk_style_context_invalidate (context); gtk_style_context_get_color (context, GTK_STATE_FLAG_NORMAL, &color); g_assert (gdk_rgba_equal (&color, &expected));
data = "* { color: #f00 }\n" "GtkWindow .button { color: #000 }\n" "GObject .button { color: #fff }"; gtk_css_provider_load_from_data (provider, data, -1, &error); g_assert_no_error (error); gtk_style_context_invalidate (context); gtk_style_context_get_color (context, GTK_STATE_FLAG_NORMAL, &color); g_assert (gdk_rgba_equal (&color, &expected));
g_object_unref (provider); g_object_unref (context); }
static void test_style_property (void) { GtkStyleContext *context; GtkWidgetPath *path; GtkCssProvider *provider; GError *error; const gchar *data; gint x; GdkRGBA color; GdkRGBA expected;
error = NULL; provider = gtk_css_provider_new ();
context = gtk_style_context_new ();
path = gtk_widget_path_new (); gtk_widget_path_append_type (path, GTK_TYPE_WINDOW); gtk_widget_path_append_type (path, GTK_TYPE_BOX); gtk_widget_path_append_type (path, GTK_TYPE_BUTTON); gtk_style_context_set_path (context, path); gtk_widget_path_free (path); gtk_style_context_set_state (context, GTK_STATE_FLAG_PRELIGHT);
/* Since we set the prelight state on the context, we expect * only the third selector to match, even though the second one * has higher specificity, and the fourth one comes later. * * In particular, we want to verify that widget style properties and * CSS properties follow the same matching rules, ie we expect * color to be #003 and child-displacement-x to be 3. */ data = "GtkButton:insensitive { color: #001; -GtkButton-child-displacement-x: 1 }\n" "GtkBox GtkButton:selected { color: #002; -GtkButton-child-displacement-x: 2 }\n" "GtkButton:prelight { color: #003; -GtkButton-child-displacement-x: 3 }\n" "GtkButton:focused { color: #004; -GtkButton-child-displacement-x: 4 }\n"; gtk_css_provider_load_from_data (provider, data, -1, &error); g_assert_no_error (error); gtk_style_context_add_provider (context, GTK_STYLE_PROVIDER (provider), GTK_STYLE_PROVIDER_PRIORITY_USER);
gtk_style_context_invalidate (context);
gtk_style_context_get_color (context, GTK_STATE_FLAG_PRELIGHT, &color); gdk_rgba_parse (&expected, "#003"); g_assert (gdk_rgba_equal (&color, &expected));
gtk_style_context_get_style (context, "child-displacement-x", &x, NULL);
g_assert_cmpint (x, ==, 3);
g_object_unref (provider); g_object_unref (context); }
static void test_basic_properties (void) { GtkStyleContext *context; GtkWidgetPath *path; GdkRGBA *color; GdkRGBA *bg_color; PangoFontDescription *font;
context = gtk_style_context_new (); path = gtk_widget_path_new (); gtk_style_context_set_path (context, path); gtk_widget_path_free (path);
gtk_style_context_get (context, 0, "color", &color, "background-color", &bg_color, "font", &font, NULL); g_assert (color != NULL); g_assert (bg_color != NULL); g_assert (font != NULL);
gdk_rgba_free (color); gdk_rgba_free (bg_color); pango_font_description_free (font);
g_object_unref (context); }
int main (int argc, char *argv[]) { gtk_init (NULL, NULL); g_test_init (&argc, &argv, NULL);
g_test_add_func ("/style/parse/selectors", test_parse_selectors); g_test_add_func ("/style/path", test_path); g_test_add_func ("/style/match", test_match); g_test_add_func ("/style/style-property", test_style_property); g_test_add_func ("/style/basic", test_basic_properties);
return g_test_run (); }
With kind regards, vovchik
|
|
|
Post by vovchik on Aug 25, 2014 13:18:49 GMT 1
Dear Alex and Joe, I finally introduced some tiny bit of animation into the radial/linear background fill demo - much nicer now and, maybe, fun to watch. Also added a routine that allows you to use html named colors. With kind regards, vovchik Attachments:hugradfill2.tar.gz (47.93 KB)
|
|
|
Post by alexfish on Aug 25, 2014 13:37:59 GMT 1
Bagh ?!!!!! GTK Added :: post previous anyway the particular item of " GtkStyleContext *context " reference I think found it , where the actual context links to The Cairo t cr void gtk_render_background (GtkStyleContext *context, cairo_t *cr, gdouble x, gdouble y, gdouble width, gdouble height);
HTH Alex
|
|
|
Post by vovchik on Aug 25, 2014 13:43:12 GMT 1
Dear Alex,
Thanks. That looks promising, because we can, as I recall, stick a pixbuf into a cairo surface. I think I have done that in various places. Will have to look at some old code - notify-svg as I recall.
With kind regards, vovchik
|
|
|
Post by bigbass on Aug 25, 2014 15:23:00 GMT 1
Hey vovchik and Alex Nice demos vovchik changing the backgrounds great progress things are moving quickly We may be able to to baconize this (add some stuff too) and make it easy to edit code just using the new theme sudo apt-get install gtk-theme-config Would be cool to have something like that built into HUG that we could make easy changes with a GUI I know we have to figure out several things first but its a good long term goal to shoot at Joe
|
|
|
Post by bigbass on Aug 26, 2014 15:32:50 GMT 1
Hey guys later we will need a how to GtkCssProvider And the simplest demos are helpful to get started with following the official docs they lack complete examples that compile here is a working bacon snippet of Example: Linear Gradient 2referenced from developer.gnome.org/gtk3/stable/GtkCssProvider.htmlUPDATED code with vovchick's define color trick "@define-color yellow #FFFF00;" \ "@define-color blue #0000FF;" \
PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0` PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0`
'--- Ported the Example: Linear Gradient 2 '--- to bacon and modified by bigbass '--- https://developer.gnome.org/gtk3/stable/GtkCssProvider.html OPTION PARSE FALSE
DECLARE *window TYPE void
'-------- CSS ----------- DECLARE provider TYPE void* DECLARE display TYPE void* DECLARE screen TYPE void*
CONST GTK_STYLE_PROVIDER_PRIORITY_FALLBACK = 1 CONST GTK_STYLE_PROVIDER_PRIORITY_THEME = 200 CONST GTK_STYLE_PROVIDER_PRIORITY_SETTINGS = 400 CONST GTK_STYLE_PROVIDER_PRIORITY_APPLICATION = 600 CONST GTK_STYLE_PROVIDER_PRIORITY_USER = 800
GTK_WINDOW_TOPLEVEL = 0
'========================================== SUB close_window (void) '========================================== gtk_main_quit () END SUB
gtk_init (0,0)
window = gtk_window_new (GTK_WINDOW_TOPLEVEL); gtk_window_set_default_size (window, 300, 300) g_signal_connect_data(window, "delete-event", close_window, 0, 0, 0)
provider = gtk_css_provider_new () display = gdk_display_get_default () screen = gdk_display_get_default_screen (display)
gtk_style_context_add_provider_for_screen (screen, provider, \ GTK_STYLE_PROVIDER_PRIORITY_USER)
gtk_css_provider_load_from_data (provider, \ "@define-color yellow #FFFF00;" \ "@define-color blue #0000FF;" \ " GtkWindow {\n" \ "background-image: -gtk-gradient " \ " (linear, \ 0 0, 0 1, \ color-stop(0, @yellow), \ color-stop(0.2, @blue), \ color-stop(1, #0f0)) \ ;\n" "} \n", -1, NULL)
g_object_unref (provider) gtk_widget_show_all (window) gtk_main ()
|
|
|
Post by vovchik on Aug 26, 2014 18:17:19 GMT 1
Dear Joe, Good thing you posted a simple demo. Those named colors, though, e.g. @yellow, do not show up and and I do not think they can in that format without prior definition. From my reading of the gtk3 docs, I understood that they had to be defined within the CSS bit first. That is why I put that long function that returns a #XXXXXX in my last gradient background demo. In any case, this seems to work: PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0` PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0` '--- Ported the Example: Linear Gradient 2 '--- to bacon and modified by bigbass '--- https://developer.gnome.org/gtk3/stable/GtkCssProvider.html OPTION PARSE FALSE
DECLARE *window TYPE void '-------- CSS ----------- DECLARE provider TYPE void* DECLARE display TYPE void* DECLARE screen TYPE void* CONST GTK_STYLE_PROVIDER_PRIORITY_FALLBACK = 1 CONST GTK_STYLE_PROVIDER_PRIORITY_THEME = 200 CONST GTK_STYLE_PROVIDER_PRIORITY_SETTINGS = 400 CONST GTK_STYLE_PROVIDER_PRIORITY_APPLICATION = 600 CONST GTK_STYLE_PROVIDER_PRIORITY_USER = 800 CONST GTK_WINDOW_TOPLEVEL = 0
' ------------------ SUB close_window(void) ' ------------------ gtk_main_quit() END SUB
gtk_init(0,0) window = gtk_window_new(GTK_WINDOW_TOPLEVEL); gtk_window_set_default_size(window, 300, 300) g_signal_connect_data(window, "delete-event", close_window, 0, 0, 0) provider = gtk_css_provider_new() display = gdk_display_get_default() screen = gdk_display_get_default_screen(display) gtk_style_context_add_provider_for_screen (screen, provider, \ GTK_STYLE_PROVIDER_PRIORITY_USER) gtk_css_provider_load_from_data(provider, \ "@define-color yellow #FFFF00;" \ "@define-color blue #0000FF;" \ "GtkWindow {\n" \ "background-image: -gtk-gradient " \ " (linear, \ 0 0, 0 1, \ color-stop(0, @yellow), \ color-stop(0.2, @blue), \ color-stop(1, #0f0)) \ ;\n" "} \n", -1, NULL) g_object_unref(provider) gtk_widget_show_all(window) gtk_main()
With kind regards, vovchik PS. @name
Reference to a color that has been defined with @define-color
color: @bg_color; --- @define-color entry-color shade (@bg_color, 0.7);
GtkEntry { background-color: @entry-color; }
GtkEntry:focused { background-color: mix (@entry-color, shade (#fff, 0.5), 0.8); }
developer.gnome.org/gtk3/stable/GtkCssProvider.html#specifying-colors
|
|
|
Post by bigbass on Aug 27, 2014 5:26:40 GMT 1
Hey vovchik Thanks I like the way you did that I took a look at that massive C code snippet you posted a few posts ago yesterday at 4:43am and I was interested in the data string part so took a poke at only porting the data stuff PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0` PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0`
'--- Ported the Example: Linear Gradient 2 '--- to bacon and modified by bigbass '--- https://developer.gnome.org/gtk3/stable/GtkCssProvider.html OPTION PARSE FALSE
DECLARE *window TYPE void
'-------- CSS ----------- DECLARE provider TYPE void* DECLARE display TYPE void* DECLARE screen TYPE void*
CONST GTK_STYLE_PROVIDER_PRIORITY_FALLBACK = 1 CONST GTK_STYLE_PROVIDER_PRIORITY_THEME = 200 CONST GTK_STYLE_PROVIDER_PRIORITY_SETTINGS = 400 CONST GTK_STYLE_PROVIDER_PRIORITY_APPLICATION = 600 CONST GTK_STYLE_PROVIDER_PRIORITY_USER = 800
GTK_WINDOW_TOPLEVEL = 0
'========================================== SUB close_window (void) '========================================== gtk_main_quit () END SUB
gtk_init (0,0)
window = gtk_window_new (GTK_WINDOW_TOPLEVEL); gtk_window_set_default_size (window, 300, 300) g_signal_connect_data(window, "delete-event", close_window, 0, 0, 0)
provider = gtk_css_provider_new () display = gdk_display_get_default () screen = gdk_display_get_default_screen (display)
gtk_style_context_add_provider_for_screen (screen, provider, \ GTK_STYLE_PROVIDER_PRIORITY_USER)
'--- used the data string way like in C data = "@define-color yellow #FFFF00;" \ "@define-color blue #0000FF;" \ "GtkWindow {\n" \ "background-image: -gtk-gradient " \ " (linear, \ 0 0, 0 1, \ color-stop(0, @yellow), \ color-stop(0.2, @blue), \ color-stop(1, #0f0)) \ ;\n" "} \n"
gtk_css_provider_load_from_data (provider, data, -1, NULL)
g_object_unref (provider) gtk_widget_show_all (window) gtk_main ()
|
|
|
Post by vovchik on Aug 27, 2014 8:35:50 GMT 1
Dear Joe, Thanks for the last one. It is nicer, I think, to do it that way - predefining the data in a string var and then passing the variable to the function. Looks very clean. With kind regards and get some sleep, vovchik
|
|
|
Post by vovchik on Aug 27, 2014 13:08:56 GMT 1
Dear Joe, Alex and all, I discovered how we can style buttons using CSS. Note that we can use named colors, but we just have to get the syntax right. Now I seem to know how to do it. ' Ported example cssbutton2.c ' to BaCon and modded a bit - vovchik ' http://stackoverflow.com/questions/8946936/gtk3-css-button-states
' *********************** ' COMPILER DIRECTIVES ' ***********************
PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0` PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0` OPTION PARSE FALSE
' *********************** ' END COMPILER DIRECTIVES ' ***********************
' *********************** ' INITIALIZTION ' ***********************
DECLARE *window TYPE void DECLARE *button TYPE void CONST GTK_WINDOW_TOPLEVEL = 0 CONST GTK_ALIGN_CENTER = 3 ALIAS gtk_main TO DISPLAY ' for CSS DECLARE provider TYPE void* DECLARE display TYPE void* DECLARE screen TYPE void* CONST GTK_STYLE_PROVIDER_PRIORITY_FALLBACK = 1 CONST GTK_STYLE_PROVIDER_PRIORITY_THEME = 200 CONST GTK_STYLE_PROVIDER_PRIORITY_SETTINGS = 400 CONST GTK_STYLE_PROVIDER_PRIORITY_APPLICATION = 600 CONST GTK_STYLE_PROVIDER_PRIORITY_USER = 800
' *********************** ' END INITIALIZTION ' ***********************
' *********************** ' END INITIALIZTION ' ***********************
' *********************** ' SUBS & FUNCTIONS ' ***********************
' ------------------ SUB CLOSE_WINDOW() ' ------------------ gtk_main_quit() END SUB
' ------------------ SUB MK_GUI() ' ------------------ LOCAL data$ TYPE STRING data$ = CONCAT$( \ " GtkWindow {\n" \ " background-color: hotpink;\n" \ " background-image: none;\n" \ "}\n" \ " GtkButton {\n" \ " -GtkWidget-focus-line-width: 0px;\n" \ " border-radius: 15px;\n" \ " font: Sans 20;\n" \ " color: #00008B;\n" \ " background-image: none;\n" \ " background-color: lawngreen;\n" \ "}\n" \ " .button:hover {\n" \ " background-color: red;\n" \ " font: Sans Bold 23;\n" \ " color: white;\n" \ "}\n" \ " .button:hover:active {\n" \ " background-color: fuchsia;\n" \ " color: cyan;\n" \ "}\n") gtk_init (0,0) window = gtk_window_new (GTK_WINDOW_TOPLEVEL) gtk_window_set_default_size(window, 280, 200) gtk_window_set_title(window, "BaCon GTK3: CSS Button") g_signal_connect_data(window, "delete-event", CLOSE_WINDOW, 0, 0, 0) button = gtk_button_new_with_label("CSS Button") gtk_widget_set_halign(button, GTK_ALIGN_CENTER) gtk_widget_set_valign(button, GTK_ALIGN_CENTER) gtk_widget_set_size_request(button, 200, 120) gtk_container_add(window, button) provider = gtk_css_provider_new() display = gdk_display_get_default() screen = gdk_display_get_default_screen(display) gtk_style_context_add_provider_for_screen (screen, provider, \ GTK_STYLE_PROVIDER_PRIORITY_USER) gtk_css_provider_load_from_data (provider, data$, -1, NULL) g_object_unref (provider) gtk_widget_show_all(window) END SUB
' *********************** ' END SUBS & FUNCTIONS ' ***********************
' *********************** ' MAIN ' ***********************
MK_GUI() DISPLAY
' *********************** ' END MAIN ' ***********************
With kind regards, vovchik
|
|
|
Post by vovchik on Aug 27, 2014 13:43:14 GMT 1
Dear Joe, Alex and all, I have now figured out how to make buttons with different gradients for different states. Here is an example: ' Ported example cssbutton2.c ' to BaCon and modded - vovchik - with gradients ' http://stackoverflow.com/questions/8946936/gtk3-css-button-states
' *********************** ' COMPILER DIRECTIVES ' ***********************
PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0` PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0` OPTION PARSE FALSE
' *********************** ' END COMPILER DIRECTIVES ' ***********************
' *********************** ' INITIALIZTION ' ***********************
DECLARE *window TYPE void DECLARE *button TYPE void CONST GTK_WINDOW_TOPLEVEL = 0 CONST GTK_ALIGN_CENTER = 3 ALIAS gtk_main TO DISPLAY ' for CSS DECLARE provider TYPE void* DECLARE display TYPE void* DECLARE screen TYPE void* CONST GTK_STYLE_PROVIDER_PRIORITY_FALLBACK = 1 CONST GTK_STYLE_PROVIDER_PRIORITY_THEME = 200 CONST GTK_STYLE_PROVIDER_PRIORITY_SETTINGS = 400 CONST GTK_STYLE_PROVIDER_PRIORITY_APPLICATION = 600 CONST GTK_STYLE_PROVIDER_PRIORITY_USER = 800
' *********************** ' END INITIALIZTION ' ***********************
' *********************** ' END INITIALIZTION ' ***********************
' *********************** ' SUBS & FUNCTIONS ' ***********************
' ------------------ SUB CLOSE_WINDOW() ' ------------------ gtk_main_quit() END SUB
' ------------------ SUB MK_GUI() ' ------------------ LOCAL data$ TYPE STRING grad$ = CONCAT$( \ "GtkWindow {", NL$, \ "background-image: -gtk-gradient ", \ " (linear, 0 0, 0 1, " \ "color-stop(1, black), " \ "color-stop(0, lightyellow)); ", \ NL$, "} ", NL$) data$ = CONCAT$( grad$, \ " GtkButton {\n" \ " -GtkWidget-focus-line-width: 0px;\n" \ " border-radius: 15px;\n" \ " font: Sans 20;\n" \ " color: white;\n" \ " background-image: -gtk-gradient " \ " (linear, 0 0, 0 1, " \ " color-stop(1, dimgray), " \ " color-stop(0, lightyellow)); " \ "}\n" \ " .button:hover {\n" \ " background-color: red;\n" \ " background-image: -gtk-gradient " \ " (linear, 0 0, 0 1, " \ " color-stop(1, dimgray), " \ " color-stop(0, pink)); " \ " font: Sans Bold 23;\n" \ " color: limegreen;\n" \ "}\n" \ " .button:hover:active {\n" \ " background-image: -gtk-gradient " \ " (linear, 0 0, 0 1, " \ " color-stop(1, dimgray), " \ " color-stop(0, fuchsia)); " \ " color: red;\n" \ "}\n") gtk_init (0,0) window = gtk_window_new (GTK_WINDOW_TOPLEVEL) gtk_window_set_default_size(window, 280, 200) gtk_window_set_title(window, "BaCon GTK3: CSS Button") g_signal_connect_data(window, "delete-event", CLOSE_WINDOW, 0, 0, 0) button = gtk_button_new_with_label("CSS Button") gtk_widget_set_halign(button, GTK_ALIGN_CENTER) gtk_widget_set_valign(button, GTK_ALIGN_CENTER) gtk_widget_set_size_request(button, 200, 120) gtk_container_add(window, button) provider = gtk_css_provider_new() display = gdk_display_get_default() screen = gdk_display_get_default_screen(display) gtk_style_context_add_provider_for_screen (screen, provider, \ GTK_STYLE_PROVIDER_PRIORITY_USER) gtk_css_provider_load_from_data (provider, data$, -1, NULL) g_object_unref (provider) gtk_widget_show_all(window) END SUB
' *********************** ' END SUBS & FUNCTIONS ' ***********************
' *********************** ' MAIN ' ***********************
MK_GUI() DISPLAY
' *********************** ' END MAIN ' ***********************
Have fun. With kind regards, vovchik
|
|
|
Post by bigbass on Aug 27, 2014 15:29:34 GMT 1
Hey vovchik Excellent job on the css button widget! doing that initially in css shows quickly how much control over the widgets is possible at the moment we are doing an inline way of using a data$ but if we wanted to read in a css file we could easily make adjustments without having to recompile the code numerous times while developing and as the code grows in line numbers having css files would make it easy to make fixes on the surface this all seems like a pain to get started with mostly because the gtk people have good ideas but they are terrible at posting working snippets (a road map to get there) a true story one example a friend (in Mexico) invited me to party and gave me a terrible map (at the last moment ) to get to the party he provided good food and music and and nice place but we spent two hours looking for the party got tired looking for the party and went home empty moral of the story I won't go anywhere without clear directions again I try to apply that idea to coding the simple getting started widgets too at the moment it all looks too close to C but this is just to get things working during the testing phase later we will port all this to HUG3 syntax Joe
|
|
|
Post by vovchik on Aug 27, 2014 15:43:27 GMT 1
Dear Joe, Thanks. You are right about simple and clear instructions - the GTK guys didn't really explain all of this and we are putting the bits together ourselves. It just might be a good idea to read in a css - or at least to have that possibility. I have another (more sensible) demo here of a Mac-like button, at normal size. It looks pretty easy to theme widgets this way, once we get the hang of it. ' Ported example cssbutton2.c ' to BaCon and modded - vovchik - with gradients (OSX aqua style) ' http://stackoverflow.com/questions/8946936/gtk3-css-button-states
' *********************** ' COMPILER DIRECTIVES ' ***********************
PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0` PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0` OPTION PARSE FALSE
' *********************** ' END COMPILER DIRECTIVES ' ***********************
' *********************** ' INITIALIZTION ' ***********************
DECLARE *window TYPE void DECLARE *button TYPE void CONST GTK_WINDOW_TOPLEVEL = 0 CONST GTK_ALIGN_CENTER = 3 ALIAS gtk_main TO DISPLAY ' for CSS DECLARE provider TYPE void* DECLARE display TYPE void* DECLARE screen TYPE void* CONST GTK_STYLE_PROVIDER_PRIORITY_FALLBACK = 1 CONST GTK_STYLE_PROVIDER_PRIORITY_THEME = 200 CONST GTK_STYLE_PROVIDER_PRIORITY_SETTINGS = 400 CONST GTK_STYLE_PROVIDER_PRIORITY_APPLICATION = 600 CONST GTK_STYLE_PROVIDER_PRIORITY_USER = 800
' *********************** ' END INITIALIZTION ' ***********************
' *********************** ' END INITIALIZTION ' ***********************
' *********************** ' SUBS & FUNCTIONS ' ***********************
' ------------------ SUB CLOSE_WINDOW() ' ------------------ gtk_main_quit() END SUB
' ------------------ SUB MK_GUI() ' ------------------ LOCAL data$ TYPE STRING grad$ = CONCAT$( \ "GtkWindow {", NL$, \ "background-image: -gtk-gradient ", \ " (linear, 0 0, 0 1, " \ "color-stop(0, aqua), " \ "color-stop(1, black)); ", \ NL$, "} ", NL$) data$ = CONCAT$( grad$, \ " GtkButton {\n" \ " -GtkWidget-focus-line-width: 0px;\n" \ " border-radius: 20px;\n" \ " font: Sans 10;\n" \ " color: black;\n" \ " text-shadow: 2.3px -1.5px #fafafa;" \ " opacity: 0.95;\n" \ " background-image: -gtk-gradient " \ " (linear, 0 0, 0 1, " \ " color-stop(1, black), " \ " color-stop(0.5, #e9e9e9), " \ " color-stop(0, dimgray)); ", \ "}\n" \ " .button:hover:active {\n" \ " background-color: red;\n" \ " background-image: -gtk-gradient " \ " (linear, 0 0, 0 1, " \ " color-stop(1, black), " \ " color-stop(0.5, #e9e9e9), " \ " color-stop(0, dimgray)); ", \ " font: Sans Bold 11;\n" \ " opacity: 0.95;\n" \ " color: dimgray;\n" \ "}\n" \ " .button:hover {\n" \ " background-image: -gtk-gradient " \ " (linear, 0 0, 0 1, " \ " color-stop(1, black), " \ " color-stop(0.5, #e9e9e9), " \ " color-stop(0, dimgray)); ", \ " opacity: 0.95;\n" \ " font: Sans Bold 10;\n" \ " color: red;\n" \ "}\n") gtk_init (0,0) window = gtk_window_new (GTK_WINDOW_TOPLEVEL) gtk_window_set_default_size(window, 150, 100) gtk_window_set_title(window, "Aqua") g_signal_connect_data(window, "delete-event", CLOSE_WINDOW, 0, 0, 0) button = gtk_button_new_with_label("CSS Button") gtk_widget_set_halign(button, GTK_ALIGN_CENTER) gtk_widget_set_valign(button, GTK_ALIGN_CENTER) gtk_widget_set_size_request(button, 110, 35) gtk_container_add(window, button) provider = gtk_css_provider_new() display = gdk_display_get_default() screen = gdk_display_get_default_screen(display) gtk_style_context_add_provider_for_screen (screen, provider, \ GTK_STYLE_PROVIDER_PRIORITY_USER) gtk_css_provider_load_from_data (provider, data$, -1, NULL) g_object_unref (provider) gtk_widget_show_all(window) END SUB
' *********************** ' END SUBS & FUNCTIONS ' ***********************
' *********************** ' MAIN ' ***********************
MK_GUI() DISPLAY
' *********************** ' END MAIN ' ***********************
With kind regards, vovchik
|
|
|
Post by vovchik on Aug 27, 2014 18:46:32 GMT 1
Dear All, And here are some css-styled buttons actually in use...along with Joe's HUG3. With kind regards, vovchik UPDATED: Now with styled tooltips, too.
|
|