Diagon: Générateur d'ASCII art interactif.

Diagon

Langages: C++ (WebAssembly), Javascript, CSS, HTML.
WebApp: www.arthursonzogni.com/Diagon

C'est une collection d'outils. Il prend en entrée un représentation de style markdown et produit en sortie une représentation en ASCCI art.
Je vous laisse tester et me donner vos avis.

Il y a pour l'instant 5 outils et plein d'options pour choisir le style.

• Diagramme de séquence.
  
• Graph planaires.
  
• Arbres.
  
• Boites.
  
• Tableaux.
  

J'aimerais également, si vous avez des idées, trouvez d'autres outils qui pourraient être ajouté à la collection.
N'hésitez pas à contribuer si vous le souhaitez.

Screenshots:

Note: J'ai un peu honte du nom du projet. Si il y a des suggestions, je prend! Merci.

C'est cool tout ça
Manque juste un thème dark pour pas défoncer nos pauvres yeux de taupes :p

Et voila, j'ai ajouté un thème dark.

(Si la réponse du serveur est une suite de caractères bizarres, merci d'attendre 60min à partir de maintenant (Il faut que je configure ça, mais je préfère attendre aujourd'hui))

C'est vraiment cool, ça a l'air de bien fonctionner.
Je vais sûrement utiliser tout ça pour faire de jolis commentaires dans mon code

C'est nice et ça marche plutôt bien =D

Le coup de fournir des exemples, c'est super aussi =)

J'ai des défauts d'affichage sous Firefox 59.0.2 64bits, (en unicode).
C'est particulièrement voyant avec les "Tables" (un peu rounded, beaucoup bold et cells).

Des options à rajouter ?
Peut être des caractères customs ? (genre pour les tables, choisir les horizontals, verticals, et le cas échéant headers)
Une ombre pour les frames ? Un effet "parchemin" ?

