HTML to DATA

Bonjour à tous !

J’ai créé un petit utilitaire qui permet d’intégrer dans un code-source Panoramic, une page HTML sous forme de lignes de DATAs.

Le contenu des lignes de DATAs sera lu puis envoyé dans un HVIEWER pour visualisation.

Cet utilitaire possède une rubrique « à propos » réalisée avec cette technique. Tout son contenu provient des lignes DATAs intégrées au programme.

Pour plus de précisions, lisez l'à propos !

Copie d'écran de l'interface utilisateur :

Copie d'écran du HVIEWER de l'à propos :

Le code-source :

Code:: ' HTML to DATAs v1.00
' Marc - Mai 2024
' Ecrit en langage informatique PANORAMIC 0.9.29.i9

dim dossier$, nomFichierHMTL$, numLigne%, ligne$, texte$, texte_1$, texte_2$, car$, index%, pos%, a$, modif%, null%

label afficherMEMOs, chargerFichierHTML, testNavigateur, testHTMLsurHviewer, convertir, sublimeText
label copierDATAs, testDatasHviewer, afficherApropos, memoModif, quitter

data "<html><head></head><body bgcolor="+chr$(34)+"#FFFFFF"+chr$(34)+" text="+chr$(34)+"#333333"+chr$(34)+" link="+chr$(34)+"GREEN"+chr$(34)+">"
data " HTML to DATA<blockquote>Ce programme convertit une page HTML en lignes de DATAs destinées à être insérées dans un code-source PANORAMIC. Le contenu de ces lignes pourra être visualisé dans un objet système HVIEWER."
data "L’interface utilisateur est composée de sept boutons de commande et de cinq MEMOs. Chaque MEMO peut être visible ou caché à l’aide d’une case à cocher (CHECK). "
data " Les boutons de commande :<hr size="+chr$(34)+"1"+chr$(34)+" noshade width="+chr$(34)+"100%"+chr$(34)+" color="+chr$(34)+"#808080"+chr$(34)+">"
data "<ul><li>Bouton « Charger un fichier HTML » : ouvre une fenêtre de dialogue permettant de naviguer dans vos disques pour rechercher et sélectionner le fichier HTML souhaité.</li><li>Bouton « Test HTML sur navigateur » : ouvre le navigateur Internet par défaut de Windows et affiche le fichier HTML précédemment chargé.</li>"
data "<li>Bouton « Test HTML sur HVIEWER » : Affiche le fichier HTML dans un HVIEWER.</li><li>Bouton « Test DATA sur HVIEWER » : Lit le contenu des lignes DATAs créées et affiche le rendu dans un HVIEWER.</li>"
data "<li>Bouton « Relancer le traitement du fichier HTML » : Dans le premier MEMO, vous pouvez modifier le code HTML du fichier source et relancer le processus de conversion en ligne de DATAs.</li>"
data "<li>Bouton « Sublime TEXT » : lance l’éditeur Sublime Text s’il a été installé dans l’ordinateur, dans le répertoire par défaut (C:\Program Files\Sublime Text\).</li><li>Bouton « Copier les lignes DATAs dans le presse-papiers » : après copie dans le presse-papiers, "+chr$(34)+"collez"+chr$(34)+" les lignes dans votre code-source PANORAMIC.</li>"
data "</ul> Les MEMOs :<hr size="+chr$(34)+"1"+chr$(34)+" noshade width="+chr$(34)+"100%"+chr$(34)+" color="+chr$(34)+"#808080"+chr$(34)+">"
data "Ils permettent de contrôler le processus de conversion au cours des différentes étapes. Chaque MEMO peut être visible ou caché.<ul><li>MEMO 1 : Visualise la page HTML qui a été chargée depuis un fichier externe.</li>"
data "<li>MEMO 2 : Visualise le résultat après le traitement des guillemets inclus dans la page HTML. C’est une étape impérative pour que le programme ne les confonde pas avec les délimiteurs de chaines de caractères.</li>"
data "<li>MEMO 3 : Visualise le résultat après suppression de l’indentation du texte.</li><li>MEMO 4 : Visualise le résultat après découpage des lignes de texte en tronçons d’environ 200 caractères, ceci afin de réduire le nombre de lignes sous forme de DATAs.</li>"
data "<li>MEMO 5 : Dernière étape de la conversion : la visualisation des lignes de DATAs prêtes à l’emploi.</li></ul> Données techniques :<hr size="+chr$(34)+"1"+chr$(34)+" noshade width="+chr$(34)+"100%"+chr$(34)+" color="+chr$(34)+"#808080"+chr$(34)+">"
data "Pour un rendu optimum dans le HVIEWER, la page à afficher doit être codée en HTML 3.2. L'encodage du jeu de caractères est Windows 1252."
data " Utilisation :<hr size="+chr$(34)+"1"+chr$(34)+" noshade width="+chr$(34)+"100%"+chr$(34)+" color="+chr$(34)+"#808080"+chr$(34)+">"
data "Cliquez sur le premier bouton pour charger un fichier HTML. Aussitôt le fichier choisi, la conversion s’effectue avec l’affichage des différentes étapes dans les MEMOs.Le dernier MEMO affiche les lignes DATA qui ont été générées."
data "Une dernière ligne DATA est ajoutée à la fin. Elle sert de délimiteur de fin de lecture pour la commande READ."
data "Un bouton permet de copier ces DATAs dans le presse-papiers. Il ne reste plus qu’à les coller dans votre code-source PANORAMIC.Voici un exemple type pour lire les lignes DATAs et pour visualiser le rendu dans un HVIEWER :"
data "<blockquote><table width="+chr$(34)+"637"+chr$(34)+" cellspacing="+chr$(34)+"1"+chr$(34)+" cellpadding="+chr$(34)+"20"+chr$(34)+" border="+chr$(34)+""+chr$(34)+"><tr bgcolor="+chr$(34)+"#F0F0F0"+chr$(34)+">"
data "<td>DIM a$, b$ DATA "+chr$(34)+"... ... .. ... .."+chr$(34)+" "
data "DATA "+chr$(34)+"... ... ... ... ..."+chr$(34)+" ... DATA "+chr$(34)+"finDATA"+chr$(34)+" "
data " HVIEWER 1 REPEAT <blockquote>b$ = b$ + a$ READ a$ "
data "</blockquote>UNTIL a$ = "+chr$(34)+"finDATA"+chr$(34)+" CLIPBOARD_STRING_COPY b$ CLIPBOARD_PASTE 1 "
data "</td></tr></table>La lecture du contenu des lignes DATAs s'effectue avec la boucle REPEAT / UNTIL. "
data "Les données sont mises bout à bout dans la variable b$. La sortie de la boucle de lecture s'effectue lorsque a$ est égal à "+chr$(34)+"finDATA"+chr$(34)+". La variable b$ contient l'ensemble des données des lignes DATAs (excepté la dernière ligne qui sert de délimiteur). "
data "La valeur de b$ est transmise au HVIEWER par l’intermédiaire du presse-papiers.</blockquote> Des questions ? Des suggestions ?... Retrouvez-nous sur le forum : https://panoramic.1fr1.net/"
data " Bonne programmation à tous !</blockquote> Cette page a été générée par le programme HTML to DATA. Marc - Mai 2024</body></html>"
data "finDATA"

