Ecrire en graphieros sur son navigateur

Bonjour chers amis,

ce matin j'ai fini de programmer cette application qui permet d'écrire en graphieros directement avec son clavier.
Cela fonctionne avec un clavier physique uniquement, donc si vous ne possédez qu'un téléphone intelligent, je vous prie de bien vouloir accepter mes condoléances.

L'application se trouve ici

J'ai normalement laissé suffisamment d'indications pour que l'utilisateur puisse se débrouiller afin d'utiliser l'éditeur, mais comme on ne sait jamais, voici un petit tuto:

1. Choisir la couleur
   Indiquez une valeur de 0 à 255 pour le rouge, vert, bleu; dans les champs R,G,B

2. dans la cellule en bas de l'écran, saisissez par exemple "humain" puis tapez ENTREE, vous verrez apparaître:
   - le glyphe, avec la couleur que vous avez sélectionnée
   - en bas du cadre, le mot en français associé à sa phonologie
   - la mention "lien actif, x + ENTER pour couper": tapez par exemple "pluriel", vous verrez que le lien s'est fait entre les deux glyphes, pour indiquer qu'il s'agit d'un seul mot.

3. pour taper des mots en utilisant la phonologie et pas le français, il faut préfacer avec un underscore. Si l'on voulait écrire "humain" mais utiliser la phonologie, il faudrait donc saisir _ka. C'était indispensable, car certains petits mots en français comme "ni","ne" avaient leurs homologues en phono, mais pour des glyphes différents, ce qui conduisait à une fusion des deux glyphes.

4. la navigation
   - appuyer sur entrer renvoie à la ligne.
   - appuyer sur la flèche de droite de votre clavier positionne le curseur sur la ligne suivante à droite
   - appuyer sur la flèche de gauche de votre clavier positionne le curseur 1/2 glyphe plus bas, pour que les lignes soient disposées dans un beau damier hexagonal
   - appuyer sur la flèche du haut permet de revenir un glyphe en arrière

Bon courage

Tout ces textes que tu vas pouvoir nous poster alors.

En voilà un:

Les mots ne me paraisse guère adaptés pour qualifier cette merveille ideolinguistique visuelle, le français à bien magnifique et à couper le souffle, le velangz non finaliser à déjà galasta.

Oooh, je vois que tu sais aussi peindre avec un clavier. Ce n'est pas trop long de choisir les couleurs sur le moment pour chaque caractère ? Surtout que tu ne peux pas revenir en arrière pour effacer.
La glose en bas de l'écran est très bien présentée. Même cela peut devenir de l'art.

Citation :

Cela fonctionne avec un clavier physique uniquement, donc si vous ne possédez qu'un téléphone intelligent, je vous prie de bien vouloir accepter mes condoléances.

Tu disais ? https://www.amazon.com/s?k=Smartphone+Keyboard

