FORUM DE DISCUSSION SUR LE LANGAGE PANORAMIC

Développement d'applications avec le langage Panoramic
 
AccueilAccueil  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  MembresMembres  GroupesGroupes  Connexion  
Derniers sujets
» Biomorphe de Pickover
par papydall Aujourd'hui à 0:49

» PanExpress : l'éditeur Panoramic avec création d'objet
par Minibug Dim 23 Sep 2018 - 22:14

» Planétarium virtuel.
par Pedro Alvarez Dim 23 Sep 2018 - 19:50

» Virus/Antivirus
par JL35 Dim 23 Sep 2018 - 10:55

» Calculatrice
par papydall Ven 21 Sep 2018 - 22:45

» Orbites de l’ensemble de Mandelbrot
par Minibug Ven 21 Sep 2018 - 21:32

» Demande pour Jack concernant PanExpress
par Minibug Ven 21 Sep 2018 - 11:04

» EPP_V01 éditeur pour Panoramic
par Minibug Mer 19 Sep 2018 - 21:03

» [RESOLU] Quelle ligne est sélectionnée dans SYNEDIT ?
par Jean Claude Mer 19 Sep 2018 - 21:02

» Petit coucou en passant !
par Minibug Dim 16 Sep 2018 - 15:03

» bug SEVERE fnc+sub : variables globales corrompus
par silverman Dim 16 Sep 2018 - 13:38

» Verrouiller un form en avant plan
par silverman Dim 16 Sep 2018 - 12:50

» Fin de l'aventure.
par Pedro Alvarez Sam 15 Sep 2018 - 18:16

» Demande d'explications Sur File_Write & File_writeln
par Jack Sam 15 Sep 2018 - 17:26

» MEMO avec des possibilités de commande
par Oscaribout Mer 12 Sep 2018 - 1:06

Navigation
 Portail
 Index
 Membres
 Profil
 FAQ
 Rechercher
Rechercher
 
 

Résultats par :
 
Rechercher Recherche avancée
Septembre 2018
LunMarMerJeuVenSamDim
     12
3456789
10111213141516
17181920212223
24252627282930
CalendrierCalendrier

Partagez | 
 

 Affichage d'un GRID en HTML avec couleurs et images

Aller en bas 
AuteurMessage
Klaus

avatar

Nombre de messages : 11088
Age : 69
Localisation : Ile de France
Date d'inscription : 29/12/2009

MessageSujet: Affichage d'un GRID en HTML avec couleurs et images   Sam 10 Fév 2018 - 17:49

J'ai fait quelques essais avec un affichage plus évolué d'un GRID. Pour cela, j'utilise de WebBrowser (KGF.dll), je génère un fichier HTML et je le configure de sorte à reproduire le GRID le mieux possible. Puis, j'ajoute des couleurs et des icônes dans les cellules, choses non prévues dans le GRID de base. L'idée, c'est d'avoir, à terme, un GRID caché par HIDE, et un module d'affichage HTML plus sophistiqué. A terme, il réagira évidemment au clic.

Voici une première version, encore très limitée:
Code:
' HTML_visualisation_de_GRID.bas

' Ce programme montre d'utilisation d'un GRID caché, mais dont la
' visualisation est faite en HTML par un WebBrowser.

dim res%, WB%, c%, l%, html$
dim IcoFolder$ : IcoFolder$ = "C:\Users\klausgunther\Documents\Mes projets\Mes projets Delphi\KGF\Icones 16x16"

width 0,1200 : height 0,700

grid 1 : top 1,10 : left 1,10 : width 1,400 : height 1,260
grid_column 1,6 : grid_row 1,10 : font_name 1,"Arial" : font_size 1,10
for c%=2 to 6
  grid_write 1,1,c%,"Col. "+str$(c%)
next c%
for l%=2 to 10
  grid_write 1,l%,1,"Ligne "+str$(l%)
next l%
grid_write 1,5,4,"Panoramic"
grid_write 1,4,3,"#Export"
grid_write 1,8,4,"#Open"

' hide 1

dll_on "KGF.dll"

WB% = dll_call1("WB_Create",handle(0))
res% = dll_call5("WB_Locate",WB%,430,10,500,300)

AfficherGrid()

end

sub AfficherGrid()
' aide pour les tableaux:
'   http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html
'   http://cyberzoide.developpez.com/html/table.php3
'   http://chatinais.pagesperso-orange.fr/courhtml/tableau/framdimc.htm
  dim_local l%, c%, CellColor$, CellContent$
  
  html$ = ""
  
  html$ = html$ + "<STYLE TYPE="+chr$(34)+"text/css"+chr$(34)+">"+chr$(13)+chr$(10)
  html$ = html$ + "<!--"+chr$(13)+chr$(10)
  html$ = html$ + "TD{font-family: Arial; font-size: 10pt;}"+chr$(13)+chr$(10)
  html$ = html$ + "--->"+chr$(13)+chr$(10)
  html$ = html$ + "</STYLE>" +chr$(13)+chr$(10)
  
  html$ = html$ + "<table "
  html$ = html$ + "  style="+chr$(34)+"position: absolute; top: 0px; left; 0px"+chr$(34)
  html$ = html$ + " border="+chr$(34)+"1"+chr$(34)
  html$ = html$ + " cellpadding="+chr$(34)+"4"+chr$(34)
  html$ = html$ + " cellspacing="+chr$(34)+"0"+chr$(34)
  html$ = html$ + " width="+chr$(34)+"400"+chr$(34)
  html$ = html$ + ">"+chr$(13)+chr$(10)
  
  ' ligne de titre
  html$ = html$ + "  <tr>"+chr$(13)+chr$(10)
  for c%=1 to 6
    html$ = html$ + "    <td nowrap height="+chr$(34)+"10"+chr$(34)+" bgcolor="+chr$(34)+"#F0F0F0"+chr$(34)+" align="+chr$(34)+"left"+chr$(34)+" valign="+chr$(34)+"top"+chr$(34)+" width="+chr$(34)+"15%"+chr$(34)+" height="+chr$(34)+"10"+chr$(34)+ " valign="+chr$(34)+"top"+chr$(34)+">"
    html$ = html$ + grid_read$(1,1,c%) + "&nbsp;</td>"+chr$(13)+chr$(10)
  next c%
  
  ' autres lignes du tableau
  html$ = html$ + "  </tr>"+chr$(13)+chr$(10)
  for l%=2 to 10
    html$ = html$ + "  <tr>"+chr$(13)+chr$(10)
    for c%=1 to 6
      CellContent$ = grid_read$(1,l%,c%)
      if CellContent$="" then CellContent$ = "&nbsp;"
      CellColor$ = "#FFFFFF"
      if c%=1 then CellColor$ = "#F0F0F0"+chr$(34)+" height=10"
      if c%=4 then CellColor$ = "#FFFF00"
      if (l%=6) and (c%>1) then CellColor$ = "#FF0000"
      if (l%=6) and (c%=4) then CellColor$ = "#0000FF"
      if left$(CellContent$,1)="#"
        CellContent$ = mid$(CellContent$,2,len(CellContent$))
        CellContent$ = "<img src="+chr$(34)+"file:///"+IcoFolder$+CellContent$+".jpg"+chr$(34)+" /> "+CellContent$
      end_if
      html$ = html$ + "    <td nowrap bgcolor="+chr$(34)+CellColor$+chr$(34)+" valign="+chr$(34)+"top"+chr$(34)+">" + CellContent$+"</td>"+chr$(13)+chr$(10)
    next c%
    html$ = html$ + "  </tr>"+chr$(13)+chr$(10)
  next l%
  html$ = html$+"</table>"+chr$(13)+chr$(10)
  
  file_open_write 1,"test_html.html"
  file_writeln 1,html$
  file_close 1
  html$ = "file://C:\Users\klausgunther\Documents\Mes projets\Mes projets Delphi\KGF\test_html.html"

  res% = dll_call2("WB_Url",WB%,adr(html$))
'  file_delete "test_html.html"
end_sub
Voici les icônes utilisées dans ce programme:


Il faurdra bien sûé télécharger ces deux images, et également adapter le chemin vers le dossier de ces deux images en ligne 7, tout comme le chemin vers KGF.dll en ligne 25.

