{"id":2271,"date":"2015-10-29T20:50:11","date_gmt":"2015-10-29T20:50:11","guid":{"rendered":"https:\/\/raspberry-projects.com\/pi\/?p=2271"},"modified":"2020-03-27T17:53:39","modified_gmt":"2020-03-27T17:53:39","slug":"gtkbutton-general","status":"publish","type":"post","link":"https:\/\/raspberry-projects.com\/pi\/programming-in-c\/gui-programming-in-c\/gtk\/button-gtkbutton\/gtkbutton-general","title":{"rendered":".GtkButton General"},"content":{"rendered":"\n<p><strong><span style=\"color: #b22222;\"><em>EventBox Image based buttons can be a simpler approach to buttons based on an image! &nbsp;See <a href=\"https:\/\/raspberry-projects.com\/pi\/programming-in-c\/gui-programming-in-c\/gtk\/button-eventbox-image\/eventbox-image-button-general\">here<\/a>.<\/em><\/span><\/strong><\/p>\n\n\n\n<p>GtkButtons&nbsp;should be great, but they can be a right pain.&nbsp; Its like they got sort of implemented but without being polished off to allow them to be easily customised and made sexy. &nbsp;The&nbsp;documentation is basic and there seems to be little in the way of good user created guides out there to help.&nbsp; If they do what you want then great, but watch out if&nbsp;you want to change them.&nbsp; We tried to use them as a simple image based button &#8211; i.e. we wanted our own image and the button to just be a button showing our image. &nbsp;The problem was there&#8217;s a big border that gets added round the button that looks awful and whilst you can get rid of it in the normal state, it appears in the mouse hover state and there&#8217;s no simple&nbsp;property to just kill it. Also the button gets highlighted and again no simple&nbsp;property to kill that. &nbsp;After ages of trying to get it to behave we decided to just dump it and use image based buttons&nbsp;instead as that&#8217;s what we wanted, but here&#8217;s where we got to&#8230;.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Button based on an image that changes when pressed<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>\tGtkWidget *button_down;\n\tGtkWidget *image_down;\n\n\t\/\/----- DOWN BUTTON -----\n\tbutton_down = gtk_button_new();\n\tgtk_button_set_relief(GTK_BUTTON(button_down), GTK_RELIEF_NONE);\t\t\t\t\t\t\/\/No border\n\tgtk_button_set_focus_on_click(GTK_BUTTON(button_down), false);\t\t\t\t\t\t\t\/\/Don't take focus when clicked\n\tgtk_button_set_always_show_image(GTK_BUTTON(button_down), true);\n\timage_down = gtk_image_new_from_file(\"\/home\/pi\/projects\/ui\/button_down_a.png\");\n\tgtk_button_set_image(GTK_BUTTON(button_down), image_down);\n\t\/\/gtk_widget_set_size_request(button_down, 68, 68);\t\t\t\/\/Will be image size by default, but you can force the widget to be either larger or smaller than it normally would be using this\n\tgtk_fixed_put(GTK_FIXED(fixed), button_down, 20, 40);\t\t\/\/x, y from top left\n\n\t\/\/----- SET THE EVENTS TO BE CALLED ----- \n\tg_signal_connect(G_OBJECT(button_down), \"pressed\", G_CALLBACK(button_press_event), NULL);\t\t\/\/(\"pressed\" must not be changed)\n\tg_signal_connect(G_OBJECT(button_down), \"released\", G_CALLBACK(button_release_event), NULL);\t\/\/Include if released event is required. (\"released\" must not be changed)<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/***********************************************\n\/\/***********************************************\n\/\/********** A BUTTON HAS BEEN PRESSED **********\n\/\/***********************************************\n\/\/***********************************************\ngboolean button_press_event (GtkWidget *widget, GdkEvent  *event, gpointer user_data)\n{\n\tif (widget == button_down)\n\t{\n\t\timage_down = gtk_image_new_from_file(\"\/home\/pi\/projects\/ui\/button_down_b.png\");\n\t\tgtk_button_set_image(GTK_BUTTON(button_down), image_down);\n\t}\n\t\n\treturn FALSE;\t\t\t\t\t\t\t\/\/Return false so event will be called again\n}\n\n\n\/\/************************************************\n\/\/************************************************\n\/\/********** A BUTTON HAS BEEN RELEASED **********\n\/\/************************************************\n\/\/************************************************\ngboolean button_release_event (GtkWidget *widget, GdkEvent  *event, gpointer   user_data)\n{\n\tif (widget == button_down)\n\t{\n\t\timage_down = gtk_image_new_from_file(\"\/home\/pi\/projects\/ui\/button_down_a.png\");\n\t\tgtk_button_set_image(GTK_BUTTON(button_down), image_down);\n\t}\n\t\n\treturn FALSE;\t\t\t\t\t\t\t\/\/Return false so event will be called again\n}<\/code><\/pre>\n\n\n\n<p>All good to here, except when you run the app&nbsp;the bloody border and hightlight&nbsp;appears when you mouse over the button. &nbsp;The only fix appears to be to get at the button css. &nbsp;The below is where we got to, its not fixed but it demonstrates getting at the css successfully &#8211; just needs the right css adding to kill the highlight and border. &nbsp;Is there a nice simple page to tell you the css properties to use&#8230;&#8230;not that we could find unfortunatly<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\t\/\/Style the button\n\tGtkStyleContext *context = gtk_widget_get_style_context(button_down);\n\tGtkCssProvider *provider = gtk_css_provider_new ();\n\tgtk_css_provider_load_from_data (GTK_CSS_PROVIDER(provider),\n\t\t\t\t\t\t\t\t\" GtkWindow {\\n\"                          \n\t\t\t\t\t\t\t\t\"   background-color: tan;\\n\"\n\t\t\t\t\t\t\t\t\"}\\n\"\n\t\t\t\t\t\t\t\t\" GtkButton {\\n\"\n\t\t\t\t\t\t\t\t\"   -GtkWidget-focus-line-width: 0;\\n\"\n\t\t\t\t\t\t\t\t\"   border-radius: 15;\\n\"\n\t\t\t\t\t\t\t\t\"   font: Sans 23;\\n\"\n\t\t\t\t\t\t\t\t\"   color: #00008B;\\n\"                                       \n\t\t\t\t\t\t\t\t\"   background-color: green;\\n\"\n\t\t\t\t\t\t\t\t\"}\\n\"\n\t\t\t\t\t\t\t\t\" .button:hover {\\n\"\n\t\t\t\t\t\t\t\t\"   background-color: red;\\n\"\n\t\t\t\t\t\t\t\t\"   color: white;\\n\"\n\t\t\t\t\t\t\t\t\"}\\n\"\n\t\t\t\t\t\t\t\t\" .button:hover:active {\\n\"\n\t\t\t\t\t\t\t\t\"   background-color: orange;\\n\"\n\t\t\t\t\t\t\t\t\"   color: cyan;\\n\"\n\t\t\t\t\t\t\t\t\"}\\n\", -1, NULL);\n\tgtk_style_context_add_provider(context, GTK_STYLE_PROVIDER(provider), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Delete a button<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>\t\t\tgtk_widget_destroy(btnButtonTimerUp);\n\t\t\tbtnButtonTimerUp = NULL;<\/code><\/pre>\n\n\n\n<p>When a widget is destroyed, it will break any references it holds to other objects. &nbsp;You can safely used destroy on a widget that hasn&#8217;t actaully been displayed yet. &nbsp;You can re-create and place the widget again later after it has previously been destroyed, you&#8217;re just removing its current usage.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>EventBox Image based buttons can be a simpler approach to buttons based on an image! &nbsp;See here. GtkButtons&nbsp;should be great, but they can be a right pain.&nbsp; Its like they got sort of implemented but without being polished off to allow them to be easily customised and made sexy. &nbsp;The&nbsp;documentation is basic and there seems [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[106],"tags":[],"class_list":["post-2271","post","type-post","status-publish","format-standard","hentry","category-button-gtkbutton"],"_links":{"self":[{"href":"https:\/\/raspberry-projects.com\/pi\/wp-json\/wp\/v2\/posts\/2271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/raspberry-projects.com\/pi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/raspberry-projects.com\/pi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/raspberry-projects.com\/pi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/raspberry-projects.com\/pi\/wp-json\/wp\/v2\/comments?post=2271"}],"version-history":[{"count":14,"href":"https:\/\/raspberry-projects.com\/pi\/wp-json\/wp\/v2\/posts\/2271\/revisions"}],"predecessor-version":[{"id":3165,"href":"https:\/\/raspberry-projects.com\/pi\/wp-json\/wp\/v2\/posts\/2271\/revisions\/3165"}],"wp:attachment":[{"href":"https:\/\/raspberry-projects.com\/pi\/wp-json\/wp\/v2\/media?parent=2271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/raspberry-projects.com\/pi\/wp-json\/wp\/v2\/categories?post=2271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/raspberry-projects.com\/pi\/wp-json\/wp\/v2\/tags?post=2271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}