Connexion
FAQ MembresM’enregistrer

Tuto 1 : Créer un fond d'écran avec Enventor

Les bureaux E17 et E18

Tuto 1 : Créer un fond d'écran avec Enventor

Messagepar chrisripp » 21 Oct 2017 13:29

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 de 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, que vous trouverez dans: Menu-> Applications -> Autres applications -> Développement -> 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:
Code: Tout sélectionner
collections {
   base_scale: 1.0;
   [color=#FF0000]group { "main";[/color]
      /* 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:
Code: Tout sélectionner
// 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:
Code: Tout sélectionner
#!/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:
Code: Tout sélectionner
#!/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.
Code: Tout sélectionner
#!/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 .edc 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.
Image
Avatar de l’utilisateur
chrisripp
 
Messages: 588
Enregistré le: 07 Déc 2011 18:26

Retourner vers Enlightenment

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité

cron