Bienvenue, Invité. Merci de vous connecter ou de vous inscrire.
Avez-vous perdu votre e-mail d'activation ?

Auteur Sujet: GUIML et PYGUIML : une GUI pour la SFML et pour PYSFML  (Lu 7890 fois)

0 Membres et 1 Invité sur ce sujet

gaulois94

  • Sr. Member
  • ****
  • Messages: 259
    • Voir le profil
GUIML et PYGUIML : une GUI pour la SFML et pour PYSFML
« le: Avril 06, 2012, 10:19:29 pm »
Bonsoirs,

Voila aujourd'hui je vais vous présenter la GUIML et PYGUIML : une GUI adapté pour le C++ et pour python. Pour le moment, la GUI ne fait pas grand chose : elle gère les fenêtre, les images, les Labels, les Layouts(pas encore finis), les checkBoxs  et à moitié des petites fenêtres (des RenderTexture).

GUIML est la version C++ de la GUI. Elle n'est qu'à c'est début mais fonctionne pour le moment. Il fonctionne avec la dernière version en date de ce message de la sfml 2.0. PYSFML lui est la version python de la GUI. Elle est écrite en python 3 et est la dernière version en date de ce message de pysfml.

Pour le moment, la GUI ne me servira qu'à faire des jeux avec la SFML, mais je me suis dit que cela pourrai aussi vous servir. Je ne peux pas encore vous donner de réels screenshot ou encore de code de teste car elle n'est pas assez développer pour. Cependant, j'espère bien l'avancé rapidement :) . Voila j'espère pouvoir l'améliorer rapidement, et vous présenter une GUI fonctionnels dans peu de temps :) .

Pourquoi avoir construite cette GUI ? Par plaisir et surtout je voulais utilisé ma propre GUI, et non celui d'un autre. Cela est un très bonne exercice et je pourrais mieux exploiter ma GUI que celui d'une autre. Je pourrai l'améliorer selon mes envie et s'il y a un bug, le corriger le plus rapidement. De plus, je n'ai pas vraiment vu de GUI pour pysfml.Brefs que des raisons pour créé la mienne :D .

Voici maintenant le code de la GUI : http://gaulois94.rd-h.fr/Programme/GUIML.zip Pour ce qui est de PYGUIML, ne vous inquiétez pas : je vais implémenter très rapidement les classes manquantes.

Pour ce qui est de la suite, je compte créer juste après les Slider ainsi que des TextBox. Je créerai sans doute aussi un petit incrémenter qui me sera très utile pour le jeux. Après cela ben je pense que j'aurai toutes les classes de bases que j'utiliserais.

J'ai dit que je ne donnerai pas pour le moment de code d'exemple, mais je vous donne quand même le code minimal ;) :

Le code en python :
#!/usr/bin/python3.2
# -*- coding:Utf-8 -*

from Window import Window
from Image import Image
import sfml as sf

window = Window(sf.VideoMode(800, 600), b'teste')
image = Image(window, b'Mario.png')
while(window.open):
window.update()

Et le même en C++ :
#include "Image.h"
#include "Window.h"

#include <iostream>

int main()
{
guiml::Window window(sf::VideoMode(800, 600), "teste");
        guiml::Image image(&window, std::string("Mario.png")); //ici on est obligé de mettre std::string car le programme prends aussi des sf::String qui peut être écrite avec de simple guillemets.
while(window.isOpen())
{
window.update();
}
return 0;
}

Ce simple code dessine une image (ici un mario) dans une fenêtre de 800*600 nommé teste.

Si jamais vous ne comprenez pas un bout de code, demander le moi : je vous répondrai. En effet, le code n'est pas trop documenter, ce qui risque de jouer des tours plus tard. Je compte bien entendu la documenter plus tard (ben oui il faut bien que vous sachiez comment l'utiliser :p ) bien que les noms des fonctions sembles quand même assez explicite. Voila, n'hésitez pas à me conseiller pour la GUI, faire des critiques et proposer des améliorations :D .

