Dessine-moi un bouton...

Nombre de messages : 7095 Localisation : 77 Date d'inscription : 29/11/2007

Ça a sûrement déjà été fait ici, sans doute par cosmos, et ça n'a rien de révolutionnaire, mais ça égaie un peu le programme.
Ce sont des pictures qui sont traités comme des boutons, avec on_click.
On peut choisir leur couleur, et on peut mettre une ou plusieurs lignes de texte.
Si le bouton est plus haut que large, le texte est écrit verticalement.
La police est fixe (pour centrer facilement le texte).
Rien n'empêche d'y rajouter de petits symboles, puisque c'est un picture.

C'est plutôt un gadget, mais bon...

Code:: DIM n%, x%, y%, l%, h%, k%, ba%, r, g, b, t$, a$, xt%, yt%

LABEL Pseudobout, rr, rs, Traitement

ba% = 0: ' numéro du dernier bouton actif
BUTTON 1: TOP 1, 10: LEFT 1, 150: WIDTH 1, 200: CAPTION 1, "Bouton classique Panoramic"
ON_CLICK 1, Traitement

l% = 150: h% = 32
n% = 2: PICTURE n%
x% = 20: y% = 50: r = 220: g=255: b=255: t$ = "Symétrie<#horizontale"
GOSUB Pseudobout: ON_CLICK n%, Traitement
l% = 150: h% = 32
n% = n%+1: PICTURE n%
x% = 200: y% = 50: r = 255: g=220: b=220: t$ = "Symétrie<#verticale"
GOSUB Pseudobout: ON_CLICK n%, Traitement
n% = n%+1: PICTURE n%
l% = 100: x% = 130: y% = 100: r = 192: g = 255: b = 192: t$ = "Exécuter"
GOSUB Pseudobout: ON_CLICK n%, Traitement
n% = n%+1: PICTURE n%
l% = 30: h% = 120: x% = 50: y% = 100: r=255: g=192: b=255: t$ = "OUTILS"
GOSUB Pseudobout: ON_CLICK n%, Traitement
n% = n%+1: PICTURE n%
l% = 150: h% = 80: x% = 200: y% = 150: r = 255: g = 255: b = 180
t$ = "Cliquez ici<#et vous verrez<#la mer"
GOSUB PseudoBout: ON_CLICK n%, Traitement

BUTTON 800: TOP 800,-50

END

Pseudobout:
' Création en x% et y% d'un pseudo-bouton de numéro n%, de couleur rgb donnée,
' de dimensions l% et h%, de 1 ou plusieurs lignes de titre (si plusieurs lignes:
' séparées par '<#')
' Police Lucida Console, taille 10, caractères 8x12
TOP n%, y%: LEFT n%, x%: WIDTH n%, l%: HEIGHT n%, h%
2D_TARGET_IS n%: 2D_PEN_COLOR 0,0,0: 2D_FILL_COLOR r,g,b
2D_RECTANGLE 0, 0, l%-1, h%-1
2D_PEN_COLOR 255,255,255: 2D_LINE 0,0,l%-1,0: 2D_LINE 0,0,0,h%-1
PRINT_TARGET_IS n%: FONT_NAME n%, "Lucida Console": FONT_SIZE n%, 10
IF l% < h%
' bouton vertical
xt% = (l%-8)/2: yt% = (h%-12*LEN(t$))/2
FOR k% = 1 TO LEN(t$)
PRINT_LOCATE xt%, yt%: PRINT MID$(t$, k%, 1): yt% = yt% + 12
NEXT k%
ELSE
a$ = t$: yt% = (h%-12)/2
rr:
k% = INSTR(a$, "<#")
IF k% > 0
yt% = yt%-6: a$ = MID$(a$, k%+2, LEN(a$)-k%-1): GOTO rr
END_IF
a$ = t$
rs:
k% = INSTR(a$, "<#")
IF k% > 0
PRINT_LOCATE (l%-8*LEN(LEFT$(a$,k%-1)))/2, yt%: PRINT LEFT$(a$, k%-1)
a$ = MID$(a$, k%+2, LEN(a$)-k%-1): yt% = yt% + 12: GOTO rs
END_IF
PRINT_LOCATE (l%-8*LEN(a$))/2, yt%: PRINT a$
END_IF
RETURN

