How to draw in a GTK3 area with scroll bars - c

Question

I am building a nested GTK application:
There is GtkNotebook - GtkGrid - GtkGrid - GtkFrame - GtkDrawingArea.
In GtkDrawingArea (I fix the size through a size request) I create drawings and I have built the possibility to zoom via the scroll wheel.
Logically, when I 'zoom in' the surface becomes bigger and scroll bars are needed to view the whole drawing.
How can I get these? I tried GtkLayout and GtkSrolledWindow in different combinations but they didn't work. I haven't found any useful example on the Internet.
What's the way to get a scrollable drawing area?
Where should I start to dig in? Any hints are very appreciated!
Thank you.
BTW: I am using Debian, GTK3, C and Cairo
MCVE: I created this example. It draws a rectangle and you can zoom it by using your scroll wheel. This happens within a 300x300 frame. I'd like to have this frame with scrollbars. Any ideas how to do this?
This code can be compiled by using
gcc `pkg-config --cflags gtk+-3.0` -lm -o cf cf.c `pkg-config --libs gtk+-3.0`
cf.c:
#include <stdio.h>
#include <stdlib.h>
#include <math.h>
#include <string.h>
#include <ctype.h>
#include <gtk/gtk.h>
#define ZOOMING_STEP 1.2
typedef struct m_data
{
double scaling_factor;
cairo_surface_t *circle_surface_p, *final_surface_p;
GtkWidget *window_p;
} m_data_struct;
static void activate(GtkApplication *, gpointer);
static gboolean zoom_it(GtkWidget *, GdkEvent *, gpointer);
static gboolean configure_it(GtkWidget *, GdkEventConfigure *, gpointer);
static gboolean draw_it(GtkWidget *, cairo_t *, gpointer);
int main(int argc, char **argv)
{
GtkApplication *app_p;
m_data_struct my_data;
int status;
my_data.scaling_factor = 1.0/11.0;
my_data.final_surface_p = NULL;
app_p = gtk_application_new("calc.foil", G_APPLICATION_FLAGS_NONE);
g_signal_connect(app_p, "activate", G_CALLBACK(activate), &my_data);
status = g_application_run(G_APPLICATION(app_p), 0, NULL);
g_object_unref(app_p);
}
static void activate(GtkApplication *app_p, gpointer g_data_p)
{
GtkWidget *frame_p, *notebook_p, *grid0_p, *grid1_p, *drawing_area_p;
m_data_struct *my_data_p;
cairo_t *cr_p;
my_data_p = (m_data_struct *)g_data_p;
my_data_p->window_p = gtk_application_window_new(app_p);
gtk_window_set_title(GTK_WINDOW(my_data_p->window_p), "Fot Calculation");
gtk_container_set_border_width(GTK_CONTAINER(my_data_p->window_p), 8);
notebook_p = gtk_notebook_new();
gtk_container_add(GTK_CONTAINER(my_data_p->window_p), notebook_p);
grid0_p = gtk_grid_new();
gtk_notebook_append_page(GTK_NOTEBOOK(notebook_p), grid0_p,
gtk_label_new("First Tab"));
grid1_p = gtk_grid_new();
gtk_grid_attach(GTK_GRID(grid0_p), grid1_p, 2, 2, 2, 50);
frame_p = gtk_frame_new("Rectangle");
drawing_area_p = gtk_drawing_area_new();
gtk_widget_set_size_request(frame_p, 300, 300);
g_signal_connect(drawing_area_p, "configure-event",
G_CALLBACK(configure_it), g_data_p);
g_signal_connect(drawing_area_p, "draw", G_CALLBACK(draw_it), g_data_p);
g_signal_connect(drawing_area_p, "scroll-event", G_CALLBACK(zoom_it),
g_data_p);
gtk_widget_set_events(drawing_area_p,
gtk_widget_get_events(drawing_area_p)
| GDK_SCROLL_MASK);
gtk_container_add(GTK_CONTAINER(frame_p), drawing_area_p);
gtk_grid_attach(GTK_GRID(grid1_p), frame_p, 1, 0, 1, 2);
my_data_p->circle_surface_p
= cairo_image_surface_create(CAIRO_FORMAT_ARGB32, 3000, 3000);
cr_p = cairo_create(my_data_p->circle_surface_p);
cairo_set_line_width(cr_p, 10);
cairo_rectangle(cr_p, 100, 100, 2900, 2900);
cairo_set_source_rgb(cr_p, 0, 0, 0);
cairo_stroke(cr_p);
gtk_widget_show_all(my_data_p->window_p);
}
static gboolean zoom_it(GtkWidget *widget_p,
GdkEvent *event_p,
gpointer g_data_p)
{
if (((GdkEventScroll *)event_p)->direction == GDK_SCROLL_UP)
{
((m_data_struct *)g_data_p)->scaling_factor *= ZOOMING_STEP;
configure_it(widget_p, (GdkEventConfigure *)event_p, g_data_p);
gtk_widget_queue_draw(widget_p);
}
if (((GdkEventScroll *)event_p)->direction == GDK_SCROLL_DOWN)
{
((m_data_struct *)g_data_p)->scaling_factor /= ZOOMING_STEP;
configure_it(widget_p, (GdkEventConfigure *)event_p, g_data_p);
gtk_widget_queue_draw(widget_p);
}
return TRUE;
}
static gboolean configure_it(GtkWidget *widget_p,
GdkEventConfigure *event_p,
gpointer g_data_p)
{
cairo_t *cr_p;
m_data_struct * my_data_p;
my_data_p = (m_data_struct *)g_data_p;
if (my_data_p->final_surface_p)
cairo_surface_destroy(my_data_p->final_surface_p);
my_data_p->final_surface_p
= cairo_image_surface_create(CAIRO_FORMAT_ARGB32, 300, 300);
cr_p = cairo_create(my_data_p->final_surface_p);
cairo_scale(cr_p, my_data_p->scaling_factor, my_data_p->scaling_factor);
cairo_set_source_surface(cr_p, my_data_p->circle_surface_p, 0, 0);
cairo_paint(cr_p);
cairo_destroy(cr_p);
return TRUE;
}
static gboolean draw_it(GtkWidget *widget_p,
cairo_t *cr_p,
gpointer g_data_p)
{
cairo_set_source_surface(cr_p, ((m_data_struct *)g_data_p)->final_surface_p,
0, 0);
cairo_paint(cr_p);
return FALSE;
}