Cordialement, Gaulois94 .

gaulois94

  • Sr. Member
  • ****
  • Messages: 259
    • Voir le profil
Re : GUIML et PYGUIML : une GUI pour la SFML et pour PYSFML
« Réponse #1 le: Avril 11, 2012, 06:21:52 pm »
Mise à jours de la GUI.

Pour les utilisateurs de python, désoler vous allez attendre un tout petit peu que le code C++ fonctionne correctement (sinon sa met le bordels partout x) ).

Pour les utilisateurs de C++, vous pouvez désormais créer de véritable Frame, comme s'il s'agissait d'une vrai fenêtre (la position par de 0, 0, et vous avez la possibilité de la bouger à l'aide de la souris si l'envie vous est pris). Les resize de la fenêtre principale sont maintenant gérer, et je commence à faire en sorte que la modification des vues soient très très simple (tout sera intégré dans la classe guiml::Render où guiml::Window et guiml::Frame héritent).

Quand je dis que les resizes sont maintenant gérer, je veut dire que peut importe si l'utilisateur resize votre fenêtre, elle aura toujours le même comportement (les boutons seront bien actionner etc...)..

J'ai aussi mis à jours les Layouts (pas une partie de plaisirs je vous le dit :p ). Vous avez la possibilité d'ajouter des Widgets au layouts avec un nombre de cases qui vous ai propres. Bien entendu, il me reste quelques petites touches à améliorer mais l’essentiel est là. Quand vous ajouterez un Widgets au layouts, vous décalerez tout vers le bas. Je m'explique : imaginons que vous ajouter un Widget dans la case numéro 3, 2 de taille 1, 1. Tout les Widgets de la colonnes 3 seront alors décalé vers le bas.

Je pense bientôt vous montrer un petit screenshot afin de vous montrer les avancés de la GUI :) . N'hésitez pas à voir le code sources et à me demander certaines partie de ce code (il n'est pas évident).

À bientôt :) .

édit : voici un screenshot. Bon je l'admet il n'y a pas grand chose, mais c'est pour que vous compariez au code :) :



Les "1" dans la console, signifie que le bouton a été activé à l'aide du click gauche de la souris.  Le bouton correspondant est le "sa marche". Bien entendu, le bouton est enfaîte plus grand que le texte que vous voyez (j'ai un petit problème pour qu'il prenne toute la longueur du bouton).

Voici maintenant le code correspondant :

#include "Widget.h"
#include "Button.h"
#include "Window.h"
#include "Frame.h"
#include <iostream>

int main()
{
guiml::Window window(sf::VideoMode(800, 600), "teste");
guiml::Frame frame(&window, sf::IntRect(100, 100, 550, 400), sf::Color(0, 255, 255), guiml::Image(), guiml::Label(NULL, std::string("Teste")), sf::Color(255, 0, 0));
guiml::Label label(NULL, std::string("Sa marche"));
guiml::Button button(&frame, label, sf::IntRect(40, 14, 250, 160));
while(window.isOpen())
{
if(button.isActived())
std::cout << "1" << std::endl;
window.update();
}
return 0;
}

Comme vous le voyez, il n'y a pas grand chose au final dans le main : tout se passe en interne :) . De plus, la Frame (le cadre bleu) peut être déplacé si on clic sur le cadre rouge qui est juste en haut. Si vous resize, le bouton pourra toujours être actifs au même endroit, comparé à d'autre GUI que j'ai vu qui ne le gère pas :) .

N'hésitez pas à critiqué le code. Je sais qu'il est peu documenté, donc demandez moi des renseignements en plus :D .

édit 2 : J'avais oublié de vous indiquer le lien x) . Le voici : http://www.mediafire.com/?hkwoy36bbucy5g6
« Modifié: Avril 14, 2012, 11:43:12 am par gaulois94 »