' initialisation de la constante a$ (utilisée pour le traitement des guillemets).
a$ = chr$(34) + "+chr$(34)+" + chr$(34) + chr$(34)

' mémoriser le chemin de cet utilitaire
dossier$ = dir_current$ + chr$(92)

creerInterfaceUtilisateur()

active 0
to_foreground 0

end
' ------------------------------------------------------------------------------
sub creerInterfaceUtilisateur()
 dim_local a$, b$

 full_space 0
 color 0,200,200,200
 caption 0,"PANORAMIC : HTML to DATA v1.0"

 inactive 0

 application_title "HTML to DATA"

 button 1
 top 1,10 : left 1,15 : width 1,200 : caption 1,"Charger fichier HTML"
 button 2 : top 2,10 : left 2,235 : width 2,200 : caption 2,"Test HTML sur navigateur"
 button 3 : top 3,10 : left 3,455 : width 3,200 : caption 3,"Test HTML sur HVIEWER"

 button_picture 19
 width 19,75
 height 19,25
 top 19,10
 left 19,895
 button_picture_target_is_picture
 width 19,71
 height 19,21
 color 19,240,240,240
 2d_target_is 19
 2d_pen_color 0,0,0
 2d_line 33,3,38,3
 2d_line 31,4,40,4
 2d_line 30,5,33,5
 2d_line 30,5,30,8
 2d_line 29,6,29,15
 2d_line 28,8,28,13
 2d_line 30,13,30,16
 2d_line 30,15,33,15
 2d_line 31,16,40,16
 2d_line 33,17,38,17
 2d_line 38,15,40,15
 2d_line 38,5,41,5
 2d_line 39,6,42,6
 2d_line 40,7,42,7
 2d_line 37,8,45,8
 2d_line 38,9,44,9
 2d_line 39,10,43,10
 2d_line 40,11,42,11
 hint 19,"Relancer la conversion du fichier HTML"

 button 21 : top 21,10 : left 21,675 : width 21,200 : caption 21,"Test DATA sur HVIEWER"
 button 24 : top 24,10 : left 24,990 : caption 24,"Sublime Text"

 check 4 : top 4,25 : left 4,15 : width 4,width_client(0) : mark_on 4 : caption 4,"Fichier source HTML :"
 memo 6 : top 6,40 : bar_both 6 : width 6,width_client(0)

 check 7 : top 7,25 : left 7,15 : width 7,400 : mark_on 7 : caption 7,"Fichier après traitement des guillemets :"
 memo 9 : top 9,40 : bar_both 9 : width 9,width_client(0)

 check 10 : top 10,25 : left 10,15 : width 10,400 : mark_on 10 : caption 10,"Fichier après suppression indentation :"
 memo 12 : top 12,40 : bar_both 12 : width 12,width_client(0)

 check 13 : top 13,25 : left 13,15 : width 13,400 : mark_on 13 : caption 13,"Fichier après découpage en lignes d'environ 200 caractères :"
 memo 15 : top 15,40 : bar_both 15 : width 15,width_client(0)

 check 16 : top 16,25 : left 16,15 : width 16,400 : mark_on 16 : caption 16,"Fichier converti en lignes de DATAs :"
 memo 18 : top 18,40 : bar_both 18 : width 18,width_client(0)

 open_dialog 20

 form 22 : width 22,800 : height 22,600
 caption 22,"Test HTML sur HVIEWER"
 hviewer 23 : parent 23,22 : full_space 23
 hide 22

 ' créer bouton COPIER-COLLER DATAs
 button_picture 25
 width 25,75
 height 25,25
 top 25,10
 left 25,1085
 button_picture_target_is_picture
 width 25,71
 height 25,21
 color 25,240,240,240
 2d_target_is 25
 2d_pen_color 0,0,0
 2d_line 11,2,17,2
 2d_line 16,2,16,8
 2d_line 16,2,20,6
 2d_line 13,5,17,5
 2d_line 19,5,26,5
 2d_line 25,5,30,10
 2d_line 25,5,25,11
 2d_line 22,10,31,10
 2d_line 30,10,30,19
 2d_line 20,18,31,18
 2d_line 20,5,20,19
 2d_line 11,2,11,16
 2d_line 11,15,21,15
 2d_line 13,13,21,13
 2d_line 13,11,20,11
 2d_line 13,9,20,9
 2d_line 13,7,20,7
 2d_line 22,16,29,16
 2d_line 22,14,29,14
 2d_line 22,12,29,12
 2d_line 22,8,25,8
 ' DATA
 2d_line 39,7,39,14
 2d_line 39,7,43,7
 2d_line 43,8,43,13
 2d_line 39,13,43,13
 2d_line 45,8,45,14
 2d_line 49,8,49,14
 2d_line 46,7,49,7
 2d_line 45,10,49,10
 2d_line 51,7,56,7
 2d_line 53,7,53,14
 2d_line 57,8,57,14
 2d_line 61,8,61,14
 2d_line 58,7,61,7
 2d_line 57,10,61,10
 hint 25,"Copier les lignes de DATAs dans le presse-papiers"

 ' bouton "A propos"
 button 26
 width 26,25
 left 26,1180
 top 26,10
 font_size 26,11
 font_bold 26
 caption 26,"?"
 hint 26,"A propos"

 form 27
 hide 27
 width 27,1000
 height 27,600
 caption 27,"HTML to DATA : A propos"
 hviewer 28
 parent 28,27
 full_space 28

 ' lire les DATAs et les copier dans l'HVIEWER 28
 repeat
 b$ = b$ + a$
 read a$
 until a$ = "finDATA"
 clipboard_string_copy b$
 clipboard_paste 28

 dispositionWidgets()

 on_click 4,afficherMEMOs
 on_click 7,afficherMEMOs
 on_click 10,afficherMEMOs
 on_click 13,afficherMEMOs
 on_click 16,afficherMEMOs
 on_click 1,chargerFichierHTML
 on_click 2,testNavigateur
 on_click 3,testHTMLsurHviewer
 on_click 19,convertir
 on_click 24,sublimetext
 on_click 21,testDatasHviewer
 on_click 25,copierDATAs
 on_click 26,afficherApropos
