Teddy Payet

MagicMirror², on recommence depuis le début

Teddy Payet — 2018-06-08T05:30:00Z

Récemment, j'ai écrit un article pour installer mon MagicMirror². Ce tutoriel est tout à fait fonctionnel. Malheureusement, pas dans mon cas car j'avais des versions de packages trop anciennes (cf. node.js). Je vais vous expliquer comment j'ai remédié à cela. :-)

J'ai acheté mon Raspberry Pi en juin 2016. J'en avais fait l'acquisition pour tester Gladys. A cette période, la version 2 de Gladys sortait des cartons et avaient peu de plugins pour agrémenter le tout.
Je l'ai donc laissé un peu de côté en attendant le bon moment pour réaliser mon deuxième projet pour ce petit bijoux.

Incompatibilité

J'avais installé toutes les librairies nécessaires pour Gladys et elle-même également. Or, ces versions sont conflictuelles avec ce que MagicMirror² désire. Je vais être honnête, ça me prendrait plus de temps de désinstaller chaque composant plutôt que de refaire la carte SD à partir de l'image de Raspbian fourni par raspberry.org.

Recommençons

Le premier point est de refaire la carte SD avec l'image 2018-04-18-raspbian-stretch issue du site officiel. Cela aura pour effet de repartir de zéro.

Cela fait, on remet la carte SD dans le Raspberry PI pour un redémarrage. Ce dernier point se passe quand même rapidement. Il n'y a pratiquement rien à faire. Les choses sont bien ficelées.

Installation de packages

Il est nécessaire d'installer quelques petits packages pour assurer leur disponibilité au moment voulu :

sudo apt-get install git zip unzip curl wget

Oui, ce n'est pas vraiment nécessaire avec une installation fraîche. Toutefois, cette action permettra de mettre tout le monde au même niveau.

Mise à jour des packages

Comme dans le précédent tutoriel, j'ai mis à jour les packages et le firmware :

sudo apt-get update; sudo apt-get upgrade; sudo apt-get autoremove; sudo rpi-update; sudo apt-get clean

A la fin de cette ligne, je vide le cache puis un redémarrage : sudo reboot

Installation de Node et MagicMirror²

Le redémarrage étant fait, on va maintenant lancer les scripts initiaux :
Node.js

wget -O - https://raw.githubusercontent.com/audstanley/NodeJs-Raspberry-Pi/master/Install-Node.sh | sudo bash node -v

MagicMirror²

bash -c "$(curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh)"

J'ai vu qu'une branche develop était présente et des commits sur cette branche réglaient quelques bugs. Alors, je passe à cette branche :

cd ~/MagicMirror/ git checkout -b develop git pull

Après cela, on peut lancer l'installation :

npm install

Tout s'est bien passé pour mon installation. Cool.

Installation des modules

Pour mes besoins actuels, j'utilise les modules suivants :

Le principe d'installation est le même pour tous les modules :

cd ~/MagicMirror/modules/ git clone https://github.com/user/mmm-nom-module

Soit :

cd ~/MagicMirror/modules/ git clone https://github.com/tataille/MMM-FreeBox-Monitor.git git clone https://github.com/spectroman/mmm-moon-phases.git git clone https://github.com/edward-shen/MMM-page-indicator.git git clone https://github.com/edward-shen/MMM-pages.git

Pour le reste, la configuration des modules se fait dans le fichier ~/MagicMirror/config/config.js

Configuration du fichier config.js

Comme le demande la documentation de MagicMirror², on doit copier ~/MagicMirror/config/config.js.sample vers ~/MagicMirror/config/config.js
Cela dit… Je ne vais pas faire ça. :-D

En effet, je vais faire en sorte d'avoir une version du fichier config.js qui soit versionnée sur un git.
Comme tout projet git, il n'est pas possible de cibler sur un fichier purement et simplement (comme le ferait svn par exemple). De ce fait, j'ai créé sur Gitlab.com un projet qui sera en mode privé.

On peut nommer ce projet "magicmirror_config" pour faire simple.
Depuis le terminal, je tape les lignes suivantes :

cd ~/ git clone https://gitlab.com/user/magicmirror_config.git

Maintenant, je crée un lien symbolique dans ~/MagicMirror/config/ pointant vers ~/magicmirror_config/config.js

cd ~/MagicMirror/config/ mv config.js config.js.old ln -s ~/magicmirror_config/config.js config.js

Par la même occasion, j'ai fait la même chose avec le fichier ~/MagicMirror/css/custom.css. Pratique pour personnaliser son affichage graphiquement.

cd ~/MagicMirror/css/ mv custom.css custom.css.old ln -s ~/magicmirror_config/custom.css custom.css

Démarrage automatique de MagicMirror²

Comme indiqué dans https://github.com/MichMich/MagicMirror/wiki/Auto-Starting-MagicMirror, il est possible de lancer automatiquement MagicMirror² au démarrage. Pour cela, il est nécessaire d'installer PM2 sur la machine.
Le script d'installation de MagicMirror² le fait. Mais j'ai eu un souci que je ne saurais identifier pour le moment. Je verrai cela plus tard.

Le script a bien installé pm2 mais n'a pas fait les liens symboliques pour ce stretch. Cela se trouve dans /opt/nodejs/bin/.
Sur stretch, on fait un lien vers /etc/alternatives/ puis de là, un lien dans /usr/bin/.
Voici le code à taper dans Terminal :

sudo ln -s /opt/nodejs/bin/pm2 /etc/alternatives/pm2 sudo ln -s /etc/alternatives/pm2 /usr/bin/pm2 sudo ln -s /opt/nodejs/bin/pm2-dev /etc/alternatives/pm2-dev sudo ln -s /etc/alternatives/pm2-dev /usr/bin/pm2-dev sudo ln -s /opt/nodejs/bin/pm2-docker /etc/alternatives/pm2-docker sudo ln -s /etc/alternatives/pm2-docker /usr/bin/pm2-docker sudo ln -s /opt/nodejs/bin/pm2-runtime /etc/alternatives/pm2-runtime sudo ln -s /etc/alternatives/pm2-runtime /usr/bin/pm2-runtime

