My Project's GUI Improvement

,

Hello! It’s my first GTK project. I choose to create a Morse code translator. It consists of two entries and one button named “Translate”. Algorithm is pretty easy, but I have no ideas why grid moves. I thought it should be centered, so I ask you to help me with GUI improvement. What do you think?

Thank you for any help and ideas!

#include <gtk/gtk.h>
#include <string.h>
#include "morse_codes.h" // includes Morse codes

void translate_to_morse(const char*, char*); /* translates string */
void event_translate(GtkWidget*, gpointer);  /* output translated text */

int main(int argc, char **argv){
    gtk_init(&argc, &argv);

    GtkWidget *Window;
    GtkWidget *Button_translate;
    GtkWidget *Grid;
    GtkWidget *Entry_input, *Entry_output;

    Window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(Window), "Morse");
    gtk_window_set_resizable(GTK_WINDOW(Window), FALSE);
    gtk_window_set_default_size(GTK_WINDOW(Window), 300, 400);
    g_signal_connect(Window, "destroy", G_CALLBACK(gtk_main_quit), NULL);

    Grid = gtk_grid_new();
    gtk_container_add(GTK_CONTAINER(Window), Grid);

    Entry_input = gtk_entry_new();
    Entry_output = gtk_entry_new();

    GtkWidget *entries[2] = {
        Entry_input,
        Entry_output
    };


    Button_translate = gtk_button_new_with_label("Translate");
    g_signal_connect(Button_translate, "clicked", G_CALLBACK(event_translate), entries);

    gtk_grid_attach(GTK_GRID(Grid), Entry_input, 0, 0, 1, 1);
    gtk_grid_attach(GTK_GRID(Grid), Entry_output, 0, 1, 1, 1);
    gtk_grid_attach(GTK_GRID(Grid), Button_translate, 0, 2, 1, 1);

    gtk_widget_show_all(Window);
    gtk_main();
    return 0;
};
void event_translate(GtkWidget *Button, gpointer Data){
    GtkWidget **entries = (GtkWidget **) Data;
    GtkEntry *entry_input = GTK_ENTRY(entries[0]);
    GtkEntry *entry_output = GTK_ENTRY(entries[1]);

    const char *input_text = gtk_entry_get_text(entry_input);
    char output_text[1024];
    translate_to_morse(input_text, output_text);
    gtk_entry_set_text(entry_output, output_text);
}

Hi,

You can use the alignment properties to center the grid:

    gtk_widget_set_valign(Grid, GTK_ALIGN_CENTER);
    gtk_widget_set_halign(Grid, GTK_ALIGN_CENTER);

Note that you can also use a GtkBox instead of the GtkGrid, boxes have more flexibility regarding widgets allocation.

    Box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0);
    gtk_widget_set_valign(Box, GTK_ALIGN_CENTER);
    gtk_widget_set_halign(Box, GTK_ALIGN_CENTER);
    gtk_box_pack_start (GTK_BOX(Box), Entry_input, FALSE, TRUE, 0);
    gtk_box_pack_start (GTK_BOX(Box), Entry_output, FALSE, TRUE, 0);
    gtk_box_pack_start (GTK_BOX(Box), Button_translate, FALSE, TRUE, 0);
    gtk_container_add(GTK_CONTAINER(Window), Box);
1 Like

Outside of any improvement you may want to make, if you’re just now starting out with GTK, please use GTK4, not GTK3.

Well, I’d really like to. But I faced a problem. I use OpenSUSE as OS and VS Code as IDE. So I install gtk (version 3 and 4) via zypper but VS Code just doesn’t detect gtk-4.0 folder in the same include path as gtk-3.0. By the way it can easy detect gtk-3.0. I totally misunderstood that

Have you installed the “gtk4-devel” package?
(if you use YaST, you may have to select a checkbox in some menu to see devel packages)

Yes, I installed that (devel, tools). I’m sorry I don’t understand, could you please explain me what do you mean?

I rewrote (well I hope so) it with GTK4 (I used terminal to build it) and have a segmentation fault in function I used in the GTK3 version program.
Here I get data and initialize two entries (the algorithm is same)

GtkWidget **entries = (GtkWidget **)data;
GtkEntry *input_entry = GTK_ENTRY(entries[0]); // Here it is. It causes segmentation fault
GtkEntry *output_entry = GTK_ENTRY(entries[1]);

If you need more code, I can create a new topic.