Page 1 sur 1

Tutorial Enventor / edc

Publié : 31 oct 2017, 20:19
par chrisripp
Tuto 1 : Créer un fond d'écran avec Enventor

Avant propos:
Je crée ce poste pour les graphistes ou les nouveaux venus sous Enlightenment.
Je ne suis pas "programmeur", un autodidacte comme tant d'autre.
Ce que je vous proposent, c'est d'utiliser Enventor avec une "bibliothèques de code", c'est une technique que j'utilise en 3D avec mes bibliothèques d'objets,
ce qui accélère efficacement le travail.
Pour une bonne compréhension des EFL et du langage edc je ne peux que vous conseiller ce fabuleux tutorial:
http://louis-du-verdier.developpez.com/ ... ?page=edje
Je ne vais traiter que les backgrounds, nous allons avancer petit a petit, commencer par une image fixe puis les animations.
Pour finir Je n'ai rien inventé.... Je n'ai que recopié, changé, amélioré.
Mes codes sont ce qu'ils sont encore une fois je ne suis pas codeurs , n’hésiter pas a me corriger et a m'en apprendre plus.

Au Travail
On ouvre Enventor.
A l'ouverture vous vous trouvez avec la page de défaut, cliquer sur les 3 ... en haut droite pour avoir accés aux Options.

Image
Cliquer sur NEWS pour avoir accès aux Templates et choisissez image
Image
Image

C'est le code de base pour afficher une image en codage .edc , nous allons le modifier pour créer notre premier fond d'écran.
Par défaut nous avons ce code:

collections {
   base_scale: 1.0;
        /* TODO: Please replace embedded image files to your application image files. */
      images {
         image: "ENVENTOR_EMBEDDED_IMAGE.png" COMP;
      }
      parts {
         image { "logo";
            desc { "default";
               rel1.relative: 0.0 0.0;
               rel2.relative: 1.0 1.0;
               /* TODO: Please replace embedded image files to your application image files. */
               image.normal: "ENVENTOR_EMBEDDED_IMAGE.png";
               aspect: 1 1;
               aspect_preference: BOTH;
            }
         }
      }
   }
}
En premier lieux nous allons changer le groupe: "main";
Par: "e/desktop/background";
Cela pour qu'aprés la compilation, notre projet soit bien reconnu comme un fond d'écran.
Ensuite je vais placer une section Images ou nous allons placer notre image de fond, pour que celle-ci soit trouvée par le programme.
Vu que nous faisons des fonds d'écran je vais placer aussi une taille max et mini du fond d'écran. Ainsi qu'un redimensionnement automatique.
Pour les relative1 et 2 nous ne les toucherons pas l'image sera centré.
J'ai pour finir réorganisé un peu le code et placé des annotations en utilisant les //
Cela donne:

// Title:   TUTO 1 Background
// Author:  Chrisripp/Triki1
// Placer toute les images de votre projet dans images
images {
   // image "filename.png" option to storage method;[options d'enregistrement]
   // STORAGE_METHOD can be:
   // COMP = compressed, no loss [compressé pas de perte de qualité]
   // RAW = uncompressed, no loss [non compressé pas de perte de qualité]
   // LOSSY = compressed with quality loss, next param is quality level (0-100) [compression avec perte de qualité de 0 à 100]
   //
   image, "bg.png"  COMP;       
}
collections {
   group {
      name, "e/desktop/background";
      max: 1920  1200; //[taille max de l'image]
      min: 640  480; // [taille mini de l'image]
      parts {
	 /* BACKGROUND */
         part {
            name, "bg";
            description {
               state, "default" 0.0;
               rel1 {
                  relative, 0.0  0.0;
                  offset,   0   0;
               }
               rel2 {
                  relative, 1.0  1.0;
                  offset,   -1   -1;
               }
               image {
                  normal, "bg.png";
               }
               fill {
                  smooth, 1; // [resize 1= yes 0= no][redimensionement 1= oui 0= non]
               }
            } // fin des descriptions
         } // fin de part
      } // fin des parts
   } // fin du groups
} // fin de la collection

Notre code est terminé, nous allons créer un dossier Tuto1.
A l'intérieur placer votre fond d'écran que vous renommerez bg.png de taille 1920 / 1200 au max
Ou changer les valeur min max du fond d'écran
Copier le code ci dessus et Enregister le monbg.edc

