how to reduce button size

wally67 · **Joined:** Mon Oct 29, 2012 1:30 pm **Posts:** 11

Good morning to everybody

Continuing with my gtk learning I'm trying to emulate spinbutton behaviour. It is not a "mental desease": spinbuttons work only with numbers (integer or float) and I would like use them to "move" more things, as date.

Because a spinbutton does not work with date I try to build a similar group of resources to do the same thing.
so I use 1 gtkentry and 2 gtkbutton (called + and - and placed in vertical position). it's me who has to manage signals and character parsing, but I'd like very much to have button as small as spinbutton's one.

I tryed to do it with glade but it seems to be impossible. Is there any trick to do this?

Thanks in advance
Wally

Paul Childs · **Posted:** Wed Dec 19, 2012 12:32 pm

Why would it not work as a date? Set the GtkAdjustment to be bound from 1-12 and you've got the months. Then signal connect based on changing months/year to adjust the adjustment for the day from 1-28/29/30 or 31 (year is needed to cover leap years/centuries). If you're wanting the month displayed as text then you can use a combobox.

Now for the really tricky bit. Date formats vary vastly according to locale. The standard for most of the world is DMY. China and a few other countries use YMD matching ISO8601, whereas USA, having to defy all forms of rational ordering in order to be different uses MDY. Some countries like Canada use different formats for different purposes.

If you want to continue down the custom widget path have a look at http://www.gtkforums.com/viewtopic.php?f=16&t=178048, where Kepica and Zerohour have a good example of playing around with the spin button that should help answer your question. Before doing so you might want to check out the tutorial on zetcode for custom widgets (http://zetcode.com/tutorials/gtktutorial/customwidget/) if you haven't done that sort of thing before. Don't bother with Glade. If you are making custom widgets then it is definitely time to leave Glade behind so you can focus on the nitty gritty aspects.

Of course there's always the simpler option of using GtkCalendar.

Oh and one final note is that the default widget set has in-built accessibility support which is often lost on making custom widgets. You could program that all in (I am currently awaiting GTK3.8 as it is busted in GTK3 so far) but it will all add up to a lot of work; though a very good learning exercise nonetheless.

wally67 · **Joined:** Mon Oct 29, 2012 1:30 pm **Posts:** 11

Hi paul, thanks for your help.

First of all I recognize i'm a little tired so I probably miss something you said.

anyway... you suggest different thing: GtkCalendar and link, but they work only with gtk3 and later, don't they? I need (for some reasons) to work with gtk2.

Using GtkAdjustment i can set only number, while I use a DD/MM/YY date rappresentation. If I understood your suggestion, I would need of 3 separated fields, while i would like use a single one.

As I said in first thread I'm starting to learn with gtk, and I'm using this program to learn more about it.

You suggest to abandon glade. perhaps you are right but at the moment I prefer to continue with it. Anyway, how could I do to resize button to reduce their size? if you can do it without use glade please tell me how to do.

As I said before, if my response seems "strange" is because i'm a little tired, sorry.

And thanks again for all your suggestions.

Wally

Paul Childs · **Posted:** Wed Dec 19, 2012 10:06 pm

Nothing seems strange really.

GtkCalendar has been around since 2.14 (though it picked up a new function or two with v3). I'd probably advise making use of it as to do it yourself will require quite a lot of coding (The source for GtkCalendar.c is 4000 lines long http://git.gnome.org/browse/gtk+/tree/gtk/gtkcalendar.c?h=gtk-2-24). Also means if you do port your code to gtk3 at some point, the calendar part will be the same.

Yes I was talking about three independent fields. As you mentioned up down buttons, I figured you'd want to adjust day month and year independently, which would need three sets of buttons and then three fields just to visually organise those buttons.

Another option is just to go with an entry and whenever it is updated call something like g_date_set_parse and g_date_valid to read from it and when you want to write to it use g_date_strftime.

Sizing for buttons is determined by how you pack them and using gtk_widget_set_size-request. If you have a stock up down item in them, then their size may vary with the OS theme, so watch out for that.