end_sub
' ------------------------------------------------------------------------------
afficherMEMOs:
 inactive 0
 dispositionWidgets()
 active 0
return
' ------------------------------------------------------------------------------
memoModif:
 modif% = 1
return
' ------------------------------------------------------------------------------
sub dispositionWidgets()
 dim_local memoVisible(5), h%, y%, nombreMemoVisible%, Wi%

 ' CALCULER LA HAUTEUR DISPONIBLE POUR REPARTIR LES MEMOs :
 ' hauteur totale disponible
 h% = height_client(0)
 ' soustraire la hauteur de la marge fixe occupée par les boutons (42 pixels)
 h% = h% - 42
 ' soustraire la hauteur des 5 objets CHECK (5 x 16 pixels, soit 80 pixels)
 h% = h% - 80

 ' Déterminer quels sont les CHECKs cochés pour calculer le nombre de MEMOs à afficher
 if checked(4) = 1
 memoVisible(1) = 1
 nombreMemoVisible% = nombreMemoVisible% + 1
 else
 memoVisible(1) = 0
 end_if

 if checked(7) = 1
 memoVisible(2) = 1
 nombreMemoVisible% = nombreMemoVisible% + 1
 else
 memoVisible(2) = 0
 end_if

 if checked(10) = 1
 memoVisible(3) = 1
 nombreMemoVisible% = nombreMemoVisible% + 1
 else
 memoVisible(3) = 0
 end_if

 if checked(13) = 1
 memoVisible(4) = 1
 nombreMemoVisible% = nombreMemoVisible% + 1
 else
 memoVisible(4) = 0
 end_if

 if checked(16) = 1
 memoVisible(5) = 1
 nombreMemoVisible% = nombreMemoVisible% + 1
 else
 memoVisible(5) = 0
 end_if

 ' calculer la hauteur des MEMOs visibles
 if nombreMemoVisible% = 0
 h% = 0
 else
 h% = h% / nombreMemoVisible%
 end_if

 ' placer 1er CHECK
 y% = 42
 top 4,y%
 y% = y% + 16

 ' placer 1er MEMO
 top 6,y%

 ' hauteur 1er MEMO
 if memoVisible(1) = 1
 height 6,h%
 y% = y% + h%
 else
 height 6,0
 end_if

 ' placer 2ème CHECK
 top 7,y%
 y% = y% + 16

 ' placer 2ème MEMO
 top 9, y%
 if memoVisible(2) = 1
 height 9,h% : ' hauteur du 2ème MEMO
 y% = y% + h%
 else
 height 9,0
 end_if

 ' placer 3ème CHECK
 top 10,y%
 y% = y% + 16

 ' placer 3ème MEMO
 top 12,y%
 if memoVisible(3) = 1
 height 12,h% : ' hauteur du 3ème MEMO
 y% = y% + h%
 else
 height 12,0
 end_if

 ' placer 4ème CHECK
 top 13,y%
 y% = y% + 16

 ' placer 4ème MEMO
 top 15,y%
 if memoVisible(4) = 1
 height 15,h% : ' hauteur du 4ème MEMO
 y% = y% + h%
 else
 height 15,0
 end_if

 ' placer 5ème CHECK
 top 16,y%
 y% = y% + 16

 ' placer 5ème MEMO
 top 18,y%
 if memoVisible(5) = 1
 height 18,h% : ' hauteur du 5ème MEMO
 else
 height 18,0
 end_if

