Recherche avancée

Médias (1)

Mot : - Tags -/epub

Autres articles (49)

  • Les tâches Cron régulières de la ferme

    1er décembre 2010, par

    La gestion de la ferme passe par l’exécution à intervalle régulier de plusieurs tâches répétitives dites Cron.
    Le super Cron (gestion_mutu_super_cron)
    Cette tâche, planifiée chaque minute, a pour simple effet d’appeler le Cron de l’ensemble des instances de la mutualisation régulièrement. Couplée avec un Cron système sur le site central de la mutualisation, cela permet de simplement générer des visites régulières sur les différents sites et éviter que les tâches des sites peu visités soient trop (...)

  • Librairies et binaires spécifiques au traitement vidéo et sonore

    31 janvier 2010, par

    Les logiciels et librairies suivantes sont utilisées par SPIPmotion d’une manière ou d’une autre.
    Binaires obligatoires FFMpeg : encodeur principal, permet de transcoder presque tous les types de fichiers vidéo et sonores dans les formats lisibles sur Internet. CF ce tutoriel pour son installation ; Oggz-tools : outils d’inspection de fichiers ogg ; Mediainfo : récupération d’informations depuis la plupart des formats vidéos et sonores ;
    Binaires complémentaires et facultatifs flvtool2 : (...)

  • Ajouter notes et légendes aux images

    7 février 2011, par

    Pour pouvoir ajouter notes et légendes aux images, la première étape est d’installer le plugin "Légendes".
    Une fois le plugin activé, vous pouvez le configurer dans l’espace de configuration afin de modifier les droits de création / modification et de suppression des notes. Par défaut seuls les administrateurs du site peuvent ajouter des notes aux images.
    Modification lors de l’ajout d’un média
    Lors de l’ajout d’un média de type "image" un nouveau bouton apparait au dessus de la prévisualisation (...)

