HTA : Graphisme et Animation en pure CSS + Python

26/10/2007, 12h09

Bonjour la communauté,

Après avoir testé VML, j'ai cherché quelque
de moins gourmand en ressource pour réaliser
des graphes sur une page HTML
Je suis tombé sur cet article : http://www.davidbetz.net/graphics/
J'ai décidé de voir ce que cela donner en Python :-)

Cordialement

Salvatore

Notez au passage la fonction "win32gui.PumpWaitingMessages()"
qui permet une animation fluide (:-) M.C)
Voici un début en Python:

<code>

<html>
<head>
<TITLE>HTML Application Example</TITLE>
<HTA:APPLICATION ID="HTAEx" APPLICATIONNAME="HTAEx" ICON="e.ico"
WINDOWSTATE="normal">
<style type="text/css">
..Ink {
position: relative;
background-color: transparent;
border-top: 1px solid transparent;
width: 1px;
height: 1px;
}
..InkV {
position: absolute;
background-color: transparent;
border-top: 1px solid transparent;
width: 1px;
height: 1px;
}
#dynamicAttacher {
background-color: #677767;
width: 800px;
height:800px;
border: 0px solid black;
padding:0px;
margin:0px;
}

</style>

<script language=python>
import win32gui
dynamicAttacherObj = document.getElementById('dynamicAttacher');
def plotPixel(x,y):
pixel = document.createElement('div')
pixel.style.color = "#FF0000";
pixel.className = 'Ink';
pixel.style.left = `x` + 'px';
pixel.style.top = `y` + 'px';
document.all.dynamicAttacher.appendChild(pixel)

def DrawVerticalLine(x, y, l, c):
y = y+15
longPixel = document.createElement('div');
longPixel.className = 'InkV';
longPixel.style.border = '0';
longPixel.style.backgroundColor = c;
longPixel.style.height = str(l) + 'px';
longPixel.style.left = str(x) + 'px';
longPixel.style.top = str(y) + 'px';
document.all.dynamicAttacher.appendChild(longPixel );

def DrawHorizontalLine(x, y, l, c):
longPixel = document.createElement('div');
longPixel.className = 'Ink';
longPixel.style.borderTopColor = c;
longPixel.style.width = str(l) + 'px';
longPixel.style.left = str(x) + 'px';
longPixel.style.top = str(y) + 'px';
document.all.dynamicAttacher.appendChild(longPixel );

def test():
dynamicAttacherObj = document.getElementById('dynamicAttacher');
back = dynamicAttacherObj.innerHTML
for i in range(800):
DrawHorizontalLine(0,i,800,"#00ff00")
DrawVerticalLine(i,0,800,"#ffff00")
win32gui.PumpWaitingMessages()
dynamicAttacherObj.innerHTML = back

def init():
DrawHorizontalLine(0,400,800,"#fff")
DrawVerticalLine(400,0,800,"#ff0000")
test()

</script>
</head>

<body onLoad="init()">
<div id="dynamicAttacher"></div>
</body>

</html>

</code>

26/10/2007, 13h15

Ouch ! Tout gérer, pixel par pixel, avec une librairie minimale, ce n'est plus du courage, c'est de
l'abnégation inconsciente.

Est-ce que tu réalises qu'il te faudra tout faire ? Passe, encore, les point, lignes et cercles.
Mais, quand il faudra gérer les surfaces et les intersections d'objets, ça va être méchant.

Et puis, une simple image de 640x480 va te mettre plus de 300 000 balises dans les dents...

AMHA, tu devrais plutôt chercher à utiliser un mini-RAMDisk, et passer par des fichiers dedans.
Tiens, regarde là :
http://www.mydigitallife.info/2007/0...d-2003-server/

@+

Michel Claveau

27/10/2007, 18h13