end_sub
' ------------------------------------------------------------------------------
chargerFichierHTML:
 inactive 0
 filter 20,"Fichier HTML|*.html"
 nomFichierHMTL$ = file_name$(20)

 if nomFichierHMTL$ = "_" or nomFichierHMTL$ = ""
 active 0
 return
 end_if

 file_load 6,nomFichierHMTL$
 caption 4,"Fichier source HTML : " + nomFichierHMTL$

 on_change 6,memoModif

 gosub convertir
 active 0
return
' ------------------------------------------------------------------------------
testNavigateur:
 inactive 0
 if nomFichierHMTL$ = "_" or nomFichierHMTL$ = ""
 active 0
 return
 end_if
 execute nomFichierHMTL$
 active 0
return
' ------------------------------------------------------------------------------
testHTMLsurHviewer:
 inactive 0
 show 22
 clipboard_string_copy text$(6)
 pause 50
 clipboard_paste 23
 pause 50
 clipboard_string_copy ""
 to_foreground 22
 active 0
return
' ------------------------------------------------------------------------------
convertir:
 ' effacer les MEMOs
 clear 9
 clear 12
 clear 15
 clear 18

 ' traitement des guillemets
 texte_1$ = text$(6)
 index% = 1
 pos% = 1
 while index% <> 0
 index% = instr_pos(texte_1$,chr$(34),pos%)
 if index% <> 0
 texte_1$ = insert$(texte_1$,a$,index% + 1)
 end_if
 pos% = index% + 12
 end_while
 display
 ' copier le résultat dans le MEMO 9
 text 9,texte_1$
 display

 ' suppression de l'indentation, résultat dans le MEMO 12
 for numLigne% = 1 to count(9)
 texte$ = item_read$(9,numLigne%)
 texte$ = ltrim$(texte$)
 item_add 12,texte$
 next numLigne%

 ' découpage en lignes de longueur d'environ 200 caractères, résultat dans le MEMO 15
 ligne$ = ""
 numLigne% = 1
 while numLigne% < count(12)
 repeat
 texte$ = item_read$(12,numLigne%)
 ligne$ = ligne$ + texte$
 numLigne% = numLigne% + 1
 if numLigne% > count(12)
 exit_repeat
 end_if
 until len(ligne$) > 200
 item_add 15,ligne$
 ligne$ = ""
 end_while
 display

 ' convertir en lignes de DATA, résulatat dans le MEMO 18
 for numLigne% = 1 to count(15)
 texte$ = item_read$(15,numLigne%)
 item_add 18,"data " + chr$(34) + texte$ + chr$(34)
 next numLigne%
 display

 ' ajouter data de fin
 texte$ = "finDATA"
 item_add 18,"data " + chr$(34) + texte$ + chr$(34)

 modif% = 0

 message "Les lignes de DATAs sont prêtes !" + chr$(13) + chr$(13) + "Utilisez le bouton ''Copier-coller DATA'' pour les copier dans le presse-papiers."