De retour dans enventor cliquer sur les 3 ... toujours en haut à droite
Aller dans les settings et remplissez les champs, comme ceci
Image
Main EDC files: Chemin de votre .edc
Images paths: Chemin de vos images
Sounds paths: Chemin de vos sons
Fonts paths: Chemin de vos fontes
Data paths: Chemin de vos données
ouvrer votre code monbg.edc avec Enventor
Le fond doit s'afficher dans la fenêtre de gauche. En bas à gauche vous pouvez zoomer et régler la taille de l'image.
Vous pouvez également transformer votre fond d'écran en temps réel avec The Gimp.
Après transformation du bg.png et enregistrer sous Gimp, Il vous suffit de faire CTRL+S pour raffraichir la fenêtre d'Enventor.

Il nous reste une dernière étape, pour compiler ouvrer un éditeur de texte copier/coller ceci:

#!/bin/sh
edje_cc $@ -id . -fd . monbg.edc -o monbg.edj
Enregistrer le sous: builds.sh
Une fois enregistrer clic droit sur ce fichier et donner les droits d'éxécution.
cliquer dessus notre projet se compil le fichier monbg.edj a été crée, copier le dans:
./e/e/backgrounds/

Vous pouvez maintenant choisir votre nouveau fond d'écran compilé en edj.
Voici le mien:
Image

Ce qu'il faut retenir:

Lorsque vous vous lancés dans la création d'un background, créer un dossier dans lequel vous placerez;
Toutes vos images, votre fichier .edc et le fichier builds.sh
Editer toujours votre fichier builds.sh pour bien le renseigner:

#!/bin/sh
edje_cc $@ -id . -fd . monfichier.edc -o monfichierdesortie.edj
Dans Enventor la première chose à faire est d'aller dans le settings pour renseigner les chemins de votre projet.
Dans le code .edc vous pouvez rajouter des renseignements derrière les //

CONCLUSION:

Pour décompiler votre projet dans le futur copier/coller ce script et donner lui les droits d’exécution.

#!/bin/sh
# 
# A simple command to extract .edj files.
# Commande simple pour extraire les .edj
for f in *.edj
do
  edje_decc "$f" -C /path/*.edj
done
Enregistrer le sous extraction_edj.sh
Il suffit de placer ce script a l'endroit ou se trouve votre .edj et de cliquer dessus pour extraire.
Gardez ce script au chaud dans un coin de votre PC.

Dans le tuto suivant nous allons a la fois voir comment marche les calques et créer notre première animation, pour cela
nous utiliserons comme base le code .edc de ce premier tutoriel.

Re: Tutorial Enventor / edc

Publié : 31 oct 2017, 20:25
par chrisripp
Déplacement d'objet par clic de souris

Mise en place:
Créer un dossier tuto2 dans lequel vous allez copier coller le script monbg.edc. que nous avons vu dans le 1er tuto.

// Title:   TUTO 1 Background
    // Author:  Chrisripp/Triki1
    // Placer toute les images de votre projet dans images
    images {
       // image "filename.png" option to storage method;[options d'enregistrement]
       // STORAGE_METHOD can be:
       // COMP = compressed, no loss [compressé pas de perte de qualité]
       // RAW = uncompressed, no loss [non compressé pas de perte de qualité]
       // LOSSY = compressed with quality loss, next param is quality level (0-100) [compression avec perte de qualité de 0 à 100]
       //
       image, "bg.png"  COMP;       
    }
    collections {
       group {
          name, "e/desktop/background";
          max: 1920  1200; //[taille max de l'image]
          min: 640  480; // [taille mini de l'image]
          parts {
        /* BACKGROUND */
             part {
                name, "bg";
                description {
                   state, "default" 0.0;
                   rel1 {
                      relative, 0.0  0.0;
                      offset,   0   0;
                   }
                   rel2 {
                      relative, 1.0  1.0;
                      offset,   -1   -1;
                   }
                   image {
                      normal, "bg.png";
                   }
                   fill {
                      smooth, 1; // [resize 1= yes 0= no][redimensionement 1= oui 0= non]
                   }
                } // fin des descriptions
             } // fin de part
          } // fin des parts
       } // fin du groups
    } // fin de la collection
Renommer le tuto2.edc
Placer votre bg.png du 1er tuto
Placer votre script builds.sh , éditer le et remplacer le nom des scripts edc et edj en tuto2.edc et tuto2.edj
Placer toutes les images qui composerons votre nouveau fond.

Quelques explications

Je vais reprendre le même theme que j'ai utilisé pour mon 1er tutoriel, mais cette fois ci je vais utiliser 3 calques:
-le fond étoilé Image
-le soleil Image
-le vaisseau Image

