Skip to content

Latest commit

 

History

History
297 lines (199 loc) · 10.3 KB

instructions.tr-TR.md

File metadata and controls

297 lines (199 loc) · 10.3 KB

Tkinter Designer Nasıl Kullanılır

İçindekiler

  1. Başlarken

    1. Python'u Kurun
    2. Tkinter Designer'ı Yükleyin
    3. Bir Figma Hesabı Oluşturun

  2. Figma Tasarımınızı Biçimlendirme

    1. Referans
    2. Element Kılavuzu

  3. Tkinter Designer'ı Kullanma

    1. Kişisel Erişim Tokenı
    2. Dosya URL'nizi Elde Etme
    3. CLI'ı Kullanma
    4. GUI'yi Kullanma

  4. Sorun Giderme



Başlarken [Top]

1. Python'u Kurun

Tkinter Designer'ı kullanmaya başlamadan önce Python'u kurmanız gerekmektedir.

Bu rehberden sonra Python'un paket yükleyicisi olan "pip"i kullanacaksınız, bu yüzden Python'u sistem yoluna eklemeniz gerekebilir.


2. Tkinter Designer'ı Yükleyin

Üç yol

  1. pip install tkdesigner

  2. Install poetry

    • poetry new <gui_proje_ismi> && cd <gui_proje_ismi>
    • poetry add tkdesigner
    • poetry install

  3. Tkinter Designer'ı kaynak kodundan çalıştırmak için aşağıdaki adımları izleyin.

    1. Tkinter Designer'ın kaynak kodunu GIT kullanarak veya manuel olarak indirin.

      git clone https://github.com/ParthJadhav/Tkinter-Designer.git

    2. Çalışma alanınızı Tkinter Designer olarak değiştirin.

      cd tkinter-designer

    3. Bunları çalıştırarak gerekenleri indirin.

      • pip install -r requirements.txt
        • O an "pip" çalışmıyorsa şu komutları deneyin:
        • pip3 install -r requirements.txt
        • python -m pip install -r requirements.txt
        • python3 -m pip install -r requirements.txt
        • Eğer halen çalışmıyorsa Python'un sistem yoluna eklendiğinden emin olun.

    Bu tüm gerekli şeyleri ve Tkinter Designer'ı kuracaktır. Tkinter Designer'ı kullanmadan önce aşağıdaki yönergeler ile bir Figma dosyası oluşturmanız gerekmektedir.

    Eğer zaten oluşturduysanız Tkinter Designer'ı Kullanma kısmına atlayabilirsiniz.


3. Bir Figma Hesabı Oluşturma

  1. Tarayıcınızdan figma.com adresine gidin ve "Üye Ol // #" tuşuna tıklayın.
  2. Bilgilerinizi girin ardından email hesabınızı doğrulayın
  3. Yeni bir Figma Tasarım Dosyası oluşturun
  4. Arayüzünüzü yapmaya başlayın



Figma Tasarımınızı Biçimlendirme [Top]

1. Referans


İsimlendirme Önemlidir

Figma Element İsmi Tkinter Elementi
Button Button
Line Line
Rectangle Rectangle
TextArea Text Area
TextBox Entry
Image Canvas.Image()

Tkinter Designer'ın oluşturduğu kodlar Figma tasarımınızdaki element isimlerden gelir, bu yüzden isimlendirmeyi doğru yapmanız gerekir. Figma'da elementleri kontrol panelindeki katmanlar paneli aracılığıyla çift tıklayarak isimlendirebilirsiniz.


