Port To Gtk4

[Dakshsharma1108]

Port Calculate Activity to GTK4

This PR migrates the activity from GTK3 → GTK4 and replaces deprecated GTK3 APIs with GTK4 equivalents.
The Terminal activity GTK4 port was used as a reference while making these changes to follow Sugar GTK4
migration patterns.

Key Replacements

• gi.require_version("Gtk", "3.0") → "4.0"

• sugar3 → sugar4

• connect("key_press_event", ...) → Gtk.EventControllerKey

• Gtk.Clipboard.get(Gdk.SELECTION_CLIPBOARD) → Gdk.Display.get_default().get_clipboard()

• modify_bg() / modify_base() → CSS styling using Gtk.CssProvider

• Gdk.Cursor.new() → Gdk.Cursor.new_from_name()

• set_border_window_size() → margin properties (set_left_margin(), set_right_margin(), etc.)

• add() → set_child()

• pack_start() / pack_end() → append()

• Updated Gtk.Box child management:

  • box.pack_start(widget, ...) → box.append(widget)
  • Removed expand, fill, and padding arguments

• Replace show_all() to show()

• Replaced deprecated Gdk.Screen usage with Gdk.Display

• Added set_default_size() for proper window sizing in GTK4

---

Visual Changes:

After porting testing without sugar:

[Dakshsharma1108]

Please review this PR @MostlyKIGuess @chimosky .
There is one issue regarding widget styling.

@MostlyKIGuess shared this commit sugarlabs/sugar-toolkit-gtk4@9be4b2e with me for reference, but it did not work in my case. I tried both approaches — using hardcoded CSS priority values and using GTK4 constants — but neither worked as expected.

As discussed in the meeting, we should not apply hardcoded CSS like this:-
.button{ background-color: black; font-size:50px; color: white; }
So I came up with a new approach: can we define CSS classes inside sugar-artwork and then use those classes inside the activity?

If this approach is not correct, could you please recommend a better solution to resolve this styling issue?

[chimosky]

This should be a draft PR until Sugar is ported and this can be tested.

Also drop the merge commit, not sure why that's there.

As discussed in the meeting, we should not apply hardcoded CSS like this:-
.button{ background-color: black; font-size:50px; color: white; }
So I came up with a new approach: can we define CSS classes inside sugar-artwork and then use those classes inside the activity?

sugar-artwork already contains the necessary css definitions for Sugar, have you checked to be sure that what you need doesn't already exist, the odds of that being the case is pretty slim.

[Dakshsharma1108]

This should be a draft PR until Sugar is ported and this can be tested.

Also drop the merge commit, not sure why that's there.

As discussed in the meeting, we should not apply hardcoded CSS like this:-
.button{ background-color: black; font-size:50px; color: white; }
So I came up with a new approach: can we define CSS classes inside sugar-artwork and then use those classes inside the activity?

sugar-artwork already contains the necessary css definitions for Sugar, have you checked to be sure that what you need doesn't already exist, the odds of that being the case is pretty slim.

Got it , I will drop the merge commit and check out artwork one more time

[quozl]

How to test this on Ubuntu 24.04?

Which of these two pull requests are to be worked further? See #81

[Inuth0603]

How to test this on Ubuntu 24.04?

Which of these two pull requests are to be worked further? See #81

Hey @quozl — continuing from #81.

If you want to test it on Ubuntu 24.04, you can run the activity using the main.py wrapper I added. It just sets the minimal Sugar env variables so it can run outside the Sugar shell:

SUGAR_BUNDLE_PATH=$(pwd) SUGAR_BUNDLE_NAME="Calculate" SUGAR_BUNDLE_ID="org.laptop.Calculate" SUGAR_ACTIVITY_ROOT=/tmp GDK_BACKEND=x11 python3 main.py

I also pushed an update to #81 that addresses the CSS feedback from @chimosky. The hardcoded Gtk.CssProvider styling is gone now — buttons just use add_css_class() so styling comes from sugar-artwork's GTK4 theme.

Let me know if this works for you on 24.04.

[quozl]

Taken an Ubuntu 24.04 with working Sugar, then did this;

• start Terminal
• copy b3239fa,
• try to run; given activity/activity.info says to run with sugar-activity3, but the result was;

ValueError: Namespace Gtk not available for version 4.0

Looks like more needs to be done to run this.

[Inuth0603]

@quozl Just a quick heads-up regarding that ValueError.

It usually happens because standard Sugar installations only include the GTK3 bindings.
Before testing the main.py wrapper from #81 on Ubuntu 24.04, you may need to install the GTK4 bindings first:

sudo apt install gir1.2-gtk-4.0

After that, the standalone main.py command should run correctly.

[Dakshsharma1108]

Taken an Ubuntu 24.04 with working Sugar, then did this;

• start Terminal
• copy b3239fa,
• try to run; given activity/activity.info says to run with sugar-activity3, but the result was;

ValueError: Namespace Gtk not available for version 4.0

Looks like more needs to be done to run this.

You need to install GTK4 locally and other dependencies through Nix. Then run python main.py. I can also provide the necessary commands if you need them

[chimosky]

@Inuth0603 @Dakshsharma1108 If Gtk4 is currently installed in a running sugar environment, it won't be able to be loaded, so installing Gtk4 isn't the answer, Sugar hasn't been ported to Gtk4 and until that happens, testing these changes within sugar can't happen, which is the first thing I'd said in my first comment.

[Dakshsharma1108]

Sorry for that 😅

[quozl]

Okay, can't be tested yet.