Traitement:
' bouton actif: rectangle de pointillés
FOR k% = 1 TO 5
IF CLICKED(k%) = 1 THEN EXIT_FOR
NEXT k%
' IF k% = 1 THEN ba% = k%: RETURN: ' Bouton classique
IF ba% <> 0
IF ba% = 1
SET_FOCUS 800
ELSE
r=COLOR_PIXEL_RED(ba%,2,2):g=COLOR_PIXEL_GREEN(ba%,2,2):b=COLOR_PIXEL_GREEN(ba%,2,2)
2D_TARGET_IS ba%: 2D_PEN_COLOR r,g,b
2D_LINE 4,4,l%-5,4: 2D_POLY_TO l%-5,h%-5:2D_POLY_TO 4,h%-5:2D_POLY_TO 4,4
END_IF
END_IF
IF k% = 1 THEN ba% = k%: RETURN
TOP k%,TOP(k%)+2:LEFT k%,LEFT(k%)+2:WAIT 200:TOP k%,TOP(k%)-2:LEFT k%,LEFT(k%)-2
ba% = k%
2D_TARGET_IS k%: l% = WIDTH(k%): h% = HEIGHT(k%)
2D_PEN_COLOR 0,0,0
FOR k% = 4 TO l%-5 STEP 3: 2D_POINT k%, 4: 2D_POINT k%, h%-5: NEXT k%
FOR k% = 4 TO h%-5 STEP 3: 2D_POINT 4, k%: 2D_POINT l%-5, k%: NEXT k%
RETURN

Màj 1/8 à 22h30

Ca paraît intéressant. Le l'ai pris pour usage ultérieur.

Nombre de messages : 2704 Date d'inscription : 13/09/2009

Ce n'est effectivement pas nouveau.
Cela avait déjà été demandé à Jack
et aussi proposé en picture comme solution alternative.
geek

C'est pas si gadget que çà,

J'ai choisi depuis peu de ne plus me servir de BUTTON, je crée autant de PICTURE que nécessaire et ensuite File_Load n,"Icone_bouton_sortie.bmp" (par exemple) . C'est bien plus joli. Et çà ne complique pas beaucoup.

Et comme maintenant je peux (grâce à toi) fabriquer ou retoucher les icones, c'est super.

Un exemple sur mon chantier actuel..