C'est beau!
Petite suggestion: permettre de charger un fichier qui encode à la fois les couleurs et les graphèmes, pour une conversion immédiate (et pour pouvoir modifier plus facilement).
Et en fait, si tu veux implémenter une interface de rédaction complète, tu peux stocker sous ce format en interne, gérer les clicks (attache des gestionnaires d'évènements sur les objets svg), et rafraichir l'affichage à partir du format interne.

Merci à tous pour vos réactions

Mardikhouran a écrit:

Oooh, je vois que tu sais aussi peindre avec un clavier. Ce n'est pas trop long de choisir les couleurs sur le moment pour chaque caractère ? Surtout que tu ne peux pas revenir en arrière pour effacer.
La glose en bas de l'écran est très bien présentée. Même cela peut devenir de l'art.

Oui, Mardi, j'ai passé trois heures à réaliser le texte ci-dessus. Il y a une technique pour revenir en arrière et effacer. Tu remontes d'un glyphe en arrière, puis tu retapes le même en noir. Un peu comme avec la machine à écrire, quand tu utilises du tipp ex

Hanhól Hoguèm a écrit:

Tu disais ? https://www.amazon.com/s?k=Smartphone+Keyboard Very Happy

C'est vrai, tu as raison, tant qu'un vrai clavier peut être utilisé, qu'importe l'écran pourvu qu'on ait l'e-vrai.

Leo a écrit:

C'est beau!
Petite suggestion: permettre de charger un fichier qui encode à la fois les couleurs et les graphèmes, pour une conversion immédiate (et pour pouvoir modifier plus facilement).
Et en fait, si tu veux implémenter une interface de rédaction complète, tu peux stocker sous ce format en interne, gérer les clicks (attache des gestionnaires d'évènements sur les objets svg), et rafraichir l'affichage à partir du format interne.

C'est l'étape suivante, en effet! Je suis débutant en programmation, donc j'y vais étape par étape. Il y a deux ans, quand je faisais mon premier dictionnaire en svg, je codais toutes les coordonnées à la main. Ensuite j'ai fait une interface qui permet de tracer les glyphes sur l'écran, et de copier le svg; ou d'enregistrer les coordonnées, le nom et la phono sur une base de données MySQL, ce qui me permet de maintenir la bdd qui est ici à jour.

L'étape intermédiaire pourrait passer par un textarea sur lequel tout un texte serait rédigé, et qui génèrerait le code, après avoir été regexé comme il faut. Je ne suis pas sûr d'avoir le niveau pour m'y attaquer, d'autant que le code devrait être complètement différent, car dans la version actuelle tout est lié à l'évènement de taper sur un clavier (pas très performant donc, puisque toute la fonction se relance à chaque fois lol). Merci pour les idées

Graphieros a écrit:

Leo a écrit:

C'est beau!
Petite suggestion: permettre de charger un fichier qui encode à la fois les couleurs et les graphèmes, pour une conversion immédiate (et pour pouvoir modifier plus facilement).
Et en fait, si tu veux implémenter une interface de rédaction complète, tu peux stocker sous ce format en interne, gérer les clicks (attache des gestionnaires d'évènements sur les objets svg), et rafraichir l'affichage à partir du format interne.

C'est l'étape suivante, en effet! Je suis débutant en programmation, donc j'y vais étape par étape. Il y a deux ans, quand je faisais mon premier dictionnaire en svg, je codais toutes les coordonnées à la main. Ensuite j'ai fait une interface qui permet de tracer les glyphes sur l'écran, et de copier le svg; ou d'enregistrer les coordonnées, le nom et la phono sur une base de données MySQL, ce qui me permet de maintenir la bdd qui est ici à jour.

L'étape intermédiaire pourrait passer par un textarea sur lequel tout un texte serait rédigé, et qui génèrerait le code, après avoir été regexé comme il faut. Je ne suis pas sûr d'avoir le niveau pour m'y attaquer, d'autant que le code devrait être complètement différent, car dans la version actuelle tout est lié à l'évènement de taper sur un clavier (pas très performant donc, puisque toute la fonction se relance à chaque fois lol). Merci pour les idées

Tant mieux si vous vous comprenez, mais pour ma part, j'y comprends rien, lol.

Un jour, tu sauras coder la méthode mabo

Graphieros a écrit:

C'est l'étape suivante, en effet! Je suis débutant en programmation, donc j'y vais étape par étape. Il y a deux ans, quand je faisais mon premier dictionnaire en svg, je codais toutes les coordonnées à la main. Ensuite j'ai fait une interface qui permet de tracer les glyphes sur l'écran, et de copier le svg; ou d'enregistrer les coordonnées, le nom et la phono sur une base de données MySQL, ce qui me permet de maintenir la bdd qui est ici à jour.

L'étape intermédiaire pourrait passer par un textarea sur lequel tout un texte serait rédigé, et qui génèrerait le code, après avoir été regexé comme il faut. Je ne suis pas sûr d'avoir le niveau pour m'y attaquer, d'autant que le code devrait être complètement différent, car dans la version actuelle tout est lié à l'évènement de taper sur un clavier (pas très performant donc, puisque toute la fonction se relance à chaque fois lol). Merci pour les idées

Ecrire tout le texte afin de le traduire en un seul tenant (clic sur un bouton ou événement Enter) est une solution simple et efficace. Ceci dit, relancer la fonction à chaque événement clavier n'est pas rédhibitoire, vue la vitesse des machines, c'est juste un peu bourrin, mais il n'y a pas mort d'homme

Tu n'es pas obligé d'utiliser des regexps, souvent un simple replace suffit. Maintenant, en fonction du langage utilisé, en utilisant des arrays ou des listes associatives, ton moteur principal peut se résumer en une seule ligne (si, si !).

Il n'est pas obligatoire de stocker tes glyphes dans une BdD, il existe d'autres solutions.
Ça dépend aussi de l'encodage de tes symboles (string, array ou bits d'un int).

Velonzio Noeudefée a écrit:

Tant mieux si vous vous comprenez, mais pour ma part, j'y comprends rien, lol.

On peut entrer dans les détails si tu veux - sur un autre fil ou sur celui-ci si Graphieros est d'accord.

Comme dit Patrik, on peut effectivement compresser énormément l'information vu la nature géométrique de l'écriture.

Je pense que ce fil est adapté à la poursuite de cette conversation
Pour cette appli j'ai déclaré les coordonnées svg x et y pour tous les points d'un seul hexagone. Ensuite, dans un array d'objets qui stockent le nom et les coordonnées de chaque mot, car je voulais que l'appli soit utilisable hors ligne. Quand on appuie sur entrée après avoir saisi un glyphe, alors les coordonnées déclarées au début s'incrementent, pour que le prochain glyphe apparaisse à la suite.
Le svg qui comprend tout le texte est unique, je ne voulais pas créer un nouvel svg à chaque fois.
PS. JavaScript

Les points sont facilement calculables et l'ensemble peut être mis en relatif par rapport à une origine globale (ox, oy), et une origine locale (lx, ly) pour chaque symbole.
Après, c'est juste une histoire de stockage des codages des diverses glyphes pour générer le svg ou le bitmap (au choix).
Il faudra que je me penche sur ce cas quand j'aurais un peu de temps.

PatrikGC a écrit:

Les points sont facilement calculables et l'ensemble peut être mis en relatif par rapport à une origine globale (ox, oy), et une origine locale (lx, ly) pour chaque symbole.
Après, c'est juste une histoire de stockage des codages des diverses glyphes pour générer le svg ou le bitmap (au choix).
Il faudra que je me penche sur ce cas quand j'aurais un peu de temps.

C'est ce que j'ai fait à l'origine, tu peux jeter un oeil sur mon Github

Graphieros a écrit:

C'est ce que j'ai fait à l'origine, tu peux jeter un oeil sur mon Github

J'ai été voir ton code, je vois que tu as utilisé du JS dernier cri (const et let par ex)
Par contre, la POO est restrainte, mais du moment que ça fonctionne...

Pour le stockage des données, tu as fait copieux !
Tu as utilisé le mécanisme :
let glyph_database = [{name: '_sola', fr: 'son', path:'....'},...];
Tu te serais simplifié la vie avec :
let glyph_database = {'_sola':{fr: 'son', path:'....'},...};
L'accès à l'information est plus rapide ainsi par une liste associative.

Le code du path pourrait être compressé.
Sans trop chercher à me casser le crâne, j'aurais encodé chaque trait par une lettre, j'en compte 15 ou 18 selon comment on se place. Ajoutons d'autres codes pour passer un glyphe suivant, sauter de ligne ou de colonne, mettre des couleurs etc.

PatrikGC a écrit:

Y manquerait pas un triangle ?

Anoev a écrit:

Y manquerait pas un triangle ?

En effet...
Néanmoins, ça continue de tenir avec les 26 lettres de l'alphabet.
Contours = 6
Rayons = 6
Triangles = 6
Grosses diagonales = 3 (facultatif)
Donc 18 ou 21 traits.

PatrikGC a écrit:

Graphieros a écrit:

C'est ce que j'ai fait à l'origine, tu peux jeter un oeil sur mon Github

J'ai été voir ton code, je vois que tu as utilisé du JS dernier cri (const et let par ex)
Par contre, la POO est restrainte, mais du moment que ça fonctionne...

Comme j'ai commencé à pratiquer le JS récemment (moins d'un an), je me suis mis à utiliser ce qu'il y avait de plus récent (sauf pour les boucles, où j'aime beaucoup la forme traditionnelle). Je t'avoue que j'ai une préférence pour le style fonctionnel, mais que je n'ai pas trouvé mieux (pour l'instant), qu'un gros array rempli d'objets. Et c'est vrai que j'aurais pu enlever du gras pour les variables des coordonnées, mais j'ai utilisé quelque chose de très spatial, qui m'a permis de les coder très vite de mémoire.