NPat

  • Newbie
  • *
  • Messages: 2
    • Voir le profil
Re : GUIML et PYGUIML : une GUI pour la SFML et pour PYSFML
« Réponse #2 le: Avril 13, 2012, 11:18:26 pm »
Je n'ai pas regardé le code, mais le rendu est sympa  ;)

gaulois94

  • Sr. Member
  • ****
  • Messages: 259
    • Voir le profil
Re : GUIML et PYGUIML : une GUI pour la SFML et pour PYSFML
« Réponse #3 le: Avril 14, 2012, 07:33:57 am »
Merci. Le seul soucis pour le moment que je rencontre est que la taille du titre de la FRame (ici Teste) sort du cadre. J'ai mis comme taille de caractères la hauteur du cadre rouge (que j'ai nommé dans le code m_backgroundTitle), centré normalement sur le cadre.

Pour ceux qui est du code en python, celui ci comporte énormément de bug (celui que je vous ai passer). Se sera corriger dans pas longtemps :) .

Mon but avec cette librairie est d'être capable d'afficher, et de gérer un grand nombre de Widgets très facilement (par exemple, Window.update() va aussi update tout ses enfants, et donc récupérer au fur et à mesure les sf::Drawable à afficher, d'où pourquoi il n'y a pas de frame.draw() et de button.draw() : Window le fait pour nous :D . Il existe aussi la variable m_isDrawing pour, si vous ne le voulez pas, update les Widgets).

J'essayerai de rajouter plus de screenshots au fur et à mesure que j'aurai créer les WIdgets :) .

Orwel

  • Full Member
  • ***
  • Messages: 208
    • Voir le profil
Re : GUIML et PYGUIML : une GUI pour la SFML et pour PYSFML
« Réponse #4 le: Avril 14, 2012, 10:55:45 am »
Citer
Merci. Le seul soucis pour le moment que je rencontre est que la taille du titre de la FRame (ici Teste) sort du cadre. J'ai mis comme taille de caractères la hauteur du cadre rouge (que j'ai nommé dans le code m_backgroundTitle), centré normalement sur le cadre.

Il y a de l'espace de 4, voir 5 pixels sous ton texte. Je pense qu'il est mal cadré.

Si tu as placé l'origine au centre du texte et de même pour le cadre, la position est identique  :)

gaulois94

  • Sr. Member
  • ****
  • Messages: 259
    • Voir le profil
Re : GUIML et PYGUIML : une GUI pour la SFML et pour PYSFML
« Réponse #5 le: Avril 14, 2012, 11:31:16 am »
Le soucis ici ne vient pas vraiment de mon algorithme, mais de comment la SFML gère les textes. Je m'explique : la SFML ne place pas le texte à l'endroit indiquer, du principalement à la taille variable des lettres (la hauteur des lettres n'est pas la même). Soit la SFML gère correctement cela, soit je devrais proposer un hack me corrigeant se défaut.

Le prochain Widget que je créerai sera les Slide. Je proposerai aussi une intégration automatique à une fenêtre (guiml::Frame ou guiml::Window) si votre but est de modifié la vue uniquement. Je changerai aussi la manière dont la SFML affiche c'est Widget (si le Widget n'est pas dans la vue, pas besoin de le dessiner ;) ).

Merci de l'attention que vous portez à mon projet :) .

gaulois94

  • Sr. Member
  • ****
  • Messages: 259
    • Voir le profil
Re : GUIML et PYGUIML : une GUI pour la SFML et pour PYSFML
« Réponse #6 le: Mai 22, 2012, 07:57:31 pm »
Je viens de créer des dépots git afin de mieux gérer les projets ici : https://github.com/Gaulois94/PYGUIML et ici : https://github.com/Gaulois94/GUIML (les sources non pas trop changer entre temps, j'étais assez occupé ces derniers temps).

