linux-wifi-hotspot icon indicating copy to clipboard operation
linux-wifi-hotspot copied to clipboard

Migrate to GTK4/Libadwaita

Open imhemish opened this issue 2 years ago • 6 comments

The current UI is functional, but is badly fitted. Also, it can not adapt to small screens, thus making it almost unusable on things like Pinephone Pro and Librem 5. Developing a nice GUI has become so easier with Libadwaita, you don't have to take care of positioning and all, and it makes a modern looking UI. Considering that the UI part of this project is small, it should be easier to migrate.

imhemish avatar Feb 05 '23 13:02 imhemish

Will consider this

lakinduakash avatar Jan 09 '24 22:01 lakinduakash

@lakinduakash I created a draft UI for this:

https://github.com/lakinduakash/linux-wifi-hotspot/assets/74466492/6209172e-4131-4dfd-9cd8-54ee78e72158

(Wrote using blueprint)

Here is the blueprint code:

using Gtk 4.0;
using Adw 1;

menu menu {
  item ("About Wifi Hotspot", "app.about")
}

Gtk.Window { Box {
  orientation: vertical;
  Adw.HeaderBar {
  title-widget: Adw.WindowTitle {
    title: "Wi Hotspot";
  }
  [end]
    MenuButton {
      menu-model: menu;
      icon-name: 'open-menu-symbolic';
    }
  }
  
  Adw.PreferencesPage {
    Adw.PreferencesGroup {
    
      Adw.EntryRow entry_ssid {
        title: "SSID";
      }
      
      Adw.ActionRow {
        title: 'Open';
        
        [suffix]
        Gtk.Switch cb_open {
          valign: center;
        }
        
        activatable-widget: cb_open;
      }
      
      Adw.PasswordEntryRow entry_pass {
        title: "Password";
        sensitive: bind cb_open.active inverted;
      }
      
      Adw.ComboRow combo_wifi {
        title: "Wifi Interface";
        model: Gtk.StringList {
          strings ["wlan0", "wlsp0"]
        };
      }
      
      Adw.ComboRow combo_internet {
        title: "Internet Interface";
        model: Gtk.StringList {
          strings ["wlan0", "wlsp0"]
        };
      }
    }
    
    Adw.PreferencesGroup {
      Adw.ExpanderRow {
        title: "Advanced";
        
        Adw.ComboRow {
          title: "Frequency Band";
          model: Gtk.StringList {
            strings ["Auto", "2.4GHz", "5GHz"]
          };
        }
        
        Adw.ActionRow {
          title: "Hidden";
          [suffix]
          Switch cb_hidden {
            valign: center;
          }
          
          activatable-widget: cb_hidden;
        }
        
        Adw.ActionRow {
          title: "Use PSK";
          [suffix]
          Switch cb_psk {
            valign: center;
          }
          
          activatable-widget: cb_psk;
        }
        
        Adw.ActionRow {
          title: "Set MAC";
          [suffix]
          Switch cb_mac {
            valign: center;
          }
          
          activatable-widget: cb_mac;
        }
        
        Adw.EntryRow entry_mac {
          title: "MAC";
          sensitive: bind cb_mac.active;
        }
        
        
        
        
      }
      
    }
    
    Adw.PreferencesGroup {
      Adw.ExpanderRow {
        title: "Connected Devices";
      }
    }
  }
  
}}

I don't know that much C, but I know some amount of GTK using Python (as I was trying to make some apps in GTK4/Libadwaita via python), i think i may work on this some time.

imhemish avatar Jan 30 '24 20:01 imhemish

@lakinduakash I created a draft UI for this: Kooha-2024-01-31-01-38-07.mp4

(Wrote using blueprint)

Here is the blueprint code:

using Gtk 4.0;
using Adw 1;

menu menu {
  item ("About Wifi Hotspot", "app.about")
}

Gtk.Window { Box {
  orientation: vertical;
  Adw.HeaderBar {
  title-widget: Adw.WindowTitle {
    title: "Wi Hotspot";
  }
  [end]
    MenuButton {
      menu-model: menu;
      icon-name: 'open-menu-symbolic';
    }
  }
  
  Adw.PreferencesPage {
    Adw.PreferencesGroup {
    
      Adw.EntryRow entry_ssid {
        title: "SSID";
      }
      
      Adw.ActionRow {
        title: 'Open';
        
        [suffix]
        Gtk.Switch cb_open {
          valign: center;
        }
        
        activatable-widget: cb_open;
      }
      
      Adw.PasswordEntryRow entry_pass {
        title: "Password";
        sensitive: bind cb_open.active inverted;
      }
      
      Adw.ComboRow combo_wifi {
        title: "Wifi Interface";
        model: Gtk.StringList {
          strings ["wlan0", "wlsp0"]
        };
      }
      
      Adw.ComboRow combo_internet {
        title: "Internet Interface";
        model: Gtk.StringList {
          strings ["wlan0", "wlsp0"]
        };
      }
    }
    
    Adw.PreferencesGroup {
      Adw.ExpanderRow {
        title: "Advanced";
        
        Adw.ComboRow {
          title: "Frequency Band";
          model: Gtk.StringList {
            strings ["Auto", "2.4GHz", "5GHz"]
          };
        }
        
        Adw.ActionRow {
          title: "Hidden";
          [suffix]
          Switch cb_hidden {
            valign: center;
          }
          
          activatable-widget: cb_hidden;
        }
        
        Adw.ActionRow {
          title: "Use PSK";
          [suffix]
          Switch cb_psk {
            valign: center;
          }
          
          activatable-widget: cb_psk;
        }
        
        Adw.ActionRow {
          title: "Set MAC";
          [suffix]
          Switch cb_mac {
            valign: center;
          }
          
          activatable-widget: cb_mac;
        }
        
        Adw.EntryRow entry_mac {
          title: "MAC";
          sensitive: bind cb_mac.active;
        }
        
        
        
        
      }
      
    }
    
    Adw.PreferencesGroup {
      Adw.ExpanderRow {
        title: "Connected Devices";
      }
    }
  }
  
}}

I don't know that much C, but I know some amount of GTK using Python (as I was trying to make some apps in GTK4/Libadwaita via python), i think i may work on this some time.

It looks good :) @lakinduakash Maybe we can create a new branch named "gtk4" where we can do refactoring work

Integral-Tech avatar Jul 19 '24 03:07 Integral-Tech

Thanks for the works. Lgtm. We can start working on.

lakinduakash avatar Jul 19 '24 04:07 lakinduakash

Please avoid libadwaita, as it doesn't work well outside of the Gnome desktop. Switching to libadwaita would significantly reduce the potential user base for this application, essentially limiting it to the fraction of users who happen to use Gnome.

probonopd avatar Aug 07 '24 08:08 probonopd

Please avoid libadwaita, as it doesn't work well outside of the Gnome desktop. Switching to libadwaita would significantly reduce the potential user base for this application, essentially limiting it to the fraction of users who happen to use Gnome.

While libadwaita is certainly not perfect, when manpower is limited, it's the simplest way forward to make a good interface that scales well. Not a perfect interface, not something that perfectly integrates with all DEs, but the occasional cursor size bug and window border weirdness on very specialized setups isn't a good reason to disqualify a whole library IMHO.

essentially limiting it to the fraction of users who happen to use Gnome

It not looking 100% native of other DEs doesn't prevent it from being used at all. Besides, it's a utility, you go in, set the things, then close it.

qwertychouskie avatar Aug 07 '24 16:08 qwertychouskie