Utilisation de HVIEWER pour afficher des images

Sujet: Utilisation de HVIEWER pour afficher des images Lun 18 Sep 2017 - 15:22

L’objet système HVIEWER est utilisé pour visualiser un fichier au format HTML.
Pour insérer une image, on utilise la balise <IMG> avec les deux attributs
SRC et ALT.
L’attribut SRC (source), on doit le renseigner avec l’URL de l’image qui indique où se trouve l’image (sur le web, sur un autre serveur, sur le disque dur du PC, etc.)
L’attribut ALT (texte alternatif) est utilisé pour être affiché lorsque, pour une raison ou une autre, l’image n’a pas pu être chargée (url inexacte, image non trouvée, etc.)
En l’absence de ALT, si l’image ne peut pas être affichée, le système affiche un point d’exclamation, ce qui est inesthétique.
C’est pour cela qu’il est préférable utiliser l’attribut ALT.
Les formats des images peuvent être : jpg, bmp, gif, png, ...

On procède comme ceci : d’abord, on crée l’objet HVIEWER

Code:: hviewer 10

Puis on définit ses attributs : dimension et position

Code:: Width 10,w
Height 10,h
Top 10,t
Left 10,l

Ensuite, on y charge un fichier HTML pour le visualiser

Code:: File_load 10, "mon_fichier.htm"

Et c’est tout !

La question que l’on se pose : Le fichier HTML, c’est quoi ? Que contient-il ? Comment le créer ?
Bien que je ne sois pas particulièrement spécialisé dans le HTML, je vais tenter de donne une explication.
HTML : HyperText Markup Language est le format de données conçu pour représenter les pages web. C'est un langage de balisage permettant d'écrire de l'hypertexte, d'où son nom.
Je m’intéresse ici uniquement à comment insérer des images dans un fichier HTML.
Une image est définie par la balise <img> avec les deux attributs SRC et ALT.
L’attribut SRC indique l’endroit et le nom de l’image à utiliser.
L’attribut ALT, c’est pour afficher un texte alternatif si l’image n’a pas pu être affichée (image non trouvée ou connexion trop lente, etc.)
Un autre attribut peut être utilisé, c’est l’attribut STYLE.
L’attribut STYLE, c’est pour indiquer la largeur et la hauteur de l’image.
Exemples :

Code:: <img src="mon_image.gif" alt="Désolé image non trouvée !!!" style="width:128px;height:128px;">

Ou

Code:: <img src="mon_image.gif" alt="Désolé image non trouvée !!!" width="128" height="128">

Il est recommandé d’utiliser l’attribut STYLE au lieu de width= et height= pour prévenir un changement interne ou externe des dimensions de l’image.
On peut aussi s’en passer de ces attributs et utiliser width et height pour le HVIEWER en panoramic.

Voici un code en Panoramic qui défini une procédure SUB Affiche_image(…).
Les exemples d’utilisation sont dans le code.
Le code a besoin des images pour pouvoir fonctionner.
Ces image sont sur mon webdev dans le fichier HVIEWER.ZIP
Bien sûr vous pouvez utiliser vos propres images ; le code n’est qu’un exemple de comment utiliser l’objet HVIEWER.

Voici le résultat du code ( mon écran est 1600/900)
La sphère est une image png
Le Fumeur (4G Uncle) est une image bmp
Les autres sont des gif.

Spoiler:

Code:: rem ============================================================================
rem Utilisation de HVIEWER
rem Pour afficher des images
rem ============================================================================
' L’objet système HVIEWER est utilisé pour visualiser un fichier au format HTML.
' Pour insérer une image, on utilise la balise <IMG> avec les deux attributs
' SRC et ALT.
' L’attribut SRC (source), on doit le renseigner avec l’URL de l’image qui
' indique où se trouve l’image (sur le web, sur un autre serveur, sur le disque
' dur du PC, etc.)
' L’attribut ALT (texte alternatif) est utilisé pour être affiché lorsque pour
' une raison ou une autre, l’image n’a pas pu être chargée (url inexacte,
' image non trouvée, etc.)
' En l’absence de ALT, si l’image ne peut pas être affichée, le système affiche
' un point d’exclamation, ce qui est inesthétique.
' C’est pour cela qu’il est préférable utiliser l’attribut ALT.
' Les formats des images peuvent être : jpg, bmp, gif, png, ...
rem ============================================================================
' L’appel à la procédure Affiche_Image(f$,w,h,x,y) se fait avec les paramètres
' f$ : url de l’image contenant l’emplacement et le nom de l’image
' w,h : respectivement largeur (WIDTH) et hauteur (HEIGHT) de l’objet HVIEWER
' x,y : position du HVIEWER sur le FORM, respectivement LEFT et TOP
rem ============================================================================
dim n,f$
n = 9900 : ' Numéro du 1er HVIEWER, (à modifier éventuellement); les suivants seront n+1
full_space 0 : color 0,150,100,50
caption 0,"PANORAMIC AFFICHE LES GIF, JPG, BMP, PNG, ... "
alpha 10 : top 10,50 : left 10,400 : font_bold 10 : font_name 10,"arial"
font_size 10,20 : caption 10,"Veuillez patienter ... chargement en cours ..."
dir_change dir_current$
f$ = dir_current$ + ""
rem ============================================================================
' Exemples d'appel