Qu'est-ce que vous pensez ? Prochaines évolutions:
- la SUB tiendra automatiquement compte du nombre de lignes et colones fixes et variables du GRID
- gestion individuelle des polices, tailles, attributs et couleurs du texte des cellules
- couleur de fond de l'afichage
- image de fond de l'affichage
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://klauspanoramic.comxa.com/index.html
Minibug

avatar

Nombre de messages : 3030
Age : 51
Localisation : Vienne (86)
Date d'inscription : 09/02/2012

MessageSujet: Re: Affichage d'un GRID en HTML avec couleurs et images   Sam 10 Fév 2018 - 19:10

C'est intéressant !  

C'est vrai que tu avait pas mal avancé sur les tableaux avant d'être bloqué par les nouvelles versions de Panoramic !
J'espère que tu réussira. Voyons comment tu va pouvoir mettre tout cela en place... drunken
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://gpp.panoramic.free.fr
Klaus

avatar

Nombre de messages : 11088
Age : 69
Localisation : Ile de France
Date d'inscription : 29/12/2009

MessageSujet: Re: Affichage d'un GRID en HTML avec couleurs et images   Sam 10 Fév 2018 - 23:53

Voici une nouvelle version. Elle apporte l'identification d'un clic dans une cellule quelconque (ligne et colonne), la possibilité de lire le contenu de la cellule en question, ainsi que de modifier une cellule (cliquée ou non) en l'adressant par son ID.

Dans le programme ci-dessois (attention: télécharger la nouvelle version de KGF.dll !), un clic sur une cellule duplique son contenu dans la cellule une ligne plus haut et une colonne plus à gauche. D'accord, ce n'est pas très subtil comme traitement, mais comme "proof of concept", c'est parfaitement clair.

Voici le code:
Code:
' HTML_visualisation_de_GRID.bas

' Ce programme montre d'utilisation d'un GRID caché, mais dont la
' visualisation est faite en HTML par un WebBrowser.

label Grid_OnClick, UserEvent

dim res%, WB%, c%, l%, html$, lig%, col%, ID$, s$, s1$, p%
dim IcoFolder$ : IcoFolder$ = "C:\Users\klausgunther\Documents\Mes projets\Mes projets Delphi\KGF\Icones 16x16"
dim KGF$ : KGF$ = "KGF.dll"

width 0,1200 : height 0,700

grid 1 : top 1,10 : left 1,10 : width 1,400 : height 1,260
grid_column 1,6 : grid_row 1,10 : font_name 1,"Arial" : font_size 1,10
for c%=2 to 6
  grid_write 1,1,c%,"Col. "+str$(c%)
next c%
for l%=2 to 10
  grid_write 1,l%,1,"Ligne "+str$(l%)
next l%
grid_write 1,5,4,"Panoramic"
grid_write 1,4,3,"#Export"
grid_write 1,8,4,"#Open"

' hide 1

memo 2 : bar_both 2 : on_change 2,Grid_OnClick
  top 2,400 : width 2,300 : height 2,100
' hide 2

On_User_Event UserEvent

dll_on KGF$

WB% = dll_call1("WB_Create",handle(0))
res% = dll_call5("WB_Locate",WB%,430,10,500,300)
html$ = "about:blank"
res% = dll_call2("WB_Url",WB%,adr(html$))
html$ = ""
res% = dll_call2("WB_SurveyFilter",WB%,adr(html$))  
res% = dll_call4("WB_Survey",WB%,handle(2),1,2)  

AfficherGrid()

end

Grid_OnClick:
  message text$(2)
  return
  
UserEvent:
  if bin_and(user_event_wparam,hex("FF000000"))<>hex("08000000") then return   : ' pas WebBrowser ?
  if bin_and(user_event_wparam,hex("00FF0000"))<>hex("00010000") then return   : ' pas un clic ?
  lig% = user_event_lparam/65536
  col% = bin_and(user_event_lparam,65535)
'  message "UserEvent  click WebBrowser table ligne "+str$(lig%)+"  colonne "+str$(col%)
  if col%=1
    ' ici, trairer le clic dans la colonne fixe à gauche
    return
  end_if
  if lig%=1
    ' ici, traiter le clic dans la ligne fixe en haut
    return
  end_if
    
  ID$ = "R"+str$(lig%)+"C"+str$(col%)
  s$ = string$(255," ")
  res% = dll_call3("WB_GetInnerHTMLofElementByID",WB%,adr(ID$),adr(s$))
  s$ = trim$(s$)
'  message "Contenu: "+s$
  if lig%>2
    if col%>2
      ID$ = "R"+str$(lig%-1)+"C"+str$(col%-1)
      s1$ = s$
      if left$(s1$,1)="<"
        p% = instr(s1$,">")
        s1$ = "#"+mid$(s1$,p%+2,len(s1$))        
      end_if
      if s1$="&nbsp;" then s1$ = " "
      grid_write 1,lig%-1,col%-1,s1$
      res% = dll_call3("WB_SetInnerHTMLofElementByID",WB%,adr(ID$),adr(s$))
    end_if
  end_if
  return

sub AfficherGrid()
' aide pour les tableaux:
'   http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html
'   http://cyberzoide.developpez.com/html/table.php3
'   http://chatinais.pagesperso-orange.fr/courhtml/tableau/framdimc.htm
  dim_local l%, c%, CellColor$, CellContent$, ColWidth%, RowHeight%, TagID$
  dim_local defColWidth% : defColWidth% = 64
  dim_local defRowHeight% : defRowHeight% = 24
  
  
  html$ = ""
  
  html$ = html$ + "<STYLE TYPE="+chr$(34)+"text/css"+chr$(34)+">"+chr$(13)+chr$(10)
  html$ = html$ + "<!--"+chr$(13)+chr$(10)
  html$ = html$ + "TD{font-family: Arial; font-size: 10pt;}"+chr$(13)+chr$(10)
  html$ = html$ + "--->"+chr$(13)+chr$(10)
  html$ = html$ + "</STYLE>" +chr$(13)+chr$(10)
  
  html$ = html$ + "<table "
  html$ = html$ + "  style="+chr$(34)+"position: absolute; top: 0px; left; 0px"+chr$(34)
  html$ = html$ + " border="+chr$(34)+"1"+chr$(34)
  html$ = html$ + " cellpadding="+chr$(34)+"4"+chr$(34)
  html$ = html$ + " cellspacing="+chr$(34)+"0"+chr$(34)
  html$ = html$ + " width="+chr$(34)+"400"+chr$(34)
  html$ = html$ + ">"+chr$(13)+chr$(10)
  
  ' ligne de titre  
  
  ' valeurs par défaut
  RowHeight% = defRowHeight%
  ' valeurs ajustées pour la ligne
  
  html$ = html$ + "  <tr>"+chr$(13)+chr$(10)
  
  for c%=1 to 6
    ' valeurs par défaut
    ColWidth%  = defColWidth%
    ' valeurs ajustées pour la cellule
    
    TagID$ = "R1C"+str$(c%)
    html$ = html$ + "    <td Name="+TagID$+" id="+TagID$+" nowrap height="+chr$(34)+"10"+chr$(34)+" bgcolor="+chr$(34)+"#F0F0F0"+chr$(34)+" align="+chr$(34)+"left"+chr$(34)+" valign="+chr$(34)+"top"+chr$(34)+" width="+chr$(34)+str$(ColWidth%)+chr$(34)+" height="+chr$(34)+str$(RowHeight%)+chr$(34)+ " valign="+chr$(34)+"top"+chr$(34)+">"
    html$ = html$ + grid_read$(1,1,c%) + "&nbsp;</td>"+chr$(13)+chr$(10)
  next c%
  
  ' autres lignes du tableau
  html$ = html$ + "  </tr>"+chr$(13)+chr$(10)
  for l%=2 to 10
    RowHeight% = defRowHeight%
    html$ = html$ + "  <tr>"+chr$(13)+chr$(10)
    for c%=1 to 6
    
      ' valeurs par défaut
      CellContent$ = grid_read$(1,l%,c%)
      if CellContent$="" then CellContent$ = "&nbsp;"
      CellColor$ = "#FFFFFF"
      ColWidth%  = defColWidth%
      
      ' valeurs ajustées pour la cellule
      if c%=1 then CellColor$ = "#F0F0F0"+chr$(34)+" height=10"
      if c%=4 then CellColor$ = "#FFFF00"
      if (l%=6) and (c%>1) then CellColor$ = "#FF0000"
      if (l%=6) and (c%=4) then CellColor$ = "#0000FF"
      if left$(CellContent$,1)="#"
        CellContent$ = mid$(CellContent$,2,len(CellContent$))
        CellContent$ = "<img src="+chr$(34)+"file:///"+IcoFolder$+CellContent$+".jpg"+chr$(34)+" /> "+CellContent$
      end_if
      
      TagID$ = "R"+str$(l%)+"C"+str$(c%)
      html$ = html$ + "    <td Name="+TagID$+" id="+TagID$+" nowrap bgcolor="+chr$(34)+CellColor$+chr$(34)+" valign="+chr$(34)+"top"+chr$(34)+" height="+chr$(34)+str$(RowHeight%)+chr$(34)+">" + CellContent$+"</td>"+chr$(13)+chr$(10)
    next c%
    html$ = html$ + "  </tr>"+chr$(13)+chr$(10)
  next l%
  html$ = html$+"</table>"+chr$(13)+chr$(10)
  
  file_open_write 1,"test_html.html"
  file_writeln 1,html$
  file_close 1
  html$ = "file://C:\Users\klausgunther\Documents\Mes projets\Mes projets Delphi\KGF\test_html.html"

  res% = dll_call2("WB_Url",WB%,adr(html$))
