Créer une arborescence en CSS uniquement - Dév. Web - ShevArezo`Blog

Superbe et pas si compliqué... Merci !

EDIT: Comme la page est bourrée de trackers, je copie colle ici et sur mon snippetvamp

CSS


 .tree {
  --spacing: 1.5rem;
  --radius: 10px;
  --marker-bg-default: #ddd;
  --marker-bg-haschild: #6b9abb;
  line-height: 2rem;
}
.tree li {
  display: block;
  position: relative;
  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}
.tree ul {
  margin-left: calc(var(--radius) - var(--spacing));
  padding-left: 0;
}
.tree ul li {
  border-left: 2px solid #ddd;
}
.tree ul li:last-child {
  border-color: transparent;
}
.tree ul li::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(var(--spacing) / -2);
  left: -2px;
  width: calc(var(--spacing) + 2px);
  height: calc(var(--spacing) + 1px);
  border: solid #ddd;
  border-width: 0 0 2px 2px;
}
.tree summary {
  display: block;
  cursor: pointer;
}
.tree summary::marker,
.tree summary::-webkit-details-marker {
  display: none;
}
.tree summary:focus {
  outline: none;
}
.tree summary:focus-visible {
  outline: 1px dotted #000;
}
.tree li::after,
.tree summary::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(var(--spacing) / 2 - var(--radius) + 2px);
  left: calc(var(--spacing) - var(--radius) - 2px);
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  border-radius: 50%;
  background: var(--marker-bg-default);
}
.tree summary::before {
  content: "+";
  z-index: 1;
  background: var(--marker-bg-haschild);
  color: #fff;
  line-height: calc(2 * var(--radius));
  text-align: center;
}
.tree details[open] > summary::before {
  content: "−";
}

HTML

<ul class="tree">
  <li>
    <details open>
      <summary>Informatique</summary>
      <ul>
        <li>
          <details>
            <summary>Périphériques</summary>
            <ul>
              <li>Clavier</li>
              <li>Souris</li>
              <li>Ecran</li>
            </ul>
          </details>
        </li>
        <li>
          <details open>
            <summary>Stockage</summary>
            <ul>
              <li>Disque dur</li>
              <li>SSD</li>
              <li>Clé USB</li>
            </ul>
          </details>
        </li>
        <li>
          <details>
            <summary>Composants</summary>
            <ul>
              <li>Processeur</li>
              <li>Carte mère</li>
              <li>Mémoire</li>
              <li>
            </ul>
          </details>
        </li>
        <li>
          <details>
            <summary>Composants</summary>
            <ul>
              <li>Processeur</li>
              <li>Carte mère</li>
              <li>Mémoire</li>
              <li>Carte graphique</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
</ul>
</code></pre> codeCarte graphique</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
</ul>
Via https://book.knah-tsaeb.org/

API + BOT = RTE_color_bot (@RTE_color@piaille.fr)

Parfois, un post en entraîne un autre... Ainsi, tu t'es mis à coder un BOT presque par inadvertance - avec les difficultés qu'on connaît - et tu le partages parce qu'il n'y a pas de raison que l'auteur soit le seul à pleurer... pis t'as un copain qui te lit et qui prend le truc au sérieux... en tout cas suffisamment pour te proposer d'en faire un autre !

Non, c'est vrai ?!    T'AS TROUVÉ ÇA BIEN ?!

Donc, me v'la reparti pour un tour...

Objectif de la demande: récupérer les données de l'API RTE tempo ( https://data.rte-france.com/catalog/-/api/consumption/Tempo-Like-Supply-Contract/v1.1 ) pour dire la couleur du jour et celle du lendemain et les poster sur un bot mastodon (mais pouvoir appeler le script comme une API aussi)

Je suis donc parti pour tester ladite API: pour la faire courte, ça m'a permis - après les galères d'usage - de comprendre comment tout ça fonctionnait (en particulier la demande d'un token, l'appel d'une api en php etc)

J'en suis arrivé à un script qui produit un texte donnant la couleur du jour et celle du lendemain.

«Oui, mais ce serait cool...»

Le texte c'est bien, mais ce serait mieux si on pouvait récup les données en HTML et intégrer ça avec une Iframe, comme un code d'intégration.

Pis éventuellement en RSS aussi...

Bon, tant que j'y étais, j'ai aussi fait un mode json, au cas où on voudrait ça dans un frontend à soi...

Du coup, mon API s'appelle de plusieurs façons différentes:

  • URL seule ➜ retour en texte RAW (prêt à poster)
  • URL?html ➜ retourne le code HTML
  • URL?json ➜ renvoie les données en JSON
  • URL?rss ➜ le flux RSS de l'API
  • (cadeau bonux) URL?embed_code ➜ retourne le code pour mettre ça sur son site avec une iframe.

Pour faire bonne mesure

Le script produit un fichier pour chaque type de retour et ne le régénère qu'une fois par jour afin d'éviter de se faire «hammerer» comme dit @parigotmanchot

Jusque là, tout va à peu près dans un monde couci, couça

À ce stade, le script fonctionne même si le code est un peu sale et pas bien rangé... il fait ce qu'on lui demande. A part que parfois, il ne donne pas la couleur du lendemain... mais pas en local... juste en distant. Je n'ai pas encore vraiment cherché pourquoi, mais je pense que c'est dû au moment où l'on appelle l'API de RTE.

Pourquoi s'en tenir là ?

Tant que j'y étais, j'ai regardé l'API ECOWATT ( https://data.rte-france.com/catalog/-/api/consumption/Ecowatt/v4.0 ) qui donne une couleur et un message décrivant le niveau de stress du réseau.

Du coup, le script appelle les deux API et retourne les données cumulées des deux.

ce qui donne ça

Capture du 2022-12-11 10-47-34.png

Capture du 2022-12-11 10-49-23.png

J'en veux j'en veux...

Si ça vous intéresse, le zip est là : RTETempo.zip et il est distribué sous stricte licence faites-en ce que vous voulez. 😅

Les constantes au début permettent de configurer un peu:

  • TOKEN_BASE64 : pour mettre votre propre jeton si vous voulez vous inscrire sur RTE (qui accepte les emails jetables type yopmail, je dis ça je dis rien 😬)
  • TEMPO_BEFORE_TODAY, TEMPO_BEFORE_TOMORROW, ECOWATT_BEFORE_TODAY, ECOWATT_BEFORE_TOMORROW : pour définir le texte renvoyé avant la couleur.
  • HTML_STYLE : pour changer le style du HTML généré
  • TEMPO_HTML_TEMPLATE, ECOWATT_HTML_TEMPLATE : pour changer le code HTML à utiliser en cas de retour HTML
  • ECOWATT, TEMPO : deux booléens permettant de débrayer l'un ou l'autre des appels (si vous ne voulez que ECOWATT ou que TEMPO)

Et le BOT ?!

Ben j'ai fait un autre BOT pour poster les couleurs du réseau une fois par jour... https://piaille.fr/@RTE_color ( @RTE_color@piaille.fr )

Capture du 2022-12-11 11-01-14.png

Super Useful CSS Resources 🌈 - DEV Community 👩‍💻👨‍💻

De côté pour plus tard: en particulier les usages exotiques de CSS.

BronKOBOt (@bronkobot@botsin.space) - Faire un Bot Mastodon from scratch.

Tiens... et si je faisais un bot pour poster une citation par jour tirée des passages de romans que j'ai sélectionnés et stockés su ma Kobo ?!

C'est par ces mots que j'ai commencé à galérer... comme quoi, il suffit d'une idée à la con pour se lancer dans tout un merdier pourtant parfaitement facultatif ...

Le postulat de départ

Je veux qu'un BOT mastodon poste une citation de mes bookmarks de liseuse DONC il faut récupérer ces passages bookmarkés.

Donc, il faut trouver le fichier de base de donnée.

Puis il faut extraire les données intéressantes.

Puis utiliser ces données dans un BOT qui sera appelé une fois par jour.

Étape 1: trouver et comprendre les données sur la KoBo

En fouillant un peu, on trouve un fichier sqlite (JOIE) dont le chemin est .kobo/KoboReader.sqlite

Comment différencier la base de   livres des autres ?!    Ben elle pèse plus de 700mo...    C'est un signe.

Un passage par DBBrowser pour SQlite permet de jeter un oeil sur la structure des données.

Idéalement, il me faut deux informations: la citation et le titre du bouquin dont elle est extraite.

drame.jpeg

En fait les titres se trouvent dans la table content et les annotations dans la table Bookmark

deux tables

Je pourrais utiliser Calibre et chercher un moyen de faire un export complet de ces deux données uniquement. Pas sûr que ça marche. Ou alors faire un export via le DBexplorer pis me retaper le truc à chaque export...

Étape 2 : extraire les données et les préparer pour le Bot

En vieux programmeur qui bricole, je vois là un prétexte pour coder une petite appli en python qui se chargera de l'extraction.

Mon problème, c'est que je me sers des notes de la Kobo pour retenir des passages intéressants mais aussi, parfois, pour noter vite fait un mot de vocabulaire espagnol que je ne connaissais pas et dont je veux conserver la traduction. Mais ces mots de vocabulaire ne sont pas des citations: il faudrait donc les virer à la main à chaque fois. C'est chiant.

L'appli devra donc permettre de filtrer les citations avant de générer un fichier exploitable par le bot.

Pour faire court

J'ai fait l'appli en question: elle permet donc de récupérer les données, filtrer en fonction de la longueur de la citation ou du fait qu'elle est ou pas accompagnée d'une note personnelle...

Capture du 2022-12-03 15-57-22.png

On peut formater les données selon plusieurs modèles (HTML, Json, Markdown, TXT brut, BOT) voire même créer son propre format (genre %title:«%quote» )

Si ça intéresse quelqu'un,   contactez-moi vu que j'ai la  flemme de mettre ça là

Voilà le ZIP : Kobone : KOBO Note Extractor

Étape 3 : coder un bot en PHP afin de l'appeler par la suite avec un CRONJob.

Rien d'extraordinaire ici: je fais un script qui parse le fichier obtenu à l'étape précédente, tire une citation au hasard et la poste sur le compte Masto du Bot.

Le point le plus intéressant du bouzin est plutôt la fonction servant à poster sur un compte mastodon:


define('TOKEN','letokendesécuritéquetuchopesdansmastodon');
define('MASTODON_URL','https://botsin.space/'); // Ici, il faut coller l'url de votre serveur mastodon
define('HEADER',"Citation du jour:");
 function post2Mastodon($data=null){
        if (!$data){return false;}
        $headers = [
          'Authorization: Bearer '. TOKEN
        ];
        $data=[
            'status'=> HEADER.$data,
            'language'=>"fr",
            'visibility' => 'public'
        ];
        $ch_status = curl_init();
        curl_setopt($ch_status, CURLOPT_URL,  MASTODON_URL.'/api/v1/statuses');
        curl_setopt($ch_status, CURLOPT_POST, 1);
        curl_setopt($ch_status, CURLOPT_POSTFIELDS, $data);
        curl_setopt($ch_status, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch_status, CURLOPT_HTTPHEADER, $headers);
        $output_status = json_decode(curl_exec($ch_status));
        curl_close ($ch_status);
        return $output_status;
    }

Étape 4: Créer une appli Mastodon pour avoir un jeton d'utilisation

Aller sur le compte mastodon en question, puis dans les préférences.

Cliquer sur «developpement» puis «Nouvelle application».

Remplir le formulaire simplissime puis valider. Cliquez ensuite sur le nom de votre application dans la nouvelle page et copiez votre jeton d’accès. C'est celui-ci qu'il faut coller dans le script PHP (dans la constante TOKEN)

Étape 5 : Définir un Cronjob

Direction le panneau de config de votre hébergement, rubrique cronjob. Sur Cpanel c'est là :

Capture du 2022-12-03 16-11-42.png

Définissez la fréquence (pour moi une fois par jour) et l'heure (8:00).

Ensuite, il faut définir la commande qui va appeler le script du BOT: wget fera l'affaire...

wget -qO /dev/null http://xxxxxxxxxxx.xx/index.php

L'option -q pour quiet et -O /dev/null pour éviter d'avoir un fichier de sortie qui se crée à la racine.

Capture du 2022-12-04 11-10-50.png

Fin

Une fois tout ça terminé, j'ai bien un bot qui poste une citation à 8:00 tous les jours.

capture du bot

Bon, elles ne seront pas toujours bien formatées vu que la sélection de texte sur liseuse c'est un peu touchy... mais c'était plus pour apprendre à le faire qu'autre chose...

Pis ça m'a permis de me  remettre à Python...

https://botsin.space/@bronkobot

Optipic: une «api» pour optimiser les images

Le cadeau du jour: un script qui permet d'automatiser l'optimisation d'une image pour le ouaibe sans passer par une appli quelconque.

Le problème

Tout le monde est d'accord pour affirmer qu'il est indispensable de minimiser le poids des pages web et que dans cette optique, le premier geste - après avoir viré les bibliothèques inutiles bien entendu - reste l'optimisation des images.

J'avais vu passer un article fort bien écrit sur ce sujet mais hélas, j'ai omis de le bookmarker et paf: le voilà perdu dans les méandres de mon historique sur un des ordinateurs que j'utilise.

Tout le monde est d'accord sur le principe mais souvent, c'est comme l'écriture de la doc ou les tests unitaires: on a la flemme de s'y coller...

J'ai parfaitement conscience  de la déferlante de commentaires  que cette comparaison risque  de me valoir !

Ze solution

L'idéal serait bien sûr que l'optimisation soit transparente et automatique... genre: tu te contentes de passer à la balise img l'URL de l'API avec celle de l'image et POF, tu as l'image en version optimisée.

Comment ça   «t'es pas cap' ?»

Optipic est donc un script auquel on passe l'URL d'une image, le format souhaité, le niveau de qualité et -éventuellement - la largeur maximum pour obtenir en retour l'image transformée.

Les paramètres sont les suivants:

  • i ➜ l'url de l'image
  • maxwidth ➜ la largeur maximum de l'image (opt.)
  • format ➜ le format de sortie de l'image : jpg,gif,png,webp,avif (PHP 8 minimum pour l'avif)
  • quality ➜ la qualité (niveau de compression) de 0 à 100

Le script renvoie directement l'image transformée avec le header adéquat et du coup, c'est transparent pour HTML/CSS.

Notez que l'image optimisée est sauvée dans le dossier rendered/ afin d'éviter une charge inutile: si une image a déjà été optimisée, le script la sert directement au lieu de la refaire à chaque fois.

But there's more !

Même si ce script est déjà à ce stade absolument fabuleux (si, si !), je me suis dit que les paramètres risquaient de se répéter et qu'il pouvait s'avérer fastidieux de retaper le tout à chaque fois. Par conséquent, j'ai ajouté la possibilité de créer des scripts d'optimisation - un peu comme dans scriptopic.

Ainsi, si vous placez un fichier PHP contenant les paramètres dans le dossier scripts/ , vous pouvez l'appeler via le paramètre $_GET script:

Exemple: je cree scripts/webp.php et je mets dedans:


// webp  50%
$params=[
    'format'        =>'webp',
    'quality'       =>50,
    'maxwidth'      =>null
];

Puis je l'appelle en faisant : api.url/?script=webp&i=http:/image.url/pic.jpg

Pour le moment, il y a quatre scripts: jpg80,jpg70,avif,webp... à vous de créer les vôtres en fonction de vos besoins...

Et ça marche ?

Ben j'ai fait un test dans ce blog pour voir avec mon image de titre LOL:

version originale

qui pèse 113 ko en jpg

Puis avec son optimisation via le script webp ci-dessus:

version optimisée

qui ne pèse plus que... 18 ko en webp 50%

Et ça juste en rajoutant https://api.warriordudimanche.net/optipic/?script=webp&i= dans le chemin de l'image.

la classe

En cas d'erreur ?

Si Optipic ne parvient pas à créer l'image, il crée une image d'erreur à la place, histoire de voir le souci quand même...

la classe

Ce comportement peut être débrayé avec la constante ERROR_PIC ligne 29.

Test, téléchargement pis tout ça

Comme pour toutes les api de ma page, le script est téléchargeable via le ?download : https://api.warriordudimanche.net/optipic/?download et testable au même endroit: https://api.warriordudimanche.net/optipic/?i=...

Nota bene

  1. Pensez bien à mettre le paramètre d'URL (i) en dernier car sinon, php inclura les paramètres dans l'URL passée
  2. Même avec un script vous pouvez toujours changer un paramètre. Exemple: ?script=webp&quality=30&i=xxx permet de changer la qualité précisée dans le script (50).
  3. Par défaut, le format de sortie est le jpeg mais c'est configurable dans la constante DEFAULT_FORMAT ligne 28

Au passage, ce script utilise une classe que j'avais codée pour scriptopic: pictools. Grâce à elle, le travail d'optimisation tient en


    $picture=new pictool($params);
    $picture->load($url);
    if (!empty($params['maxwidth'])){
        $picture->resize($params['maxwidth']);
    }
    $picture->save($generated_picture_path);
    $picture->display();

Cadeau !

Merci qui ?!
Qui a dit   jacky et michel ?!

YoutubeRSS

Hier, je me suis aperçu que le bookmarklet que j'avais fait pour trouver le flux RSS d'une chaîne youtube ne fonctionnait pas toujours 🤬: en effet, si l'URL de la chaîne n'est pas du type www.youtube.com/channel/xxxCHANNEL_IDxxx ça ne fonctionne pas... Or, les chaînes peuvent être aussi sous une forme dans laquelle le channel_id n'apparaît pas.

zut flûte et cacaboudin

Du coup, je m'y mets

Au lieu de laisser youtube me chier dans les bottes, je me suis dit que, si le channel_id n'est pas dans l'URL, il doit être planqué quelque part dans le html de la page.

En fouillant un peu, twingo bongo jannielongo bingo 🥳 J'ai trouvé ça en parsant avec (presque) la même regex que pour l'URL.

con.jpeg

J'ai donc codé vite fait une «api» qui renvoie l'URL du flux RSS d'une chaîne Youtube dont on fournit l'adresse.

On peut l'utiliser avec le frontend minimaliste prévu, en faisant une requête GET ou via le bookmarklet qui va bien.

Le tout est bien entendu utilisable, autohébergeable et modifiable, comme d'habitude

Allez !

Cadeau du lundi: pas un, pas deux mais TROIS plugins Pluxml... (et oui !)

Bon, il ne s'agit pas de trois   plugins que j'aurais fait en   une fois, mais de trois plugins   codés à des moments différents   et que j'avais oublié de partager   jusque-là...

ok

🥇 Plugin N°1 : uniquePagePreview

Si toi aussi t'en as marre que le bouton Aperçu de la page article t'ouvre à chaque fois un nouvel onglet aboutissant rapidement à une accumulation visuellement insupportable du nombre d'échecs qu'il te faut avant de parvenir à un billet un tant soit peu abouti ? Alors ce ... «plugin» est pour toi: il se contente de changer le «_blank» de l'attribut onclick du bouton en «article_preview»... et ça, tu vois, ça change tout...

Désormais, la visualisation de l'article se fera toujours dans le même onglet (ouvert lors de la première visualisation)

⚡ Téléchargement direct du ZIP: https://repo.warriordudimanche.net/ZIPFILES/uniquePagePreview.zip

🥈 plugin N°2 : resizeArticleTextarea

Un truc qui me chiffonnait dans la rédaction d'articles un peu longs, c'était:

  1. de ne jamais voir l'article en entier pendant la rédaction
  2. de passer mon temps à défiler DANS le textarea en plus de défiler DANS la page...
Ok, ça fait deux trucs...

Grâce à ce plugin, on ne passe plus son temps à défiler QUE dans la page

En effet, il redimensionne les textareas de la page article en fonction de leur contenu. La zone de texte grandit avec le volume de texte tapé dedans.

⚡ Téléchargement direct du ZIP: https://repo.warriordudimanche.net/ZIPFILES/resizeArticleTextarea.zip

🥉 plugin N°3 : adminPanel

Un plugin dérivé d'un de mes anciens qui s'avérait obsolète avec la nouvelle maquette. Il permet d'afficher un menu visible uniquement quand l'admin est connecté. Ce menu regroupe plusieurs icônes:

Capture du 2022-11-14 14-35-06.png

  • un lien vers l'espace admin
  • un lien vers un tag particulier: je m'en sers pour accéder aux articles publiés pour lecture ultérieure sous le tag «riditleteur»
  • un lien vers la page commentaires avec un décompte des commentaires non lus
  • un bouton de déconnexion

Il affiche de plus un lien sur chaque article pour éditer directement ce dernier (pratique pour corriger ou mettre à jour un article)

Ces deux fonctions sont accessibles via deux hooks, «editArticleIcon» et «adminPanel», dont il faut placer l'appel dans les pages header.php et articles.php du thème

Une page de config permet de redéfinir les icônes et texte des boutons ainsi que le tag du raccourci.

Capture du 2022-11-14 14-43-09.png

⚡ Téléchargement direct du ZIP: https://repo.warriordudimanche.net/ZIPFILES/AdminPanel.zip

Si ça peut vous servir, c'est cadeau !

Templating in HTML | Kitty Giraudel

L'élément template pour créer des objets à cloner via javascript de façon plus sémantique que via des div cachées.

avantages

  • l'élément template est inerte: les styles ne s'appliquent pas, les images ne se chargent pas
  • pas de content model validation
  • largement supporté (98%)
  • le CSS qui cache un div peut échouer, être désactive ou redéfini ailleurs alors que template est toujours caché
  • les moteurs de recherche peuvent indexer des div cachées, pas les template (à priori)
Via https://nicolas-delsaux.hd.free.fr/Shaarli/?whpPuw

MAJ Metabook - search ebooks on multiple websites [EDIT]

J'ai mis à jour les regex de metabook pour supprimer fourtoutici (trop de déboires et une recherche désormais en POST) et pour y ajouter la nouvelle adresse de zlibrary

Finalement, j'ai remis fourtoutici qui semble avoir remis la recherche via GET: j'ai ajouté le lien direct vers la page de download.

http://slurp.warriordudimanche.net/?p=ebook

PluXml 5.8.9 : bug quand la modération des commentaires est activée

Merci à bazooka07 sur le forum de Pluxml qui apporte une solution à ce bug qui empêche la gestion et l'apparition des commentaires quand la modération est activée:

dans core/lib/class.plx.glob.php, il faut modifier la clé «commentaires» du tableau plxGlob::PATTERNS ( ligne 14) comme suit :

    const PATTERNS = array(
        'arts'          => '#^\D?(\d{4,})\.(?:\w+|\d{3})(?:,\w+|,\d{3})*\.\d{3}\.\d{12}\..*\.xml$#',
        'statiques'     => '#^(\d{3,})\..*\.php$#',
        'commentaires'  => '#^_?\d{4,}\.(?:\d{10,})(?:-\d+)?\.xml$#'
    );

De côté pour lecture: une appli simple Android sans Studio – Christophe Cerisara

Je me mets de côté cet article qui explique pas à pas le minimum des bases de la création d'une appli sans usine à gaz.

J'ai essayé de le lire plusieurs fois, mais faudra que j'attende d'être tout seul

Bypass .htaccess : contourner un accès web sécurisé

Très intéressant ça !

Utiliser une méthode exotique (autre que GET etc) pour sa requête permet de bypasser la directive Limit du htaccess...

<Limit GET POST>
    require valid-user
</Limit>

sera bypassé si on fait une requête curl avec CURLOPT_CUSTOMREQUEST => 'TOTO'

Une solution est proposée.

Classe PHP pour GD + API: Scriptopic

Il y a quelques jours, lassé de reprendre à zéro à chaque fois que je dois faire un truc avec GD sur PHP, je me suis dit que je pouvais faire une classe pour ça. Comme, exceptionnellement, j'avais un peu moins de deux heures de tranquillité, je m'y suis collé.

Au bout du compte, une fois la classe codée, il faut bien la tester...😬

drame.jpeg

C'est le problème des codeurs : ils ont du mal à arrêter de coder 🤩. Du coup, me voilà en route pour un script exploitant pictools.php... et ce qui aurait du prendre deux heures a pris plusieurs jours de papa codeur (petit rappel: 1 h de papa codeur = 7,2 heures de codeur normal en zone de guerre, au cours actuel 💣)

Bref, j'ai donc pondu une «api» avec un frontend permettant d'appliquer des transformations à une image à partir de son URL.

😎 petite image, long discours, toussa.

Capture du 2022-07-04 21-43-27.png

Donc, on fournit l'URL de l'image puis on ajoute des actions les unes à la suite des autres. Certaines n'ont pas besoin de paramètres (emboss, sepia etc) et d'autres si (contrast, resize etc)

Quand on clique sur un bouton action, on ajoute cette action à la liste avec, le cas échéant, l'input qui va bien pour les paramètres avec un placeholder de rappel.

Ainsi, on peut resize l'image à une taille précise ou à un pourcentage de la taille normale: tous les paramètres de coordonnées et de taille peuvent être précisés en pixels ou en pourcentages.

De plus, si on veut redimensionner l'image à une largeur en conservant le ratio automatiquement, il suffit de mettre -1 à la place de la hauteur: le script se démerdera tout seul.

La config ci-dessus donne le résultat ci-dessous:

pexels-photo-67818-large-758x505.jpeg

L'image d'origine

result.jpeg

Le résultat donné par scriptopic

Mais c'est pas tout

Donc, scriptopic permet de retoucher une image automatiquement. OK.👍

Mais cette image est utilisable directement depuis son URL de génération: si on colle l'URL précisée dans le cadre résultat, ça fonctionne. Avec un peu d'habitude, on peut le faire en direct (genre pour une image d'en-tête...). Comme les images retouchées sont sauvegardées avec un hash de l'url de requête, si on l'appelle à nouveau, elle ne sera plus générée mais simplement renvoyée (visible soulagement du serveur )

Et aussi

Comme des fois on a la flemme de faire une balise image, Scriptopic vous la donne directement: un double-clic et c'est copié prêt à coller...

Mais ce n'est toujours pas tout... (vous êtes gâtés)

Un truc rigolo, c'est que, comme pour Stamp, le front de scriptopic génère un bookmarklet en temps réel (c'est la deuxième ligne du cadre résultat): une fois satisfait de votre script, le bookmarklet généré permet de l'appliquer à l'image en cours: vous ouvrez l'image dans un onglet et clic-clac merci kodak.

Si vous voulez simplement envoyer l'image en cours pour travailler dessus, le bookmarklet de base est dispo en footer.

Atta atta, pars pas j'ai pas fini

Histoire d'ajouter encore une feature, vous pouvez stocker des scripts, à la main, dans le dossier ... scripts/ . Vous utiliserez le nom du fichier dans l'url avec ?script=[nomdefichier]

Ainsi, en sauvant le json de l'exemple (cadre «Script au format JSON») dans un fichier scripts/sepia.json vous pouvez ensuite l'appeler avec&script=sepia

Vous pouvez vous faire une bibliothèque de scripts pour tout et les appeler directement au lieu de vous taper du json dans l'URL

Tout est expliqué dans l'aide : https://api.warriordudimanche.net/scriptopic/?help

Hé m'sieu m'sieu:  pourquoi à la main ?  C'est mieux avec un  ptit bouton pour sauver  le script, non?

Ben parce que pour sauver sur le serveur, il faudrait un compte admin, donc un espace sécurisé et tout le toutim... et là, on parle pas du même projet

En conclusion

Le bouzin est testable là: https://api.warriordudimanche.net/scriptopic/

Et téléchargeable ici: https://api.warriordudimanche.net/scriptopic/?download

Je n'ai pas nettoyé le code, vu que je subis un harcèlement constant à la maison (lol), mais je le ferais, promis ! Le tout est en beta à l'arrache en licence amusez-vous avec.

Je n'ai pas encore écrit de doc pour pictools_class.php qui se trouve dans le zip, mais c'est assez simple à utiliser et chaque méthode est «documentée»


$picture=new pictool();// on peut mettre un array contenant les valeurs initiales des attributs : ['format'=>'png'] par exemple)
$picture->load('www.moncul.sur/la_commode.jpeg');
$picture->contrast(20);
$picture->sepia();
$picture->save("fichier.jpeg");
$picture->display();

Le script matrix qui alterne sketch et gaussian à plusieurs reprises puis colorise en vert

Pas flippant du tout.

Todo

  • Débugger, vu que ça va se dévoiler à l'usage plus intensif
  • ajouter le listage et l'usage des scripts sauvegardés dans le front.

Stamp v1.0

Dans la catégorie débranchement de cerveau, je vous propose une appli vigoureusement inutile mais totalement défoulatoire: Stamp.

Cette appli/api vous donne la possibilité d'ajouter un tampon sur une image en un minimum d'opérations. Ainsi, vous pourrez passer :

de ça

1.jpg

à ça

2.jpeg

A partir du frontend

En partant de là : https://api.warriordudimanche.net/stamp/ vous remplissez l'URL et le texte, vous validez et hop.

Capture du 2022-06-22 17-18-14.png

Mais aussi avec le bookmarklet

Comme toujours, le bookmarklet vous permet d'envoyer l'URL courante à Stamp: ouvrez l'image dans un nouvel onglet et cliquez sur le bookmarklet.

pour les plus observateurs

Bande de coquins, vous avez sans doute remarqué un autre bookmarklet à côté du premier... c'est un bookmarklet dynamique: grâce à lui vous pouvez créer des bookmarklets avec un texte spécifique.

Par exemple, si vous envisagez d'utiliser souvent le tampon «dans ton cul», pourquoi le retaper à chaque fois ? Glissez ce lien dans la barre de favoris et let's the fun begins !

Comme d'hab

Fait à l'arrache, interrompu toutes les minutes mais avec amour, dévotion à l'absurdité du monde et mon ordi.

Fil RSS des articles