Code:: ' ==============================================================================
' Menu général
width 0,xe-10:height 0,57:top 0,5:left 0,5:color 0,0,200,200
border_hide 0
alpha 99:top 99,1:left 99,40:caption 99,"Menu général"
font_name 99,"Monotype Corsiva":font_size 99,20:font_color 99,50,50,10
picture 100:width 100,25:height 100,25:top 100,5:left 100,1230
file_load 100,"croixrouge2.bmp":on_click 100,fin:hint 100,"Quitter"
picture 101:width 101,25:height 101,25:top 101,5:left 101,10
file_load 101,"logo2.bmp":hint 101,"MES COMPTES"
picture 102:width 102,25:height 102,25:top 102,5:left 102,245
file_load 102,"clef1.bmp":on_click 102,mot_passe:hint 102,"Changer Mot De Passe"
picture 103:width 103,25:height 103,25:top 103,5:left 103,342
file_load 103,"calcul.bmp":on_click 103,go_operation:hint 103,"Accès au Programme des Opérations"
picture 104:width 104,25:height 104,25:top 104,5:left 104,433
file_load 104,"bank+.bmp":on_click 104,crea_compte:hint 104,"Ouvrir un compte"
picture 105:width 105,25:height 105,25:top 105,5:left 105,610
file_load 105,"user.bmp":hint 105,"Gestion Des Utilisateurs =>"
picture 106:width 106,25:height 106,25:top 106,5:left 106,833
file_load 106,"code.bmp":on_click 106,go_code:hint 106,"Accès au Programme des Codes d'Opérations"
picture 107:width 107,25:height 107,25:top 107,5:left 107,463
file_load 107,"bankmodif.bmp":on_click 107,modi_compte:hint 107,"Modifier un compte"
picture 108:width 108,25:height 108,25:top 108,5:left 108,493
file_load 108,"bank-.bmp":on_click 108,sup_compte:hint 108,"Cloture provisoire d'un compte"
picture 109:width 109,25:height 109,25:top 109,5:left 109,523
file_load 109,"bank-def.bmp":on_click 109,detruit_compte:hint 109,"Cloture définitive d'un compte"
picture 110:width 110,25:height 110,25:top 110,5:left 110,553
file_load 110,"bank+-.bmp":on_click 110,anul_sup_compte:hint 110,"Réouverture d'un compte"
picture 111:width 111,25:height 111,25:top 111,5:left 111,650
file_load 111,"plus.bmp":on_click 111,crea_utilisateur:hint 111,"Ajouter un Utilisateur"
picture 112:width 112,25:height 112,25:top 112,5:left 112,680
file_load 112,"pen.bmp":on_click 112,modi_utilisateur:hint 112,"Modifier un Utilisateur"
picture 113:width 113,25:height 113,25:top 113,5:left 113,710
file_load 113,"moins.bmp":on_click 113,sup_utilisateur:hint 113,"Supprimer un Utilisateur"
picture 114:width 114,25:height 114,25:top 114,5:left 114,973
file_load 114,"stat.bmp":on_click 114,stat:hint 114,"Accès au Programme des Statistiques"
picture 115:width 115,25:height 115,25:top 115,5:left 115,1142
file_load 115,"aide2.bmp":on_click 115,aide:hint 115,"Manuel"
picture 116:width 116,25:height 116,25:top 116,5:left 116,1062
file_load 116,"marteau.bmp":on_click 116,utilitaire:hint 116,"Utilitaires"

Code juste pour l'exemple

Le tout associer avec un main_menu, çà me fait un super bandeau.

A+

Invité

Je ne sais plus tout ce j'ai publié, je ne tiens pas de liste.
Je sais que je l'ai déjà fait, mais je ne les utilise pas.

Il n'y a que dans ma grille de cellules que j'utilise, mais c'est une utilisation spécifique pour ce programme.

