Création d'un script image pour page web

Sujet: Création d'un script image pour page web Ven 12 Mar 2010 - 22:45

Bonjour à tous.

L'utilitaire suivant sert à incorporer des images vanant de votre compte "Flikr" ou "photobucket" par exemple dans une

page html que vous voulez créer ou modifier.

Le principe étant que pour chaque image, vous avez son URL complète de la forme :

http..................image.jpg

la disposition des images dans la page html sera faite de la façon suivante :
Pour 5 images par exemple :

Au centre de la page la première image en gros (hauteur 500 points) puis en dessous, les 4 autres en vignettes de 47 points alignées de gauche à droite. En cliquant sur une des vignettes, la photo correspondante prendra la place de la première en gros au centre. Vous comprenez ?

Donc, cet utilitaire vous donne jusqu'à 20 champs dans lesquels vous allez coller l'adresse url de chaque images.
Ensuite, grâce à un bouton, vous allez générer le script web qui permet de créer cette présentation de vos images.

Non seulement cet utilitaire génère le script en tenant compte des différentes url mais en plus, une fois généré correctement, ce script est encoyé dans le presse-papier pour que vous n'ayez plus qu'à le coller à un emplacement adéquate dans le texte source de votre document html.

J'ai conçu cet utilitaire car un ami qui vend sur Ebay des voitures miniature entre autre, créait des pages très longues. Car voulant être précis, il affichait un disaine de photos de chaque véhicules vendus. La page était donc fastidieuse à lire. Ayant découvert une page sur laquelle les photos multiples étaient mieux présentées, j'ai entrepris de décortiqué le texte de cette page pour en décrouvrir le script responsable de cette astuce. Mais l'appliquer à des photos perso, devenais vite galère. J'ai donc pensé à un utilitaire fait maison qui génèrerais ce script pour chaque lot d'images à afficher.

Le script d'origine à la forme suivante :

Code:: </SCRIPT>

<P align=center><IMG id=image1 height=500
src="http://.......image1.jpg"></P>

<IMG class=cssimage id=image1 onclick="changeMonImage('image1');" height=47
src="http://.......image1.jpg">

<IMG class=cssimage id=image2 onclick="changeMonImage('image2');" height=47
src="http://........image2.jpg">

<IMG class=cssimage id=image3 onclick="changeMonImage('image3');" height=47
src="http://...........image3.jpg">
.
.
. et ça se répète pour chaques images....
.
.
.
<IMG class=cssimage id=image12 onclick="changeMonImage('image12');" height=47
src="http://......image12.jpg">

<BR><SPAN class=texteAnnonceSmall>Cliquez sur les miniatures pour agrandir l'image.</SPAN>

<SCRIPT>var repsite="http://......./";

var prems="image1";

function changeMonImage(a){document.getElementById(prems).src=repsite+a+".jpg";}

</SCRIPT>

Comme vous le voyez, c'est assez fastidieux de modifier le nom du fichier image, le chemin url de cell-ci etc. etc..

D'ou cet utilitaire qui fait tout tout seul.