wally67 · **Joined:** Mon Oct 29, 2012 1:30 pm **Posts:** 11

hi paul, glad to have been "sensate" :-) (yesterday i was really a disaster...)

i'm happy to know gtkcalendar is availlable also in gtk2. for the moment I leave it in a drawer, i will use in the future

about your suggestion to use "something like g_date_set_parse and g_date_valid" i use gtkeditable - changed signal. is there any other signal i can use about it? this thing make me think to another question: how is possible to accept only number in a gtkentry field? is there any setting or have i to use "changed" signal yet?

about sizing for button: i used an hbox who contains a gtkentry and a vbuttonbox with 2 buttons
with gtkentry i was able to set dimensions using "width request" setting and "no expand" in the container
have i to change anything?

thanks about your help
wally

Paul Childs · **Posted:** Thu Dec 20, 2012 8:44 pm

You don't have to worry about only having numbers. After all some people might like to enter month names as text, not to mention slashes and other things that are often used in locale dependent ways. Just parse it, see if it is valid, and if not revert. The following is an example (haven't tested it so it likely won't run but hopefully will help start things moving):

Code:

gchar s[20];
...
void entry_cb(GtkEntry* entry, gpointer data)
{
  gchar* str;
  GDate* date;

  str=gtk_entry_get_text(entry);
  date=g_date_new();
  g_date_set_parse(date, str);
  if (g_date_valid(date)) g_snprintf(s, 20, "%s", str);
  else gtk_entry_set_text(entry, s);
  g_date_free(date);
  g_free(str);
}
...
int main...
{
  GDate* date;
  GtkWidget* entry;
  ...
  entry=gtk_entry_new();
  date=g_date_new();
  g_date_set_time_t (date, time (NULL));
  if (g_date_strftime(s, 20, "%x", date)) gtk_entry_set_text(GTK_ENTRY(entry), s);
  g_date_free(date);
  g_signal_connect(G_OBJECT(entry), "activate", G_CALLBACK(entry_cb), NULL);
  ...
}

Regarding sizing, you need to consider both horizontal and vertical dimensions. With the buttons stacked vertically you may want them to be flush with the top and bottom of the entry field in which case everything will need to be able to expand and fill vertically at least (the vbuttonbox may take care of this for you anyway). You probably are better putting it into a table which allows for more consistency of alignment (and future proofing as gtk3 is moving away from boxes) and letting the entry span two rows. If the containing boxes are expanding you may need to set up GtkAlignment containers to force the entry and buttons to be pushed up against each other.

wally67 · **Joined:** Mon Oct 29, 2012 1:30 pm **Posts:** 11

hi paul, thanks again for your help

i don't think to have problems to manage characters in a "on-change" callback. i knew a different way to manage data, different from that one you suggested (in mine i need to store the previous gtkentry value). but doing so don't i risk to loose cursor position? if is so it should be very boring try to write date ... (i'm thinking about what should happen if i type a wrong character: program eliminates the wrong but looses the entry position, so i have to repositioning the cursor to digit the rest of number)
what do you think about?

i'm not sure to had understood in the right way the part about botton sizing, but i can tell you i tryied to sizing the container then forcing "expand" and "fill" property, but nothing happened

if you want i can give you my glade code so you can see what i made

thanks again
wally

Paul Childs · **Posted:** Sat Dec 22, 2012 3:39 am

Ah no problem, though I might be a few days before my next response due to being mobbed by my kids on an excess of Christmas cheer/sugar.

I don't actually see a changed event for the entry. When you edit an entry there are often numerous discrete changes before it gets to a final state that is coherent. Most of these intermediate states don't matter at all, and if you tried to parse a date from it it'd likely fail. Better just to signal connect to some end state. The activate signal runs off when the user presses enter (as I often do when I'm done editing) I don't know if it works as a catch all. Probably not. You may need something like focus-out-event from GtkWidget and potentially more. Doing a string comparison on the entry when you go to use it (in case a change managed to sneak through) also wouldn't hurt.