2. Element Kılavuzu


  1. Öncelikle, Tkinter Penceresi olarak kullanacağınız bir "frame" oluşturun.

  2. Resim Ekleme

    • Resimler, şekiller ve resimler kullanılarak oluşturulabilir.
    • Eğer birden fazla şekil veya resim kullandıysanız, önce hepsini seçip ardından CTRL/⌘ + G kısayolu ile gruplandırmanız gerekir.
    • Bundan sonra elementi veya grubu "Image" olarak isimlendirin.

  3. Yazı (Normal Yazı)

    • T tuşunu kullanarak yazı aracını aktif edin. Ardından istediğiniz yazıyı girin
    • Tkinter Designer'da yazının kullanımı için yeniden isimlendirilmesine gerek yoktur
    • Return ya da Enter tuşuna basarak sonraki satıra ilerleyin.

  4. Giriş (Tek Satır Kullanıcı Input'u)

    • R tuşu ile Rectangle(Dikdörtgen) aracını aktive edin
    • Diktörtgeni beğeninize göre ayarlayın
    • Dikdörtgenin "TextBox" olarak adlandırıldığından emin olun

  5. Yazı Alanı (Çoklu Kullanıcı Input)

    • R tuşu ile Rectangle(Dikdörtgen) aracını aktive edin
    • Diktörtgeni beğeninize göre ayarlayın
    • Dikdörtgenin "TextArea" olarak adlandırıldığından emin olun

  6. Dikdörtgen

    • R tuşu ile Rectangle(Dikdörtgen) aracını aktive edin
    • Diktörtgeni beğeninize göre ayarlayın
    • Dikdörtgenin "Rectangle" olarak adlandırıldığından emin olun

  7. Normal Buton

    • Buton olarak kullanmak için bir rectangle(dikdörtgen) ekleyin
      • Opsiyonel: Buton için bir yazı ekleyin
    • Butonu(Rectangle), ve herhangi bir yazıyı seçin, ardından onları CTRL/⌘ + G ile guruplayın
    • Grubu "Button" olarak adlandırın

Herhangi bir problemde bu videoyu referans alın



  1. Köşeli Buton
    • Buton olarak kullanmak için bir rectangle(dikdörtgen) ekleyin
      • Opsiyonel: Buton için bir yazı ekleyin
    • Diktörtgene sağ taraftan kenar-yumuşatma ekleyerek kenarlarını yuvarlayın. Daha fazlasına ulaşın
    • Butonunuz ile aynı boyutta bir diktörtgen oluşturun. Onu yuvarlatmayın.
    • Dikdörtgeninizin rengini arkaplan ile eşleşmesi için değiştirin
    • Şimdi yeni oluşturulan dikdörtgeni ana düğmenin(dikdörtgenin) altına taşıyın.
    • Butonu, dikdörtgeni ve herhangi opsiyonel yazıyı seçin ve onları CTRL/⌘ + G ile gruplandırın
    • Grubu "Button" olarak adlandırın.

Herhangi bir problemde bu videoyu referans alın



Tkinter Designer'ı Kullanma [Top]

Gerekli Girdiler

TKinter Designer'ı kullanabilmek için bazı girdileri toplamanız gerekmektedir.

1. Kişisel Erişim Tokenı

  1. Figma hesabınıza girin
  2. Ayarlara gidin
  3. Account sekmesinde, Personal access tokens kısmına kadar kaydırın
  4. Giriş formu için erişim tokeninizin ismini girin ve Enter tuşuna basın
  5. Kişisel erişim tokeniniz oluşturalacak.
    • Bu tokeni kopyalayın ve güvenli bir yerde saklayın.
    • Bu tokenı kopyalamak için başka şansınız olmayacak.

2. Dosya URL'nizi Elde Etme

  1. Figma tasarım dosyanızda üst menüden Share butonuna, ardından 🔗 Copy link'e tıklayın

CLI'ı Kullanma

CLI'yı kullanmak paketi yüklemek ve CLI aracını çalıştırmak kadar kolaydır.

PyPi'den

Verilerinizle $FILE_URL & $FIGMA_TOKEN değiştirerek aşağıdaki komutu test olarak kullanabilirsiniz. Eğer linke ve tokena ulaşamadıysanız Gerekli Girdiler kısmına bakın.

pip install tkdesigner

tkdesigner $FILE_URL $FIGMA_TOKEN

Kaynaktan

CLI'ı kaynak kodundan kullanmak için depoyu klonlamanız ve ardından aşağıdaki talimatları izlemeniz gerekir.

Verilerinizle $FILE_URL & $FIGMA_TOKEN değiştirerek aşağıdaki komutu test olarak kullanabilirsiniz. Eğer linke ve tokena ulaşamadıysanız Gerekli Girdiler kısmına bakın.

$ python -m tkdesigner.cli $FILE_URL $FIGMA_TOKEN

# To learn more about how to use the cli, pass the --help flag
$ python -m tkdesigner --help

Çıktı

Varsayılan olarak GUI kodu build/gui.py dosyasına yazılacak. Çıktı yolunu -o ile değiştirebilirsiniz.

Oluşturulan GUI'yi çalıştırmak için GUI'yi oluşturduğunuz konuma gidin ve herhangi normal bir Tkinter GUI'si çalıştırır gibi çalıştırın.

cd build
python3 gui.py

GUI'yi Kullanma

Sıradaki adımları yapmadan önce Tkinter Designer'ı açın


  1. TKinter Designer GUI'sini aşağıdaki kod yardımıyla açın
cd Tkinter-Designer
cd gui
python3 gui.py
  1. kişisel erişim tokenı'nı Tkinter Designer'daki Token ID kısmına yapıştırın.
  2. Tkinter Designer'da linki File URL kısmına yapıştırın
  3. Dosya gezgininden bir dosya açmak için Output Path'a tıklayın
  4. Bir çıktı yolu seçin ve Select Folder'a basın
  5. Generate'e tıklayın

Tkinter Designer'ın çıktı dosyaları, seçtiğiniz dizine, build adlı yeni bir klasöre yerleştirilecektir. Tebrikler, şimdi Tkinter GUI'nizi Tkinter Designer kullanarak oluşturdunuz!



Sorun Giderme [Top]

  • Elementler görünmüyor mu? Yanlış mı yerleştirilmiş?

  • Butonun istenmeyen bir gri arka planı mı var?

    • Buton elementinizin arkasına dikdörtgen eklediğinizden ve dolgu renginin arka plan rengiyle aynı olduğundan emin olun.

  • Yanlış elementler?

  • Pencere ekranınızdan daha mı büyük?

    • Figma'da elementlerinizin boyutunu düşürün

  • Dosya oluşturulmuyor mu?

    • Tkinter Designer'ı yeniden başlatın
    • Token'ı ve URL'yi iki kez kontrol edin
    • Tasarımınızın bir Frame'e(çerçeve) sahip olduğundan emin olun

  • Başka bir şey?