Créer un fichier de démarrage de MagicMirror²
Pour nous simplifier la tâche, il est conseillé de créer un fichier bash :

cd ~ nano mm.sh

Puis d'ajouter les lignes suivantes :

cd ~/MagicMirror DISPLAY=:0 npm start

On enregistre le tout. Puis on le rend exécutable.

chmod +x mm.sh

Démarrer MagicMirror² avec PM2

C'est vraiment tout simple :

pm2 start mm.sh

Activer le démarrage du script
On doit être sûr que le script soit lancé au démarrage. Pour cela, on sauvegarde les réglages actuels de PM2 :

pm2 save

Contrôler son MagicMirror² via PM2

Avec MagicMirror fonctionnant via PM2, on dispose d'outils pratiques :

Redémarrer MagicMirror

pm2 restart mm

Arrêter MagicMirror

pm2 stop mm

Afficher les logs MagicMirror

pm2 logs mm

Afficher les informations sur le processus MagicMirror

pm2 show mm

A lire aussi

MagicMirror², un miroir qui vous veut du bien.
MagicMirror², on recommence depuis le début
MagicMirror², un socle qui lui va comme un gant
MagicMirror², un Raspberry Pi, un écran et cie sont dans un bateau
MagicMirror², ma configuration personnalisée
MagicMirror², configuration scriptée
MagicMirror², configuration scriptée, 2ème partie

MagicMirror², un miroir qui vous veut du bien.

Teddy Payet — 2018-06-01T15:09:00Z

Le “MagicMirror²” est un projet open source qui a été mis à disposition par son créateur : Michael Teeuw
Présentation : “MagicMirror² est une plate-forme modulaires open source de miroirs intelligents. Avec une liste croissante de modules installables, le MagicMirror² vous permet de convertir votre couloir ou votre miroir de salle de bains en votre assistant personnel. MagicMirror² est construit par le créateur du MagicMirror original avec l'aide incroyable d'une communauté croissante de contributeurs.”

Le matériel

Le matériel nécessaire est le suivant :

Un Raspberry Pi 3 (ne pas oublier une source d'alimentation) ;
Une carte SD de 8Go (minimum) ;
Un clavier ;
Une souris ;
Un câble HDMI ;
Un écran HDMI.

Je vous propose de voir comment installer MagicMirror² (aka MM²) sur votre Raspberry Pi 3. Bien entendu, le moment venu, vous brancherez tous les éléments les uns aux autres lorsque vous devrez vous connecter au Raspberry PI.

Installation du Raspberry Pi
Préparer une carte SD.

Il est nécessaire d'installer Raspbian sur votre carte SD pour optimiser votre utilisation du Raspberry Pi et de MagicMirror². Cette opération doit être réalisée depuis un ordinateur (Windows, Mac, Linux)

Aller sur l'url https://www.raspberrypi.org/downloads/raspbian/

Télécharger la dernière version de Raspbian (en mai 2018, Raspbian Stretch with desktop). Une fois téléchargé sur votre ordinateur, veuillez décompresser le fichier.

Avec le répertoire extrait, vous pouvez préparer la carte SD. Insérez votre carte SD dans votre ordinateur. Ouvrez votre logiciel* de gestion de disques (SD Card Formatter, Win32 Disk Imager, Utilitaire de Disques, etc.). Sélectionnez votre carte SD et lui donner un nom (de préférence sans espace ou accents pour simplifier les lignes de commandes). Référez-vous à la documentation propre à votre logiciel pour toutes ces étapes.

Sélectionnez l'image de Raspbian fraîchement extrait pour l'importer sur la carte SD. Lancez l'écriture de cette image sur la carte.

Cela fait, éjectez la carte SD.

Démarrer et configurer le Raspberry Pi

Maintenant que la carte SD est prête avec Raspbian, il est nécessaire de l'insérer dans le Raspberry Pi.

Connecter le câble HDMI à l'écran puis au Raspberry. Allumez votre écran. Branchez le clavier, la souris au Raspberry. Ne pas oublier maintenant de brancher la source d'alimentation du Raspberry.

Au premier démarrage du Raspberry Pi, cela peut prendre un peu de temps. Vous serez invité à renseigner le mot de passe pour l'utilisateur pi (soit par défaut : raspberry).

Depuis le terminal, entrez sudo raspi-config et validez. Cela lancera la configuration du Raspberry. Choisissez “Expand Filesystem” en tapant sur la touche “Entrée”. On utilisera ainsi tout l'espace de la carte SD.
Cela fait, on sélectionne “Internationalisation Options” pour choisir la langue désirée. Le faire à votre convenance : la langue, le timezone, le format du clavier, le protocole Wifi.

Maintenant, on va choisir “Advanced options”, puis “Hostname”. Par défaut, on a raspberrypi. Mais au vu du projet, on peut appeler ça magicpi. A votre convenance ici :-)

Après cela, revenir sur “Advanced options” et choisir “SSH”. Il sera utile de pouvoir une connexion SSH pour accéder au Raspberry à distance.

On devrait être bon maintenant. Revenir à l'écran principal et utiliser la touche de tabulation pour mettre en surbrillance “Finish” en bas de l'écran et cliquer sur “Entrée”. A la demande de redémarrage, cliquer sur “Yes”.

Configurer le Wifi du Raspberry Pi

Une particularité du Raspberry Pi 3 est d'avoir le wifi nativement. Il va falloir le configurer pour avoir accès à votre réseau internet.

Après le redémarrage, vous aurez un bureau graphique Linux. Lancez le Terminal, vous y configurez le wifi en éditant le fichier wpa_supplicant.conf :

sudo nano /etc/wpa_supplicant/wpa_supplicant.conf

A la fin du fichier, renseignez vos informations de connexion :

network={ ssid="votre_nom_de_reseau" psk="votre_mot_de_passe_reseau" }

Pour enregistrer votre configuration, cliquer sur CTRL-X puis sur Y.