Vous n'avez besoin que d'une chose : les url complètes de chaque images (http://.....fichier.jpg)

Je vous joint quelques url d'images libres de droit.

1 - Vous copiez les adresses complètes et vous la collez dans chacun des champ de l'utilitaire

2 - vous enfoncer le bouton "Créer le code à copier" et là victoire... vous avez dans le presse-papier le script généré contenant les informations propre à vos images. Ya plus qu'à "Coller"dans un emplacement adéquat du texte de votre page html en cours d'édition et vous voilà avec une belle présentation de vos images dans votre page html.

3 - Il y a aussi le bouton "Afficher un test du code" et cet utilitaire vous ouvrira une page html montrant comment sont présentées vos images dans un navigateur web

Remarque :

Le source s'appel "création du script.bas".
le programme crée deux fichiers : SCRIPT_text.txt et test_script.htm. ils ne sont pas primordiaux mais éviter de les effacer en cours d'utilisation du programme. Ils sont recrées à chaque nouvelle génération de script.

Dans le répertoire en cours du programme, vous devez aussi avoir l'utilitaire clip.exe que vous pouvez trouver là :

http://www.generation-nt.com/copier-le-resultat-d-une-commande-dans-le-presse-papiers-astuce-24638-1.html

Télécharger donc cet utilitaire (clip.exe) et placer le dans le même dossier que la programme.

Dernière chose : créer un fichier texte que vous nommerez "clipboard.bat". Celui-ci ne contiendra qu'une ligne "clip < script_text.txt". Il est très util au programme, c'est lui qui génère la copie du script finis dans le presse-papier.

Voilà, amusez vous bien et dites-moi si des choses coincent.

Voici donc le source de mon programme :

Code:: label Nouveau,ChercheCodes,Sortie,CreationDuCode,TestCode,Quitter
dim New,i,j,k,code$(20),adresse$,a$

width 0,600:caption 0,"Création du SCRIPT":height 0,630

alpha 1:top 1,20:left 1,40:caption 1,"Tapez (coller...) dans chaques champs l'adresse d'une photo à afficher"

alpha 2:top 2,40:left 2,40:caption 2,"et cela l'une après l'autre ..."

alpha 3:top 3,60:left 3,40:caption 3,"Evitez de laisser un champ vide avant le dernier !"

' Liste invisible pour créer le script généré et le copier dans le presse-papiers
dlist 6

' Liste invisible pour créer le fichier html de test
dlist 7

' 20 lignes d'édition contenant les 20 images maximum à afficher
edit 101:top 101,90 :left 101,15:width 101,400:on_change 101,ChercheCodes
edit 102:top 102,115:left 102,15:width 102,400:on_change 102,ChercheCodes
edit 103:top 103,140:left 103,15:width 103,400:on_change 103,ChercheCodes
edit 104:top 104,165:left 104,15:width 104,400:on_change 104,ChercheCodes
edit 105:top 105,190:left 105,15:width 105,400:on_change 105,ChercheCodes
edit 106:top 106,215:left 106,15:width 106,400:on_change 106,ChercheCodes
edit 107:top 107,240:left 107,15:width 107,400:on_change 107,ChercheCodes
edit 108:top 108,265:left 108,15:width 108,400:on_change 108,ChercheCodes
edit 109:top 109,290:left 109,15:width 109,400:on_change 109,ChercheCodes
edit 110:top 110,315:left 110,15:width 110,400:on_change 110,ChercheCodes
edit 111:top 111,340:left 111,15:width 111,400:on_change 111,ChercheCodes
edit 112:top 112,365:left 112,15:width 112,400:on_change 112,ChercheCodes
edit 113:top 113,390:left 113,15:width 113,400:on_change 113,ChercheCodes
edit 114:top 114,415:left 114,15:width 114,400:on_change 114,ChercheCodes
edit 115:top 115,440:left 115,15:width 115,400:on_change 115,ChercheCodes
edit 116:top 116,465:left 116,15:width 116,400:on_change 116,ChercheCodes
edit 117:top 117,490:left 117,15:width 117,400:on_change 117,ChercheCodes
edit 118:top 118,515:left 118,15:width 118,400:on_change 118,ChercheCodes
edit 119:top 119,540:left 119,15:width 119,400:on_change 119,ChercheCodes
edit 120:top 120,565:left 120,15:width 120,400:on_change 120,ChercheCodes

button 130:top 130,85:left 130,435:width 130,130 : hide 130
caption 130,"Nouveau Script" : on_click 130,Nouveau

button 131:top 131,160:left 131,435:width 131,130 : hide 131
caption 131,"Créer le code à copier" : on_click 131,CreationDuCode

button 132:top 132,200:left 132,435:width 132,130 : hide 132
caption 132,"Afficher un test du code" : on_click 132,TestCode

button 133:top 133,300:left 133,435:width 133,130
caption 133,"Quitter le programme" : on_click 133,Quitter

' Fin du programme principal
end

REM *******************************************
' Partie de code contenant les routines accédés à chaque évènements

' Nouveau code à créer...
Nouveau:
New=1
hide 130: clear 6: clear 7
for i = 101 to 120
text i,""
next i
hide 131 : hide 132
New=0
return

' On a besoin d'une partie du texte contenu dans chaque adresses des images
ChercheCodes:
if New=1 then goto Sortie
j=100 : k=0
for i=1 to 20
j=j+1
if text$(j) = "" then exit_for
code$(i)=right$(text$(j),12):code$(i)=left$(code$(i),8)
k=j-100
next i

j=len(text$(101))
if j>0 then adresse$ = left$(text$(101),j-12)
show 130 : show 131
Sortie:
return

CreationDuCode:
' Compilation du script pour affichage d'images multiples dans une page HTML
clear 6
item_add 6,"</SCRIPT>" : item_add 6,""
a$="<P align=center><IMG id=" + code$(1) + " height=500" : item_add 6,a$
a$="src=" + chr$(34) + text$(101) + chr$(34) + "></P>" : item_add 6,a$ : item_add 6,""
for i = 1 to k
a$="<IMG class=cssImage id=" + code$(i) + " onclick="+chr$(34)+"changeMonImage('"+code$(i)+"');"+chr$(34)+"

height=47" : item_add 6,a$
a$="src="+chr$(34)+text$(100+i)+chr$(34)+">" : item_add 6,a$ : item_add 6,""
next i
item_add 6,"<BR><SPAN class=texteAnnonceSmall>Cliquez sur les miniatures pour agrandir l'image.</SPAN>"
item_add 6,""
a$="<SCRIPT>var repsite="+chr$(34)+adresse$+chr$(34)+";" : item_add 6,a$
item_add 6,""
a$="var prems="+chr$(34)+code$(1)+chr$(34)+";" : item_add 6,a$
item_add 6,""
a$="function changeMonImage(a){document.getElementById(prems).src=repsite+a+"+chr$(34)+".jpg"+chr$(34)+";}" : item_add

6,a$
item_add 6,""
item_add 6,"</SCRIPT>"

' On enregistre ce script compilé pour usage ultérieur
file_save 6,"SCRIPT_text.txt"

show 132

' On lance l'astuce pour envoi du code dans le presse papier :
' Le fichier clipboard.bat auras pour seule ligne -> "pip < script_test.txt"
' (sans guillemets et dans le répertoire en cours bien entendu !)
execute "clipboard.bat"
return

TestCode:
' On crée une page HTML de test dans laquelle on insère notre script
clear 7

' En-tete minimum d'une page HTML
item_add 7,"<html>"
item_add 7,"<head>"
item_add 7,"<title>Test du script image</title>"
item_add 7,"</head>"
item_add 7,"<body>"

' Insertion de notre SCRIPT dans cette page html
file_add 7,"SCRIPT_text.txt"

' puis finition de la page HTML de test
item_add 7,""
item_add 7,"</body>"
item_add 7,"</html>"

' on enregistre cette page de test
file_save 7,"test_script.htm"

' puis on lance l'affichage de cette page
execute "test_script.htm"
return

Quitter:
Terminate

Sujet: Quelques images libres de droit Ven 12 Mar 2010 - 22:59

Oui, j'oubliait, voici quelque images pour vous faire la main :

http://www.gettyimages.fr/images/marketing/frontdoorStill/DigitalVision/fd_image_test.jpg

http://www.gettyimages.fr/images/marketing/frontdoorStill/ComstockRF/78468822.jpg

http://www.gettyimages.fr/images/marketing/frontdoorStill/iStockRF/81226855.jpg

http://www.gettyimages.fr/images/marketing/frontdoorStill/StockbyteRF/sb10063511ak-001.jpg

http://www.gettyimages.fr/images/marketing/frontdoorStill/BrandXRF/82047759.jpg

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

Eh bien... j'ai rentré 8 adresses d'images (images à moi), puis cliqué 'Créer le code à copier', et là ça semble tourner en boucle sans fin...
J'ai une erreur à la ligne 96, mais c'est ta présentation du code qui laisse à désirer, des interlignes intempestifs.

Ton code comporte des lignes un peu longues, ce qui cause des troncatures au copier/coller et rend un peu pénible la mise au point, d'autant qu'il faut re-rentrer à chaque fois les adresses d'images.

Pas facile à tester, il manque par exemple clipboard.bat, il faut le créer soi-même ? tu aurais pu le créer dans le programme.
De plus on ne sait pas trop où sont les fichiers créés, pour vérifier leur contenu. Tu aurais pu les déclarer en variables au début:
DIM fs$, fr$, fb$
fs$ = "C:\TEMP\Script_test.txt"
fr$ = "C:\TEMP\Test_Script.htm"
fb$ = "C:\TEMP\Clipboard.bat"
par exemple...

Bon, ça ne marche pas chez moi, le fichier htm généré semble tronqué.
D'abord, le 1er script ne devrait-il pas commencer (après <body>) par <SCRIPT> ? chez moi ça commence par </SCRIPT>, puis la définition des images, puis <SCRIPT>...</SCRIPT>

Sujet: Re: Création d'un script image pour page web Dim 14 Mar 2010 - 0:43

Bonsoir JL35.

En effet, un programme tourne bien dans une situation donnée mais dès que l'on s'écarte des cas généraux, ça se complique. J'ai mis à jour ce programme et je vais en remettre une version plus correcte.

En effet, j'ai découvert les cas suivants:

1 - Je considérais le nom du fichier image avec 8 caractères + 4 pour l'extension. Mais je me suis rendu compte que parfois, le nom du fichier image peux avoirs + de 8 caractères (par exemple les images données plus haut dont la première s'appelle : fd_image_test.jpg). Premier point résolu.