Ce qu'il manque (La petite bébete) est l'inversion des couleurs.
Dernièrement j'ai inversé de cette façon en ayant par exemple:
color x,10,50,250 par color x, 255-10,255-50,255-250
un petit wait, et tu rétablis les couleurs. L'effet est plus probant.
Avec les nouvelles instructions pour savoir qu'elle objet en dernier a été cliqué, c'est le moment de les utiliser (pourquoi pas un select case avec les n° d'objet)

C'est vrai que c'est statique comme bouton et ton truc de colorer différemment pendant une demi-seconde (par exemple) c'est pas con et çà donne de l'animation. Je vais y regarder.

Ce que l'on ne voit pas dans mon exemple, c'est que certains bouton(PICTURE) changent d'image(Icône) suivant qu'ils sont actif ou pas, par un new File_load.

La présentation, dans un programme, est à mon avis importante (je parle de celle destinée à l'utilisateur), mais pas toujours facile à faire.

A+

Nombre de messages : 7095 Localisation : 77 Date d'inscription : 29/11/2007

Le changement de couleur ? au moment du clic je suppose...

@JC dommage on ne peut pas essayer ton code, il y a trop d'inconnues (les fichiers bmp et quelques variables).

Nombre de messages : 2704 Date d'inscription : 13/09/2009

En effet, les fichiers bourrés de file_load que les autres n'ont pas,
ce n'est pas exportables.
Autant faire les ombres et autres décorations avec des picture et des alpha
(et à la rigueur des 2d_qqch).
Ca c'est exportable.
jocolor

Nombre de messages : 7095 Localisation : 77 Date d'inscription : 29/11/2007

Je répète, mais à part (peut-être, brièvement) au moment du clic, je ne vois pas trop l'intérêt des boutons qui clignotent, ça doit plus fatiguer l'oeil qu'autre chose, et à la longue ça énerve. Sauf peut-être dans un programme psychédélique.
Mon but c'était uniquement de colorer un bouton Panoramic, de pouvoir y écrire éventuellement 2 lignes et/ou un dessin succinct, sans plus de prétention.

Invité

Tu fais comme tu veux JL35.
Mais le but est comprendre que l'on a agit sur quelque chose en cliquant sur un bouton.Pour plusieurs raisons:
-ici tu juste coloré un picture sans bordure, et cela ressemble plus à un titre qu'un bouton. Ce n'est pas une critique, Auparavent on se cassait moins la tête qu'aujourd'hui, mais avec le temps tout le monde s'habitue à Windows, et la représentation qu'à un bouton.

- En cliquant sur une image, si celle-ci ne change pas qu'elles instant, (moi je mets je crois wait 200 le temps visuel du clic), on s'ait qu'il y a eu quelque chose (si tu veux tu mets un écran bleu sur toute la surface pour faire peur). Ceci comme il a été dit sur le forum à d'autre endroit, est le côté intuitif qu'on doit normalement coder, pour que les choses semblent normales et convainquants.
Généralement lorsque l'on fait un programme pour soi, on le garde et on fait ce qu'on veut. Lorsqu'on publit pour les autres, on essaye de rentrer dans le moule de la société qui nous a former. Et là évidemment il y aurait beaucoup à dire, surtout moi, mais c'est hors sujet.

Lorsque j'ai dit au départ de faire une inversion (ou autre chose, un bouton gris), j'ai jamais parlé de faire un clignotement (marquer un clic, c'est un début de clignotement je te l'accorde).

JL35, la communauté te regarde. Tu résistes, c'est bien! Tu ne changes pas d'avis lorsque tu ne veux pas rentrer dans le moule, t'ais un homme. Razz

@JL35, @JJN4,
J'ai précisé au bas de mon code (juste pour l'exemple), je l'ai publié pour illustrer mon propos, mais tel quel, il n'est pas exploitable. Je n'ai pas voulu, non plus, qu'il soit exportable. Sinon je serais passé par un Zip avec les images dedans.

@Cosmos,
Comme les 2 autres ont fait semblant de pas comprendre je m'adresse à toi pour dire que j'ai bien compris que tu donnais une façon de faire et après chacun choisi la sienne. Je suis d'accord avec toi qu'un bouton ne doit pas être statique pour que l'utilisateur voit bien qu'il a cliqué dessus. Et si le programme est perso, alors pas besoin de s'embêter. On peut aussi changer l'image quand le bouton est cliqué et aussi......... tout ce qu'on veut.

@tous,

Le code de JL35 a l' avantage (si l'on se contente de boutons statiques) de construire ces boutons en initialisant son numéro et quelques variables de positionnement, de coloration,...., le reste étant automatique. Ce code peut sans doute être modifié si l'on souhaite voir le bouton s'enfoncer.

A+ sunny

Je viens d'expérimenter le léger changement de couleur proposé par Cosmos70, mais un petit hic dans le cas d'une image dans un Picture, celle-ci disparait.

Mais pas grave, cela m'a permis de découvrir une autre formule.
Supposons un Picture 113 (de la taille de l'image représentant un bouton quelconque). il suffit d'insérer au début du label concerné par le click du Picture 113 ceci

Code:: top 113,7:left 113,712:wait 300:top 113,5:left 113,710

2 pixels vers le bas et 2 pixels vers la droite et l'effet visuel d'enfoncement du bouton est impeccable.

Very Happy

Ca, c'est une idée intéressante !

Nombre de messages : 7095 Localisation : 77 Date d'inscription : 29/11/2007

Mon intention était seulement de donner une façon de faire des boutons colorés, un peu plus gais que les boutons standards Panoramic, de manière simple, et non pas de lancer une discussion philosophique !

En restant dans la simplicité, j'ai ajouté (ci-dessus), une manière de prendre en compte l'appui sur le bouton, la même que Panoramic: ajouter au bouton un cadre en pointillés, qui est effacé quand on appuie sur un autre bouton.
Ce que je ne sais pas faire, par contre, c'est effacer ce cadre dans un vrai bouton panoramic (c'est à dire lui ôter le 'focus') pais c'est sans doute faisable.

Ah, aussi, j'ai édité le titre...