'  file_delete "test_html.html"
end_sub

EDIT

Lorsque je parle de clic dans une cellule, je parle des cellulesdu tableau coloré à droite, celui affiché en HTML ! C'est effectivement là que je gère le click !
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://klauspanoramic.comxa.com/index.html
silverman

avatar

Nombre de messages : 675
Age : 46
Localisation : Picardie
Date d'inscription : 18/03/2015

MessageSujet: Re: Affichage d'un GRID en HTML avec couleurs et images   Dim 11 Fév 2018 - 16:10

Suite à ta demande d'amélioration, je peux te proposer une solution pour 4 des valeurs que tu souhaites obtenir:
n = GRID_ROW(grid)
n = GRID_COLUMN(grid)
n = GRID_ROW_HEIGHT(grid)
n = GRID_COLUMN_WIDTH(grid)

Code:

' Silverman, septembre 2016
'
' Déterminer le nombre de ligne et de colonne d'un grid
'

dim GRN%,GCN%,lig%,col%
dim result%

' fabrique un grid au dimension aléatoire
grid 1 : width 1,400 : height 1,200 : left 1,180
lig%=rnd(30)+1
col%=rnd(30)+1
grid_row 1,lig%
grid_column 1,col%

' affiche le résultat
print : print "Nb de ligne aléatoire = ",lig%
print : print "Nb de colonne aléatoire = ",col%
print : print "Résultat dans la barre bleu"
print
' les subs en action
Grid_row_Number(1) : GRN%=result%      :' écrit le nb de ligne dans GRN%

Grid_Column_Number(1) : GCN%=result%  :' écrit le nb de colonne dans GCN%


' affiche le résultat
caption 0,"Grid_row_Number = " + str$(GRN%)+" /  Grid_Column_Number = " + str$(GCN%)



END
' LES SUBS
' Trouve le nb de colonne
sub Grid_Column_Number(my_grid)
 dim_local deb%,mil%,fin%
  '
  ' initialisation
  deb%=0
  fin%=1
  repeat
      fin%=fin%*2
  until grid_x_to_column(my_grid,fin%)=0
 
  ' recherche par dichotomie
  repeat
      mil%=(deb%+fin%)/2
      if grid_x_to_column(my_grid,mil%)<>0
        deb%=mil%
      else
        fin%=mil%
      end_if
  until (fin%-deb%)<2
  ' se rapprocher du bord
  for deb%=deb% to deb%+2
     if grid_x_to_column(my_grid,deb%)=0 then exit_for
  next deb%
  deb%=deb%-1
  print "largeur=",deb%
  '
  ' résultat
  result%=grid_x_to_column(my_grid,deb%)
end_sub


' Trouve le nb de ligne
sub Grid_row_Number(my_grid)
 dim_local deb%,mil%,fin%
  '
  ' initialisation
  deb%=0
  fin%=1
  repeat
      fin%=fin%*2
  until grid_y_to_row(my_grid,fin%)=0

  ' recherche par dichotomie
  repeat
      mil%=(deb%+fin%)/2
      if grid_y_to_row(my_grid,mil%)<>0
        deb%=mil%
      else
        fin%=mil%
      end_if
  until (fin%-deb%)<2
  ' se rapprocher du bord
  for deb%=deb% to deb%+2
     if grid_y_to_row(my_grid,deb%)=0 then exit_for
  next deb%
  deb%=deb%-1
  print "hauteur=",deb%
  '
  ' résultat
  result%=grid_y_to_row(my_grid,deb%)

end_sub

A savoir que 'n=GRID_NUMBER_ROW(grid)' et 'n=GRID_NUMBER_COLUMN(grid)' existe depuis un moment mais ne sont pas documentées.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Klaus

avatar

Nombre de messages : 11088
Age : 69
Localisation : Ile de France
Date d'inscription : 29/12/2009

MessageSujet: Re: Affichage d'un GRID en HTML avec couleurs et images   Dim 11 Fév 2018 - 16:19

C'est vrai - ça fonctionne. Merci . Un "workarond" intéressant.
Ceci dit, ces fonctions proposées seraient dans la pure logique de Panoramic...
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://klauspanoramic.comxa.com/index.html
silverman

avatar

Nombre de messages : 675
Age : 46
Localisation : Picardie
Date d'inscription : 18/03/2015

MessageSujet: Re: Affichage d'un GRID en HTML avec couleurs et images   Dim 11 Fév 2018 - 16:31

klaus a écrit:
Ceci dit, ces fonctions proposées seraient dans la pure logique de Panoramic...
Entièrement d'accord avec toi.
Un détail, il faudra ajuster les tailles retouvées, je crois qu'elles sont décalées de 1 pixel de souvenir.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Klaus

avatar

Nombre de messages : 11088
Age : 69
Localisation : Ile de France
Date d'inscription : 29/12/2009

MessageSujet: Re: Affichage d'un GRID en HTML avec couleurs et images   Dim 11 Fév 2018 - 16:52

Je viens de mettre une nouvelle version de KGF.dll en ligne. Pas de modifications spectaculaires, juste des améliorations internes dans les fonctions de gestion du WebBRowser.

Le programme d'affichage d'un GRID en tire avantage. En même tremps, j'ai avancé sur la généralisation des paramétrages permettant de jouer sur la mise en page. Dans le programme de démo ci-dessous, mes paramétrages sont dans les lgnes 13 à 20.

Code:
' HTML_visualisation_de_GRID.bas

' Ce programme montre d'utilisation d'un GRID caché, mais dont la
' visualisation est faite en HTML par un WebBrowser.

label Grid_OnClick, UserEvent

dim res%, WB%, c%, l%, html$, lig%, col%, ID$, s$, s1$, p%
dim IcoFolder$ : IcoFolder$ = "C:\Users\klausgunther\Documents\Mes projets\Mes projets Delphi\KGF\Icones 16x16\"
dim KGF$ : KGF$ = "KGF.dll"