Dans un glyphe, il y a 18 traits, donc codable sur 8x3=24 bits.
Donc un glyphe peut être binairement stocké sur 3 octets, du très économique !
Autre solution, 3 fois 6 segment, donc 3 fois 6 bits, donc codable en base 64... (3 octets aussi)

Ça me donne envie d'essayer de coder tout ça en C, ce que tu me dis-là ...

Graphieros a écrit:

Ça me donne envie d'essayer de coder tout ça en C, ce que tu me dis-là ...

Tu peux rester en JS, ça comprimera aussi fort bien, même en JSON.
Le codage en base 64 demanderait 3 caractères par glyphe, tes textes d'accompagnement sont plus gros
Ou bien, tu coupes la poire en 2 en utilisant de l'hexadécimal.

PatrikGC a écrit:

Le codage en base 64 demanderait 3 caractères par glyphe, tes textes d'accompagnement sont plus gros

Je confirme c'est le principe de la méthode mabo où chaque glyphe est transcrit par un code à trois caractère de 6 bits.

Citation :

Je confirme c'est le principe de la méthode mabo où chaque glyphe est transcrit par un code à trois caractère de 6 bits.

En effet, c'est dans le même esprit...
Merci Google et la directive site:

J'arrive après la réunion de chantier. Je n'ai plus qu'à ajouter qu'en attribuant des observateurs d'évènements de clic aux objets svg, tu peux sélectionner un glyphe pour le modifier, le supprimer, insérer un blanc, etc. Il faut bien entendu attribuer aux objets, à leur création, un identifiant ou un attribut "data" qui vont renseigner le gestionnaire d'évènement sur ce qui a été cliqué.

Je n'ai pas parcouru le code en détail mais j'ai l'impression que tu mets l'affichage à jour avec innerHTML += , c'est très lent. Il vaut mieux ajouter les nouveaux objets directement par appendChild ou insertBefore après les avoir créés avec createElementNS.

Quant à coder en style fonctionnel, le JS est plutôt souple et permet les deux styles, de ce que j'ai entendu - mais je n'ai pas trop d'expérience sur ce point.

Tu ne finiras jamais de m'épater avec ton travail à la fois pro et artistique.