return
' ------------------------------------------------------------------------------
testDatasHviewer:
 inactive 0
 lancerRenduDATA()
 active 0
return
' ------------------------------------------------------------------------------
sub lancerRenduDATA()
 dim_local fichier_bas$, fichier_exe$, annonce$

 fichier_bas$ = dossier$ + "HTML2DATA_Temp" + ".bas"
 fichier_exe$ = dossier$ + "HTML2DATA_Temp" + ".exe"

 ' vérifier la pésence du fichier Make_Exe.exe
 if file_exists(dossier$ + "Make_Exe.exe") = 0
 annonce$ = "Cette option requière la présence du fichier Make_exe.exe !" + chr$(13) + chr$(13)
 annonce$ = annonce$ + "Il doit être situé dans le même dossier que ce programme."
 if message_error_ok(annonce$) < 2
 exit_sub
 end_if
 end_if

 ' tester si le rendu est déjà occupé par un processus en cours
 if file_exists(fichier_exe$) = 1
 file_delete fichier_exe$
 end_if
 if file_exists(fichier_exe$) = 1
 annonce$ = "Une prévisualisation du rendu des DATAs est dèjà en cours d'exécution." + chr$(13)
 annonce$ = annonce$ + "Fermez cette fenêtre pour lancer un nouveau rendu ! "
 if message_information_ok(annonce$) < 2
 exit_sub
 end_if
 end_if

 ' créer un SYNEDIT
 if object_exists(500) = 0
 create_hide
 synedit 500
 create_show
 end_if

 ' copier les DATAs dans le SYNEDIT
 text 500,text$(18)

 ' ajouter les lignes de code suivantes dans le SYNEDIT 500
 item_add 500,"data " + chr$(34) + "finDATA" + chr$(34)
 item_add 500,"dim a$, b$, null$"
 item_add 500,"caption 0," + chr$(34) + "Rendu des lignes DATA sur HVIEWER" + chr$(34)
 item_add 500,"width 0,1100"
 item_add 500,"height 0,600"
 item_add 500,"hviewer 501"
 item_add 500,"full_space 501"
 item_add 500,"repeat"
 item_add 500,"b$ = b$ + a$"
 item_add 500,"read a$"
 item_add 500,"until a$ = " + chr$(34) + "finDATA" + chr$(34)
 item_add 500,"pause 50"
 item_add 500,"clipboard_string_copy b$"
 item_add 500,"pause 50"
 item_add 500,"clipboard_paste 501"
 item_add 500,"pause 50"
 item_add 500,"clipboard_string_copy null$"

 ' executer le code contenu dans le SYNEDIT 500
 file_save 500,fichier_bas$
 wait 200
 execute_wait dossier$ + "Make_Exe.exe| -e " + chr$(34) + fichier_bas$ + chr$(34)
 execute fichier_exe$
 pause 200

 if file_exists(fichier_bas$) = 1 then file_delete fichier_bas$
 if file_exists(fichier_exe$) = 1 then file_delete fichier_exe$

end_sub
' ------------------------------------------------------------------------------
sublimeText:
 execute "C:\Program Files\Sublime Text\sublime_text.exe"
return
' ------------------------------------------------------------------------------
copierDATAs:
 if modif% = 1
 null% = message_warning_ok("COPIER LES LIGNES DATA :" + chr$(13) + chr$(13) + "Le MEMO HTML a été modifié !" + chr$(13) + "Relancez la conversion si vous souhaitez prendre en compte les modifications !")
 end_if
 ' copier les lignes DATAs dans le presse-papiers
 clipboard_string_copy text$(18)
 message "Les lignes de DATAs sont copiées dans le presse-papiers :)"
return
' ------------------------------------------------------------------------------
afficherApropos:
 show 27
 to_foreground 27
return
' ------------------------------------------------------------------------------
quitter:
 ' nettoyage des fichiers temporaires
 if file_exists(fichier_bas$) = 1 then file_delete fichier_bas$
 if file_exists(fichier_exe$) = 1 then file_delete fichier_exe$
return

Lien pour télécharger le code-source :
https://kdrive.infomaniak.com/app/share/698165/9f7dc351-87a9-4798-aa79-ea6f369b7a06

Le programme HTML to DATA peut prévisualiser le rendu que donnera les lignes de DATAs. Pour cela, il sera nécessaire que le fichier Make_Exe.exe soit présent dans le répertoire de cet utilitaire.

Lien pour télécharger le fichier Make_Exe.exe :
https://kdrive.infomaniak.com/app/share/698165/b521e5b2-6d23-4938-8300-c0f68f4d250f

Lien de téléchargement du fichier source HTML HTML2DATA.html :
https://kdrive.infomaniak.com/app/share/698165/49eb1ba5-04cf-472e-8f3c-651f332bba9a

Bonne programmation à tous !

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

Ouh, intéressant et à retenir !
Ca peut toujours être utile.
Bravo pour cette performance !
cheers

Bonjour à tous !

Merci JJN4 !

J’ajoute ici, ainsi que dans le premier post, le fichier source HTML qui a été converti en ligne de DATAs pour créer la rubrique "A propos" du programme HTML to DATA.

Cet "A propos" sert de démonstration.

Lien de téléchargement du fichier HTML2DATA.html
https://kdrive.infomaniak.com/app/share/698165/49eb1ba5-04cf-472e-8f3c-651f332bba9a

Bonne journée à tous !

» Panoramic Data Créateur
» mise a jour calculatrice
» READ-DATA,_FOR-NEXT, DIM, LABEL
» RESTORE_LABEL avec DATA à la fin
» Data Image Creator D.I.C