Affiche_Image(f$+"Mandelbrot.gif",350,260,1120,230) : ' image GIF
Affiche_Image(f$+"z^3_anim.gif",440,340,1110,490) : ' image GIF
' Affiche_Image(f$+"Cavaliere.gif",370,240,1120,550) : ' image GIF
Affiche_Image(f$+"sphere.png",400,420,10,10) : ' image PNG
Affiche_Image(f$+"4G.bmp",400,400,10,420) : ' image BMP
Affiche_Image(f$+"Rose.gif",320,530,410,10) : ' image GIF
Affiche_Image(f$+"Paysage.gif",380,530,730,10) : ' image GIF
Affiche_Image(f$+"Anes.gif",350,230,1120,1) : ' image GIF
Affiche_Image(f$+"Papydall.gif",680,100,420,550) : ' image GIF
Affiche_Image(f$+"Martien.gif",100,150,500,670) : ' image GIF
Affiche_Image(f$+"Martien.gif",100,150,700,670) : ' image GIF
Affiche_Image(f$+"Martien.gif",100,150,900,670) : ' image GIF

end
rem ============================================================================
SUB Affiche_Image(f$,w,h,x,y)
   DIM_LOCAL html$,q$,alt$
   q$ = chr$(34) : ' caractère guillemet
   alt$ = "!!! Image non trouvée !!! Vérifiez votre chemin !!!" : ' texte alternatif
   html$ = "C:\temp\code.htm"
   FILE_OPEN_WRITE 10,html$
   FILE_WRITELN 10,"<html>"
   FILE_WRITELN 10,"<img src=" + q$ + f$ + q$ +" alt=" + q$ + alt$ + q$ + " >"
   FILE_WRITELN 10,"</html>"
   FILE_CLOSE 10
   HVIEWER n
   width n,w : height n,h : top n,y : left n,x
   FILE_LOAD n,html$ : FILE_DELETE html$
   n = n + 1
END_SUB
rem ============================================================================

Bonjour Papydall,

Je viens d'essayer ton code, mais j'ai toujours le même problème, le chargement des fichiers ne passe pas à cause des espaces.

En utilisant DIR_CHANGE DIR_CURRENT$ et en nommant simplement les fichiers par leur nom, ton code fonctionne parfaitement. Exactement comme dans ce fil de discussion => Panoramic et les gifs animés.

Salut Jean Claude.

Citation :: En utilisant DIR_CHANGE DIR_CURRENT$ et en nommant simplement les fichiers par leur nom, ton code fonctionne parfaitement

Mon code utilise bien DIR_CHANGE DIR_CURRENT$.
Le fichier Hviewer.zip contient le dossier Hviewer ; tu le mets où tu veux.
Le programme Affiche_image.bas , comme tel, s’exécute correctement sans broncher : les noms des fichiers ne comportent pas des caractères espace.
Pour d’autres dossiers / fichiers avec des espaces, il faut adapter au cas par cas.

A propos que penses-tu de l’invention du fume-cigarette 4D ?
Moi-même j'étais un grand fumeur (jusqu'à trois paquets de cigarettes par jour !!!) et je n'ai jamais eu l'idée d'une telle invention.
Nb : j'ai cessé de fumer depuis 2003, voici 14 ans déjà !

» utilisation de HVIEWER
» Pour les débutants ;) Afficher un panneau avec deux....
» Cards.dll pour afficher un jeu de 52 cartes
» Script pour afficher la configuration totale de votre ordi
» Utilisation de KGF.dll pour manipuler une fenêtre