Sur d’autres sites (5198)

  • Perspective transformations

    4 février 2009, par Mikko Koppanen — Imagick, PHP stuff

    Finally (after a long break) I managed to force myself to update the PHP documentation and this time it was distortImage code example. Things have been hectic lately but that does not quite explain the 6 months(?) break between this and the previous post. As a matter of a fact there is no excuse for such a long silence so I will try to update this blog a bit more often from now on.

    Back in the day I used to blog the examples and update the documentation if I remembered but I am trying to fix this bad habit. Most of the latest examples have been updated in to the manual. In the case of the two last examples I updated the documentation first and then blogged on the subject.

    I took some time to actually understand the perspective transformations properly using the excellent ImageMagick examples (mainly created by Anthony Thyssen) as a reference. The basic idea of perspective distortion seems simple : to distort the control points to new locations. Grabbing the syntax for Imagick was easy, an array of control point pairs in the form of :

    php

    < view plain text >

    1. array(source_x, source_y, dest_x, dest_y ... )

    The following example uses the built-in checkerboard pattern to demonstrate perspective distortion :

    php

    < view plain text >

    1. < ?php
    2. /* Create new object */
    3. $im = new Imagick() ;
    4.  
    5. /* Create new checkerboard pattern */
    6. $im->newPseudoImage(100, 100, "pattern:checkerboard") ;
    7.  
    8. /* Set the image format to png */
    9. $im->setImageFormat(’png’) ;
    10.  
    11. /* Fill background area with transparent */
    12. $im->setImageVirtualPixelMethod(Imagick: :VIRTUALPIXELMETHOD_TRANSPARENT) ;
    13.  
    14. /* Activate matte */
    15. $im->setImageMatte(true) ;
    16.  
    17. /* Control points for the distortion */
    18. $controlPoints = array( 10, 10,
    19.             10, 5,
    20.  
    21.             10, $im->getImageHeight() - 20,
    22.             10, $im->getImageHeight() - 5,
    23.  
    24.             $im->getImageWidth() - 10, 10,
    25.             $im->getImageWidth() - 10, 20,
    26.  
    27.             $im->getImageWidth() - 10, $im->getImageHeight() - 10,
    28.             $im->getImageWidth() - 10, $im->getImageHeight() - 30) ;
    29.  
    30. /* Perform the distortion */ 
    31. $im->distortImage(Imagick: :DISTORTION_PERSPECTIVE, $controlPoints, true) ;
    32.  
    33. /* Ouput the image */ 
    34. header("Content-Type : image/png") ;
    35. echo $im ;
    36.  ?>

    Here is the source image :
    checker before

    And the result :
    after

  • Perspective transformations

    9 juin 2010, par Mikko Koppanen — Imagick, PHP stuff

    Finally (after a long break) I managed to force myself to update the PHP documentation and this time it was distortImage code example. Things have been hectic lately but that does not quite explain the 6 months(?) break between this and the previous post. As a matter of a fact there is no excuse for such a long silence so I will try to update this blog a bit more often from now on.

    Back in the day I used to blog the examples and update the documentation if I remembered but I am trying to fix this bad habit. Most of the latest examples have been updated in to the manual. In the case of the two last examples I updated the documentation first and then blogged on the subject.

    I took some time to actually understand the perspective transformations properly using the excellent ImageMagick examples (mainly created by Anthony Thyssen) as a reference. The basic idea of perspective distortion seems simple : to distort the control points to new locations. Grabbing the syntax for Imagick was easy, an array of control point pairs in the form of :

    php

    < view plain text >

    1. array(source_x, source_y, dest_x, dest_y ... )

    The following example uses the built-in checkerboard pattern to demonstrate perspective distortion :

    php

    < view plain text >

    1. < ?php
    2. /* Create new object */
    3. $im = new Imagick() ;
    4.  
    5. /* Create new checkerboard pattern */
    6. $im->newPseudoImage(100, 100, "pattern:checkerboard") ;
    7.  
    8. /* Set the image format to png */
    9. $im->setImageFormat(’png’) ;
    10.  
    11. /* Fill background area with transparent */
    12. $im->setImageVirtualPixelMethod(Imagick: :VIRTUALPIXELMETHOD_TRANSPARENT) ;
    13.  
    14. /* Activate matte */
    15. $im->setImageMatte(true) ;
    16.  
    17. /* Control points for the distortion */
    18. $controlPoints = array( 10, 10,
    19.             10, 5,
    20.  
    21.             10, $im->getImageHeight() - 20,
    22.             10, $im->getImageHeight() - 5,
    23.  
    24.             $im->getImageWidth() - 10, 10,
    25.             $im->getImageWidth() - 10, 20,
    26.  
    27.             $im->getImageWidth() - 10, $im->getImageHeight() - 10,
    28.             $im->getImageWidth() - 10, $im->getImageHeight() - 30) ;
    29.  
    30. /* Perform the distortion */ 
    31. $im->distortImage(Imagick: :DISTORTION_PERSPECTIVE, $controlPoints, true) ;
    32.  
    33. /* Ouput the image */ 
    34. header("Content-Type : image/png") ;
    35. echo $im ;
    36.  ?>

    Here is the source image :
    checker before

    And the result :
    after

  • Anomalie #4623 : Styles des fieldset dans l’espace privé

    18 avril 2021

    Bon stop (ou pas) !

    Il semble que les blocs fieldset ne peuvent pas parfaitement se styler seuls. Manifestement c’est assez récent que les navigateurs acceptent un display:flex; dessus par exemple.

    J’ai fait quelques tests en partant du formulaire de préférences des menus (tiens d’ailleurs ce formulaire a des div.editer sans div.editer-groupe parent (à corriger !)
    Il contient un fieldset + .editer-groupe.deux_colonnes (columns : 2)

    Ce que j’ai testé (sous macOS avec FF, Safari, Chrome & Opéra) : la formule suivante (enlever le .editer-groupe interne et le monter sur le fieldset)

    1. <span class="CodeRay"><span class="tag">fieldset</span><span class="class">.editer-groupe</span>
      2. 

    2.     <span class="tag">legend</span>
      3. 

    3.     <span class="tag">div</span><span class="class">.editer</span>
      4. 

    4.     <span class="tag">div</span><span class="class">.editer</span>
      5. 

    5.     ...
      6. 

    6. </span>
      7. 

    Télécharger

    1) Si on applique un columns: 2 sur ce fieldset,
    - Firefox & Safari : conservent le legend, passent le reste en 2 colonnes
    - Chrome & Opéra : ignorent et conservent donc un affichage 1 colonne.

    2) Si on applique un display: flex; flex-wrap: wrap sur ce fieldset
    - Tous : le legend est conservé comme tel
    - le reste passe effectivement en flex (permettant donc de mettre plusieurs .editer sur la même ligne)

    Déjà je suis étonné que Flex semble fonctionner, contrairement à ce que dit https://caniuse.com/mdn-html_elements_fieldset pour tous les Gecko. Et Edge aussi est indiqué en non fonctionnel.

    Donc du coup… je me dis que le .editer-groupe dans le fieldset à encore du sens stylistique.
    Ce qui pour le coup ne nous arrange pas forcément, mais ça évite aussi de casser un truc de plus dans cette structure html en le laissant.

    Donc du coup, on en reviendrait peut être à "fieldset.editer-section" ou "fieldset.editer-fieldset" ou "fieldset.fieldset" ou "fieldset" (sans rien)…
    J’utilise .editer-section ensuite (mais peut importe)

    A) fieldset.editer-section > div.editer-groupe

    (le plus proche de l’actuel je pense)

    1. <span class="CodeRay">  <span class="tag">div</span><span class="class">.editer-groupe</span>
      2. 

    2.       <span class="tag">div</span><span class="class">.editer</span>
      3. 

    3.       ...
      4. 

    4.   <span class="tag">fieldset</span><span class="class">.editer-section</span>
      5. 

    5.     <span class="tag">legend</span>
      6. 

    6.     <span class="tag">div</span><span class="class">.editer-groupe</span>
      7. 

    7.         <span class="tag">div</span><span class="class">.editer</span>
      8. 

    8.         ...
      9. 

    9. </span>
      10. 

    Télécharger

    B) fieldset.editer-groupe > div.editer-section

    L’autre possibilité si ça facilite vraiment le css, c’est d’inverser les classes (avec l’ennui principal de du coup devoir reprendre l’existant)

    1. <span class="CodeRay">  <span class="tag">div</span><span class="class">.editer-groupe</span>
      2. 

    2.       <span class="tag">div</span><span class="class">.editer</span>
      3. 

    3.       ...
      4. 

    4.   <span class="tag">fieldset</span><span class="class">.editer-groupe</span>
      5. 

    5.     <span class="tag">legend</span>
      6. 

    6.     <span class="tag">div</span><span class="class">.editer-fieldset</span>
      7. 

    7.         <span class="tag">div</span><span class="class">.editer</span>
      8. 

    8.         ...
      9. 

    9. </span>
      10. 

    Télécharger

    B) fieldset.editer-groupe.editer-section > div.editer-groupe

    Ou du doubler d’une autre classe

    1. <span class="CodeRay">  <span class="tag">div</span><span class="class">.editer-groupe</span>
      2. 

    2.       <span class="tag">div</span><span class="class">.editer</span>
      3. 

    3.       ...
      4. 

    4.   <span class="tag">fieldset</span><span class="class">.editer-groupe</span><span class="class">.editer-section</span>
      5. 

    5.     <span class="tag">legend</span>
      6. 

    6.     <span class="tag">div</span><span class="class">.editer-groupe</span>
      7. 

    7.         <span class="tag">div</span><span class="class">.editer</span>
      8. 

    8.         ...
      9. 

    9. </span>
      10. 

    Télécharger

    Mais dans ce cas là je trouve cela redondant (fieldset.editer-section me parait suffisant, si on doit effectivement mettre un classe css dessus)
    Le plus ennuyant est peut être de devoir annuler des styles CSS du .editer-groupe dans .editer-section > .editer-groupe ;

Navigation