Enfaîte, j'aimerai savoir comment je peux faire pour aligné le texte ? Je récupère le texte, je met l'origine à "text.size.x/2, text.size.y/2" et je bouge le texte au milieu de la Frame...

Voila, n'hésitez pas à me poser des questions ;) (il y a d'ailleurs de grands changements à faire sur la version Python que je vais m’empresser de faire ;) ).

gaulois94

  • Sr. Member
  • ****
  • Messages: 259
    • Voir le profil
Re : GUIML et PYGUIML : une GUI pour la SFML et pour PYSFML
« Réponse #7 le: Mai 26, 2012, 01:19:24 pm »
Problème pour les titres centré régler, moyens de personnaliser le bouton permettant de déplacer la Frame mis en place (possibilité de mettre des images). Le slide est en cours d'écriture et sera disponible dès la fin de la semaine ;) .

Je vous invites encore une fois à vérifier les sources, me demander quelques codes d'exemples ou encore de faire des vidéos (basiques) afin de vous montrer comment marche le tout :)

N'hésitez pas à me critiquer et me proposer des nouvelles fonctionnalités :D .

Anata

  • Jr. Member
  • **
  • Messages: 77
    • Voir le profil
Re : GUIML et PYGUIML : une GUI pour la SFML et pour PYSFML
« Réponse #8 le: Mai 26, 2012, 02:45:54 pm »
Pour le texte, va tu gérer les fontes personnalisé en PNG ?

Tout le monde n'utilise pas forcement la gestion de fonte de sfml.

gaulois94

  • Sr. Member
  • ****
  • Messages: 259
    • Voir le profil
Re : GUIML et PYGUIML : une GUI pour la SFML et pour PYSFML
« Réponse #9 le: Mai 26, 2012, 03:26:38 pm »
C'est une bonne question et je dois dire que je ne me la suis jamais posé. En faisant un tour très rapidement dans la doc de la SFML, j'ai vu qu'il est possible de chargé sa propre font. Voir sf::Font::loadFromFile (const std::string &filename).

Si jamais sa ne suffit pas, je mettrai sans doute en place un moyen simple d'utilisation pour gérer les fonts personnalisées :)

gaulois94

  • Sr. Member
  • ****
  • Messages: 259
    • Voir le profil
Re : GUIML et PYGUIML : une GUI pour la SFML et pour PYSFML
« Réponse #10 le: Juin 26, 2012, 09:23:27 pm »
Suite aux examens, j'ai pas eu trop le temps de continuer la lib. Que cela ne tienne, ne développement reprends :D . Pour le moment, je documente le code et créer une document doxygen, en espérant que celle ci vous servent. N'hésitez pas à tester le code et à me donner des retours sur d'éventuels bugs. Je sais que la lib n'est pas trop développer m'enfin bon...

J'aurai aussi besoin de conseils pour optimiser le code. En effet, la lib prends quand même pas mal de ressource CPU que j'aimerai minimiser (pour un dual core de 2.4 GHz, créer deux Frames me prends 20% du CPU :o ).

Merci encore ;) .

édit : pour le C++, vous pouvez voir la documentation ici : http://gaulois94.rd-h.fr/html/

La documentation est loin d'être terminé, et sera remplie dans pas longtemps ;) .
« Modifié: Juin 26, 2012, 10:22:36 pm par gaulois94 »

gaulois94

  • Sr. Member
  • ****
  • Messages: 259
    • Voir le profil
Re : GUIML et PYGUIML : une GUI pour la SFML et pour PYSFML
« Réponse #11 le: Juillet 20, 2013, 04:00:13 pm »
Comme j'étais nouveau en programmation, je n'ai pas eu le temps de beaucoup coder sur ce projet (car j'apprends sans cesse de nouvelles choses, sans parler des grandes poses que j'ai réalisé).

Mais je peux vous dire maintenant que le projet avance bien, et ce pour mon plus grand plaisir :D