@JC ton idée est intéressante ! j'ai paramétré (c'est plus universel), changé la tempo (200 au lieu de 500) et je l'ai ajoutée à mon exemple là-haut (avec ta permission)

Pour enlever le focus d'un objet Panoramic, on peut utiliser setfocus pour le donner à un autre. Si l'on ne veut pas donner le focus à un objet visible de la form, il suffit de créer un objet bidon (un bouton, par exemple) que l'on place en-dehors de l'écran (top=-100 ou left=-200, par exemple). Si on donne le focus à un tel bouton, le focus visible à l'écran disparaît et il n'y a pas d'autre incidence. Bien sûr, ne pas déclarer d'évènements sur ce bouton...

Nombre de messages : 7095 Localisation : 77 Date d'inscription : 29/11/2007

Merci Klaus, c'est bien ce que je désirais.

Et voilà, à plusieurs le lapin est sorti du chapeau.

Ta dernière version JL35 + la combine de Klaus pour set_focus est au final satisfaisante.
Je vais vous concocter ma manière avec Picture, mais il faut d'abord que j'apprenne à transmettre une image sur le Forum.

A+

Nombre de messages : 7095 Localisation : 77 Date d'inscription : 29/11/2007

J'ai intégré la suggestion de Klaus pour 'décocher' un bouton panoramic.

A toi de jouer Jean Claude !

Quant à intégrer une image sur le forum, c'est tout simple.
Tu prépares d'abord ton image en local, format jpg c'est mieux, réduite de préférence (disons pas plus que 640x480, sinon ça devient envahissant).
Tu te connectes sur http://monimag.eu/, pas besoin de s'inscrire ni fournir quoi que ce soit de personnel.
Clic "Parcourir", là tu vas jusqu'à ton image, puis "Envoyer".
Tu sélectionnes la deuxième référence ('pour Forums'), puis Copy (Ctl/C), et quand elle est dans le clipboard tu peux la 'Coller' (Ctl/V) n'importe où ici.

C'est bien plus long à expliquer qu'à faire !

C'est très bien comme ça.

Nombre de messages : 7095 Localisation : 77 Date d'inscription : 29/11/2007

Il me semble aussi, et simple surtout.
Mais voyons ce que JC a à nous proposer

bon,

"croixrouge2.bmp" et "clef1.bmp"

Code:: label fin, ouvrir

' ==============================================================================
width 0,400:height 0,57:top 0,50:left 0,100:color 0,0,200,200
border_hide 0

alpha 99:top 99,3:left 99,10:caption 99,"Menu général"
font_name 99,"Monotype Corsiva":font_size 99,20:font_color 99,50,50,10
picture 100:width 100,25:height 100,25:top 100,5:left 100,355
file_load 100,"croixrouge2.bmp":on_click 100,fin:hint 100,"Quitter"

picture 102:width 102,25:height 102,25:top 102,5:left 102,225
file_load 102,"clef1.bmp":on_click 102,ouvrir:hint 102,"Ouvrir"

main_menu 1
sub_menu 11:parent 11,1:caption 11," Mon Programme "+string$(40," ")
sub_menu 3:parent 3,1::caption 3,"OUVRIR":on_click 3,ouvrir
sub_menu 10:parent 10,1:caption 10,string$(20," ")
sub_menu 2:parent 2,1::caption 2,"QUITTER":on_click 2,fin

form 20:top 20,150:left 20,100:caption 20," Ouvrir":hide 20

END
' ==============================================================================
ouvrir:
top 102,6:left 102,226:wait 300:top 102,5:left 102,225
' traitement
show 20
return

fin:
top 100,6:left 100,356:wait 300:top 100,5:left 100,355
wait 500
terminate

J'espère que çà va marcher.

geek

A priori çà marche, à condition de créer un dossier et mettre les images dedans et le code avec.

Pour les images click droit et enregistrer sous... mais attention au nom de l'image (il y des chiffres qui s'ajoutent devant le nom ?) et choisir le format bmp pour que çà fonctionne.

On peut si l'on veut augmenter le déplacement d'un bouton (au click).
j'ai mis 1 pixel de décalage à droite et vers le bas, mais on peut mettre 2,3... dans la limite du Form.

