diff --git a/README.md b/README.md index 0059b1d..69fd220 100644 --- a/README.md +++ b/README.md @@ -121,6 +121,12 @@ When a window is open in Pyramid, an image is displayed on it to attract the use https://github.com/OpenSmock/Pyramid/assets/49183340/0c66a3ac-7bea-48c1-b1e8-0b093b1db4d5 +## Documentation + +[User manual is available here](docs/user_documentation.md) + +[Version française disponible ici](docs/documentation_utilisateur.md). + ## Plugins ![image](https://user-images.githubusercontent.com/49183340/263474758-37833c2b-f7ad-4b46-ab58-cb3d92c28413.png) diff --git a/docs/documentation_utilisateur.md b/docs/documentation_utilisateur.md new file mode 100644 index 0000000..9f28f42 --- /dev/null +++ b/docs/documentation_utilisateur.md @@ -0,0 +1,957 @@ +# Table des matières + +[1 Ouvrir l’outil Pyramid +[3](#ouvrir-loutil-pyramid)](#ouvrir-loutil-pyramid) + +[2 Prise en main de Pyramid +[4](#prise-en-main-de-pyramid)](#prise-en-main-de-pyramid) + +[2.1 Raccourcis claviers +[4](#raccourcis-claviers)](#raccourcis-claviers) + +[2.1.1 Interne à Pyramid [4](#interne-à-pyramid)](#interne-à-pyramid) + +[2.1.2 Externe à Pyramid [5](#externe-à-pyramid)](#externe-à-pyramid) + +[2.2 Description des interfaces +[5](#description-des-interfaces)](#description-des-interfaces) + +[2.2.1 Barre d’outils de paramétrage +[6](#barre-doutils-de-paramétrage)](#barre-doutils-de-paramétrage) + +[2.2.1.1 Bouton cacher la fenêtre de navigation +[6](#bouton-cacher-la-fenêtre-de-navigation)](#bouton-cacher-la-fenêtre-de-navigation) + +[2.2.1.2 Bouton sauvegarder +[6](#bouton-sauvegarder)](#bouton-sauvegarder) + +[2.2.1.3 Bouton configuration de projet +[7](#bouton-configuration-de-projet)](#bouton-configuration-de-projet) + +[2.2.1.4 Bouton de paramètre utilisateur +[9](#bouton-de-paramètre-utilisateur)](#bouton-de-paramètre-utilisateur) + +[2.2.1.5 Bouton rafraîchissement +[10](#bouton-rafraîchissement)](#bouton-rafraîchissement) + +[2.2.2 Boutons annuler / refaire (Undo/Redo) +[10](#boutons-annuler-refaire-undoredo)](#boutons-annuler-refaire-undoredo) + +[2.2.3 Barre d’outils de l’espace de travail +[11](#barre-doutils-de-lespace-de-travail)](#barre-doutils-de-lespace-de-travail) + +[2.2.3.1 Bouton test [11](#bouton-test)](#bouton-test) + +[2.2.3.2 Bouton propriétés de l’espace de travail +[11](#bouton-propriétés-de-lespace-de-travail)](#bouton-propriétés-de-lespace-de-travail) + +[2.2.3.3 Bouton cacher la fenêtre de propriétés +[13](#bouton-cacher-la-fenêtre-de-propriétés)](#bouton-cacher-la-fenêtre-de-propriétés) + +[2.2.4 Fenêtre de navigation +[14](#fenêtre-de-navigation)](#fenêtre-de-navigation) + +[2.2.4.1 Bouton ajouter une nouvelle racine +[14](#bouton-ajouter-une-nouvelle-racine)](#bouton-ajouter-une-nouvelle-racine) + +[2.2.4.1.1 Colonne des catégories +[15](#colonne-des-catégories)](#colonne-des-catégories) + +[2.2.4.1.2 Colonne de visualisation du contenu de la catégorie +[16](#colonne-de-visualisation-du-contenu-de-la-catégorie)](#colonne-de-visualisation-du-contenu-de-la-catégorie) + +[2.2.4.1.3 Colonne de prévisualisation +[16](#colonne-de-prévisualisation)](#colonne-de-prévisualisation) + +[2.2.4.2 Bouton cochable cacher/montrer les fils +[17](#bouton-cochable-cachermontrer-les-fils)](#bouton-cochable-cachermontrer-les-fils) + +[2.2.4.3 Liste des fils dans l’espace de travail +[19](#liste-des-fils-dans-lespace-de-travail)](#liste-des-fils-dans-lespace-de-travail) + +[2.2.5 Menu contextuel clic droit +[19](#menu-contextuel-clic-droit)](#menu-contextuel-clic-droit) + +[2.2.5.1 Rechercher l’élément sélectionné +[20](#rechercher-lélément-sélectionné)](#rechercher-lélément-sélectionné) + +[2.2.5.2 Inspection de l’élément sélectionné +[21](#inspection-de-lélément-sélectionné)](#inspection-de-lélément-sélectionné) + +[2.2.5.3 Ajout d’enfant et suppression d’élément +[22](#ajout-denfant-et-suppression-délément)](#ajout-denfant-et-suppression-délément) + +[2.2.5.4 Modifier l’index d’un enfant dans son parent +[23](#modifier-lindex-dun-enfant-dans-son-parent)](#modifier-lindex-dun-enfant-dans-son-parent) + +[2.2.5.5 Grouper la sélection d’éléments +[24](#grouper-la-sélection-déléments)](#grouper-la-sélection-déléments) + +[2.2.5.6 Niveau sur le calque +[24](#niveau-sur-le-calque)](#niveau-sur-le-calque) + +[2.2.5.7 Copier/Coller [25](#copiercoller)](#copiercoller) + +[2.2.6 Fenêtre des propriétés +[25](#fenêtre-des-propriétés)](#fenêtre-des-propriétés) + +[2.2.6.1 Onglet propriétés (Props) +[25](#onglet-propriétés-props)](#onglet-propriétés-props) + +[2.2.6.2 Onglet visuels (Visuals) +[27](#onglet-visuels-visuals)](#onglet-visuels-visuals) + +[2.2.6.3 Onglet de disposition (layout) +[28](#onglet-de-disposition-layout)](#onglet-de-disposition-layout) + +[2.2.6.3.1 Disposition basique +[28](#disposition-basique)](#disposition-basique) + +[2.2.6.3.2 Disposition linéaire +[29](#disposition-linéaire)](#disposition-linéaire) + +[2.2.6.3.3 Disposition écoulement (Flow) +[30](#disposition-écoulement-flow)](#disposition-écoulement-flow) + +[2.2.6.3.4 Disposition en cadre (Frame) +[31](#disposition-en-cadre-frame)](#disposition-en-cadre-frame) + +[2.2.6.4 Onglet géométrie (Geo) +[31](#onglet-géométrie-geo)](#onglet-géométrie-geo) + +[2.2.6.5 Onglet gestion de thème (Toplo-Theme) +[32](#onglet-gestion-de-thème-toplo-theme)](#onglet-gestion-de-thème-toplo-theme) + +[2.2.6.5.1 Ajout de thème pour toplo theme manager +[34](#ajout-de-thème-pour-toplo-theme-manager)](#ajout-de-thème-pour-toplo-theme-manager) + +[2.2.6.6 Onglet Playground [35](#onglet-playground)](#onglet-playground) + +[2.2.7 Espace de travail [38](#espace-de-travail)](#espace-de-travail) + +[2.3 Fonctionnalités [39](#fonctionnalités)](#fonctionnalités) + +[2.3.1 Modification d’arborescence cliqué glissé / déposé +[39](#modification-darborescence-cliqué-glissé-déposé)](#modification-darborescence-cliqué-glissé-déposé) + +[2.3.2 Redimensionnement dynamique d’élément sélectionné +[41](#redimensionnement-dynamique-délément-sélectionné)](#redimensionnement-dynamique-délément-sélectionné) + + +# Ouvrir l’outil Pyramid + +Pour ouvrir Pyramid, dans un éditeur Pharo, aller dans Library -\> +Pyramid -\> New project, comme sur la capture d’écran : + + + +Cela va directement ouvrir l’outil Pyramid dans une fenêtre de Pharo. + +# Prise en main de Pyramid + +## Raccourcis claviers + +### Interne à Pyramid + +| **Raccourcis** | **Combinaison de touche** | **Description** | +|:--:|:--:|----| +| Undo | CTRL + Z | Reviens en arrière sur l’action précédente s’il y en a. | +| Redo | CTRL + Y | Reviens en avant sur l’action où on est revenu précédemment. | +| Copier | 1 élément sélectionné + CTRL + C | Permet de copier l’élément qui est actuellement sélectionné. | +| Coller | CTRL + V | Permet de coller un élément qui a été précédemment copié sur l’espace de travail. | +| Coller dans un élément | 1 élément sélectionné + CTRL + V | Permet de coller dans un élément sélectionné et l’ajouter en tant que fils. | +| Couper | 1 élément sélectionné + CTRL + X | Permet de couper l’élément sélectionné. | +| Sauvegarder | CTRL + S | Permet de sauvegarder un projet ouvert et configuré. | +| Tout sélectionner | CTRL + A | Permet de sélectionner tous les éléments de l’espace de travail. | +| Sélectionner tous les fils | 1 élément sélectionné + CTRL + A | Permet de pouvoir sélectionner tous les fils de l’élément sélectionné. | +| Grille | CTRL + G | Permet d’activer / désactiver la grille sur l’espace de travail | +| Supprimer la sélection | 1 élément ou plus sélectionné + CTRL + D | Permet de supprimer le ou les éléments sélectionnés. | +| Inspecter l’élément | 1 élément sélectionné + CTRL + I | Permet d’inspecter l’élément sélectionné. | +| Déplacer un fils vers le haut | 1 élément sélectionné + CTRL + Flèche haut | Permet de déplacer vers le haut un fils dans l’arborescence de son parent. | +| Déplacer un fils vers le bas | 1 élément sélectionné + CTRL + Flèche bas | Permet de déplacer vers le bas un fils dans l’arborescence de son parent. | +| Déplacer la vue | CTLR + Cliqué déplacé | Permet le déplacement de la vue sur l’espace de travail. | +| Position par défaut de la vue | CTRL + N | Permet de remettre la position de la vue sur l’espace de travail par défaut (emplacement) | +| Zoomer sur l’espace de travail | CTRL + Mollette Haut | Permet de zoomer sur l’espace de travail. | +| Dé zoomer sur l’espace de travail | CTRL + Mollette Bas | Permet de dé zoomer sur l’espace de travail. | + +Tous les raccourcis ci-dessous ne fonctionnent qu’avec le focus sur +l’espace (espace de travail) dans Pyramid. + +| **Raccourcis** | **Combinaison de touche** | **Description** | +|:--:|:--:|----| +| Déplacer un élément vers le bas | 1 élément sélectionné + Flèche Bas | Permet de déplacer un élément sélectionné vers le bas. | +| Déplacer un élément vers la droite | 1 élément sélectionné + Flèche Droite | Permet de déplacer un élément sélectionné vers la droite. | +| Déplacer un élément vers la gauche | 1 élément sélectionné + Flèche Gauche | Permet de déplacer un élément sélectionné vers la gauche. | +| Déplacer un élément à la position de la souris | 1 élément sélectionné + CTRL + Barre Espace | Permet de déplacer un élément sélectionné à la position de la souris. | + +### Externe à Pyramid + +| **Raccourcis** | **Combinaison de touche** | **Description** | +|:--:|:--:|----| +| Ouvrir un space dans Pyramid | F12 + focus sur un space d’une fenêtre Bloc/Toplo | Permet d’ouvrir directement dans Pyramid une application qui tourne dans une autre fenêtre en cours d’exécution en Pharo Bloc/Toplo. | + +## Description des interfaces + +Tout d’abord, vous pouvez voir ci-dessous l’aperçu global de l’interface +lorsque vous ouvrez l’outil Pyramid. + + + +### Barre d’outils de paramétrage + + + +#### Bouton cacher la fenêtre de navigation + +Permet de cacher la fenêtre de navigation : + + + + +C’est un bouton bascule (toggle) vous pouvez donc cacher la fenêtre en +cliquant dessus, mais aussi la rendre visible lorsque vous cliquez une +deuxième fois dessus. + +#### Bouton sauvegarder + + + +Ce bouton sert à sauvegarder les modifications effectuées et génère le +code source correspondant. + +Si la configuration du projet n’a pas été faite, une erreur est +affichée : + + + +Pour y remédier, il faut au préalable définir la configuration du projet +(cf. bouton suivant). + +#### Bouton configuration de projet + +Pour configurer la sauvegarde du projet : + + + +Le bouton ouvre une fenêtre qui permet de configurer l’emplacement de +sauvegarde du projet : + + + +Pour configurer la sauvegarde du projet dans l’onglet du bouton +« project configuration » il faut remplir les trois champs suivants : + +- Le nom du package + +- Le nom de la classe + +- Le nom de la méthode + +Choisir s’il faut enregistrer en côté classe ou côté instance. + +#### Bouton de paramètre utilisateur + + + +Permet d’ouvrir l’interface de paramètres utilisateur de Pyramid avec +les deux paramètres suivants : + +- Activer/Désactiver le raccourci F12 qui permet d’ouvrir dans Pyramid + une fenêtre Bloc/Toplo + +- Choisir le format de sérialisation soit en code source, soit en STON + +Fenêtre de paramètre ci-dessous : + + + +#### Bouton rafraîchissement + +Permet de rafraîchir l’espace de travail (zone centrale) : + + + +Ce bouton permet de résoudre les problèmes tels que la prévisualisation +du projet dans la zone centrale qui ne s’affiche plus, cela permet donc +de rafraîchir et de résoudre ce souci. + +Exemple : + + + +### Boutons annuler / refaire (Undo/Redo) + +### + +Ces boutons sont situés au centre de la barre d’outils, au-dessus de la +zone de travail. + + + +Le bouton avec une flèche vers la gauche (Undo) sert à revenir en +arrière sur une action passée et la flèche allant vers la droite (Redo) +permet de rejouer l’action précédemment annulée. + +### Barre d’outils de l’espace de travail + + + +#### Bouton test + + + +Il permet de mettre en exécution l’espace de travail et donc, d’utiliser +les boutons comme par exemple afficher un message dans Pharo avec une +notification lorsqu’on clique dessus. + +Lorsqu’on est en mode de test, l’icône du bouton est modifiée et on peut +sortir du mode test en recliquant dessus : + + + +#### Bouton propriétés de l’espace de travail + + + +Il permet de modifier la taille de l’espace de travail affiché dans la +partie de prévisualisation de l’IHM en ouvrant la fenêtre suivante : + + + +Mais aussi de pouvoir afficher ou cacher une grille grâce à son +paramètre de visibilité : + + + +On peut également modifier l’espacement entre deux lignes grâce à la +valeur du champ « Spacing » qui est modifiable. + + + +La couleur est aussi paramétrable soit par valeur hexadécimal et son +alpha (transparence). + + + +Ou grâce à une interface utilisateur disponible grâce au bouton +suivant : + + + +L’interface du choix de couleur : + + + +La première ligne correspond également au choix de couleur via une +valeur hexadécimale et d’un alpha (transparence). + +Le choix des couleurs se fait via les interfaces. + +Lorsque vous rentrez une valeur dans un champ textuel, veuillez bien +appuyer sur la touche « Entrée » pour valider les changements +(« Entrée » sur le clavier, pas le « Entrée » qui se situe sur le pavé +numérique). + +#### Bouton cacher la fenêtre de propriétés + + + +Ce bouton permet, comme pour le bouton cacher la fenêtre de navigation, +de pouvoir cacher la fenêtre de propriété à droite. + +### Fenêtre de navigation + + + +Cette fenêtre contient l’arborescence des éléments graphiques édités +dans le projet en cours, ainsi que des boutons / fonctionnalités +permettant de les manipuler. + +#### Bouton ajouter une nouvelle racine + + + +Ce bouton permet de rajouter un élément racine que l’on choisit via la +fenêtre qui s’ouvre. Voir ci-dessous. + + + +##### Colonne des catégories + + + +Cette colonne sert à afficher les différentes catégories disponibles et +de les afficher dans la colonne de visualisation du contenu de la +catégorie sélectionnée. + +##### Colonne de visualisation du contenu de la catégorie + + + +Cette colonne sert à visualiser les différents éléments disponibles dans +la catégorie sélectionnée dans la colonne des catégories. + +##### Colonne de prévisualisation + + + +Cette colonne sert à visualiser l’élément sélectionné dans la colonne de +droite et permet de l’ajouter dans l’espace de travail avec « add new +element ». + +Exemple de l’ajout de l’élément : + + + +#### Bouton cochable cacher/montrer les fils + + + +Cette case à cocher permet de cacher (ou afficher) les fils d’éléments +avec lesquels on ne peut pas interagir dans Pyramid (élément non +sérialisé). + +Exemple d’arborescence avec tous les enfants visibles : + + + +Lorsque les enfants ne sont pas visibles : + + + +#### Liste des fils dans l’espace de travail + + + +Cette liste permet de voir tous les éléments courants utilisés dans +l’espace de travail, et permet d’observer l’arborescence courante du +projet. + +On peut également interagir sur chaque élément avec un menu contextuel +grâce au clic droit. + +### Menu contextuel clic droit + +Ce menu contextuel fonctionne uniquement dans les zones suivantes : + +- Fenêtre de navigation + +- Espace de travail (zone centrale) + + + +On peut apercevoir le menu contextuel qui affiche le nom, l’élément +(class) et son Hash sur la première ligne. + +#### Rechercher l’élément sélectionné + + + +Ouvre la fenêtre suivante pour afficher la classe de l’élément. Voir +ci-dessous. + + + +#### Inspection de l’élément sélectionné + + + + + +Permet de faire une inspection de l’élément comme si on le faisait +depuis un playground. + +#### Ajout d’enfant et suppression d’élément + + + +L’ajout d’enfant permet de pouvoir ajouter un élément en tant que fils à +l’élément sélectionné et donc de pouvoir l’ajouter à son arborescence. + +La suppression de l’élément sélectionné permet de supprimer l’élément +ainsi que tous ses enfants. + +Exemple de suppression de plusieurs éléments : + + + +#### Modifier l’index d’un enfant dans son parent + + + +Ces 2 options permettent de modifier très facilement l’index des enfants +sélectionnés dans leurs parents soit de l’augmenter soit de le réduire. + +Exemple avant déplacement : + + + +Exemple après déplacement : + + + +Il y a également des raccourcis clavier pour le faire (Page Up et Page +Down). + +#### Grouper la sélection d’éléments + + + +Permet de grouper un ou plusieurs éléments sélectionnés dans un seul et +même groupe lors d’une multi-sélection. + +#### Niveau sur le calque + + + +Permet de modifier le niveau sur le calque de l’élément sélectionné : + +- On foreground : place l’élément au premier plan + +- On background : place l’élément en dernier + +- Move forward : augmente d’un niveau de calque + +- Move backward : réduit d’un niveau de calque + +#### Copier/Coller + + + +Permet de copier un élément sélectionné et de coller cet élément sur +l’espace de travail ou dans un autre élément qui est sélectionné. + +### Fenêtre des propriétés + + + +Voici la fenêtre des propriétés lorsqu’on ne sélectionne pas d’élément, +cette fenêtre est constituée de 6 onglets suivant : + +- Props + +- Visual + +- Layout + +- Geo + +- Toplo-Theme + +- Playground + +#### Onglet propriétés (Props) + +Les propriétés disponibles pour chaque élément sélectionné peuvent être +différentes selon la nature de l’élément. + +Voici les options possibles dans Props lorsque l’on sélectionne un +élément : + + + +Element ID : + +C’est le nom en ID de l’élément sélectionné, pour le modifier il faut +écrire quelque chose à la place du texte déjà présent dans ce champ de +texte et **ne pas oublier de valider avec entrée** afin de rendre +effective la modification sinon la modification n’est pas sauvegardée. + +Visibility : + +Permet de rendre : + +- Visible  : visible sur l’espace de + travail + +- caché   : caché sur l’espace de + travail + +- gone   : caché sur l’espace de + travail et n’est pas calculé par la disposition + +Elevation : + +Valeur de l’élément sur le calque renseigné en valeur entière modifiable +ou visualisable. + +Clip children : + +Permet de rendre non visible les enfants d’un élément qui sortent de la +taille du parent (dépasse de la taille du parent) si la valeur est True, +l’inverse sinon. + +#### Onglet visuels (Visuals) + +C’est un onglet qui permet de définir les différentes propriétés +graphiques de l’élément sélectionné : l’opacité, la couleur, les +bordures, etc. + + + +#### Onglet de disposition (layout) + + + +Cet onglet permet de définir la position de l’élément dans son +environnement, mais également de définir une disposition dans cet +élément directement. + +Position : + +Emplacement en X et Y de l’élément sélectionné modifiable dans les deux +champs de saisie. + +Remplissage : + +Définis un remplissage dans l’élément sélectionné selon la valeur dans +le champ de saisie. + +Marge : + +Définis une marge dans l’élément sélectionné selon la valeur dans le +champ de saisie. + +Type de disposition : + +##### Disposition basique + + + +La disposition basique permet de placer comme on veut sans contrainte +particulière d’élément dans l’élément sélectionné. + +##### Disposition linéaire + + + +Vertical : + + + +L’élément vert est le premier élément et l’élément rouge est le +deuxième, selon le sens de la flèche ci-dessus sur l’exemple. + +Horizontal : + + + +L’élément vert est le premier élément et l’élément rouge est le +deuxième, selon le sens de la flèche ci-dessus sur l’exemple. + +La disposition linéaire permet d’aligner des éléments même jusqu’à +dépasser la taille du parent. + +##### Disposition écoulement (Flow) + +Vertical : + + + +Horizontal : + + + +La flèche violette représente la première ligne de la disposition et la +flèche rouge la deuxième ligne. Lorsqu’une ligne est remplie, les +éléments sont ajoutés automatiquement à la ligne suivante. Ici, +l’élément en rose est ajouté automatiquement à la seconde ligne. + +##### Disposition en cadre (Frame) + + + +Les différents réglages de position ne se font pas dans le parent mais +dans les enfants de l’élément dans lequel il y a cette disposition. + + + +Les contraintes – Frame – horizontal / vertical servent uniquement au +positionnement de cet élément-là dans son parent grâce à la disposition +définie dans le parent. + + + +Cette option permet de ne pas aligner l’élément avec la disposition en +cadre. + +#### Onglet géométrie (Geo) + + + +Cet onglet permet de choisir la forme géométrique de l’élément +sélectionné, la géométrie sélectionnée sera celle visible sur le logo +sélectionné. + +Certains éléments peuvent ne pas disposer de géométrie + +#### Onglet gestion de thème (Toplo-Theme) + + + +Cet onglet permet de définir et visualiser des thèmes en les appliquant +soit sur l’espace de travail (BlSpace) soit sur les différents éléments +dans l’espace de travail (thème local). + +Lorsqu’on sélectionne un élément sur l’espace de travail plusieurs +actions sont possibles : + +- Ne pas hériter du thème du parent et de choisir le thème à appliquer + sur lui-même et ces enfants + +- Ajouter une étiquette (stamp) sur l’élément sélectionné (grisé si + aucun élément n’a été sélectionné). + +- Supprimer une étiquette sélectionnée dans le tableau d’étiquette listé + (grisé si aucune étiquette n’est sélectionnée). + +Exemple (aucun thème appliqué) : + + + +Exemple (après le thème appliqué) : + + + +Les étiquettes à ajouter pour un élément sélectionné sont listées selon +le thème choisi pour cet élément. + +Exemple : + + + +Pour ajouter une étiquette il faut sélectionner l’étiquette que l’on +veut attribuer et cliquer sur « Ajouter une étiquette ». + +Liste des étiquettes déjà utilisé sur l’élément sélectionné : + + + +Supprimer une étiquette : + + + +Une fois que l’on sélectionne une étiquette dans la liste, le bouton +« Remove stamp » (Supprimer l’étiquette) devient cliquable et permet de +supprimer l’étiquette sélectionné. + +##### Ajout de thème pour toplo theme manager + +Pour ajouter un thème à la liste des thèmes disponible dans le sélecteur +pour le toplo theme manager, il faut ajouter une méthode de classe dans +la classe du thème qui hérite ToTheme. + +Exemple : + + + +canBeDefault ^ true + +Si l’on veut retirer un thème spécifique du sélecteur, il faut modifier +« true » par « false » : + +canBeDefault ^ false + +#### Onglet Playground + +Le Playground est un onglet qui permet d’effectuer des actions sur un ou +des éléments sélectionnés grâce à du code Smalltalk (Pharo). + +Seuls les raccourcis claviers natifs à Pharo permettent de pouvoir +exécuter des commandes dans le playground. + + + +Voici l’onglet lorsqu’on ne sélectionne aucun élément, voir ci-dessus. + + + +Les actions du Playground et s’exécutent sur le ou les éléments +sélectionnés. + +Exemple avec un BlElement : + +Avant modification : + + + +Après modification : + + + +Grâce au message suivant la couleur du background est devenue noire : + +self background : Color black. + +Ceci n’est qu’un exemple mais la totalité des messages dans le +Playground est possible comme nativement dans Pharo. + +La petite particularité, c’est que plusieurs éléments sélectionnés sont +considérés comme un tableau d’objet, donc cette fois-ci la commande +précédente ne fonctionnera pas car il faut exécuter la commande sur tous +les éléments présents dans le tableau. + +Avant : + + + +La commande permet d’itérer sur chaque élément et d’appliquer la couleur +rouge sur l’arrière-plan de chaque élément : + +self do: \[ :c \| c background: Color red \]. + +Après : + + + +### Espace de travail + +L’espace de travail est la zone d’affichage des éléments graphiques du +projet. + +Aperçu de la fenêtre : + + + +Le slider permet de modifier le facteur de zoom sur l’espace de travail, +le bouton à sa droite permet de faire revenir à la valeur de zoom +initiale (100%) de la vue sur l’espace de travail et la position de la +souris est indiquée à côté. + + + +## + +## Fonctionnalités + +### Modification d’arborescence cliqué glissé / déposé + +Exemple : + + + +On peut apercevoir un élément dont le nom est « connect_pane » qui n’est +pas au bon endroit, on peut donc le déplacer via un cliqué glissé depuis +la liste d’éléments à gauche. + +Placé au bon endroit comme ci-dessous : + + + +Résultat : + + + +Le système fonctionne de la manière suivante : + +Tous les éléments sélectionnés qui sont déplacé via un cliqué glissé +seront le fils de l’élément cible s’ils le peuvent. + +### Redimensionnement dynamique d’élément sélectionné + + + +: Modifie la taille de l’élément sélectionné dans la largeur mais +uniquement dans le sens horizontal. + +: Modifie la taille de l’élément sélectionné dans la largeur mais aussi +dans la hauteur de manière libre. + +: Modifie la taille de l’élément sélectionné dans la hauteur mais +uniquement dans le sens vertical. + +Limitation de la modification de taille dynamique : + +- Lorsque la largeur de l’élément est en-dessous de 50, le carré pour + modifier la taille pour la hauteur disparaît. + +- Lorsque la hauteur de l’élément est en-dessous de 50, le carré pour + modifier la taille pour la largeur disparaît. + +- Lorsque la hauteur et la largeur est en-dessous de 15, le carré pour + modifier la hauteur et la largeur disparaît. + +Donc au moment du relâchement du clic gauche de la souris la taille est +bien prise en compte mais une fois que vous voulez les réutiliser, il +faut agrandir de manière manuel l’élément, le désélectionné et le +sélectionner une fois de plus. diff --git a/docs/media/image1.png b/docs/media/image1.png new file mode 100644 index 0000000..42068a8 Binary files /dev/null and b/docs/media/image1.png differ diff --git a/docs/media/image10.png b/docs/media/image10.png new file mode 100644 index 0000000..86da4f8 Binary files /dev/null and b/docs/media/image10.png differ diff --git a/docs/media/image11.png b/docs/media/image11.png new file mode 100644 index 0000000..a89bcda Binary files /dev/null and b/docs/media/image11.png differ diff --git a/docs/media/image12.png b/docs/media/image12.png new file mode 100644 index 0000000..9ac0915 Binary files /dev/null and b/docs/media/image12.png differ diff --git a/docs/media/image13.png b/docs/media/image13.png new file mode 100644 index 0000000..fc7a5ee Binary files /dev/null and b/docs/media/image13.png differ diff --git a/docs/media/image14.png b/docs/media/image14.png new file mode 100644 index 0000000..2fc7325 Binary files /dev/null and b/docs/media/image14.png differ diff --git a/docs/media/image15.png b/docs/media/image15.png new file mode 100644 index 0000000..2b3362f Binary files /dev/null and b/docs/media/image15.png differ diff --git a/docs/media/image16.png b/docs/media/image16.png new file mode 100644 index 0000000..965bcee Binary files /dev/null and b/docs/media/image16.png differ diff --git a/docs/media/image17.png b/docs/media/image17.png new file mode 100644 index 0000000..5452df2 Binary files /dev/null and b/docs/media/image17.png differ diff --git a/docs/media/image18.png b/docs/media/image18.png new file mode 100644 index 0000000..e18710d Binary files /dev/null and b/docs/media/image18.png differ diff --git a/docs/media/image19.png b/docs/media/image19.png new file mode 100644 index 0000000..34a457c Binary files /dev/null and b/docs/media/image19.png differ diff --git a/docs/media/image2.png b/docs/media/image2.png new file mode 100644 index 0000000..338075d Binary files /dev/null and b/docs/media/image2.png differ diff --git a/docs/media/image20.png b/docs/media/image20.png new file mode 100644 index 0000000..eabcc96 Binary files /dev/null and b/docs/media/image20.png differ diff --git a/docs/media/image21.png b/docs/media/image21.png new file mode 100644 index 0000000..cf4386c Binary files /dev/null and b/docs/media/image21.png differ diff --git a/docs/media/image22.png b/docs/media/image22.png new file mode 100644 index 0000000..253cbda Binary files /dev/null and b/docs/media/image22.png differ diff --git a/docs/media/image23.png b/docs/media/image23.png new file mode 100644 index 0000000..1286753 Binary files /dev/null and b/docs/media/image23.png differ diff --git a/docs/media/image24.png b/docs/media/image24.png new file mode 100644 index 0000000..9ed6c98 Binary files /dev/null and b/docs/media/image24.png differ diff --git a/docs/media/image25.png b/docs/media/image25.png new file mode 100644 index 0000000..ab05535 Binary files /dev/null and b/docs/media/image25.png differ diff --git a/docs/media/image26.png b/docs/media/image26.png new file mode 100644 index 0000000..c2c2c84 Binary files /dev/null and b/docs/media/image26.png differ diff --git a/docs/media/image27.png b/docs/media/image27.png new file mode 100644 index 0000000..756cbcc Binary files /dev/null and b/docs/media/image27.png differ diff --git a/docs/media/image28.png b/docs/media/image28.png new file mode 100644 index 0000000..c6848ad Binary files /dev/null and b/docs/media/image28.png differ diff --git a/docs/media/image29.png b/docs/media/image29.png new file mode 100644 index 0000000..aca9c72 Binary files /dev/null and b/docs/media/image29.png differ diff --git a/docs/media/image3.png b/docs/media/image3.png new file mode 100644 index 0000000..6f8519b Binary files /dev/null and b/docs/media/image3.png differ diff --git a/docs/media/image30.png b/docs/media/image30.png new file mode 100644 index 0000000..e9a3cf4 Binary files /dev/null and b/docs/media/image30.png differ diff --git a/docs/media/image31.png b/docs/media/image31.png new file mode 100644 index 0000000..88990c3 Binary files /dev/null and b/docs/media/image31.png differ diff --git a/docs/media/image32.png b/docs/media/image32.png new file mode 100644 index 0000000..dde121a Binary files /dev/null and b/docs/media/image32.png differ diff --git a/docs/media/image33.png b/docs/media/image33.png new file mode 100644 index 0000000..13cc321 Binary files /dev/null and b/docs/media/image33.png differ diff --git a/docs/media/image34.png b/docs/media/image34.png new file mode 100644 index 0000000..23e8a08 Binary files /dev/null and b/docs/media/image34.png differ diff --git a/docs/media/image35.png b/docs/media/image35.png new file mode 100644 index 0000000..a24ad57 Binary files /dev/null and b/docs/media/image35.png differ diff --git a/docs/media/image36.png b/docs/media/image36.png new file mode 100644 index 0000000..cb3dab6 Binary files /dev/null and b/docs/media/image36.png differ diff --git a/docs/media/image37.png b/docs/media/image37.png new file mode 100644 index 0000000..dd8e85f Binary files /dev/null and b/docs/media/image37.png differ diff --git a/docs/media/image38.png b/docs/media/image38.png new file mode 100644 index 0000000..d224c9f Binary files /dev/null and b/docs/media/image38.png differ diff --git a/docs/media/image39.png b/docs/media/image39.png new file mode 100644 index 0000000..a09d393 Binary files /dev/null and b/docs/media/image39.png differ diff --git a/docs/media/image4.png b/docs/media/image4.png new file mode 100644 index 0000000..85f04c2 Binary files /dev/null and b/docs/media/image4.png differ diff --git a/docs/media/image40.png b/docs/media/image40.png new file mode 100644 index 0000000..5216dde Binary files /dev/null and b/docs/media/image40.png differ diff --git a/docs/media/image41.png b/docs/media/image41.png new file mode 100644 index 0000000..f6ec8ef Binary files /dev/null and b/docs/media/image41.png differ diff --git a/docs/media/image42.png b/docs/media/image42.png new file mode 100644 index 0000000..81f33b4 Binary files /dev/null and b/docs/media/image42.png differ diff --git a/docs/media/image43.png b/docs/media/image43.png new file mode 100644 index 0000000..45d4ec6 Binary files /dev/null and b/docs/media/image43.png differ diff --git a/docs/media/image44.png b/docs/media/image44.png new file mode 100644 index 0000000..e099429 Binary files /dev/null and b/docs/media/image44.png differ diff --git a/docs/media/image45.png b/docs/media/image45.png new file mode 100644 index 0000000..aa51d70 Binary files /dev/null and b/docs/media/image45.png differ diff --git a/docs/media/image46.png b/docs/media/image46.png new file mode 100644 index 0000000..28bcc5a Binary files /dev/null and b/docs/media/image46.png differ diff --git a/docs/media/image47.png b/docs/media/image47.png new file mode 100644 index 0000000..766ab3f Binary files /dev/null and b/docs/media/image47.png differ diff --git a/docs/media/image48.png b/docs/media/image48.png new file mode 100644 index 0000000..d868479 Binary files /dev/null and b/docs/media/image48.png differ diff --git a/docs/media/image49.png b/docs/media/image49.png new file mode 100644 index 0000000..8901ff7 Binary files /dev/null and b/docs/media/image49.png differ diff --git a/docs/media/image5.png b/docs/media/image5.png new file mode 100644 index 0000000..ac880c2 Binary files /dev/null and b/docs/media/image5.png differ diff --git a/docs/media/image50.png b/docs/media/image50.png new file mode 100644 index 0000000..54366d8 Binary files /dev/null and b/docs/media/image50.png differ diff --git a/docs/media/image51.png b/docs/media/image51.png new file mode 100644 index 0000000..5da6b0e Binary files /dev/null and b/docs/media/image51.png differ diff --git a/docs/media/image52.png b/docs/media/image52.png new file mode 100644 index 0000000..eb127fc Binary files /dev/null and b/docs/media/image52.png differ diff --git a/docs/media/image53.png b/docs/media/image53.png new file mode 100644 index 0000000..f3a9f02 Binary files /dev/null and b/docs/media/image53.png differ diff --git a/docs/media/image54.png b/docs/media/image54.png new file mode 100644 index 0000000..e2cd07b Binary files /dev/null and b/docs/media/image54.png differ diff --git a/docs/media/image55.png b/docs/media/image55.png new file mode 100644 index 0000000..682871c Binary files /dev/null and b/docs/media/image55.png differ diff --git a/docs/media/image56.png b/docs/media/image56.png new file mode 100644 index 0000000..5d7819d Binary files /dev/null and b/docs/media/image56.png differ diff --git a/docs/media/image57.png b/docs/media/image57.png new file mode 100644 index 0000000..a1e3df2 Binary files /dev/null and b/docs/media/image57.png differ diff --git a/docs/media/image58.png b/docs/media/image58.png new file mode 100644 index 0000000..0e0d6e2 Binary files /dev/null and b/docs/media/image58.png differ diff --git a/docs/media/image59.png b/docs/media/image59.png new file mode 100644 index 0000000..48557db Binary files /dev/null and b/docs/media/image59.png differ diff --git a/docs/media/image6.png b/docs/media/image6.png new file mode 100644 index 0000000..1c55a01 Binary files /dev/null and b/docs/media/image6.png differ diff --git a/docs/media/image60.png b/docs/media/image60.png new file mode 100644 index 0000000..a4044d2 Binary files /dev/null and b/docs/media/image60.png differ diff --git a/docs/media/image61.png b/docs/media/image61.png new file mode 100644 index 0000000..a6bd2a5 Binary files /dev/null and b/docs/media/image61.png differ diff --git a/docs/media/image62.png b/docs/media/image62.png new file mode 100644 index 0000000..fe844fa Binary files /dev/null and b/docs/media/image62.png differ diff --git a/docs/media/image63.png b/docs/media/image63.png new file mode 100644 index 0000000..3615655 Binary files /dev/null and b/docs/media/image63.png differ diff --git a/docs/media/image64.png b/docs/media/image64.png new file mode 100644 index 0000000..fe57e04 Binary files /dev/null and b/docs/media/image64.png differ diff --git a/docs/media/image65.png b/docs/media/image65.png new file mode 100644 index 0000000..272459e Binary files /dev/null and b/docs/media/image65.png differ diff --git a/docs/media/image66.png b/docs/media/image66.png new file mode 100644 index 0000000..e169e9b Binary files /dev/null and b/docs/media/image66.png differ diff --git a/docs/media/image67.png b/docs/media/image67.png new file mode 100644 index 0000000..38b6da6 Binary files /dev/null and b/docs/media/image67.png differ diff --git a/docs/media/image68.png b/docs/media/image68.png new file mode 100644 index 0000000..c469e0b Binary files /dev/null and b/docs/media/image68.png differ diff --git a/docs/media/image69.png b/docs/media/image69.png new file mode 100644 index 0000000..f6bf037 Binary files /dev/null and b/docs/media/image69.png differ diff --git a/docs/media/image7.png b/docs/media/image7.png new file mode 100644 index 0000000..72aea58 Binary files /dev/null and b/docs/media/image7.png differ diff --git a/docs/media/image70.png b/docs/media/image70.png new file mode 100644 index 0000000..b7cb047 Binary files /dev/null and b/docs/media/image70.png differ diff --git a/docs/media/image71.png b/docs/media/image71.png new file mode 100644 index 0000000..3ed8cc3 Binary files /dev/null and b/docs/media/image71.png differ diff --git a/docs/media/image72.png b/docs/media/image72.png new file mode 100644 index 0000000..bdad4b5 Binary files /dev/null and b/docs/media/image72.png differ diff --git a/docs/media/image73.png b/docs/media/image73.png new file mode 100644 index 0000000..1cd6061 Binary files /dev/null and b/docs/media/image73.png differ diff --git a/docs/media/image74.png b/docs/media/image74.png new file mode 100644 index 0000000..9f7b9e3 Binary files /dev/null and b/docs/media/image74.png differ diff --git a/docs/media/image75.png b/docs/media/image75.png new file mode 100644 index 0000000..d25ed9c Binary files /dev/null and b/docs/media/image75.png differ diff --git a/docs/media/image76.png b/docs/media/image76.png new file mode 100644 index 0000000..214620c Binary files /dev/null and b/docs/media/image76.png differ diff --git a/docs/media/image77.png b/docs/media/image77.png new file mode 100644 index 0000000..2becdaf Binary files /dev/null and b/docs/media/image77.png differ diff --git a/docs/media/image78.png b/docs/media/image78.png new file mode 100644 index 0000000..8b8f543 Binary files /dev/null and b/docs/media/image78.png differ diff --git a/docs/media/image79.png b/docs/media/image79.png new file mode 100644 index 0000000..2a6027d Binary files /dev/null and b/docs/media/image79.png differ diff --git a/docs/media/image8.png b/docs/media/image8.png new file mode 100644 index 0000000..233be74 Binary files /dev/null and b/docs/media/image8.png differ diff --git a/docs/media/image80.png b/docs/media/image80.png new file mode 100644 index 0000000..cfc8079 Binary files /dev/null and b/docs/media/image80.png differ diff --git a/docs/media/image81.png b/docs/media/image81.png new file mode 100644 index 0000000..4dad2a0 Binary files /dev/null and b/docs/media/image81.png differ diff --git a/docs/media/image82.png b/docs/media/image82.png new file mode 100644 index 0000000..410c269 Binary files /dev/null and b/docs/media/image82.png differ diff --git a/docs/media/image83.png b/docs/media/image83.png new file mode 100644 index 0000000..c90716d Binary files /dev/null and b/docs/media/image83.png differ diff --git a/docs/media/image84.png b/docs/media/image84.png new file mode 100644 index 0000000..d9ad0ba Binary files /dev/null and b/docs/media/image84.png differ diff --git a/docs/media/image85.png b/docs/media/image85.png new file mode 100644 index 0000000..18536a4 Binary files /dev/null and b/docs/media/image85.png differ diff --git a/docs/media/image86.png b/docs/media/image86.png new file mode 100644 index 0000000..18536a4 Binary files /dev/null and b/docs/media/image86.png differ diff --git a/docs/media/image9.png b/docs/media/image9.png new file mode 100644 index 0000000..d813741 Binary files /dev/null and b/docs/media/image9.png differ diff --git a/docs/user_documentation.md b/docs/user_documentation.md new file mode 100644 index 0000000..0f1d399 --- /dev/null +++ b/docs/user_documentation.md @@ -0,0 +1,927 @@ +# Table of contents + +[1 Open the Pyramid tool +[3](#open-the-pyramid-tool)](#open-the-pyramid-tool) + +[2 Getting started with Pyramid +[4](#getting-started-with-pyramid)](#getting-started-with-pyramid) + +[2.1 Keyboard shortcuts [4](#keyboard-shortcuts)](#keyboard-shortcuts) + +[2.1.1 Intern at Pyramid [4](#intern-at-pyramid)](#intern-at-pyramid) + +[2.1.2 External to Pyramid +[5](#external-to-pyramid)](#external-to-pyramid) + +[2.2 Description of the interfaces +[5](#description-of-the-interfaces)](#description-of-the-interfaces) + +[2.2.1 Parameterization toolbar +[6](#parameterization-toolbar)](#parameterization-toolbar) + +[2.2.1.1 Button hide the navigation window +[6](#button-hide-the-navigation-window)](#button-hide-the-navigation-window) + +[2.2.1.2 Save button [6](#save-button)](#save-button) + +[2.2.1.3 Project configuration button +[7](#project-configuration-button)](#project-configuration-button) + +[2.2.1.4 User parameter button +[8](#user-parameter-button)](#user-parameter-button) + +[2.2.1.5 Refresh button [9](#refresh-button)](#refresh-button) + +[2.2.2 Undo/Redo buttons [9](#undoredo-buttons)](#undoredo-buttons) + +[2.2.3 Workspace Toolbar [10](#workspace-toolbar)](#workspace-toolbar) + +[2.2.3.1 Test button [10](#test-button)](#test-button) + +[2.2.3.2 Workspace properties button +[10](#workspace-properties-button)](#workspace-properties-button) + +[2.2.3.3 Button hide the properties window +[13](#button-hide-the-properties-window)](#button-hide-the-properties-window) + +[2.2.4 Navigation window [13](#navigation-window)](#navigation-window) + +[2.2.4.1 Add a new root button +[13](#add-a-new-root-button)](#add-a-new-root-button) + +[2.2.4.1.1 Column of categories +[14](#column-of-categories)](#column-of-categories) + +[2.2.4.1.2 Column for viewing the category content +[15](#column-for-viewing-the-category-content)](#column-for-viewing-the-category-content) + +[2.2.4.1.3 Preview column [15](#preview-column)](#preview-column) + +[2.2.4.2 Checkable button hide/show threads +[16](#checkable-button-hideshow-threads)](#checkable-button-hideshow-threads) + +[2.2.4.3 List of threads in the workspace +[18](#list-of-threads-in-the-workspace)](#list-of-threads-in-the-workspace) + +[2.2.5 Context menu right click +[18](#context-menu-right-click)](#context-menu-right-click) + +[2.2.5.1 Search for the selected item +[19](#search-for-the-selected-item)](#search-for-the-selected-item) + +[2.2.5.2 Inspection of the selected element +[20](#inspection-of-the-selected-element)](#inspection-of-the-selected-element) + +[2.2.5.3 Adding a child and removing an element +[21](#adding-a-child-and-removing-an-element)](#adding-a-child-and-removing-an-element) + +[2.2.5.4 Modify the index of a child in its parent +[22](#modify-the-index-of-a-child-in-its-parent)](#modify-the-index-of-a-child-in-its-parent) + +[2.2.5.5 Group the selection of elements +[23](#group-the-selection-of-elements)](#group-the-selection-of-elements) + +[2.2.5.6 Level on the layer +[23](#level-on-the-layer)](#level-on-the-layer) + +[2.2.5.7 Copy/Paste [24](#copypaste)](#copypaste) + +[2.2.6 Properties window [24](#properties-window)](#properties-window) + +[2.2.6.1 Properties tab (Props) +[25](#properties-tab-props)](#properties-tab-props) + +[2.2.6.2 Visual tab (Visuals) +[26](#visual-tab-visuals)](#visual-tab-visuals) + +[2.2.6.3 Layout tab [27](#layout-tab)](#layout-tab) + +[2.2.6.3.1 Basic layout [28](#basic-layout)](#basic-layout) + +[2.2.6.3.2 Linear layout [28](#linear-layout)](#linear-layout) + +[2.2.6.3.3 Flow arrangement [29](#flow-arrangement)](#flow-arrangement) + +[2.2.6.3.4 Frame layout [30](#frame-layout)](#frame-layout) + +[2.2.6.4 Geometry tab (Geo) [31](#geometry-tab-geo)](#geometry-tab-geo) + +[2.2.6.5 Theme management tab (Toplo-Theme) +[31](#theme-management-tab-toplo-theme)](#theme-management-tab-toplo-theme) + +[2.2.6.5.1 Adding a theme for toplo theme manager +[33](#adding-a-theme-for-toplo-theme-manager)](#adding-a-theme-for-toplo-theme-manager) + +[2.2.6.6 Playground tab [34](#playground-tab)](#playground-tab) + +[2.2.7 Workspace [37](#workspace)](#workspace) + +[2.3 Features [38](#features)](#features) + +[2.3.1 Clicked arborescence modification dragged / dropped +[38](#clicked-arborescence-modification-dragged-dropped)](#clicked-arborescence-modification-dragged-dropped) + +[2.3.2 Dynamic resizing of selected element +[40](#dynamic-resizing-of-selected-element)](#dynamic-resizing-of-selected-element) + + +# Open the Pyramid tool + +To open Pyramid, in a Pharo editor, go to Library -\> Pyramid -\> New +project, as on the screenshot: + + + +This will directly open the Pyramid tool in a Pharo window. + +# Getting started with Pyramid + +## Keyboard shortcuts + +### Intern at Pyramid + +| **Shortcuts** | **Key combination** | **Description** | +|:--:|:--:|----| +| Undo | CTRL + Z | Go back to the previous action if there is any. | +| Redo | CTRL + Y | Go back to the action where we previously went back. | +| Copy | 1 selected element + CTRL + C | Allows copying the item that is currently selected. | +| Paste | CTRL + V | Allows you to paste an item that was previously copied on the workspace. | +| Paste into an element | 1 selected element + CTRL + V | Allows you to paste into a selected element and add it as wires. | +| Cut | 1 selected element + CTRL + X | Allows you to cut the selected item. | +| Save | CTRL + S | Allows saving an open and configured project. | +| Select all | CTRL + A | Allows you to select all the elements of the workspace. | +| Select all wires | 1 selected element + CTRL + A | Allows you to select all the wires of the selected element. | +| Grid | CTRL + G | Allows to enable / disable the grid on the workspace | +| Delete the selection | 1 or more selected element + DEL | Allows to delete the selected item(s). | +| Inspect the element | 1 selected element + CTRL + I | Allows to inspect the selected item. | +| Move a child up | 1 selected element + Page up | Allows to move up a child in its parent tree. | +| Move a child down | 1 selected element + Page Down | Allows to move down a child in its parent tree. | +| Move the view | CTLR + Clicked moved | Allows the view to be moved across the workspace. | +| Default position of view | CTRL + N | Allows to reset the position of the view on the workspace by default (location) | +| Zoom in on the workspace | CTRL + Mollette Up | Allows you to zoom in on the workspace. | +| Zoom out on the workspace | CTRL + Mollette Low | Allows zooming out of the workspace. | + +All the shortcuts below only work with the focus on space (workspace) in +Pyramid. + +| **Shortcuts** | **Key combination** | **Description** | +|:--:|:--:|----| +| Move an element down | 1 selected element + Down arrow | Moves a selected item downwards. | +| Move an element to the right | 1 selected element + Right Arrow | Moves a selected item to the right. | +| Move an element to the left | 1 selected element + Left Arrow | Move a selected item to the left. | +| Move an element up | 1 selected element + Up Arrow | Move a selected item upwards. | +| Move an element to the mouse position | 1 selected element + CTRL + Space bar | Moves a selected item to the mouse position. | + +### External to Pyramid + +| **Shortcuts** | **Key combination** | **Description** | +|:--:|:--:|----| +| Open a space in Pyramid | F12 + focus on a space of a Bloc/Toplo window | Allows opening directly in Pyramid an application that runs in another window running in Pharo Bloc/Toplo. | + +## Description of the interfaces + +First, you can see below the overall overview of the interface when you +open the Pyramid tool. + + + +### Parameterization toolbar + + + +#### Button hide the navigation window + +Allows you to hide the navigation window: + + + + +It’s a toggle button, so you can hide the window by clicking on it, but +also make it visible when you click on it a second time. + +#### Save button + + + +This button is used to save the changes made and generate the +corresponding source code. + +If the project configuration has not been done, an error is displayed: + + + +To remedy this, you must first define the project configuration (see +next button). + +#### Project configuration button + +To configure the project backup: + + + +The button opens a window that allows configuring the project save +location: + + + +To configure the project backup in the tab of the "project +configuration" button, you must fill out the following three fields: + +- The package name + +- The class name + +- The method name + +Choose whether to save on class side or instance side. + +#### User parameter button + + + +Allows to open the Pyramid user settings interface with the following +two parameters: + +- Enable/Disable the F12 shortcut which allows opening a Block/Toplo + window in Pyramid + +- Choose the serialization format either in source code or in STON + +Parameter window below: + + + +#### Refresh button + +Allows to refresh the workspace (central area): + + + +This button allows to solve problems such as the preview of the project +in the central area that no longer appears, so it allows to refresh and +solve this issue. + +Example: + + + +### Undo/Redo buttons + +### + +These buttons are located in the center of the toolbar, above the work +area. + + + +The button with an arrow to the left (Undo) is used to go back on a past +action and the arrow going to the right (Redo) allows to replay the +previously canceled action. + +### Workspace Toolbar + + + +#### Test button + + + +It allows the workspace to be run and therefore, to use the buttons such +as for example displaying a message in Pharo with a notification when +clicking on it. + +When in test mode, the button icon is modified and we can exit the test +mode by clicking on it again: + + + +#### Workspace properties button + + + +It allows to change the size of the workspace displayed in the preview +part of the HMI by opening the following window: + + + +But also to be able to display or hide a grid thanks to its visibility +parameter: + + + +One can also modify the spacing between two lines thanks to the value of +the 'Spacing' field which is modifiable. + + + +The color is also configurable either by hexadecimal value and its alpha +(transparency). + + + +Or thanks to a user interface available through the following button: + + + +The interface of color choice: + + + +The first line also corresponds to the choice of color via a hexadecimal +value and an alpha (transparency). + +The choice of colors is made via the interfaces. + +When you enter a value in a text field, please press the "Enter" key to +validate the changes ("Enter" on the keyboard, not the "Enter" located +on the numeric keypad). + +#### Button hide the properties window + + + +This button allows, as for the hide the navigation window button, to be +able to hide the property window on the right. + +### Navigation window + + + +This window contains the tree structure of the graphic elements edited +in the current project, as well as buttons/ features to manipulate them. + +#### Add a new root button + + + +This button allows you to add a root element that you choose via the +window that opens. See below. + + + +##### Column of categories + + + +This column is used to display the different available categories and +display them in the content visualization column of the selected +category. + +##### Column for viewing the category content + + + +This column is used to view the different elements available in the +category selected in the categories column. + +##### Preview column + + + +This column is used to view the selected element in the right-hand +column and allows it to be added to the workspace with 'add new +element'. + +Example of adding the element: + + + +#### Checkable button hide/show threads + + + +This checkbox allows you to hide (or display) the threads of elements +with which one cannot interact in Pyramid (non-serialized element). + +Example of a tree with all the children visible: + + + +When children are not visible: + + + +#### List of threads in the workspace + + + +This list allows to see all the common elements used in the workspace, +and allows to observe the current project tree structure. + +One can also interact on each element with a context menu thanks to the +right click. + +### Context menu right click + +This context menu works only in the following areas: + +- Navigation window + +- Workspace (central area) + + + +We can see the context menu that displays the name, the element (class) +and its Hash on the first line. + +#### Search for the selected item + + + +Opens the next window to display the class of the element. See below. + + + +#### Inspection of the selected element + + + + + +Allows an inspection of the element as if it were being done from a +playground. + +#### Adding a child and removing an element + + + +Adding a child allows you to add an element as a child to the selected +element and thus to be able to add it to its tree structure. + +Deleting the selected element removes the element and all its children. + +Example of deleting several elements: + + + +#### Modify the index of a child in its parent + + + +These 2 options allow you to very easily modify the index of the +children selected in their parents, either by increasing or decreasing +it. + +Example before travel: + + + +Example after move: + + + +There are also keyboard shortcuts to do it (Page Up and Page Down). + +#### Group the selection of elements + + + +Allows one or more selected elements to be grouped into a single group +during multi-selection. + +#### Level on the layer + + + +Allows you to change the level on the layer of the selected element: + +- On foreground: place the element in the foreground + +- On background : place the element last + +- Move forward: increases by one layer level + +- Move backward: reduced by a layer level + +#### Copy/Paste + + + +Allows you to copy a selected item and paste it into the workspace or +another item that is selected. + +### Properties window + + + +Here is the properties window when not selecting an element, this window +consists of 6 tabs as follows: + +- Props + +- Visual + +- Layout + +- Geo + +- Toplo-Theme + +- Playground + +#### Properties tab (Props) + +The properties available for each selected element may be different +depending on the nature of the element. + +Here are the possible options in Props when selecting an element: + + + +Element ID: + +It is the ID name of the selected element. To modify it, you must write +something in place of the text already present in this text field and +**do not forget to validate with input** in order to make the +modification effective; otherwise, the modification will not be saved. + +Visibility: + +Allows to make: + +- Visible: visible on the workspace + +- hidden: hidden on the workspace + +- gone : hidden on workspace and is not calculated by + layout + +Elevation: + +Value of the element on the layer specified in modifiable or viewable +integer value. + +Clip children: + +Allows to make invisible the children of an element that are out of the +parent size (exceeds the parent size) if the value is True, otherwise +the opposite. + +#### Visual tab (Visuals) + +It is a tab that allows you to define the different graphic properties +of the selected element: opacity, color, borders, etc. + + + +#### Layout tab + + + +This tab allows you to define the position of the element in its +environment, but also to define a layout within this element directly. + +Position: + +X and Y location of the selected editable item in both input fields. + +Filling: + +Define a fill in the selected item according to the value in the input +field. + +Margin: + +Define a margin in the selected item according to the value in the input +field. + +Type of provision: + +##### Basic layout + + + +The basic layout allows to place as one wants without particular +constraint of element in the selected element. + +##### Linear layout + + + +Vertical: + + + +The green element is the first element and the red element is the +second, according to the direction of the arrow above on the example. + +Horizontal: + + + +The green element is the first element and the red element is the +second, according to the direction of the arrow above on the example. + +The linear layout allows aligning elements even beyond the size of the +parent. + +##### Flow arrangement + +Vertical: + + + +Horizontal: + + + +The purple arrow represents the first line of the layout and the red +arrow the second line. When a line is filled, the elements are +automatically added to the next line. Here, the element in pink is +automatically added to the second line. + +##### Frame layout + + + +The different position settings are not made in the parent but in the +children of the element in which there is this layout. + + + +The constraints – Frame – horizontal / vertical are used only for +positioning this element in its parent thanks to the layout defined in +the parent. + + + +This option allows the element not to be aligned with the frame layout. + +#### Geometry tab (Geo) + + + +This tab allows you to choose the geometric shape of the selected +element, the selected geometry will be the one visible on the selected +logo. + +Some elements may not have geometry + +#### Theme management tab (Toplo-Theme) + + + +This tab allows you to define and visualize themes by applying them +either on the workspace (BlSpace) or on the different elements in the +workspace (local theme). + +When selecting an element on the workspace, several actions are +possible: + +- Do not inherit the theme from the parent and choose the theme to apply + on himself and these children + +- Add a label (stamp) on the selected element (greyed out if no element + has been selected). + +- Delete a selected label from the listed label table (grayed out if no + label is selected). + +Example (no applied theme): + + + +Example (after the applied theme): + + + +The labels to add for a selected element are listed according to the +theme chosen for this element. + +Example: + + + +To add a label, select the label you want to assign and click on 'Add a +label'. + +List of labels already used on the selected item: + + + +Remove a label: + + + +Once a label is selected in the list, the "Remove stamp" button becomes +clickable and allows to delete the selected label. + +##### Adding a theme for toplo theme manager + +To add a theme to the list of themes available in the selector for the +toplo theme manager, you must add a class method in the class of the +theme that inherits ToTheme. + +Example: + + + +canBeDefault true + +If you want to remove a specific theme from the selector, you must +change 'true' to 'false': + +canBeDefault false + +#### Playground tab + +The Playground is a tab that allows actions to be performed on one or +several selected elements thanks to Smalltalk code (Pharo). + +Only the keyboard shortcuts native to Pharo allow you to be able to +execute commands in the playground. + + + +Here is the tab when no element is selected, see above. + + + +The actions of the Playground and execute on the selected element(s). + +Example with a BlElement: + +Before modification: + + + +After modification: + + + +Thanks to the following message, the color of the background has become +black: + +self background : Color black. + +This is only an example but all the messages in the Playground are +possible as natively in Pharo. + +The small peculiarity is that several selected elements are considered +as an object array, so this time the previous command will not work +because it is necessary to execute the command on all the elements +present in the array. + +Before: + + + +The command allows to iterate on each element and to apply the red color +on the background of each element: + +self do: \[ :c \| c background: Color red \]. + +After: + + + +### Workspace + +The workspace is the display area for project graphic elements. + +Window preview: + + + +The slider allows you to modify the zoom factor on the workspace, the +button to its right allows you to return to the initial zoom value +(100%) of the view on the workspace and the position of the mouse is +indicated next to it. + + + +## + +## Features + +### Clicked arborescence modification dragged / dropped + +Example: + + + +We can see an element whose name is "connect_pane" that is not in the +right place, so we can move it via a click dragged from the list of +elements on the left. + +Placed in the right place as below: + + + +Result: + + + +The system works as follows: + +All selected elements that are moved via a click-drag will be the child +of the target element if they can. + +### Dynamic resizing of selected element + + + +: Changes the size of the selected element in width but only in +horizontal direction. + +: Changes the size of the selected element in width but also in height +freely, there is also the possibility to be able to keep the proportions +of the element by pressing the control key during the size modification. + +: Change the size of the selected element in height but only in vertical +direction. + +Limitation of dynamic size modification: + +- When the element width is below 50, the square to change size for + height disappears. + +- When the height of the element is below 50, the square to change the + size for width disappears. + +- When height and width is below 15, the square to change height and + width disappears. + +So at the moment of releasing the left click of the mouse, the size is +indeed taken into account but once you want to reuse them, you need to +manually enlarge the element, deselect it and select it once more.