Je vous poste dans quelques screens, et un code en python (le code en C++ n'ai pas à jours malheureusement. Je le ferai quand le code python sera impecable (plus rapides à programmer et à faire les testes).

Les nouveautés sont des nouveaux widgets (progressBar, Layout, Slide, TextArray et bientôt EditText), une gestion d'un multi clipping (on peu clipter un widget parent qui va clipter des widgets filles eux même clipter (vous allez comprendre avec un screen), une gestion des positions et des tailles par rapport à l'écran (sa semble facile, mais ce fut un bordel :p )

Brefs, ormis mon anglais désastreu, la majorité du code est stable. Seul soucis : le code bouffe trop de CPU, faudrait que j'optimise tout sa un jour (sa prends vraiment beaucoup de charge).

Allez, voici un bout de code qui montre comment tout ceci est facilement géré :

#!/usr/bin/python3
#-*- coding:utf-8 -*-

from Window import Window
from Image import Image
from Label import Label
from Button import Button
from CheckBox import CheckBox
from CheckCircle import CheckCircle
from Widget import *
from Layout import Layout
from Frame import Frame
from SelectionMenu import SelectionMenu
from TextArray import TextArray
from Label import Label
from Slide import Slide
from ProgressBar import ProgressBar

import sfml as sf
import time

window = Window(sf.VideoMode(800,600,32), "teste", backgroundColor = sf.Color.GREEN, framerateLimit=3)
progress = ProgressBar(window, sf.Rectangle(sf.Vector2(), sf.Vector2(100, 20)))

progress2 = ProgressBar(window, sf.Rectangle(sf.Vector2(0, 200), sf.Vector2(100, 20)))
progress3 = ProgressBar(window, sf.Rectangle(sf.Vector2(0, 300), sf.Vector2(100, 20)))
progress4 = ProgressBar(window, sf.Rectangle(sf.Vector2(0, 400), sf.Vector2(100, 20)))
progress5 = ProgressBar(window, sf.Rectangle(sf.Vector2(0, 430), sf.Vector2(100, 20)))
#textArray = TextArray(window, label=Label(None, "coucou je viens d'écrire \n mon premier text array, j'espère qu'il vous plaira mes jeunes amis !", font=sf.Font.from_file("DejaVuSans.ttf")), alignment=Position.Center)
#textArray.setPos(sf.Vector2(150, 150))

#background0 = Image(None, "Ressources/Images/image.jpg", delTextureCreated = False)
#background1 = Image(None, "Ressources/Images/FirstMenu.jpg", delTextureCreated = False)
#window.backgroundImage = background0

slide = Slide(window, rect=sf.Rectangle(sf.Vector2(100, 30), sf.Vector2(500, 20)), step=1, inStep=5, values=sf.Vector2(0, 50))
slide.clipRect=sf.Rectangle(sf.Vector2(), sf.Vector2(500, 10))
slide._forground.clipRect = sf.Rectangle(sf.Vector2(7, 7), sf.Vector2(20, 15))
slide2 = Slide(window, rect=sf.Rectangle(sf.Vector2(100, 230), sf.Vector2(500, 20)), step=1, inStep=5, values=sf.Vector2(0, 50))
slide3 = Slide(window, rect=sf.Rectangle(sf.Vector2(100, 330), sf.Vector2(500, 20)), step=1, inStep=5, values=sf.Vector2(0, 50))
slide4 = Slide(window, rect=sf.Rectangle(sf.Vector2(100, 430), sf.Vector2(500, 20)), step=1, inStep=5, values=sf.Vector2(0, 50))
slide5 = Slide(window, rect=sf.Rectangle(sf.Vector2(100, 470), sf.Vector2(500, 20)), step=1, inStep=5, values=sf.Vector2(0, 50))

#frame = Frame(window, sf.Rectangle(sf.Vector2(10, 10), sf.Vector2(400, 300)), title="frame")
#layout = SelectionMenu(window, permanentActivation=True)
#layout.spacing = sf.Vector2(10, 10)
#box = CheckBox(window, sf.Rectangle(sf.Vector2(100, 100), sf.Vector2(50, 50)))
#box2 = CheckBox(None, sf.Rectangle(sf.Vector2(20, 20), sf.Vector2(50, 50)))
#box3 = CheckBox(None, sf.Rectangle(sf.Vector2(20, 20), sf.Vector2(50, 50)))
#box4 = CheckBox(None, sf.Rectangle(sf.Vector2(20, 20), sf.Vector2(100, 100)))
#box5 = CheckBox(None, sf.Rectangle(sf.Vector2(20, 20), sf.Vector2(100, 100)))
#layout.addWidget(box, sf.Vector2(1, 0), sf.Vector2(1, 1))
#layout.addWidget(box2, sf.Vector2(1, 1), sf.Vector2(1, 1))
#layout.addWidget(box3, sf.Vector2(0, 2), sf.Vector2(1, 1))
#layout.addWidget(box4, sf.Vector2(2, 1), sf.Vector2(1, 1))
#layout.addWidget(box5, sf.Vector2(1, 1), sf.Vector2(1, 1))
#layout.posOrigin = Position.Center
#layout.pos = sf.Vector2(400, 300)
#layout.setAllActiveMouseKeyboard(sf.Keyboard.RETURN, sf.Mouse.LEFT)
#layout.canFocus = False

#print(layout[(sf.Vector2(0, 1))])


while window.is_open:
        window.update()

Ce qui donne : http://img13.imageshack.us/img13/5234/k9y.png

Le premier Slide a été clipté ainsi que son "bouton bleu" (slide._forground). Comme vous le voié, aucun débordement n'a été fait lors de la superposition du clipte. Les progressBar utilisent d'ailleurs le clipping pour afficher le widget de devant. Les slides et les progress bar sont connecté par une manière assez artisanal je vous l'accorde (il n'y a pas de slot encore, et je me demande si je vais en implémenté). Quelques bugs subsistent encore avec une taille de vue initiale différente de la taille du Render auquel elle est lié (se sera corriger dans la journée :) ).


