Debian-facile

Bienvenue sur Debian-Facile, site d'aide pour les nouveaux utilisateurs de Debian.

Vous n'êtes pas identifié(e).

#1 LXDE » epoptes » 22-03-2017 04:27:52

temps
Réponses : 0
Bonjour,
j'ai déployé sur 50 postes hétéroclites dont certains plus de 10 ans, epoptes sous lxde.
J'ai ajouté deux partages samba, l'un pour injecter les documents depuis le postes maitre, l'autre pour récupérer les documents.
J'ai écris deux petits scripts avec smbclient  (mput et mget) pour automatiser
J'ai supprimé l'inutile (cups ...) et ai affiné pulse pour que toutes les sorties audio soient actives (liberé d'utiliser toutes les cartes son même avec écouteur externe.
Les P.C. démarre en moins de 10s et s'éteignent instantanément.
Sauf pour ceux qui sont sous eepc (j'ai bien désactivé le wifi) mais ces machines posent deux problèmes.
1- Le temps de démarrage de leur bios est interminable comparé aux 10s de debian
2- Les écrans qui sont d'anciens écrans tactile utilisé en simple écran, parfois reste noir ne laissant apparaitre plus que le curseur de sourie. Pourtant sur le poste maitre l'écran apparaît normal comme si tout allait bien.

Est-ce que quelqu'un a un début de solution ?

Cordialement

#2 Re : Matériel » Problème pour accéder à un disk EXT4 » 22-01-2017 05:07:33

Bonjour,
J'ai déjà rencontré ça plusieurs fois sur différentes clef USB3 depuis 6 mois, pas encore sur un disque dure.
J'utilise deux techniques, l'une c'est de paramétrer mes sorties USB sur le PC, l'autre c'est d'utiliser l'un de mes hub USB2.
Comme ce sont des clef qui naviguent entre différents OS, je ne sais pas encore trop d'où ça vient (mais je soupçonne android), je sais qu'un simple formatage ne résout rien.
Je ne dis pas que le cas du fils correspond à mon expérience, mais c'est une possibilité
Cordialement

#3 Re : Matériel » Tablette ou hybride 100% compatible debian » 21-01-2017 12:51:30

Merci pour le lien.
Depuis que les fabricants remplacent les bios par des OS,c'est de plus en plus difficile de travailler(blocage de disque par verrou encore vu lundi sur elitebook HP, ...).
Etant donné que dans ce projet il y a epoptes (qui contient pas mal de truc type wake on lan) , j'ai intérêt à être sure du matériel.
Hier encore je me battais contre des optiplex 9020, et c'est eux qui gagnent pour l'instant (les liens cachés entre leurs bios et la carte réseau est !!).
Cordialement

#4 Re : Matériel » Tablette ou hybride 100% compatible debian » 21-01-2017 12:01:33

Bonjour,
Merci beaucoup pour la réponse.
J'ai aussi été très attiré par la tablette espagnole, mais je me suis vite aperçu quelle n'était pas compatible.
En fait les systèmes dessus sont des truc pas compatible .deb et ne possède même pas d'apt d'après ce que j'ai compris.
Cela ne va pas du tout dans ma démarche, c'est pourquoi je suis plutot à la recherche d'un type hybride sur lequel je sois sure de pouvoir faire tout ce que j'ai à faire.
Cordialement

#5 Matériel » Tablette ou hybride 100% compatible debian » 21-01-2017 11:13:43

temps
Réponses : 4
Bonjour,

J'ai pour projet de piloter plusieurs tactiles en wifi avec epoptes sous debian.
Est-ce que quelqu'un connaît un matériel tactile (tablette ou hybride) 100% compatible debian ?
Un matériel assez costaux, car j'ai l'intention d'y installer epoptes client, pulse audio en serveur son sur le réseau, ... (du lourd en ressources)

Cordialement

#6 Participons à l'association ! » Lecjo LAC2017 » 21-01-2017 11:03:46

temps
Réponses : 0
Bonjour,
Je prépare une présentation de Lecjo pour Linux Audio Conference 2017.
Je suis à la recherche de collaborateurs pour aider à la rédaction et éventuellement à la présentation.
Je suis à la recherche d'un lieu type wiki pour poser les informations et codes concernant Lecjo et Lecjoa
En attendant j'ai placé le contenue du wiki pour lecjo ici http://www.letime.net/HowToLecjo/Confer … C2017.html

Cordialement

#7 Scripts, programmes et robots » Evolution lmfab » 20-07-2016 18:39:03

temps
Réponses : 0
Bonjour,
Je passe donner quelques nouvelles de l'application nommée lmfab.

Coté pédagogique :
en C http://www.letime.net/um/
en javascript Add-on MAO https://addons.mozilla.org/en-US/firefox/addon/lecjoa/

Coté utilisation :
en C http://www.letime.net/7/index.html.tar.gz
en javascript Add-on MAO https://addons.mozilla.org/en-US/firefox/addon/lecjo/

Projet en cours, reprise d'une ancienne version de lecjo à 4 octets par front pour obtenir un son très haute définition, nommé format joh
Et regroupement du générateur de vidéo en css (sans image) avec le générateur de son.
Une version en langage C et une version en javascript pour créer un addon firefox.
Le but est de générer des vidéo ultra légère en utilisant que des mixes de couleurs et toutes les formes en déformant un carré avec radian, et pour le son ne créer que des formes de bases représentatives des différentes dimensions et de les mixer.
Tout fork ou aide dans ce projet est accueillit avec bienveillance, c'est du libre, les codes sont donnés.

Cordialement pierre

#8 Vos sites et projets perso » Présentation vidéo générée en HTML » 14-04-2016 06:03:57

temps
Réponses : 0
Bonjour,

Comme ce qui importe, ce n'est pas ce que l'on dit, mais ce que l'autre entend, j'ai créé un support pour générer des vidéos interactives en HTML
http://www.letime.net/alpha/banque/7/index.html.tar.gz

De ce support nous pouvons aussi bien créer des présentations, des films ou des dessins animés en trouvant de l'aide ici
http://www.letime.net/alpha/banque/

Ma démarche est de créer une présentation d'intégration du format audio abadie.jo dans firefox.
Comme cette présentation associe de nombreuses sciences, je suis à la recherche de nombreux co-auteurs pour créer plusieurs versions de cette présentation.
En d'autres mots, mon idée est d'avoir une page internet faisant des lien vers plusieurs présentations présentant la même chose (intégration dans firefox), ces présentations variant en fonction des savoirs ou perceptions de son auteur.
La première présentation qui est encore en construction se trouve ici :
http://www.letime.net/7/

Toute modification ou nouvelle présentation utilisant la technique est la bienvenue

Cordialement

#9 Scripts, programmes et robots » Renouveau mathématique en c++ » 21-11-2015 01:42:01

temps
Réponses : 0
Renouveau mathématique.
Ou l'art d'apprendre à apprendre en modélisant.


Projet générateur d'entendement


Principe de construction de l'outil :
1- Interactivité :
Choix du nombre de vidéos contenues.
Choix de la vitesse de défilement
Choix du basculement et lieu de basculement au clique
2- Gestion
Choix du nombre d'images
choix du son en l'attachant aux images
3- entendement
Les textes sont générés à l'aide de dessins, ce qui empêche les copier/coller des comparateurs tout en gardant l'entendement entre l'enseignant et l'apprenant. Le fait de bloquer la fonction comparateur permet au subtil de s'exprimer.

Technique d'associations d'idées.

Je propose la création d'une automatisation d'une technique de présentation de documents pour l'enseignement.

Cette technique est construite sur du html5 et a pour effet de créer une vidéo interactive extrêmement légère et très puissante en communication.
Un outil facilement manipulable par l’enseignant. (dans le cas plus bas en exemple la vidéo pèse 14ko en html compressé, et des centaines de Mo dans les formats actuel)

Origine :
En démarche d'expliquer un format audio que j'ai créé début des années 2010, j'ai été confronté à l'incompréhension générale, comme si je ne parlais pas le même langage que mes contemporains.
Après de nombreuses analyses et discutions pour identifier, je suis arrivé à la conclusion que notre cerveau associait les idées sur la base de notre langage.
Les éléments importants que j'ai retenu de ces années d'études sont :
1- Que nos (ou mes) traditions sont multidirectionnelles et induites pas un ancien langage multidirectionnel (le Celte). Une opposition aux langues actuelles qui sont unidirectionnelles.
2- Que le principal outil de communication, est un merveilleux comparateur, mais ne peut pas faire de subtil ou encore de multidirectionnel. Considérant, que le subtil et le multidirectionnel étant des qualités essentielles à l'entendement humain, il fallait trouver une technique.
3- Un outil n'a pas besoin de savoir faire ce qu'il fait pour pouvoir faire. En exemple une pelle n'a pas besoin de savoir qu'elle peut servir à déplacer de la terre, elle peut le faire sans chercher plus loin.

De ces trois points, j'en ai conclu que le html5 n'avait pas besoin de savoir ce qu'il fait, donc pas d'analyse de données et qu'il fallait créer de nouvelles bases conceptuelles avec pour cahier des charges la possibilité d'être multidirectionnelle, d'être léger, d'être facilement utilisable.

Voici un exemple de construction de l'outil :
http://www.letime.net/alpha/5.

et voici une application générée, le clique sur le bonnet de nicolas (le stan français) permet de changer de version de dessin animé ou encore sur l'aile du tux.
http://www.letime.net/alpha/dessin/alerte.html



Pour faire partie du groupe de travail et aider à écrire en c++ le générateur d'entendement :
Contact : temps.jo@gmail.com

#10 Re : Scripts, programmes et robots » Documents aux normes iso » 11-11-2015 08:45:28

Bonjour,

Je travaille actuellement sur cette page : http://www.letime.net/alpha/dessin/alerte.html

Ctrl+U pour récupérer le code

Mon objectif est de retrouver une ancienne technique d'expression (post romaine antique)

Le fichier génère les images en css et les gère dans le temps en les faisant apparaître dans les div.
La bande son est généré à l'aide d'un mix de petits sons de base.

Pour ne plus rien à avoir à télécharger autre que le html5 ultra léger et générer la vidéo, je voudrai utiliser mon format audio.
mais pour ça il faut que j'arrive à générer un fichier wav dans la cache de firefox.

Est-ce que quelqu'un a une idée de comment faire ?

#11 Re : Scripts, programmes et robots » Documents aux normes iso » 25-10-2015 09:36:25

Bonjour,
Quelques nouvelles du projet "son point faible est qu'il nécessite firefox".
Celui-ci a pris plusieurs formes.

La première forme indique comment créer son propre alphabet et comment le rendre non identifiable par les machines, mais tout à fait lisible pour un simple enfant, en utilisant la logique multidirectionnelle.

La deuxième forme est un générateur automatique de texte en css, une application c++ qui convertit les fichiers textes en page html que les robots n'arrivent pas à analyser. En cas de contre attaque, (un programme créer par un homme dédié à cette application, il suffit de la faire juste un peu évoluer pour garder un coup d'avance sur les programmes des robots. l'évolution de l'application est facile et infini, alors que pour les robots il faut beaucoup de travail humain et reste limité. C'est ici http://www.letime.net/alpha/glm.html

La troisième forme est la création de dessins animés construits en css3.
Comme ces dessins animés sont issus du langage multidirectionnel, il est facile d'y ajouter du son attaché à une image, ou du texte.
c'est ici http://www.letime.net/alpha/exemple5.html

La quatrième forme est le la vidéo inter-active, qui fait changer l'histoire de la vidéo selon les réactions ( mouvements souris, clique clavier ou souris ..) de celui qui regarde la vidéo
J'ai déjà réalisé une vidéo d'une minute de cette forme avant les vacances d'été, mais je dois recommencer la vidéo car un problème matériel m'a fait perdre le document présentable.

Je travaille actuellement sur orange PI PC je vais donc orienter ces développements vers cette technologie écologique (5v 2A)

Cordialement

#12 Re : Scripts, programmes et robots » Documents aux normes iso » 05-09-2015 23:15:15

Bonjour,

Il me reste à améliorer la qualité des lettres du premier alphabet, et à ajouter les majuscules.
Mais je présente un exemple sans constructeur par mouvements de formes.

C'est ici, généré avec le code donné dans le message précédent.
http://www.letime.net/alpha/exemple1.html

Puisque maintenant les navigateurs lisent les formats compressé, le poids du document fait juste plus que 1ko

Il suffit d'entrer son texte dans un fichier (nommé aconvertir.txt ) accompagnant l'application

Cordialement

#13 Re : Scripts, programmes et robots » Documents aux normes iso » 29-08-2015 06:54:30

Bonjour,
J'ai fini un alphabet lettre bâton, et j'ai commencé un alphabet lettre libre http://www.letime.net/alpha/2.html.
En parallèle, j'ai commencé à écrire le générateur de page html. Il faut ajouter le calculateur de positionnement, le choix de l'alphabet, la protection par dispersion ... mais de dire comment je fais me permettra peut-être de trouver des contributeurs ou des conseils utiles.
Cordialement



// pour compiler g++ main.cpp -w -o glm

//glm est une application pour convertir vos fichiers texte en page web en utilisant la logique multidirectionnelle

#include <iostream>
#include <fstream>
#include <string>
#include <stdio.h>
#include <stdlib.h>

using namespace std;

 

int main()

{

// ouvre les donners

        ifstream entreglm("aconvertir.txt", ios::in);  

// ouverture en écriture avec effacement du sortieglm ouvert

        ofstream sortieglm("index.html", ios::out | ios::trunc);  

        if(entreglm)

        {
//

        if(sortieglm)

        {



//

//les donner fixes

//char EnteteIndex[] = "<\!DOCTYPE html>";
//                sortieglm << EnteteIndex;
char Lediv[] = "</div>";
char Lettrea[] = "<div class=\"boucle1\" style=\"margin-top:-12px ; margin-left:";
char Lettrea1[] = "<div class=\"sortie_droite\" style=\"margin-left:8px\">";
char Lettrea2[] = "<div class=\"boucle213 tourne45m\" style=\"margin-top:-12px ; margin-left:-9px\">";
char Lettrea3[] = "<div class=\"boucle214 tourne90m\" style=\"margin-top:-3.2px ; margin-left:3px\">";
char Lettrea4[] = "<div class=\"boucle216\" style=\"margin-top:-12px ; width:15px ; margin-left:-5px\">";
char Lettreb[] = "<div class=\"boucle4\" style=\"margin-top:-20px ; margin-left:";
char Lettreb1[] = "<div class=\"boucle5\" style=\"margin-left:-17px\">";
char Lettreb2[] = "<div class=\"boucle6\" style=\"margin-top:13px ; margin-left:20.5px\">";
char Lettreb3[] = "<div class=\"trait_horizontal1\" style=\"margin-top:0.1px ; margin-left:5px ; width:7px\">";
char Lettrec[] = "<div class=\"boucle28\" style=\"margin-top:-13px ; margin-left:";
char Lettrec1[] = "<div class=\"trait_horizontal1\" style=\"margin-top:10px ; margin-left:7px ; width:9px\">";
char Lettred[] = "<div class=\"boucle1\" style=\"margin-top:-12px ; margin-left:";
char Lettred1[] = "<div class=\"sortie_droite\" style=\"margin-left:8px ; margin-top:-12px ; height:20px\">";
char Lettree[] = "<div class=\"boucle13\" style=\"margin-top:-11px ; margin-left:";
char Lettree1[] = "<div class=\"sortie_droite\" style=\"margin-top:0px ; margin-left:1px\">";
char Lettree2[] = "<div class=\"boucle210\" style=\"margin-top:-11px ; margin-left:-15px\">";
char Lettree3[] = "<div class=\"boucle210\" style=\"margin-top:-25px ; margin-left:";
char Lettree4[] = "<div class=\"boucle216\" style=\"margin-top:-11px ; margin-left:-1px\">";
char Lettree5[] = "<div class=\"trait_vertical1\" style=\"width:0.5px ; height:0.5px ; margin-top:2px ; background-color:white\">";
char Lettree6[] = "<div class=\"trait_vertical1\" style=\"width:0.5px ; height:0.5px ; margin-top:15px ; background-color:white\">";
char Lettree7[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:1px ; background-color:white\">";
char Lettref[] = "<div class=\"boucle2\" style=\"margin-top:-16px ; margin-left:";
char Lettref1[] = "<div class=\"boucle3\" style=\"margin-top:-16px ; margin-left:";
char Lettref2[] = "<div class=\"boucle2\" style=\"margin-top:0px  ; margin-left:";
char Lettref3[] = "<div class=\"boucle3\" style=\"margin-left:-7px\">";
char Lettreg[] = "<div class=\"boucle1\" style=\"margin-top:-11px ; margin-left:";
char Lettreg1[] = "<div class=\"boucle7\" style=\"margin-top:-6px  ; margin-left:";
char Lettreg2[] = "<div class=\"boucle2\" style=\"height:10px ; margin-left:";
char Lettreh[] = "<div class=\"trait_vertical1\" style=\"margin-top:-20px ; height:20px ; margin-left:";
char Lettreh1[] = "<div class=\"boucle5\" style=\"margin-left:-17px ; height:14px\">";
char Lettreh2[] = "<div class=\"boucle8\" style=\"margin-top:-9px ; height:10px ; margin-left:";
char Lettrei[] = "<div class=\"boucle9\" style=\"margin-top:-11px ; margin-left:";
char Lettrei1[] = "<div class=\"sortie_droite\" style=\"margin-left:10px\">";
char Lettrei2[] = "<div class=\"trait_vertical1\" style=\"margin-top:-5px ; width:2px ; height:2px\">";
char Lettrej[] = "<div class=\"boucle10\" style=\"margin-top:-8px ; margin-left:";
char Lettrej1[] = "<div class=\"boucle12\" style=\"margin-top:6px ; margin-left:1px\">";
char Lettrej2[] = "<div class=\"trait_vertical1\" style=\"margin-top:-28px ; width:3px ; height:3px ; margin-left:";
char Lettrej3[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:10px ; background-color:white\">";
char Lettrek[] = "<div class=\"trait_vertical1\" style=\"margin-top:-19px ; height:20px ; margin-left:";
char Lettrek1[] = "<div class=\"boucle5\" style=\"margin-left:-17px ; height:14px \">";
char Lettrek2[] = "<div class=\"boucle13\" style=\"margin-top:-10px ;height:4px ; margin-left:";
char Lettrek3[] = "<div class=\"sortie_droite\" style=\"margin-top:-6px ; height:7px ; margin-left:";
char Lettrek4[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:1px ; background-color:white\">";
char Lettrel[] = "<div class=\"boucle162\" style=\"margin-top:-19px ; margin-left:";
char Lettrel1[] = "<div class=\"sortie_droite\" style=\"margin-top:-1px ; margin-left:1px ; height:17px\">";
char Lettrel2[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:4px ; background-color:white\">";
char Lettrem[] = "<div class=\"boucle14\" style=\"margin-top:-13px ; margin-left:";
char Lettrem1[] = "<div class=\"boucle14\" style=\"margin-top:-1px ; margin-left:10px\">";
char Lettrem2[] = "<div class=\"boucle14\" style=\"margin-top:-1px ; margin-left:10px\">";
char Lettrem3[] = "<div class=\"sortie_droite\" style=\"margin-left:10px\">";
char Lettren[] = "<div class=\"boucle14\" style=\"margin-top:-12px ; margin-left:";
char Lettren1[] = "<div class=\"boucle14\" style=\"margin-top:-1px ; margin-left:10px\">";
char Lettren2[] = "<div class=\"sortie_droite\" style=\"margin-left:10px\">";
char Lettreo[] = "<div class=\"boucle15\" style=\"margin-top:-12px ; margin-left:";
char Lettreo1[] = "<div class=\"boucle16\" style=\"margin-top:-5px ; margin-left:-3px\">";
char Lettreo2[] = "<div class=\"boucle213 tourne45m\" style=\"margin-top:-8px ; margin-left:4px\">";
char Lettreo3[] = "<div class=\"boucle214 tourne90m\" style=\"margin-top:-3.2px ; margin-left:3px\">";
char Lettrep[] = "<div class=\"boucle9\" style=\"margin-top:-11px ; margin-left:";
char Lettrep1[] = "<div class=\"trait_vertical1\" style=\"height:20px ; margin-left:10px\">";
char Lettrep2[] = "<div class=\"boucle14\" style=\"margin-top:-1px ; margin-left:0.1px\">";
char Lettrep3[] = "<div class=\"sortie_droite\" style=\"margin-left:10px\">";
char Lettreq[] = "<div class=\"boucle1\" style=\"margin-top:-15px ; margin-left:";
char Lettreq1[] = "<div class=\"trait_vertical1\" style=\"height:20px ; margin-left:10px\">";
char Lettreq2[] = "<div class=\"boucle14\" style=\"margin-top:-1px ; margin-left:0.1px\">";
char Lettreq3[] = "<div class=\"sortie_droite\" style=\"margin-left:10px\">";
char Lettrer[] = "<div class=\"boucle33\" style=\"margin-top:-13px ; margin-left:";
char Lettrer1[] = "<div class=\"boucle34\" style=\"margin-top:-5px ; margin-left:8px\">";
char Lettrer2[] = "<div class=\"boucle17\" style=\"margin-top:7px ; margin-left:10px\">";
char Lettres[] = "<div class=\"boucle20\" style=\"margin-top:-13px ; margin-left:";
char Lettres1[] = "<div class=\"boucle21\" style=\"margin-left:7px\">";
char Lettret[] = "<div class=\"boucle9\" style=\"margin-top:-20px ; height:20px ; margin-left:";
char Lettret1[] = "<div class=\"sortie_droite\" style=\"margin-top:10px ; margin-left:10px\">";
char Lettret2[] = "<div class=\"trait_vertical1\" style=\"margin-top:-6px ; width:10px ; height:2px ; margin-left:-5px\">";
char Lettreu[] = "<div class=\"boucle9\" style=\"margin-top:-11px ; margin-left:";
char Lettreu1[] = "<div class=\"sortie_droite\" style=\"margin-left:10px\">";
char Lettreu2[] = "<div class=\"boucle9\" style=\"margin-left:-2px\">";
char Lettreu3[] = "<div class=\"sortie_droite\" style=\"margin-left:10px\">";
char Lettrev[] = "<div class=\"boucle29\" style=\"margin-top:-13px ; margin-left:";
char Lettrev1[] = "<div class=\"boucle23\" style=\"margin-left:6px\">";
char Lettrev2[] = "<div class=\"trait_vertical1\" style=\"width:6px ; height:2px ; margin-left:5px\">";
char Lettrev3[] = "<div class=\"boucle30\" style=\"margin-top:-2px ; margin-left:8px\">";
char Lettrew[] = "<div class=\"boucle22\" style=\"margin-top:-13px ; margin-left:";
char Lettrew1[] = "<div class=\"boucle23\" style=\"margin-left:16px\">";
char Lettrew2[] = "<div class=\"boucle22\" style=\"margin-left:16px ; margin-left:-12px\">";
char Lettrew3[] = "<div class=\"boucle23\" style=\"margin-left:16px\">";
char Lettrex[] = "<div class=\"boucle24\" style=\"margin-top:-13px ; margin-left:";
char Lettrex1[] = "<div class=\"boucle25\" style=\"margin-left:10px\">";
char Lettrey[] = "<div class=\"boucle26\" style=\"margin-top:-13px ; margin-left:";
char Lettrey1[] = "<div class=\"boucle27\" style=\"margin-left:12px\">";
char Lettrez[] = "<div class=\"boucle19\" style=\"margin-top:-13px ; height:10px ; margin-left:";
char Lettrez1[] = "<div class=\"boucle16\" style=\"margin-top:-5px ; margin-left:8px ; wight:10px\">";
char Lettrez2[] = "<div class=\"boucle7\" style=\"margin-top:5px ; margin-left:25px ; height:40px\">";
char Lettrez3[] = "<div class=\"boucle2\" style=\"margin-top:25px ; margin-left:30px ; height:15px\">";

char LettreA[] = "<div class=\"boucle170\" style=\"margin-top:-20px ; margin-left:";
char LettreA1[] = "<div class=\"boucle112\" style=\"margin-left:22px\">";
char LettreA2[] = "<div class=\"boucle16\" style=\"margin-top:7px ; margin-left:-12px\">";
char LettreB[] = "<div class=\"boucle102\" style=\"margin-top:-17px ; margin-left:";
char LettreB1[] = "<div class=\"boucle103\" style=\"margin-top:-25px ; height:10px ; margin-left:";
char LettreB2[] = "<div class=\"boucle103\" style=\"margin-top:-2px ; height:10px ; margin-left:";
char LettreC[] = "<div class=\"boucle104\" style=\"margin-top:-22px ; margin-left:";
char LettreC1[] = "<div class=\"boucle105\" style=\"margin-top:-15px ; margin-left:-7px\">";
char LettreC2[] = "<div class=\"trait_vertical1\" style=\"width:0.5px ; height:0.5px ; margin-top:-3px ; background-color:white\">";
char LettreD[] = "<div class=\"boucle102\" style=\"margin-top:-15px ; margin-left:";
char LettreD1[] = "<div class=\"boucle103\" style=\"margin-top:-23px ; height:20px ; margin-left:";
char LettreE[] = "<div class=\"boucle106\" style=\"margin-top:-19px ; height:7px ; margin-left:";
char LettreE1[] = "<div class=\"boucle106\" style=\"margin-top:-2px ; height:7px ; margin-left:";
char LettreE2[] = "<div class=\"boucle107\" style=\"margin-top:-22px ; height:5px ; margin-left:";
char LettreE3[] = "<div class=\"trait_vertical1\" style=\"width:0.5px ; height:0.5px ; margin-top:13px ; background-color:white\">";
char LettreF[] = "<div class=\"boucle108\" style=\"margin-top:-20px ; height:12px ; margin-left:";
char LettreF1[] = "<div class=\"boucle109\" style=\"margin-top:-2px ; height:12px ; margin-left:";
char LettreF2[] = "<div class=\"boucle109 tourne90\" style=\"margin-top:-14px ; height:12px ; margin-left:";
char LettreF3[] = "<div class=\"boucle109\" style=\"margin-top:-2px ; margin-left:10px ; height:18px\">";
char LettreF4[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:-3px ; background-color:white\">";
char LettreG[] = "<div class=\"boucle110\" style=\"margin-top:-15px ; margin-left:";
char LettreG1[] = "<div class=\"boucle7\" style=\"margin-top:-10px ; margin-left:";
char LettreG2[] = "<div class=\"boucle2 tourne45m\" style=\"margin-left:";
char LettreH[] = "<div class=\"boucle172\" style=\"margin-top:-20px ; height:20px ; margin-left:";
char LettreH1[] = "<div class=\"boucle173\" style=\"margin-top:-20px ; height:20px ; margin-left:";
char LettreH2[] = "<div class=\"boucle172\" style=\"margin-top:-20px ; height:20px ; margin-left:";
char LettreH3[] = "<div class=\"boucle173\" style=\"margin-top:-20px ;  height:20px ; margin-left:";
char LettreH4[] = "<div class=\"boucle172 tourne90\" style=\"margin-top:-20px ; height:20px ; margin-left:";
char LettreI[] = "<div class=\"boucle111\" style=\"margin-top:-16px ; margin-left:";
char LettreI1[] = "<div class=\"boucle108 tourne90\" style=\"margin-top:-10px ; margin-left:4px ; height:7px\">";
char LettreJ[] = "<div class=\"boucle111\" style=\"margin-top:-16px ; margin-left:";
char LettreJ1[] = "<div class=\"boucle108 tourne90\" style=\"margin-top:-14px ; margin-left:8px ; height:21px\">";
char LettreK[] = "<div class=\"boucle113\" style=\"margin-top:-20px ; margin-left:";
char LettreK1[] = "<div class=\"boucle108 tourne45\" style=\"margin-top:-18px ; height:12px ; margin-left:";
char LettreK2[] = "<div class=\"boucle108 tourne90\" style=\"margin-top:-5px ; margin-left:-1px ; height:12px\">";
char LettreL[] = "<div class=\"boucle161\" style=\"margin-top:-17px ; margin-left:";
char LettreL1[] = "<div class=\"boucle114\" style=\"margin-top:-9px ; margin-left:";
char LettreL2[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:-13px ; background-color:white\">";
char LettreM[] = "<div class=\"boucle165\" style=\"margin-top:-18px ; margin-left:";
char LettreM1[] = "<div class=\"boucle165\" style=\"margin-top:-1px ; margin-left:10px\">";
char LettreM2[] = "<div class=\"boucle165\" style=\"margin-top:-1px ; margin-left:10px\">";
char LettreM3[] = "<div class=\"sortie_droite\" style=\"margin-top:8px ; margin-left:10px\">";
char LettreN[] = "<div class=\"boucle165\" style=\"margin-top:-18px ; margin-left:";
char LettreN1[] = "<div class=\"boucle165\" style=\"margin-top:-1px ; margin-left:10px\">";
char LettreN2[] = "<div class=\"sortie_droite\" style=\"margin-top:8px ; margin-left:10px\">";
char LettreO[] = "<div class=\"boucle150\" style=\"margin-top:-20px ; margin-left:";
char LettreO1[] = "<div class=\"boucle160\" style=\"margin-top:-15px ; margin-left:-3px\">";
char LettreP[] = "<div class=\"boucle113\" style=\"margin-top:-21px ; margin-left:";
char LettreP1[] = "<div class=\"boucle115\" style=\"margin-top:1px ; margin-left:7px ; height:12px\">";
char LettreQ[] = "<div class=\"boucle116\" style=\"margin-top:-20px ; margin-left:";
char LettreQ1[] = "<div class=\"boucle113 tourne180\" style=\"margin-top:10px ; margin-left:2px ; height:6px\">";
char LettreR[] = "<div class=\"boucle102\" style=\"margin-top:-18px ; margin-left:";
char LettreR1[] = "<div class=\"boucle103\" style=\"margin-top:1px ; margin-left:19px ; height:10px\">";
char LettreR2[] = "<div class=\"boucle171 tourne90\" style=\"margin-top:8px ; margin-left:1px\">";
char LettreS[] = "<div class=\"boucle117 tourne45\" style=\"margin-top:-27px ; margin-left:";
char LettreS1[] = "<div class=\"boucle117 tourne180\" style=\"margin-top:10px ; margin-left:-11px\">";
char LettreT[] = "<div class=\"boucle158 tourne45\" style=\"margin-top:-26px ; margin-left:";
char LettreT1[] = "<div class=\"boucle157 tourne180\" style=\"margin-top:5px ; margin-left:-11px\">";
char LettreT2[] = "<div class=\"trait_vertical1\" style=\"margin-top:-16px ; margin-left:";
char LettreU[] = "<div class=\"boucle9\" style=\"margin-top:-13px ; margin-left:";
char LettreU1[] = "<div class=\"sortie_droite\" style=\"margin-left:10px\">";
char LettreU2[] = "<div class=\"boucle9\" style=\"margin-left:2px\">";
char LettreU3[] = "<div class=\"sortie_droite\" style=\"margin-left:10px\">";
char LettreV[] = "<div class=\"boucle29\" style=\"margin-top:-13px ; margin-left:";
char LettreV1[] = "<div class=\"boucle23\" style=\"margin-left:16px\">";
char LettreV2[] = "<div class=\"trait_vertical1\" style=\"width:12px ; height:2px ; margin-left:5px\">";
char LettreW[] = "<div class=\"boucle22\" style=\"margin-top:-13px ; margin-left:";
char LettreW1[] = "<div class=\"boucle23\" style=\"margin-left:16px\">";
char LettreW2[] = "<div class=\"boucle22\" style=\"margin-left:16px ; margin-left:-12px\">";
char LettreW3[] = "<div class=\"boucle23\" style=\"margin-left:16px\">";
char LettreX[] = "<div class=\"boucle24\" style=\"margin-top:-18px ; height:20px ; margin-left:";
char LettreX1[] = "<div class=\"boucle25\" style=\"margin-left:17px ; height:20px\">";
char LettreY[] = "<div class=\"boucle26\" style=\"margin-top:-13px ; height:20px ; margin-left:";
char LettreY1[] = "<div class=\"boucle27\" style=\"margin-left:12px ; height:20px\">";
char LettreZ[] = "<div class=\"boucle19\" style=\"margin-top:-13px ; height:10px ; margin-left:";
char LettreZ1[] = "<div class=\"boucle16\" style=\"margin-top:-5px ; margin-left:8px ; wight:10px\">";
char LettreZ2[] = "<div class=\"boucle7\" style=\"margin-top:5px ; margin-left:25px ; height:40px\">";
char LettreZ3[] = "<div class=\"boucle2\" style=\"margin-top:25px ; margin-left:30px ; height:15px\">";

char chiffre0a[] = "<div class=\"boucle201\" style=\"margin-top:-19px ; margin-left:40px ; margin-left:";
char chiffre1a[] = "<div class=\"trait_vertical1\" style=\"margin-top:-15px ; height:15px ; margin-left:";
char chiffre1b[] = "<div class=\"boucle210\" style=\"margin-left:-16px\">";
char chiffre2a[] = "<div class=\"boucle217\" style=\"margin-top:-14px ; margin-left:";
char chiffre2b[] = "<div class=\"trait_vertical1\" style=\"margin-top:7px ; margin-left:0px; height:5px\">";
char chiffre2c[] = "<div class=\"trait_horizontal1\" style=\"margin-top:5px ; margin-left:0px\">";
char chiffre2d[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:4px ; background-color:white\">";
char chiffre3a[] = "<div class=\"boucle217\" style=\"margin-top:-14px ; margin-left:";
char chiffre3b[] = "<div class=\"boucle217\" style=\"margin-top:5px ; margin-left:0px\">";
char chiffre3c[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:3.6px ; background-color:white\">";
char chiffre4a[] = "<div class=\"trait_vertical1\" style=\"margin-top:-13px ; height:14px ; margin-left:";
char chiffre4b[] = "<div class=\"trait_horizontal1\" style=\"margin-top:6px ; margin-left:-9px\">";
char chiffre4c[] = "<div class=\"trait_vertical1 tourne45m\" style=\"margin-top:-8px ; margin-left:4px ; height:12px\">";
char chiffre4d[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:-2px ; background-color:white\">";
char chiffre5a[] = "<div class=\"boucle217\" style=\"margin-top:-7px ; margin-left:";
char chiffre5b[] = "<div class=\"trait_vertical1\" style=\"margin-top:-8px ; margin-left:0px; height:7px\">";
char chiffre5c[] = "<div class=\"trait_horizontal1\" style=\"margin-top:0px ; margin-left:0px\">";
char chiffre5d[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:-3.2px ; background-color:white\">";
char chiffre6a[] = "<div class=\"boucle208\" style=\"margin-top:-8px ; margin-left:";
char chiffre6b[] = "<div class=\"boucle212\" style=\"margin-top:-9px ; margin-left:-2px\">";
char chiffre6c[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:-2px ; background-color:white\">";
char chiffre7a[] = "<div class=\"trait_horizontal1\" style=\"width:9px ; margin-top:-15px ; margin-left:";
char chiffre7b[] = "<div class=\"trait_vertical1 tourne30m\" style=\"height:17px ; margin-top:1.2px ; margin-left:6px\">";
char chiffre7c[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:-1px ; background-color:white\">";
char chiffre8a[] = "<div class=\"boucle204\" style=\"margin-top:-13px ; margin-left:";
char chiffre8b[] = "<div class=\"boucle205\" style=\"margin-top:5px ; margin-left:-2px\">";
char chiffre9a[] = "<div class=\"boucle202\" style=\"margin-top:-13px ; margin-left:";
char chiffre9b[] = "<div class=\"boucle203\" style=\"margin-top:-6px ; margin-left:0px\">";
char chiffre9c[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:-2px ; background-color:white\">";

char traitbas[] = "<div class=\"trait_horizontal1\" style=\"width:111px ; height:0.5px ; margin-top:0px ; margin-left:";
char traitbas1[] = "<div class=\"trait_horizontal1\" style=\"width:111px ;height:0.5px ; margin-top:-12px ; background-color:red\">";
char traitbas2[] = "<div class=\"trait_horizontal1\" style=\"width:111px ;height:0.5px ; margin-top:-4px ; background-color:green\">";
char Lettrespe1a[] = "<div class=\"boucle202\" style=\"margin-top:10px ; margin-left:";
char Lettrespe1b[] = "<div class=\"boucle203\" style=\"margin-top:-10px ; margin-left:0px\">";
char Lettrespe2a[] = "<div class=\"boucle31\" style=\"margin-top:-17px ; margin-left:";
char Lettrespe2b[] = "<div class=\"boucle32\" style=\"margin-top:7px ; margin-left:7px\">";
char Lettrespe2c[] = "<div class=\"trait_vertical1\" style=\"margin-top:9px; margin-left:-1px ; width:2px ; height:2px\">";
char Lettrespe3a[] = "<div class=\"trait_vertical1\" style=\"margin-top:-9px; width:9px ; height:2px ; margin-left:";
char Lettrespe3b[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:6px ; background-color:white\">";
char Lettrespe4a[] = "<div class=\"boucle210\" style=\"margin-top:5px ; margin-left:";
char Lettrespe4b[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:-16px ; background-color:white\">";
char Lettrespe5a[] = "<div class=\"trait_vertical1\" style=\"margin-top:2px; width: 2px ; height: 2px ; margin-left:";
char Lettrespe5b[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:-16px ; background-color:white\">";

char monaccogauche[] = "<div class=\"boucle218\" style=\"margin-top:-13px; margin-left:";
char monaccogauche1[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:-2px ; background-color:white\">";

char monaccodroite[] = "<div class=\"boucle219\" style=\"margin-top:-13px; margin-left:";
char monaccodroite1[] = "<div class=\"trait_vertical1\" style=\"width:1px ; height:1px ; margin-top:-2px ; background-color:white\">";


char LeSautDeLigne[] = "<br />";
char Pointajuste[] = "<div class=\"trait_vertical1\" style=\"margin-top:-20px ; width: 0.1px ; height: 0.1px\">";
char Monespace[] = "<div class=\"trait_vertical1\" style=\"width: 5px ; height: 0.1px ; background-color:white\">";


        sortieglm << "<!DOCTYPE html>" << endl;
        sortieglm << "<html>" << endl;
        sortieglm << "<head>" << endl;
        sortieglm << "<meta charset=\"UTF-8\">" << endl;
        sortieglm << "<title>v</title>" << endl;
        sortieglm << "<meta name=viewport content=\"width=device-width, initial-scale=1\">" << endl;
        sortieglm << "<style>" << endl;
        sortieglm << ".mon_humeur1{" << endl;
        sortieglm << "position:absolute;" << endl;
        sortieglm << "width: 40px;" << endl;
        sortieglm << "height: 40px;" << endl;
        sortieglm << "background-color: #F5FFFA;" << endl;
        sortieglm << "margin-left: 1px;}" << endl;
        sortieglm << ".trait_vertical1{" << endl;
        sortieglm << "position:absolute;" << endl;
        sortieglm << "width: 2px;" << endl;
        sortieglm << "height: 10px;" << endl;
        sortieglm << "background-color: #3366FF;}" << endl;
        sortieglm << ".trait_horizontal1{" << endl;
        sortieglm << "position:absolute;" << endl;
        sortieglm << "width: 10px;" << endl;
        sortieglm << "height: 2px;" << endl;
        sortieglm << "background-color: #3366FF;}" << endl;
        sortieglm << ".trait_horizontal1:active{" << endl;
        sortieglm << "background-color: #F5FFFA;}" << endl;
        sortieglm << ".action{" << endl;
        sortieglm << "position:absolute;" << endl;
        sortieglm << "cursor:pointer;" << endl;
        sortieglm << "background-color: #F5FFFA;}" << endl;
        sortieglm << ".angle1 {" << endl;
        sortieglm << "-ms-transform: rotate(60deg);" << endl;
        sortieglm << "-webkit-transform: rotate(60deg);" << endl;
        sortieglm << "transform: rotate(60deg);}" << endl;
        sortieglm << ".boucle1{" << endl;
        sortieglm << "width: 8px;" << endl;
        sortieglm << "height: 8px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-bottom: 2px solid #3366FF;" << endl;
        sortieglm << "border-left: 2px solid #3366FF;" << endl;
        sortieglm << "border-top: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:8px;" << endl;
        sortieglm << "border-top-right-radius:8px;" << endl;
        sortieglm << "border-bottom-right-radius:8px;" << endl;
        sortieglm << "border-bottom-left-radius:8px;}" << endl;
        sortieglm << ".sortie_droite{" << endl;
        sortieglm << "position:absolute;" << endl;
        sortieglm << "width: 8px;" << endl;
        sortieglm << "height: 8px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-left: 2px solid #3366FF;" << endl;
        sortieglm << "border-bottom: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:8px;" << endl;
        sortieglm << "border-top-right-radius:4px;" << endl;
        sortieglm << "border-bottom-right-radius:32px;" << endl;
        sortieglm << "border-bottom-left-radius:8px;" << endl;
        sortieglm << "margin-left: 8px;}" << endl;
        sortieglm << ".boucle2{" << endl;
        sortieglm << "position:absolute;" << endl;
        sortieglm << "width: 10px;" << endl;
        sortieglm << "height: 20px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-left: 1.5px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:20px;" << endl;
        sortieglm << "border-top-right-radius:12px;" << endl;
        sortieglm << "border-bottom-right-radius:12px;" << endl;
        sortieglm << "border-bottom-left-radius:20px;}" << endl;
        sortieglm << ".boucle3{" << endl;
        sortieglm << "position:absolute;" << endl;
        sortieglm << "width: 10px;" << endl;
        sortieglm << "height: 20px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-right: 1.5px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:12px;" << endl;
        sortieglm << "border-top-right-radius:20px;" << endl;
        sortieglm << "border-bottom-right-radius:20px;" << endl;
        sortieglm << "border-bottom-left-radius:12px;}" << endl;
        sortieglm << ".boucle4{" << endl;
        sortieglm << "position:absolute;" << endl;
        sortieglm << "width: 20px;" << endl;
        sortieglm << "height: 25px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-left: 1.5px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:20px;" << endl;
        sortieglm << "border-top-right-radius:40px;" << endl;
        sortieglm << "border-bottom-right-radius:40px;" << endl;
        sortieglm << "border-bottom-left-radius:100px;}" << endl;
        sortieglm << ".boucle5{" << endl;
        sortieglm << "position:absolute;" << endl;
        sortieglm << "width: 20px;" << endl;
        sortieglm << "height: 20px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-right: 1.5px solid #3366FF;" << endl;
        sortieglm << "border-top-right-radius:40px;" << endl;
        sortieglm << "border-top-left-radius:40px;" << endl;
        sortieglm << "border-bottom-left-radius:40px;" << endl;
        sortieglm << "border-bottom-right-radius:200px;}" << endl;
        sortieglm << ".boucle6{" << endl;
        sortieglm << "position:absolute;" << endl;
        sortieglm << "width: 5px;" << endl;
        sortieglm << "height: 10px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-right: 1.5px solid #3366FF;" << endl;
        sortieglm << "border-top-right-radius:40px;" << endl;
        sortieglm << "border-top-left-radius:40px;" << endl;
        sortieglm << "border-bottom-left-radius:40px;" << endl;
        sortieglm << "border-bottom-right-radius:200px;}" << endl;
        sortieglm << ".boucle7{" << endl;
        sortieglm << "position:absolute;" << endl;
        sortieglm << "width: 10px;" << endl;
        sortieglm << "height: 20px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-right: 1.5px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:10px;" << endl;
        sortieglm << "border-top-right-radius:5px;" << endl;
        sortieglm << "border-bottom-right-radius:40px;" << endl;
        sortieglm << "border-bottom-left-radius:10px;" << endl;
        sortieglm << "margin-left: 50px;}" << endl;
        sortieglm << ".boucle8{" << endl;
        sortieglm << "position:absolute;" << endl;
        sortieglm << "width: 10px;" << endl;
        sortieglm << "height: 10px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:10px;" << endl;
        sortieglm << "border-top-right-radius:80px;" << endl;
        sortieglm << "border-bottom-right-radius:5px;" << endl;
        sortieglm << "border-bottom-left-radius:90px;}" << endl;
        sortieglm << ".boucle9{" << endl;
        sortieglm << "position:absolute;" << endl;
        sortieglm << "width: 10px;" << endl;
        sortieglm << "height: 10px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-right: 1.5px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:20px;" << endl;
        sortieglm << "border-top-right-radius:10px;" << endl;
        sortieglm << "border-bottom-right-radius:80px;" << endl;
        sortieglm << "border-bottom-left-radius:20px;" << endl;
        sortieglm << "margin-left: 50px;}" << endl;
        sortieglm << ".boucle10{" << endl;
        sortieglm << "width: 10px;" << endl;
        sortieglm << "height: 20px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-top: 2px solid blue;" << endl;
        sortieglm << "border-right: 2px solid blue;" << endl;
        sortieglm << "border-top-left-radius: 40px;" << endl;
        sortieglm << "border-bottom-right-radius:40px;}" << endl;
        sortieglm << ".boucle11{" << endl;
        sortieglm << "width: 10px;" << endl;
        sortieglm << "height: 20px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-top: 2px solid blue;" << endl;
        sortieglm << "border-right: 2px solid blue;" << endl;
        sortieglm << "border-top-right-radius: 40px;" << endl;
        sortieglm << "border-bottom-left-radius:40px;}" << endl;
        sortieglm << ".boucle12{" << endl;
        sortieglm << "width: 10px;" << endl;
        sortieglm << "height: 15px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-left: 2px solid blue;" << endl;
        sortieglm << "border-left: 2px solid blue;" << endl;
        sortieglm << "border-top-left-radius: 80px;" << endl;
        sortieglm << "border-bottom-left-radius:20px;}" << endl;
        sortieglm << ".boucle13{" << endl;
        sortieglm << "width: 5px;" << endl;
        sortieglm << "height: 5px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-bottom: 2px solid #3366FF;" << endl;
        sortieglm << "border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-top: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:5px;" << endl;
        sortieglm << "border-top-right-radius:5px;" << endl;
        sortieglm << "border-bottom-right-radius:5px;" << endl;
        sortieglm << "border-bottom-left-radius:5px;}" << endl;
        sortieglm << ".boucle14{" << endl;
        sortieglm << "position:absolute;" << endl;
        sortieglm << "width: 10px;" << endl;
        sortieglm << "height: 8px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-top: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:10px;" << endl;
        sortieglm << "border-top-right-radius:10px;" << endl;
        sortieglm << "border-bottom-right-radius:3px;" << endl;
        sortieglm << "border-bottom-left-radius:10px;}" << endl;
        sortieglm << ".boucle15{ position:absolute; width: 10px; height: 10px;" << endl;
        sortieglm << "border: 0px; border-bottom: 1.5px solid #3366FF;" << endl;
        sortieglm << "border-left: 1.5px solid #3366FF; border-top: 1.5px solid #3366FF;" << endl;
        sortieglm << "border-right: 1.5px solid #3366FF;  border-top-left-radius:20px;" << endl;
        sortieglm << "border-top-right-radius:20px; border-bottom-right-radius:20px;" << endl;
        sortieglm << "border-bottom-left-radius:20px; }" << endl;
        sortieglm << ".boucle16{ position:absolute; width: 20px; height: 8px; border: 0px;" << endl;
        sortieglm << "border-bottom: 1.5px solid #3366FF; border-top-left-radius:8px;" << endl;
        sortieglm << "border-top-right-radius:25px; border-bottom-right-radius:50px;" << endl;
        sortieglm << "border-bottom-left-radius:50px; }" << endl;
        sortieglm << ".boucle17{ position:absolute; width: 10px; height: 8px; border: 0px;" << endl;
        sortieglm << "border-left: 2px solid #3366FF;  border-bottom: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:10px; border-top-right-radius:5px;" << endl;
        sortieglm << "border-bottom-right-radius:40px; border-bottom-left-radius:10px; }" << endl;
        sortieglm << ".boucle18{ position:absolute; width: 10px; height: 10px; border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-bottom: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-right-radius:10px; border-top-left-radius:5px;" << endl;
        sortieglm << "border-bottom-left-radius:40px; border-bottom-right-radius:10px; }" << endl;
        sortieglm << ".boucle19{ position:absolute; width: 10px; height: 20px; border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-top-left-radius:20px;" << endl;
        sortieglm << "border-top-right-radius:20px; border-bottom-right-radius:80px;" << endl;
        sortieglm << "border-bottom-left-radius:20px; margin-left: 50px; }" << endl;
        sortieglm << ".boucle20{ position:absolute;  width: 25px; height: 14px; border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-top-left-radius:14px;" << endl;
        sortieglm << "border-top-right-radius:5px; border-bottom-right-radius:80px;" << endl;
        sortieglm << "border-bottom-left-radius:14px; }" << endl;
        sortieglm << ".boucle21{position:absolute; width: 20px; height: 14px; border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-top-left-radius:20px;" << endl;
        sortieglm << "border-top-right-radius:5px; border-bottom-right-radius:14px;" << endl;
        sortieglm << "border-bottom-left-radius:14px; }" << endl;
        sortieglm << ".boucle22{ position:absolute; width: 15px; height: 12px; border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-top-left-radius:120px;" << endl;
        sortieglm << "border-top-right-radius:120px; border-bottom-right-radius:15px;" << endl;
        sortieglm << "border-bottom-left-radius:15px; }" << endl;
        sortieglm << ".boucle23{ position:absolute; width: 15px; height: 12px; border: 0px;" << endl;
        sortieglm << "border-left: 2px solid #3366FF; border-top-left-radius:120px;" << endl;
        sortieglm << "border-top-right-radius:120px; border-bottom-right-radius:15px;" << endl;
        sortieglm << "border-bottom-left-radius:15px; }" << endl;
        sortieglm << ".boucle24{ position:absolute; width: 10px; height: 10px; border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-bottom: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-right-radius:120px; border-bottom-right-radius:120px;" << endl;
        sortieglm << "border-bottom-left-radius:120px; border-top-left-radius:120px;}" << endl;
        sortieglm << ".boucle25{ position:absolute; width:10px; height: 10px; border: 0px;" << endl;
        sortieglm << "border-left: 2px solid #3366FF; border-bottom: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-right-radius:120px; border-bottom-right-radius:120px;" << endl;
        sortieglm << "border-bottom-left-radius:120px; border-top-left-radius:120px;}" << endl;
        sortieglm << ".boucle26{ position:absolute; width: 15px; height: 25px; border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-top-left-radius:120px;" << endl;
        sortieglm << "border-top-right-radius:120px; border-bottom-right-radius:15px;" << endl;
        sortieglm << "border-bottom-left-radius:15px; }" << endl;
        sortieglm << ".boucle27{ position:absolute; width: 30px; height: 25px; border: 0px;" << endl;
        sortieglm << "border-left: 2px solid #3366FF; border-top-left-radius:150px;" << endl;
        sortieglm << "border-top-right-radius:150px; border-bottom-right-radius:80px;" << endl;
        sortieglm << "border-bottom-left-radius:80px; }" << endl;
        sortieglm << ".boucle28{ width: 10px; height: 10px; border: 0px; border-bottom: 2px solid #3366FF;" << endl;
        sortieglm << "border-left: 2px solid #3366FF; border-top: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:10px; border-top-right-radius:10px;" << endl;
        sortieglm << "border-bottom-right-radius:5px; border-bottom-left-radius:10px; }" << endl;
        sortieglm << ".boucle29{ position:absolute; width: 8px; height: 8px; border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-top: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-right-radius:15px; border-bottom-right-radius:15px;" << endl;
        sortieglm << "border-bottom-left-radius:15px;  border-top-left-radius:120px;}" << endl;
        sortieglm << ".boucle30{ position:absolute; width: 8px; height: 10px; border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-bottom: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-right-radius:5px; border-bottom-right-radius:15px;" << endl;
        sortieglm << "border-bottom-left-radius:15px;  border-top-left-radius:15px;}" << endl;
        sortieglm << ".boucle31{ position:absolute; width: 8px; height: 8px; border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-left: 2px solid #3366FF;" << endl;
        sortieglm << "border-top: 2px solid #3366FF;border-top-right-radius:8px; border-bottom-right-radius:5px;" << endl;
        sortieglm << "border-bottom-left-radius:8px;  border-top-left-radius:8px;}" << endl;
        sortieglm << ".boucle32{ position:absolute; width: 10px; height: 8px; border: 0px;" << endl;
        sortieglm << "border-botton: 2px solid #3366FF; border-left: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-right-radius:8px; border-bottom-right-radius:5px;" << endl;
        sortieglm << "border-bottom-left-radius:8px;  border-top-left-radius:8px;}" << endl;
        sortieglm << ".boucle33{ position:absolute; width: 10px; height: 12px; border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-top-left-radius:20px;" << endl;
        sortieglm << "border-top-right-radius:20px; border-bottom-right-radius:80px;" << endl;
        sortieglm << "border-bottom-left-radius:20px; margin-left: 50px; }" << endl;
        sortieglm << ".boucle34{ position:absolute; width: 15px; height: 8px; border: 0px;" << endl;
        sortieglm << "border-bottom: 1.5px solid #3366FF; border-top-left-radius:8px;" << endl;
        sortieglm << "border-top-right-radius:25px; border-bottom-right-radius:50px;" << endl;
        sortieglm << "border-bottom-left-radius:50px; }" << endl;

        sortieglm << ".boucle100 { float: left;" << endl;
        sortieglm << "  -ms-transform: rotate(-27deg);" << endl;
        sortieglm << "  -webkit-transform: rotate(-27deg);" << endl;
        sortieglm << "  transform: rotate(-27deg); }" << endl;
        sortieglm << ".boucle101 { float: left;" << endl;
        sortieglm << "    -ms-transform: rotate(110deg);" << endl;
        sortieglm << "    -webkit-transform: rotate(110deg);" << endl;
        sortieglm << "    transform: rotate(110deg); }" << endl;
        sortieglm << ".boucle102{ position:absolute; width: 20px; height: 20px;" << endl;
        sortieglm << "border: 0px; border-right: 3px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:20px; border-top-right-radius:10px;" << endl;
        sortieglm << "border-bottom-right-radius:80px; border-bottom-left-radius:20px;" << endl;
        sortieglm << "margin-left: 50px; }" << endl;
        sortieglm << ".boucle103{ width: 14px; height: 7px; border: 0px;" << endl;
        sortieglm << "border-bottom: 2px solid #3366FF; border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-top: 2px solid #3366FF; border-top-left-radius:7px;" << endl;
        sortieglm << "border-top-right-radius:7px; border-bottom-right-radius:7px;" << endl;
        sortieglm << "border-bottom-left-radius:7px; }" << endl;
        sortieglm << ".boucle104{   width: 20px;   height: 20px; border: 0px;" << endl;
        sortieglm << "border-bottom: 2px solid #3366FF; border-left: 2px solid #3366FF;" << endl;
        sortieglm << "border-top: 2px solid #3366FF; border-top-left-radius:22px;" << endl;
        sortieglm << "border-top-right-radius:17px; border-bottom-right-radius:17px;" << endl;
        sortieglm << "border-bottom-left-radius:22px; }" << endl;
        sortieglm << ".boucle105{ width: 25px; height: 20px; border: 0px;" << endl;
        sortieglm << "border-bottom: 2px solid #3366FF; border-top-left-radius:22px;" << endl;
        sortieglm << "border-top-right-radius:17px; border-bottom-right-radius:17px;" << endl;
        sortieglm << "border-bottom-left-radius:22px; }" << endl;
        sortieglm << ".boucle106{ width: 7px; height: 7px; border: 0px;" << endl;
        sortieglm << "border-bottom: 2px solid #3366FF; border-left: 2px solid #3366FF;" << endl;
        sortieglm << "border-top: 2px solid #3366FF; border-top-left-radius:7px;" << endl;
        sortieglm << "border-top-right-radius:3px; border-bottom-right-radius:3px;" << endl;
        sortieglm << "border-bottom-left-radius:7px; }" << endl;
        sortieglm << ".boucle107{ width: 10px; height: 7px; border: 0px;" << endl;
        sortieglm << "border-bottom: 2px solid #3366FF; border-top-left-radius:7px;" << endl;
        sortieglm << "border-top-right-radius:7px; border-bottom-right-radius:7px;" << endl;
        sortieglm << "border-bottom-left-radius:7px; } " << endl;
        sortieglm << ".boucle108{ width: 10px; height: 14px; border: 0px;" << endl;
        sortieglm << "border-left: 2px solid #3366FF; border-top-left-radius:100px;" << endl;
        sortieglm << "border-top-right-radius:14px; border-bottom-right-radius:14px;" << endl;
        sortieglm << "border-bottom-left-radius:14px; }" << endl;
        sortieglm << ".boucle109{ width: 10px; height: 14px; border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-top-left-radius:14px;" << endl;
        sortieglm << "border-top-right-radius:14px; border-bottom-right-radius:100px;" << endl;
        sortieglm << "border-bottom-left-radius:14px; } " << endl;
        sortieglm << ".tourne90 { float: left;" << endl;
        sortieglm << "    -ms-transform: rotate(-90deg);" << endl;
        sortieglm << "    -webkit-transform: rotate(-90deg);" << endl;
        sortieglm << "    transform: rotate(-90deg); }" << endl;
        sortieglm << ".tourne90m { float: left;" << endl;
        sortieglm << "    -ms-transform: rotate(90deg);" << endl;
        sortieglm << "    -webkit-transform: rotate(90deg);" << endl;
        sortieglm << "    transform: rotate(90deg); }" << endl;
        sortieglm << ".tourne45 { float: left;" << endl;
        sortieglm << "    -ms-transform: rotate(-45deg);" << endl;
        sortieglm << "    -webkit-transform: rotate(-45deg);" << endl;
        sortieglm << "    transform: rotate(-45deg); }" << endl;
        sortieglm << ".tourne180 { float: left;" << endl;
        sortieglm << "    -ms-transform: rotate(-180deg);" << endl;
        sortieglm << "    -webkit-transform: rotate(-180deg);" << endl;
        sortieglm << "    transform: rotate(-180deg); }" << endl;
        sortieglm << ".tourne30 { float: left;" << endl;
        sortieglm << "    -ms-transform: rotate(-45deg);" << endl;
        sortieglm << "    -webkit-transform: rotate(-45deg);" << endl;
        sortieglm << "    transform: rotate(-45deg); }" << endl;
        sortieglm << ".boucle110{ width: 14px; height: 14px; border: 0px;" << endl;
        sortieglm << "border-bottom: 2px solid #3366FF; border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-left: 2px solid #3366FF; border-top-left-radius:7px;" << endl;
        sortieglm << "border-top-right-radius:7px; border-bottom-right-radius:14px;" << endl;
        sortieglm << "border-bottom-left-radius:14px; }" << endl;
        sortieglm << ".boucle111{ width: 14px; height: 14px; border: 0px;" << endl;
        sortieglm << "border-bottom: 2px solid #3366FF; border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:7px; border-top-right-radius:7px;" << endl;
        sortieglm << "border-bottom-right-radius:14px; border-bottom-left-radius:14px; }" << endl;
        sortieglm << ".boucle112{ position:absolute; width: 20px; height: 20px; border: 0px;" << endl;
        sortieglm << "border-left: 3px solid #3366FF; border-top-left-radius:10px;" << endl;
        sortieglm << "border-top-right-radius:20px; border-bottom-right-radius:20px;" << endl;
        sortieglm << "border-bottom-left-radius:80px; margin-left: 50px; }" << endl;
        sortieglm << ".boucle113{ width: 16px; height: 18px; border: 0px;" << endl;
        sortieglm << "border-bottom: 2px solid #3366FF; border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:140px; border-top-right-radius:18px;" << endl;
        sortieglm << "border-bottom-right-radius:140px; border-bottom-left-radius:18px; }" << endl;
        sortieglm << ".boucle114{ width: 18px ; height: 18px; border: 0px;" << endl;
        sortieglm << "border-top: 2px solid #3366FF; border-top-left-radius:18px;" << endl;
        sortieglm << "border-top-right-radius:18px; border-bottom-right-radius:18px;" << endl;
        sortieglm << "border-bottom-left-radius:18px; }" << endl;
        sortieglm << ".boucle115{ width: 16px; height: 10px; border: 0px;" << endl;
        sortieglm << "border-top: 2px solid #3366FF; border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-left: 2px solid #3366FF; border-top-left-radius:10px;" << endl;
        sortieglm << "border-top-right-radius:10px; border-bottom-right-radius:10px;" << endl;
        sortieglm << "border-bottom-left-radius:10px; }" << endl;
        sortieglm << ".boucle116{ width: 10px; height: 16px; border: 0px;" << endl;
        sortieglm << "border-top: 2px solid #3366FF; border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-left: 2px solid #3366FF; border-bottom: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:10px; border-top-right-radius:10px;" << endl;
        sortieglm << "border-bottom-right-radius:10px; border-bottom-left-radius:10px; }" << endl;
        sortieglm << ".boucle117{ width: 10px; height: 16px; border: 0px; border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-left: 2px solid #3366FF; border-top: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:10px; border-top-right-radius:10px;" << endl;
        sortieglm << "border-bottom-right-radius:10px; border-bottom-left-radius:10px; }" << endl;
        sortieglm << ".boucle118{ width: 10px; height: 16px; border: 0px; border-left: 2px solid #3366FF;" << endl;
        sortieglm << "border-top: 2px solid #3366FF; border-top-left-radius:10px;" << endl;
        sortieglm << "border-top-right-radius:10px; border-bottom-right-radius:10px;" << endl;
        sortieglm << "border-bottom-left-radius:10px; }" << endl;
        sortieglm << ".boucle119{ width: 10px; height: 20px; border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-top: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:10px; border-top-right-radius:10px;" << endl;
        sortieglm << "border-bottom-right-radius:10px; border-bottom-left-radius:10px; }" << endl;
        sortieglm << ".tourne35m { float: left;" << endl;
        sortieglm << "    -ms-transform: rotate(37deg); " << endl;
        sortieglm << "    -webkit-transform: rotate(37deg);" << endl;
        sortieglm << "    transform: rotate(37deg); }" << endl;
        sortieglm << ".boucle120 { float: left;" << endl;
        sortieglm << "    -ms-transform: rotate(14.562deg);" << endl;
        sortieglm << "    -webkit-transform: rotate(14.562deg)" << endl;
        sortieglm << "    transform: rotate(14.562deg); }" << endl;
        sortieglm << "#corde1 { }" << endl;
        sortieglm << "#corde1:active{ display: none; }" << endl;
        sortieglm << ".boucle150{ position:absolute; width: 10px; height: 16px;" << endl;
        sortieglm << "border: 0px; border-bottom: 2px solid #3366FF;" << endl;
        sortieglm << "border-left: 2px solid #3366FF; border-top: 2px solid #3366FF;" << endl;
        sortieglm << "border-right: 2px solid #3366FF;  border-top-left-radius:20px;" << endl;
        sortieglm << "border-top-right-radius:20px; border-bottom-right-radius:20px;" << endl;
        sortieglm << "border-bottom-left-radius:20px; }" << endl;
        sortieglm << ".boucle160{ position:absolute; width: 20px; height: 16px; border: 0px;" << endl;
        sortieglm << "border-bottom: 2px solid #3366FF; border-top-left-radius:8px;" << endl;
        sortieglm << "border-top-right-radius:25px; border-bottom-right-radius:50px;" << endl;
        sortieglm << "border-bottom-left-radius:50px; }" << endl;
        sortieglm << ".boucle170{ position:absolute; width: 20px; height: 20px;" << endl;
        sortieglm << "border: 0px; border-right: 3px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:20px; border-top-right-radius:10px;" << endl;
        sortieglm << "border-bottom-right-radius:80px; border-bottom-left-radius:20px;" << endl;
        sortieglm << "margin-left: 50px; }" << endl;
        sortieglm << ".boucle171{ width: 6px; height: 8px; border: 0px;" << endl;
        sortieglm << "border-bottom: 2px solid #3366FF; border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:140px; border-top-right-radius:18px;" << endl;
        sortieglm << "border-bottom-right-radius:140px; border-bottom-left-radius:18px; }" << endl;
        sortieglm << ".boucle172{ width: 10px; height: 14px; border: 0px; border-left: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:100px; border-top-right-radius:14px;" << endl;
        sortieglm << "border-bottom-right-radius:14px; border-bottom-left-radius:14px; }" << endl;
        sortieglm << ".boucle173{ width: 10px; height: 14px; border: 0px; border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:14px; border-top-right-radius:14px;" << endl;
        sortieglm << "border-bottom-right-radius:100px; border-bottom-left-radius:14px; }" << endl;

        sortieglm << ".boucle165{" << endl;
        sortieglm << "position:absolute;" << endl;
        sortieglm << "width: 10px;" << endl;
        sortieglm << "height: 16px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-top: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:10px;" << endl;
        sortieglm << "border-top-right-radius:10px;" << endl;
        sortieglm << "border-bottom-right-radius:3px;" << endl;
        sortieglm << "border-bottom-left-radius:10px;}" << endl;


        sortieglm << ".boucle157{ width: 8px; height: 8px; border: 0px; border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-left: 2px solid #3366FF; border-top: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:8px; border-top-right-radius:8px;" << endl;
        sortieglm << "border-bottom-right-radius:8px; border-bottom-left-radius:8px; }" << endl;
        sortieglm << ".boucle158{ width: 8px; height: 8px; border: 0px; border-left: 2px solid #3366FF;" << endl;
        sortieglm << "border-top: 2px solid #3366FF; border-top-left-radius:8px;" << endl;
        sortieglm << "border-top-right-radius:8px; border-bottom-right-radius:8px;" << endl;
        sortieglm << "border-bottom-left-radius:8px; }" << endl;
        sortieglm << ".boucle159{ width: 10px; height: 10px; border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-top: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:5px; border-top-right-radius:5px;" << endl;
        sortieglm << "border-bottom-right-radius:5px; border-bottom-left-radius:5px; }" << endl;
        sortieglm << ".boucle161{ width: 8px; height: 16px; border: 0px;" << endl;
        sortieglm << "border-bottom: 2px solid #3366FF; border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:140px; border-top-right-radius:18px;" << endl;
        sortieglm << "border-bottom-right-radius:140px; border-bottom-left-radius:18px; }" << endl;
        sortieglm << ".boucle162{" << endl;
        sortieglm << "width: 7px;" << endl;
        sortieglm << "height: 10px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-bottom: 2px solid #3366FF;" << endl;
        sortieglm << "border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-top: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:100px;" << endl;
        sortieglm << "border-top-right-radius:50px;" << endl;
        sortieglm << "border-bottom-right-radius:100px;" << endl;
        sortieglm << "border-bottom-left-radius:5px;}" << endl;
        sortieglm << ".boucle163{" << endl;
        sortieglm << "position:absolute;" << endl;
        sortieglm << "width: 10px;" << endl;
        sortieglm << "height: 8px;" << endl;
        sortieglm << "border: 0px;" << endl;
        sortieglm << "border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-top: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:10px;" << endl;
        sortieglm << "border-top-right-radius:10px;" << endl;
        sortieglm << "border-bottom-right-radius:3px;" << endl;
        sortieglm << "border-bottom-left-radius:10px;}" << endl;


        sortieglm << ".trait_vertical1{ position:relative; width: 2px; height: 15px; background-color: #3366FF; }" << endl;
        sortieglm << ".trait_vertical1:active{ background-color: #F5FFFA; }" << endl;
        sortieglm << ".trait_horizontal1{ position:absolute; width: 10px; height: 2px; background-color: #3366FF; }" << endl;
        sortieglm << ".trait_horizontal1:active{ background-color: #F5FFFA; }" << endl;
        sortieglm << ".action{ position:absolute; cursor:pointer; background-color: #F5FFFA; }" << endl;
        sortieglm << ".boucle201{ width: 8px; height: 15px; border: 0px; border-top: 2px solid #3366FF; border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-left: 2px solid #3366FF; border-bottom: 2px solid #3366FF; border-top-left-radius:15px;" << endl;
        sortieglm << "border-top-right-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:15px; }" << endl;
        sortieglm << ".boucle202{ width: 8px; height: 10px; border: 0px; border-top: 2px solid #3366FF;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-bottom: 2px solid #3366FF; border-top-left-radius:10px;" << endl;
        sortieglm << "border-top-right-radius:10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; }" << endl;
        sortieglm << ".boucle203{ width: 8px; height: 10px; border: 0px; border-bottom: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-right-radius:10px;" << endl;
        sortieglm << "border-bottom-left-radius:10px; }" << endl;
        sortieglm << ".boucle204{ width: 5px; height: 5px; border: 0px; border-top: 2px solid #3366FF;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-left: 2px solid #3366FF; border-top-left-radius:10px;" << endl;
        sortieglm << "border-top-right-radius:10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; }" << endl;
        sortieglm << ".boucle205{ width: 5px; height: 5px; border: 0px; border-bottom: 2px solid #3366FF;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-left: 2px solid #3366FF; border-top-left-radius:10px;" << endl;
        sortieglm << "border-top-right-radius:10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; }" << endl;
        sortieglm << ".boucle206{ width: 10px; height: 7px; border: 0px; border-bottom: 2px solid #3366FF;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-top: 2px solid #3366FF; border-top-left-radius:5px;" << endl;
        sortieglm << "border-top-right-radius:10px; border-bottom-right-radius:10px; border-bottom-left-radius:5px; }" << endl;
        sortieglm << ".boucle207{ width: 10px; height: 7px; border: 0px; border-left: 2px solid #3366FF; border-top-left-radius:5px;" << endl;
        sortieglm << "border-top-right-radius:10px; border-bottom-right-radius:10px; border-bottom-left-radius:5px; }" << endl;
        sortieglm << ".boucle208{ width: 10px; height: 5px; border: 0px; border-bottom: 2px solid #3366FF;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-top: 2px solid #3366FF; border-left: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:5px; border-top-right-radius:10px; border-bottom-right-radius:10px;" << endl;
        sortieglm << "border-bottom-left-radius:5px; }" << endl;
        sortieglm << ".boucle209{ width: 10px; height: 7px; border: 0px; border-left: 2px solid #3366FF; border-top-left-radius:5px;" << endl;
        sortieglm << "border-top-right-radius:10px; border-bottom-right-radius:10px; border-bottom-left-radius:5px; }" << endl;
        sortieglm << ".boucle210{ position:relative; width: 15px; height: 10px; border: 0px; border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-right-radius:100px;" << endl;
        sortieglm << "border-bottom-left-radius:10px; }" << endl;
        sortieglm << ".boucle211{ width: 14px; height: 14px; border: 0px; border-top: 2px solid #3366FF;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-top-left-radius:140px; border-top-right-radius:14px;" << endl;
        sortieglm << "border-bottom-right-radius:14px; border-bottom-left-radius:14px; }" << endl;
        sortieglm << ".boucle212{ width: 12px; height: 8px; border: 0px; border-left: 2px solid #3366FF;" << endl;
        sortieglm << "border-top: 2px solid #3366FF; border-top-left-radius:8px; border-top-right-radius:8px;" << endl;
        sortieglm << "border-bottom-right-radius:8px; border-bottom-left-radius:4px; }" << endl;
        sortieglm << ".tourne45m { float: left;" << endl;
        sortieglm << "    -ms-transform: rotate(45deg);" << endl;
        sortieglm << "    -webkit-transform: rotate(45deg);" << endl;
        sortieglm << "   transform: rotate(45deg); }" << endl;
        sortieglm << ".tourne30m { float: left;" << endl;
        sortieglm << "    -ms-transform: rotate(30deg);" << endl;
        sortieglm << "    -webkit-transform: rotate(30deg);" << endl;
        sortieglm << "    transform: rotate(30deg); }" << endl;
        sortieglm << ".tourne90 { float: left;" << endl;
        sortieglm << "    -ms-transform: rotate(-90deg);" << endl;
        sortieglm << "    -webkit-transform: rotate(-90deg);" << endl;
        sortieglm << "    transform: rotate(-90deg); }" << endl;
        sortieglm << ".boucle213{position:relative; width: 2px; height: 5px; background-color: #3366FF; }" << endl;
        sortieglm << ".boucle214{position:relative; width: 2px; height: 5px; background-color: #3366FF; }" << endl;
        sortieglm << ".boucle216{ position:relative; width: 15px; height: 10px; border: 0px; border-left: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-right-radius:10px;" << endl;
        sortieglm << "border-bottom-left-radius:100px; }" << endl;
        sortieglm << ".boucle217{ width: 10px; height: 5px; border: 0px; border-bottom: 2px solid #3366FF;" << endl;
        sortieglm << "border-right: 2px solid #3366FF; border-top: 2px solid #3366FF; border-top-left-radius:5px;" << endl;
        sortieglm << "border-top-right-radius:10px; border-bottom-right-radius:10px; border-bottom-left-radius:5px; }" << endl;
        sortieglm << ".boucle218{ width: 6px; height: 14px; border: 0px; border-left: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:14px ; border-bottom-right-radius:14px; " << endl;
        sortieglm << "border-top-right-radius:14px; border-bottom-left-radius:14px; }" << endl;
        sortieglm << ".boucle219{ width: 6px; height: 14px; border: 0px;border-right: 2px solid #3366FF;" << endl;
        sortieglm << "border-top-left-radius:14px ; border-bottom-right-radius:14px; " << endl;
        sortieglm << "border-top-right-radius:14px; border-bottom-left-radius:14px; }" << endl;

        sortieglm << "</style>" << endl;
        sortieglm << "</head>" << endl;
        sortieglm << "<body>" << endl;


// la variable passerelle
                char quiestla;  
// lit le caractère et le range dans quiestla

//                entreglm.get(quiestla);  

//                cout << quiestla;  // on l'affiche

int placement = 20;
int caractereplus = 0;

//je crer un espace
        sortieglm << LeSautDeLigne << endl;
        sortieglm << LeSautDeLigne << endl;

        while(entreglm.get(quiestla))  // tant que sa rentre

        {

switch (caractereplus)
{

     case 0: {



// compare et génère
switch (quiestla)
{
     case -59: {
  caractereplus = 2;
  placement = placement - 20;
          break;
    }

     case -61: {
  caractereplus = 1;
  placement = placement - 20;
          break;
    }


     case 10: {
        sortieglm << LeSautDeLigne << endl;
  placement = 10;
          break;
    }
     case 32: {
        sortieglm << Monespace << endl;
        sortieglm << Lediv << endl;
          break;
    }
// en attente double apotrophe
     case 34: {
        sortieglm << Monespace << endl;
        sortieglm << Lediv << endl;
          break;
    }
// en attente et commercial
     case 38: {
        sortieglm << Monespace << endl;
        sortieglm << Lediv << endl;
          break;
    }

// apostrophe
     case 39: {
        placement = placement - 5;
        sortieglm << Lettree3 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lettree6 << endl;
        sortieglm << Lediv << endl;
        placement = placement + 5;
          break;
    }
// en attente (
     case 40: {
        placement = placement + 3;
        sortieglm << monaccogauche << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        sortieglm << monaccogauche1 << endl;
        sortieglm << Lediv << endl;
        placement = placement - 14;
          break;
    }
// en attente )
     case 41: {
        sortieglm << monaccodroite << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        sortieglm << monaccodroite1 << endl;
        sortieglm << Lediv << endl;
        placement = placement - 14;
          break;
    }
// virgule
     case 44: {
        placement = placement - 5;
        sortieglm << Lettrespe4a << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lettrespe4b << endl;
        sortieglm << Lediv << endl;
        placement = placement + 5;
          break;
    }

// trait union
     case 45: {
        placement = placement + 4;
        sortieglm << Lettrespe3a << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lettrespe3b << endl;
        sortieglm << Lediv << endl;
          break;
    }
// le point
     case 46: {
        placement = placement - 5;
        sortieglm << Lettrespe5a << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lettrespe5b << endl;
        sortieglm << Lediv << endl;
        placement = placement + 5;
          break;
    }
// chiffre 0
     case 48: {
        sortieglm << chiffre0a << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
          break;
    }
// chiffre 1
     case 49: {
        placement = placement + 8;
        sortieglm << chiffre1a << placement << "px\">" << endl;
        sortieglm << chiffre1b << endl;
        sortieglm << Lediv << Lediv << endl;
        placement = placement - 14;
          break;
    }
     case 50: {
        placement = placement + 2;
        sortieglm << chiffre2a << placement << "px\">" << endl;
        sortieglm << chiffre2b << endl;
        sortieglm << chiffre2c << endl;
        sortieglm << Lediv << Lediv << Lediv << endl;
        sortieglm << chiffre2d << endl;
        sortieglm << Lediv << endl;
        placement = placement - 3;
          break;
    }
     case 51: {
        placement = placement + 2;
        sortieglm << chiffre3a << placement << "px\">" << endl;
        sortieglm << chiffre3b << endl;
        sortieglm << Lediv << Lediv << endl;
        sortieglm << chiffre3c << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 52: {
        placement = placement + 4;

        sortieglm << chiffre4a << placement << "px\">" << endl;
        sortieglm << chiffre4b << endl;
        sortieglm << chiffre4c << endl;
        sortieglm << Lediv << Lediv << Lediv << endl;
        sortieglm << chiffre4d << endl;
        sortieglm << Lediv << endl;
        placement = placement - 10;
          break;
    }
     case 53: {
        sortieglm << chiffre5a << placement << "px\">" << endl;
        sortieglm << chiffre5b << endl;
        sortieglm << chiffre5c << endl;
        sortieglm << Lediv << Lediv << Lediv << endl;
        sortieglm << chiffre5d << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 54: {
        sortieglm << chiffre6a << placement << "px\">" << endl;
        sortieglm << chiffre6b << endl;
        sortieglm << Lediv << Lediv << endl;
        sortieglm << chiffre6c << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 55: {
        sortieglm << chiffre7a << placement << "px\">" << endl;
        sortieglm << chiffre7b << endl;
        sortieglm << Lediv << Lediv << endl;
        sortieglm << chiffre7c << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 56: {
        sortieglm << chiffre8a << placement << "px\">" << endl;
        sortieglm << chiffre8b << endl;
        sortieglm << Lediv << Lediv << endl;
          break;
    }
     case 57: {
        sortieglm << chiffre9a << placement << "px\">" << endl;
        sortieglm << chiffre9b << endl;
        sortieglm << Lediv << Lediv << endl;
        sortieglm << chiffre9c << endl;
        sortieglm << Lediv << endl;
          break;
    }

// point interrogation
     case 63: {
        sortieglm << Lettrespe2a << placement << "px\">" << endl;
        sortieglm << Lettrespe2b << endl;
        sortieglm << Lettrespe2c << endl;
        sortieglm << Lediv << Lediv << Lediv << endl;
          break;
    }


// lettre A
     case 65: {
        placement = placement - 7;
        sortieglm << LettreA << placement << "px\">" << endl;
        sortieglm << LettreA1 << endl;
        sortieglm << LettreA2 << endl;
        sortieglm << Lediv << Lediv << Lediv << endl;
        placement = placement + 17;
          break;
    }
// lettre B
     case 66: {
        placement = placement - 7;
        sortieglm << LettreB << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        placement = placement + 20;
        sortieglm << LettreB1 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        sortieglm << LettreB2 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 67: {
        sortieglm << LettreC << placement << "px\">" << endl;
        sortieglm << LettreC1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << LettreC2 << endl;
        sortieglm << Lediv << endl;
        placement = placement + 5;
          break;
    }
     case 68: {
        placement = placement - 7;
        sortieglm << LettreD << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        placement = placement + 20;
        sortieglm << LettreD1 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 69: {
        sortieglm << LettreE << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        sortieglm << LettreE1 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        placement = placement - 3;
        sortieglm << LettreE2 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        sortieglm << LettreE3 << endl;
        sortieglm << Lediv << endl;
        placement = placement - 3;
          break;
    }
     case 70: {
        sortieglm << LettreF << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        placement = placement - 10;
        sortieglm << LettreF1 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        placement = placement +13;
        sortieglm << LettreF2 << placement << "px\">" << endl;
        sortieglm << LettreF3 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << LettreF4 << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 71: {
        sortieglm << LettreG << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        placement = placement + 7;
        sortieglm << LettreG1 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        placement = placement + 5;
        sortieglm << LettreG2 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;

          break;
    }
     case 72: {
        placement = placement + 5;
        sortieglm << LettreH << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        placement = placement - 10;
        sortieglm << LettreH1 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        placement = placement + 20;
        sortieglm << LettreH2 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        placement = placement - 10;
        sortieglm << LettreH3 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        sortieglm << LettreH4 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        placement = placement + 2;
          break;
    }
     case 73: {
        sortieglm << LettreI << placement << "px\">" << endl;
        sortieglm << LettreI1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 74: {
        sortieglm << LettreJ << placement << "px\">" << endl;
        sortieglm << LettreJ1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 75: {
        sortieglm << LettreK << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        placement = placement + 12;
        sortieglm << LettreK1 << placement << "px\">" << endl;
        sortieglm << LettreK2 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;

          break;
    }
     case 76: {
        placement = placement - 2;
        sortieglm << LettreL << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        sortieglm << LettreL1 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        sortieglm << LettreL2 << endl;
        sortieglm << Lediv << endl;
        placement = placement + 1;
          break;
    }
     case 77: {
        sortieglm << LettreM << placement << "px\">" << endl;
        sortieglm << LettreM1 << endl;
        sortieglm << LettreM2 << endl;
        sortieglm << LettreM3 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 20;
          break;
    }
     case 78: {
        sortieglm << LettreN << placement << "px\">" << endl;
        sortieglm << LettreN1 << endl;
        sortieglm << LettreN2 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 12;
          break;
    }
     case 79: {
        sortieglm << LettreO << placement << "px\">" << endl;
        sortieglm << LettreO1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 80: {
        sortieglm << LettreP << placement << "px\">" << endl;
        sortieglm << LettreP1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 81: {
        sortieglm << LettreQ << placement << "px\">" << endl;
        sortieglm << LettreQ1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 82: {
        placement = placement - 10;
        sortieglm << LettreR << placement << "px\">" << endl;
        sortieglm << LettreR1 << endl;
        sortieglm << LettreR2 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 14;
          break;
    }
     case 83: {
        sortieglm << LettreS << placement << "px\">" << endl;
        sortieglm << LettreS1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 84: {
        sortieglm << LettreT << placement << "px\">" << endl;
        sortieglm << LettreT1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << LettreT2 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 85: {
        sortieglm << LettreU << placement << "px\">" << endl;
        sortieglm << LettreU1 << endl;
        sortieglm << LettreU2 << endl;
        sortieglm << LettreU3 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 14;
          break;
    }
     case 86: {
        sortieglm << LettreV << placement << "px\">" << endl;
        sortieglm << LettreV1 << endl;
        sortieglm << LettreV2 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 10;
          break;
    }
     case 87: {
        sortieglm << LettreW << placement << "px\">" << endl;
        sortieglm << LettreW1 << endl;
        sortieglm << LettreW2 << endl;
        sortieglm << LettreW3 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 88: {
        sortieglm << LettreX << placement << "px\">" << endl;
        sortieglm << LettreX1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 10;
          break;
    }
     case 89: {
        sortieglm << LettreY << placement << "px\">" << endl;
        sortieglm << LettreY1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 90: {
        sortieglm << LettreZ << placement << "px\">" << endl;
        sortieglm << LettreZ1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << LettreZ2 << endl;
        sortieglm << Lediv << endl;
        sortieglm << LettreZ3 << endl;
        sortieglm << Lediv << endl;
          break;
    }

// ajout
     case 95: {
        sortieglm << traitbas << placement << "px\">" << endl;
        sortieglm << traitbas1 << endl;
        sortieglm << traitbas2 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement - 9;
          break;
    }



// lettrea
     case 97: {
        sortieglm << Lettrea << placement << "px\">" << endl;
        sortieglm << Lettrea1 << endl;
        sortieglm << Pointajuste << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 98: {
        sortieglm << Lettreb << placement << "px\">" << endl;
        sortieglm << Lettreb1 << endl;
        sortieglm << Lettreb2 << endl;
        sortieglm << Lettreb3 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 99: {
        sortieglm << Lettrec << placement << "px\">" << endl;
        sortieglm << Lettrec1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 100: {
        sortieglm << Lettred << placement << "px\">" << endl;
        sortieglm << Lettred1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 101: {
        sortieglm << Lettree << placement << "px\">" << endl;
        sortieglm << Lettree1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lettree5 << endl;
        sortieglm << Lediv << endl;
        placement = placement - 9;
          break;
    }
     case 102: {
        sortieglm << Lettref << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        placement = placement - 6;
        sortieglm << Lettref1 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        placement = placement + 6;
        sortieglm << Lettref2 << placement << "px\">" << endl;
        sortieglm << Lettref3 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement -11;
          break;
    }
     case 103: {
        sortieglm << Lettreg << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lettreg1 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lettreg2 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        placement = placement -5;
          break;
    }
     case 104: {
        sortieglm << Lettreh << placement << "px\">" << endl;
        sortieglm << Lettreh1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement -3;
        sortieglm << Lettreh2 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        placement = placement -3;
          break;
    }
     case 105: {
        placement = placement - 7;
        sortieglm << Lettrei << placement << "px\">" << endl;
        sortieglm << Lettrei1 << endl;
        sortieglm << Lettrei2 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 106: {
        placement = placement - 2;
        sortieglm << Lettrej << placement << "px\">" << endl;
        sortieglm << Lettrej1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 9;
        sortieglm << Lettrej2 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lettrej3 << endl;
        sortieglm << Lediv << endl;
        placement = placement - 7;
          break;
    }
     case 107: {
        sortieglm << Lettrek << placement << "px\">" << endl;
        sortieglm << Lettrek1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lettrek2 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lettrek3 << placement << "px\">" << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lettrek4 << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 108: {
        sortieglm << Lettrel << placement << "px\">" << endl;
        sortieglm << Lettrel1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lettrel2 << endl;
        sortieglm << Lediv << endl;
        placement = placement - 6;
          break;
    }
     case 109: {
        sortieglm << Lettrem << placement << "px\">" << endl;
        sortieglm << Lettrem1 << endl;
        sortieglm << Lettrem2 << endl;
        sortieglm << Lettrem3 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 20;
          break;
    }
     case 110: {
        placement = placement - 1;
        sortieglm << Lettren << placement << "px\">" << endl;
        sortieglm << Lettren1 << endl;
        sortieglm << Lettren2 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 12;
          break;
    }
     case 111: {
        sortieglm << Lettreo << placement << "px\">" << endl;
        sortieglm << Lettreo1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 112: {
        sortieglm << Lettrep << placement << "px\">" << endl;
        sortieglm << Lettrep1 << endl;
        sortieglm << Lettrep2 << endl;
        sortieglm << Lettrep3 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 10;
          break;
    }
     case 113: {
        sortieglm << Lettreq << placement << "px\">" << endl;
        sortieglm << Lettreq1 << endl;
        sortieglm << Lettreq2 << endl;
        sortieglm << Lettreq3 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 10;
          break;
    }
     case 114: {
        placement = placement -5;
        sortieglm << Lettrer << placement << "px\">" << endl;
        sortieglm << Lettrer1 << endl;
        sortieglm << Lettrer2 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 10;
          break;
    }
     case 115: {
        placement = placement - 20;
        sortieglm << Lettres << placement << "px\">" << endl;
        sortieglm << Lettres1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 10;
          break;
    }
     case 116: {
        placement = placement - 7;
        sortieglm << "<div>" << endl;
        sortieglm << Lettret << placement << "px\">" << endl;
        sortieglm << Lettret1 << endl;
        sortieglm << Lettret2 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 117: {
        placement = placement - 7;
        sortieglm << Lettreu << placement << "px\">" << endl;
        sortieglm << Lettreu1 << endl;
        sortieglm << Lettreu2 << endl;
        sortieglm << Lettreu3 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 14;
          break;
    }
     case 118: {
        sortieglm << Lettrev << placement << "px\">" << endl;
        sortieglm << Lettrev3 << endl;
        sortieglm << Lettrev1 << endl;
        sortieglm << Lettrev2 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 10;
          break;
    }
     case 119: {
        placement = placement - 9;
        sortieglm << Lettrew << placement << "px\">" << endl;
        sortieglm << Lettrew1 << endl;
        sortieglm << Lettrew2 << endl;
        sortieglm << Lettrew3 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 7;
          break;
    }
     case 120: {
        placement = placement - 5;
        sortieglm << Lettrex << placement << "px\">" << endl;
        sortieglm << Lettrex1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 10;
          break;
    }
     case 121: {
        sortieglm << Lettrey << placement << "px\">" << endl;
        sortieglm << Lettrey1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 122: {
        sortieglm << Lettrez << placement << "px\">" << endl;
        sortieglm << Lettrez1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lettrez2 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lettrez3 << endl;
        sortieglm << Lediv << endl;
          break;
    }
     case 123: {
        sortieglm << Lettrea << endl;
        sortieglm << Lettrea1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
}
//ecriture dans index.html



          break;
    }



     case 1: {


switch (quiestla)
{
// u accent grave
     case -71: {
        placement = placement - 7;
        sortieglm << Lettreu << placement << "px\">" << endl;
        sortieglm << Lettreu1 << endl;
        sortieglm << Lettreu2 << endl;
        sortieglm << Lettreu3 << endl;
        sortieglm << Lettree4 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 14;
          break;
    }
// o chapeau de gendarme
     case -76: {
        sortieglm << Lettreo << placement << "px\">" << endl;
        sortieglm << Lettreo1 << endl;
        sortieglm << Lettreo2 << endl;
        sortieglm << Lettreo3 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement - 6;
          break;
    }

// i chapeau de gendarme
     case -82: {
        placement = placement - 7;
        sortieglm << Lettrei << placement << "px\">" << endl;
        sortieglm << Lettrei1 << endl;
        sortieglm << Lettreo2 << endl;
        sortieglm << Lettreo3 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }

// e chapeau de gendarme
     case -86: {
        sortieglm << Lettree << placement << "px\">" << endl;
        sortieglm << Lettree1 << endl;
        sortieglm << Lettrea2 << endl;
        sortieglm << Lettrea3 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lettree7 << endl;
        sortieglm << Lediv << endl;
        placement = placement - 9;
          break;
    }

// e accent aigu
     case -87: {
        sortieglm << Lettree << placement << "px\">" << endl;
        sortieglm << Lettree1 << endl;
        sortieglm << Lettree2 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lettree7 << endl;
        sortieglm << Lediv << endl;
        placement = placement - 9;
          break;
    }
// e accent grave
     case -88: {
        sortieglm << Lettree << placement << "px\">" << endl;
        sortieglm << Lettree1 << endl;
        sortieglm << Lettree4 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement - 9;
          break;
    }
// en attente c cédille
     case 89: {
        sortieglm << Monespace << endl;
        sortieglm << Lediv << endl;
          break;
    }
// a chapeau de gendarme
     case -94: {
        sortieglm << Lettrea << placement << "px\">" << endl;
        sortieglm << Lettrea1 << endl;
        sortieglm << Lettrea2 << endl;
        sortieglm << Lettrea3 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }
// a accent grave
     case -96: {
        sortieglm << Lettrea << placement << "px\">" << endl;
        sortieglm << Lettrea1 << endl;
        sortieglm << Lettrea4 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
          break;
    }


}



  caractereplus = 0;

          break;
    }



/*******/
     case 2: {


switch (quiestla)
{
// le e dans le o
     case -109: {
        sortieglm << Lettreo << placement << "px\">" << endl;
        sortieglm << Lettreo1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        placement = placement + 10;
        sortieglm << Lettree << placement << "px\">" << endl;
        sortieglm << Lettree1 << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lediv << endl;
        sortieglm << Lettree5 << endl;
        sortieglm << Lediv << endl;
        placement = placement - 9;
          break;
    }



}



  caractereplus = 0;

          break;
    }

/*************/

}//fin tri caractere normal

//
placement = placement + 20;


        }//fin de la boucle du while



        sortieglm << "</body>" << endl;
        sortieglm << "</html>" << endl;

                 sortieglm.close();
        }


        else

                cerr << "Impossible d'ouvrir le sortieglm !" << endl;

//

                entreglm.close();

        }

        else

                cerr << "Impossible d'ouvrir le entreglm !" << endl;

 

        return 0;

}

 



P.S. aux utilisateurs de pdf, comparer la protection possible et le poids du fichier html compressé par rapport au pdf. Il me semble que les concepts ne sont pas dans la même catégorie, nous pouvons même dire que la différence est tellement grande qu'ils sont incomparables.

#14 Scripts, programmes et robots » Documents aux normes iso » 25-08-2015 21:25:16

temps
Réponses : 5
Que ce soit du document administratif au cours de l'enseignant, nous rencontrons souvent du pdf qui est un format propriétaire.
De manière à pouvoir créer plus tard un générateur de documents protégés aux normes iso, j'ai commencé à créer des alphabets en html5 css3 ici
http://www.letime.net/alpha/1.html et j'ai un début d'explication du concept ici http://www.letime.net/alpha/.

Je sais qu'en tant qu'adorateur du goto, et mauvais gestionnaire de git (je sais pas ou est passé le mien sur DF), je ne suis pas le contributeur parfais.
Mais je pense que développer plusieurs alphabets en css3, peut faciliter de nombreuses d&marches administratives (peut être d'une grande utilité).

En exemple

<style>
.mon_humeur1{
  position:absolute;
  width: 40px;
  height: 40px;
  background-color: #F5FFFA;
  margin-left: 1px;
}
.trait_vertical1{
  position:absolute;
  width: 2px;
  height: 10px;
  background-color: black;
}
.trait_vertical1:active{
  background-color: #F5FFFA;
}
.trait_horizontal1{
  position:absolute;
  width: 10px;
  height: 2px;
  background-color: black;
}
.trait_horizontal1:active{
  background-color: #F5FFFA;
}
.action{
  position:absolute;
  cursor:pointer;
  background-color: #F5FFFA;

}
.angle1 {
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}

</style>



<h2> Lettre D</h2>

<pre>

div class="mon_humeur1 action"

div class="trait_vertical1" style="margin-top:10px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
div class="trait_horizontal1" style="margin-top:-10px; margin-left:-3px"
div class="trait_horizontal1" style="margin-top:20px"
div class="trait_vertical1" style="margin-top:-20px ; margin-left:10px"
div class="trait_vertical1" style="margin-top:10px"
/div
/div
/div
/div
/div
/div

/div

</pre>

<div class="mon_humeur1 action">


<div class="trait_vertical1" style="margin-top:10px ; margin-left:10px">
<div class="trait_vertical1" style="margin-top:10px">
<div class="trait_horizontal1" style="margin-top:-10px; margin-left:-3px">
<div class="trait_horizontal1" style="margin-top:20px">
<div class="trait_vertical1" style="margin-top:-20px ; margin-left:10px">
<div class="trait_vertical1" style="margin-top:10px">
</div>
</div>
</div>
</div>
</div>
</div>

</div>


<p>
<br /><br /><br />
</p>



cordialement

#15 Re : Suivi du Wiki et des Projets Git » wiki SequenBaul » 20-07-2015 01:09:14

Bonjour,
Au sujet du sous-projet PianoBaul en html5, je suis entrain de dessiner les différents instruments de musiques.
Pour mixer plusieurs notes en html5, en exemple pour les instruments à corde il suffit de reprendre le code comme suit.
A l'origine j'écris

      <!-- DO gamme 1 -->
  <div id="corde1" onMouseDown="action1Press();pourlogo();" onMouseUp="actionUp();"><audio id="1wav" src="http://www.letime.net/PianoBaul/zone3/j1/a1.wav" preload></audio></div>
      <!-- DO+ gamme 1 -->
  <div id="corde2" onMouseDown="action2Press();pourlogo();" onMouseUp="actionUp();"><audio id="2wav" src="http://www.letime.net/PianoBaul/zone3/j1/z1.wav" preload></audio></div>


En déplaçant la première fermeture du div à la fin, nous mixons les deux notes, ou beaucoup plus selon le nombre de div. en fait c'est l'héritage qui fait le mix de toutes les notes.

Les derniers exemples créés sont :
http://www.letime.net/PianoBaul/zone3/m1/

http://www.letime.net/PianoBaul/zone3/j1/

http://www.letime.net/PianoBaul/zone3/i1/

Dès que j’ai fini la création des différents instruments de musique, je les placerai dans le git.
J"ai aussi commencé une petite mascotte animée d'une de mes asso et aussi accompagner mes pages ici http://www.letime.net/PianoBaul/tux/
Cordialement

#16 Re : Suivi du Wiki et des Projets Git » wiki SequenBaul » 18-06-2015 04:35:50

Bonjour,
Je travaille ces derniers temps sur la partie communication à l'aide de la version PianoBaul html5 afin d'obtenir un serveur multimédia.
Je vais attaquer prochainement les graphismes des page en mappant les dessins des instruments de musiques comme je l'avais fait avec le moteur de recherche système expert (un lourd travail).
J'ai commencé à placer la voix humaine dans la version html5, sans attendre d'avoir affiné le code (PC, mobile, compatibilité navigateurs).
Les mêmes sons peuvent être générés de plusieurs manières, mais pour pianobaul il faut préférer travailler sur les amplitude car les sons se mixent , si nous travaillons sur les durées souvent ils se déforment mal (80% des cas en fait il est plus facile de former des couches audibles avec les amplitudes)
Dans le dernier piano mis en ligne, je mets en évidence que la même forme s'entend en son B ou en son T selon la forme de la voyelle qui suit.
Ma démarche actuelle est de trouver les 150 euros pour l'hébergement, de trouver d'autres DEV pour s’occuper du html5 et des dessins, de trouver quelqu'un pour mettre à jour les wiki et le git (je sais faire un push mais pas commenter.
Ce serait bien de retrouver quelqu'un avec moi sur le projet.

Cordialement

#17 Re : Suivi du Wiki et des Projets Git » wiki SequenBaul » 04-06-2015 20:27:48

Bonjour,
La première partie de la tache 4 est faite, il reste à en faire un deb.
A la première utilisation, il faut compiler avec gcc, c'est du c++ sans librairie
il faut entrer les 16 valeurs dans le fichier front.txt
et ensuite cliquer sur index.htlm pour faire apparaître le piano sélectionné dans fronts.txt
Cest ici http://www.letime.net/PianoBaul/src.tar.gz

Il faut télécharger l'application, la décompresser, entrer dans le répertoire en terminal et taper au clavier :

g++ main.cpp clavier.cpp frontsbase.cpp fronts.cpp frontsw.cpp frontsx.cpp frontsy.cpp frontsa.cpp frontsb.cpp frontsd.cpp frontse.cpp frontsf.cpp frontsg.cpp frontsj.cpp frontsj1.cpp frontsj2.cpp frontsj3.cpp frontsj4.cpp frontsj5.cpp frontsj6.cpp frontsj7.cpp frontsj8.cpp frontsj9.cpp frontsj10.cpp frontsj11.cpp consonnes.cpp convertisseur.cpp AdnForme.cpp AdnForme1.cpp AdnForme2.cpp AdnForme3.cpp AdnForme4.cpp AdnForme5.cpp AdnForme6.cpp AdnForme7.cpp AdnForme8.cpp AdnForme9.cpp AdnForme10.cpp AdnForme11.cpp AdnForme12.cpp AdnForme13.cpp AdnForme14.cpp AdnForme15.cpp AdnForme16.cpp AdnForme17.cpp AdnForme18.cpp AdnForme19.cpp AdnForme20.cpp AdnForme21.cpp AdnForme22.cpp AdnForme23.cpp AdnForme24.cpp AdnForme25.cpp AdnForme26.cpp AdnForme27.cpp AdnForme28.cpp AdnForme29.cpp AdnForme30.cpp AdnForme31.cpp AdnForme32.cpp AdnForme33.cpp AdnForme34.cpp AdnForme35.cpp AdnForme36.cpp AdnForme37.cpp AdnForme38.cpp AdnForme39.cpp AdnForme40.cpp AdnForme41.cpp AdnForme42.cpp AdnForme43.cpp AdnForme44.cpp AdnForme45.cpp AdnForme46.cpp AdnForme47.cpp AdnForme48.cpp AdnForme49.cpp AdnForme50.cpp AdnForme51.cpp AdnForme52.cpp AdnForme53.cpp AdnForme54.cpp AdnForme55.cpp AdnForme56.cpp AdnFTab4a.cpp AdnFTab4b.cpp AdnFTab4d.cpp AdnFTab4e.cpp AdnFTabj.cpp -o PianoBaulhtml


ceci produit l'exécutable. Il faut copier coller dans chaque répertoire de travail de piano différent , 1_ index.html, 2 ftonts.txt et l'exécutable.
Puis entrer les 16 valeurs du piano désiré ( ceci génère les sons) et enfin lancer index.html
Il est possible d'avoir une meilleur qualité sonore, pour cela il suffit d'augmenter la valeur de la boucle dans le main, et ensuite retoucher le nombre de fichier audio dans l'index.html

Je vais essayer la tache 1, trouver un serveur pour placer les pianos.

Cordialement

P.S.
j'ai envoyé plusieurs messages dans la bouteille pour trouver un sponsor (serveur multimedia 150 euros annuel).
J'ai lancé quelques termes sur l'écran pour essayer de commencer les travaux de restructuration de SequenBaul, les voici

Première proposition de travaux sur les structures de SequenBaul


Le but ici est de créé des normes de langage pour pouvoir coder SequenBaul, la démarche n'étudie pas le vrai du faux sur les langues anciennes, la démarche est d'essayer de créer les class de l'application.

Prérequis :
langage unidirectionnel (langage indo-europeen, français, arabe ...)? logique unidirectionnel  ? tableau acoustique
langage multidirectionnel (langage celte, langue de concepts (se retrouve un peu dans proverbe, sculpture et tradition alchimique) ? logique multidirectionnelle ? chaque classe adn est induite par 1 loi en science physique prédominante.

Etude


1- Caractère central, le concept qui va faire naitre les autres concepts :
L’essence est de trois caractères (facteurs). Deux facteur de nature contraire, le temps et la différence de pression nommée amplitude et la force qui va être identifiée à l'aide d'un nombre sans dimension.
Puisque plusieurs causes peuvent avoir le même effet, l'application de manière à être légère a fixé à la force une valeur constante ; pour ne garder que les deux facteurs de nature contraire.
L'essence est donc de 2 valeurs, la durée et l'amplitude. Nous pouvons déjà écrire avec ces information qu'il existe une infinité d'état d'équilibre théorique entre ces deux facteurs pour produire le même son.

Loi 1 : Le même son peut-être produit soit en augmentant l'amplitude, soit par la répétition de sa forme de front. (3 grandes zones d'amplitude)
Loi 2 : plusieurs sons, dans la limite des portes, peuvent être entendu en même temps, soit en mixant les fronts, soit en faisant surfer un son sur un autre.
Loi 3 : Il existe des portes des cas possibles, des fronts puissant masquent les sons plus faible.
Loi 4, il existe un temps de latence, un effet mémoire, en exemple si un son puissant suit directement un son plus faible, le son faible ne sera pas entendue.
Loi5, les lois cités se répètent aussi en plusieurs méta niveau mais leurs modèles est différent.
Loi6, les lois des fronts montant sont différentes des lois des fronts descendants, bien que l’inversion par rapport à la pression ne change pas le son.
Loi 7, il existe 3 grandes metaforme, le marteau, la licorne, le mariage a différentes forces que nous pouvons manipuler.
Loi 8, les sons sont en équilibre, en exemple la même forme selon sa puissance par rapport au son suivant donnera un son différent (c'est évident avec le son S, F .. ou encore P et B … dans la voix humaine)

Nous pouvons créer des trémolo avec l'inversion entre les deux facteurs de nature contraire, mais nous ne pouvons classer cette cause comme class dans sequenbaul, car ce n'est qu'une forme particulière, et non pas une forme générale.

Nous pouvons créer plusieurs sons et manipuler leurs états d'équilibre entre les forces, les portes …
peut-être est-ce un début d'idée de classement pour sequenbaul.
Proposition :
Reprendre au début la structure de sequenBaul et :
En premier travailler sur un seul son et déployer toutes les causes première sur ce son unique.
En deuxième class reprendre le même son, et jouer sur toutes les causes premières mais cette fois_ci en introduisant les variation sur le temps ( une class qui ouvre sur une nouvelle class) ?

Une fois ceci réaliser commencer à développer une troisième class sur les deux autres qui utilise les état d'équilibre entre deux sons
… ainsi de suite jusqu'à arriver à énoncer toutes les causes premières des différents niveaux de lois physiques pour commencer à étudier les causes particulières comme la voix humaine.

Cordialement



Sans toucher le code actuel, je vais tater pour voir en ajoutant des AdnForme en jouant sur les variations d'un front, puis sur les variations de 2 fronts, puis ... en augmentant le nombre de fronts.

#18 Re : Suivi du Wiki et des Projets Git » wiki SequenBaul » 02-06-2015 18:25:16

Bonjour,
J'ai placé 4 pianos de la BAUL "sequenbaul" en HTML5 http://letime.net/PianoBaul/

Les travaux (à classer) qu'il reste à faire sont :
1- Trouver un serveur pour placer plusieurs piano de la BAUL en HTML5
2- Retoucher le code HTML5 pour qu'il soit compatible avec les phones
3- Reprendre le code HTML5 pour le rendre plus efficace (essayer d'éviter la répétition du même fichier audio sous différents noms)
4- Terminer la version complète de PianoBaul HTML5 sous linux et en faire un deb
5- Reprendre les structures de SequenBaul. En détail, nous pouvons utiliser la technique latinisée actuelle (cartésien), un langage unidirectionnel, qui induit des pensée unidirectionnel ,qui induit un logique unidirectionnelle et par là des descriptions par les effets. c'est ce que j'ai fait quand j'ai placé des tableaux. Ou nous pouvons utiliser le langage européen post latinisation qui est multidirectionnel, et ne décrit que les causes, c'est ce que je fais quand j'écris des formes type marteau, licorne, ... Bien que la deuxième technique est beaucoup plus logique et puissante, il reste le problème que peu de gens comprend ce que je dis. Et créer un outil que personne n'arrive à manipuler n'est pas vraiment intéressant.

Je vais essayer de travailler en premier sur le deuxième point, puis en dual peut-être m'attaquer au quatrième point, car j'ai déjà le code dans la tête, il ne me suffit qu'à le coucher sur le clavier. Le principal problème actuel, est que le code appel toujours AdnForme car " genereFichierJo(c);" dans le code sans regard sur ce qu'il appel.

Cordialement

P.S.
La tache 2 est faite une redirection en javascript

if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/Android/i) ) ) {
   window.location = "http://www.letime.net/PianoBaul/x/";
}


et ensuite un piano de 12 touches pour avoir l'espace minimum imposé sur les boutons

<!DOCTYPE html>
<html>
<head>  
<title>PianoBaul en HTML5 mobile</title>
<meta charset="UTF-8" />
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="canonical" title="PianoBaul en HTML5" href="http://www.letime.net/PianoBaul/" />
<script type="text/javascript">

       var mua1 = 0;
       var mua2 = 0;
       var mua3 = 0;
       var mua4 = 0;
       var mua5 = 0;
       var mua6 = 0;
       var mua7 = 0;
       var mua8 = 0;
       var mua9 = 0;
       var mua10 = 0;
       var mua11 = 0;
       var mua12 = 0;

     

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the key event was already consumed.
  }

  switch (event.key) {
      case "a":
  mua1 = mua1 + 1;
  if(mua1>3){
        mua1 =0;
    }
  multitouchea(mua1);
    break;
   
      case "z":
      mua2 = mua2 + 1;
  if(mua2>3){
        mua2 =0;
    }
  multitouchez(mua2);
    break;
   
      case "e":
      mua3 = mua3 + 1;
  if(mua3>3){
        mua3 =0;
    }
  multitouchee(mua3);
    break;
   
      case "r":
      mua4 = mua4 + 1;
  if(mua4>3){
        mua4 =0;
    }
  multitoucher(mua4);
    break;
   
      case "t":
      mua5 = mua5 + 1;
  if(mua5>3){
        mua5 =0;
    }
  multitouchet(mua5);
    break;
   
      case "y":
      mua6 = mua6 + 1;
  if(mua6>3){
        mua6 =0;
    }
  multitouchet(mua6);
    break;
   
      case "u":
      mua7 = mua7 + 1;
  if(mua7>3){
        mua7 =0;
    }
  multitoucheu(mua7);
    break;
   
      case "i":
      mua8 = mua8 + 1;
  if(mua8>3){
        mua8 =0;
    }
  multitouchei(mua8);
    break;
   
      case "o":
      mua9 = mua9 + 1;
  if(mua9>3){
        mua9 =0;
    }
  multitoucheo(mua9);
    break;
   
      case "p":
      mua10 = mua10 + 1;
  if(mua10>3){
        mua10 =0;
    }
  multitouchep(mua10);
    break;
   
      case "q":
      mua11 = mua11 + 1;
  if(mua11>3){
        mua11 =0;
    }
  multitoucheq(mua11);
    break;
   
      case "s":
      mua12 = mua12 + 1;
  if(mua12>3){
        mua12 =0;
    }
  multitouches(mua12);
    break;
   
 


    default:
 
      return; // Quit when this doesn't handle the key event.
  }

  // Consume the event for suppressing "double action".
  event.preventDefault();
}, true);



 
  function multitouchea(mua1){

  if(mua1==0){

  var multia1 = document.getElementById("1wav");
  multia1.play();
  }
  else if(mua1==1){

  var multia2 = document.getElementById("1awav");
  multia2.play();
  }
  else if(mua1==2){

  var multia3 = document.getElementById("1bwav");
  multia3.play();
  }
  else if(mua1==3){

  var multia4 = document.getElementById("1cwav");
  multia4.play();
  }
  }

  function multitouchez(mua2){

  if(mua2==0){

  var multiz1 = document.getElementById("2wav");
  multiz1.play();
  }
  else if(mua2==1){

  var multiz2 = document.getElementById("2awav");
  multiz2.play();
  }
  else if(mua2==2){

  var multiz3 = document.getElementById("2bwav");
  multiz3.play();
  }
  else if(mua2==3){

  var multiz4 = document.getElementById("2cwav");
  multiz4.play();
  }
  }

  function multitouchee(mua3){

  if(mua3==0){

  var multie1 = document.getElementById("3wav");
  multie1.play();
  }
  else if(mua3==1){

  var multie2 = document.getElementById("3awav");
  multie2.play();
  }
  else if(mua3==2){

  var multie3 = document.getElementById("3bwav");
  multie3.play();
  }
  else if(mua3==3){

  var multie4 = document.getElementById("3cwav");
  multie4.play();
  }
  }
 
 
  function multitoucher(mua4){

  if(mua4==0){

  var multir1 = document.getElementById("4wav");
  multir1.play();
  }
  else if(mua4==1){

  var multir2 = document.getElementById("4awav");
  multir2.play();
  }
  else if(mua4==2){

  var multir3 = document.getElementById("4bwav");
  multir3.play();
  }
  else if(mua4==3){

  var multir4 = document.getElementById("4cwav");
  multir4.play();
  }
  }
 
 
  function multitouchet(mua5){

  if(mua5==0){

  var multit1 = document.getElementById("5wav");
  multit1.play();
  }
  else if(mua5==1){

  var multit2 = document.getElementById("5awav");
  multit2.play();
  }
  else if(mua5==2){

  var multit3 = document.getElementById("5bwav");
  multit3.play();
  }
  else if(mua5==3){

  var multit4 = document.getElementById("5cwav");
  multit4.play();
  }
  }
 
 
  function multitouchey(mua6){

  if(mua6==0){

  var multiy1 = document.getElementById("6wav");
  multiy1.play();
  }
  else if(mua6==1){

  var multiy2 = document.getElementById("6awav");
  multiy2.play();
  }
  else if(mua6==2){

  var multiy3 = document.getElementById("6bwav");
  multiy3.play();
  }
  else if(mua6==3){

  var multiy4 = document.getElementById("6cwav");
  multiy4.play();
  }
  }
 
   function multitoucheu(mua7){

  if(mua7==0){

  var multiu1 = document.getElementById("7wav");
  multiu1.play();
  }
  else if(mua7==1){

  var multiu2 = document.getElementById("7awav");
  multiu2.play();
  }
  else if(mua7==2){

  var multiu3 = document.getElementById("7bwav");
  multiu3.play();
  }
  else if(mua7==3){

  var multiu4 = document.getElementById("7cwav");
  multiu4.play();
  }
  }

  function multitouchei(mua8){

  if(mua8==0){

  var multii1 = document.getElementById("8wav");
  multii1.play();
  }
  else if(mua8==1){

  var multii2 = document.getElementById("8awav");
  multii2.play();
  }
  else if(mua8==2){

  var multii3 = document.getElementById("8bwav");
  multii3.play();
  }
  else if(mua8==3){

  var multii4 = document.getElementById("8cwav");
  multii4.play();
  }
  }

  function multitoucheo(mua9){

  if(mua9==0){

  var multio1 = document.getElementById("9wav");
  multio1.play();
  }
  else if(mua9==1){

  var multio2 = document.getElementById("9awav");
  multio2.play();
  }
  else if(mua9==2){

  var multio3 = document.getElementById("9bwav");
  multio3.play();
  }
  else if(mua9==3){

  var multio4 = document.getElementById("9cwav");
  multio4.play();
  }
  }

  function multitouchep(mua10){

  if(mua10==0){

  var multip1 = document.getElementById("10wav");
  multip1.play();
  }
  else if(mua10==1){

  var multip2 = document.getElementById("10awav");
  multip2.play();
  }
  else if(mua10==2){

  var multip3 = document.getElementById("10bwav");
  multip3.play();
  }
  else if(mua10==3){

  var multip4 = document.getElementById("10cwav");
  multip4.play();
  }
  }
   function multitoucheq(mua11){

  if(mua11==0){

  var multiq1 = document.getElementById("11wav");
  multiq1.play();
  }
  else if(mua11==1){

  var multiq2 = document.getElementById("11awav");
  multiq2.play();
  }
  else if(mua11==2){

  var multiq3 = document.getElementById("11bwav");
  multiq3.play();
  }
  else if(mua11==3){

  var multiq4 = document.getElementById("11cwav");
  multiq4.play();
  }
  }

  function multitouches(mua12){

  if(mua12==0){

  var multis1 = document.getElementById("12wav");
  multis1.play();
  }
  else if(mua12==1){

  var multis2 = document.getElementById("12awav");
  multis2.play();
  }
  else if(mua12==2){

  var multis3 = document.getElementById("12bwav");
  multis3.play();
  }
  else if(mua12==3){

  var multis4 = document.getElementById("12cwav");
  multis4.play();
  }
  }



function toucheblanche1Press(){

  mua1 = mua1 + 1;
  if(mua1>3){
        mua1 =0;
    }
  multitouchea(mua1);
  }


function toucheblanche3Press(){

      mua3 = mua3 + 1;
  if(mua3>3){
        mua3 =0;
    }
  multitouchee(mua3);
  }  


function toucheblanche5Press(){

      mua5 = mua5 + 1;
  if(mua5>3){
        mua3 =0;
    }
  multitouchet(mua5);
  }


function toucheblanche6Press(){

      mua6 = mua6 + 1;
  if(mua6>3){
        mua6 =0;
    }
  multitouchet(mua6);
  }


function toucheblanche8Press(){

      mua8 = mua8 + 1;
  if(mua8>3){
        mua8 =0;
    }
  multitoucheu(mua8);
  }


function toucheblanche10Press(){

      mua10 = mua10 + 1;
  if(mua10>3){
        mua10 =0;
    }
  multitoucheu(mua10);
  }


function toucheblanche12Press(){

      mua12 = mua12 + 1;
  if(mua12>3){
        mua12 =0;
    }
  multitoucheu(mua12);
  }

 
     


function touchenoire2Press(){

      mua2 = mua2 + 1;
  if(mua2>3){
        mua2 =0;
    }
  multitouchez(mua2);
  }


function touchenoire4Press(){

      mua4 = mua4 + 1;
  if(mua4>3){
        mua4 =0;
    }
  multitoucher(mua4);
  }


function touchenoire7Press(){

      mua7 = mua7 + 1;
  if(mua7>3){
        mua7 =0;
    }
  multitoucheu(mua7);
  }

function touchenoire9Press(){

      mua9 = mua9 + 1;
  if(mua9>3){
        mua9 =0;
    }
  multitoucheu(mua9);
  }


function touchenoire11Press(){

      mua11 = mua11 + 1;
  if(mua11>3){
        mua11 =0;
    }
  multitoucheu(mua11);
  }

       

     
function toucheblancheUp(){
  document.getElementById('montre').innerHTML='';
}
function touchenoireUp(){
  document.getElementById('montre').innerHTML='';
}
   
    </script>      
    <style type="text/css">

@media screen and (min-width: 40.5em) {
  .product-img {
    width: 50%;
    float: left;
  }
}

/*Display 3 per row for medium displays (like mobile phones in landscape or smaller tablets)*/
@media screen and (min-width: 28.75em) {
  .related-products li {
    width: 33.3333333%;
  }
}
/*Display 6 to a row for large displays (like medium tablets and up) */
@media screen and min-width: 40.5em) {
  .related-products li {
    width: 16.6666667%;
  }
}

   


.toucheblanche1{
  position:absolute;
  margin-top:39%;
  height:60%;
  width:13%;
  background:white;
  cursor:pointer;
  transition:all 0.1s ease 0ms;
  -o-transition:all 0.1s ease 0ms;
  -ms-transition:all 0.1s ease 0ms;
  -moz-transition:all 0.1s ease 0ms;
  -webkit-transition:all 0.1s ease 0ms;
}
.toucheblanche1:active{
  -webkit-transform:perspective(1%) rotateX(-10deg);
  transform:perspective(1%) rotateX(-10deg);
  margin-top:40%;
}



.touchenoire{
  position:absolute;
  height:41%;
  width:10%;
  margin-top:0%;
  background:black;
  border-right:1px solid #BBB;
  cursor:pointer;
}

.touchenoire:active{
  -webkit-transform:perspective(1%) rotateX(-6deg);
  transform:perspective(1%) rotateX(-6deg);
  margin-top:4%;
}


   
     body{
background-image: -webkit-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:    -moz-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:     -ms-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:      -o-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:         linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
}
   
   

   

.toucheblanches{
  position:absolute;
  margin-top:0%;
  height:52%;
  width:3.4%;
  background:white;
  margin-left:19.2%;

}


.toucheblanchess{
  position:absolute;
  margin-top:0%;
  height:52%;
  width:7.7%;
  background:white;
  margin-left:33.2%;

}


.toucheblanchesss{
  position:absolute;
  margin-top:0%;
  height:52%;
  width:3.4%;
  background:white;
  margin-left:61.2%;

}


.toucheblanchessss{
  position:absolute;
  margin-top:0%;
  height:52%;
  width:3.4%;
  background:white;
  margin-left:75.2%;

}

.toucheblanchesssss{
  position:absolute;
  margin-top:0%;
  height:52%;
  width:7.8%;
  background:white;
  margin-left:89.2%;

}

.toucheblanches1{
  position:absolute;
  margin-top:0%;
  height:52%;
  width:8.8%;
  background:white;
  margin-left:0%;

}

.toucheblanches2{
  position:absolute;
  margin-top:0%;
  height:52%;
  width:8.8%;
  background:white;
  margin-left:42%;

}


.touchenoire1{
  position:absolute;
  height:11%;
  width:10%;
  margin-top:30%;
  background:black;
  margin-left:9%;

}

.touchenoire2{
  position:absolute;
  height:11%;
  width:10%;
  margin-top:30%;
  background:black;
  margin-left:23%;

}
.touchenoire3{
  position:absolute;
  height:11%;
  width:10%;
  margin-top:30%;
  background:black;
  margin-left:51%;

}
.touchenoire4{
  position:absolute;
  height:11%;
  width:10%;
  margin-top:30%;
  background:black;
  margin-left:65%;

}
.touchenoire5{
  position:absolute;
  height:11%;
  width:10%;
  margin-top:30%;
  background:black;
  margin-left:79%;

}

@media (max-width: 640px) {
    * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
   
    /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

    body {
        width: auto;
        margin: 0;
        padding: 0;
    }
   
    /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }
   
    /* conserver le ratio des images */

    img {
        height: auto;
    }
   
    /* gestion des mots longs */

    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }
   
    code,
    pre,
    samp {
        white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
    }
   
    /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

    element1,
    element2 {
        float: none;
        width: auto;
    }
   
    /* masquer les éléments superflus */

    .hide_mobile {
        display: none !important;
    }
   
    /* Un message personnalisé */

    body:before {
        content: "Version mobile du site";
        display: block;
        text-align: center;
        font-style: italic;
        color: #777;
    }
}

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}






    </style>


 

  </head>
  <body>



<!-- en attente PianoBaul 22 94 10 100 10 0 130 5 5 5 5 5 75 25 25 75  -->


<div><audio id="1awav" src="http://www.letime.net/PianoBaul/1a.wav" preload></audio></div>
<div><audio id="1bwav" src="http://www.letime.net/PianoBaul/1b.wav" preload></audio></div>
<div><audio id="1cwav" src="http://www.letime.net/PianoBaul/1c.wav" preload></audio></div>
<div><audio id="2awav" src="http://www.letime.net/PianoBaul/2a.wav" preload></audio></div>
<div><audio id="2bwav" src="http://www.letime.net/PianoBaul/2b.wav" preload></audio></div>
<div><audio id="2cwav" src="http://www.letime.net/PianoBaul/2c.wav" preload></audio></div>
<div><audio id="3awav" src="http://www.letime.net/PianoBaul/3a.wav" preload></audio></div>
<div><audio id="3bwav" src="http://www.letime.net/PianoBaul/3b.wav" preload></audio></div>
<div><audio id="3cwav" src="http://www.letime.net/PianoBaul/3c.wav" preload></audio></div>
<div><audio id="4awav" src="http://www.letime.net/PianoBaul/4a.wav" preload></audio></div>
<div><audio id="4bwav" src="http://www.letime.net/PianoBaul/4b.wav" preload></audio></div>
<div><audio id="4cwav" src="http://www.letime.net/PianoBaul/4c.wav" preload></audio></div>
<div><audio id="5awav" src="http://www.letime.net/PianoBaul/5a.wav" preload></audio></div>
<div><audio id="5bwav" src="http://www.letime.net/PianoBaul/5b.wav" preload></audio></div>
<div><audio id="5cwav" src="http://www.letime.net/PianoBaul/5c.wav" preload></audio></div>
<div><audio id="6awav" src="http://www.letime.net/PianoBaul/6a.wav" preload></audio></div>
<div><audio id="6bwav" src="http://www.letime.net/PianoBaul/6b.wav" preload></audio></div>
<div><audio id="6cwav" src="http://www.letime.net/PianoBaul/6c.wav" preload></audio></div>
<div><audio id="7awav" src="http://www.letime.net/PianoBaul/7a.wav" preload></audio></div>
<div><audio id="7bwav" src="http://www.letime.net/PianoBaul/7b.wav" preload></audio></div>
<div><audio id="7cwav" src="http://www.letime.net/PianoBaul/7c.wav" preload></audio></div>
<div><audio id="8awav" src="http://www.letime.net/PianoBaul/8a.wav" preload></audio></div>
<div><audio id="8bwav" src="http://www.letime.net/PianoBaul/8b.wav" preload></audio></div>
<div><audio id="8cwav" src="http://www.letime.net/PianoBaul/8c.wav" preload></audio></div>
<div><audio id="9awav" src="http://www.letime.net/PianoBaul/9a.wav" preload></audio></div>
<div><audio id="9bwav" src="http://www.letime.net/PianoBaul/9b.wav" preload></audio></div>
<div><audio id="9cwav" src="http://www.letime.net/PianoBaul/9c.wav" preload></audio></div>
<div><audio id="10awav" src="http://www.letime.net/PianoBaul/10a.wav" preload></audio></div>
<div><audio id="10bwav" src="http://www.letime.net/PianoBaul/10b.wav" preload></audio></div>
<div><audio id="10cwav" src="http://www.letime.net/PianoBaul/10c.wav" preload></audio></div>
<div><audio id="11awav" src="http://www.letime.net/PianoBaul/11a.wav" preload></audio></div>
<div><audio id="11bwav" src="http://www.letime.net/PianoBaul/11b.wav" preload></audio></div>
<div><audio id="11cwav" src="http://www.letime.net/PianoBaul/11c.wav" preload></audio></div>
<div><audio id="12awav" src="http://www.letime.net/PianoBaul/12a.wav" preload></audio></div>
<div><audio id="12bwav" src="http://www.letime.net/PianoBaul/12b.wav" preload></audio></div>
<div><audio id="12cwav" src="http://www.letime.net/PianoBaul/12c.wav" preload></audio></div>


           <div class="toucheblanches1"></div>
           <div class="toucheblanches2"></div>
           <div class="toucheblanches"></div>
     <div class="toucheblanchess"></div>
           <div class="toucheblanchesss"></div>
           <div class="toucheblanchessss"></div>
           <div class="toucheblanchesssss"></div>
           <div class="touchenoire1"></div>
           <div class="touchenoire2"></div>
           <div class="touchenoire3"></div>
           <div class="touchenoire4"></div>
           <div class="touchenoire5"></div>

      <!-- DO gamme 1 -->
      <div class="toucheblanche1" onMouseDown="toucheblanche1Press();" onMouseUp="toucheblancheUp();" style="margin-left:0px;"><audio id="1wav" src="http://www.letime.net/PianoBaul/1.wav" preload></audio></div>
      <!-- RE gamme 1 -->
      <div class="toucheblanche1" onMouseDown="toucheblanche3Press();" onMouseUp="toucheblancheUp();" style="margin-left:14%;"><audio id="3wav" src="http://www.letime.net/PianoBaul/3.wav" preload></audio></div>
      <!-- MI gamme 1 -->
      <div class="toucheblanche1" onMouseDown="toucheblanche5Press();" onMouseUp="toucheblancheUp();" style="margin-left:28%;"><audio id="5wav" src="http://www.letime.net/PianoBaul/5.wav" preload></audio></div>
      <!-- FA gamme 1 -->
      <div class="toucheblanche1" onMouseDown="toucheblanche6Press();" onMouseUp="toucheblancheUp();" style="margin-left:42%;"><audio id="6wav" src="http://www.letime.net/PianoBaul/6.wav" preload></audio></div>
      <!-- SOL gamme 1 -->
      <div class="toucheblanche1" onMouseDown="toucheblanche8Press();" onMouseUp="toucheblancheUp();" style="margin-left:56%;"><audio id="8wav" src="http://www.letime.net/PianoBaul/8.wav" preload></audio></div>
      <!-- LA gamme 1 -->
      <div class="toucheblanche1" onMouseDown="toucheblanche10Press();" onMouseUp="toucheblancheUp();" style="margin-left:70%;"><audio id="10wav" src="http://www.letime.net/PianoBaul/10.wav" preload></audio></div>
      <!-- SI gamme 1 -->
      <div class="toucheblanche1" onMouseDown="toucheblanche12Press();" onMouseUp="toucheblancheUp();" style="margin-left:84%;"><audio id="12wav" src="http://www.letime.net/PianoBaul/12.wav" preload></audio></div>

     
      <!-- placer les touches noires apres pour etre au dessus des blanches -->
      <!-- DO+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoire2Press();" onMouseUp="touchenoireUp();" style="margin-left:9%;"><audio id="2wav" src="http://www.letime.net/PianoBaul/2.wav" preload></audio></div>    

      <!-- RE+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoire4Press();" onMouseUp="touchenoireUp();" style="margin-left:23%;"><audio id="4wav" src="http://www.letime.net/PianoBaul/4.wav" preload></audio></div>
      <!-- FA+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoire7Press();" onMouseUp="touchenoireUp();" style="margin-left:51%;"><audio id="7wav" src="http://www.letime.net/PianoBaul/7.wav" preload></audio></div>
      <!-- SOL+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoire9Press();" onMouseUp="touchenoireUp();" style="margin-left:65%;"><audio id="9wav" src="http://www.letime.net/PianoBaul/9.wav" preload></audio></div>
      <!-- LA+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoire11Press();" onMouseUp="touchenoireUp();" style="margin-left:79%;"><audio id="11wav" src="http://www.letime.net/PianoBaul/11.wav" preload></audio></div>
      <!-- DO+ gamme 2 -->




  </body>
</html>

#19 Re : Suivi du Wiki et des Projets Git » wiki SequenBaul » 28-05-2015 19:28:31

Bonjour,

Afin d'avoir un générateur léger, j'ai repris pour la version HTML5, la version lmfab.
Il m'a suffit de supprimer le clavier et les include Qt, l'application génère instantanément les fichiers audio.

Il ne reste me plus qu'à lier les boutons pour changer les valeurs dans PianoBaul et lancer le générateur de son.
je m'occuperai de la version à télécharger après, mais je sais déjà que ce sera facile à faire (même technique que pour lmfab).

Avant de placer l'application sur le serveur, je me pose toutefois la question.
Est-ce que de mettre une application qui risque d'être très sollicité, ne risque pas de perturber le serveur ?
Est-ce que je ne ferait pas mieux de mettre les sons déjà générés, afin d'éviter les "rm" et une génération à chaque nouvelle demande de piano ?

Si j'avais un serveur dédiée à l'application, j'aurai pas d'hésitation, mais actuellement je n'ai que le serveur de mon site.
Si quelqu'un a un serveur pour l'application, je suis preneur. En attendant, je vais placer des fichiers déjà générés (ceux des lmfab).

Pour adapter un lmfab à pianoBaulhtml5, il suffit de remplacer le main.cpp par celui ci-dessous, et aussi corriger la structure pour ajouter 10 touches

#include "convertisseur.h"
#include "Adnforme.h"
#include "fronts.h"
#include "jo.h"
#ifdef WIN32
#include <windows.h>
#else
#include <unistd.h>
#endif
/* Imaginer et creer par Abadie joris  g++ main.cpp Adnforme.cpp fronts.cpp convertisseur.cpp -o PianoBaulhtml*/


int main(int argc, char *argv[])
{
  char nomfichierwav[32];
  char nomfichierwavacte[40];
  char lettresclaviers[] = {97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123};
  char c;
        for(int i=0; i<26; i++)
         {
    c = lettresclaviers[i];
    for(int n=1; n<6; n++)
     {
  snprintf(nomfichierwav, 32, "%c%d.wav", c, n);
  FILE * fichierwav;
  if (!(fichierwav=fopen(nomfichierwav, "r")))
  // sinon, on le génère
   {
if (n==1)
  {
    genereFichierJo(c);
    conversionJoWav(c,n);
  }
else
  {    
  snprintf(nomfichierwavacte, 40, "sox %c1.wav %c%d.wav", c, c, n);
system(nomfichierwavacte);
  }
   }
  else
   fclose(fichierwav);
}
}

   return 0;
}

 


Cordialement

#20 Re : Suivi du Wiki et des Projets Git » wiki SequenBaul » 27-05-2015 22:53:53

Bonjour,
La partie graphique de PianoBaul HTML5 est presque finie.
La question qui se pose maintenant est :
Est-ce qu'il faut placer quelques cas particulier de la BAUL dans l'application ou est-ce qu'il faut laisser la BAUL générée les 256 puissance 16 cas de pianos possibles ?
Si c'est la première solution qui est choisit, cela va impliquer un poids énorme en fichier audio.
Si c'est la deuxième solution qui est choisit, cela va impliquer qu'un utilisateur peut involontairement ou volontairement écrouler le serveur en demandant de générer des fichiers audio énormes.
Je pense qu'aucune des 2 solutions est bonne. J'envisage peut-être de brider la BAUL à quelques cas particuliers. En fait se serait bien le serveur qui générerait les sons, mais les imput possibles (les 16 octets) seraient prédéfini. Telle forme de marteau acoustique, ou telle forme de licorne.
Ajouter en téléchargement à cette technique une annexe avec une version de PianoBaul HTML5 non bridé pour les tux

A l'instant la question est : comment sélectionner dans la multitude ?

Cordialement

#21 Re : Suivi du Wiki et des Projets Git » wiki SequenBaul » 22-05-2015 17:59:28

Merci pour la réponse.

Le classement peut avoir une multitude de formes, la base est de 16 facteurs, mais rien n'impose de les utiliser tous.
La démarche est d'essayer de décrire les choses le plus simplement possible et même peut être, entamer plusieurs approches pour faire une sélection empirique finale.

Si l'asso de DF accepte, je pense que PianoBaul pourrai être installer sur le site DF, autrement j'ai un hébergement chez OVH sur lequel j'ai déjà placé plusieurs applications audio.

J'ai placé le code en provisoire sur cette page, il est à noté que si les sons sont parfait dans PianoBaul qui utilise sox, ici ils sont déformé car il n'y a pas le temps vide de mise en mémoire après le son

http://letime.net/PianoBaul/

Le code qui prépare le multitouche est

<!DOCTYPE html>
<html>
<head>  
<title>PianoBaul en HTML5</title>
<meta charset="UTF-8" />
<script type="text/javascript">

       var mua1 = 0;
       var mua2 = 0;
       var mua3 = 0;
       var mua4 = 0;
       var mua5 = 0;
       var mua6 = 0;
       var mua7 = 0;
       var mua8 = 0;
       var mua9 = 0;
       var mua10 = 0;
       var mua11 = 0;
       var mua12 = 0;
       var mua13 = 0;
       var mua14 = 0;
       var mua15 = 0;
       var mua16 = 0;
       var mua17 = 0;
       var mua18 = 0;
       var mua19 = 0;
       var mua20 = 0;
       var mua21 = 0;
       var mua22 = 0;
       var mua23 = 0;
       var mua24 = 0;
       var mua25 = 0;
       var mua26 = 0;
       var mua27 = 0;
       var mua28 = 0;
       var mua29 = 0;
       var mua30 = 0;
       var mua31 = 0;
       var mua32 = 0;
       var mua33 = 0;
       var mua34 = 0;
       var mua35 = 0;
       var mua36 = 0;
     

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Should do nothing if the key event was already consumed.
  }

  switch (event.key) {
      case "a":
  mua1 = mua1 + 1;
  if(mua1>3){
        mua1 =0;
    }
  multitouchea(mua1);
    break;
   
      case "z":
      mua2 = mua2 + 1;
  if(mua2>3){
        mua2 =0;
    }
  multitouchez(mua2);
    break;
   
      case "e":
      mua3 = mua3 + 1;
  if(mua3>3){
        mua3 =0;
    }
  multitouchee(mua3);
    break;
   
      case "r":
      mua4 = mua4 + 1;
  if(mua4>3){
        mua3 =0;
    }
  multitoucher(mua4);
    break;
   
      case "t":
      mua5 = mua5 + 1;
  if(mua5>3){
        mua3 =0;
    }
  multitouchet(mua5);
    break;
   
      case "y":
      mua6 = mua6 + 1;
  if(mua6>3){
        mua6 =0;
    }
  multitouchet(mua6);
    break;
   
      case "u":
      mua7 = mua7 + 1;
  if(mua7>3){
        mua7 =0;
    }
  multitoucheu(mua7);
    break;
   
      case "i":
      mua8 = mua8 + 1;
  if(mua8>3){
        mua8 =0;
    }
  multitouchei(mua8);
    break;
   
      case "o":
      mua9 = mua9 + 1;
  if(mua9>3){
        mua9 =0;
    }
  multitoucheo(mua9);
    break;
   
      case "p":
      mua10 = mua10 + 1;
  if(mua10>3){
        mua10 =0;
    }
  multitouchep(mua10);
    break;
   
      case "q":
      mua11 = mua11 + 1;
  if(mua11>3){
        mua11 =0;
    }
  multitoucheq(mua11);
    break;
   
      case "s":
      mua12 = mua12 + 1;
  if(mua12>3){
        mua12 =0;
    }
  multitouches(mua12);
    break;
   
      case "d":
      mua13 = mua13 + 1;
  if(mua13>3){
        mua13 =0;
    }
  multitouched(mua13);
    break;
   
      case "f":
      mua14 = mua14 + 1;
  if(mua14>3){
        mua14 =0;
    }
  multitouchef(mua14);
    break;
   
      case "g":
      mua15 = mua15 + 1;
  if(mua15>3){
        mua15 =0;
    }
  multitoucheg(mua15);
    break;
   
      case "h":
      mua16 = mua16 + 1;
  if(mua16>3){
        mua16 =0;
    }
  multitoucheh(mua16);
    break;
   
      case "j":
      mua17 = mua17 + 1;
  if(mua17>3){
        mua17 =0;
    }
  multitouchej(mua17);
    break;
   
      case "k":
      mua18 = mua18 + 1;
  if(mua18>3){
        mua18 =0;
    }
  multitouchek(mua18);
    break;
   
      case "l":
      mua19 = mua19 + 1;
  if(mua19>3){
        mua19 =0;
    }
  multitouchel(mua19);
    break;
   
      case "m":
      mua20 = mua20 + 1;
  if(mua20>3){
        mua20 =0;
    }
  multitouchem(mua20);
    break;
   
      case "w":
      mua21 = mua21 + 1;
  if(mua21>3){
        mua21 =0;
    }
  multitouchew(mua21);
    break;
   
      case "x":
      mua22 = mua22 + 1;
  if(mua22>3){
        mua22 =0;
    }
  multitouchex(mua22);
    break;
   
      case "c":
      mua23 = mua23 + 1;
  if(mua23>3){
        mua23 =0;
    }
  multitouchec(mua23);
    break;
   
      case "v":
      mua24 = mua24 + 1;
  if(mua24>3){
        mua24 =0;
    }
  multitouchev(mua24);
    break;
   
      case "b":
      mua25 = mua25 + 1;
  if(mua25>3){
        mua25 =0;
    }
  multitoucheb(mua25);
    break;
   
      case "n":
      mua26 = mua26 + 1;
  if(mua26>3){
        mua26 =0;
    }
  multitouchen(mua26);
    break;
   
      case "0":
      mua27 = mua27 + 1;
  if(mua27>3){
        mua27 =0;
    }
  multitouche0(mua27);
    break;
   
      case "1":
      mua28 = mua28 + 1;
  if(mua28>3){
        mua28 =0;
    }
  multitouche1(mua28);
    break;
   
      case "2":
      mua29 = mua29 + 1;
  if(mua29>3){
        mua29 =0;
    }
  multitouche2(mua29);
    break;
   
      case "3":
      mua30 = mua30 + 1;
  if(mua30>3){
        mua30 =0;
    }
  multitouche3(mua30);
    break;
   
      case "4":
      mua31 = mua31 + 1;
  if(mua31>3){
        mua31 =0;
    }
  multitouche4(mua31);
    break;
   
      case "5":
      mua32 = mua32 + 1;
  if(mua32>3){
        mua32 =0;
    }
  multitouche5(mua32);
    break;
   
      case "6":
      mua33 = mua33 + 1;
  if(mua33>3){
        mua33 =0;
    }
  multitouche6(mua33);
    break;
   
      case "7":
      mua34 = mua34 + 1;
  if(mua34>3){
        mua34 =0;
    }
  multitouche7(mua34);
    break;
   
      case "8":
      mua35 = mua35 + 1;
  if(mua35>3){
        mua35 =0;
    }
  multitouche8(mua35);
    break;
   
      case "9":
      mua36 = mua36 + 1;
  if(mua36>3){
        mua36 =0;
    }
  multitouche9(mua36);
    break;


    default:
 
      return; // Quit when this doesn't handle the key event.
  }

  // Consume the event for suppressing "double action".
  event.preventDefault();
}, true);



 
  function multitouchea(mua1){

  if(mua1==0){

  var multia1 = document.getElementById("1wav");
  multia1.play();
  }
  else if(mua1==1){

  var multia2 = document.getElementById("1awav");
  multia2.play();
  }
  else if(mua1==2){

  var multia3 = document.getElementById("1bwav");
  multia3.play();
  }
  else if(mua1==3){

  var multia4 = document.getElementById("1cwav");
  multia4.play();
  }
  }

  function multitouchez(mua2){

  if(mua2==0){

  var multiz1 = document.getElementById("2wav");
  multiz1.play();
  }
  else if(mua2==1){

  var multiz2 = document.getElementById("2awav");
  multiz2.play();
  }
  else if(mua2==2){

  var multiz3 = document.getElementById("2bwav");
  multiz3.play();
  }
  else if(mua2==3){

  var multiz4 = document.getElementById("2cwav");
  multiz4.play();
  }
  }

  function multitouchee(mua3){

  if(mua3==0){

  var multie1 = document.getElementById("3wav");
  multie1.play();
  }
  else if(mua3==1){

  var multie2 = document.getElementById("3awav");
  multie2.play();
  }
  else if(mua3==2){

  var multie3 = document.getElementById("3bwav");
  multie3.play();
  }
  else if(mua3==3){

  var multie4 = document.getElementById("3cwav");
  multie4.play();
  }
  }
 
 
  function multitoucher(mua4){

  if(mua4==0){

  var multir1 = document.getElementById("4wav");
  multir1.play();
  }
  else if(mua4==1){

  var multir2 = document.getElementById("4awav");
  multir2.play();
  }
  else if(mua4==2){

  var multir3 = document.getElementById("4bwav");
  multir3.play();
  }
  else if(mua4==3){

  var multir4 = document.getElementById("4cwav");
  multir4.play();
  }
  }
 
 
  function multitouchet(mua5){

  if(mua5==0){

  var multit1 = document.getElementById("5wav");
  multit1.play();
  }
  else if(mua5==1){

  var multit2 = document.getElementById("5awav");
  multit2.play();
  }
  else if(mua5==2){

  var multit3 = document.getElementById("5bwav");
  multit3.play();
  }
  else if(mua5==3){

  var multit4 = document.getElementById("5cwav");
  multit4.play();
  }
  }
 
 
  function multitouchey(mua6){

  if(mua6==0){

  var multiy1 = document.getElementById("6wav");
  multiy1.play();
  }
  else if(mua6==1){

  var multiy2 = document.getElementById("6awav");
  multiy2.play();
  }
  else if(mua6==2){

  var multiy3 = document.getElementById("6bwav");
  multiy3.play();
  }
  else if(mua6==3){

  var multiy4 = document.getElementById("6cwav");
  multiy4.play();
  }
  }
 
   function multitoucheu(mua7){

  if(mua7==0){

  var multiu1 = document.getElementById("7wav");
  multiu1.play();
  }
  else if(mua7==1){

  var multiu2 = document.getElementById("7awav");
  multiu2.play();
  }
  else if(mua7==2){

  var multiu3 = document.getElementById("7bwav");
  multiu3.play();
  }
  else if(mua7==3){

  var multiu4 = document.getElementById("7cwav");
  multiu4.play();
  }
  }

  function multitouchei(mua8){

  if(mua8==0){

  var multii1 = document.getElementById("8wav");
  multii1.play();
  }
  else if(mua8==1){

  var multii2 = document.getElementById("8awav");
  multii2.play();
  }
  else if(mua8==2){

  var multii3 = document.getElementById("8bwav");
  multii3.play();
  }
  else if(mua8==3){

  var multii4 = document.getElementById("8cwav");
  multii4.play();
  }
  }

  function multitoucheo(mua9){

  if(mua9==0){

  var multio1 = document.getElementById("9wav");
  multio1.play();
  }
  else if(mua9==1){

  var multio2 = document.getElementById("9awav");
  multio2.play();
  }
  else if(mua9==2){

  var multio3 = document.getElementById("9bwav");
  multio3.play();
  }
  else if(mua9==3){

  var multio4 = document.getElementById("9cwav");
  multio4.play();
  }
  }

  function multitouchep(mua10){

  if(mua10==0){

  var multip1 = document.getElementById("10wav");
  multip1.play();
  }
  else if(mua10==1){

  var multip2 = document.getElementById("10awav");
  multip2.play();
  }
  else if(mua10==2){

  var multip3 = document.getElementById("10bwav");
  multip3.play();
  }
  else if(mua10==3){

  var multip4 = document.getElementById("10cwav");
  multip4.play();
  }
  }
   function multitoucheq(mua11){

  if(mua11==0){

  var multiq1 = document.getElementById("11wav");
  multiq1.play();
  }
  else if(mua11==1){

  var multiq2 = document.getElementById("11awav");
  multiq2.play();
  }
  else if(mua11==2){

  var multiq3 = document.getElementById("11bwav");
  multiq3.play();
  }
  else if(mua11==3){

  var multiq4 = document.getElementById("11cwav");
  multiq4.play();
  }
  }

  function multitouches(mua12){

  if(mua12==0){

  var multis1 = document.getElementById("12wav");
  multis1.play();
  }
  else if(mua12==1){

  var multis2 = document.getElementById("12awav");
  multis2.play();
  }
  else if(mua12==2){

  var multis3 = document.getElementById("12bwav");
  multis3.play();
  }
  else if(mua12==3){

  var multis4 = document.getElementById("12cwav");
  multis4.play();
  }
  }

  function multitouched(mua13){

  if(mua13==0){

  var multid1 = document.getElementById("13wav");
  multid1.play();
  }
  else if(mua13==1){

  var multid2 = document.getElementById("13awav");
  multid2.play();
  }
  else if(mua13==2){

  var multid3 = document.getElementById("13bwav");
  multid3.play();
  }
  else if(mua13==3){

  var multid4 = document.getElementById("13cwav");
  multid4.play();
  }
  }

  function multitouchef(mua14){

  if(mua14==0){

  var multif1 = document.getElementById("14wav");
  multif1.play();
  }
  else if(mua14==1){

  var multif2 = document.getElementById("14awav");
  multif2.play();
  }
  else if(mua14==2){

  var multif3 = document.getElementById("14bwav");
  multif3.play();
  }
  else if(mua14==3){

  var multif4 = document.getElementById("14cwav");
  multif4.play();
  }
  }

  function multitoucheg(mua15){

  if(mua15==0){

  var multig1 = document.getElementById("15wav");
  multig1.play();
  }
  else if(mua15==1){

  var multig2 = document.getElementById("15awav");
  multig2.play();
  }
  else if(mua15==2){

  var multig3 = document.getElementById("15bwav");
  multig3.play();
  }
  else if(mua15==3){

  var multig4 = document.getElementById("15cwav");
  multig4.play();
  }
  }

  function multitoucheh(mua16){

  if(mua16==0){

  var multih1 = document.getElementById("16wav");
  multih1.play();
  }
  else if(mua16==1){

  var multih2 = document.getElementById("16awav");
  multih2.play();
  }
  else if(mua16==2){

  var multih3 = document.getElementById("16bwav");
  multih3.play();
  }
  else if(mua16==3){

  var multih4 = document.getElementById("16cwav");
  multih4.play();
  }
  }

  function multitouchej(mua17){

  if(mua17==0){

  var multij1 = document.getElementById("17wav");
  multij1.play();
  }
  else if(mua17==1){

  var multij2 = document.getElementById("17awav");
  multij2.play();
  }
  else if(mua17==2){

  var multij3 = document.getElementById("17bwav");
  multij3.play();
  }
  else if(mua17==3){

  var multij4 = document.getElementById("17cwav");
  multij4.play();
  }
  }

  function multitouchek(mua18){

  if(mua18==0){

  var multik1 = document.getElementById("18wav");
  multik1.play();
  }
  else if(mua18==1){

  var multik2 = document.getElementById("18awav");
  multik2.play();
  }
  else if(mua18==2){

  var multik3 = document.getElementById("18bwav");
  multik3.play();
  }
  else if(mua18==3){

  var multik4 = document.getElementById("18cwav");
  multik4.play();
  }
  }

  function multitouchel(mua19){

  if(mua19==0){

  var multil1 = document.getElementById("19wav");
  multil1.play();
  }
  else if(mua19==1){

  var multil2 = document.getElementById("19awav");
  multil2.play();
  }
  else if(mua19==2){

  var multil3 = document.getElementById("19bwav");
  multil3.play();
  }
  else if(mua19==3){

  var multil4 = document.getElementById("19cwav");
  multil4.play();
  }
  }

  function multitouchem(mua20){

  if(mua20==0){

  var multim1 = document.getElementById("20wav");
  multim1.play();
  }
  else if(mua20==1){

  var multim2 = document.getElementById("20awav");
  multim2.play();
  }
  else if(mua20==2){

  var multim3 = document.getElementById("20bwav");
  multim3.play();
  }
  else if(mua20==3){

  var multim4 = document.getElementById("20cwav");
  multim4.play();
  }
  }

  function multitouchew(mua21){

  if(mua21==0){

  var multiw1 = document.getElementById("21wav");
  multiw1.play();
  }
  else if(mua21==1){

  var multiw2 = document.getElementById("21awav");
  multiw2.play();
  }
  else if(mua21==2){

  var multiw3 = document.getElementById("21bwav");
  multiw3.play();
  }
  else if(mua21==3){

  var multiw4 = document.getElementById("21cwav");
  multiw4.play();
  }
  }

  function multitouchex(mua22){

  if(mua22==0){

  var multix1 = document.getElementById("22wav");
  multix1.play();
  }
  else if(mua22==1){

  var multix2 = document.getElementById("22awav");
  multix2.play();
  }
  else if(mua22==2){

  var multix3 = document.getElementById("22bwav");
  multix3.play();
  }
  else if(mua22==3){

  var multix4 = document.getElementById("22cwav");
  multix4.play();
  }
  }

  function multitouchec(mua23){

  if(mua23==0){

  var multic1 = document.getElementById("23wav");
  multic1.play();
  }
  else if(mua23==1){

  var multic2 = document.getElementById("23awav");
  multic2.play();
  }
  else if(mua23==2){

  var multic3 = document.getElementById("23bwav");
  multic3.play();
  }
  else if(mua23==3){

  var multic4 = document.getElementById("23cwav");
  multic4.play();
  }
  }

  function multitouchev(mua24){

  if(mua24==0){

  var multiv1 = document.getElementById("24wav");
  multiv1.play();
  }
  else if(mua24==1){

  var multiv2 = document.getElementById("24awav");
  multiv2.play();
  }
  else if(mua24==2){

  var multiv3 = document.getElementById("24bwav");
  multiv3.play();
  }
  else if(mua24==3){

  var multiv4 = document.getElementById("24cwav");
  multiv4.play();
  }
  }

  function multitoucheb(mua25){

  if(mua25==0){

  var multib1 = document.getElementById("25wav");
  multib1.play();
  }
  else if(mua25==1){

  var multib2 = document.getElementById("25awav");
  multib2.play();
  }
  else if(mua25==2){

  var multib3 = document.getElementById("25bwav");
  multib3.play();
  }
  else if(mua25==3){

  var multib4 = document.getElementById("25cwav");
  multib4.play();
  }
  }

  function multitouchen(mua26){

  if(mua26==0){

  var multin1 = document.getElementById("26wav");
  multin1.play();
  }
  else if(mua26==1){

  var multin2 = document.getElementById("26awav");
  multin2.play();
  }
  else if(mua26==2){

  var multin3 = document.getElementById("26bwav");
  multin3.play();
  }
  else if(mua26==3){

  var multin4 = document.getElementById("26cwav");
  multin4.play();
  }
  }

  function multitouche0(mua27){

  if(mua27==0){

  var multi01 = document.getElementById("27wav");
  multi01.play();
  }
  else if(mua27==1){

  var multi02 = document.getElementById("27awav");
  multi02.play();
  }
  else if(mua27==2){

  var multi03 = document.getElementById("27bwav");
  multi03.play();
  }
  else if(mua27==3){

  var multi04 = document.getElementById("27cwav");
  multi04.play();
  }
  }

  function multitouche1(mua28){

  if(mua28==0){

  var multi11 = document.getElementById("28wav");
  multi11.play();
  }
  else if(mua28==1){

  var multi12 = document.getElementById("28awav");
  multi12.play();
  }
  else if(mua28==2){

  var multi13 = document.getElementById("28bwav");
  multi13.play();
  }
  else if(mua28==3){

  var multi14 = document.getElementById("28cwav");
  multi14.play();
  }
  }

  function multitouche2(mua29){

  if(mua29==0){

  var multi21 = document.getElementById("29wav");
  multi21.play();
  }
  else if(mua29==1){

  var multi22 = document.getElementById("29awav");
  multi22.play();
  }
  else if(mua29==2){

  var multi23 = document.getElementById("29bwav");
  multi23.play();
  }
  else if(mua29==3){

  var multi24 = document.getElementById("29cwav");
  multi24.play();
  }
  }

  function multitouche3(mua30){

  if(mua30==0){

  var multi31 = document.getElementById("30wav");
  multi31.play();
  }
  else if(mua30==1){

  var multi32 = document.getElementById("30awav");
  multi32.play();
  }
  else if(mua30==2){

  var multi33 = document.getElementById("30bwav");
  multi33.play();
  }
  else if(mua30==3){

  var multi34 = document.getElementById("30cwav");
  multi34.play();
  }
  }

  function multitouche4(mua31){

  if(mua31==0){

  var multi41 = document.getElementById("31wav");
  multi41.play();
  }
  else if(mua31==1){

  var multi42 = document.getElementById("31awav");
  multi42.play();
  }
  else if(mua31==2){

  var multi43 = document.getElementById("31bwav");
  multi43.play();
  }
  else if(mua31==3){

  var multi44 = document.getElementById("31cwav");
  multi44.play();
  }
  }

  function multitouche5(mua32){

  if(mua32==0){

  var multi51 = document.getElementById("32wav");
  multi51.play();
  }
  else if(mua32==1){

  var multi52 = document.getElementById("32awav");
  multi52.play();
  }
  else if(mua32==2){

  var multi53 = document.getElementById("32bwav");
  multi53.play();
  }
  else if(mua32==3){

  var multi54 = document.getElementById("32cwav");
  multi54.play();
  }
  }

  function multitouche6(mua33){

  if(mua33==0){

  var multi61 = document.getElementById("33wav");
  multi61.play();
  }
  else if(mua33==1){

  var multi62 = document.getElementById("33awav");
  multi62.play();
  }
  else if(mua33==2){

  var multi63 = document.getElementById("33bwav");
  multi63.play();
  }
  else if(mua33==3){

  var multi64 = document.getElementById("33cwav");
  multi64.play();
  }
  }

  function multitouche7(mua34){

  if(mua34==0){

  var multi71 = document.getElementById("43wav");
  multi71.play();
  }
  else if(mua34==1){

  var multi72 = document.getElementById("43awav");
  multi72.play();
  }
  else if(mua34==2){

  var multi73 = document.getElementById("43bwav");
  multi73.play();
  }
  else if(mua34==3){

  var multi74 = document.getElementById("43cwav");
  multi74.play();
  }
  }

  function multitouche8(mua35){

  if(mua35==0){

  var multi81 = document.getElementById("35wav");
  multi81.play();
  }
  else if(mua35==1){

  var multi82 = document.getElementById("35awav");
  multi82.play();
  }
  else if(mua35==2){

  var multi83 = document.getElementById("35bwav");
  multi83.play();
  }
  else if(mua35==3){

  var multi84 = document.getElementById("35cwav");
  multi84.play();
  }
  }

  function multitouche9(mua36){

  if(mua36==0){

  var multi91 = document.getElementById("36wav");
  multi91.play();
  }
  else if(mua36==1){

  var multi92 = document.getElementById("36awav");
  multi92.play();
  }
  else if(mua36==2){

  var multi93 = document.getElementById("36bwav");
  multi93.play();
  }
  else if(mua36==3){

  var multi94 = document.getElementById("36cwav");
  multi94.play();
  }
  }


function toucheblanche1Press(){
  document.getElementById('montre').innerHTML='C';
  var baa1 = document.getElementById("1wav");
  baa1.play();
  }
function toucheblanche13Press(){
  document.getElementById('montre').innerHTML='C';
  var baa13 = document.getElementById("13wav");
  baa13.play();
  }
function toucheblanche25Press(){
  document.getElementById('montre').innerHTML='C';
  var baa25 = document.getElementById("25wav");
  baa25.play();
  }
function toucheblanche3Press(){
  document.getElementById('montre').innerHTML='D';
  var baa3 = document.getElementById("3wav");
  baa3.play();
  }  
function toucheblanche15Press(){
  document.getElementById('montre').innerHTML='D';
  var baa15 = document.getElementById("15wav");
  baa15.play();
  }  
function toucheblanche27Press(){
  document.getElementById('montre').innerHTML='D';
  var baa27 = document.getElementById("27wav");
  baa27.play();
  }
function toucheblanche5Press(){
  document.getElementById('montre').innerHTML='E';
  var baa5 = document.getElementById("5wav");
  baa5.play();
  }
function toucheblanche17Press(){
  document.getElementById('montre').innerHTML='E';
  var baa17 = document.getElementById("17wav");
  baa17.play();
  }
function toucheblanche29Press(){
  document.getElementById('montre').innerHTML='E';
  var baa29 = document.getElementById("29wav");
  baa29.play();
  }
function toucheblanche6Press(){
  document.getElementById('montre').innerHTML='F';
  var baa6 = document.getElementById("6wav");
  baa6.play();
  }
function toucheblanche18Press(){
  document.getElementById('montre').innerHTML='F';
  var baa18 = document.getElementById("18wav");
  baa18.play();
  }  
function toucheblanche30Press(){
  document.getElementById('montre').innerHTML='F';
  var baa30 = document.getElementById("30wav");
  baa30.play();
  }
function toucheblanche8Press(){
  document.getElementById('montre').innerHTML='G';
  var baa8 = document.getElementById("8wav");
  baa8.play();
  }
function toucheblanche20Press(){
  document.getElementById('montre').innerHTML='G';
  var baa20 = document.getElementById("20wav");
  baa20.play();
  }
function toucheblanche32Press(){
  document.getElementById('montre').innerHTML='G';
  var baa32 = document.getElementById("32wav");
  baa32.play();
  }
function toucheblanche10Press(){
  document.getElementById('montre').innerHTML='A';
  var baa10 = document.getElementById("10wav");
  baa10.play();
  }
function toucheblanche22Press(){
  document.getElementById('montre').innerHTML='A';
  var baa22 = document.getElementById("22wav");
  baa22.play();
  }
function toucheblanche34Press(){
  document.getElementById('montre').innerHTML='A';
  var baa34 = document.getElementById("34wav");
  baa34.play();
  }
function toucheblanche12Press(){
  document.getElementById('montre').innerHTML='B';
  var baa12 = document.getElementById("12wav");
  baa12.play();
  }
function toucheblanche24Press(){
  document.getElementById('montre').innerHTML='B';
  var baa24 = document.getElementById("24wav");
  baa24.play();
  }
function toucheblanche36Press(){
  document.getElementById('montre').innerHTML='B';
  var baa36 = document.getElementById("36wav");
  baa36.play();
  }    
     


function touchenoire2Press(){
  document.getElementById('montre').innerHTML='C+';
  var baa2 = document.getElementById("2wav");
  baa2.play();
  }
function touchenoire14Press(){
  document.getElementById('montre').innerHTML='C+';
  var baa14 = document.getElementById("14wav");
  baa14.play();
  }
function touchenoire26Press(){
  document.getElementById('montre').innerHTML='C+';
  var baa26 = document.getElementById("26wav");
  baa26.play();
  }
function touchenoire4Press(){
  document.getElementById('montre').innerHTML='D+';
  var baa4 = document.getElementById("4wav");
  baa4.play();
  }
function touchenoire16Press(){
  document.getElementById('montre').innerHTML='D+';
  var baa16 = document.getElementById("16wav");
  baa16.play();
  }
function touchenoire28Press(){
  document.getElementById('montre').innerHTML='D+';
  var baa28 = document.getElementById("28wav");
  baa28.play();
  }
function touchenoire7Press(){
  document.getElementById('montre').innerHTML='F+';
  var baa7 = document.getElementById("7wav");
  baa7.play();
  }
function touchenoire19Press(){
  document.getElementById('montre').innerHTML='F+';
  var baa19 = document.getElementById("19wav");
  baa19.play();
  }
function touchenoire31Press(){
  document.getElementById('montre').innerHTML='F+';
  var baa31 = document.getElementById("31wav");
  baa31.play();
  }
function touchenoire9Press(){
  document.getElementById('montre').innerHTML='G+';
  var baa9 = document.getElementById("9wav");
  baa9.play();
  }
function touchenoire21Press(){
  document.getElementById('montre').innerHTML='G+';
  var baa21 = document.getElementById("21wav");
  baa21.play();
  }
function touchenoire33Press(){
  document.getElementById('montre').innerHTML='G+';
  var baa33 = document.getElementById("33wav");
  baa33.play();
  }
function touchenoire11Press(){
  document.getElementById('montre').innerHTML='A+';
  var baa11 = document.getElementById("11wav");
  baa11.play();
  }
function touchenoire23Press(){
  document.getElementById('montre').innerHTML='A+';
  var baa23 = document.getElementById("23wav");
  baa23.play();
  }
function touchenoire35Press(){
  document.getElementById('montre').innerHTML='A+';
  var baa35 = document.getElementById("35wav");
  baa35.play();
  }          

     
function toucheblancheUp(){
  document.getElementById('montre').innerHTML='';
}
function touchenoireUp(){
  document.getElementById('montre').innerHTML='';
}
   
    </script>      
    <style>
#fondgene{
  background:#975401;
  width:900px;
  height:450px;
  margin:50px auto;
  border-radius:16px;
}
   

.toucheblanche{
  position:absolute;
  height:300px;
  width:36px;
  margin-top:100px;
  background:white;
  border-right:1px solid #BBB;
  cursor:pointer;
  transition:all 0.1s ease 0ms;
  -o-transition:all 0.1s ease 0ms;
  -ms-transition:all 0.1s ease 0ms;
  -moz-transition:all 0.1s ease 0ms;
  -webkit-transition:all 0.1s ease 0ms;
}

.toucheblanche:active{
  -webkit-transform:perspective(650) rotateX(-10deg);
  transform:perspective(650) rotateX(-10deg);
  margin-top:102px;
}

.touchenoire{
  position:absolute;
  height:180px;
  width:20px;
  margin-top:100px;
  background:black;
  border-right:1px solid #BBB;
  cursor:pointer;
}

.touchenoire:active{
  -webkit-transform:perspective(150) rotateX(-6deg);
  transform:perspective(150) rotateX(-6deg);
  margin-top:102px;
}

#montre{
  position:absolute;
  width:100px;
  height:60px;
  margin:20px 370px;
  background:blue;
  border:5px solid #777;
  color:yellow;
  font-size:55px;
  text-align:right;
  padding:0px 10px;
 

}
   
     body{
background-image: -webkit-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:    -moz-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:     -ms-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:      -o-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:         linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
}
   
   
.menu a {
  display:block;
  color: #fff;
  text-decoration:none;
}
.menu > li,
.menu > li li {
  position: relative;
  display:inline-block;
  padding: 6px 15px;
  background-color: #777;
  background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
}
.menu > li li { background: transparent none; }
.menu > li li a { color: #444; }
.menu > li li:hover { background:#eee; }
.menu > li:first-child {
  border-right: 1px solid #777;
  border-radius: 8px 0 0 8px;
}
.menu > li + li {
  border-left: 1px solid #aaa;
  border-right: 1px solid #777;
}
.menu > li:last-child {
  border-right:0;
  border-left: 1px solid #aaa;
  border-radius: 0 8px 8px 0 ;
}
.menu > li:hover {
  background-color: #999;
  background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
}

.menu ul {
  position: absolute;
  top: 2em; left:0;
  max-height:0em;
  margin:0; padding:0;
  background-color:#ddd;
  background-image: linear-gradient(#fff,#ddd);
  overflow:hidden;
  transition: 1s max-height 0.3s;
  border-radius: 0 0 8px 8px;
}

.menu > li:hover ul {

  max-height:13em;
}  
   
   

    </style>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 

 
 

  </head>
  <body>

 <div id="gradients">      
<ul class="menu">
  <li>Marteau
    <ul>
      <li><input type="number" name="Marteau" min="0" max="255"></li>
    </ul>
  </li><li>Licorne
    <ul>
      <li><input type="number" name="Licorne" min="0" max="255"></li>
    </ul>
  </li><li>Mariage
    <ul>
      <li><input type="number" name="Mariage" min="0" max="255"></li>
    </ul>
  </li><li>Vinaigrette
    <ul>
      <li><input type="number" name="Vinaigrette" min="0" max="255"></li>
    </ul>
  </li><li>Puissance
    <ul>
      <li><input type="number" name="Puissance" min="0" max="255"></li>
    </ul>
  </li><li>Tremolo
    <ul>
      <li><input type="number" name="Tremolo" min="0" max="255"></li>
    </ul>
  </li><li>octet7
    <ul>
      <li><input type="number" name="octet7" min="0" max="255"></li>
    </ul>
  </li><li>octet8
    <ul>
      <li><input type="number" name="octet8" min="0" max="255"></li>
    </ul>
  </li>
</ul></div>


<!-- en attente PianoBaul 22 94 10 100 10 0 130 5 5 5 5 5 75 25 25 75  -->


    <div id="fondgene">
      <div id="montre">
<div><audio id="1awav" src="http://www.letime.net/PianoBaul/1a.wav" preload></audio></div>
<div><audio id="1bwav" src="http://www.letime.net/PianoBaul/1b.wav" preload></audio></div>
<div><audio id="1cwav" src="http://www.letime.net/PianoBaul/1c.wav" preload></audio></div>
<div><audio id="2awav" src="http://www.letime.net/PianoBaul/2a.wav" preload></audio></div>
<div><audio id="2bwav" src="http://www.letime.net/PianoBaul/2b.wav" preload></audio></div>
<div><audio id="2cwav" src="http://www.letime.net/PianoBaul/2c.wav" preload></audio></div>
<div><audio id="3awav" src="http://www.letime.net/PianoBaul/3a.wav" preload></audio></div>
<div><audio id="3bwav" src="http://www.letime.net/PianoBaul/3b.wav" preload></audio></div>
<div><audio id="3cwav" src="http://www.letime.net/PianoBaul/3c.wav" preload></audio></div>
<div><audio id="4awav" src="http://www.letime.net/PianoBaul/4a.wav" preload></audio></div>
<div><audio id="4bwav" src="http://www.letime.net/PianoBaul/4b.wav" preload></audio></div>
<div><audio id="4cwav" src="http://www.letime.net/PianoBaul/4c.wav" preload></audio></div>
<div><audio id="5awav" src="http://www.letime.net/PianoBaul/5a.wav" preload></audio></div>
<div><audio id="5bwav" src="http://www.letime.net/PianoBaul/5b.wav" preload></audio></div>
<div><audio id="5cwav" src="http://www.letime.net/PianoBaul/5c.wav" preload></audio></div>
<div><audio id="6awav" src="http://www.letime.net/PianoBaul/6a.wav" preload></audio></div>
<div><audio id="6bwav" src="http://www.letime.net/PianoBaul/6b.wav" preload></audio></div>
<div><audio id="6cwav" src="http://www.letime.net/PianoBaul/6c.wav" preload></audio></div>
<div><audio id="7awav" src="http://www.letime.net/PianoBaul/7a.wav" preload></audio></div>
<div><audio id="7bwav" src="http://www.letime.net/PianoBaul/7b.wav" preload></audio></div>
<div><audio id="7cwav" src="http://www.letime.net/PianoBaul/7c.wav" preload></audio></div>
<div><audio id="8awav" src="http://www.letime.net/PianoBaul/8a.wav" preload></audio></div>
<div><audio id="8bwav" src="http://www.letime.net/PianoBaul/8b.wav" preload></audio></div>
<div><audio id="8cwav" src="http://www.letime.net/PianoBaul/8c.wav" preload></audio></div>
<div><audio id="9awav" src="http://www.letime.net/PianoBaul/9a.wav" preload></audio></div>
<div><audio id="9bwav" src="http://www.letime.net/PianoBaul/9b.wav" preload></audio></div>
<div><audio id="9cwav" src="http://www.letime.net/PianoBaul/9c.wav" preload></audio></div>
<div><audio id="10awav" src="http://www.letime.net/PianoBaul/10a.wav" preload></audio></div>
<div><audio id="10bwav" src="http://www.letime.net/PianoBaul/10b.wav" preload></audio></div>
<div><audio id="10cwav" src="http://www.letime.net/PianoBaul/10c.wav" preload></audio></div>
<div><audio id="11awav" src="http://www.letime.net/PianoBaul/11a.wav" preload></audio></div>
<div><audio id="11bwav" src="http://www.letime.net/PianoBaul/11b.wav" preload></audio></div>
<div><audio id="11cwav" src="http://www.letime.net/PianoBaul/11c.wav" preload></audio></div>
<div><audio id="12awav" src="http://www.letime.net/PianoBaul/12a.wav" preload></audio></div>
<div><audio id="12bwav" src="http://www.letime.net/PianoBaul/12b.wav" preload></audio></div>
<div><audio id="12cwav" src="http://www.letime.net/PianoBaul/12c.wav" preload></audio></div>
<div><audio id="13awav" src="http://www.letime.net/PianoBaul/13a.wav" preload></audio></div>
<div><audio id="13bwav" src="http://www.letime.net/PianoBaul/13b.wav" preload></audio></div>
<div><audio id="13cwav" src="http://www.letime.net/PianoBaul/13c.wav" preload></audio></div>
<div><audio id="14awav" src="http://www.letime.net/PianoBaul/14a.wav" preload></audio></div>
<div><audio id="14bwav" src="http://www.letime.net/PianoBaul/14b.wav" preload></audio></div>
<div><audio id="14cwav" src="http://www.letime.net/PianoBaul/14c.wav" preload></audio></div>
<div><audio id="15awav" src="http://www.letime.net/PianoBaul/15a.wav" preload></audio></div>
<div><audio id="15bwav" src="http://www.letime.net/PianoBaul/15b.wav" preload></audio></div>
<div><audio id="15cwav" src="http://www.letime.net/PianoBaul/15c.wav" preload></audio></div>
<div><audio id="16awav" src="http://www.letime.net/PianoBaul/16a.wav" preload></audio></div>
<div><audio id="16bwav" src="http://www.letime.net/PianoBaul/16b.wav" preload></audio></div>
<div><audio id="16cwav" src="http://www.letime.net/PianoBaul/16c.wav" preload></audio></div>
<div><audio id="17awav" src="http://www.letime.net/PianoBaul/17a.wav" preload></audio></div>
<div><audio id="17bwav" src="http://www.letime.net/PianoBaul/17b.wav" preload></audio></div>
<div><audio id="17cwav" src="http://www.letime.net/PianoBaul/17c.wav" preload></audio></div>
<div><audio id="18awav" src="http://www.letime.net/PianoBaul/18a.wav" preload></audio></div>
<div><audio id="18bwav" src="http://www.letime.net/PianoBaul/18b.wav" preload></audio></div>
<div><audio id="18cwav" src="http://www.letime.net/PianoBaul/18c.wav" preload></audio></div>
<div><audio id="19awav" src="http://www.letime.net/PianoBaul/19a.wav" preload></audio></div>
<div><audio id="19bwav" src="http://www.letime.net/PianoBaul/19b.wav" preload></audio></div>
<div><audio id="19cwav" src="http://www.letime.net/PianoBaul/19c.wav" preload></audio></div>
<div><audio id="20awav" src="http://www.letime.net/PianoBaul/20a.wav" preload></audio></div>
<div><audio id="20bwav" src="http://www.letime.net/PianoBaul/20b.wav" preload></audio></div>
<div><audio id="20cwav" src="http://www.letime.net/PianoBaul/20c.wav" preload></audio></div>
<div><audio id="21awav" src="http://www.letime.net/PianoBaul/21a.wav" preload></audio></div>
<div><audio id="21bwav" src="http://www.letime.net/PianoBaul/21b.wav" preload></audio></div>
<div><audio id="21cwav" src="http://www.letime.net/PianoBaul/21c.wav" preload></audio></div>
<div><audio id="22awav" src="http://www.letime.net/PianoBaul/22a.wav" preload></audio></div>
<div><audio id="22bwav" src="http://www.letime.net/PianoBaul/22b.wav" preload></audio></div>
<div><audio id="22cwav" src="http://www.letime.net/PianoBaul/22c.wav" preload></audio></div>
<div><audio id="23awav" src="http://www.letime.net/PianoBaul/23a.wav" preload></audio></div>
<div><audio id="23bwav" src="http://www.letime.net/PianoBaul/23b.wav" preload></audio></div>
<div><audio id="23cwav" src="http://www.letime.net/PianoBaul/23c.wav" preload></audio></div>
<div><audio id="24awav" src="http://www.letime.net/PianoBaul/24a.wav" preload></audio></div>
<div><audio id="24bwav" src="http://www.letime.net/PianoBaul/24b.wav" preload></audio></div>
<div><audio id="24cwav" src="http://www.letime.net/PianoBaul/24c.wav" preload></audio></div>
<div><audio id="25awav" src="http://www.letime.net/PianoBaul/25a.wav" preload></audio></div>
<div><audio id="25bwav" src="http://www.letime.net/PianoBaul/25b.wav" preload></audio></div>
<div><audio id="25cwav" src="http://www.letime.net/PianoBaul/25c.wav" preload></audio></div>
<div><audio id="26awav" src="http://www.letime.net/PianoBaul/26a.wav" preload></audio></div>
<div><audio id="26bwav" src="http://www.letime.net/PianoBaul/26b.wav" preload></audio></div>
<div><audio id="26cwav" src="http://www.letime.net/PianoBaul/26c.wav" preload></audio></div>
<div><audio id="27awav" src="http://www.letime.net/PianoBaul/27a.wav" preload></audio></div>
<div><audio id="27bwav" src="http://www.letime.net/PianoBaul/27b.wav" preload></audio></div>
<div><audio id="27cwav" src="http://www.letime.net/PianoBaul/27c.wav" preload></audio></div>
<div><audio id="28awav" src="http://www.letime.net/PianoBaul/28a.wav" preload></audio></div>
<div><audio id="28bwav" src="http://www.letime.net/PianoBaul/28b.wav" preload></audio></div>
<div><audio id="28cwav" src="http://www.letime.net/PianoBaul/28c.wav" preload></audio></div>
<div><audio id="29awav" src="http://www.letime.net/PianoBaul/29a.wav" preload></audio></div>
<div><audio id="29bwav" src="http://www.letime.net/PianoBaul/29b.wav" preload></audio></div>
<div><audio id="29cwav" src="http://www.letime.net/PianoBaul/29c.wav" preload></audio></div>
<div><audio id="30awav" src="http://www.letime.net/PianoBaul/30a.wav" preload></audio></div>
<div><audio id="30bwav" src="http://www.letime.net/PianoBaul/30b.wav" preload></audio></div>
<div><audio id="30cwav" src="http://www.letime.net/PianoBaul/30c.wav" preload></audio></div>
<div><audio id="31awav" src="http://www.letime.net/PianoBaul/31a.wav" preload></audio></div>
<div><audio id="31bwav" src="http://www.letime.net/PianoBaul/31b.wav" preload></audio></div>
<div><audio id="31cwav" src="http://www.letime.net/PianoBaul/31c.wav" preload></audio></div>
<div><audio id="32awav" src="http://www.letime.net/PianoBaul/32a.wav" preload></audio></div>
<div><audio id="32bwav" src="http://www.letime.net/PianoBaul/32b.wav" preload></audio></div>
<div><audio id="32cwav" src="http://www.letime.net/PianoBaul/32c.wav" preload></audio></div>
<div><audio id="33awav" src="http://www.letime.net/PianoBaul/33a.wav" preload></audio></div>
<div><audio id="33bwav" src="http://www.letime.net/PianoBaul/33b.wav" preload></audio></div>
<div><audio id="33cwav" src="http://www.letime.net/PianoBaul/33c.wav" preload></audio></div>
<div><audio id="34awav" src="http://www.letime.net/PianoBaul/34a.wav" preload></audio></div>
<div><audio id="34bwav" src="http://www.letime.net/PianoBaul/34b.wav" preload></audio></div>
<div><audio id="34cwav" src="http://www.letime.net/PianoBaul/34c.wav" preload></audio></div>
<div><audio id="35awav" src="http://www.letime.net/PianoBaul/35a.wav" preload></audio></div>
<div><audio id="35bwav" src="http://www.letime.net/PianoBaul/35b.wav" preload></audio></div>
<div><audio id="35cwav" src="http://www.letime.net/PianoBaul/35c.wav" preload></audio></div>
<div><audio id="36awav" src="http://www.letime.net/PianoBaul/36a.wav" preload></audio></div>
<div><audio id="36bwav" src="http://www.letime.net/PianoBaul/36b.wav" preload></audio></div>
<div><audio id="36cwav" src="http://www.letime.net/PianoBaul/36c.wav" preload></audio></div>


</div>

     
      <!-- DO gamme 1 -->
      <div class="toucheblanche" onMouseDown="toucheblanche1Press();" onMouseUp="toucheblancheUp();" style="margin-left:40px;"><audio id="1wav" src="http://www.letime.net/PianoBaul/1.wav" preload></audio></div>
      <!-- RE gamme 1 -->
      <div class="toucheblanche" onMouseDown="toucheblanche3Press();" onMouseUp="toucheblancheUp();" style="margin-left:80px;"><audio id="3wav" src="http://www.letime.net/PianoBaul/3.wav" preload></audio></div>
      <!-- MI gamme 1 -->
      <div class="toucheblanche" onMouseDown="toucheblanche5Press();" onMouseUp="toucheblancheUp();" style="margin-left:120px;"><audio id="5wav" src="http://www.letime.net/PianoBaul/5.wav" preload></audio></div>
      <!-- FA gamme 1 -->
      <div class="toucheblanche" onMouseDown="toucheblanche6Press();" onMouseUp="toucheblancheUp();" style="margin-left:160px;"><audio id="6wav" src="http://www.letime.net/PianoBaul/6.wav" preload></audio></div>
      <!-- SOL gamme 1 -->
      <div class="toucheblanche" onMouseDown="toucheblanche8Press();" onMouseUp="toucheblancheUp();" style="margin-left:200px;"><audio id="8wav" src="http://www.letime.net/PianoBaul/8.wav" preload></audio></div>
      <!-- LA gamme 1 -->
      <div class="toucheblanche" onMouseDown="toucheblanche10Press();" onMouseUp="toucheblancheUp();" style="margin-left:240px;"><audio id="10wav" src="http://www.letime.net/PianoBaul/10.wav" preload></audio></div>
      <!-- SI gamme 1 -->
      <div class="toucheblanche"  onMouseDown="toucheblanche12Press();" onMouseUp="toucheblancheUp();" style="margin-left:280px;"><audio id="12wav" src="http://www.letime.net/PianoBaul/12.wav" preload></audio></div>
      <!-- DO gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanche13Press();" onMouseUp="toucheblancheUp();" style="margin-left:320px;"><audio id="13wav" src="http://www.letime.net/PianoBaul/13.wav" preload></audio></div>
      <!-- RE gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanche15Press();" onMouseUp="toucheblancheUp();" style="margin-left:360px;"><audio id="15wav" src="http://www.letime.net/PianoBaul/15.wav" preload></audio></div>
      <!-- MI gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanche17Press();" onMouseUp="toucheblancheUp();" style="margin-left:400px;"><audio id="17wav" src="http://www.letime.net/PianoBaul/17.wav" preload></audio></div>
      <!-- FA gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanche18Press();" onMouseUp="toucheblancheUp();" style="margin-left:440px;"><audio id="18wav" src="http://www.letime.net/PianoBaul/18.wav" preload></audio></div>
      <!-- SOL gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanche20Press();" onMouseUp="toucheblancheUp();" style="margin-left:480px;"><audio id="20wav" src="http://www.letime.net/PianoBaul/20.wav" preload></audio></div>
      <!-- LA gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanche22Press();" onMouseUp="toucheblancheUp();" style="margin-left:520px;"><audio id="22wav" src="http://www.letime.net/PianoBaul/22.wav" preload></audio></div>
      <!-- SI gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanche24Press();" onMouseUp="toucheblancheUp();" style="margin-left:560px;"><audio id="24wav" src="http://www.letime.net/PianoBaul/24.wav" preload></audio></div>
      <!-- DO gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanche25Press();" onMouseUp="toucheblancheUp();" style="margin-left:600px;"><audio id="25wav" src="http://www.letime.net/PianoBaul/25.wav" preload></audio></div>
      <!-- RE gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanche27Press();" onMouseUp="toucheblancheUp();" style="margin-left:640px;"><audio id="27wav" src="http://www.letime.net/PianoBaul/27.wav" preload></audio></div>
      <!-- MI gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanche29Press();" onMouseUp="toucheblancheUp();" style="margin-left:680px;"><audio id="29wav" src="http://www.letime.net/PianoBaul/29.wav" preload></audio></div>
      <!-- FA gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanche30Press();" onMouseUp="toucheblancheUp();" style="margin-left:720px;"><audio id="30wav" src="http://www.letime.net/PianoBaul/30.wav" preload></audio></div>
      <!-- SOL gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanche32Press();" onMouseUp="toucheblancheUp();" style="margin-left:760px;"><audio id="32wav" src="http://www.letime.net/PianoBaul/32.wav" preload></audio></div>
      <!-- LA gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanche34Press();" onMouseUp="toucheblancheUp();" style="margin-left:800px;"><audio id="34wav" src="http://www.letime.net/PianoBaul/34.wav" preload></audio></div>
      <!-- SI gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanche36Press();" onMouseUp="toucheblancheUp();" style="margin-left:840px;"><audio id="36wav" src="http://www.letime.net/PianoBaul/36.wav" preload></audio></div>
     
      <!-- placer les touches noires apres pour etre au dessus des blanches -->
     
      <!-- DO+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoire2Press();" onMouseUp="touchenoireUp();" style="margin-left:70px;"><audio id="2wav" src="http://www.letime.net/PianoBaul/2.wav" preload></audio></div>
      <!-- RE+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoire4Press();" onMouseUp="touchenoireUp();" style="margin-left:110px;"><audio id="4wav" src="http://www.letime.net/PianoBaul/4.wav" preload></audio></div>
      <!-- FA+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoire7Press();" onMouseUp="touchenoireUp();" style="margin-left:190px;"><audio id="7wav" src="http://www.letime.net/PianoBaul/7.wav" preload></audio></div>
      <!-- SOL+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoire9Press();" onMouseUp="touchenoireUp();" style="margin-left:230px;"><audio id="9wav" src="http://www.letime.net/PianoBaul/9.wav" preload></audio></div>
      <!-- LA+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoire11Press();" onMouseUp="touchenoireUp();" style="margin-left:270px;"><audio id="11wav" src="http://www.letime.net/PianoBaul/11.wav" preload></audio></div>
      <!-- DO+ gamme 2 -->
      <div class="touchenoire" onMouseDown="touchenoire14Press();" onMouseUp="touchenoireUp();" style="margin-left:350px;"><audio id="14wav" src="http://www.letime.net/PianoBaul/14.wav" preload></audio></div>
      <!-- RE+ gamme 2 -->
      <div class="touchenoire" onMouseDown="touchenoire16Press();" onMouseUp="touchenoireUp();" style="margin-left:390px;"><audio id="16wav" src="http://www.letime.net/PianoBaul/16.wav" preload></audio></div>
      <!-- FA+ gamme 2 -->
      <div class="touchenoire" onMouseDown="touchenoire19Press();" onMouseUp="touchenoireUp();" style="margin-left:470px;"><audio id="19wav" src="http://www.letime.net/PianoBaul/19.wav" preload></audio></div>
      <!-- SOL+ gamme 2 -->
      <div class="touchenoire" onMouseDown="touchenoire21Press();" onMouseUp="touchenoireUp();" style="margin-left:510px;"><audio id="21wav" src="http://www.letime.net/PianoBaul/21.wav" preload></audio></div>
      <!-- LA+ gamme 2 -->
      <div class="touchenoire" onMouseDown="touchenoire23Press();" onMouseUp="touchenoireUp();" style="margin-left:550px;"><audio id="23wav" src="http://www.letime.net/PianoBaul/23.wav" preload></audio></div>
      <!-- DO+ gamme 3 -->
      <div class="touchenoire" onMouseDown="touchenoire26Press();" onMouseUp="touchenoireUp();" style="margin-left:630px;"><audio id="26wav" src="http://www.letime.net/PianoBaul/26.wav" preload></audio></div>
      <!-- RE+ gamme 3 -->
      <div class="touchenoire" onMouseDown="touchenoire28Press();" onMouseUp="touchenoireUp();" style="margin-left:670px;"><audio id="28wav" src="http://www.letime.net/PianoBaul/28.wav" preload></audio></div>
      <!-- FA+ gamme 3 -->
      <div class="touchenoire" onMouseDown="touchenoire31Press();" onMouseUp="touchenoireUp();" style="margin-left:750px;"><audio id="31wav" src="http://www.letime.net/PianoBaul/31.wav" preload></audio></div>
      <!-- SOL+ gamme 3 -->
      <div class="touchenoire" onMouseDown="touchenoire33Press();" onMouseUp="touchenoireUp();" style="margin-left:790px;"><audio id="33wav" src="http://www.letime.net/PianoBaul/33.wav" preload></audio></div>
      <!-- LA+ gamme 3 -->
      <div class="touchenoire" onMouseDown="touchenoire35Press();" onMouseUp="touchenoireUp();" style="margin-left:840px;"><audio id="35wav" src="http://www.letime.net/PianoBaul/35.wav" preload></audio></div>
      </div>

 <div>      
<ul class="menu">
  <li>octet9
    <ul>
      <li><input type="number" name="octet9" min="0" max="255"></li>
    </ul>
  </li><li>octet10
    <ul>
      <li><input type="number" name="octet10" min="0" max="255"></li>
    </ul>
  </li><li>octet11
    <ul>
      <li><input type="number" name="octet11" min="0" max="255"></li>
    </ul>
  </li><li>octet12
    <ul>
      <li><input type="number" name="octet12" min="0" max="255"></li>
    </ul>
  </li><li>octet13
    <ul>
      <li><input type="number" name="octet13" min="0" max="255"></li>
    </ul>
  </li><li>octet14
    <ul>
      <li><input type="number" name="octet14" min="0" max="255"></li>
    </ul>
  </li><li>octet15
    <ul>
      <li><input type="number" name="octet15" min="0" max="255"></li>
    </ul>
  </li><li>octet16
    <ul>
      <li><input type="number" name="octet16" min="0" max="255"></li>
    </ul>
  </li>
</ul></div>

  </body>
</html>




Cordialement

#22 Re : Suivi du Wiki et des Projets Git » wiki SequenBaul » 22-05-2015 14:04:56

Bonjour,
J'ai toujours pas eu de réponse pour participer à la refonte pour classer le code par lois en sciences physiques acoustique.

J'ai un peu améliorer le code html de mon site, car j'ai eu le PR divisé par 2, il n'est plus qu'à 3 et j'ai commencé à jeté un premier code html pour l'application PianoBaul, le voici :

<!DOCTYPE html>
<html>
<head>   
<title>PianoBaul en HTML5</title>
<meta charset="UTF-8" />
<script type="text/javascript">
   
function toucheblanchePress(ou){
  if(ou==1){
  document.getElementById('montre').innerHTML='C';
  var v = document.getElementById("1wav");
  v.play();
  }
  else if(ou==13){
  document.getElementById('montre').innerHTML='C';
  var v = document.getElementById("13wav");
  v.play();
  }
  else if(ou==25){
  document.getElementById('montre').innerHTML='C';
  var v = document.getElementById("25wav");
  v.play();
  }
  else if(ou==3){
  document.getElementById('montre').innerHTML='D';
  var v = document.getElementById("3wav");
  v.play();
  }
  else if(ou==15){
  document.getElementById('montre').innerHTML='D';
  var v = document.getElementById("15wav");
  v.play();
  }
  else if(ou==27){
  document.getElementById('montre').innerHTML='D';
  var v = document.getElementById("27wav");
  v.play();
  }
  else if(ou==5){
  document.getElementById('montre').innerHTML='E';
  var v = document.getElementById("5wav");
  v.play();
  }
  else if(ou==17){
  document.getElementById('montre').innerHTML='E';
  var v = document.getElementById("17wav");
  v.play();
  }
  else if(ou==29){
  document.getElementById('montre').innerHTML='E';
  var v = document.getElementById("29wav");
  v.play();
  }
  else if(ou==6){
  document.getElementById('montre').innerHTML='F';
  var v = document.getElementById("6wav");
  v.play();
  }
  else if(ou==18){
  document.getElementById('montre').innerHTML='F';
  var v = document.getElementById("18wav");
  v.play();
  }
  else if(ou==30){
  document.getElementById('montre').innerHTML='F';
  var v = document.getElementById("30wav");
  v.play();
  }
  else if(ou==8){
  document.getElementById('montre').innerHTML='G';
  var v = document.getElementById("8wav");
  v.play();
  }
  else if(ou==20){
  document.getElementById('montre').innerHTML='G';
  var v = document.getElementById("20wav");
  v.play();
  }
  else if(ou==32){
  document.getElementById('montre').innerHTML='G';
  var v = document.getElementById("32wav");
  v.play();
  }
  else if(ou==10){
  document.getElementById('montre').innerHTML='A';
  var v = document.getElementById("10wav");
  v.play();
  }
  else if(ou==22){
  document.getElementById('montre').innerHTML='A';
  var v = document.getElementById("22wav");
  v.play();
  }
  else if(ou==34){
  document.getElementById('montre').innerHTML='A';
  var v = document.getElementById("34wav");
  v.play();
  }
  else if(ou==12){
  document.getElementById('montre').innerHTML='B';
  var v = document.getElementById("12wav");
  v.play();
  }
  else if(ou==24){
  document.getElementById('montre').innerHTML='B';
  var v = document.getElementById("24wav");
  v.play();
  }
  else if(ou==36){
  document.getElementById('montre').innerHTML='B';
  var v = document.getElementById("36wav");
  v.play();
  }
}

function touchenoirePress(ou){

  if(ou==2){
  document.getElementById('montre').innerHTML='C+';
  var v = document.getElementById("2wav");
  v.play();
  }
  else if(ou==14){
  document.getElementById('montre').innerHTML='C+';
  var v = document.getElementById("14wav");
  v.play();
  }
  else if(ou==26){
  document.getElementById('montre').innerHTML='C+';
  var v = document.getElementById("26wav");
  v.play();
  }
  else if(ou==4){
  document.getElementById('montre').innerHTML='D+';
  var v = document.getElementById("4wav");
  v.play();
  }
  else if(ou==16){
  document.getElementById('montre').innerHTML='D+';
  var v = document.getElementById("16wav");
  v.play();
  }
  else if(ou==28){
  document.getElementById('montre').innerHTML='D+';
  var v = document.getElementById("28wav");
  v.play();
  }
  else if(ou==7){
  document.getElementById('montre').innerHTML='F+';
  var v = document.getElementById("7wav");
  v.play();
  }
  else if(ou==19){
  document.getElementById('montre').innerHTML='F+';
  var v = document.getElementById("19wav");
  v.play();
  }
  else if(ou==31){
  document.getElementById('montre').innerHTML='F+';
  var v = document.getElementById("31wav");
  v.play();
  }
  else if(ou==9){
  document.getElementById('montre').innerHTML='G+';
  var v = document.getElementById("9wav");
  v.play();
  }
  else if(ou==21){
  document.getElementById('montre').innerHTML='G+';
  var v = document.getElementById("21wav");
  v.play();
  }
  else if(ou==33){
  document.getElementById('montre').innerHTML='G+';
  var v = document.getElementById("33wav");
  v.play();
  }
  else if(ou==11){
  document.getElementById('montre').innerHTML='A+';
  var v = document.getElementById("11wav");
  v.play();
  }
  else if(ou==23){
  document.getElementById('montre').innerHTML='A+';
  var v = document.getElementById("23wav");
  v.play();
  }
  else if(ou==35){
  document.getElementById('montre').innerHTML='A+';
  var v = document.getElementById("35wav");
  v.play();
  }
}
     
function toucheblancheUp(){
  document.getElementById('montre').innerHTML='';
}
function touchenoireUp(){
  document.getElementById('montre').innerHTML='';
}
   
    </script>      
    <style>
#fondgene{
  background:#975401;
  width:900px;
  height:450px;
  margin:50px auto;
  border-radius:16px;
}
   

.toucheblanche{
  position:absolute;
  height:300px;
  width:36px;
  margin-top:100px;
  background:white;
  border-right:1px solid #BBB;
  cursor:pointer;
  transition:all 0.1s ease 0ms;
  -o-transition:all 0.1s ease 0ms;
  -ms-transition:all 0.1s ease 0ms;
  -moz-transition:all 0.1s ease 0ms;
  -webkit-transition:all 0.1s ease 0ms;
}

.toucheblanche:active{
  -webkit-transform:perspective(650) rotateX(-10deg);
  transform:perspective(650) rotateX(-10deg);
  margin-top:102px;
}

.touchenoire{
  position:absolute;
  height:180px;
  width:20px;
  margin-top:100px;
  background:black;
  border-right:1px solid #BBB;
  cursor:pointer;
}

.touchenoire:active{
  -webkit-transform:perspective(150) rotateX(-6deg);
  transform:perspective(150) rotateX(-6deg);
  margin-top:102px;
}

#montre{
  position:absolute;
  width:100px;
  height:60px;
  margin:20px 370px;
  background:blue;
  border:5px solid #777;
  color:yellow;
  font-size:55px;
  text-align:right;
  padding:0px 10px;
 

}
   
     body{
background-image: -webkit-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:    -moz-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:     -ms-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:      -o-linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
background-image:         linear-gradient(right top, #D60F0E 0%, #FFDD01 100%);
}
    }
   
#menu a {
  display:block;
  color: #fff;
  text-decoration:none;
}
#menu > li,
#menu > li li {
  position: relative;
  display:inline-block;
  width: 110px;
  padding: 6px 15px;
  background-color: #777;
  background-image: linear-gradient(#aaa, #888 50%, #777 50%,#999);
}
#menu > li li { background: transparent none; }
#menu > li li a { color: #444; }
#menu > li li:hover { background:#eee; }
#menu > li:first-child {
  border-right: 1px solid #777;
  border-radius: 8px 0 0 8px;
}
#menu > li + li {
  border-left: 1px solid #aaa;
  border-right: 1px solid #777;
}
#menu > li:last-child {
  border-right:0;
  border-left: 1px solid #aaa;
  border-radius: 0 8px 8px 0 ;
}
#menu > li:hover {
  background-color: #999;
  background-image: linear-gradient(#ccc, #aaa 50%, #999 50%,#bbb);
}

#menu ul {
  position: absolute;
  top: 2em; left:0;
  max-height:0em;
  margin:0; padding:0;
  background-color:#ddd;
  background-image: linear-gradient(#fff,#ddd);
  overflow:hidden;
  transition: 1s max-height 0.3s;
  border-radius: 0 0 8px 8px;
}

#menu > li:hover ul {

  max-height:13em;
}  
   
   

    </style>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 

 
 

  </head>
  <body>  <div id="gradients">      <ul id="menu">
  <li>lois
    <ul>
      <li><div id="Marteau"><input type="button" value="Marteau" onclick="javascript:document.getElementById('Marteau').style.backgroundColor='#00aa00';"></div></li>
      <li><div id="Licorne"><input type="button" value="Licorne" onclick="javascript:document.getElementById('Licorne').style.backgroundColor='#00aa00';"></div></li>
    </ul>
  </li><li>tremolo
    <ul>
      <li><div id="Forme1"><input type="button" value="Forme 1" onclick="javascript:document.getElementById('Forme1').style.backgroundColor='#00aa00';"></div></li>
      <li><div id="Forme2"><input type="button" value="Forme 2" onclick="javascript:document.getElementById('Forme2').style.backgroundColor='#00aa00';"></div></li>
      <li><div id="Forme3"><input type="button" value="Forme 3" onclick="javascript:document.getElementById('Forme3').style.backgroundColor='#00aa00';"></div></li>
      <li><div id="Forme4"><input type="button" value="Forme 4" onclick="javascript:document.getElementById('Forme4').style.backgroundColor='#00aa00';"></div></li>
    </ul>
  </li><li>Puissance
    <ul>
      <li><div id="puissance1"><input type="button" value="puissance 1" onclick="javascript:document.getElementById('puissance1').style.backgroundColor='#00aa00';"></div></li>
      <li><div id="puissance2"><input type="button" value="puissance 2" onclick="javascript:document.getElementById('puissance2').style.backgroundColor='#00aa00';"></div></li>
      <li><div id="puissance3"><input type="button" value="puissance 3" onclick="javascript:document.getElementById('puissance3').style.backgroundColor='#00aa00';"></div></li>
    </ul>
  </li>
</ul></div>


<!-- en attente PianoBaul 22 94 10 100 10 0 130 5 5 5 5 5 75 25 25 75  -->


    <div id="fondgene">
      <div id="montre">
<div><audio src="http://www.letime.net/PianoBaul/1.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/2.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/3.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/4.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/5.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/6.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/7.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/8.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/9.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/10.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/11.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/12.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/13.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/14.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/15.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/16.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/17.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/18.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/19.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/20.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/21.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/22.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/23.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/24.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/25.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/26.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/27.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/28.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/29.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/30.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/31.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/32.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/33.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/34.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/35.wav" preload></audio></div>
<div><audio src="http://www.letime.net/PianoBaul/36.wav" preload></audio></div>


</div>

     
      <!-- DO gamme 1 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(1);" onMouseUp="toucheblancheUp();" style="margin-left:40px;"><audio id="1wav" src="http://www.letime.net/PianoBaul/1.wav" preload></audio></div>
      <!-- RE gamme 1 -->
      <div class="toucheblanche"  onMouseDown="toucheblanchePress(3);" onMouseUp="toucheblancheUp();" style="margin-left:80px;"><audio id="3wav" src="http://www.letime.net/PianoBaul/3.wav" preload></audio></div>
      <!-- MI gamme 1 -->
      <div class="toucheblanche"  onMouseDown="toucheblanchePress(5);" onMouseUp="toucheblancheUp();" style="margin-left:120px;"><audio id="5wav" src="http://www.letime.net/PianoBaul/5.wav" preload></audio></div>
      <!-- FA gamme 1 -->
      <div class="toucheblanche"  onMouseDown="toucheblanchePress(6);" onMouseUp="toucheblancheUp();" style="margin-left:160px;"><audio id="6wav" src="http://www.letime.net/PianoBaul/6.wav" preload></audio></div>
      <!-- SOL gamme 1 -->
      <div class="toucheblanche"  onMouseDown="toucheblanchePress(8);" onMouseUp="toucheblancheUp();" style="margin-left:200px;"><audio id="8wav" src="http://www.letime.net/PianoBaul/8.wav" preload></audio></div>
      <!-- LA gamme 1 -->
      <div class="toucheblanche"  onMouseDown="toucheblanchePress(10);" onMouseUp="toucheblancheUp();" style="margin-left:240px;"><audio id="10wav" src="http://www.letime.net/PianoBaul/10.wav" preload></audio></div>
      <!-- SI gamme 1 -->
      <div class="toucheblanche"  onMouseDown="toucheblanchePress(12);" onMouseUp="toucheblancheUp();" style="margin-left:280px;"><audio id="12wav" src="http://www.letime.net/PianoBaul/12.wav" preload></audio></div>
      <!-- DO gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(13);" onMouseUp="toucheblancheUp();" style="margin-left:320px;"><audio id="13wav" src="http://www.letime.net/PianoBaul/13.wav" preload></audio></div>
      <!-- RE gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(15);" onMouseUp="toucheblancheUp();" style="margin-left:360px;"><audio id="15wav" src="http://www.letime.net/PianoBaul/15.wav" preload></audio></div>
      <!-- MI gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(17);" onMouseUp="toucheblancheUp();" style="margin-left:400px;"><audio id="17wav" src="http://www.letime.net/PianoBaul/17.wav" preload></audio></div>
      <!-- FA gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(18);" onMouseUp="toucheblancheUp();" style="margin-left:440px;"><audio id="18wav" src="http://www.letime.net/PianoBaul/18.wav" preload></audio></div>
      <!-- SOL gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(20);" onMouseUp="toucheblancheUp();" style="margin-left:480px;"><audio id="20wav" src="http://www.letime.net/PianoBaul/20.wav" preload></audio></div>
      <!-- LA gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(22);" onMouseUp="toucheblancheUp();" style="margin-left:520px;"><audio id="22wav" src="http://www.letime.net/PianoBaul/22.wav" preload></audio></div>
      <!-- SI gamme 2 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(24);" onMouseUp="toucheblancheUp();" style="margin-left:560px;"><audio id="24wav" src="http://www.letime.net/PianoBaul/24.wav" preload></audio></div>
      <!-- DO gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(25);" onMouseUp="toucheblancheUp();" style="margin-left:600px;"><audio id="25wav" src="http://www.letime.net/PianoBaul/25.wav" preload></audio></div>
      <!-- RE gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(27);" onMouseUp="toucheblancheUp();" style="margin-left:640px;"><audio id="27wav" src="http://www.letime.net/PianoBaul/27.wav" preload></audio></div>
      <!-- MI gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(29);" onMouseUp="toucheblancheUp();" style="margin-left:680px;"><audio id="29wav" src="http://www.letime.net/PianoBaul/29.wav" preload></audio></div>
      <!-- FA gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(30);" onMouseUp="toucheblancheUp();" style="margin-left:720px;"><audio id="30wav" src="http://www.letime.net/PianoBaul/30.wav" preload></audio></div>
      <!-- SOL gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(32);" onMouseUp="toucheblancheUp();" style="margin-left:760px;"><audio id="32wav" src="http://www.letime.net/PianoBaul/32.wav" preload></audio></div>
      <!-- LA gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(34);" onMouseUp="toucheblancheUp();" style="margin-left:800px;"><audio id="34wav" src="http://www.letime.net/PianoBaul/34.wav" preload></audio></div>
      <!-- SI gamme 3 -->
      <div class="toucheblanche" onMouseDown="toucheblanchePress(36);" onMouseUp="toucheblancheUp();" style="margin-left:840px;"><audio id="36wav" src="http://www.letime.net/PianoBaul/36.wav" preload></audio></div> 
     
      <!-- placer les touches noires apres pour etre au dessus des blanches -->
     
      <!-- DO+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(2);" onMouseUp="touchenoireUp();" style="margin-left:70px;"><audio id="2wav" src="http://www.letime.net/PianoBaul/2.wav" preload></audio></div>
      <!-- RE+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(4);" onMouseUp="touchenoireUp();" style="margin-left:110px;"><audio id="4wav" src="http://www.letime.net/PianoBaul/4.wav" preload></audio></div>
      <!-- FA+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(7);" onMouseUp="touchenoireUp();" style="margin-left:190px;"><audio id="7wav" src="http://www.letime.net/PianoBaul/7.wav" preload></audio></div>
      <!-- SOL+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(9);" onMouseUp="touchenoireUp();" style="margin-left:230px;"><audio id="9wav" src="http://www.letime.net/PianoBaul/9.wav" preload></audio></div>
      <!-- LA+ gamme 1 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(11);" onMouseUp="touchenoireUp();" style="margin-left:270px;"><audio id="11wav" src="http://www.letime.net/PianoBaul/11.wav" preload></audio></div>
      <!-- DO+ gamme 2 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(14);" onMouseUp="touchenoireUp();" style="margin-left:350px;"><audio id="14wav" src="http://www.letime.net/PianoBaul/14.wav" preload></audio></div>
      <!-- RE+ gamme 2 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(16);" onMouseUp="touchenoireUp();" style="margin-left:390px;"><audio id="16wav" src="http://www.letime.net/PianoBaul/16.wav" preload></audio></div>
      <!-- FA+ gamme 2 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(19);" onMouseUp="touchenoireUp();" style="margin-left:470px;"><audio id="19wav" src="http://www.letime.net/PianoBaul/19.wav" preload></audio></div>
      <!-- SOL+ gamme 2 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(21);" onMouseUp="touchenoireUp();" style="margin-left:510px;"><audio id="21wav" src="http://www.letime.net/PianoBaul/21.wav" preload></audio></div>
      <!-- LA+ gamme 2 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(23);" onMouseUp="touchenoireUp();" style="margin-left:550px;"><audio id="23wav" src="http://www.letime.net/PianoBaul/23.wav" preload></audio></div>
      <!-- DO+ gamme 3 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(26);" onMouseUp="touchenoireUp();" style="margin-left:630px;"><audio id="26wav" src="http://www.letime.net/PianoBaul/26.wav" preload></audio></div>
      <!-- RE+ gamme 3 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(28);" onMouseUp="touchenoireUp();" style="margin-left:670px;"><audio id="28wav" src="http://www.letime.net/PianoBaul/28.wav" preload></audio></div>
      <!-- FA+ gamme 3 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(31);" onMouseUp="touchenoireUp();" style="margin-left:750px;"><audio id="31wav" src="http://www.letime.net/PianoBaul/31.wav" preload></audio></div>
      <!-- SOL+ gamme 3 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(33);" onMouseUp="touchenoireUp();" style="margin-left:790px;"><audio id="33wav" src="http://www.letime.net/PianoBaul/33.wav" preload></audio></div>
      <!-- LA+ gamme 3 -->
      <div class="touchenoire" onMouseDown="touchenoirePress(35);" onMouseUp="touchenoireUp();" style="margin-left:840px;"><audio id="35wav" src="http://www.letime.net/PianoBaul/35.wav" preload></audio></div>
      </div>


  </body>
</html>



Je dois encore coder pour récupérer les valeurs sélectionnées dans le menu.
ensuite faire générer les sons au serveur, ensuite encore lire les sons en plus de l'affichage actuel.

Cordialement

#23 Re : Suivi du Wiki et des Projets Git » wiki SequenBaul » 08-05-2015 07:57:24

Bonjour,

Je suis toujours à la recherche de DEV pour le projet SequenBaul (qui englobe la BAUL).

Je viens de mettre à jour mon site et cela m'a donner l'idée de lancer un nouveau projet toujours autour de la BAUL.
Une fois la mise à jour du graphisme de mon site fini (plusieurs centaines de pages).

J'ai pour projet de :
1- réunir une équipe de concepteur pour améliorer le cours sur les lois physiques http://www.letime.net/cours/
2- A partir de la structure du cours modifié créer une version de PianoBaul en HTML5 couplé à un serveur linux et créer une nouvelle version de SequenBaul dont les class reprendront la structure du cours sur les lois physiques de l'acoustique.

En attendant d'avoir la nouvelle structure des class, je laisse le git en l'état.

Cordialement

#24 Re : Suivi du Wiki et des Projets Git » wiki SequenBaul » 26-04-2015 05:54:12

Bonjour,
Merci.

Je suis entrain de créer une version anglaise du cours avec pour objectif associé de trouver des intervenants pour structurer le code.
Je pense que la problématique est issus qu"il faut en premier créer une base conceptuelle de codage, et ensuite définir comment développer le code sur cette base.
En d'autres mots, la force du code est qu'il n'est pas parfait au sens entendu aujourd'hui, la notion de parfais n’apparaît que sur les effets, alors que la force du code c'est qu'il ne cherche qu"à utiliser les causes. Ce n'est qu'un sentiment qui se vérifiera que si j'arrive à confronter l'idée en travaillant avec d'autres codeurs.

La page est en construction ici : http://www.letime.net/cours/en

Cordialement

#25 Re : Suivi du Wiki et des Projets Git » wiki SequenBaul » 12-04-2015 01:38:04

Bonjour,
Je viens d'ajouter l'octet 8 à 18 dans octet 2 à 1 et octet 1 à 74.
Cette forme sert à démontrer que ce sont les forces qui font que les sons sont aigu ou grave.
En exemple
https://commons.wikimedia.org/wiki/File … 3_2_44.ogg 
en augmentant la force
https://commons.wikimedia.org/wiki/File … 6_2_44.ogg
Cordialement

P.S.
Le wiki est toujours dans chantier serait-il possible de le sortir de l'attelier pour le placer ?

Pied de page des forums

Propulsé par FluxBB