Answer 1

To produce a scrollable GTK drawing area (GtkDrawingArea) a scrolled window can be taken (GtkScrolledWindow). The drawing area is a child of the scrolled window (gtk_container_add).
However, to scroll the drawing area I need to specify its size every time it changes it (gtk_widget_set_size_request). And, of course, scrolling only makes sense if its size is bigger than the size of the scrolled window.
Finally I wanted to use the scroll wheel to zoom into my Cairo drawing. This only works well if the point under the mouse is fixed. So I needed to adjust the scrolled window (GtkAdjustment) not to have the drawing moved under the mouse. Unless when zooming out to the very low levels.
However I couldn't find out where these adjustments are set when the drawing areas are changed so I had to do it manually when zooming in.
I changed the example in a way that it's working now. The code is complete to run:
cf.c:
#include <stdio.h>
#include <stdlib.h>
#include <math.h>
#include <string.h>
#include <ctype.h>
#include <gtk/gtk.h>
#define ZOOMING_STEP 1.2
#define SCALING_FACTOR_INIT 1.0/10.0
typedef struct m_data
{
double scaling_factor;
cairo_surface_t *rectangle_surface_p, *final_surface_p;
GtkWidget *window_p, *drawing_area_p;
GtkAdjustment *hadjust_p, *vadjust_p;
} m_data_struct;
static void activate(GtkApplication *, gpointer);
static gboolean zoom_it(GtkWidget *, GdkEvent *, gpointer);
static gboolean configure_it(GtkWidget *, GdkEventConfigure *, gpointer);
static gboolean draw_it(GtkWidget *, cairo_t *, gpointer);
int main(int argc, char **argv)
{
GtkApplication *app_p;
m_data_struct my_data;
int status;
my_data.scaling_factor = SCALING_FACTOR_INIT;
my_data.final_surface_p = NULL;
app_p = gtk_application_new("calc.foil", G_APPLICATION_FLAGS_NONE);
g_signal_connect(app_p, "activate", G_CALLBACK(activate), &my_data);
status = g_application_run(G_APPLICATION(app_p), 0, NULL);
g_object_unref(app_p);
}
static void activate(GtkApplication *app_p, gpointer g_data_p)
{
GtkWidget *frame_p, *notebook_p, *grid0_p, *grid1_p, *drawing_area_p;
GtkWidget *scrolled_window_p, *frame0_p;
m_data_struct *my_data_p;
cairo_t *cr_p;
my_data_p = (m_data_struct *)g_data_p;
my_data_p->window_p = gtk_application_window_new(app_p);
gtk_window_set_title(GTK_WINDOW(my_data_p->window_p), "Fot Calculation");
gtk_container_set_border_width(GTK_CONTAINER(my_data_p->window_p), 8);
notebook_p = gtk_notebook_new();
gtk_container_add(GTK_CONTAINER(my_data_p->window_p), notebook_p);
grid0_p = gtk_grid_new();
gtk_notebook_append_page(GTK_NOTEBOOK(notebook_p), grid0_p,
gtk_label_new("First Tab"));
grid1_p = gtk_grid_new();
gtk_grid_attach(GTK_GRID(grid0_p), grid1_p, 2, 2, 2, 50);
frame_p = gtk_frame_new("Rectangle");
gtk_frame_set_shadow_type(GTK_FRAME(frame_p), GTK_SHADOW_NONE);
frame0_p = gtk_frame_new(NULL);
scrolled_window_p = gtk_scrolled_window_new(NULL, NULL);
my_data_p->hadjust_p
= gtk_scrolled_window_get_hadjustment(GTK_SCROLLED_WINDOW
(scrolled_window_p));
my_data_p->vadjust_p
= gtk_scrolled_window_get_vadjustment(GTK_SCROLLED_WINDOW
(scrolled_window_p));
drawing_area_p = gtk_drawing_area_new();
gtk_widget_set_size_request(scrolled_window_p, 300, 300);
g_signal_connect(drawing_area_p, "configure-event",
G_CALLBACK(configure_it), g_data_p);
g_signal_connect(drawing_area_p, "draw", G_CALLBACK(draw_it), g_data_p);
g_signal_connect(drawing_area_p, "scroll-event", G_CALLBACK(zoom_it),
g_data_p);
gtk_widget_set_events(drawing_area_p,
gtk_widget_get_events(drawing_area_p)
| GDK_SCROLL_MASK);
my_data_p->drawing_area_p = drawing_area_p;
gtk_scrolled_window_set_policy(GTK_SCROLLED_WINDOW(scrolled_window_p),
GTK_POLICY_AUTOMATIC, GTK_POLICY_AUTOMATIC);
gtk_container_add(GTK_CONTAINER(scrolled_window_p), drawing_area_p);
gtk_container_add(GTK_CONTAINER(frame_p), frame0_p);
gtk_container_add(GTK_CONTAINER(frame0_p), scrolled_window_p);
gtk_grid_attach(GTK_GRID(grid1_p), frame_p, 1, 0, 1, 2);
my_data_p->rectangle_surface_p
= cairo_image_surface_create(CAIRO_FORMAT_ARGB32, 3000, 3000);
cr_p = cairo_create(my_data_p->rectangle_surface_p);
cairo_set_line_width(cr_p, 50);
cairo_rectangle(cr_p, 100, 100, 1375, 1375);
cairo_rectangle(cr_p, 1525, 1525, 1375, 1375);
cairo_set_source_rgb(cr_p, 0, 0, 0);
cairo_stroke(cr_p);
gtk_widget_show_all(my_data_p->window_p);
}
static gboolean zoom_it(GtkWidget *widget_p,
GdkEvent *event_p,
gpointer g_data_p)
{
m_data_struct *my_data_p;
GdkEventScroll *this_event_p;
gdouble new_x, new_y;
int do_zoom = 0;
my_data_p = (m_data_struct *)g_data_p;
this_event_p = (GdkEventScroll *)event_p;
if (this_event_p->direction == GDK_SCROLL_UP)
{
my_data_p->scaling_factor *= ZOOMING_STEP;
gtk_adjustment_set_upper(my_data_p->hadjust_p,
gtk_adjustment_get_upper(my_data_p->hadjust_p)
* ZOOMING_STEP
+ 1); /* we need to calc the new upper
to set value, +1 for
inaccuracy */
gtk_adjustment_set_upper(my_data_p->vadjust_p,
gtk_adjustment_get_upper(my_data_p->vadjust_p)
* ZOOMING_STEP
+ 1);
new_x = this_event_p->x * ZOOMING_STEP;
new_y = this_event_p->y * ZOOMING_STEP;
do_zoom = 1;
}
if (this_event_p->direction == GDK_SCROLL_DOWN)
{
double sf;
sf = my_data_p->scaling_factor / ZOOMING_STEP;
if (sf >= SCALING_FACTOR_INIT / (1 + (ZOOMING_STEP - 1) / 2))
/* zoom out max till level 0 but
preventing inability not to zoom
to level 0 due to inaccurancy */
{
my_data_p->scaling_factor = sf;
new_x = this_event_p->x / ZOOMING_STEP;
new_y = this_event_p->y / ZOOMING_STEP;
do_zoom = 1;
}
}
if (do_zoom)
{
gtk_adjustment_set_value
(my_data_p->hadjust_p,
new_x
+ gtk_adjustment_get_value(my_data_p->hadjust_p)
- this_event_p->x);
gtk_adjustment_set_value
(my_data_p->vadjust_p,
new_y
+ gtk_adjustment_get_value(my_data_p->vadjust_p)
- this_event_p->y);
configure_it(widget_p, (GdkEventConfigure *)event_p, g_data_p);
gtk_widget_queue_draw(widget_p);
}
return TRUE;
}
static gboolean configure_it(GtkWidget *widget_p,
GdkEventConfigure *event_p,
gpointer g_data_p)
{
cairo_t *cr_p;
m_data_struct *my_data_p;
my_data_p = (m_data_struct *)g_data_p;
if (my_data_p->final_surface_p)
cairo_surface_destroy(my_data_p->final_surface_p);
my_data_p->final_surface_p
= cairo_image_surface_create(CAIRO_FORMAT_ARGB32,
3000 * my_data_p->scaling_factor,
3000 * my_data_p->scaling_factor);
gtk_widget_set_size_request(my_data_p->drawing_area_p,
3000 * my_data_p->scaling_factor,
3000 * my_data_p->scaling_factor);
cr_p = cairo_create(my_data_p->final_surface_p);
cairo_scale(cr_p, my_data_p->scaling_factor, my_data_p->scaling_factor);
cairo_set_source_surface(cr_p, my_data_p->rectangle_surface_p, 0, 0);
cairo_paint(cr_p);
cairo_destroy(cr_p);
return TRUE;
}
static gboolean draw_it(GtkWidget *widget_p,
cairo_t *cr_p,
gpointer g_data_p)
{
cairo_set_source_surface(cr_p, ((m_data_struct *)g_data_p)->final_surface_p,
0, 0);
cairo_paint(cr_p);
return FALSE;
}