Je donnerai très prochainement un exemple d'intéraction entre différent menu d'un jeu vidéo par exemple.

Voila, merci encore :) .

édit : problème avec un resize pour le clipping réglé, la preuve en screen : http://img838.imageshack.us/img838/2731/rpnh.png (oui j'ai déplacer un peu le premier slide pour faire quelque test avec un côter droit sortant de la fenêtre initial). Pour utiliser ce code, vous devez prendre cette version de pysfml : https://github.com/Gaulois94/python-sfml car règle des problèmes au niveau de l'héritage avec sf.RenderWindow et sf.RenderTexture (j'attends que sonkun valide le code envoyé).

édit 2 : pendant que je suis a montrer différent Widget, voici un TextArray coupé par tranches de mots, dont le text est centré : http://img593.imageshack.us/img593/4489/ufwu.png .
« Modifié: Juillet 20, 2013, 04:58:39 pm par gaulois94 »

gaulois94

  • Sr. Member
  • ****
  • Messages: 259
    • Voir le profil
Re : GUIML et PYGUIML : une GUI pour la SFML et pour PYSFML
« Réponse #12 le: Juillet 25, 2013, 09:52:19 pm »
Voila par exemple un jeu assez simple (et pas complet du tout : je suis entrain d'y travailler dessus) qui réutilise les concepts d'updates de la lib pour une utilisation très simple (en clair, moins de 3/4 heures moins faire ceci, sprites compris (quelques uns sont de moi, d'autres non (suis pas graphistes x) ))) :

http://img341.imageshack.us/img341/5393/77e.png

Ici, les ennemies sont des Widgets, et même les laser créé. Pour les détruire, rien de plus simple : self.parent = None, et la balle laser ne sera plus update en attendant que python la supprime de la mémoire.

Le code source est disponible dans le dossier samples/shoot de la page github.