Google Ads

January 31, 2019

Create a stylish button in GTK+ (Custom widget creation)

Often times we want to create our own form of buttons and widgets when using widget libraries such as GTK+. Although, we could achieve this by creating theme files but sometimes it is just easier to implement such widget using drawing routines available. In this tutorial, I am going to show you how to create a stylish button in GTK+ by not using widget provided button but by using drawing routines available for GTK+ library like shown below:




First, we create four png images for the button for hover, normal, pressed states and mask. We are going to use Cairo library for drawing our button state images into its container. All the functions required for creating this button are part of Standard GTK+ 2 package, so no external dependencies! for the button creation.

Second, we load button png images using cairo_image_surface_create_from_png function.

Third, we prepare a mask for the button as the button can have any shape where some parts of the button are transparent. We create a pixmap as button mask using gdk_pixmap_new function and format the mask according to mask png file using Cairo drawing functions. Our style button contain would be a GTK+ drawing widget. Finally, we set the mask using gtk_widget_shape_combine_mask function.

Fourth, we have to be able to update the button look according to its state which is achieved by connecting different signals to button container and updating button state variable in the signals callback functions and finally drawing the button images using Cairo functions. The callbacks functions can also be used for achieving normal button operations.

That's it!

Download the tutorial files from the following link:

gtk_style_button.zip

4 comments:

  1. We interactively display visualizations on any device. Downloading large data is avoided with thin computing-style delivery model. Bandwidth and latency limitations are overcome through patented interactive remote visualization over Internet. The knowledge within enormous data is unleashed using A.I. on proprietary supercomputing cloud infrastructure. Graphics Processing Unit (GPU): Supercomputing Power at Fraction of the Cost. Internet latency issues remain the challenging factor for the growth, that in order for cloud gaming to work, a gamer has to be close in proximity to the server that serves the content. With our patents and technologies, this limitation is eliminated allowing secure and fast access to gaming contents.

    Interactive Streaming AI Platform RIS PACS

    ReplyDelete
  2. LifeVoxel.AI platform helps imaging diagnostic centers and hospitals to save up to 50%+ over conventional RIS PACS with higher functionality. LifeVoxel.AI is the fastest RIS PACS available globally and have unimaginable capabilities of centralized PACS across all your network of Imaging Centers to single window HUB.

    RIS PACS
    RIS PACS software

    ReplyDelete
  3. I can not down load the file:gtk_style_button.zip
    Is the link available now?

    ReplyDelete
    Replies
    1. Hi, the download server sometimes becomes non operational for a day or two due to maintenance purposes, please try the link again.

      Delete