Just For Fun：闲来无事，C语言+GTK生成mnist数据集的图形用户界面GUI

这几天心血来潮，想看看DL和CNN，于是乎在GitHub上搜了搜，好多数字识别的CNN，但是无一例外都需要mnist数据集，但是一般的数据集都是二进制binary的基本看不了。所以我就试着写了一个生成二进制float文件的GTK-GUI，希望对大家有个参考价值，也给自己做个备份。

还是老样子，先上代码：

/*GTK drawing ,output binary file for CNN or DeepLearning and so on.
*
*          I just modify Peter Mattis's initial drawing code,
*                        Rong Tao 2018.03.18
*
*   first code as following discription:
**/

/* GTK - The GIMP Toolkit
* Copyright (C) 1995-1997 Peter Mattis, Spencer Kimball and Josh MacDonald
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 2 of the License, or (at your option) any later version.
*
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.   See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public
* License along with this library; if not, write to the
* Free Software Foundation, Inc., 59 Temple Place - Suite 330,
* Boston, MA 02111-1307, USA.
*/
/*
* Modified by the GTK+ Team and others 1997-2000.   See the AUTHORS
* file for a list of people on the GTK+ Team.   See the ChangeLog
* files for a list of changes.   These files are distributed with
* GTK+ at ftp://ftp.gtk.org/pub/gtk/. 
*/

#include <stdio.h>
#include <stdlib.h>
#include <gtk/gtk.h>

/* main window */
static GtkWidget *window = NULL;
/* Backing pixmap for drawing area */
static GdkPixmap *pixmap = NULL;
/* Information about cursor */
static gint cursor_proximity = TRUE;
static gdouble cursor_x;
static gdouble cursor_y;
/* Unique ID of current device */
static GdkDevice *current_device;

static const int width = 64;
static const int height = 64;
static const int offset=1;
static const int windowWidth = 300;
static const int windowHeight = 300;
static const char *filename = "binary";
static float *array ;

/* Erase the old cursor, and/or draw a new one, if necessary */
static void update_cursor (GtkWidget *widget,   gdouble x, gdouble y)
{
    static gint cursor_present = 0;
    gint state = !current_device->has_cursor && cursor_proximity;
    if (pixmap != NULL)
    {
        if (cursor_present && (cursor_present != state ||
            x != cursor_x || y != cursor_y))
        {
            gdk_draw_drawable (widget->window, widget->style->fg_gc[GTK_WIDGET_STATE (widget)],
                                pixmap,
                                cursor_x - 5, cursor_y - 5,
                                cursor_x - 5, cursor_y - 5, 10, 10);
        }
        cursor_present = state;
        cursor_x = x;
        cursor_y = y;
        if (cursor_present)
        {
            gdk_draw_rectangle (widget->window, widget->style->black_gc, TRUE,
                                cursor_x - 5, cursor_y -5, 10, 10);
        }
    }
}
/* Create a new backing pixmap of the appropriate size */
static gint configure_event (GtkWidget *widget, GdkEventConfigure *event)
{
    if (pixmap)
        g_object_unref (pixmap);
    pixmap = gdk_pixmap_new(widget->window, widget->allocation.width,
                            widget->allocation.height, -1);
    gdk_draw_rectangle (pixmap, widget->style->white_gc, TRUE, 0, 0,
                        widget->allocation.width,
                        widget->allocation.height);
    return TRUE;
}
/* Refill the screen from the backing pixmap */
static gint expose_event (GtkWidget *widget, GdkEventExpose *event)
{
    gdk_draw_drawable (widget->window,
        widget->style->fg_gc[GTK_WIDGET_STATE (widget)],
        pixmap,
        event->area.x, event->area.y,
        event->area.x, event->area.y,
        event->area.width, event->area.height);
    return FALSE;
}
/* Draw a rectangle on the screen, size depending on pressure,
    and color on the type of device */