' ========== paramétrage du GRID
dim nlig%  : nlig%  = 10          : ' nombre de lignes au total
dim ncol%  : ncol%  = 6          : ' nombre de colonnes au total
dim nflig%  : nflig%  = 1          : ' nombre de lignes fixes
dim nfcol%  : nfcol%  = 1          : ' nombre de colonnes fixes
dim cdef$  : cdef$  = "#FFFFFF"  : ' couleur par défaut des cellules
dim cflig$  : cflig$  = "#F0F0F0"  : ' couleur des lignes fixes
dim cfcol$  : cfcol$  = "#F8F8F8"  : ' couleur des colonnes fixes
dim dcell%  : dcell%  = 0          : ' écart entre cellules en pixels
dim ncRect% : ncRect% = 3          : ' nombre de rectangles colorés dans cRect$
dim cRect$(2,4)                    : ' rectangles colorés dans la partie non fixe
                                    : '  (x,0) = x0
                                    : '  (x,1) = y0
                                    : '  (x,2) = x1
                                    : '  (x,0) = y1
                                    : '  (x,0) = couleur en format "#RRGGBB"
  cRect$(0,0) = "1"                : ' ligne 6 est rouge
  cRect$(0,1) = "6"
  cRect$(0,2) = "100"
  cRect$(0,3) = "6"
  cRect$(0,4) = "#FF0000"
  cRect$(1,0) = "4"                : ' colonne 4 est jaune
  cRect$(1,1) = "1"
  cRect$(1,2) = "4"
  cRect$(1,3) = "100"
  cRect$(1,4) = "#FFFF00"
  cRect$(2,0) = "4"                : ' cellule ligne 6 colonne 4 est bleue
  cRect$(2,1) = "6"
  cRect$(2,2) = "4"
  cRect$(2,3) = "6"
  cRect$(2,4) = "#0000FF"
 
width 0,1200 : height 0,700

grid 1 : top 1,10 : left 1,10 : width 1,400 : height 1,260
grid_column 1,ncol% : grid_row 1,nlig% : font_name 1,"Arial" : font_size 1,10
for c%=2 to ncol%
  grid_write 1,1,c%,"Col. "+str$(c%)
next c%
for l%=2 to nlig%
  grid_write 1,l%,1,"Ligne "+str$(l%)
next l%
grid_write 1,5,4,"Panoramic"
grid_write 1,4,3,"#Export"
grid_write 1,8,4,"#Open"

' hide 1

memo 2 : bar_both 2 : on_change 2,Grid_OnClick
  top 2,400 : width 2,300 : height 2,100
' hide 2

On_User_Event UserEvent

dll_on KGF$

WB% = dll_call1("WB_Create",handle(0))
res% = dll_call5("WB_Locate",WB%,430,10,500,300)
html$ = "about:blank"
res% = dll_call2("WB_Url",WB%,adr(html$))
html$ = ""
res% = dll_call2("WB_SurveyFilter",WB%,adr(html$)) 
res% = dll_call4("WB_Survey",WB%,handle(2),1,2) 

AfficherGrid(1,nlig%,ncol%,nflig%,nfcol%,dcell%,cdef$,cflig$,cfcol$)

end

Grid_OnClick:
  message text$(2)
  return
 
UserEvent:
  if bin_and(user_event_wparam,hex("FF000000"))<>hex("08000000") then return  : ' pas WebBrowser ?
  if bin_and(user_event_wparam,hex("00FF0000"))<>hex("00010000") then return  : ' pas un clic ?
  lig% = user_event_lparam/65536
  col% = bin_and(user_event_lparam,65535)
'  message "UserEvent  click WebBrowser table ligne "+str$(lig%)+"  colonne "+str$(col%)
  if col%<=nfcol%
    ' ici, trairer le clic dans la colonne fixe à gauche
    message "Clic dans colonne fixe "+str$(col%)+" à la ligne "+str$(lig%)
    return
  end_if
  if lig%<=nflig%
    ' ici, traiter le clic dans la ligne fixe en haut
    message "Clic dans ligne fixe "+str$(lig%)+" à la ligne "+str$(col%)
    return
  end_if
   
  ID$ = "R"+str$(lig%)+"C"+str$(col%)
  s$ = string$(255," ")
  res% = dll_call3("WB_GetInnerHTMLofElementByID",WB%,adr(ID$),adr(s$))
  s$ = trim$(s$)
'  message "Contenu: "+s$
  if lig%>2
    if col%>2
      ID$ = "R"+str$(lig%-1)+"C"+str$(col%-1)
      s1$ = s$
      if left$(s1$,1)="<"
        p% = instr(s1$,">")
        s1$ = "#"+mid$(s1$,p%+2,len(s1$))       
      end_if
      if s1$="&nbsp;" then s1$ = " "
      grid_write 1,lig%-1,col%-1,s1$
      res% = dll_call3("WB_SetInnerHTMLofElementByID",WB%,adr(ID$),adr(s$))
    end_if
  end_if
  return

sub AfficherGrid(grid%,nlig%,ncol%,nflig%,nfcol%,dcell%,cdef$,cflig$,cfCol$)
' Paramètres:
'  grid%  = numéro de l'objet GRID
'  nlig%  = nombre de lignes 
'  ncol%  = nombre de colonnes,
'  nflig% = nombre de lignes fixes 
'  nfcol% = nombre de colonnes fixes
'  dcell% = écart entre cellules
'  cdef$  = couleur par défaut des cellules en chaîne hexa "#RRBGGBB"
'  cflig$ = couleur des lignes fixes en chaîne hexa "#RRBGGBB"
'  cfCol$ = couleur des colonnes fixes en chaîne hexa "#RRBGGBB"
'
' aide pour les tableaux:
'  http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html
'  http://cyberzoide.developpez.com/html/table.php3
'  http://chatinais.pagesperso-orange.fr/courhtml/tableau/framdimc.htm
  dim_local l%, c%, CellColor$, CellContent$, ColWidth%, RowHeight%, TagID$
  dim_local s$, p%, i%, c$, x0%, y0%, x1%, y1%
  dim_local defColWidth% : defColWidth% = 64
  dim_local defRowHeight% : defRowHeight% = 24
 
 
  html$ = ""
 
  html$ = html$ + "<STYLE TYPE="+chr$(34)+"text/css"+chr$(34)+">"+chr$(13)+chr$(10)
  html$ = html$ + "<!--"+chr$(13)+chr$(10)
  html$ = html$ + "TD{font-family: Arial; font-size: 10pt;}"+chr$(13)+chr$(10)
  html$ = html$ + "--->"+chr$(13)+chr$(10)
  html$ = html$ + "</STYLE>" +chr$(13)+chr$(10)

  ' il faut utiliser les attributs personnels data-rows et data_cols pour passer l'information lignes et colonnes 
  html$ = html$ + "<table id="+chr$(34)+"KGFTable"+chr$(34)
  html$ = html$ + "  style="+chr$(34)+"position: absolute; top: 0px; left; 0px"+chr$(34)
  html$ = html$ + " border="+chr$(34)+"1"+chr$(34)
  html$ = html$ + " data-rows="+chr$(34)+"10"+chr$(34) + " data-cols="+chr$(34)+"6"+chr$(34)
  html$ = html$ + " cellpadding="+chr$(34)+"4"+chr$(34)
  html$ = html$ + " cellspacing="+chr$(34)+str$(dcell%)+chr$(34)
  html$ = html$ + " width="+chr$(34)+"400"+chr$(34)
  html$ = html$ + ">"+chr$(13)+chr$(10)
 
  ' lignes fixes 
 
  ' valeurs par défaut                               
  RowHeight% = defRowHeight%
  ' valeurs ajustées pour la ligne
 
 
  for l%=1 to nflig%
    html$ = html$ + "  <tr>"+chr$(13)+chr$(10)
    for c%=1 to ncol%
      ' valeurs par défaut
      ColWidth%  = defColWidth%
      ' valeurs ajustées pour la cellule
      TagID$ = "R"+str$(l%)+"C"+str$(c%)
  ' il faut utiliser les attributs personnels data-row et data_col pour passer l'information ligne et colonne 
  ' il faut utiliser l'attribut tag pour identifier le champ mors d'un clic
      html$ = html$ + "    <th"
      html$ = html$ + " id="+TagID$
      html$ = html$ + " data-row="+chr$(34)+"1"+chr$(34)
      html$ = html$ + " data-col="+chr$(34)+str$(c%)+chr$(34) 
      html$ = html$ + " nowrap height="+chr$(34)+"10"+chr$(34)
      html$ = html$ + " bgcolor="+chr$(34)+cflig$+chr$(34)+" align="+chr$(34)
      html$ = html$ + " left"+chr$(34)+" valign="+chr$(34)+"top"+chr$(34)+" width="+chr$(34)
      html$ = html$ + str$(ColWidth%)+chr$(34)+" height="+chr$(34)+str$(RowHeight%)+chr$(34)
      html$ = html$ + " valign="+chr$(34)+" top"+chr$(34)+">"
      html$ = html$ + grid_read$(grid%,l%,c%) + "&nbsp;</th>"+chr$(13)+chr$(10)
    next c%
    html$ = html$ + "  </tr>"+chr$(13)+chr$(10)
  next l%

  ' autres lignes du tableau
  for l%=1+nflig% to nlig%
    RowHeight% = defRowHeight%
    html$ = html$ + "  <tr>"+chr$(13)+chr$(10)
    for c%=1 to ncol%
   
      ' valeurs par défaut
      CellContent$ = grid_read$(grid%,l%,c%)
      if CellContent$="" then CellContent$ = "&nbsp;"
      CellColor$ = cfcol$
      ColWidth%  = defColWidth%
     
      if c%>nflig%
        CellColor$ = cdef$
        if ncRect%>0
          for i%=0 to ncRect%-1
            x0% = val(cRect$(i%,0))
            y0% = val(cRect$(i%,1))
            x1% = val(cRect$(i%,2))
            y1% = val(cRect$(i%,3))
            c$ = cRect$(i%,4)
            if (l%>=y0%) and (l%<=y1%)
              if (c%>=x0%) and (c%<=x1%)
                CellColor$ = c$
              end_if
            end_if
          end_if
        next i%
      end_if
     
      if left$(CellContent$,1)="#"
        CellContent$ = mid$(CellContent$,2,len(CellContent$))
        CellContent$ = "<img src="+chr$(34)+"file:///"+IcoFolder$+CellContent$+".jpg"+chr$(34)+" /> "+CellContent$
      end_if
     
      TagID$ = "R"+str$(l%)+"C"+str$(c%)
  ' il faut utiliser les attributs personnels data-row et data_col pour passer l'information ligne et colonne 
  ' il faut utiliser l'attribut tag pour identifier le champ mors d'un clic
      if c%>nfcol%
        html$ = html$ + "    <td"
      else
        html$ = html$ + "    <th"
      end_if
      html$ = html$ + " id="+TagID$
      html$ = html$ + " data-row="+chr$(34)+str$(l%)+chr$(34)
      html$ = html$ + " data-col="+chr$(34)+str$(c%)+chr$(34) 
      html$ = html$ + " nowrap bgcolor="+chr$(34)+CellColor$+chr$(34)
      html$ = html$ + " valign="+chr$(34)+"top"+chr$(34)+" height="+chr$(34)
      html$ = html$ + str$(RowHeight%)+chr$(34)+">" + CellContent$
      html$ = html$ + "</td>"+chr$(13)+chr$(10)
    next c%
    html$ = html$ + "  </tr>"+chr$(13)+chr$(10)
  next l%
  html$ = html$+"</table>"+chr$(13)+chr$(10)
 
  file_open_write 1,"test_html.html"
  file_writeln 1,html$
  file_close 1
  html$ = "file://C:\Users\klausgunther\Documents\Mes projets\Mes projets Delphi\KGF\test_html.html"

  res% = dll_call2("WB_Url",WB%,adr(html$))
'  file_delete "test_html.html"

  s$ = "KGFTable"
  res% = dll_call2("WB_IdentifyTable",WB%,adr(s$))
  ' message "WB_IdentifyTable: "+str$(res%)
   
end_sub

EDIT

J'ai longtemps cherché, dans mes applications, comment améliorer, l'affichage d'un GRID, assez frustre dans sa version de base. Je crois que je tiens enfin quelque chose. Il faut imaginer en fait le GRID Panoramic caché par HIDE, seule la représentation visuelle est prévue pour êtrge visible. C'est pourquoi elle réagit aux clics.

Voici un aperçu:


EDIT

Dans le code ci-dessus, j'ai rendu le coloriage de zones rectangulaires paramétrable. Actuellement, le paramétrage reproduit le résultat qui était codé en dur aupraravant.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://klauspanoramic.comxa.com/index.html
Klaus

avatar

Nombre de messages : 11088
Age : 69
Localisation : Ile de France
Date d'inscription : 29/12/2009

MessageSujet: Re: Affichage d'un GRID en HTML avec couleurs et images   Dim 11 Fév 2018 - 19:04

Juste pour le plaisir, et pour montrer les possibilités:
dans la version ci-dessous, la ligne rouge se déplace...
Code:
' HTML_visualisation_de_GRID.bas

' Ce programme montre d'utilisation d'un GRID caché, mais dont la
' visualisation est faite en HTML par un WebBrowser.

label Grid_OnClick, UserEvent

dim res%, WB%, c%, l%, html$, lig%, col%, ID$, s$, s1$, p%, n%, nr%
dim IcoFolder$ : IcoFolder$ = "C:\Users\klausgunther\Documents\Mes projets\Mes projets Delphi\KGF\Icones 16x16\"
dim KGF$ : KGF$ = "KGF.dll"

' ========== paramétrage du GRID
dim nlig%  : nlig%  = 10          : ' nombre de lignes au total
dim ncol%  : ncol%  = 6          : ' nombre de colonnes au total
dim nflig%  : nflig%  = 1          : ' nombre de lignes fixes
dim nfcol%  : nfcol%  = 1          : ' nombre de colonnes fixes
dim cdef$  : cdef$  = "#FFFFFF"  : ' couleur par défaut des cellules
dim cflig$  : cflig$  = "#F0F0F0"  : ' couleur des lignes fixes
dim cfcol$  : cfcol$  = "#F8F8F8"  : ' couleur des colonnes fixes
dim dcell%  : dcell%  = 0          : ' écart entre cellules en pixels
dim ncRect% : ncRect% = 3          : ' nombre de rectangles colorés dans cRect$
dim cRect$(2,4)                    : ' rectangles colorés dans la partie non fixe
                                    : '  (x,0) = x0
                                    : '  (x,1) = y0
                                    : '  (x,2) = x1
                                    : '  (x,0) = y1
                                    : '  (x,0) = couleur en format "#RRGGBB"
  cRect$(0,0) = "1"                : ' ligne 6 est rouge
  cRect$(0,1) = "6"
  cRect$(0,2) = "100"
  cRect$(0,3) = "6"
  cRect$(0,4) = "#FF0000"
  cRect$(1,0) = "4"                : ' colonne 4 est jaune
  cRect$(1,1) = "1"
  cRect$(1,2) = "4"
  cRect$(1,3) = "100"
  cRect$(1,4) = "#FFFF00"
  cRect$(2,0) = "4"                : ' cellule ligne 6 colonne 4 est bleue
  cRect$(2,1) = "6"
  cRect$(2,2) = "4"
  cRect$(2,3) = "6"
  cRect$(2,4) = "#0000FF"
 
width 0,1200 : height 0,700

grid 1 : top 1,10 : left 1,10 : width 1,400 : height 1,260
grid_column 1,ncol% : grid_row 1,nlig% : font_name 1,"Arial" : font_size 1,10
for c%=2 to ncol%
  grid_write 1,1,c%,"Col. "+str$(c%)
next c%
for l%=2 to nlig%
  grid_write 1,l%,1,"Ligne "+str$(l%)
next l%
grid_write 1,5,4,"Panoramic"
grid_write 1,4,3,"#Export"
grid_write 1,8,4,"#Open"

' hide 1

memo 2 : bar_both 2 : on_change 2,Grid_OnClick
  top 2,400 : width 2,300 : height 2,100
' hide 2

On_User_Event UserEvent

dll_on KGF$

WB% = dll_call1("WB_Create",handle(0))
res% = dll_call5("WB_Locate",WB%,430,10,500,300)
html$ = "about:blank"
res% = dll_call2("WB_Url",WB%,adr(html$))
html$ = ""
res% = dll_call2("WB_SurveyFilter",WB%,adr(html$)) 
res% = dll_call4("WB_Survey",WB%,handle(2),1,2) 

AfficherGrid(1,nlig%,ncol%,nflig%,nfcol%,dcell%,cdef$,cflig$,cfcol$)

nr% = 6
for n%=1 to 20
  if nr%=nlig% then nr% = 1
  nr% = nr% + 1
  cRect$(0,1) = str$(nr%)
  cRect$(0,3) = str$(nr%)
  AfficherGrid(1,nlig%,ncol%,nflig%,nfcol%,dcell%,cdef$,cflig$,cfcol$)