Il faut redémarrer votre raspberry : sudo reboot.

Nettoyer et mettre à jour le système

Bon, tout cela est sympa, mais il va falloir mettre tout ce petit monde à jour et faire maigrir tout ça.

Depuis votre Terminal, taper df -h pour avoir la capacité actuelle de votre Raspberry. Notez l'espace utilisé pour le comparer.

On va supprimer quelques packages inutiles pour le MM² :

sudo apt-get remove --purge idle3 java-common libreoffice* minecraft-pi scratch nuscratch penguinspuzzle python-minecraftpi python3-minecraftpi smartsim sonic-pi wolfram-engine

Puis :

sudo apt-get clean sudo apt-get autoremove

Cela va prendre un petit moment pour que ces opérations se terminent. Soyez patient et pas trop loin de votre écran pour valider certaines opérations. Faites à nouveau df -h dans votre terminal et remarquez le changement.

Continuons. Il est temps de mettre à jour vos packages :

sudo apt-get update ; sudo apt-get upgrade ; sudo rpi-update.

“update” met à jour la liste des packages disponibles et leur version ;
“upgrade” met à jour les packages installées ;
“rpi-update” va quant à lui mettre à jour le firmware du Raspberry Pi.

Respirez à nouveau et tapez sudo reboot

Installation de MagicMirror²

Le Raspberry est prêt. Alors, installons le temps attendu MagicMirror².

Il existe un script qui permettra d'installer MM² comme il se doit. Toutefois, il arrive que l'installation du package “node” pose un problème. Le script installe une version NodeJS 9.x. La version de node testée par MM² est la 5.1.0. Si vous avec une version inférieure, cela bloquera l'installation de composants node qui nécessitent eux un node 4.6.x minimum.
Il faudra faire attention à la version de NodeJS surtout si vous avez depuis un moment votre Raspberry Pi. Ce qui était mon cas. J'avais un node v4.4.2 qui forcément n'était pas au goût de MM².

Installation préalable de NodeJS

Pour y remédier, vous allez installer node en premier. Tapez ceci dans votre Terminal :

wget -O - https://raw.githubusercontent.com/audstanley/NodeJs-Raspberry-Pi/master/Install-Node.sh | sudo bash node -v

Ce script bash installera par défaut la version NodeJS 10.x. Il est possible de changer la version de NodeJS en tapant ceci :

sudo node-install -v 9; # then you will get prompted with which # specific version of 9 you wish to install

Mais on n'en est pas là.

Exécution du script pour MagicMirror²

NodeJS étant installé, vous allez lancer le script d'installation de MagicMirror² :

bash -c "$(curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh)"

Cela lancera le processus d'installation pour vous. Ne partez pas trop loin du Raspberry car des validations seront à faire au fil de l'eau.

Attention, le script d'installation de MM² s'occupe déjà d'installer un NodeJS (v9.x en mai 2018). Donc, vous pourriez vous passer de l'étape précédente en réalité. Mais si vous désirez tester sur d'autres versions de NodeJS, une installation manuelle, citée précédemment, vous facilitera grandement la tâche.
Si le script de MM² détecte un node existant, il sautera cette étape et vous indiquera qu'il faudra mettre à jour node si votre version est inférieure à la version testée.

Configuration complémentaire

Le script s'est bien déroulé. Vous devez configurer quelques points complémentaires spécifiques à MM². Il faut par exemple indiquer que l'écran est à la verticale. Tapez :

sudo nano /boot/config.txt

Et ajoutez à la fin du fichier les lignes suivantes :

# Rotate display vertically display_rotate=1

Appuyez sur CTRL-X quand vous avez fini puis Y pour sauvegarder vos modifications.
Raspbian lance un écran de veille au bout d'un certain temps. De ce fait, nous allons désactiver ceci en modifiant un fichier :

sudo nano /etc/xdg/lxsession/LXDE-pi/autostart

Ajoutez à la fin du fichier ces lignes :

@xset s noblank @xset s off @xset -dpms

Modifiez le fichier lightdm.conf :

sudo nano /etc/lightdm/lightdm.conf

Recherchez la ligne xserver-command en descendant plus bas. Y renseigner ces valeurs :

xserver-command=X -s 0 -dpms

Enlevez le « # » en début de ligne si besoin. Enregistrez vos modifications CTRL-X puis Y et entrée.

Pour des soucis d'économie d'énergie Raspberry désactive certains composants dont le wifi. En modifiant un paramètre dans /etc/network/interfaces, cette fonctionnalité sera ineffective :

sudo nano /etc/network/interfaces

Cherchez wlan0 et ajoutez, en-dessous, la ligne suivante :

wireless-power off

Sauvegardez vos modifications et redémarrez votre Raspberry Pi :

sudo reboot

A ce stade, vous avez configuré entièrement votre MM². Il vous faudra le personnaliser en éditant le fichier config.js et/ou en ajoutant des modules supplémentaires.

cd ~/MagicMirror/config cp config.js.sample config.js

Et maintenant, vous pouvez l'essayer :

cd ~$HOME/MagicMirror npm start

Enjoy !

Sources :

A lire aussi

MagicMirror², un miroir qui vous veut du bien.
MagicMirror², on recommence depuis le début
MagicMirror², un socle qui lui va comme un gant
MagicMirror², un Raspberry Pi, un écran et cie sont dans un bateau
MagicMirror², ma configuration personnalisée
MagicMirror², configuration scriptée
MagicMirror², configuration scriptée, 2ème partie

CDC Développement Solidaire

Teddy Payet — 2014-03-21T08:00:00Z

Ce site du groupe de la Caisse des Dépôts présente les actions d'une filiale du groupe dans le monde.
Il a été porté sous SPIP 3.0 et utilise le framework Bootstrap 3.0 (CSS et JS). L'intégration a été assuré par un développeur intégrateur.
J'ai développé un plugin gérant les dons et adhésions à cette filiale. Création de formulaire CVT multi-étapes, création d'empreintes stockées en base de données, envoi et retour d'informations à un webservice bancaire (norme à respecter) qui assure (…)