Salvatore a écrit :
> Bonjour la communauté,
>
> Après avoir testé VML, j'ai cherché quelque
> de moins gourmand en ressource pour réaliser
> des graphes sur une page HTML
> Je suis tombé sur cet article : http://www.davidbetz.net/graphics/
> J'ai décidé de voir ce que cela donner en Python :-)
>
> Cordialement
>
> Salvatore
>
>
> Notez au passage la fonction "win32gui.PumpWaitingMessages()"
> qui permet une animation fluide (:-) M.C)
> Voici un début en Python:
>
>
> <code>
>
> <html>
> <head>
> <TITLE>HTML Application Example</TITLE>
> <HTA:APPLICATION ID="HTAEx" APPLICATIONNAME="HTAEx" ICON="e.ico"
> WINDOWSTATE="normal">
> <style type="text/css">
> .Ink {
> position: relative;
> background-color: transparent;
> border-top: 1px solid transparent;
> width: 1px;
> height: 1px;
> }
> .InkV {
> position: absolute;
> background-color: transparent;
> border-top: 1px solid transparent;
> width: 1px;
> height: 1px;
> }
> #dynamicAttacher {
> background-color: #677767;
> width: 800px;
> height:800px;
> border: 0px solid black;
> padding:0px;
> margin:0px;
> }
>
> </style>
>
> <script language=python>
> import win32gui
> dynamicAttacherObj = document.getElementById('dynamicAttacher');
> def plotPixel(x,y):
> pixel = document.createElement('div')
> pixel.style.color = "#FF0000";
> pixel.className = 'Ink';
> pixel.style.left = `x` + 'px';
> pixel.style.top = `y` + 'px';
> document.all.dynamicAttacher.appendChild(pixel)
>
> def DrawVerticalLine(x, y, l, c):
> y = y+15
> longPixel = document.createElement('div');
> longPixel.className = 'InkV';
> longPixel.style.border = '0';
> longPixel.style.backgroundColor = c;
> longPixel.style.height = str(l) + 'px';
> longPixel.style.left = str(x) + 'px';
> longPixel.style.top = str(y) + 'px';
> document.all.dynamicAttacher.appendChild(longPixel );
>
>
> def DrawHorizontalLine(x, y, l, c):
> longPixel = document.createElement('div');
> longPixel.className = 'Ink';
> longPixel.style.borderTopColor = c;
> longPixel.style.width = str(l) + 'px';
> longPixel.style.left = str(x) + 'px';
> longPixel.style.top = str(y) + 'px';
> document.all.dynamicAttacher.appendChild(longPixel );
>
>
> def test():
> dynamicAttacherObj = document.getElementById('dynamicAttacher');
> back = dynamicAttacherObj.innerHTML
> for i in range(800):
> DrawHorizontalLine(0,i,800,"#00ff00")
> DrawVerticalLine(i,0,800,"#ffff00")
> win32gui.PumpWaitingMessages()
> dynamicAttacherObj.innerHTML = back
>
> def init():
> DrawHorizontalLine(0,400,800,"#fff")
> DrawVerticalLine(400,0,800,"#ff0000")
> test()
>
>
> </script>
> </head>
>
> <body onLoad="init()">
> <div id="dynamicAttacher"></div>
> </body>
>
> </html>
>
> </code>
Je n'ai pas testé mais il y a pyswf par contre à part les exemple sur le
site des swftools il n'y a rien.

27/10/2007, 20h13

Bonsoir !

> il y a pyswf

Hmmm... J'avais essayé un truc un peu similaire, qui wrappait MING. Mais, en gros, on pouvait créer
de petits .SWF ; point.
Pas de possibilités interactives, rien de dynamique.
Et, dans le cas d'un .HTA, obligation de passer également par un fichier.

Par contre, je ne connais pas assez flash, pour savoir si, avec ActionScript (le Javascript de
flash), on peut adresser l'intérieur des images. Si c'était le cas, on devrait pouvoir communiquer
avec Python, en passant pas "fscommand".

Sinon, dans le même genre, il y a Silverlight. J'ai pu vérifier que Silverlight était utilisable
était utilisable dans un .HTA ; en plus, on peut, soit utiliser (nativement) IronPython, soit
Javascript, qui est capable d'appeler des fonctions Python.
Mais, si on peut manipuler les images, je n'ai pas trouvé comment accéder à leur contenu...

@-salutations

Michel Claveau

28/10/2007, 15h25

Merci à tous :-)

Salvatore

26/10/2007, 12h09	#1 (permalink)
Salvatore Messages: n/a Hébergeur:	HTA : Graphisme et Animation en pure CSS + Python Bonjour la communauté, Après avoir testé VML, j'ai cherché quelque de moins gourmand en ressource pour réaliser des graphes sur une page HTML Je suis tombé sur cet article : http://www.davidbetz.net/graphics/ J'ai décidé de voir ce que cela donner en Python :-) Cordialement Salvatore Notez au passage la fonction "win32gui.PumpWaitingMessages()" qui permet une animation fluide (:-) M.C) Voici un début en Python: <code> <html> <head> <TITLE>HTML Application Example</TITLE> <HTA:APPLICATION ID="HTAEx" APPLICATIONNAME="HTAEx" ICON="e.ico" WINDOWSTATE="normal"> <style type="text/css"> ..Ink { position: relative; background-color: transparent; border-top: 1px solid transparent; width: 1px; height: 1px; } ..InkV { position: absolute; background-color: transparent; border-top: 1px solid transparent; width: 1px; height: 1px; } #dynamicAttacher { background-color: #677767; width: 800px; height:800px; border: 0px solid black; padding:0px; margin:0px; } </style> <script language=python> import win32gui dynamicAttacherObj = document.getElementById('dynamicAttacher'); def plotPixel(x,y): pixel = document.createElement('div') pixel.style.color = "#FF0000"; pixel.className = 'Ink'; pixel.style.left = `x` + 'px'; pixel.style.top = `y` + 'px'; document.all.dynamicAttacher.appendChild(pixel) def DrawVerticalLine(x, y, l, c): y = y+15 longPixel = document.createElement('div'); longPixel.className = 'InkV'; longPixel.style.border = '0'; longPixel.style.backgroundColor = c; longPixel.style.height = str(l) + 'px'; longPixel.style.left = str(x) + 'px'; longPixel.style.top = str(y) + 'px'; document.all.dynamicAttacher.appendChild(longPixel ); def DrawHorizontalLine(x, y, l, c): longPixel = document.createElement('div'); longPixel.className = 'Ink'; longPixel.style.borderTopColor = c; longPixel.style.width = str(l) + 'px'; longPixel.style.left = str(x) + 'px'; longPixel.style.top = str(y) + 'px'; document.all.dynamicAttacher.appendChild(longPixel ); def test(): dynamicAttacherObj = document.getElementById('dynamicAttacher'); back = dynamicAttacherObj.innerHTML for i in range(800): DrawHorizontalLine(0,i,800,"#00ff00") DrawVerticalLine(i,0,800,"#ffff00") win32gui.PumpWaitingMessages() dynamicAttacherObj.innerHTML = back def init(): DrawHorizontalLine(0,400,800,"#fff") DrawVerticalLine(400,0,800,"#ff0000") test() </script> </head> <body onLoad="init()"> <div id="dynamicAttacher"></div> </body> </html> </code>

26/10/2007, 13h15	#2 (permalink)
Méta-MCI \(MVP\) Messages: n/a Hébergeur:	Re: Graphisme et Animation en pure CSS + Python Ouch ! Tout gérer, pixel par pixel, avec une librairie minimale, ce n'est plus du courage, c'est de l'abnégation inconsciente. Est-ce que tu réalises qu'il te faudra tout faire ? Passe, encore, les point, lignes et cercles. Mais, quand il faudra gérer les surfaces et les intersections d'objets, ça va être méchant. Et puis, une simple image de 640x480 va te mettre plus de 300 000 balises dans les dents... AMHA, tu devrais plutôt chercher à utiliser un mini-RAMDisk, et passer par des fichiers dedans. Tiens, regarde là : http://www.mydigitallife.info/2007/0...d-2003-server/ @+ Michel Claveau

27/10/2007, 18h13	#3 (permalink)
BertrandB Messages: n/a Hébergeur:	Re: HTA : Graphisme et Animation en pure CSS + Python Salvatore a écrit : > Bonjour la communauté, > > Après avoir testé VML, j'ai cherché quelque > de moins gourmand en ressource pour réaliser > des graphes sur une page HTML > Je suis tombé sur cet article : http://www.davidbetz.net/graphics/ > J'ai décidé de voir ce que cela donner en Python :-) > > Cordialement > > Salvatore > > > Notez au passage la fonction "win32gui.PumpWaitingMessages()" > qui permet une animation fluide (:-) M.C) > Voici un début en Python: > > > <code> > > <html> > <head> > <TITLE>HTML Application Example</TITLE> > <HTA:APPLICATION ID="HTAEx" APPLICATIONNAME="HTAEx" ICON="e.ico" > WINDOWSTATE="normal"> > <style type="text/css"> > .Ink { > position: relative; > background-color: transparent; > border-top: 1px solid transparent; > width: 1px; > height: 1px; > } > .InkV { > position: absolute; > background-color: transparent; > border-top: 1px solid transparent; > width: 1px; > height: 1px; > } > #dynamicAttacher { > background-color: #677767; > width: 800px; > height:800px; > border: 0px solid black; > padding:0px; > margin:0px; > } > > </style> > > <script language=python> > import win32gui > dynamicAttacherObj = document.getElementById('dynamicAttacher'); > def plotPixel(x,y): > pixel = document.createElement('div') > pixel.style.color = "#FF0000"; > pixel.className = 'Ink'; > pixel.style.left = `x` + 'px'; > pixel.style.top = `y` + 'px'; > document.all.dynamicAttacher.appendChild(pixel) > > def DrawVerticalLine(x, y, l, c): > y = y+15 > longPixel = document.createElement('div'); > longPixel.className = 'InkV'; > longPixel.style.border = '0'; > longPixel.style.backgroundColor = c; > longPixel.style.height = str(l) + 'px'; > longPixel.style.left = str(x) + 'px'; > longPixel.style.top = str(y) + 'px'; > document.all.dynamicAttacher.appendChild(longPixel ); > > > def DrawHorizontalLine(x, y, l, c): > longPixel = document.createElement('div'); > longPixel.className = 'Ink'; > longPixel.style.borderTopColor = c; > longPixel.style.width = str(l) + 'px'; > longPixel.style.left = str(x) + 'px'; > longPixel.style.top = str(y) + 'px'; > document.all.dynamicAttacher.appendChild(longPixel ); > > > def test(): > dynamicAttacherObj = document.getElementById('dynamicAttacher'); > back = dynamicAttacherObj.innerHTML > for i in range(800): > DrawHorizontalLine(0,i,800,"#00ff00") > DrawVerticalLine(i,0,800,"#ffff00") > win32gui.PumpWaitingMessages() > dynamicAttacherObj.innerHTML = back > > def init(): > DrawHorizontalLine(0,400,800,"#fff") > DrawVerticalLine(400,0,800,"#ff0000") > test() > > > </script> > </head> > > <body onLoad="init()"> > <div id="dynamicAttacher"></div> > </body> > > </html> > > </code> Je n'ai pas testé mais il y a pyswf par contre à part les exemple sur le site des swftools il n'y a rien.

27/10/2007, 20h13	#4 (permalink)
Méta-MCI \(MVP\) Messages: n/a Hébergeur:	Re: HTA : Graphisme et Animation en pure CSS + Python Bonsoir ! > il y a pyswf Hmmm... J'avais essayé un truc un peu similaire, qui wrappait MING. Mais, en gros, on pouvait créer de petits .SWF ; point. Pas de possibilités interactives, rien de dynamique. Et, dans le cas d'un .HTA, obligation de passer également par un fichier. Par contre, je ne connais pas assez flash, pour savoir si, avec ActionScript (le Javascript de flash), on peut adresser l'intérieur des images. Si c'était le cas, on devrait pouvoir communiquer avec Python, en passant pas "fscommand". Sinon, dans le même genre, il y a Silverlight. J'ai pu vérifier que Silverlight était utilisable était utilisable dans un .HTA ; en plus, on peut, soit utiliser (nativement) IronPython, soit Javascript, qui est capable d'appeler des fonctions Python. Mais, si on peut manipuler les images, je n'ai pas trouvé comment accéder à leur contenu... @-salutations Michel Claveau

28/10/2007, 15h25	#5 (permalink)
Salvatore Messages: n/a Hébergeur:	Re: HTA : Graphisme et Animation en pure CSS + Python Merci à tous :-) Salvatore

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email