static void draw_brush (GtkWidget *widget, GdkInputSource source,
                        gdouble x, gdouble y, gdouble pressure)
{
    GdkGC *gc;
    GdkRectangle update_rect;
    switch (source)
    {
        case GDK_SOURCE_MOUSE:
            gc = widget->style->dark_gc[GTK_WIDGET_STATE (widget)];
            break;
        case GDK_SOURCE_PEN:
            gc = widget->style->black_gc;
            break;
        case GDK_SOURCE_ERASER:
            gc = widget->style->white_gc;
            break;
        default:
            gc = widget->style->light_gc[GTK_WIDGET_STATE (widget)];
    }
    
    int ix =(int)( ((((int)x)%windowWidth)*1.0/(windowWidth*1.0)*width));
    int iy =(int)( ((((int)y)%windowHeight)*1.0/(windowHeight*1.0)*height));
    
    int i,j;
    for(i=ix-offset;i<ix+offset;i++){
        for(j=iy-offset;j<iy+offset;j++){
            if(i>=0&&i<width&&j>=0&&j<height){

                array[i*height + j] = 1.0;
            }
        }
    }
    
    update_rect.x = x - 10 * pressure;
    update_rect.y = y - 10 * pressure;
    update_rect.width = 20 * pressure;
    update_rect.height = 20 * pressure;
    gdk_draw_rectangle (pixmap, gc, TRUE,
                        update_rect.x, update_rect.y,
                        update_rect.width, update_rect.height);
    gtk_widget_queue_draw_area (widget,
                        update_rect.x, update_rect.y,
                        update_rect.width, update_rect.height);
    gdk_window_process_updates (widget->window, TRUE);
}
static guint32 motion_time;
static void print_axes (GdkDevice *device, gdouble *axes)
{
    int i;
  
    if (axes)
    {
        g_print ("%s ", device->name);
      
        for (i=0; i<device->num_axes; i++)
            g_print ("%g ", axes[i]);
        g_print ("\n");
    }
}
static gint button_press_event (GtkWidget *widget, GdkEventButton *event)
{
    current_device = event->device;
    cursor_proximity = TRUE;
    if (event->button == 1 && pixmap != NULL)
    {
        gdouble pressure = 0.5;
        print_axes (event->device, event->axes);
        gdk_event_get_axis ((GdkEvent *)event, GDK_AXIS_PRESSURE, &pressure);
        draw_brush (widget, event->device->source, event->x, event->y, pressure);
      
        motion_time = event->time;
    }
    update_cursor (widget, event->x, event->y);
    return TRUE;
}
static gint key_press_event (GtkWidget *widget, GdkEventKey *event)
{
    if ((event->keyval >= 0x20) && (event->keyval <= 0xFF))
        printf("I got a %c\n", event->keyval);
    else
        printf("I got some other key\n");
    return TRUE;
}
static gint motion_notify_event (GtkWidget *widget, GdkEventMotion *event)
{
    GdkTimeCoord **events;
    int n_events;
    int i;
    current_device = event->device;
    cursor_proximity = TRUE;
    if (event->state & GDK_BUTTON1_MASK && pixmap != NULL)
    {
        if (gdk_device_get_history (event->device, event->window, 
                motion_time, event->time, &events, &n_events))
        {
            for (i=0; i<n_events; i++)
            {
                double x = 0, y = 0, pressure = 0.5;
                gdk_device_get_axis (event->device, events[i]->axes, GDK_AXIS_X, &x);
                gdk_device_get_axis (event->device, events[i]->axes, GDK_AXIS_Y, &y);
                gdk_device_get_axis (event->device, events[i]->axes, GDK_AXIS_PRESSURE, &pressure);
                draw_brush (widget,   event->device->source, x, y, pressure);
                print_axes (event->device, events[i]->axes);
            }
            gdk_device_free_history (events, n_events);
        }
        else
        {
            double pressure = 0.5;
            gdk_event_get_axis ((GdkEvent *)event, GDK_AXIS_PRESSURE, &pressure);
            draw_brush (widget,   event->device->source, event->x, event->y, pressure);
        }
        motion_time = event->time;
    }
    if (event->is_hint)
        gdk_device_get_state (event->device, event->window, NULL, NULL);
    print_axes (event->device, event->axes);
    update_cursor (widget, event->x, event->y);
    return TRUE;
}
/* We track the next two events to know when we need to draw a cursor */
static gint proximity_out_event (GtkWidget *widget, GdkEventProximity *event)
{
    cursor_proximity = FALSE;
    update_cursor (widget, cursor_x, cursor_y);
    return TRUE;
}
static gint leave_notify_event (GtkWidget *widget, GdkEventCrossing *event)
{
    cursor_proximity = FALSE;
    update_cursor (widget, cursor_x, cursor_y);
    return TRUE;
}
void input_dialog_destroy (GtkWidget *w, gpointer data)
{
    *((GtkWidget **)data) = NULL;
}

void create_output_dialog (void)
{
    GtkWidget *dialog;
    static gint saveCount = 1;

    dialog = gtk_message_dialog_new (GTK_WINDOW (window),
				   GTK_DIALOG_MODAL | GTK_DIALOG_DESTROY_WITH_PARENT,
				   GTK_MESSAGE_INFO,
				   GTK_BUTTONS_OK,
				   "Panel save as file: \"binary\"\n" );
    gtk_message_dialog_format_secondary_text (GTK_MESSAGE_DIALOG (dialog),
                                            "number of times: %d\n"\
                                            "please use ./ximage to\n"\
                                            "the binary file to image\n"\
                                            "  run ./ximage for help\n", saveCount);
    gtk_dialog_run (GTK_DIALOG (dialog));
    gtk_widget_destroy (dialog);

    FILE *fp = fopen(filename,"wb");
    fwrite(array,sizeof(float),width*height,fp);
    fclose(fp);

    saveCount++;
}

void quit (void) { gtk_main_quit (); }

int main (int argc, char *argv[])
{
    array= (float*)malloc(sizeof(float)*width*height);
    int i;
    for(i=0;i<width*height;i++)
        array[i] = 0.0;


    GtkWidget *drawing_area;
    GtkWidget *vbox;
    GtkWidget *button;
    gtk_init (&argc, &argv);
    current_device = gdk_device_get_core_pointer ();
    window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
    gtk_widget_set_name (window, "Test Input");

    gtk_widget_set_size_request(window , windowWidth , windowHeight+50);
    gtk_container_set_border_width(GTK_CONTAINER(window) , 2);
    gtk_window_set_resizable(GTK_WINDOW(window) , FALSE);

    vbox = gtk_vbox_new (FALSE, 0);
    gtk_container_add (GTK_CONTAINER (window), vbox);
    gtk_widget_show (vbox);
    g_signal_connect (window, "destroy",
       G_CALLBACK (quit), NULL);
    /* Create the drawing area */
    drawing_area = gtk_drawing_area_new ();
    gtk_widget_set_size_request (drawing_area, windowWidth, windowHeight);
    gtk_box_pack_start (GTK_BOX (vbox), drawing_area, TRUE, TRUE, 0);
    gtk_widget_show (drawing_area);
    /* Signals used to handle backing pixmap */
    g_signal_connect (drawing_area, "expose_event",
                    G_CALLBACK (expose_event), NULL);
    g_signal_connect (drawing_area, "configure_event",
                    G_CALLBACK (configure_event), NULL);
    /* Event signals */
    g_signal_connect (drawing_area, "motion_notify_event",
                    G_CALLBACK (motion_notify_event), NULL);
    g_signal_connect (drawing_area, "button_press_event",
                    G_CALLBACK (button_press_event), NULL);
    g_signal_connect (drawing_area, "key_press_event",
                    G_CALLBACK (key_press_event), NULL);
    g_signal_connect (drawing_area, "leave_notify_event",
                    G_CALLBACK (leave_notify_event), NULL);
    g_signal_connect (drawing_area, "proximity_out_event",
                    G_CALLBACK (proximity_out_event), NULL);
    gtk_widget_set_events (drawing_area, GDK_EXPOSURE_MASK
                    | GDK_LEAVE_NOTIFY_MASK
                    | GDK_BUTTON_PRESS_MASK
                    | GDK_KEY_PRESS_MASK
                    | GDK_POINTER_MOTION_MASK
                    | GDK_POINTER_MOTION_HINT_MASK
                    | GDK_PROXIMITY_OUT_MASK);
    /* The following call enables tracking and processing of extension
        events for the drawing area */
    gtk_widget_set_extension_events (drawing_area, GDK_EXTENSION_EVENTS_ALL);
    GTK_WIDGET_SET_FLAGS (drawing_area, GTK_CAN_FOCUS);
    gtk_widget_grab_focus (drawing_area);
    /* .. And create some buttons */
    button = gtk_button_new_with_label ("OutputBinary");
    gtk_box_pack_start (GTK_BOX (vbox), button, FALSE, FALSE, 0);
    g_signal_connect (button, "clicked", G_CALLBACK (create_output_dialog), NULL);
    gtk_widget_show (button);
    button = gtk_button_new_with_label ("Quit");
    gtk_box_pack_start (GTK_BOX (vbox), button, FALSE, FALSE, 0);
    g_signal_connect_swapped (button, "clicked", G_CALLBACK (gtk_widget_destroy), window);
    gtk_widget_show (button);
    gtk_widget_show (window);


    gtk_main ();
    return 0;
}

Makefile内容如下：

gtk=`pkg-config --cflags --libs gtk+-2.0`
CC=gcc
IFILE=drawArea.c
ALL:
	$(CC) $(IFILE) $(gtk) 
	./a.out 

然后跳出GUI界面，通过单击鼠标进行手写：

         

然后用CWP的指令ximage显示这个生成的二进制文件“binary”：

$ ximage < binary n1=64 perc=99

下面给出一些其他的例子：