Yes I didn't save the cursor position. I take it you are using that to determine which of the day/month/year to update. That would have to be integrated into the code I gave but I don't like your chances of doing so in a locale invariant way. e.g. if the cursor is at position 7 from the end how are you going to assess all the possibilities of e.g. 24/02/1980, Feb 24th 1980, 24/02/80, 2012年02月24日, etc.? even just the standardised DMY system will vary depending on whether it is written as YY or YYYY, not to mention if people leave 0s off or add in Mon/Tue etc. Everyone'll likely have a different way of entering dates that is natural for them and in order to get a cursor position you'd have to pretty much replicate the code of g_date_set_parse.

This is where having three separate fields would come in handy. You may still not know which is day, month and year due to locale uncertainty but you can at least increment and decrement each independently (with the exception of carrying e.g. wrapping December back to January and incrementing the year- I'd probably take the lazy option of not doing the latter increment and letting the user fix it up).

Yes I don't think I'm giving you a very good answer w.r.t. button sizing. I find visual things are best off dealt with when they can be visualised and the wider context would help. It should be a simple issue; maybe someone else can chip in with their perspective. Anyway, send along your example or a link to the code (though I might be a while before getting to it as stated above - not to mention my unfamiliarity with most things glade) and we'll see.

Regards,
Paul

wally67 · **Joined:** Mon Oct 29, 2012 1:30 pm **Posts:** 11

hi paul

i think your problems are better than mine (my son is sick)

anyway... you gave me a very complex description and my requirements are limited to a simple dd/mm/yy rappresentation

about sizing here is glade dialog code

Code:

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <requires lib="gtk+" version="2.16"/>
  <!-- interface-naming-policy project-wide -->
  <object class="GtkDialog" id="add">
    <property name="can_focus">False</property>
    <property name="border_width">5</property>
    <property name="resizable">False</property>
    <property name="window_position">center</property>
    <property name="type_hint">normal</property>
    <child internal-child="vbox">
      <object class="GtkVBox" id="dialog-vbox1">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="spacing">2</property>
        <child>
          <object class="GtkLabel" id="label1">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="ypad">10</property>
            <property name="label" translatable="yes">Aggiungi</property>
          </object>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <object class="GtkTable" id="table1">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="n_rows">5</property>
            <property name="n_columns">3</property>
            <child>
              <object class="GtkLabel" id="add_label_data">
                <property name="visible">True</property>
                <property name="can_focus">False</property>
                <property name="xalign">1</property>
                <property name="label" translatable="yes">Data operazione</property>
              </object>
              <packing>
                <property name="x_padding">5</property>
                <property name="y_padding">1</property>
              </packing>
            </child>
            <child>
              <object class="GtkLabel" id="add_label_typevalue">
                <property name="visible">True</property>
                <property name="can_focus">False</property>
                <property name="xalign">1</property>
                <property name="label" translatable="yes">Entrata/Uscita</property>
              </object>
              <packing>
                <property name="top_attach">1</property>
                <property name="bottom_attach">2</property>
                <property name="x_padding">5</property>
              </packing>
            </child>
            <child>
              <object class="GtkLabel" id="add_label_typeop">
                <property name="visible">True</property>
                <property name="can_focus">False</property>
                <property name="xalign">1</property>
                <property name="label" translatable="yes">Tipo operazione</property>
              </object>
              <packing>
                <property name="top_attach">2</property>
                <property name="bottom_attach">3</property>
                <property name="x_padding">5</property>
              </packing>
            </child>
            <child>
              <object class="GtkLabel" id="add_label_value">
                <property name="visible">True</property>
                <property name="can_focus">False</property>
                <property name="xalign">1</property>
                <property name="label" translatable="yes">Importo</property>
              </object>
              <packing>
                <property name="top_attach">3</property>
                <property name="bottom_attach">4</property>
                <property name="x_padding">5</property>
              </packing>
            </child>
            <child>
              <object class="GtkLabel" id="add_label_descr">
                <property name="visible">True</property>
                <property name="can_focus">False</property>
                <property name="xalign">1</property>
                <property name="label" translatable="yes">Descrizione</property>
              </object>
              <packing>
                <property name="top_attach">4</property>
                <property name="bottom_attach">5</property>
                <property name="x_padding">5</property>
              </packing>
            </child>
            <child>
              <object class="GtkHBox" id="hbox1">
                <property name="visible">True</property>
                <property name="can_focus">False</property>
                <child>
                  <object class="GtkEntry" id="add_entry_data">
                    <property name="visible">True</property>
                    <property name="can_focus">True</property>
                    <property name="invisible_char">●</property>
                    <property name="xalign">1</property>
                    <property name="primary_icon_activatable">False</property>
                    <property name="secondary_icon_activatable">False</property>
                    <property name="primary_icon_sensitive">True</property>
                    <property name="secondary_icon_sensitive">True</property>
                    <signal name="changed" handler="on_add_entry_data_changed" swapped="no"/>
                  </object>
                  <packing>
                    <property name="expand">True</property>
                    <property name="fill">True</property>
                    <property name="position">0</property>
                  </packing>
                </child>
                <child>
                  <object class="GtkVButtonBox" id="vbuttonbox_data">
                    <property name="width_request">0</property>
                    <property name="height_request">0</property>
                    <property name="visible">True</property>
                    <property name="can_focus">False</property>
                    <child>
                      <object class="GtkButton" id="add_button_up">
                        <property name="label" translatable="yes">+</property>
                        <property name="visible">True</property>
                        <property name="can_focus">True</property>
                        <property name="receives_default">True</property>
                        <property name="use_action_appearance">False</property>
                        <signal name="clicked" handler="on_add_button_up_clicked" swapped="no"/>
                      </object>
                      <packing>
                        <property name="expand">False</property>
                        <property name="fill">False</property>
                        <property name="position">0</property>
                      </packing>
                    </child>
                    <child>
                      <object class="GtkButton" id="add_button_down">
                        <property name="label" translatable="yes">-</property>
                        <property name="width_request">0</property>
                        <property name="visible">True</property>
                        <property name="can_focus">True</property>
                        <property name="receives_default">True</property>
                        <property name="use_action_appearance">False</property>
                        <signal name="clicked" handler="on_add_button_down_clicked" swapped="no"/>
                      </object>
                      <packing>
                        <property name="expand">False</property>
                        <property name="fill">False</property>
                        <property name="position">1</property>
                      </packing>
                    </child>
                  </object>
                  <packing>
                    <property name="expand">True</property>
                    <property name="fill">True</property>
                    <property name="position">1</property>
                  </packing>
                </child>
              </object>
              <packing>
                <property name="left_attach">1</property>
                <property name="right_attach">2</property>
              </packing>
            </child>
            <child>
              <object class="GtkComboBox" id="add_combobox_typevalue">
                <property name="visible">True</property>
                <property name="can_focus">False</property>
                <property name="model">add_liststore_typevalue</property>
                <child>
                  <object class="GtkCellRendererText" id="cellrenderertext_typevalue"/>
                  <attributes>
                    <attribute name="text">0</attribute>
                  </attributes>
                </child>
              </object>
              <packing>
                <property name="left_attach">1</property>
                <property name="right_attach">2</property>
                <property name="top_attach">1</property>
                <property name="bottom_attach">2</property>
              </packing>
            </child>
            <child>
              <object class="GtkComboBox" id="add_combobox_typeop">
                <property name="visible">True</property>
                <property name="can_focus">False</property>
                <property name="model">add_liststore_typeop</property>
                <signal name="changed" handler="on_add_combobox_typeop_changed" swapped="no"/>
                <child>
                  <object class="GtkCellRendererText" id="cellrenderertext_typeop"/>
                  <attributes>
                    <attribute name="text">0</attribute>
                  </attributes>
                </child>
              </object>
              <packing>
                <property name="left_attach">1</property>
                <property name="right_attach">2</property>
                <property name="top_attach">2</property>
                <property name="bottom_attach">3</property>
              </packing>
            </child>
            <child>
              <object class="GtkEntry" id="add_entry_value">
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <property name="invisible_char">●</property>
                <property name="xalign">1</property>
                <property name="primary_icon_activatable">False</property>
                <property name="secondary_icon_activatable">False</property>
                <property name="primary_icon_sensitive">True</property>
                <property name="secondary_icon_sensitive">True</property>
                <signal name="changed" handler="on_add_entry_value_changed" swapped="no"/>
              </object>
              <packing>
                <property name="left_attach">1</property>
                <property name="right_attach">2</property>
                <property name="top_attach">3</property>
                <property name="bottom_attach">4</property>
              </packing>
            </child>
            <child>
              <object class="GtkEntry" id="add_entry_descr">
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <property name="invisible_char">●</property>
                <property name="xalign">1</property>
                <property name="primary_icon_activatable">False</property>
                <property name="secondary_icon_activatable">False</property>
                <property name="primary_icon_sensitive">True</property>
                <property name="secondary_icon_sensitive">True</property>
                <signal name="changed" handler="on_add_entry_descr_changed" swapped="no"/>
              </object>
              <packing>
                <property name="left_attach">1</property>
                <property name="right_attach">2</property>
                <property name="top_attach">4</property>
                <property name="bottom_attach">5</property>
              </packing>
            </child>
            <child>
              <placeholder/>
            </child>
            <child>
              <placeholder/>
            </child>
            <child>
              <placeholder/>
            </child>
            <child>
              <placeholder/>
            </child>
            <child>
              <placeholder/>
            </child>
          </object>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">1</property>
          </packing>
        </child>
        <child internal-child="action_area">
          <object class="GtkHButtonBox" id="dialog-action_area1">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="layout_style">center</property>
            <child>
              <object class="GtkButton" id="add_button_esc">
                <property name="label" translatable="yes">Cancella</property>
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <property name="receives_default">True</property>
                <property name="use_action_appearance">False</property>
              </object>
              <packing>
                <property name="expand">False</property>
                <property name="fill">False</property>
                <property name="position">0</property>
              </packing>
            </child>
            <child>
              <object class="GtkButton" id="add_button_ok">
                <property name="label" translatable="yes">Conferma</property>
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <property name="receives_default">True</property>
                <property name="use_action_appearance">False</property>
              </object>
              <packing>
                <property name="expand">False</property>
                <property name="fill">False</property>
                <property name="position">1</property>
              </packing>
            </child>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="pack_type">end</property>
            <property name="position">2</property>
          </packing>
        </child>
      </object>
    </child>
    <action-widgets>
      <action-widget response="1">add_button_esc</action-widget>
      <action-widget response="0">add_button_ok</action-widget>
    </action-widgets>
  </object>
  <object class="GtkEntryCompletion" id="add_entrycompletion_descr">
    <property name="model">add_liststore_descr</property>
  </object>
  <object class="GtkListStore" id="add_liststore_descr">
    <columns>
      <!-- column-name descr -->
      <column type="gchararray"/>
    </columns>
  </object>
  <object class="GtkListStore" id="add_liststore_typeop">
    <columns>
      <!-- column-name typeop -->
      <column type="gchararray"/>
    </columns>
  </object>
  <object class="GtkListStore" id="add_liststore_typevalue">
    <columns>
      <!-- column-name typevalue -->
      <column type="gchararray"/>
    </columns>
  </object>
</interface>

hope can be usefull for have an help

wally

wally67 · **Joined:** Mon Oct 29, 2012 1:30 pm **Posts:** 11

hi everybody

simply playing with gtk and glade i discovered my "problem" with buttons is due to GtkVButtonBox. in fact, if i use simple buttons inserted in a vbox i can resize them to smaller dimensions than with vbuttonbox

strange behaviour....

in any case merry xmas and happy new year

wally

GTK+ Forums

how to reduce button size

Who is online