- Développement / SPIP, HTML, CSS, MySQL, PHP, Javascript, Développeur Web, Salarié, Bootstrap (CSS et JS), Sublime Text, SVN

Squelettes "Z-core" sous SPIP 3 - astuces

Teddy Payet — 2014-01-14T12:10:10Z

Il n'est plus nécessaire, je pense, de présenter l'architecture des squelettes sous la nomenclature "Z". Beaucoup l'utilise aujourd'hui, moi le premier.

Préambule

Le plugin Z-core est l'héritage du plugin Zpip développé par Matthieu Marcillaud, Cédric Morin, Romy Têtue et un collectif SPIP. Z-core est le moteur offrant le découpage des squelettes. Il ne fournit pas de squelettes. C'est à nous ou au plugin choisi de fournir les pages qui vont bien.
C'est rapide et efficace. Il faut savoir aussi que les noms de blocs/zones ont changé par rapport à Zpip. Presque que chaque zone correspond à un répertoire.
C'est un peu complexe à appréhender au départ. Mais c'est un aspect "vite oublié" au profit de son efficacité.

Remarque

L'un des premiers jeux de squelettes offerts à la communauté SPIP utilisant cette mécanique zcore est le plugin "SPIP-r" développé par Cédric.
Toute la doc sur ce site : http://spipr.nursit.com/

Problématique

Il arrive parfois que l'on désire que la page sommaire ait sa propre architecture, différente du reste des pages classiques.
On pourrait ajouter des balises conditionnelles si on se trouve sur un #ENV{type-page}|=={sommaire} mais ça risque de faire lourd si votre mise en page est complexe.

Voici le code initial de structure.html fournit par Zcore :