Cela vous plait-il ?

Nombre de messages : 7095 Localisation : 77 Date d'inscription : 29/11/2007

En somme tu fais des icônes cliquables, ce n'est pas tout à fait la même chose que mes boutons.
Sinon, c'est joli et coloré...
Remarque sur tes images: elles sont au format jpg, il faut d'abord les convertir au format bmp...
Ta fenêtre d'affichage est tronquée (height 0,57 c'est trop court, il faut mettre au moins 77).
Le déplacement des icônes me paraît trop court, on les voit à peine bouger...

Et une remarque d'ordre plus général, j'aurais bien vu en tête du programme quelque chose comme
f1$ = "croixrouge2.bmp"
f2$ = "clef1.bmp"
et après des appels à f1$ et f2$, comme ça on sait tout de suite d'entrée les chemins qui sont à ajuster, plutôt que d'aller à la pêche dans le programme (enfin, moi j'ai l'habitude de mettre les fichiers de test dans un volume à part, Z:, pour ne pas encombrer mon répertoire sources, et savoir où les supprimer après tests).

Concernant les images:
Quand tu parlais d'images à transmettre, j'ai pensé à une image à afficher ici, sur le forum, par exemple une idée de l'aspect de ton programme à l'écran. Mais pour une image bmp à communiquer pour intégrer à un programme, la méthode ne convient pas, puisque le site n'admet que le jpg, gif et png, et encore de 2M maxi.
Il faut dans ce cas passer par un hébergeur de fichier, gratuit de préférence ! (par exemple http://www.2shared.com/ ou bien http://www.file-pasta.com/ mais dans ce dernier cas 1M maxi sans s'enregistrer, dans ton cas on en est loin, ~2k) où tu peux passer n'importe quel fichier.

Citation :: Remarque sur tes images: elles sont au format jpg, il faut d'abord les convertir au format bmp...

Oui çà je l'ai indiqué dans ma 2ème intervention.

Citation :: Ta fenêtre d'affichage est tronquée (height 0,57 c'est trop court, il faut mettre au moins 77).

Là je suis surpris, chez moi çà marche. Donc je pense qu'il s'agit de la taille de l'écran, car j'ai éssayer ce code en partant du forum comme-ci je ne le possèdait pas. Les icones ont normalement la taille 25x25 (d'ou la taille des Pictures)

Citation :: Le déplacement des icônes me paraît trop court, on les voit à peine bouger...

Là aussi j'en parle dans ma 2ème intervention.

Code:: top 102,6:left 102,226:wait 300:top 102,5:left 102,225

il faut changer TOP et LEFT pour un déplacement plus visible EX:

Code:: top 102,7:left 102,227:wait 300:top 102,5:left 102,225

Par exemple.

Bien sur, il y a plein de choses à modifier comme

Code:: top 102,top(102),5+2:left 102,left(102)226+2:wait 300:top 102,5:left 102,225

et là on remplace les différents éléments par des variables pour automatiser le truc.
Pour l'exemple j'ai préféré aller au plus simple pour ne pas dérouter.

Citation :: En somme tu fais des icônes cliquables...

Oui, mais elles font office de bouton.

Moi çà me plait bien.... il faut que j'essai de comprendre pourquoi l'affichage est bon chez moi et pas chez toi.

A+

Nombre de messages : 7095 Localisation : 77 Date d'inscription : 29/11/2007

Chez moi ça donne ça, je ne vois pas trop pourquoi non plus:

Je vois: c'est ton width 0, 400 qui est trop court, du coup il y a un repli de ta barre de menu (QUITTER se retrouve sur la ligne en-dessous), et ça décale le reste.
Ou plutôt il y a trop d'espaces entre les éléments du menu, ça ne tient pas dans les 400. Si tu mets string$(30," ") au lieu de 40, ça marche.
Ce que je ne comprends pas c'est comment il se fait que ça ne le fasse pas chez toi !

» Dessine-moi une galaxie
» Un bouton qui bouge
» dessine des rectangles
» Modèle de bouton-poussoir
» un p'tit bouton couleur rapide