Discussion :

[dahtah]

Bonjour a tous,

Je cherche a dessiner des images, contenant des rectangles de diverses largeurs et ajouter des metadonnees, ainsi qu'une echelle, ...

Pour l'instant, j'ai fait ca vite fait en utilisant pillow:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
def draw_chunk_usage(chunks, range_, img_size=(1024, 128)):
    start, end = range_
    width, height = img_size
    image = Image.new("RGB", img_size, "WHITE")
    draw = ImageDraw.Draw(image)
    red = ImageColor.getcolor("RED", "RGB")
    green = ImageColor.getcolor("GREEN", "RGB")
    black = ImageColor.getcolor("BLACK", "RGB")
    white = ImageColor.getcolor("WHITE", "RGB")
    for chunk in chunks:
        chunk_start = chunk.as_address()
        data_start = chunk.as_mem()
        chunk_end = chunk_start + chunk.chunksize()
        if chunk_start >= start and chunk_end <= end:
            color = green if chunk.is_inuse() else red
            # Draw heap chunk metadata rectangle first
            # Leftmost top corner
            x1 = ((((chunk_start - start) * width) // (end - start)), 0)
            # Rightmost bottom corner
            x2 = ((((data_start - start) * width) // (end - start)), height)
            draw.rectangle((x1, x2), white, black)
            # Then draw heap chunk data rectangle
            x1 = ((((data_start - start) * width) // (end - start)), 0)
            x2 = ((((chunk_end - start) * width) // (end - start)), height)
            draw.rectangle((x1, x2), color, black)
            draw.text((x1[0] + 10, x1[1] + 10), hexdump_as_bytes(data_start, 32), black)
    return image

Ce qui donne quelque chose du genre:


Pillow est la mauvaise approche pour ce que je veux faire ensuite: afficher les métadonnées de chaque rectangle a chaque clic ou "hover" (adresses, contenu), avoir une échelle, ajouter quelques boutons, ...

Le truc c'est que je fais jamais d'IHM, du coup je sais pas trop vers quoi m'orienter (Matplotlib, tkinter grid(), ....). Auriez-vous des conseils a ce niveau, et sur l’approche générale? J'ai pas besoin d'avoir quelque chose de joli, juste quelque chose ou je peux visualiser les données et métadonnées correctement, et interagir avec.


Merci!

[VinsS]

Salut,

Ce n'est effectivement pas quelque chose de bien compliqué mais il faudrait savoir ce que sont les chuks.
On devine que ce sont des instances de quelque chose, mais quoi ?

C'est le texte des données que tu veux réactif à la souris ?

[dahtah]

Salut VinsS,

C'est une visualisation de la "heap" de la libc. En gros, les zones blanches sont les metadonnees (taille, pointeur prev/next, ...) et les zones vertes/rouges sont les donnees.
En gros, un chunk est un bloc metadonnees/donnees gere par la libc (malloc/mmap/free/munmap). Example:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
(gdb) heap all
All chunks of memory on heap (both used and free)
-------------------------------------------------
0: 0x00602000 -> 0x0060209f  inuse: 160 bytes (<MChunkPtr chunk=0x602000 mem=0x602010 PREV_INUSE inuse chunksize=160 memsize=144>)
1: 0x006020a0 -> 0x006020bf  inuse: 32 bytes (<MChunkPtr chunk=0x6020a0 mem=0x6020b0 PREV_INUSE inuse chunksize=32 memsize=16>)
2: 0x006020c0 -> 0x006020ff  inuse: 64 bytes (<MChunkPtr chunk=0x6020c0 mem=0x6020d0 PREV_INUSE inuse chunksize=64 memsize=48>)
3: 0x00602100 -> 0x0060213f  inuse: 64 bytes (<MChunkPtr chunk=0x602100 mem=0x602110 PREV_INUSE inuse chunksize=64 memsize=48>)
4: 0x00602140 -> 0x0060215f  free: 32 bytes (<MChunkPtr chunk=0x602140 mem=0x602150 PREV_INUSE free chunksize=32 memsize=16>)

Ce que je voudrais, c'est de pouvoir voir les metadonnees/donnees en cliquant sur le rectangle, avoir un axe des abscisses (valeur des adresses du chunk) et pouvoir appeller free() sur un bloc avec un clic droit par exemple.

Effectivement, je pense pas que ce soit bien complique a faire, une fois le bon outil choisi.

Merci

[wiztricks]

Pillow est la mauvaise approche pour ce que je veux faire ensuite: afficher les métadonnées de chaque rectangle a chaque clic ou "hover" (adresses, contenu), avoir une échelle, ajouter quelques boutons, ...

Le plus simple est d'utiliser un Canvas (tkinter).
Les rectangles (.create_rectangle) sont des items (noms des objets créés dans le Canvas) auxquels on peut associer des actions en fonction des clicks et du passage de la souris. De plus on peut "classifier" ces items en les associant à des "tags" i.e. tous les items (rectangles) associés à un tag pourront avoir le même comportement.

Exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import tkinter as tk
 
def do_show_data(event):
    iid = canvas.find_withtag('current')[0]
    print(iid, chunks[iid])
 
canvas = tk.Canvas(width=500, height=500)
canvas.pack()
canvas.tag_bind('chunk', '<1>', do_show_data)
 
chunks = {}
for x in range(1, 10):
    x0 = x * 50
    x1 = x0 + 5
    iid = canvas.create_rectangle(x0, 0, x1, 500, fill='blue', tag='chunk')
    chunks[iid] = x0, x1
 
tk.mainloop()

- W

[dahtah]

Merci wiztricks, c'est exactement ce qu'il me fallait .