next n%

end

Grid_OnClick:
  message text$(2)
  return
 
UserEvent:
  if bin_and(user_event_wparam,hex("FF000000"))<>hex("08000000") then return  : ' pas WebBrowser ?
  if bin_and(user_event_wparam,hex("00FF0000"))<>hex("00010000") then return  : ' pas un clic ?
  lig% = user_event_lparam/65536
  col% = bin_and(user_event_lparam,65535)
'  message "UserEvent  click WebBrowser table ligne "+str$(lig%)+"  colonne "+str$(col%)
  if col%<=nfcol%
    ' ici, trairer le clic dans la colonne fixe à gauche
    message "Clic dans colonne fixe "+str$(col%)+" à la ligne "+str$(lig%)
    return
  end_if
  if lig%<=nflig%
    ' ici, traiter le clic dans la ligne fixe en haut
    message "Clic dans ligne fixe "+str$(lig%)+" à la ligne "+str$(col%)
    return
  end_if
   
  ID$ = "R"+str$(lig%)+"C"+str$(col%)
  s$ = string$(255," ")
  res% = dll_call3("WB_GetInnerHTMLofElementByID",WB%,adr(ID$),adr(s$))
  s$ = trim$(s$)
'  message "Contenu: "+s$
  if lig%>2
    if col%>2
      ID$ = "R"+str$(lig%-1)+"C"+str$(col%-1)
      s1$ = s$
      if left$(s1$,1)="<"
        p% = instr(s1$,">")
        s1$ = "#"+mid$(s1$,p%+2,len(s1$))       
      end_if
      if s1$="&nbsp;" then s1$ = " "
      grid_write 1,lig%-1,col%-1,s1$
      res% = dll_call3("WB_SetInnerHTMLofElementByID",WB%,adr(ID$),adr(s$))
    end_if
  end_if
  return

sub AfficherGrid(grid%,nlig%,ncol%,nflig%,nfcol%,dcell%,cdef$,cflig$,cfCol$)
' Paramètres:
'  grid%  = numéro de l'objet GRID
'  nlig%  = nombre de lignes 
'  ncol%  = nombre de colonnes,
'  nflig% = nombre de lignes fixes 
'  nfcol% = nombre de colonnes fixes
'  dcell% = écart entre cellules
'  cdef$  = couleur par défaut des cellules en chaîne hexa "#RRBGGBB"
'  cflig$ = couleur des lignes fixes en chaîne hexa "#RRBGGBB"
'  cfCol$ = couleur des colonnes fixes en chaîne hexa "#RRBGGBB"
'
' aide pour les tableaux:
'  http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html
'  http://cyberzoide.developpez.com/html/table.php3
'  http://chatinais.pagesperso-orange.fr/courhtml/tableau/framdimc.htm
  dim_local l%, c%, CellColor$, CellContent$, ColWidth%, RowHeight%, TagID$
  dim_local s$, p%, i%, c$, x0%, y0%, x1%, y1%
  dim_local defColWidth% : defColWidth% = 64
  dim_local defRowHeight% : defRowHeight% = 24
 
 
  html$ = ""
 
  html$ = html$ + "<STYLE TYPE="+chr$(34)+"text/css"+chr$(34)+">"+chr$(13)+chr$(10)
  html$ = html$ + "<!--"+chr$(13)+chr$(10)
  html$ = html$ + "TD{font-family: Arial; font-size: 10pt;}"+chr$(13)+chr$(10)
  html$ = html$ + "--->"+chr$(13)+chr$(10)
  html$ = html$ + "</STYLE>" +chr$(13)+chr$(10)

  ' il faut utiliser les attributs personnels data-rows et data_cols pour passer l'information lignes et colonnes 
  html$ = html$ + "<table id="+chr$(34)+"KGFTable"+chr$(34)
  html$ = html$ + "  style="+chr$(34)+"position: absolute; top: 0px; left; 0px"+chr$(34)
  html$ = html$ + " border="+chr$(34)+"1"+chr$(34)
  html$ = html$ + " data-rows="+chr$(34)+"10"+chr$(34) + " data-cols="+chr$(34)+"6"+chr$(34)
  html$ = html$ + " cellpadding="+chr$(34)+"4"+chr$(34)
  html$ = html$ + " cellspacing="+chr$(34)+str$(dcell%)+chr$(34)
  html$ = html$ + " width="+chr$(34)+"400"+chr$(34)
  html$ = html$ + ">"+chr$(13)+chr$(10)
 
  ' lignes fixes 
 
  ' valeurs par défaut                               
  RowHeight% = defRowHeight%
  ' valeurs ajustées pour la ligne
 
 
  for l%=1 to nflig%
    html$ = html$ + "  <tr>"+chr$(13)+chr$(10)
    for c%=1 to ncol%
      ' valeurs par défaut
      ColWidth%  = defColWidth%
      ' valeurs ajustées pour la cellule
      TagID$ = "R"+str$(l%)+"C"+str$(c%)
  ' il faut utiliser les attributs personnels data-row et data_col pour passer l'information ligne et colonne 
  ' il faut utiliser l'attribut tag pour identifier le champ mors d'un clic
      html$ = html$ + "    <th"
      html$ = html$ + " id="+TagID$
      html$ = html$ + " data-row="+chr$(34)+"1"+chr$(34)
      html$ = html$ + " data-col="+chr$(34)+str$(c%)+chr$(34) 
      html$ = html$ + " nowrap height="+chr$(34)+"10"+chr$(34)
      html$ = html$ + " bgcolor="+chr$(34)+cflig$+chr$(34)+" align="+chr$(34)
      html$ = html$ + " left"+chr$(34)+" valign="+chr$(34)+"top"+chr$(34)+" width="+chr$(34)
      html$ = html$ + str$(ColWidth%)+chr$(34)+" height="+chr$(34)+str$(RowHeight%)+chr$(34)
      html$ = html$ + " valign="+chr$(34)+" top"+chr$(34)+">"
      html$ = html$ + grid_read$(grid%,l%,c%) + "&nbsp;</th>"+chr$(13)+chr$(10)
    next c%
    html$ = html$ + "  </tr>"+chr$(13)+chr$(10)
  next l%

  ' autres lignes du tableau
  for l%=1+nflig% to nlig%
    RowHeight% = defRowHeight%
    html$ = html$ + "  <tr>"+chr$(13)+chr$(10)
    for c%=1 to ncol%
   
      ' valeurs par défaut
      CellContent$ = grid_read$(grid%,l%,c%)
      if CellContent$="" then CellContent$ = "&nbsp;"
      CellColor$ = cfcol$
      ColWidth%  = defColWidth%
     
      if c%>nflig%
        CellColor$ = cdef$
        if ncRect%>0
          for i%=0 to ncRect%-1
            x0% = val(cRect$(i%,0))
            y0% = val(cRect$(i%,1))
            x1% = val(cRect$(i%,2))
            y1% = val(cRect$(i%,3))
            c$ = cRect$(i%,4)
            if (l%>=y0%) and (l%<=y1%)
              if (c%>=x0%) and (c%<=x1%)
                CellColor$ = c$
              end_if
            end_if
          end_if
        next i%
      end_if
     
      if left$(CellContent$,1)="#"
        CellContent$ = mid$(CellContent$,2,len(CellContent$))
        CellContent$ = "<img src="+chr$(34)+"file:///"+IcoFolder$+CellContent$+".jpg"+chr$(34)+" /> "+CellContent$
      end_if
     
      TagID$ = "R"+str$(l%)+"C"+str$(c%)
  ' il faut utiliser les attributs personnels data-row et data_col pour passer l'information ligne et colonne 
  ' il faut utiliser l'attribut tag pour identifier le champ mors d'un clic
      if c%>nfcol%
        html$ = html$ + "    <td"
      else
        html$ = html$ + "    <th"
      end_if
      html$ = html$ + " id="+TagID$
      html$ = html$ + " data-row="+chr$(34)+str$(l%)+chr$(34)
      html$ = html$ + " data-col="+chr$(34)+str$(c%)+chr$(34) 
      html$ = html$ + " nowrap bgcolor="+chr$(34)+CellColor$+chr$(34)
      html$ = html$ + " valign="+chr$(34)+"top"+chr$(34)+" height="+chr$(34)
      html$ = html$ + str$(RowHeight%)+chr$(34)+">" + CellContent$
      html$ = html$ + "</td>"+chr$(13)+chr$(10)
    next c%
    html$ = html$ + "  </tr>"+chr$(13)+chr$(10)
  next l%
  html$ = html$+"</table>"+chr$(13)+chr$(10)
 
  file_open_write 1,"test_html.html"
  file_writeln 1,html$
  file_close 1
  html$ = "file://C:\Users\klausgunther\Documents\Mes projets\Mes projets Delphi\KGF\test_html.html"

  res% = dll_call2("WB_Url",WB%,adr(html$))