Le planar graph en ASCII est pas super lisible, mais je vois pas comment l'améliorer =/
(Mais c'est génial en tout cas =D)

Je serais curieux de voir jusqu'où ça va aller cette histoire =D

Merci pour ces retours !

onilink a écrit:

C'est vraiment cool, ça a l'air de bien fonctionner.
Je vais sûrement utiliser tout ça pour faire de jolis commentaires dans mon code

Merci! J'ai surtout fait cet outil pour faire de commentaires utiles dans mon code. Donc parfait!

[TheDarkTiger] a écrit:

C'est nice et ça marche plutôt bien =D
Le coup de fournir des exemples, c'est super aussi =)

Oui, j'ai toujours pensé qu'il était plus simple d'apprendre par l'exemple plutôt que par des instructions. En plus je n'ai pas besoin de traduire les explication dans plusieurs langages.

[TheDarkTiger] a écrit:

J'ai des défauts d'affichage sous Firefox 59.0.2 64bits, (en unicode).
C'est particulièrement voyant avec les "Tables" (un peu rounded, beaucoup bold et cells).

J'ai surtout testé le rendu avec Chrome. Je viens de tester avec Firefox, ça à l'air de fonctionner. J'ai changer un peu le CSS aujourd'hui pour avoir un meilleur affichage sur mobile, peut-être que j'ai fixé le soucis entre temps?

[TheDarkTiger] a écrit:

Des options à rajouter ?
Peut être des caractères customs ? (genre pour les tables, choisir les horizontals, verticals, et le cas échéant headers)

Bonne idée. Mon soucis, c'est que mon modèle actuel utilise 22 caractères différents. Tous mes thèmes sont basés sur ce modèle.
https://github.com/ArthurSonzogni/Diagon/blob/master/src/translator/table/Table.cpp

[TheDarkTiger] a écrit:

Une ombre pour les frames ? Un effet "parchemin" ?

Il y a sans doute pas mal de variantes à faire pour les "frames".

[TheDarkTiger] a écrit:

Le planar graph en ASCII est pas super lisible, mais je vois pas comment l'améliorer =/
(Mais c'est génial en tout cas =D)

Oui je suis d'accord. C'était le plus grand défi après "sequence diagram".  C'est très compliqué de faire un rendu en ASCII art d'un graphe. D'ailleur j'avais demandé de l'aide sur ce forum ici: https://cbna.forumactif.com/t13514-c-dessin-de-graph-en-ascii-art

[TheDarkTiger] a écrit:

Je serais curieux de voir jusqu'où ça va aller cette histoire =D

Merci!

arthuro a écrit:

Bonne idée. Mon soucis, c'est que mon modèle actuel utilise 22 caractères différents. Tous mes thèmes sont basés sur ce modèle.
https://github.com/ArthurSonzogni/Diagon/blob/master/src/translator/table/Table.cpp

Bha c'est cool ça =D
Y a juste à proposer à l'utilisateur de rentrer ses 22 caractères =)

arthuro a écrit:

Oui je suis d'accord. C'était le plus grand défi après "sequence diagram".  C'est très compliqué de faire un rendu en ASCII art d'un graphe. D'ailleur j'avais demandé de l'aide sur ce forum ici: https://cbna.forumactif.com/t13514-c-dessin-de-graph-en-ascii-art

Vi, je me souviens de ce thread ^^
Peut être "aérer" plus en vertical ?

^^

C'est compliqué sans l'input de l'utilisateur de présenter un graph qui représente vraiment ce que l'utilisateur souhaite. Basiquement, moi, je place les sommets du graph à l'endroit à ça me chante, du moment où je peux tracer le graphique. Il se trouve que c'est bof presque tout le temps.

Ha oui, je me doute bien =P
C'est pour ça que je l'ai pas fait XD

[Mise à jour]

J'ai rajouté un module pour afficher des formules mathématiques:







Pas mal non?
Cela fonctionne en ASCII ou en Unicode.
Si vous avez des idées d'ASCII arts pour des math, n'hésitez pas.

Le résultat est vraiment cool! Beau boulot.

Petite mise à jour: Les vecteurs / matrices.

C'est ****** de cool!
J'en avais justement besoin pour documenter ma bibli de transformations =D

Cool, content que ça puisse être utile. J'espère l'utiliser pour commenter mon code.
Je pense que le module de math et celui des diagrammes séquence sont les plus utiles pour ça.

Je viens de faire un test avec les matrices pour des transformation:

Input:

Code:

rotationz(theta) = [+cos(theta), -sin(theta), 0, 0; +sin(theta), +cos(theta), 0, 0; 0, 0, 1, 0; 0, 0, 0, 1]

translation(alpha, beta, gamma) = [1,0,0,alpha; 0,1,0,beta; 0,0,1, gamma; 0,0,0,1]

projection = [1,0,0,0; 0,1,0,0; 0,0,0,1; 0,0,1,0]

Output:


Un second essai pour la route:

Sympa = D
Tu utilise quels caractères ASCII pour les intégrales ou les grandes parenthèses ?

Merci  

Voila le code source:
https://github.com/ArthurSonzogni/Diagon/blob/master/src/translator/math/Math.cpp#L548

Il y a déjà des symboles unicode pour faire des parenthese en plusieurs parties:
U+239B ⎛ e2 8e 9b LEFT PAR­EN­THE­SIS UPPER HOOK
U+239C ⎜ e2 8e 9c LEFT PAR­EN­THE­SIS EXTENSION
U+239D ⎝ e2 8e 9d LEFT PAR­EN­THE­SIS LOWER HOOK
U+239E ⎞ e2 8e 9e RIGHT PAR­EN­THE­SIS UPPER HOOK
U+239F ⎟ e2 8e 9f RIGHT PAR­EN­THE­SIS EXTENSION
U+23A0 ⎠ e2 8e a0 RIGHT PAR­EN­THE­SIS LOWER HOOK

Vi, unicode, mais pour l'ASCII tu fait comment ? =P
Et à regarder le code source, j'ai compris ^^
Cool ça =)

Petite vidéo: https://www.youtube.com/watch?v=t-kOvfkOBKo

Tu devrais en profiter pour faire un peu de pub, genre envoyer un mail a korben. Il avait fait un article sur un tool du genre mais tout pourris, donc avec de la chance il pourrait en faire un sur celui la vu les capacités de la bête :p

Oui, j'avoue que j'ai un peu de mal a en faire de la pub. Il faudrait que je le poste sur Reddit et peut-être en parler à Korben. Mais j'ose pas vraiment haha.

D'ailleurs avec Google Analytics, j'ai pu voir quelques endroits d'où venait les gens. Un grand merci Oni, pour en avoir parlé dans les commentaires de Korben. ;

Si l'application web ne suffit pas, j'ai fais un package natif pour Linux:

# sudo snap install diagon

Cool ça, d'autres projets sur le feu sinon? :p

Comme IceMaze et InTheCube, je suis en train de webassemblifier Pigami

Pour les 3, j'utilise SMK
J'ai bientôt fini.

Ensuite deux trois idées que j'ai pas encore commencé:
[1] Une visualisation / simulation quantique de l’intéraction proton / electron / photon . Je voudrais reproduire: cela
[2] Un "livre" web de visualisations sympa en C++/WebAssembly. Peut-être faire cela de manière collaboratif.
[3] Modifier SMK pour gérer les "touch" events. J'aimerais pouvoir jouer à mes jeux depuis un smartphone.

Deux trois outils que j'aimerais bien fabriquer pour Chrome:
[1] Un analyseur de code. J'aimerais détecter plusieurs pattern de code inutiles. Voir de produire automatiquement les patch pour les supprimer.
[2] Un debugger basé sur LLD ? J'aimerais faire quelque chose de plus friendly que gdb. J'ai également de gros problèmes de performances avec gdb lorsque je l'utilise sous Chrome. Peut-être que je pourrais trouver de quoi rendre cela plus

Ah ouais cool. C'est quoi la difficulté du portage de pigami? T'as utilisé des trucs pas compatible avec webgl?

Pour la visualisation d'interactions photon etc c'est marrant car j'avais trouvé une application qui faisait exactement ça il y a un moment, quand j'étais a la fac, c'était super fun.

Ouais jouer a ses jeux sur smartphone sans avoir a se taper les technos de ***** ça peut être cool, mais t'utilises quoi du coup? La version "html5" ou tu fais un vrai binaire? (ta lib peut export vers android?)

Un analyseur de code ça peut être fun par contre ça a pas l'air simple a faire.
Tu veux dire quoi par utiliser gdb sous chrome?

Pigami utilisait la SFML et l'ancien opengl en mode quasi synchrone avec glvertex & co.

Pour ma version Android, je vais sans doute pas m'embetter a faire une application Android. Je vais rester sur une application web. Je vais en faire un PWA / TWA. Je dois même pouvoir le faire apparaître dans le play store d'android et de Windows..

Pour l'analyseur de code, il y a plein de code inutile dans Chrome. J'aimerais lister tous les endroits où je les trouve, ensuite n'importe qui pourrait regarder la liste et soumettre un simple patch.

Quand je dit GDB sous Chrome, je veux dire Chrome est tellement grand que lancer GDB prend beaucoup de temps. C'est presque inutilisable. Egalement, j'aimerais une interface textuelle plus sympa que GDB. Peut-être que je pourrais utiliser FTXUI.
Actuellement avec Chrome, je fais principalement du printf-debugging ; tellement GDB est inutilisable.

Ah ouais, mais du coup tu participes au projet chromium?

Oui, depuis maintenant plus de 3 ans.
https://github.com/chromium/chromium/commits?author=ArthurSonzogni&since=2019-01-01&until=2019-11-23

C'est cool, tu fais ça en rapport avec ton job ou c'est juste pour le fun? :p

Plutôt pour le fun. Après si je comprend comment analyser facilement du code C++, j'aurais de grand pouvoirs!

Ahah ouais, j'ai toujours voulu m'y mettre aussi, en utilisant le parser C++ de clang, mais bon ça demande quand même un investissement en temps assez conséquent pour en faire quelque chose...

En tout cas j'espère que ça aboutira tout ça