2 - il faut que le chemin de toute les images soit identique sinon, ça coince. Et malheureusement il serais trop complexe de modifier le script à mon avis. Un exemple :

https://2img.net/h/i921.photobucket.com/albums/ad55/mggm2005-2/IMGP4421.jpg
https://2img.net/h/i921.photobucket.com/albums/ad55/mggm2005-2/IMGP4423.jpg
https://2img.net/h/i921.photobucket.com/albums/ad55/mggm2005-2/IMGP4422.jpg

Là c'est correct !

http://www.gettyimages.fr/images/marketing/frontdoorStill/DigitalVision/fd_image_test.jpg
http://www.gettyimages.fr/images/marketing/frontdoorStill/ComstockRF/78468822.jpg
http://www.gettyimages.fr/images/marketing/frontdoorStill/iStockRF/81226855.jpg
http://www.gettyimages.fr/images/marketing/frontdoorStill/StockbyteRF/sb10063511ak-001.jpg
http://www.gettyimages.fr/images/marketing/frontdoorStill/BrandXRF/82047759.jpg

Là c'est incorrecte, les image ne sont pas toute issues du même dossier web et mon utilitaire crée un mauvais script !

3 - Le fichier clipboard.bat est maintenant généré par l'utilitaire lui-même. Donc plus de soucis à ce niveau là.

Pour finir avec ta question sur les fichiers générés, fait la chose suivante :

Crée un dossier sur le bureau, et met y soit l'exécutable généré par le source, soit le source lui-même ainsi q'un raccourcis vers Panoramic Editor V 0.9.17. Dans ce dossier colle y aussi clip.exe. Ainsi, ton répertoire seras celui qui est pris par défaut tout le temps de l'exécution de l'utilitaire. Et normalement en cours d'exécution justement, lorsqu'ils sont censé avoir été générés, (SCRIPT_text.txt et test_script.htm) ceux ci peuvent être ouvert avec le bloc-notes pour visualisation. et test éventuel à la main (test_script.htm)

Quant à mon source, je vais essayer de le modifier pour qu'il soit moins galère à mettre ici.

N'hésite pas si tu trouve d'autres trucs bizarre.

A Plus.

Sujet: Re: Création d'un script image pour page web Dim 14 Mar 2010 - 1:32

Bonsoir à tous.

Voici de nouveau ma source mise à jour. En effet, cet utilitaire marchait bien dans les cas généraux mais parfois ça coinçait.

1 - Le nom du fichier dans l'adresse fait parfois comme je l'ai découvert plus de 8 caractères. Résolu, le programme en tient compte maintenant.

2 - Les images devrons venir toute du même dossier Web, et là malheureusement, dans le cas contraire, c'est trop complexe à corriger.

3 - créer un dossier pour y mettre soit le source (ainsi qu'un raccourcis vers Panoramic) soit l'exécutable crée à partir du source. Vous ajouterez clip.exe dans ce dossier. Le petit fichier bat n'est plus utile, le programme le crée lui-même. Ainsi, le problème du répertoire courant est résolu.

Si vous avez du mal à rapatrier le source depuis ici, dite le moi dans ma boîte mel et je vous enverrais ce source dans un zip.

Je joint cette fois aussi, des liens vers des images gratuites qui elles fonctionneront correctement pour essayer le programme. En effet, ces images sont toutes issue du même dossier Web. En l'occurance : http://www.photo-fotos.com/galleries/ANIMAUX-CHATS/

Oui, c'est vrai, j'aime les chats.

Voici donc le source remanié:

Code:: label Nouveau,ChercheCodes,Sortie
label CreationDuCode,TestCode,Quitter
dim New,i,j,k,code$(20),Long
dim Slash,adresse$,a$

width 0,600:caption 0,"Création du SCRIPT":height 0,630

alpha 1:top 1,20:left 1,40
caption 1,"Tapez (coller...) dans chaques champs l'adresse d'une photo à afficher"

alpha 2:top 2,40:left 2,40
caption 2,"et cela l'une après l'autre ..."

alpha 3:top 3,60:left 3,40
caption 3,"Evitez de laisser un champ vide avant le dernier !"

' Liste invisible pour créer le script généré
' et le copier dans le presse-papiers
dlist 6

' Liste invisible pour créer le fichier html de test
dlist 7

' Liste invisible pour créer un fichier batch
dlist 8

' 20 lignes d'édition contenant les 20 images maximum à afficher
edit 101:top 101,90 :left 101,15:width 101,400:on_change 101,ChercheCodes
edit 102:top 102,115:left 102,15:width 102,400:on_change 102,ChercheCodes
edit 103:top 103,140:left 103,15:width 103,400:on_change 103,ChercheCodes
edit 104:top 104,165:left 104,15:width 104,400:on_change 104,ChercheCodes
edit 105:top 105,190:left 105,15:width 105,400:on_change 105,ChercheCodes
edit 106:top 106,215:left 106,15:width 106,400:on_change 106,ChercheCodes
edit 107:top 107,240:left 107,15:width 107,400:on_change 107,ChercheCodes
edit 108:top 108,265:left 108,15:width 108,400:on_change 108,ChercheCodes
edit 109:top 109,290:left 109,15:width 109,400:on_change 109,ChercheCodes
edit 110:top 110,315:left 110,15:width 110,400:on_change 110,ChercheCodes
edit 111:top 111,340:left 111,15:width 111,400:on_change 111,ChercheCodes
edit 112:top 112,365:left 112,15:width 112,400:on_change 112,ChercheCodes
edit 113:top 113,390:left 113,15:width 113,400:on_change 113,ChercheCodes
edit 114:top 114,415:left 114,15:width 114,400:on_change 114,ChercheCodes
edit 115:top 115,440:left 115,15:width 115,400:on_change 115,ChercheCodes
edit 116:top 116,465:left 116,15:width 116,400:on_change 116,ChercheCodes
edit 117:top 117,490:left 117,15:width 117,400:on_change 117,ChercheCodes
edit 118:top 118,515:left 118,15:width 118,400:on_change 118,ChercheCodes
edit 119:top 119,540:left 119,15:width 119,400:on_change 119,ChercheCodes
edit 120:top 120,565:left 120,15:width 120,400:on_change 120,ChercheCodes

button 130:top 130,85:left 130,435:width 130,130 : hide 130
caption 130,"Nouveau Script" : on_click 130,Nouveau

button 131:top 131,160:left 131,435:width 131,130 : hide 131
caption 131,"Créer le code à copier" : on_click 131,CreationDuCode

button 132:top 132,200:left 132,435:width 132,130 : hide 132
caption 132,"Afficher un test du code" : on_click 132,TestCode

button 133:top 133,300:left 133,435:width 133,130
caption 133,"Quitter le programme" : on_click 133,Quitter

' On a besoin d'un fichier batch d'une seule ligne
item_add 8,"clip < script_text.txt"
file_save 8,"clipboard.bat"

' Fin du programme principal
end

REM *******************************************
' Partie de code contenant les routines évènements

' Nouveau code à créer...
Nouveau:
New=1
hide 130: clear 6: clear 7
for i = 101 to 120
text i,""
next i
hide 131 : hide 132
New=0
return

' On a besoin d'une partie du texte contenu
' dans chaque adresses des images
ChercheCodes:
if New=1 then goto Sortie
j=100 : k=0
for i=1 to 20
j=j+1
if text$(j) = "" then exit_for

code$(i)=text$(j)
Long = len(code$(i))
Slash=instr(code$(i),"/")

while Slash > 0
code$(i)=right$(code$(i),Long-Slash)
Slash = instr(code$(i),"/")
Long=len(code$(i))
end_while
code$(i)=left$(code$(i),Long-4)
k=j-100

next i

Long=len(text$(101))
if Long>0 then adresse$ = left$(text$(101),Long-len(code$(1))-4)
show 130 : show 131

Sortie:
return

CreationDuCode:
' Compilation du script pour affichage d'images
' multiples dans une page HTML
clear 6
item_add 6,"</SCRIPT>" : item_add 6,""
a$="<P align=center><IMG id=" + code$(1) + " height=500" : item_add 6,a$
a$="src=" + chr$(34) + text$(101) + chr$(34) + "></P>"
item_add 6,a$ : item_add 6,""

for i = 1 to k
a$="<IMG class=cssImage id=" + code$(i) + " onclick="+chr$(34)+"changeMonImage('"+code$(i)+"');"+chr$(34)+" height=47"
item_add 6,a$
a$="src="+chr$(34)+text$(100+i)+chr$(34)+">" : item_add 6,a$ : item_add 6,""
next i
item_add 6,"<BR><SPAN class=texteAnnonceSmall>Cliquez sur les miniatures pour agrandir l'image.</SPAN>"
item_add 6,""
a$="<SCRIPT>var repsite="+chr$(34)+adresse$+chr$(34)+";" : item_add 6,a$
item_add 6,""
a$="var prems="+chr$(34)+code$(1)+chr$(34)+";" : item_add 6,a$
item_add 6,""
a$="function changeMonImage(a){document.getElementById(prems).src=repsite+a+"+chr$(34)+".jpg"+chr$(34)+";}"
item_add 6,a$
item_add 6,""
item_add 6,"</SCRIPT>"

' On enregistre ce script compilé pour usage ultérieur
file_save 6,"SCRIPT_text.txt"

show 132

' On lance l'astuce pour envoi du code dans le presse papier :
execute "clipboard.bat"
return

TestCode:
' On crée une page HTML de test dans laquelle on insère notre script
clear 7

' En-tete minimum d'une page HTML
item_add 7,"<html>"
item_add 7,"<head>"
item_add 7,"<title>Test du script image</title>"
item_add 7,"</head>"
item_add 7,"<body>"

' Insertion de notre SCRIPT dans cette page html
file_add 7,"SCRIPT_text.txt"

' puis finition de la page HTML de test
item_add 7,""
item_add 7,"</body>"
item_add 7,"</html>"

' on enregistre cette page de test
file_save 7,"test_script.htm"

' puis on lance l'affichage de cette page
execute "test_script.htm"
return

Quitter:
Terminate

Les images maintenant :

http://www.photo-fotos.com/galleries/ANIMAUX-CHATS/chats-arbres-animaux.jpg
http://www.photo-fotos.com/galleries/ANIMAUX-CHATS/chat-vitrine.jpg
http://www.photo-fotos.com/galleries/ANIMAUX-CHATS/chats-affection-calins.jpg
http://www.photo-fotos.com/galleries/ANIMAUX-CHATS/chats-groupe-parc-animaux.jpg
http://www.photo-fotos.com/galleries/ANIMAUX-CHATS/chat-fenetre-regard-yeux-animal.jpg

Alors, tester et dites-moi ou ça coince.

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

Eh bien , 1er test
Je récupère une erreur d'entrée dès que je rentre un caractère dans le 1er champ, ligne 100 (appel de la fonction avec une valeur négative):

Code:: code$(i)=left$(code$(i),Long-4)

(je veux rentrer une adresse d'image à moi de la forme: C:\...)

PS. En fait, je vois pourquoi: il faut rentrer les adresses des images par copier/coller de l'adresse complète, sinon ça coince s'il n'y a pas un minimum de caractères (ce qui est toujours le cas si on tape à la main).
Mais ça ne génère toujours pas mes images.
Je regarde le script généré, ça me choque qu'il commence par un </SCRIPT> qui n'est pas précédé d'un <SCRIPT>, c'est contraire aux règles du html ?

Une remarque d'ordre général: l'expérience m'a appris qu'il vaut mieux paramétrer au maximum les variables, pour soi d'abord, et puis pour les autres qui sont amenés à se plonger dans le programme.
Et pour le cas où on voudrait les modifier: une seule modif au lieu d'aller à la pêche dans tout le programme, avec les risques d'erreurs ou d'oublis.
Et c'est bien plus pratique pour un autre pour adapter le programme à son propre environnement.
Par exemple ici les noms de fichiers temporaires utilisés, qui sont répétés plusieurs fois dans le programme, ou les noms d'exécutables appelés: une seule définition au début, par exemple:

Code:: dim fs$, fb$, fh$
fs$ = "C:\Temp\script_text.txt"
fb$ = "C:\Temp\clipboard.bat"
fh$ = "C:\Temp\test_script.htm"

On sait d'entrée où sont les fichiers créés (pour un examen 'manuel' éventuel), et ensuite c'est plus pratique pour faire le ménage après essai et ne pas laisser traîner un peu partout des fichiers temporaires.

Concernant la longueur des lignes du source, parfois c'est un peu difficile de compacter, mais dans ton cas tu aurais pu faire deux lignes au lieu d'une:
a$ = blabla + toto + .....
a$ = a$ + zaza + ....

C'est un peu pénible d'avoir à chaque essai (pas cette fois-ci puisque ça coince tout de suite) à retaper la liste complète des images, il aurait pu être possible de récupérer cette liste dans un fichier texte ? tapé une fois pour toutes, et modifiable facilement, à froid, au bloc-notes.

Dernière édition par vicmac le Jeu 18 Mar 2010 - 17:38, édité 4 fois

Ca y est, j'ai fini de déboguer mon utilitaire, en prenant en compte des observations d'utilisateurs et surtout pour l'avoir utilisé en "vrai grandeur", des bizareries étant apparues.

Je répète vite fait à quoi sert ce programme :
Un ami qui créait des annonces sur Ebay, faisait beaucoup d'images pour illustrer ses objets vendu. Ces images étaient en vrais grandeur et la page faisait souvent des KMs de haut. Au point de faire chauffer la roulette souris. Ouf Ouf.

En regardant d'autre annonces, j'ai découvert un script dans un texte html qui permettait de montrer différament les images. Mais le remanier pour différente annonces, devenais vite fastidieux.. D'ou l'idée de ce petit utilitaire qui fait tout pour nous. Il possède des champs qui permettent d'incorporer les coordonnées de nos images, de créer dans le presse-papier le srcipt alors complet qu'on à plus qu'à coller dans le texte html à l'endroit adéquate.

Ainsi, sous windows, on à l'habitude de bosser sur plusieurs fenêtre à la fois :

- Une fenêtre avec une page html (ou une annonce Ebay...) en cours de fabrication.
- Une fenêtre ouverte sur notre ébergeur de photo (Flickr, PhotoBucket...)
- Enfin notre utilitaire.

Ya plus qu'a copier l'url d'une photo, le coller dans l'utilitaire et quant toutes les photos sont renseignées, créer le script (bouton Créer le code à copier ) et coller ce code dans notre page html en cours de fabrication.
Simple non ?

Soit par exemple, 5 images. Elles seront présentée comme ceci :

Dans notre série de 5 images, la première apparaitra en gros au milieu (par rapport à l'horizontale). Puis ces images réapparaitrons toutes en mode de vignettes en bas de celle placées en gros au milieu.

Alors, en cliquant sur une des vignettes, l'image concerrnée par la vignette seras à son tour affichée en gros à la place de la première etc, etc.

Je vous joint pour exemple, 5 images libres de droit qui vous permettrons de vous faire la main avec cet utilitaire:

http://www.photo-fotos.com/galleries/ANIMAUX-CHATS/chats-arbres-animaux.jpg
http://www.photo-fotos.com/galleries/ANIMAUX-CHATS/chat-vitrine.jpg
http://www.photo-fotos.com/galleries/ANIMAUX-CHATS/chats-affection-calins.jpg
http://www.photo-fotos.com/galleries/ANIMAUX-CHATS/chats-groupe-parc-animaux.jpg
http://www.photo-fotos.com/galleries/ANIMAUX-CHATS/chat-fenetre-regard-yeux-animal.jpg

Je retient votre attention sur les points suivants :

- la ligne à entrer ou coller dans chaque champs pour chaques image, auras donc la forme :
http........jpg

- Le chemin (l'adresse url) de toutes les images devra être toujours le même. Par exemple pour les 5 images de chats vu plus haut, ce chemin est :
http://www.photo-fotos.com/galleries/ANIMAUX-CHATS/

- Le programme éxécutable crée par Panoramic (par exemple : Script.exe) devras toujours être accompagné de son fidèle compagnon clip.exe. Vis à vis de clip.exe, voir plus haut (messages précédent...) comment l'obtenir.

- script exe, vas créer 3 fichiers : clipboard.bat, script_texte.txt et éventuelement script_html.htm. Ce dernier fichier n'est crée que si vous faite un test en html du script compilé généré. Sachez, que le fichier clipboard.bat est réecris à chaques démarrage du logiciel. les deux autres sont réecris à chaque création de script. Donc, pour être tranquile, metter dans un dossier clip.exe et script.exe et travaillez depuis ce dossier.

Voila enfin ce code :

Code:: REM *************************************************
REM
REM ' Compilation d'un script pour affichage
REM ' d'images multiples dans une page HTML
REM
REM ' La première en gros centrée sur la page
REM ' Puis toutes les images en vignettes cliquables en dessous.
REM
REM ' Cliquez sur une vignette et l'image concernée
REM ' apparaitra à la place de la première....
REM
REM Comme on ne réussis pas toujour tout dès la
REM première fois, et que en plus j'essaye de tenir
REM compte d'avis de gens qui on essayé ce programme,
REM celui-ci à donc été mis à jour.
REM
REM Ce source est donc la VERSION N°3
REM -----------
REM *************************************************

label Nouveau,ChercheCodes,SauteChamp,Sortie
label ChercheAdresse,CreationDuCode,TestCode,Quitter

dim FichierBatch$,FichierTexte$,FichierHtml$
dim NewScript,NumChamp,Champ,NbImages,code$(20),Long
dim Slash,adresse$,a$

FichierBatch$ = "clipboard.bat"
FichierTexte$ = "SCRIPT_texte.txt"
FichierHtml$ = "SCRIPT_html.htm"

width 0,600:caption 0,"Création du SCRIPT":height 0,630

alpha 25:top 25,20:left 25,40
caption 25,"Tapez (coller...) dans chaques champs l'adresse d'une photo à afficher"

alpha 26:top 26,40:left 26,40
caption 26,"et cela l'une après l'autre ..."

check 27: top 27,63:left 27,40:width 27,300
caption 27,"Effacer les fichiers crés lors de la sortie du programme."

' Liste invisible pour créer le script généré
dlist 30

' Liste invisible pour créer le fichier html de test
dlist 31

' 20 lignes d'édition contenant les 20 images maximum à afficher
edit 1:top 1,90 :left 1,15:width 1,400:on_change 1,ChercheCodes
edit 2:top 2,115:left 2,15:width 2,400:on_change 2,ChercheCodes
edit 3:top 3,140:left 3,15:width 3,400:on_change 3,ChercheCodes
edit 4:top 4,165:left 4,15:width 4,400:on_change 4,ChercheCodes
edit 5:top 5,190:left 5,15:width 5,400:on_change 5,ChercheCodes
edit 6:top 6,215:left 6,15:width 6,400:on_change 6,ChercheCodes
edit 7:top 7,240:left 7,15:width 7,400:on_change 7,ChercheCodes
edit 8:top 8,265:left 8,15:width 8,400:on_change 8,ChercheCodes
edit 9:top 9,290:left 9,15:width 9,400:on_change 9,ChercheCodes
edit 10:top 10,315:left 10,15:width 10,400:on_change 10,ChercheCodes
edit 11:top 11,340:left 11,15:width 11,400:on_change 11,ChercheCodes
edit 12:top 12,365:left 12,15:width 12,400:on_change 12,ChercheCodes
edit 13:top 13,390:left 13,15:width 13,400:on_change 13,ChercheCodes
edit 14:top 14,415:left 14,15:width 14,400:on_change 14,ChercheCodes
edit 15:top 15,440:left 15,15:width 15,400:on_change 15,ChercheCodes
edit 16:top 16,465:left 16,15:width 16,400:on_change 16,ChercheCodes
edit 17:top 17,490:left 17,15:width 17,400:on_change 17,ChercheCodes
edit 18:top 18,515:left 18,15:width 18,400:on_change 18,ChercheCodes
edit 19:top 19,540:left 19,15:width 19,400:on_change 19,ChercheCodes
edit 20:top 20,565:left 20,15:width 20,400:on_change 20,ChercheCodes

button 130:top 130,85:left 130,435:width 130,130 : hide 130
caption 130,"Nouveau Script" : on_click 130,Nouveau

button 131:top 131,160:left 131,435:width 131,130 : hide 131
caption 131,"Créer le code à copier" : on_click 131,CreationDuCode

button 132:top 132,200:left 132,435:width 132,130 : hide 132
caption 132,"Lancer un test du code" : on_click 132,TestCode

button 133:top 133,300:left 133,435:width 133,130
caption 133,"Quitter le programme" : on_click 133,Quitter

' On a besoin d'un fichier batch d'une ligne.
' On crée cette ligne.
item_add 30,"clip < " + FichierTexte$

' Puis on enregistre ce fichier Batch obtenu.
file_save 30,FichierBatch$

' Fin du programme principal
end

REM *******************************************
' Partie de code contenant les routines évènements

Nouveau:
' Nouveau code à créer...
' On réinitialise certains champs et
' on cache des boutons devenus non-valide
NewScript=1
hide 130: hide 131: hide 132
clear 30: clear 31

for NumChamp = 1 to 20
text NumChamp,""
next NumChamp

NewScript=0
return

ChercheCodes:
' Pour châque images, on à besoin du nom du fichier,
' celui-ci servira de code et seras stocké dans un
' tableau de chaînes code$(NbrImages)

' Ex: http://www.photo-fotos.com/galleries/ANIMAUX-CHATS/chat-vitrine.jpg
' Le code recherché -> "chat-vitrine"

if NewScript=1 then goto Sortie

Champ=0 : NbImages=0
for NumChamp=1 to 20
Champ=Champ+1
' On passe ce qui est dans le champ en minuscules
a$=lower$(text$(Champ))
if a$ = "" then goto SauteChamp

' La ligne est-elle valide ? -> http.......jpg
' sinon on quite...
if instr(a$,"http")=0 or instr(a$,".jpg")=0 then goto Sortie

code$(NumChamp)=a$
Long = len(code$(NumChamp))
Slash=instr(code$(NumChamp),"/")

while Slash > 0
code$(NumChamp)=right$(code$(NumChamp),Long-Slash)
Slash = instr(code$(NumChamp),"/")
Long=len(code$(NumChamp))
end_while
code$(NumChamp)=left$(code$(NumChamp),Long-4)
NbImages=Champ

SauteChamp:
next NumChamp

' On à au moins un champ remplit ?
' Oui, alors on affiche le bouton "Nouveau Script"
If NbImages >0 then show 130

' Il faut au minimum 2 images pour un script fonctionnel
If NbImages > 1 Then show 131

Sortie:
return

ChercheAdresse:
' Ici, on cherche l'adresse (le chemin du dossier web) des
' images. D'ou obligation que ce soit le même pour toutes
' les images.

' Ex: http://www.photo-fotos.com/galleries/ANIMAUX-CHATS/chat-vitrine.jpg
' Ici, adresse$="http://www.photo-fotos.com/galleries/ANIMAUX-CHATS/"

' On vas chercher cette 'adresse$' dans le premier champ
Long=len(text$(1))
adresse$ = left$(text$(1),Long-len(code$(1))-4)

return

CreationDuCode:
gosub ChercheAdresse
' Compilation du script
' (Mélange entre un script html trouvé ailleur et les
' données (adresse et noms de fichiers !) de nos images)

' Rappel: chr$(34) = " (Guillemet...)

clear 30
a$="<P align=center><IMG id=" + code$(1) + " height=500"
item_add 30,a$
a$="src=" + chr$(34) + text$(1) + chr$(34) + "></P>"
item_add 30,a$
a$="<P align=center>"
item_add 30,a$

' Partie du code répété pour châques images
' (celles-ci seront en vignettes dessous la première !)
for NumChamp = 1 to NbImages

a$="<IMG class=cssImage id=" + code$(NumChamp)
a$=a$ + " onclick="+chr$(34)+"changeMonImage('"
a$=a$ + code$(NumChamp) + "');"+chr$(34)+" height=47"
item_add 30,a$
a$="src="+chr$(34)+text$(NumChamp)+chr$(34)+">"
item_add 30,a$

next NumChamp

a$ = "<BR><SPAN class=texteAnnonceSmall>Cliquez sur les miniatures"
a$ = a$ + " pour agrandir l'image.</SPAN></P>"
item_add 30,a$
a$="<SCRIPT>var repsite="+chr$(34)+adresse$+chr$(34)+";"
item_add 30,a$
a$="var prems="+chr$(34)+code$(1)+chr$(34)+";"
item_add 30,a$
a$="function changeMonImage(a){document.getElementById(prems).src="
a$=a$+"repsite+a+"+chr$(34)+".jpg"+chr$(34)+";}"
item_add 30,a$
item_add 30,"</SCRIPT>"

' On enregistre ce script compilé pour usage ultérieur
file_save 30,FichierTexte$

' On exécute le fichier Batch pour envoi du code dans le presse papier :
execute FichierBatch$

' Un script à été crée,
' on peux afficher le bouton "Lancer un test du code"
show 132

return

TestCode:
' On crée une page HTML de test dans laquelle on insère notre script
clear 31

' En-tete minimum d'une page HTML
item_add 31,"<html>"
item_add 31,"<head>"
item_add 31,"<title>Test du script image</title>"
item_add 31,"</head>"
item_add 31,"<body>"

' Insertion de notre SCRIPT dans cette page html
file_add 31,FichierTexte$

' puis finition de la page HTML de test
item_add 31,"</body>"
item_add 31,"</html>"

' on enregistre cette page de test
file_save 31,FichierHtml$

' puis on lance l'affichage de cette page
execute FichierHtml$

return

Quitter:
' A la sortie, si l'option est cochée,
' on éfface les fichiers créés
If checked(27)=1
if file_exists(FichierBatch$)=1 then file_delete FichierBatch$
if file_exists(FichierTexte$)=1 then file_delete FichierTexte$
if file_exists(FichierHtml$)=1 then file_delete FichierHtml$
end_if
Terminate

Comme vous le voyez, il est hyper documenté. J'ai essayé aussi de pouvoir facilement le rapatrier sans génération de saut de lignes intempestifs.

Maintenant, à vous de bosser un peux.

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

Je viens d'essayer rapidement, je rentre 4 adresses d'images, mais ensuite je n'ai pas d'autre choix que de 'Quitter le programme' (pas d'autre bouton... ???

Sujet: Re: Création d'un script image pour page web Jeu 18 Mar 2010 - 15:54

Salut JL35.

Là, tu m'étonne, normalement à partir de 2 champs remplis, le programme devrais ré-afficher les boutons "Nouveau script" et "Créer le code à copier".

Tiens, voici la partie du code concernée :

Code:: ' On à au moins un champ remplit ?
' Oui, alors on affiche le bouton "Nouveau Script"
If NbImages >0 then show 130

' Il faut au minimum 2 images pour un script fonctionnel
If NbImages > 1 Then show 131

130 étant le bouton "Nouveau script" et le 131 le bouton "Créer le code à copier"

Ces lignes sont en 144 et 149 lorsque on demande de numéroter les ligne dans Panoramic.

J'ai même essayé de taper à la main dans le premier champ une adresse d'image, et lorsque j'atteint le 'g' de jpg, il affiche le premier bouton.

Puis, dans le deuxième champs, lorsque je tape le 'g' de jpg, le deuxième bouton s'affiche.

Es-tu bien sûr que le lien vers tes images est bien de la forme : http......image.jpg ?

Comme je te le disais en message privé, dans une prochaine version, on pourrais choisir la source de l'image (http, C:\, \\DossierReseau...) ainsi que son extension (jpg, png, gif ou bmp).
Pour l'instant, il faut te limiter à des images stockées sur le web. Tu comprend ?

Étudie cette ligne de programme (ligne 127 !) :

Code:: if instr(a$,"http")=0 or instr(a$,".jpg")=0 then goto Sortie

Haaa ou alors j'ai compris, tu tape soit http, soit jpg en MAJUSCULE. Effectivement, le programme les considères en miniscule.

Alors, essaye encore et dis m'en plus. D'ac ?

A plus...

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

Non, ce n'est pas ça, mais c'est que je rentre des adresses d'images de mon disque dur, et non des adresses http...
Et ça ne marche pas comme ça, il faut des adresses du web.
Je vais revoir ça.

Sujet: Re: Création d'un script image pour page web Jeu 18 Mar 2010 - 16:14

Re...

N'empêche, je viens de me rendre compte que le problème des Majuscules/Minuscules est délicat. Je vais remédier à ça.

J'ai un peux de temps, je vais m'y mettre.

A plus...

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

Oui, là avec les adresse http ça marche bien, impeccable.
Idée à suivre, c'est intéressant...

Juste une petite remarque: à mon avis tu devrais indiquer le chemin complet des fichiers créés (clipboard et script) dans les définitions, pour qu'on sache où ils sont, pour:
- les effacer facilement en fin de tests (peut-être même le faire automatiquement en fin de programme)
- ou les retrouver pour les étudier ou les utiliser.

Je suis allé un peu à la pêche pour les retrouver sous C:\Program Files\Panoramic...\...
Mon idée générale c'est de ne pas laisser traîner sur mon disque dur des fichiers de test créés un peu n'importe où puis oubliés.

Pour les majuscules/minuscules, à mon avis c'est facile, il n'y à qu'à tout comparer systématiquement en majuscules, du genre:
k = INSTR(UPPER$(a$), UPPER$(b$))
ou k = INSTR(UPPER$(a$), "HTTP")

Sujet: Re: Création d'un script image pour page web Jeu 18 Mar 2010 - 16:59

Ho la la, c'est plus simple que ça:

la ligne (122)

Code:: a$=text$(Champ)

est remplacée par :

Code:: ' On passe ce qui est dans le champ en minuscules
a$=lower$(text$(Champ))

j'ai édité mon dernier envoi. le source est à jour à ce propos.

Au sujet des fichiers crées, c'est pour ça que je préconisais de créer un dossier facilement accessible (sur le bureau par exemple) dans lequel on met les programmes script.exe (le source crée en EXE) et clip.exe. ainsi, les fichier crées par ce programme sont crées dedans. Libre ensuite à l'utilisateur de les virer ou non. Tu comprend ?. On se crée un dossier de travail en somme.

Mais c'est vrai qu'une option pourrais être donnée d'effacer ces fichiers à la sortie du programme. Je vais y réfléchir.

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

Comparer en minuscules (lower$) au lieu de comparer en majuscules (upper$), ça me paraît strictement la même chose ?

Pour les fichiers, disons que le mieux est de laisser l'utilisateur libre de les mettre où il veut, où ça l'arrange, mais qu'il sache exactement ce qu'il fait. Et que ce soit clair dès l'en-tête du programme.

Sujet: Re: Création d'un script image pour page web Jeu 18 Mar 2010 - 17:43

Ça y est, c'est rectifié.

En tête de programme j'ai :

Code:: check 27: top 27,63:left 27,40:width 27,300
caption 27,"Effacer les fichiers crés lors de la sortie du programme."

Puis en routine de sortie :

Code:: Quitter:
' A la sortie, si l'option est cochée,
' on éfface les fichiers créés
If checked(27)=1
if file_exists(FichierBatch$)=1 then file_delete FichierBatch$
if file_exists(FichierTexte$)=1 then file_delete FichierTexte$
if file_exists(FichierHtml$)=1 then file_delete FichierHtml$
end_if
Terminate

C'est pas plus compliqué que ça. Ouf Ouf.

Sujet: Re: Création d'un script image pour page web Jeu 18 Mar 2010 - 17:44

J'ai aussi mis à jour le dernier source.

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

Oui, ça me paraît mieux comme ça. Comme ça on peut ne garder éventuellement que le fichier Html, le seul qui soit utile en sortie.
Eh, tu t'approches de la perfection !

Et pour la mise à jour du source, c'est mieux comme tu as fait de remplacer l'ancienne version par la nouvelle, en le signalant à la fin, plutôt que d'encombrer le topic avec les versions successives, surtout si c'est un peu long comme dans ton cas.

Sujet: Re: Création d'un script image pour page web Jeu 18 Mar 2010 - 18:01

Merci. C'est vrai que ça commence à avoir de la gueule mon petit utilitaire.

Sujet: Re: Création d'un script image pour page web Jeu 18 Mar 2010 - 18:04

C'est vrai mais qu'en est-il des gens qui on chargé le source à des date antérieur ?

Il faudrait prévoir que les gens qui on chargé un source soit tenu au courant que le source à depuis été modifié.

Je ne sais pas si c'est pris en compte sur ce forum ?

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

Eh bien, les gens qui ont chargé le source à des dates antérieures ont un source qui n'est pas à jour ! Et ils savent bien qu'il faut revenir de temps en temps voir s'il y a eu une mise à jour, c'est pour ça qu'il faut le signaler en fin de topic en précisant la date de la mise à jour.
Il n'y a pas moyen de faire autrement, il est impossible d'alerter individuellement tous ceux qui ont fait un copier/coller des versions antérieures, on ne les connaît pas tout simplement.

Sujet: Re: Création d'un script image pour page web Jeu 18 Mar 2010 - 18:42

Très juste, je mettrais dorénavant la date et l'heure de la mise à jour.

Sujet: Re: Création d'un script image pour page web Jeu 18 Mar 2010 - 18:46

En fait, nous sommes dans l'erreur tout les deux. Je vient de m'apercevoir qu'il y avais la date et l'heure à laquelle j'ai fait ma dernière modification. Les gens n'ont qu'à suivre m'enfin... Very Happy

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

Non, ce que je voulais dire c'est qu'il faut rajouter un post à la fin pour signaler qu'on a fait une mise à jour du source qui est plus haut, pour inciter ceux que ça intéresse à aller y voir.
Le changement de date au niveau du source ne suffit pas.

Sujet: Re: Création d'un script image pour page web Jeu 18 Mar 2010 - 21:01

Ha OK. Oui, dorénavant, je ferais un petit post pour avertir de la mise à jour.

» Appeler un script/ une page PHP?
» Aide pour la création d'un wrapper pour le langage Linotte.
» Création d'un cadre pour photo numérique
» Script pour afficher la configuration totale de votre ordi
» Chercher une page d'aide en ligne pour les fonctions KGF.dll