Nathan : Différence entre versions

De Design numérique
Aller à : navigation, rechercher
 
(12 révisions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
−
== Fragment ==
 
  
−
==== Piste d'outils: GraphVis ====
+
== Installation Escalier ==
  
−
Graph vis ets un outils Open Source de visualisation de structure en diagrammes. L'outil se base sur le language DOT
+
http://qamo9384.odns.fr/nathan-prost/light-opalin
 +
 
 +
== Piste GraphVis ==
 +
=== Pseudo-code ===
 +
Graph vis est un outils Open Source de visualisation de structure en diagrammes. L'outil se base sur le language DOT
  
 
'''
 
'''
Ligne 20 : Ligne 23 :
 
En fessant cela on pourrai implémenter ces lignes dans graphVis et génère un digramme en SVG.  
 
En fessant cela on pourrai implémenter ces lignes dans graphVis et génère un digramme en SVG.  
  
−
Pour le VERSO on pourrait imprimer l'entièreté des fragments en mettant juste devant chaque fragment leur ID
+
Donc l'intention en pseudo-code serait
 +
 
 +
'''
 +
        // afficher tout les ID des fragments à la ligne
 +
// A chaque ligne si un frgament à un enfant inserer ces deux caractères -> et ensuite afficher tout les ID des fragments réponses qui sont raliés à lui
 +
// faire donc une boucle qui pour chaque fragment affiche son ID et si il y a enfant inserer la fleches -> et afficher les ID des enfants qui lui sont rallier
 +
// si il y plusieurs enfants concaténer la phrase ou entre chaque ID il y les caractères ->
 +
 
 +
'''
 +
 
 +
=== Code ===
 +
Construire deux fonction dans le fichier databuilder.js dans lequelle on trouve plusieur fonctions.
 +
1er fonction BuildGraph
 +
'''
 +
const buildDigraph = () => {
 +
let digraph = '';
 +
 +
Object.keys(fragments).forEach(key => {
 +
let line = key + '-> {';
 +
//enfants = fragments[key]['children']
 +
fragments[key]['children'].forEach (reponse => {
 +
line= line + reponse + ' ';
 +
})
 +
line = line+'}';
 +
digraph = digraph + line + '\n'  ;
 +
});
 +
return digraph;
 +
};
 +
'''
 +
Avec cette fonction on écrit des ligne qui suivent une structure spécifique. enne commence par L'ID du fragment utilisée ensuite la fonction insère un -> ouvre un crochet { et insère l'ID des enfants/réponses si il a des enfants
 +
ce qui donne par exemple :
 +
 
 +
'''
 +
0005-> {0007 0010 0021 }
 +
'''
 +
Avec un boucle forEach la fonction va examiner l'entièreté de l'objet sur le quelle on travaille et appliquer cette fonction sur chaque fragments. A la fin de chaque recherche de fragment il saute une ligne
 +
'''
 +
digraph = digraph + line + '\n'  ;
 +
'''
 +
Ce qui donne un resulat comme celui la
 +
 
 +
'''
 +
 
 +
0017-> {}
 +
0005-> {0007 0010 0021 }
 +
0007-> {0009 0030 0032 }
 +
0009-> {0025 0019 }
 +
0025-> {}
 +
0010-> {0008 }
 +
0021-> {0035 }
 +
0008-> {0015 }
 +
0015-> {0018 0036 }
 +
0018-> {}
 +
0019-> {0026 }
 +
0026-> {0028 0030 }
 +
0028-> {0035 }
 +
0030-> {}
 +
0027-> {}
 +
0032-> {}
 +
0035-> {}
 +
0036-> {}
 +
0002-> {0011 0024 0025 }
 +
0023-> {}
 +
0012-> {0025 }
 +
0011-> {}
 +
0016-> {0020 0034 }
 +
0020-> {}
 +
0024-> {}
 +
0034-> {0042 }
 +
0039-> {}
 +
0042-> {}
 +
0044-> {}
 +
0003-> {0006 0004 }
 +
0006-> {0004 }
 +
0004-> {0014 0033 0038 }
 +
0014-> {0022 0033 0045 }
 +
0022-> {}
 +
0029-> {0037 0041 }
 +
0033-> {0041 }
 +
0037-> {}
 +
0038-> {0045 }
 +
0041-> {}
 +
0045-> {}
 +
 
 +
'''
 +
 
 +
Ensuite à moi d'y ajouter les paramètres graph viz qui dans mon cas sont la création d'un diagramme il suffit juste donc d'appeler le diagramme
 +
 
 +
'''
 +
 
 +
digraph {
 +
0014-> {0022 0033 0045 }
 +
0022-> {}
 +
0029-> {0037 0041 }
 +
0033-> {0041 }
 +
0037-> {}
 +
0038-> {0045 }
 +
0041-> {}
 +
0045-> {}
 +
}
 +
 
 +
'''
 +
 
 +
=== Design ===
 +
 
 +
Pour manipuler les diagrammes je voulais utiliser des formats SVG tracable au plotter pour approcher des formats peut etre plsu variée. Utilisant des SVG les glyphes que j'utilisent doit être ceux de typographies Hershey.
 +
J'explore donc les typographies de la typothèque [http://hershey-noailles.luuse.io/www/ Hershey Noailes de luuse]
 +
 
 +
Single Line Fonts (site)
 +
https://www.singlelinefonts.com/collections/svg-fonts
 +
https://www.singlelinefonts.com/collections/rhino-fonts
 +
 
 +
One Line Fonts
 +
https://www.onelinefonts.com/
 +
 
 +
Glukfonts.pl (single-line fonts TTF / Fontforge export)
 +
https://www.glukfonts.pl/font.php?font=ResamitzSL-SVGinOT
 +
https://www.glukfonts.pl/font.php?font=ZnikoSL-SVGinOT-8
 +
 
 +
Carvalho-Bernau, police de caractères Bill, 2013
 +
(2 graisses, hommage au Gill Sans, meta-squelette pour générateur de fontes automatiques en ligne pour le Sandberg Institute)
 +
https://sandberg.nl/typeface
 +
 
 +
Team Rietveld aussi: Paul Bernhard https://pbernhard.com
 +
et sa Hershey-futural qui est très cool: https://gitlab.com/swrs
  
−
==== Pseudo-code pour javascript
 
−
====
 
  
−
// afficher tout ID des fragments à la ligne
+
https://images.erg.school/JWnhmL5v/8aHQ5LiN.png
−
// a chaque ligne si un frgaments à un enfant insere ces deux caractères -> et ensuite afficher tout les ID de fragment réponse qui sont raliés à lui
 
−
// faire donc une boucle qui pour chaque fragfragment affiche son ID et si il y a enfant insere les deux caratères -> et afficher les ID des enfants qui lui osnt rallier
 
−
// si il y plusieur enfants concatener la phrase ou entre chauqe ID il y les caractères ->
 

Version actuelle datée du 18 avril 2024 à 15:03

Installation Escalier

http://qamo9384.odns.fr/nathan-prost/light-opalin

Piste GraphVis

Pseudo-code

Graph vis est un outils Open Source de visualisation de structure en diagrammes. L'outil se base sur le language DOT 

   digraph {
     a -> b 
   }

Et avec ce code on peut visualiser une bulle 'a' dont part une flèche qui mène à b.

Peut être demander un structure au init.js de produire par exemple pour le fragment 0001 d'afficher son ID et de si il a un enfant afficher : 

   0001 -> 000? // l'ID de son enfant

En fessant cela on pourrai implémenter ces lignes dans graphVis et génère un digramme en SVG.

Donc l'intention en pseudo-code serait 

       // afficher tout les ID des fragments à la ligne

// A chaque ligne si un frgament à un enfant inserer ces deux caractères -> et ensuite afficher tout les ID des fragments réponses qui sont raliés à lui // faire donc une boucle qui pour chaque fragment affiche son ID et si il y a enfant inserer la fleches -> et afficher les ID des enfants qui lui sont rallier // si il y plusieurs enfants concaténer la phrase ou entre chaque ID il y les caractères ->

Code

Construire deux fonction dans le fichier databuilder.js dans lequelle on trouve plusieur fonctions. 1er fonction BuildGraph const buildDigraph = () => { let digraph = ;

Object.keys(fragments).forEach(key => { let line = key + '-> {'; //enfants = fragments[key]['children'] fragments[key]['children'].forEach (reponse => { line= line + reponse + ' '; }) line = line+'}'; digraph = digraph + line + '\n'  ; }); return digraph; }; Avec cette fonction on écrit des ligne qui suivent une structure spécifique. enne commence par L'ID du fragment utilisée ensuite la fonction insère un -> ouvre un crochet { et insère l'ID des enfants/réponses si il a des enfants ce qui donne par exemple :

0005-> {0007 0010 0021 } Avec un boucle forEach la fonction va examiner l'entièreté de l'objet sur le quelle on travaille et appliquer cette fonction sur chaque fragments. A la fin de chaque recherche de fragment il saute une ligne digraph = digraph + line + '\n'  ; Ce qui donne un resulat comme celui la

0017-> {} 0005-> {0007 0010 0021 } 0007-> {0009 0030 0032 } 0009-> {0025 0019 } 0025-> {} 0010-> {0008 } 0021-> {0035 } 0008-> {0015 } 0015-> {0018 0036 } 0018-> {} 0019-> {0026 } 0026-> {0028 0030 } 0028-> {0035 } 0030-> {} 0027-> {} 0032-> {} 0035-> {} 0036-> {} 0002-> {0011 0024 0025 } 0023-> {} 0012-> {0025 } 0011-> {} 0016-> {0020 0034 } 0020-> {} 0024-> {} 0034-> {0042 } 0039-> {} 0042-> {} 0044-> {} 0003-> {0006 0004 } 0006-> {0004 } 0004-> {0014 0033 0038 } 0014-> {0022 0033 0045 } 0022-> {} 0029-> {0037 0041 } 0033-> {0041 } 0037-> {} 0038-> {0045 } 0041-> {} 0045-> {}

Ensuite à moi d'y ajouter les paramètres graph viz qui dans mon cas sont la création d'un diagramme il suffit juste donc d'appeler le diagramme

digraph { 0014-> {0022 0033 0045 } 0022-> {} 0029-> {0037 0041 } 0033-> {0041 } 0037-> {} 0038-> {0045 } 0041-> {} 0045-> {} }

Design

Pour manipuler les diagrammes je voulais utiliser des formats SVG tracable au plotter pour approcher des formats peut etre plsu variée. Utilisant des SVG les glyphes que j'utilisent doit être ceux de typographies Hershey. J'explore donc les typographies de la typothèque Hershey Noailes de luuse

Single Line Fonts (site) https://www.singlelinefonts.com/collections/svg-fonts https://www.singlelinefonts.com/collections/rhino-fonts

One Line Fonts https://www.onelinefonts.com/

Glukfonts.pl (single-line fonts TTF / Fontforge export) https://www.glukfonts.pl/font.php?font=ResamitzSL-SVGinOT https://www.glukfonts.pl/font.php?font=ZnikoSL-SVGinOT-8

Carvalho-Bernau, police de caractères Bill, 2013 (2 graisses, hommage au Gill Sans, meta-squelette pour générateur de fontes automatiques en ligne pour le Sandberg Institute) https://sandberg.nl/typeface

Team Rietveld aussi: Paul Bernhard https://pbernhard.com et sa Hershey-futural qui est très cool: https://gitlab.com/swrs


8aHQ5LiN.png

Récupérée de « https://designnumerique.be/w/index.php?title=Nathan&oldid=4530 »