Thursday, 14 June 2012

GSoC Update 2: Implementing the New UI

So, I have been working on implementing the new UI. I worked out how Gtk layouts and packing work, and added a hint and back button to the control area (to the right of the grid).

Now, the number picker (the dialog that pops up when you double click a square), was created dynamically in one method. What I did is separate out the number picker in to a new Widget (I think this is the correct term?), called, wait for it, NumberPicker. This can be used in the dialog, for the double click functionality, but is also equally suited for use in the control area to the side.

I also while doing the above task, removed the deprecated Gtk.VBox, and Gtk.Table in the code, and replacing them with Gtk.Box, and Gtk.Grid respectively. I have spotted Table being used elsewhere, so I will probably try to go round and update all of these issues at some point.

Replacing the number picker in the SudokuCellView class (the bit that manages each individual cell on the grid) was relatively easy, once I (helped by my mentor) got an understanding of how to use signals. This was because I got the code I used for the NumberPicker from there.

The control section one was slightly harder as it is completely separate from the grid. I added event signals to the SudokuCellView class and SudokuView class (that handles the entire grid), such that I can get notified when a cell gains and loses focus. I then connected the gain focus event to a function that enabled or disabled the NumberPicker depending on whether the cell was editable. Then, as the cell loses focus when a button on the NumberPicker is pressed, I had to work out a way for the selected cell in the grid, to stay selected while the user was pressing buttons on the NumberPicker. So, as the current "selected" system used the focus property, I added a selected property to the SudokuCellView class, and then added selected_x, and selected_y properties to the SudokuView class.

Focus now just changes the selected cell on the grid, losing the focus from a cell, does not make it unselected. This allowed me to connect the number_picked signal from the NumberPicker to call a method I added to the SudokuView class to change the value in a given cell, using the selected_x and selected_y properties of the SudokuView to tell which cell is selected.

The end result of this work is demoed in the following video.

Next, I think I need to talk to both my mentor, and Allan Day, regarding the exact desired implementation of the UI. What I have works, however I have not thought much about how it looks yet.


  1. Maybe you could add some extra thickness between the 3x3 boxes?

  2. Maybe you could include a little context at the start of your post for people finding this on Planet GNOME.

    Good luck with the project.

  3. Although the six steps may seem to be difficult to follow, read each step and try to analyze what it is trying to convey. It really is not as difficult as it may seem. When solving Sudoku, patience and persistence are required, along with careful thinking. Remember that most important tip: have fun with it