Je vais utiliser le fond étoilé pour le fond , puis je placerai le soleil et en 1er plan le vaisseau.
Pour cela nous allons juste rajouter des "part" dans "parts"

parts {
    part {
    }
    ...
}
Les « parts » sont un ensemble de « part », chacune d'elles représentant les éléments graphiques présents dans un thème, donc un bouton, label, etc.
http://louis-du-verdier.developpez.com/ ... ?page=edje

Nous allons copier la part background

/* BACKGROUND*/
         part {
            name, "bg";
            description {
               state, "default" 0.0;
               rel1 {
                  relative, 0.0  0.0;
                  offset,   0   0;
               }
               rel2 {
                  relative, 1.0  1.0;
                  offset,   -1   -1;
               }
               image {
                  normal, "etoile2.png";
               }
               fill {
                  smooth, 1; // [resize 1= yes 0= no][redimensionement 1= oui 0= non]
               }
            } // fin des descriptions
         } // fin de part background
et cela 2 fois nous avons au tolal 3 part
renommer les ainsi:
/* BACKGROUND Stars*/
/* SUN*/
/* Vaisseau Arcadia*/
Nommer chaqu'une des part en:

 part {
            name, "bg";

part {
            name, "sun";

part {
            name, "arcadia";
Placer vos 3 calques etoile,sun,vaisseau dans chacune de vos part

image {
                  normal, "etoile.png";
               }

image {
                  normal, "sun.png";
               }

image {
                  normal, "vaisseau.png";
               }
On n'oubli pas la section images ou l'on place toutes nos images composant le background.
Cela donne au final:

// Title:   TUTO 2
// Author:  Chrisripp/Triki1

images {
   // image "filename.png" option to storage method;[options d'enregistrement]
   // STORAGE_METHOD can be:
   // COMP = compressed, no loss [compressé pas de perte de qualité]
   // RAW = uncompressed, no loss [non compressé pas de perte de qualité]
   // LOSSY = compressed with quality loss, next param is quality level (0-100) [compression avec perte de qualité de 0 à 100]
   //
   image, "etoile.png"  COMP; 
   image, "sun.png"  COMP;    
   image, "arcadia5.png"  COMP;    
   
}
collections {
   group {
      name, "e/desktop/background";
      max: 1920  1200; //[taille max de l'image]
      min: 640  480; // [taille mini de l'image]
      parts {
	 /* BACKGROUND Stars*/
         part {
            name, "bg";
            description {
               state, "default" 0.0;
               rel1 {
                  relative, 0.0  0.0;
                  offset,   0   0;
               }
               rel2 {
                  relative, 1.0  1.0;
                  offset,   -1   -1;
               }
               image {
                  normal, "etoile.png";
               }
               fill {
                  smooth, 1; // [resize 1= yes 0= no][redimensionement 1= oui 0= non]
               }
            } // fin des descriptions
         } // fin de part background
// --------------------------------------------------------------------------------------------------------------------------   
          /* SUN */
         part {
            name, "sun";
            description {
               state, "default" 0.0;
               rel1 {
                  relative, 0.0  0.0;
                  offset,   0   0;
               }
               rel2 {
                  relative, 1.0  1.0;
                  offset,   -1   -1;
               }
               image {
                  normal, "sun.png";
               }
               fill {
                  smooth, 1; // [resize 1= yes 0= no][redimensionement 1= oui 0= non]
               }
            } // fin des descriptions
         } // fin de part sun
//----------------------------------------------------------------------------------------------------------------------------  
          /* Vaisseau Arcadia*/
         part {
            name, "arcadia";
            description {
               state, "default" 0.0;
               rel1 {
                  relative, 0.0  0.0;
                  offset,   0   0;
               }
               rel2 {
                  relative, 1.0  1.0;
                  offset,   -1   -1;
               }
               image {
                  normal, "arcadia5.png";
               }
               fill {
                  smooth, 1; // [resize 1= yes 0= no][redimensionement 1= oui 0= non]
               }
            } // fin des descriptions
         } // fin de part
// ---------------------------------------------------------------------------------------------------------------------------         
      } // fin des parts
   } // fin du groups
} // fin de la collection
Image

La Fonction dragable

Pour déplacer un calque a la sourie on va utiliser la fonction dragable sur le soleil et le vaisseau
Pour indiquer que le calque réagis à la souris on place mouse event sous le nom de la part que l'on veux faire réagir

 name, "....";
mouse_events: 1;
et a la fin de description on place la commande dragable:

dragable {
               //confine: background;
               x: 1 1 1;
               y: 1 1 1;
            }
Notre code final nous donnent:

// Title:   TUTO 2
// Author:  Chrisripp/Triki1

images {
   // image "filename.png" option to storage method;[options d'enregistrement]
   // STORAGE_METHOD can be:
   // COMP = compressed, no loss [compressé pas de perte de qualité]
   // RAW = uncompressed, no loss [non compressé pas de perte de qualité]
   // LOSSY = compressed with quality loss, next param is quality level (0-100) [compression avec perte de qualité de 0 à 100]
   //
   image, "etoile.png"  COMP; 
   image, "sun.png"  COMP;    
   image, "arcadia5.png"  COMP;    
   
}
collections {
   group {
      name, "e/desktop/background";
      max: 1920  1200; //[taille max de l'image]
      min: 640  480; // [taille mini de l'image]
      parts {
	 /* BACKGROUND Stars*/
         part {
            name, "bg";
            description {
               state, "default" 0.0;
               rel1 {
                  relative, 0.0  0.0;
                  offset,   0   0;
               }
               rel2 {
                  relative, 1.0  1.0;
                  offset,   -1   -1;
               }
               image {
                  normal, "etoile.png";
               }
               fill {
                  smooth, 1; // [resize 1= yes 0= no][redimensionement 1= oui 0= non]
               }
            } // fin des descriptions
         } // fin de part background
// --------------------------------------------------------------------------------------------------------------------------   
          /* SUN */
         part {
            name, "sun";
            mouse_events: 1;
            description {
               state, "default" 0.0;
               rel1 {
                  relative, 0.0  0.0;
                  offset,   0   0;
               }
               rel2 {
                  relative, 1.0  1.0;
                  offset,   -1   -1;
               }
               image {
                  normal, "sun.png";
               }
               fill {
                  smooth, 1; // [resize 1= yes 0= no][redimensionement 1= oui 0= non]
               }
            } // fin des descriptions
            dragable {
               //confine: background;
               x: 1 1 1;
               y: 1 1 1;
            }
         } // fin de part sun
//----------------------------------------------------------------------------------------------------------------------------  
          /* Vaisseau Arcadia*/
         part {
            name, "arcadia";
            mouse_events: 1;
            description {
               state, "default" 0.0;
               rel1 {
                  relative, 0.0  0.0;
                  offset,   0   0;
               }
               rel2 {
                  relative, 1.0  1.0;
                  offset,   -1   -1;
               }
               image {
                  normal, "arcadia5.png";
               }
               fill {
                  smooth, 1; // [resize 1= yes 0= no][redimensionement 1= oui 0= non]
               }
            } // fin des descriptions
            dragable {
               //confine: background;
               x: 1 1 1;
               y: 1 1 1;
         } // fin de part
// ---------------------------------------------------------------------------------------------------------------------------         
      } // fin des parts
   } // fin du groups
} // fin de la collection
Vous pouvez maintenant compiler en lançant

./buids.sh 
Copier/coller tuto2.edj dans .e/e/backgrounds/
vous pouvez maintenant déplacer vos 2 calques Sun et Arcadia sur votre fond étoilé fixe.
Image
Image
Image

Dans le prochain tutorial nous utiliserons le déplacement automatique gauche/droite

Re: Tutorial Enventor / edc

Publié : 01 nov 2017, 10:16
par Erwan
Bonjour, les mots me manquent... :clap
Je ne mettrai pas en pratique, un peu trop compliqué pour moi mais, ça donne vraiment envie de s'y coller :bien

Re: Tutorial Enventor / edc

Publié : 01 nov 2017, 11:04
par fassil
'LLo,

@chrisripp:
Cool, on pourrait dire que c'est une façon de rentrer dans le code dur en douceur ! :bien

@erwan:
Tant que l'on n'a pas au moins essayé/réussi une modification, cela parait être du C-hinois :siffle , mais à l'usage cela s'arrange (normalement..!) -> "vingt/cent fois sur le métier blablabla" comme disait l'autre Boileau.

Re: Tutorial Enventor / edc

Publié : 01 nov 2017, 15:51
par chrisripp
C'est fassil ;) mais il faut être graphiste avant tout, là on offre l’opportunité d'animé notre fond plutôt que d'avoir une image fixe.
On peu faire n'importe quoi avec les edc ou presque ;)
L'univers de E manque de créateurs actifs, et ce du au manque de tutoriels. On pense que c'est dure, on y voit que du code, sous Enventor une fois que vous avez compris les tuto de louis-du-verdier, tout roule.