[(#VAL{_Z_DOCTYPE}|defined|?{#VAL{_Z_DOCTYPE}|constant}|sinon{})][
(#SET{class,[page_(#ENV{type-page,page})[ #ENV{type-page,page}_(#ENV{composition,''})]][ composition_(#ENV{composition})]})][
(#REM) http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/]






  [ (#REM) Debut du head particulier a chaque page pour inserer un title, des css particulieres(mais surchargees), ou des js *inline* ][ (#REM) Partie commune a toutes les pages, sans env ][ (#REM) Fin du head particulier a chaque page, pour inserer des js specifiques par exemple pour inserer des js *externes* ]

Zcore renvoie vers un body.html unique pour tout le monde.
Comment dire à Zcore/SPIP qu'on veut une mise en page particulière pour le sommaire ?

Astuce

Pour cela, on peut très facilement ajouter 2 ou 3 lignes de codes pour que SPIP sélectionne le body.html approprié pour le sommaire.
Comme dit plus haut et vu dans le code initial, Z-core envoie une variable d'environnement nommé type-page.
Une page sommaire.html aura pour variable type-page=sommaire. Pour un article, nous aurons type-page=article, rubrique type-page=rubrique, etc.

Le code magique

Pour se faire, on va remplacer par ceci :

#SET{body,body}
[(#CHEMIN{body_#ENV{type-page}.html}|?{#SET{body,body_#ENV{type-page}},#SET{body,#GET{body}}})]
[(#CHEMIN{body_#ENV{type-page}-#ENV{composition}.html}|?{#SET{body,body_#ENV{type-page}-#ENV{composition}},#SET{body,#GET{body}}})]

Explications

On initialise une variable body avec pour valeur par défaut "body".
Grâce à la première balise #CHEMIN [1], on va chercher l'existence d'un body_sommaire.html. Mais avec ce code, on va aussi regarder si body_article.html, body_rubrique.html ou autre existent. Sinon, on garde body.html par défaut.
La deuxième balise #CHEMIN va plus loin en regardant s'il existe une composition en plus de notre type de page. Soit pour une composition "ma_super_compo" pour mon article, Zcore/SPIP regardera l'existence de body_article-ma_super_compo.html. Si elle n'existe pas, on garde la valeur précédente de la variable "body".

Erratum du 17/01/2014

Attention
Il n'est pas nécessaire de faire tout cela. Rendons justice en pointant vers l'article de la doc expliquant cela : http://spipr.nursit.com/framework-z...

Grâce au message de Valéry dans le forum ci dessous, j'ai fouillé un peu plus dans le code de z-core et il s'avère qu'il n'est pas nécessaire d'utiliser le code ci-dessus pour le body.html
Z-core va détecter "naturellement" et sans artifice la présence de body-rubrique.html ou body-rubrique-ma_compo.html.

Mais le code ci-dessous est toujours d'actualité :

Aller plus loin

On pourrait étendre ce principe sur les zones de découpage dans notre body.html.
En effet, on pourrait avoir besoin pour un aside, d'une composition de rubrique particulière, un autre contenu que celui donner par aside/rubrique.html. Pour cela, ajouter en début de votre fichier body.html le code suivant :

[(#SET{html,#ENV{type-page}})]
[(#SET{html2,#ENV{type-page}-#ENV{composition}})]

On instancie 2 valeurs :

"html" qui contient le type de page ;
"html2" contient le type de page et la composition associée.

A la place de de body.html, mettre .
Et la ligne juste au dessus, mettre ce code :

[(#CHEMIN{aside/#GET{html2}.html}|?{#SET{aside,#GET{html2}},#SET{aside,#GET{html}}})]

L'astuce est donc la même que plus haut. Pour une composition "ma_super_compo" pour une rubrique, on va chercher l'existence de aside/rubrique-ma_super_compo.html, sinon on prend aside/rubrique.html.

Et voilà !
A vous de tester si cette mécanique vous convient ou pas ! Pour ma part c'est testé et approuvé !

[1] La doc est par ici

Image : © Skitterphoto

Afficher les globals tout en boucle SPIP

Teddy Payet — 2013-11-15T17:11:41Z

Lorsqu'on fait un développement PHP, on a besoin parfois de savoir ce qu'on a dans nos $GLOBALS. Il en va de même lorsqu'on est en développement avec SPIP. Voici un bout de code qui peut dépanner.

Préambule

Il existe des solutions plus poussées comme les logiciels IDE qui permettent de voir les fonctions appellées dans la page. Malheureusement, on n'a pas toujours la possibilité de coder avec ces logiciels dans l'infrastructure où nous sommes.
Dans SPIP, on peut même utiliser le plugin Test Builder pour créer... nos tests. C'est super pratique quand on a pris le coup de main.

Mais voilà... Ca, c'est dans le meilleur des mondes. Parfois, tout cela n'est pas possible ou on a juste besoin d'une information sans avoir à utiliser un couteau Suisse(c) là où un cure-dent suffirait.

Le code

Pour faire illustrer notre exemple, on va créer dans notre répertoire squelettes l'arborescence suivante :

squelettes/
- prive/
  - squelettes/
    - contenu/
      - globals.html

Le fichier globals.html contiendra, soyons originaux, l'affichage de nos globals. Tout se fera par cette page.

Pour l'appeller, aller à l'adresse ecrire/?exec=globals. Comme le fichier est vide, vous devriez peut-être avoir une erreur ou au mieux une page "blanche".

Voici le code à insérer dans la page globals.html :

 
  #SET{global,$GLOBALS[#ENV{index}]}  #SET{global,$GLOBALS}    Index des $GLOBALS
  [(#SELF|parametre_url{'index',''}|parametre_url{'affichage',''}|form_hidden)]    
 
  [(#SET{nom_index,#VAL{"'"}|concat{#ENV{index},"'"}})] #SET{datatype,$GLOBALS[#GET{nom_index}]} [(#ENV{index}|non) $GLOBALS [ 
(#EVAL{$GLOBALS}|gettype)] 
 ] [(#ENV{index}|oui) [(#GET{datatype}) [ 
(#EVAL{#GET{datatype}}|gettype)] 
] ] [(#ENV{affichage}|=={var_dump}|oui) [(#EVAL{#GET{global}}|print|sinon{'vide'})
] ] [(#ENV{affichage}|=={cles}|oui) [(#EVAL{#GET{global}}|array_keys|foreach|sinon{'vide'})
] ] [(#ENV{affichage}|non) [(#EVAL{#GET{global}}|array_keys|foreach|sinon{'vide'})
] ]

Explications

La boucle "index"
Elle va tout simplement regarder si on a passé un paramètre index dans notre URL. Si oui, on affichera le contenu de $GLOBALS[#ENV{index}]. Sinon, on prend $GLOBALS.

La boucle "form"
Elle va créer un formulaire avec 2 champs select. Le premier select listera tous les "index" de notre super variable PHP $GLOBALS.
Le deuxième select se charge d'indiquer quel type d'affichage désire-t-on avoir pour notre variable :
– var_dump : pour les utilisateurs PHP, cela parle de source : "affiche les informations structurées d'une variable, y compris son type et sa valeur." Sauf que dans notre cas, on n'a pas le type :-P
– cles : affiche le tableau associatif des clés de notre variable.

Les ENV
Les #ENV après notre boucle "form" vérifie la présence du paramètre "affichage" dans notre url. Selon sa valeur, on affichera d'une certaine façon le contenu de notre variable.

Le javascript
Le javascript en fin de page va juste changer la sélection du deuxième select selon le type de variable qu'on aura. Si notre variable est de type array, le select affichage sera "cles". Tous les autres types (Object, string, etc.) auront un affichage "var_dump".

Fini...

Ce code vous permet donc depuis l'espace privé d'avoir les globals. Mais il vous suffit de faire une page accessible sur la partie publique de votre site avec exactement le même code pour avoir les globals dans cet environnement.

Encore une fois, ce n'est qu'une astuce parmis d'autres. Si vous en avez aussi, elles sont les bienvenues en commentaires !
Cela permettra d'avoir d'autres pratiques de développeurs SPIP/PHP.

Lister la liste des squelettes de var_mode=inclure

Teddy Payet — 2013-09-23T15:30:00Z

Depuis SPIP 2, il existe un mode très intéressant pour retrouver ses petits : var_mode=inclure. Cet aide au débuggage s'est amélioré au fur et à mesure. Mais il n'est pas aisé de retrouver la liste complète des squelettes (noisettes, inclure, etc.) en un seul endroit et un seul regard.

Voici un petit bout de javascript qui va vous permettre d'avoir le nom de chaque bloc appelé dans une liste ordonnée.

Pour SPIP 2.0 :

var text = ''; $('.blocs legend').each(function(){ text +='' + this.innerHTML + '
'; }); text += '
'; $('body').append(text);

Pour SPIP 2.1 et SPIP 3 :

var text = ''; $('.inclure_blocs h6').each(function(){ text +='' + this.innerHTML + '
'; }); text += '
'; $('body').append(text);

Ce code est à mettre dans la console de votre navigateur bien entendu.
Enjoy !

Partager sur #G+ en #javascript

Teddy Payet — 2013-07-16T08:29:52Z

Pour ceux qui me suivent un peu, vous avez remarqué que j'utilise Google+ et Twitter. Lorsque Google Reader existait encore :-$ il me suffisait de cliquer sur le bouton de partage pour que ce que je voulais se publie sur Google+ puis, par RSS sur Twitter.

Malheureusement, depuis le 1er juillet, Google reader n'est plus de ce monde…

J'ai dû trouver un autre lecteur RSS en ligne qui soit sympa et surtout fonctionnel. J'ai testé The Old Reader qui est plutôt bien fait. On retrouve les fonctions principales qu'on attend d'un reader. Manque les partages…
J'ai testé depuis 1 semaine Feedly. Esthétiquement, on est dans du Flat-UI. C'est simple et agréable.
Je ne m'attarderai pas dans cet article sur ses fonctions car ce n'est pas le sujet.

Que ce soit sur The Old Reader ou Feedly, le partage vers Google+ n'est pas "naturel" comme avec Google Reader. Sur Feedly, on a un bouton "g+1". Il renvoie vers la page http://plus.google.com/share?url=votre_url_a_partager.tld.

Page de partage de Google+

Vous pouvez voir une prévisualisation de votre lien en dessous de la zone de commentaires : le titre de la page, une image sélectionnée et l'url.
Je vais utiliser cette page pour mon besoin.

Si vous êtes comme moi, vous aimez "personnaliser" le titre en y mettant des mots-clés (hashtags). Mais voilà… Il vous faut retaper tout le titre manuellement. Long quand on partage beaucoup d'articles en une journée.

Vif du sujet : du javascript

Firefox, Chrome et Safari permettent d'avoir un bookmark contenant du javascript. J'ai utilisé cette méthode pour pouvoir partager et copier le titre de mon article dans la zone de commentaire.

Les premières lignes de codes
Dans les lignes de codes que j'écrirai sur cette page, je ferai la version étendue. La version minifiée sera en lien.
Tout d'abord, quand je suis sur une page que je désire partager, il y a plusieurs méthodes :
– copier le lien, aller sur mon compte Google+, coller le lien dans la zone de partage, entrer mon texte et enfin "partager" en cliquant sur le bouton…
– Un petit bout de javascript pour partager le lien sur mon compte Google+ (Ce dernier n'ayant pas d'API, il reste des étapes manuelles que je ne peux éviter).

Bien entendu, j'utilise la deuxième méthode de préférence. Voici enfin le code :

location.href='https://plus.google.com/share?url='+encodeURIComponent(location.href);

Très simple, non ? Ajouter ce lien dans votre barre personnelle.
location.href correspond à l'url de votre barre d'adresse. Vous en voyez 2. Le premier c'est l'url vers laquelle vous allez être redirigé. Le second est l'url de la page actuelle.

Cool. Mais là, on est que redirigé uniquement. La zone de commentaires n'a pas été personnalisé.

Personnaliser la zone de commentaires

Actuellement, j'utilise un deuxième "bouton" quand je suis sur cette page de partage. J'ai fait des tests qui n'ont pas été concluant selon les différentes machines sur lesquelles j'étais. Le temps de chargement diffère selon le type de connection, la rapidité de l'ordinateur, le navigateur, etc.
Donc, le deuxième bouton est le meilleur compromis pour le moment.

(function(){ var titre = document.getElementsByClassName("ot-anchor")[1].textContent; document.getElementsByClassName("editable")[0].innerHTML = titre;
})();

La première variable titre va chercher le titre de ma page.
L'image, le titre et l'url ont tous les 3 la class ot-anchor. Celui qui m'intéresse est le 2ème… soit un index "1".
Une fois le titre trouvé, je l'insère dans la zone de commentaires. Ce n'est pas un textarea classique… C'est un div avec la class editable.

À tester en rajoutant ce lien dans votre barre personnelle.
Copie conforme du titre donc… On peut maintenant y ajouter nos hashtags.

On ne peut pas faire plus ?

C'est bien cool tout ça, mais je dois à chaque fois rentrer les "#" devant les mots-clés que je veux… Ils sont quasiment les même. Ne pourrais-je pas simplifier cette saisie aussi ?
Et bien oui. Voici le code :

(function(){ var titre = document.getElementsByClassName("ot-anchor")[1].textContent; var tableau=titre.split(" "); for(i=0;i3){ tableau[i]="#"+tableau[i]; } } titre=tableau.join(" "); document.getElementsByClassName("editable")[0].innerHTML = titre;
})();

La différence avec le précédent code, c'est que je crée une variable tableau. Elle va se charger de mettre le hashtag devant chaque mot… J'aurais pu me contenter d'un replace{" "," #"}. Mais son inconvénient est qu'il mettra aussi un "#" devant "of", "the", "les", "le", "la", etc.
Dans mon utilisation, généralement, les mots que je mets en hashtag font plus de 3 caractères.
J'ai réalisé une petite vérification grâce à une boucle FOR.

Voici 3){tableau[i]="#"+tableau[i];}}titre=tableau.join(" ");document.getElementsByClassName("editable")[0].innerHTML = titre;})();">le bouton à rajouter dans votre barre personnelle de votre navigateur.

Dites moi ce que vous en pensez et si vous avez trouvé une meilleure méthode. Je suis preneur de suggestions. :-)

Refonte de l'espace privé de SPIP en Bootstrap

Teddy Payet — 2013-04-09T18:02:53Z

En octobre 2012, Cédric (qu'on ne présente plus dans la communauté SPIP) a publié sur la zone SPIP un plugin permettant de faire du Bootstrap (anciennement connu sous le nom de "Twitter Bootstrap") avec notre outil favori. Il a incorporé dans ce plugin le travail colossale de Tetue sur le respect de la typographie propre à SPIP.
Le temps que je me familiarise avec ce Framework CSS (et javascript) avec différents projets, l'envie m'est venue de refaire l'espace privé de SPIP grâce à Bootstrap…

Préambule

Cette phase n'est pas une refonte ergonomique de l'espace privé mais un portage de l'espace privé sur Bootstrap. Le but étant de retrouver les fonctionnalités de l'ancienne interface et si possible, d'apporter les réflexions et avantages de Bootstrap.
Un groupe de travail pourra être monté à la suite de cette phase de portage pour se pencher sur l'ergonomie de l'espace privé.

Le choix de Bootstrap a été fait pour ma part grâce à l'existence du plugin de Cédric. Des personnes pourraient dire que ce choix n'est pas judicieux. Certes, mais nous avons un plugin existant alors autant en profiter. De plus, les phases de portage vers un framework pourront aider si on décide de partir vers un autre framework CSS (exemple : Foundation, 52Framework, YUI Grids, etc.).

La rédaction du présent article sur mon blog a été fait pour ne pas polluer SPIP Contrib comme l'a très justement noté Cédric ici. Quand tout sera sur une version stable, j'écrirai un article sur SPIP Contrib.

Plus que des mots…

… des images.
Pour que vous vous rendiez compte du rendu, je vous invite à regarder les images ci-dessous d'avant/après.

Page d'accueil

Page d'accueil - avant

Page d'accueil - après

Page accueil - v0.7.1

Page d'accueil - Menu de navigation

Page accueil - Menu navigation - avant

Page accueil - Menu navigation - après

Page accueil - Menu navigation - v0.7.1

Page d'accueil - Menu de navigation au survol

Page accueil - Menu navigation survol - avant

Page accueil - Menu navigation survol - après

Page accueil - Menu navigation survol - v0.7.1

Page d'article

Page article - avant

Page article - après

Page d'article - v0.7.1

Appel à tester

Comme vous pouvez le voir, l'interface a pas mal changé mais il reste beaucoup de travail à réaliser. De ce fait, j'aurais besoin de beta testeur.
Un appel a déjà été fait sur la liste spip-dev. On peut continuer la conversation sur la liste mais vous pouvez aussi poster vos commentaires (appréciations, remontées de bugs, pertes de fonctionnalités, améliorations, etc.) sur l'article ici présent.
Je m'efforcerai à noter chaque bug sur cet article et au moins sur le fichier TODO du répertoire dudit plugin.

Pour tester

Et bien, pour tester, il vous faudra récupérer les fichiers par svn :
svn checkout svn://zone.spip.org/spip-zone/_plugins_/bootstrap_prive
Ce plugin est dépendant de 2 autres plugins :
– Bootstrap : http://zone.spip.org/trac/spip-zone... ;
– LESSCSS : http://zone.spip.org/trac/spip-zone....

Réalisations

10/04/2013 :
Avec le commit http://zone.spip.org/trac/spip-zone..., le bandeau de navigation devient blanc (la classe navbar-inverse a été retirée) et laisse place aux icônes de couleur propre à SPIP. L'interface en est plus légère, plus douce.

01/01/2014
Avec le commit http://zone.spip.org/trac/spip-zone..., le bug sur la page article est réglé.
La pagination est conventionnelle à Bootstrap avec ceci http://zone.spip.org/trac/spip-zone...

Quelques packages pour Sublime text 2

Teddy Payet — 2012-11-27T11:52:51Z

J'utilise depuis mi-octobre Sublime Text 2 pour la création de mes pages (html, javascript, css, etc.). De base, il est très bien, mais il montre toute sa puissance lorsqu'on lui ajoute des packages (des extensions). Voici une liste de packages que j'ai installé.

Préalable

Avant de commencer vous devez installer le "Package Control" pour pouvoir, comme son nom l'indique, gérer vos différents packages.
Suivre la démarche sur ce site pour l'avoir : http://wbond.net/sublime_packages/p...

Installation d'un package

Pour installer un package, appuyez sur "Ctrl+Maj+P".

Tapez "install". Vous verrez apparaître "Package Control : Install Package". Cliquez dessus.
En bas de votre fenêtre, à gauche, vous verrez que Sublime Text est en train de réfléchir. Il recherche les packages à installer. Il y en a une floppée par défaut.
Cela fait, un champ s'affiche en haut de la fenêtre avec en dessous la liste complète des packages disponibles.
Tapez les premières lettres du package que vous désirez installer. La liste se réduit comme peau de chagrin pour afficher les résultats correspondants à votre recherche.
Cliquez sur celui désiré. Ça mouline en bas à gauche de votre fenêtre… Et voilà, votre package est installé.
Si vous ne voyez pas les effets escomptés de votre package, redémarrez Sublime Text.

Installation d'un package non répertorié

On doit maintenant ajouter un package qui n'est pas installé par défaut dans Package Control. Pour cela, suivre les étapes suivantes :

Appuyez sur "Ctrl+Maj+P". Taper "repository". S'affiche alors "Package Control : add repository", validez ce choix.
En bas de votre fenêtre, un champ est apparu. Vous devez coller l'url de votre nouveau package (sur GitHub, c'est l'url indiqué pour "Git Read-only"). Validez.
Ça mouline… C'est prêt. Maintenant, passer à la méthode classique

Zen Coding

C'est LE premier package que j'ai installé ! Il vous simplifie la vie quand vous avez des centaines de lignes de codes à rentrer.
– Nom dans la liste des repositories : "Zen Coding"
– Plus d'infos : http://code.google.com/p/zen-coding/

Prefixr

Vous avez tous entendu parler de CSS3… (entre autres). Et chaque navigateur y va de sa sauce pour son implémentation : -moz-border-radius, -webkit-border-radius, etc.
Avec Prefixr, il vous suffit d'écrire, par exemple, border-radius : 10px puis Edit > Prefixr. Et hop ! Il vous met tous les préfixes adéquates.
– Nom dans la liste des repositories : "Prefixr"
– Plus d'infos : http://prefixr.com

jQuery

Il y a un package de base dans Sublime Text. Mais la version de jQuery utilisée est inférieure à la 1.7 (on n'a pas l'évent .on()). Ce qui n'est pas très pratique à la longue. J'ai trouvé un package un peu plus complet par hasard sur github (Une petite recherche sur google avec "jquery sublime text" ramène le lien suivant) : MrMartineau
Ce n'est pas un package par défaut, donc suivre la démarche ci-dessus
– Nom dans la liste des repositories : "jQuery"
– Git Read-only : https://github.com/mrmartineau/jQue...
– Plus d'infos : https://github.com/mrmartineau/Jquery

SideBar Enhancements

Ce package étend votre menu contextuel (clic droit de la souris) sur vos fichiers. Vous pouvez personnaliser les applications qui pourront ouvrir tel ou tel fichier.
– Nom dans la liste des repositories : "SideBar Enhancement"
– Plus d'infos : https://github.com/titoBouzout/Side...

Bracket Highlighter

Un "défaut" dans Sublime Text, c'est qu'on a un peu de mal à visualiser les éléments d'ouverture ou de fermeture du code en comparaison à NotePad++ ou Komodo Edit. Et bien, il existe un package pour cela.
Ce n'est pas un package par défaut, donc suivre la démarche ci-dessus
– Nom dans la liste des repositories : "BracketHighlighter"
– Git Read-only : https://github.com/facelessuser/Bra...
– Plus d'infos : https://github.com/facelessuser/Bra...

J'ajouterai au fur et à mesure des packages au fil de l'eau.
Si vous en avez de sympa, vous pouvez les lister dans les commentaires ou m'envoyer un message pour que je les référence dans l'article.

Les ressources du lundi #4

Teddy Payet — 2012-05-14T06:30:00Z

Ce lundi, on va s'intéresser à quelques articles en rapport avec le javascript. Mais on ne va pas oublier l'inspiration et les ressources.
Vous trouverez ci-dessous les liens, bien entendu, mais aussi en dessous de la capture, les premières phrases de l'article de la ressource. Ainsi, vous aurez un aperçu un peu plus complet. Le mieux : lire tout l'article de la ressource ! ;-)

70+ Best Books On Web Design

: These days there are so many books on the web about Design, Development, & Programming. What are the best ones ? Where Do I Begin ? Well the best place to start, is right here ! Today we go through some of the latest, and best, Design books on the web. […]

Creating an iOS-like Home Screen with CoffeeScript

: Today we are going to create an iOS-like home screen using CoffeeScript – a new JavaScript based language, and the jQuery library. CoffeScript has a clean syntax that lies somewhere in between Ruby and Python. […]

jCSML – A New Cross Platform Animation Library

: With mobile access and tablets, cross-platform media compatibility has become one of the most important features for new web technologies. With Adobe Flash not being supported on iOS and HTML5 not being native to earlier versions of Internet Explorer, the jCS Media Library has arrived just in time. […]

25 Inspiring Quotes for Creative People

: I find one of the most effective solutions to feeling unmotivated or disinterested in what I'm doing is to read a couple of quotes from others who have been and done it. […]

40 Essential UI Design Tools For Web Designers

: Web User Interface (UI) elements happen to be the entire crux associated with the matter for internet programmer not to mention designer. A designers concepts not to mention shape decisions always affect the entire end users of the site. Designing consumer interface especially within the initial levels typically is a complex thing then UI design elements may come handy.[…]

Cross-Browser JavaScript Message Library

: After introducing a new dhtmlxMessage component in DHTMLX 3.0, we decided to enhance it and provide a complete solution for displaying dialog boxes on a web page. Using the code of dhtmlxMessage, we've created a lightweight JavaScript message library that is released under MIT license and can be used for free in any web app. […]

Custom Blog Posts Design Inspiration – 50 Amazing Examples

: Creating custom blog posts can have many advantages. For starters, they look a lot better than the plain old repetitive style that normal posts have which makes your site look dynamic in the eyes of your readers who are, maybe, border with your old post style.[…]

Which responsive images solution should you use ?

: There are a bunch of techniques going around for dealing with responsive images lately. That is, solutions to help us serve the right image for the occasion (e.g. size of screen and bandwidth available). […]

Inspiration : Packaging Design

: Package design can be a good alternative place for finding inspiration. From textures to color schemes and typography, we can get a lot of references from packaging designs. […]

Nestled in a Lush Forest in Pennsylvania : The Seidenberg House

: The Seidenberg House, designed by Metcalfe A&D, is a remodeling project of an existing mid-century dwelling. located in Conshohocken, Pennsylvania. […]

Comac : Restaurant A l'Envi

: Dans le village médiéval de Charroux, l'agence Comac a réalisé le réaménagement de cette grange du XVII ème siècle en restaurant. Derrière les murs de pierre enduite à la chaux se glisse la cuisine et la salle, dans deux volumes de bois, distincts et ouverts, réunis par un deck. […]

Top Tips and Tools for Creating an Infographic Resume

: Infographic resumes are all the rage, and with so many people in a position of unemployment, it is not hard to see why job seekers are looking for an innovative and unique way to make themselves stand out when applying for a new job. […]

Teddy Payet

MagicMirror², on recommence depuis le début

Incompatibilité

Recommençons

Installation de packages

Mise à jour des packages

Installation de Node et MagicMirror²

Installation des modules

Configuration du fichier config.js

Démarrage automatique de MagicMirror²

Démarrer MagicMirror² avec PM2

Contrôler son MagicMirror² via PM2

A lire aussi

MagicMirror², un miroir qui vous veut du bien.

Le matériel

Installation du Raspberry Pi Préparer une carte SD.

Démarrer et configurer le Raspberry Pi

Configurer le Wifi du Raspberry Pi

Nettoyer et mettre à jour le système

Installation de MagicMirror²

Installation préalable de NodeJS

Exécution du script pour MagicMirror²

Configuration complémentaire

Sources :

A lire aussi

CDC Développement Solidaire

Squelettes "Z-core" sous SPIP 3 - astuces

Préambule

Remarque

Problématique

Astuce

Le code magique

Erratum du 17/01/2014

Aller plus loin

Afficher les globals tout en boucle SPIP

Préambule

Le code

Index des $GLOBALS

$GLOBALS [ (#EVAL{$GLOBALS}|gettype)]

(#GET{datatype}) [ (#EVAL{#GET{datatype}}|gettype)]

Explications

Fini...

Lister la liste des squelettes de var_mode=inclure

Partager sur #G+ en #javascript

Vif du sujet : du javascript

Personnaliser la zone de commentaires

On ne peut pas faire plus ?

Refonte de l'espace privé de SPIP en Bootstrap

Préambule

Plus que des mots…

Page d'accueil

Page d'accueil - Menu de navigation

Page d'accueil - Menu de navigation au survol

Page d'article

Appel à tester

Pour tester

Réalisations

Quelques packages pour Sublime text 2

Préalable

Installation d'un package

Installation d'un package non répertorié

Zen Coding

Prefixr

jQuery

SideBar Enhancements

Bracket Highlighter

Les ressources du lundi #4

Installation du Raspberry Pi
Préparer une carte SD.

$GLOBALS [
(#EVAL{$GLOBALS}|gettype)]

(#GET{datatype}) [
(#EVAL{#GET{datatype}}|gettype)]