FORUM DE DISCUSSION SUR LE LANGAGE PANORAMIC
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
FORUM DE DISCUSSION SUR LE LANGAGE PANORAMIC

Développement d'applications avec le langage Panoramic
 
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  S'enregistrerS'enregistrer  MembresMembres  Connexion  
Derniers sujets
» demande explication KGF pour imprimer en mm
Affichage d'un GRID en HTML avec couleurs et images Emptypar JL35 Hier à 17:28

» Petit passage furtif
Affichage d'un GRID en HTML avec couleurs et images Emptypar Froggy One Mer 27 Mar 2024 - 14:26

» SPIN et aide langage (résolu)
Affichage d'un GRID en HTML avec couleurs et images Emptypar leclode Sam 23 Mar 2024 - 15:20

» Aide-mémoire des mots-clés Panoramic
Affichage d'un GRID en HTML avec couleurs et images Emptypar papydall Mer 20 Mar 2024 - 21:23

» Je ne comprend pas pourquoi la largeur de la scene 3d change
Affichage d'un GRID en HTML avec couleurs et images Emptypar Marc Mar 12 Mar 2024 - 20:06

» Comment télécharger panoramic?
Affichage d'un GRID en HTML avec couleurs et images Emptypar lepetitmarocain Sam 9 Mar 2024 - 13:31

» @lepetitmarocain <==> KGFGrid
Affichage d'un GRID en HTML avec couleurs et images Emptypar Klaus Dim 3 Mar 2024 - 9:59

» Tangram-Toukaré
Affichage d'un GRID en HTML avec couleurs et images Emptypar jjn4 Mer 28 Fév 2024 - 18:12

» Editeur EliP 6 : Le Tiny éditeur avec 25 onglets de travail
Affichage d'un GRID en HTML avec couleurs et images Emptypar jjn4 Mer 28 Fév 2024 - 18:09

» KGF_dll - nouvelles versions
Affichage d'un GRID en HTML avec couleurs et images Emptypar Klaus Mer 28 Fév 2024 - 17:01

» Mes souhaits d'amélioration de Panoramic.
Affichage d'un GRID en HTML avec couleurs et images Emptypar Pedro Lun 26 Fév 2024 - 18:12

» Testez-votre-QI
Affichage d'un GRID en HTML avec couleurs et images Emptypar jjn4 Dim 25 Fév 2024 - 17:12

» Utilisation d'Élip
Affichage d'un GRID en HTML avec couleurs et images Emptypar jjn4 Sam 24 Fév 2024 - 18:33

» Récapitulatif ludothèque panoramic jjn4
Affichage d'un GRID en HTML avec couleurs et images Emptypar jjn4 Sam 24 Fév 2024 - 18:11

» Générateur de mots de passe
Affichage d'un GRID en HTML avec couleurs et images Emptypar mindstorm Mar 20 Fév 2024 - 20:09

Navigation
 Portail
 Index
 Membres
 Profil
 FAQ
 Rechercher
Rechercher
 
 

Résultats par :
 
Rechercher Recherche avancée
Mars 2024
LunMarMerJeuVenSamDim
    123
45678910
11121314151617
18192021222324
25262728293031
CalendrierCalendrier
Le deal à ne pas rater :
TCL C74 Series 55C743 – TV 55” 4K QLED 144 Hz Google TV (Via ODR ...
499 €
Voir le deal

 

 Affichage d'un GRID en HTML avec couleurs et images

Aller en bas 
3 participants
AuteurMessage
Klaus

Klaus


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

Affichage d'un GRID en HTML avec couleurs et images Empty
MessageSujet: Affichage d'un GRID en HTML avec couleurs et images   Affichage d'un GRID en HTML avec couleurs et images EmptySam 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:
Affichage d'un GRID en HTML avec couleurs et images Export10
Affichage d'un GRID en HTML avec couleurs et images Open10
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
http://klauspanoramic.comxa.com/index.html
Minibug

Minibug


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

Affichage d'un GRID en HTML avec couleurs et images Empty
MessageSujet: Re: Affichage d'un GRID en HTML avec couleurs et images   Affichage d'un GRID en HTML avec couleurs et images EmptySam 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
http://gpp.panoramic.free.fr
Klaus

Klaus


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

Affichage d'un GRID en HTML avec couleurs et images Empty
MessageSujet: Re: Affichage d'un GRID en HTML avec couleurs et images   Affichage d'un GRID en HTML avec couleurs et images EmptySam 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
http://klauspanoramic.comxa.com/index.html
silverman

silverman


Nombre de messages : 968
Age : 51
Localisation : Picardie
Date d'inscription : 18/03/2015

Affichage d'un GRID en HTML avec couleurs et images Empty
MessageSujet: Re: Affichage d'un GRID en HTML avec couleurs et images   Affichage d'un GRID en HTML avec couleurs et images EmptyDim 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
Klaus

Klaus


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

Affichage d'un GRID en HTML avec couleurs et images Empty
MessageSujet: Re: Affichage d'un GRID en HTML avec couleurs et images   Affichage d'un GRID en HTML avec couleurs et images EmptyDim 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
http://klauspanoramic.comxa.com/index.html
silverman

silverman


Nombre de messages : 968
Age : 51
Localisation : Picardie
Date d'inscription : 18/03/2015

Affichage d'un GRID en HTML avec couleurs et images Empty
MessageSujet: Re: Affichage d'un GRID en HTML avec couleurs et images   Affichage d'un GRID en HTML avec couleurs et images EmptyDim 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
Klaus

Klaus


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

Affichage d'un GRID en HTML avec couleurs et images Empty
MessageSujet: Re: Affichage d'un GRID en HTML avec couleurs et images   Affichage d'un GRID en HTML avec couleurs et images EmptyDim 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:
Affichage d'un GRID en HTML avec couleurs et images Aa129

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
http://klauspanoramic.comxa.com/index.html
Klaus

Klaus


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

Affichage d'un GRID en HTML avec couleurs et images Empty
MessageSujet: Re: Affichage d'un GRID en HTML avec couleurs et images   Affichage d'un GRID en HTML avec couleurs et images EmptyDim 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
http://klauspanoramic.comxa.com/index.html
Klaus

Klaus


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

Affichage d'un GRID en HTML avec couleurs et images Empty
MessageSujet: Re: Affichage d'un GRID en HTML avec couleurs et images   Affichage d'un GRID en HTML avec couleurs et images EmptyLun 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
http://klauspanoramic.comxa.com/index.html
Contenu sponsorisé





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

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
-
» Un catalogue de photos de fleurs, avec KBDD, affichage HTML
» couleurs d'affichage des textes et couleurs des button
» Couleurs HTML
» Problème mineur d'affichage d'un GRID suite HIDE/SHOW
» Outils couleurs avec pipette

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: