Steve TENZA
Web développeur
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Bandeau limineux</title>
<script src="bandeau-lumineux.js"></script>
</head>
<body>
<!-- affichera un bandeau lumineux avec le texte voulu et prendra la taille de la div -->
<div id="C2_bandeau"></div>
<div id="C2_bandeau2"></div>
<script>
C2_bandeau(
//ID de la div bandeau
"C2_bandeau",
//texte à afficher
//ponctuation prise en charge : !?€-_/=+\\*()#'\"&.:;,
//si utilisation du \, en mettre deux : \\
"BIENVENUE ! Une jolie phrase. 0 + 0 = ? Promo : 12€ le KG. Colis #544",
);
//avec des paramètres de taille
C2_bandeau(
//ID de la div bandeau
"C2_bandeau2",
//texte à afficher
//ponctuation prise en charge : !?€-_/=+\\*()#'\"&.:;,
//si utilisation du \, en mettre deux : \\
"Un texte sur le bandeau 2",
//taille des LED
15,//px
//définir une taille pour le bandeau ou le laisser prendre toute la largeur
300,//px
);
</script>
</body>
</html>
/**
Realisation : Steve TENZA
Site internet : www.c2script.com
(c) 2022
*/
function C2_bandeau(id_name, texte, px = 7, bandeau_width = false){
//on met le texte en majuscules
//on coupe le texte, lettre par lettre
var texte = texte.toUpperCase().split('');
//init
var id_name = `#${id_name}`;
var classe_point = "C2_bandeau_point" + Math.floor(Math.random() * 10000);
var querySelector = '';
var taille_texte = 0;
var taille_lettre = 0;
var max = 0;
var lettres_parcourues = 0;
var emplacement_lettre = 0;
var lettres_coords = {
"A":{
1: [2, 3],
2: [1, 4],
3: [1, 2, 3, 4],
4: [1, 4],
5: [1, 4],
},
"B":{
1: [1, 2, 3],
2: [1, 4],
3: [1, 2, 3],
4: [1, 4],
5: [1, 2, 3],
},
"C":{
1: [2, 3, 4],
2: [1],
3: [1],
4: [1],
5: [2, 3, 4],
},
"D":{
1: [1, 2, 3],
2: [1, 4],
3: [1, 4],
4: [1, 4],
5: [1, 2, 3],
},
"E":{
1: [1, 2, 3, 4],
2: [1],
3: [1, 2, 3],
4: [1],
5: [1, 2, 3, 4],
},
"F":{
1: [1, 2, 3, 4],
2: [1],
3: [1, 2, 3],
4: [1],
5: [1],
},
"G":{
1: [2, 3],
2: [1],
3: [1, 3, 4],
4: [1, 4],
5: [2, 3],
},
"H":{
1: [1, 4],
2: [1, 4],
3: [1, 2, 3, 4],
4: [1, 4],
5: [1, 4],
},
"I":{
1: [1, 2, 3],
2: [2],
3: [2],
4: [2],
5: [1, 2, 3],
},
"J":{
1: [2, 3, 4],
2: [4],
3: [4],
4: [1, 4],
5: [2, 3],
},
"K":{
1: [1, 4],
2: [1, 3],
3: [1, 2],
4: [1, 3],
5: [1, 4],
},
"L":{
1: [1],
2: [1],
3: [1],
4: [1],
5: [1, 2, 3, 4],
},
"M":{
1: [1, 5],
2: [1, 2, 4, 5],
3: [1, 3, 5],
4: [1, 5],
5: [1, 5],
},
"N":{
1: [1, 4],
2: [1, 2, 4],
3: [1, 3, 4],
4: [1, 4],
5: [1, 4],
},
"O":{
1: [2, 3],
2: [1, 4],
3: [1, 4],
4: [1, 4],
5: [2, 3],
},
"P":{
1: [1, 2, 3, 4],
2: [1, 4],
3: [1, 2, 3, 4],
4: [1],
5: [1],
},
"Q":{
1: [2, 3],
2: [1, 4],
3: [1, 4],
4: [1, 3],
5: [2, 4],
},
"R":{
1: [1, 2, 3, 4],
2: [1, 4],
3: [1, 2, 3, 4],
4: [1, 3],
5: [1, 4],
},
"S":{
1: [1, 2, 3, 4],
2: [1],
3: [1, 2, 3, 4],
4: [4],
5: [1, 2, 3, 4],
},
"T":{
1: [1, 2, 3, 4, 5],
2: [3],
3: [3],
4: [3],
5: [3],
},
"U":{
1: [1, 4],
2: [1, 4],
3: [1, 4],
4: [1, 4],
5: [2, 3],
},
"V":{
1: [1, 5],
2: [1, 5],
3: [1, 5],
4: [2, 4],
5: [3],
},
"W":{
1: [1, 5],
2: [1, 5],
3: [1, 5],
4: [1, 3, 5],
5: [2, 4],
},
"X":{
1: [1, 5],
2: [2, 4],
3: [3],
4: [2, 4],
5: [1, 5],
},
"Y":{
1: [1, 5],
2: [2, 4],
3: [3],
4: [3],
5: [3],
},
"Z":{
1: [1, 2, 3, 4, 5],
2: [4],
3: [3],
4: [2],
5: [1, 2, 3, 4, 5],
},
//poncutations : !?€-_\/=+*()#'"&.:;,
"?":{
1: [2, 3],
2: [1, 4],
3: [3],
5: [3],
},
"!":{
1: [1],
2: [1],
3: [1],
5: [1],
},
"€":{
1: [2, 3],
2: [1, 4],
3: [1, 2],
4: [1, 4],
5: [2, 3],
},
"-":{
3: [1, 2, 3],
},
"_":{
5: [1, 2, 3, 4],
},
"\\":{
1: [1],
2: [2],
3: [3],
4: [4],
5: [5],
},
"/":{
1: [5],
2: [4],
3: [3],
4: [2],
5: [1],
},
"=":{
2: [1, 2, 3],
4: [1, 2, 3],
},
"+":{
1: [3],
2: [3],
3: [1, 2, 3, 4, 5],
4: [3],
5: [3],
},
"*":{
1: [2],
2: [1, 2, 3],
3: [2],
},
"(":{
1: [2],
2: [1],
3: [1],
4: [1],
5: [2],
},
")":{
1: [1],
2: [2],
3: [2],
4: [2],
5: [1],
},
"#":{
1: [2, 4],
2: [1, 2, 3, 4, 5],
3: [2, 4],
4: [1, 2, 3, 4, 5],
5: [2, 4],
},
"'":{
1: [1],
2: [1],
},
'"':{
1: [1, 3],
2: [1, 3],
},
"&":{
1: [2, 3],
2: [1, 4],
3: [2, 3],
4: [1, 4],
5: [2, 3, 5],
},
".":{
5: [1],
},
",":{
4: [1],
5: [1],
},
":":{
3: [1],
5: [1],
},
";":{
3: [1],
5: [1],
},
//espace
" ":{
},
//chiffres
"0":{
1: [2, 3],
2: [1, 4],
3: [1, 4],
4: [1, 4],
5: [2, 3],
},
"1":{
1: [1, 2],
2: [2],
3: [2],
4: [2],
5: [1, 2, 3],
},
"2":{
1: [2, 3],
2: [1, 4],
3: [3],
4: [2],
5: [1, 2, 3, 4],
},
"3":{
1: [2, 3],
2: [1, 4],
3: [3],
4: [1, 4],
5: [2, 3],
},
"4":{
1: [3],
2: [2, 3],
3: [1, 3],
4: [1, 2, 3, 4],
5: [3],
},
"5":{
1: [1, 2, 3],
2: [1],
3: [1, 2, 3],
4: [ 4],
5: [1, 2, 3],
},
"6":{
1: [2, 3],
2: [1],
3: [1, 2, 3],
4: [1, 4],
5: [2, 3],
},
"7":{
1: [1, 2, 3, 4],
2: [4],
3: [3],
4: [2],
5: [1],
},
"8":{
1: [2, 3],
2: [1, 4],
3: [2, 3],
4: [1, 4],
5: [2, 3],
},
"9":{
1: [2, 3],
2: [1, 4],
3: [2, 3, 4],
4: [4],
5: [2, 3],
}
};
//on met en place le CSS
let CSS = '<style type="text/css">'+
id_name + ' {'+
' background-color: black;'+
' padding:' + px + 'px;'+
(bandeau_width ? 'width:' + bandeau_width + 'px;' : '') +
'}'+
'.C2_bandeau_ligne {'+
' display: flex;'+
'}'+
'.' + classe_point + ' {'+
' width:' + px + 'px;'+
' height:' + px + 'px;'+
' border-radius:50%;'+
' box-shadow:0 0 1px red;'+
' display: inline-block;'+
' display: inline-block;'+
'}'+
'.C2_bandeau_rouge {'+
' background-color:red;'+
'}'+
'.C2_bandeau_noir {'+
' background-color:black;'+
'}'+
'</style>';
document.querySelector("head").insertAdjacentHTML("beforeend", CSS);
//prend la largeur du bandeau dynamiquement (affiche le nombre de led par rapport à la largeur)
var bandeau = document.querySelector(id_name);
var largeur_bandeau = bandeau.offsetWidth;
var nb_de_points = Math.floor(largeur_bandeau / px);
var depart = nb_de_points;
//crée le contenu du bandeau, toutes les LED
//on crée le bandeau
var contenu_bandeau = '';
for(y = 1; y <= 5; y ++){
contenu_bandeau += '<div class="C2_bandeau_ligne C2_bandeau_ligne' + y + '">';
for(z = 1; z <= nb_de_points; z ++){
contenu_bandeau += '<div class="' + classe_point + ' C2_bandeau_point_' + z + ' C2_bandeau_noir"></div>';
}
contenu_bandeau += "</div>";
}
bandeau.innerHTML = contenu_bandeau;
//chaque milisecondes on met à jour le bandeau en bougeant de droite à gauche pour lire
var interval_bandeau = setInterval(() => {
//on met toute les LED en noir
document.querySelectorAll(`${id_name} .${classe_point}`).forEach(elem => elem.classList.replace("C2_bandeau_rouge", "C2_bandeau_noir"));
//on parcours lettre par lettre
texte.forEach(lettre => {
lettres_parcourues ++;
//remet à zéro la taille de la lettre
if(lettre == ' ')
taille_lettre = 3;
else
taille_lettre = 0;
//parcour les coordonnées de la lettre pour allumer les LED correspondante
for(let ligne in lettres_coords[lettre]){
lettres_coords[lettre][ligne].forEach(point => {
led(ligne, point + emplacement_lettre);
//récupère le maximum de place que prend cette lettre
//si espace
if(lettre != ' '){
max = Math.max.apply(null, lettres_coords[lettre][ligne]);
if(max > taille_lettre)
taille_lettre = max;
}
});
}
emplacement_lettre += taille_lettre + 1;
});
taille_texte = emplacement_lettre;
depart -= 1;
emplacement_lettre = depart;
if(taille_texte == 0)
depart = nb_de_points;
}, 70);
//illuminer une LED en particulier
function led(ligne, point){
//pour gagner en ressource, on ne modifie pas les points qui ne sont pas présents sur le bandeau
if(point <= nb_de_points && point >= 0){
querySelector = document.querySelector(`${id_name} > .C2_bandeau_ligne${ligne} > .C2_bandeau_point_${point}`);
if(querySelector)
querySelector.classList.replace("C2_bandeau_noir", "C2_bandeau_rouge");
}
}
}
J'espère que ce script gratuit vous sera utile dans vos projets.Si vous souhaitez soutenir mon travail, un simple clic sur le bouton "Donner remercier" ci-dessous ou une note serait grandement apprécié. Merci pour votre générosité !
Vous cherchez à pousser encore plus loin vos idées ou à les concrétiser avec un site internet sur mesure ? Je suis là pour vous aider ! Mon expérience en développement web est à votre disposition.
Que ce soit la création de votre site web pro ou l'apport de fonctionnalités avancées à votre projet, contactez-moi pour en discuter et avoir un devis gratuit personnalisé.
Mon objectif est de vous offrir des solutions sur mesure qui répondent à vos besoins, et votre vision associée à mon expertise donnera vie à votre projet web parfait. Contactez-moi aujourd'hui, je réponds en général en moins d'une heure :
Demander un devis