je souhaite faire défiler sur un écran de PC (Windows) ou Mac du texte qui donnerait l'illusion qu'il est écrie sur un panneau de led rouge et qui défilerait de droite à gauche.
Merci
-
kornfr
- Messages : 1068
Après 15 années d’existence, le forum historique de Framasoft, ferme ses portes.
Pour les nostalgiques et les curieux, il reste toujours possible de consulter les discussions mais c’est maintenant le forum
Framacolibri qui prend la relève.
Si vous avez des questions, on se retrouve là-bas…
<html>
<head>
<script>
// Taille des LED ( en pixels ):
var LedX = 20;
var LedY = 20;
var coulLedON = "lime";
var coulLedOFF = "#155A17";
var MaxCar = 60;
// Nombre de milliseconde entre chaque période d'horloge
var periode = 500;
var phraseAAfficher = "Coucou";
var tailleBuffer = -1;
var pointeurDebut = 0;
var bufferAfficheur = new Array();
var matriceLettre = new Array();
/*
Fonctionnement :
La matrice d'affichage représente un certain nombres de colonnes sur l'écran, mais on va réalisé un buffer circulaire de l'ensemble partie visible + partie invisible
Pour cela, on stocke la phrase à afficher en bout d'un buffer représentant la partie visible. Le nombre de colonne associée à une lettre est variable.
Pour faire le défilement sur l'écran, on va positionné un pointeur de début d'affichage que l'on fera évolué au cours du temps en prenant soin de n'afficher que
le nombre de colonne correspondant à la partie visible.
*/
/*
Chaque caractere est composé d'une matrice 5x7
Un 0 represente la LED éteinte et un 1 la LED Allumée
Voici par exemple un A :
01110
10001
10001
11111
10001
10001
10001
On va codé par colonne en mettant le bit de poid fort à zéro ce qui est plus simple pour l'utilisation que l'on veut en faire ... Soit :
3F = 63
48 = 72
48=72
48=72
3F = 63
*/
// Construction de la trame initiale
function initialiseSysteme () {
creationMatrice( document.getElementById( "panneau1" ) , 0 );
matriceLettre[10] = new Array(255,65,65,255);
matriceLettre[32] = new Array( 0, 0, 0 ); // espace
matriceLettre[33] = new Array( 121 ); // !
matriceLettre[34] = new Array(112,0,112); // "
matriceLettre[39] = new Array(80,96); // '
matriceLettre[40] = new Array(28,34,65); // (
matriceLettre[41] = new Array(65,34,28); // )
matriceLettre[47] = new Array(2,4,8,16,32); // /
matriceLettre[48] = new Array(62,69,73,81,62); // 0
matriceLettre[49] = new Array(33,127,1); //1
matriceLettre[65] = new Array(63,72,72,72,63); //A
matriceLettre[66] = new Array(127,73,73,73,54); // B
matriceLettre[67] = new Array(62,65,65,65,34); // C
matriceLettre[68] = new Array(127,65,65,34,28); // D
matriceLettre[90] = new Array(67,69,73,81,97); // Z
matriceLettre[92] = new Array(32,16,8,4,2); // \
matriceLettre[99] = new Array(14,17,17,17,2); // c
matriceLettre[111] = new Array(14,17,17,17,14); // o
matriceLettre[117] = new Array(30,1,1,2,31); // u
matriceLettre[110] = new Array(31,8,16,16,15); // n
// Calcul de la taille du buffer circulaire et complément du buffer avec la phrase
fabriqueBuffer();
}
function fabriqueBuffer() {
// Mise à zéro du début du buffer
for ( cpt = 0 ; cpt < MaxCar ; cpt++ ) {
bufferAfficheur[ cpt ] = 0;
}
// On ajoute au buffer le nombre de colonne correspondant à chaque lettre + un espace entre chaque
for( car = 0 ; car < phraseAAfficher.length ; car++ ) {
//alert( "Carac : " + phraseAAfficher.charAt(car) + " => code : " + phraseAAfficher.charCodeAt(car) );
taille = matriceLettre[ phraseAAfficher.charCodeAt(car) ].length;
for ( col = 0 ; col < taille ; col++ ) {
bufferAfficheur[ cpt++ ] = matriceLettre[ phraseAAfficher.charCodeAt(car) ][col]
}
// Gestion de l'espace entre chaque lettres :
if ( ( car + 1 ) < phraseAAfficher.length ) { bufferAfficheur[ cpt++ ] = 0; }
}
tailleBuffer = cpt;
}
function creationMatrice( conteneur , num ) {
matrice = document.createElement("table");
matrice.id = "matrice" + num;
matrice.style.backgroundColor = "black";
matrice.border = 0;
ch = "";
for ( ligne = 0 ; ligne < 7 ; ligne++ ) {
ch += "<tr>"
for ( col = 0 ; col < MaxCar ; col++ ) {
ch += "<td id=\"M" + num + "L" + ligne + "C" + col +"\" style=\"height: " + LedY + "px; width: " + LedX + "px; background-color: " + coulLedOFF + "\"> </td>";
}
ch += "</tr>";
}
matrice.innerHTML = ch;
conteneur.appendChild( matrice );
//matriceLettreOFF ();
}
function afficheColonne( panneau , col , num ) {
for ( i = 0 ; i < 7 ; i++ ) {
obj = document.getElementById( "M" + panneau + "L" + i +"C" + col );
//alert( "num = " + num + " ; i = " + i + " ; N = " + ( ( ( 1 << (6-i) ) & num ) >> (6-i) ) + " ; cellule : M" + panneau + "L" + i +"C" + col );
if ( ( ( ( 1 << (6-i) ) & num ) >> (6-i) ) == 1 ) {
obj.style.backgroundColor = coulLedON;
} else {
obj.style.backgroundColor = coulLedOFF;
}
}
}
function rafraichitAffichage() {
for ( cpt = 0 ; cpt < MaxCar ; cpt++ ) {
afficheColonne( 0 , cpt , bufferAfficheur[ pointeurDebut + cpt ] );
}
}
function matriceLettreOFF () {
for ( c = 0 ; c < MaxCar ; c++ ) {
afficheColonne( 0 , c , 0 );
}
}
function afficheLettre( panneau , lettre , colonne ) {
taille = matriceLettre[ lettre ].length;
for ( col = 0 ; col < taille ; col++ ) {
if ( ( colonne + col ) > MaxCar ) { return ; }
afficheColonne( panneau , colonne + col , matriceLettre[ lettre ][col] );
}
}
function affichePhrase( phrase ) {
for( car = 0 ; car < phrase.length ; car++ ) {
afficheLettre( 0 , phrase.charCodeAt(car) , base + car * 6 );
}
}
function test() {
pointeurDebut++;
if ( pointeurDebut == tailleBuffer ) { pointeurDebut = 0; }
rafraichitAffichage();
window.setTimeout('test()',periode)
}
</script>
<style>
body {
margin: 0;
background-color: black;
}
.panneau {
position:absolute;
top: 100px;
width: 100%;
}
</style>
</head>
<body onload="initialiseSysteme();">
<div class="panneau" id="panneau1"></div>
<input type=button value="test" onclick="test();">
</body>
</html>
Utilisateur(s) parcourant actuellement ce forum : Aucun utilisateur inscrit