HTA : Graphisme et Animation en pure CSS + Python

4 réponses

Salvatore

26/10/2007 à 13:09

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>

4 réponses

Méta-MCI \(MVP\)

26/10/2007 à 14:15

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/05/27/free-ramdisk-for-windows-vista-xp-2000-and-2003-server/

@+

Michel Claveau

BertrandB

27/10/2007 à 19:13

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.

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.

Vous avez filtré cet utilisateur ! Consultez son message

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.

Méta-MCI \(MVP\)

27/10/2007 à 21:13

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

Salvatore

28/10/2007 à 15:25

Merci à tous :-)

Salvatore

HTA : Graphisme et Animation en pure CSS + Python

4 réponses

Veuillez sélectionner un problème