'  file_delete "test_html.html"

  s$ = "KGFTable"
  res% = dll_call2("WB_IdentifyTable",WB%,adr(s$))
  ' message "WB_IdentifyTable: "+str$(res%)
   
end_sub
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://klauspanoramic.comxa.com/index.html
Klaus

avatar

Nombre de messages : 11088
Age : 69
Localisation : Ile de France
Date d'inscription : 29/12/2009

MessageSujet: Re: Affichage d'un GRID en HTML avec couleurs et images   Lun 12 Fév 2018 - 1:12

Un exemple d'utilisation des icônes affichées dans la représentation HTML: cliquez sur le nom à côté de l'icône et l'image s'affichera en grand dans le picture en-dessous. Evidemment, pour les petites icônes, ce n'est pas terrible.

Mais si l'on met une photo dans le tableau ? Prenez une de vos photos, même grandes. Mettez-la dans le dossier images paramétré dans la ligne 9, et remplacez le texte "#Passiflore" par "#xxxxx" avec xxxxx étant le nom de votre photo, sans le chemin et sans l'extension. Puis, lancez le programme. La photo apparaîtra dans le tableau sous forme d'icône. Puis cliquez sur le nom à côté de l'icône et l'image s'affichera en bas.
Code:
' HTML_visualisation_de_GRID.bas

' Ce programme montre d'utilisation d'un GRID caché, mais dont la
' visualisation est faite en HTML par un WebBrowser.

label Grid_OnClick, UserEvent

dim res%, WB%, c%, l%, html$, lig%, col%, ID$, s$, s1$, p%, n%, nr%, img$
dim IcoFolder$ : IcoFolder$ = "C:\Users\klausgunther\Documents\Mes projets\Mes projets Delphi\KGF\Icones 16x16\"
dim KGF$ : KGF$ = "KGF.dll"

' ========== paramétrage du GRID
dim nlig%  : nlig%  = 10          : ' nombre de lignes au total
dim ncol%  : ncol%  = 6          : ' nombre de colonnes au total
dim nflig%  : nflig%  = 1          : ' nombre de lignes fixes
dim nfcol%  : nfcol%  = 1          : ' nombre de colonnes fixes
dim cdef$  : cdef$  = "#FFFFFF"  : ' couleur par défaut des cellules
dim cflig$  : cflig$  = "#F0F0F0"  : ' couleur des lignes fixes
dim cfcol$  : cfcol$  = "#F8F8F8"  : ' couleur des colonnes fixes
dim dcell%  : dcell%  = 0          : ' écart entre cellules en pixels
dim ncRect% : ncRect% = 3          : ' nombre de rectangles colorés dans cRect$
dim cRect$(2,4)                    : ' rectangles colorés dans la partie non fixe
                                    : '  (x,0) = x0
                                    : '  (x,1) = y0
                                    : '  (x,2) = x1
                                    : '  (x,0) = y1
                                    : '  (x,0) = couleur en format "#RRGGBB"
  cRect$(0,0) = "1"                : ' ligne 6 est rouge
  cRect$(0,1) = "6"
  cRect$(0,2) = "100"
  cRect$(0,3) = "6"
  cRect$(0,4) = "#FF0000"
  cRect$(1,0) = "4"                : ' colonne 4 est jaune
  cRect$(1,1) = "1"
  cRect$(1,2) = "4"
  cRect$(1,3) = "100"
  cRect$(1,4) = "#FFFF00"
  cRect$(2,0) = "4"                : ' cellule ligne 6 colonne 4 est bleue
  cRect$(2,1) = "6"
  cRect$(2,2) = "4"
  cRect$(2,3) = "6"
  cRect$(2,4) = "#0000FF"
 
width 0,1200 : height 0,700

grid 1 : top 1,10 : left 1,10 : width 1,400 : height 1,260
grid_column 1,ncol% : grid_row 1,nlig% : font_name 1,"Arial" : font_size 1,10
for c%=2 to ncol%
  grid_write 1,1,c%,"Col. "+str$(c%)
next c%
for l%=2 to nlig%
  grid_write 1,l%,1,"Ligne "+str$(l%)
next l%
grid_write 1,5,4,"Panoramic"
grid_write 1,4,3,"#Export"
grid_write 1,8,4,"#Open"
grid_write 1,2,5,"#Passiflore"

' hide 1

memo 2 : bar_both 2 : on_change 2,Grid_OnClick
  top 2,400 : width 2,300 : height 2,100
' hide 2

picture 3 : top 3,350 : left 3,430 : width 3,500 : height 3,300 : stretch_on 3

On_User_Event UserEvent

dll_on KGF$

WB% = dll_call1("WB_Create",handle(0))
res% = dll_call5("WB_Locate",WB%,430,10,500,300)
html$ = "about:blank"
res% = dll_call2("WB_Url",WB%,adr(html$))
html$ = ""
res% = dll_call2("WB_SurveyFilter",WB%,adr(html$)) 
res% = dll_call4("WB_Survey",WB%,handle(2),1,2) 

AfficherGrid(1,nlig%,ncol%,nflig%,nfcol%,dcell%,cdef$,cflig$,cfcol$)

nr% = 6
for n%=1 to 20
  if nr%=nlig% then nr% = 1
  nr% = nr% + 1
  cRect$(0,1) = str$(nr%)
  cRect$(0,3) = str$(nr%)
  AfficherGrid(1,nlig%,ncol%,nflig%,nfcol%,dcell%,cdef$,cflig$,cfcol$)
next n%

end

Grid_OnClick:
  message text$(2)
  return
 
UserEvent:
  if bin_and(user_event_wparam,hex("FF000000"))<>hex("08000000") then return  : ' pas WebBrowser ?
  if bin_and(user_event_wparam,hex("00FF0000"))<>hex("00010000") then return  : ' pas un clic ?
  lig% = user_event_lparam/65536
  col% = bin_and(user_event_lparam,65535)
'  message "UserEvent  click WebBrowser table ligne "+str$(lig%)+"  colonne "+str$(col%)
  if col%<=nfcol%
    ' ici, trairer le clic dans la colonne fixe à gauche
    message "Clic dans colonne fixe "+str$(col%)+" à la ligne "+str$(lig%)
    return
  end_if
  if lig%<=nflig%
    ' ici, traiter le clic dans la ligne fixe en haut
    message "Clic dans ligne fixe "+str$(lig%)+" à la ligne "+str$(col%)
    return
  end_if
   
  ID$ = "R"+str$(lig%)+"C"+str$(col%)
  s$ = string$(255," ")
  res% = dll_call3("WB_GetInnerHTMLofElementByID",WB%,adr(ID$),adr(s$))
  s$ = trim$(s$)
'  message "Contenu: "+s$
  if left$(s$,1)="<"
    p% = instr(s$,">")
    s1$ = mid$(s$,p%+2,len(s$))
    img$ = IcoFolder$ + s1$ + ".jpg"
    res% = dll_call1("LoadAnyImageFile",adr(img$))
    clipboard_paste 3
  end_if     
  if lig%>2
    if col%>2
      ID$ = "R"+str$(lig%-1)+"C"+str$(col%-1)
      s1$ = s$
      if left$(s1$,1)="<"
        p% = instr(s1$,">")
        s1$ = "#"+mid$(s1$,p%+2,len(s1$))
      end_if
      if s1$="&nbsp;" then s1$ = " "
      grid_write 1,lig%-1,col%-1,s1$
      res% = dll_call3("WB_SetInnerHTMLofElementByID",WB%,adr(ID$),adr(s$))
    end_if
  end_if
  return

sub AfficherGrid(grid%,nlig%,ncol%,nflig%,nfcol%,dcell%,cdef$,cflig$,cfCol$)
' Paramètres:
'  grid%  = numéro de l'objet GRID
'  nlig%  = nombre de lignes 
'  ncol%  = nombre de colonnes,
'  nflig% = nombre de lignes fixes 
'  nfcol% = nombre de colonnes fixes
'  dcell% = écart entre cellules
'  cdef$  = couleur par défaut des cellules en chaîne hexa "#RRBGGBB"
'  cflig$ = couleur des lignes fixes en chaîne hexa "#RRBGGBB"
'  cfCol$ = couleur des colonnes fixes en chaîne hexa "#RRBGGBB"
'
' aide pour les tableaux:
'  http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html
'  http://cyberzoide.developpez.com/html/table.php3
'  http://chatinais.pagesperso-orange.fr/courhtml/tableau/framdimc.htm
  dim_local l%, c%, CellColor$, CellContent$, ColWidth%, RowHeight%, TagID$
  dim_local s$, p%, i%, c$, x0%, y0%, x1%, y1%
  dim_local defColWidth% : defColWidth% = 64
  dim_local defRowHeight% : defRowHeight% = 24
 
 
  html$ = ""
 
  html$ = html$ + "<STYLE TYPE="+chr$(34)+"text/css"+chr$(34)+">"+chr$(13)+chr$(10)
  html$ = html$ + "  <!--"+chr$(13)+chr$(10)
  html$ = html$ + "    TD{font-family: Arial; font-size: 10pt;}"+chr$(13)+chr$(10)
  html$ = html$ + "  --->"+chr$(13)+chr$(10)
  html$ = html$ + "</STYLE>" +chr$(13)+chr$(10)

  ' il faut utiliser les attributs personnels data-rows et data_cols pour passer l'information lignes et colonnes 
  html$ = html$ + "<table id="+chr$(34)+"KGFTable"+chr$(34)
  html$ = html$ + " style="+chr$(34)+"position: absolute; top: 0px; left; 0px"+chr$(34)
  html$ = html$ + " border="+chr$(34)+"1"+chr$(34)
  html$ = html$ + " data-rows="+chr$(34)+"10"+chr$(34)
  html$ = html$ + " data-cols="+chr$(34)+"6"+chr$(34)
  html$ = html$ + " cellpadding="+chr$(34)+"4"+chr$(34)
  html$ = html$ + " cellspacing="+chr$(34)+str$(dcell%)+chr$(34)
  html$ = html$ + " width="+chr$(34)+"400"+chr$(34)
  html$ = html$ + ">"+chr$(13)+chr$(10)
 
  ' lignes fixes 
 
  ' valeurs par défaut                               
  RowHeight% = defRowHeight%
  ' valeurs ajustées pour la ligne
 
 
  for l%=1 to nflig%
    html$ = html$ + "  <tr>"+chr$(13)+chr$(10)
    for c%=1 to ncol%
      ' valeurs par défaut
      ColWidth%  = defColWidth%
      ' valeurs ajustées pour la cellule
      TagID$ = "R"+str$(l%)+"C"+str$(c%)
  ' il faut utiliser les attributs personnels data-row et data_col pour passer l'information ligne et colonne 
  ' il faut utiliser l'attribut tag pour identifier le champ mors d'un clic
      html$ = html$ + "    <th"
      html$ = html$ + " id="+TagID$
      html$ = html$ + " data-row="+chr$(34)+"1"+chr$(34)
      html$ = html$ + " data-col="+chr$(34)+str$(c%)+chr$(34) 
      html$ = html$ + " nowrap height="+chr$(34)+"10"+chr$(34)
      html$ = html$ + " bgcolor="+chr$(34)+cflig$+chr$(34)+" align="+chr$(34)
      html$ = html$ + " left"+chr$(34)+" valign="+chr$(34)+"top"+chr$(34)
      html$ = html$ + " width="+chr$(34)+str$(ColWidth%)+chr$(34)
      html$ = html$ + " height="+chr$(34)+str$(RowHeight%)+chr$(34)
      html$ = html$ + " valign="+chr$(34)+" top"+chr$(34)+">"
      html$ = html$ + grid_read$(grid%,l%,c%) + "&nbsp;"
      html$ = html$ + "</th>"+chr$(13)+chr$(10)
    next c%
    html$ = html$ + "  </tr>"+chr$(13)+chr$(10)
  next l%

  ' autres lignes du tableau
  for l%=1+nflig% to nlig%
    RowHeight% = defRowHeight%
    html$ = html$ + "  <tr>"+chr$(13)+chr$(10)
    for c%=1 to ncol%
   
      ' valeurs par défaut
      CellContent$ = grid_read$(grid%,l%,c%)
      if CellContent$="" then CellContent$ = "&nbsp;"
      CellColor$ = cfcol$
      ColWidth%  = defColWidth%
     
      if c%>nflig%
        CellColor$ = cdef$
        if ncRect%>0
          for i%=0 to ncRect%-1
            x0% = val(cRect$(i%,0))
            y0% = val(cRect$(i%,1))
            x1% = val(cRect$(i%,2))
            y1% = val(cRect$(i%,3))
            c$ = cRect$(i%,4)
            if (l%>=y0%) and (l%<=y1%)
              if (c%>=x0%) and (c%<=x1%)
                CellColor$ = c$
              end_if
            end_if
          end_if
        next i%
      end_if
     
      if left$(CellContent$,1)="#"
        CellContent$ = mid$(CellContent$,2,len(CellContent$))
        CellContent$ = "<img src="+chr$(34)+"file:///"+IcoFolder$+CellContent$+".jpg"+chr$(34)+" height=16 width=16/> "+CellContent$
' <td><img src="H.gif" alt="" border=3 height=100 width=100></img></td>
      end_if
     
      TagID$ = "R"+str$(l%)+"C"+str$(c%)
  ' il faut utiliser les attributs personnels data-row et data_col pour passer l'information ligne et colonne 
  ' il faut utiliser l'attribut tag pour identifier le champ mors d'un clic
      if c%>nfcol%
        html$ = html$ + "    <td"
      else
        html$ = html$ + "    <th"
      end_if
      html$ = html$ + " id="+TagID$
      html$ = html$ + " data-row="+chr$(34)+str$(l%)+chr$(34)
      html$ = html$ + " data-col="+chr$(34)+str$(c%)+chr$(34) 
      html$ = html$ + " nowrap bgcolor="+chr$(34)+CellColor$+chr$(34)
      html$ = html$ + " valign="+chr$(34)+"top"+chr$(34)+" height="+chr$(34)
      html$ = html$ + str$(RowHeight%)+chr$(34)+">" + CellContent$
      html$ = html$ + "</td>"+chr$(13)+chr$(10)
    next c%
    html$ = html$ + "  </tr>"+chr$(13)+chr$(10)
  next l%
  html$ = html$+"</table>"+chr$(13)+chr$(10)
 
  file_open_write 1,"test_html.html"
  file_writeln 1,html$
  file_close 1
  html$ = "file://C:\Users\klausgunther\Documents\Mes projets\Mes projets Delphi\KGF\test_html.html"

  res% = dll_call2("WB_Url",WB%,adr(html$))
'  file_delete "test_html.html"

  s$ = "KGFTable"
  res% = dll_call2("WB_IdentifyTable",WB%,adr(s$))
  ' message "WB_IdentifyTable: "+str$(res%)
   
end_sub
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://klauspanoramic.comxa.com/index.html
Contenu sponsorisé




MessageSujet: Re: Affichage d'un GRID en HTML avec couleurs et images   

Revenir en haut Aller en bas
 
Affichage d'un GRID en HTML avec couleurs et images
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Problème HTML avec cases à cocher.
» Page HTML avec CSS en page d'accueil.
» Lien message (pages HTML) avec feuille CSS du forum
» Création d'une page HTML avec formulaire
» Codes HTML des couleurs

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
FORUM DE DISCUSSION SUR LE LANGAGE PANORAMIC :: PANORAMIC :: Vos sources, vos utilitaires à partager-
Sauter vers: