Je ne peux pas simplement (en tous cas pas sans prendre des risques en matière de sécurité) mettre mes scripts de p5.js sur ce site. Alors quand je suis tombée par hasard sur cette vidéo de Daniel Shiffman expliquant comment créer une page gitHub pour héberger ses sketch p5.js j’ai regardé et j’ai mis en oeuvre immédiatement ! Ce que je décris ci-dessous n’est pas exactement ce qu’il propose car je n’ai pas réussi à faire fonctionner ça hors de la branche master.
Ce que l’on va faire
On aura un dépôt GitHub public où chacun pourra aller lire le contenu des fichiers que j’y aurai mis et une page pour chaque sketch qui en permettra l’exécution.
Les url seront sous la forme :
Pour l’accès aux fichiers : https://github.com/aldelpech/p5js-sketch/tree/master/NOM_DU_REPERTOIRE, par exemple https://github.com/aldelpech/p5js-sketch/tree/master/Ajustement_canevas_2020_05_09_13_46_20
Pour l’exécution directe : https://aldelpech.github.io/p5js-sketch/NOM_DU_REPERTOIRE, par exemple https://aldelpech.github.io/p5js-sketch/Ajustement_canevas_2020_05_09_13_46_20/
Pour l’accès au code raw (sans se connecter à GitHub) : https://raw.githubusercontent.com/aldelpech/p5js-sketch/master/NOM_DU_REPERTOIRE/sketch.js, par exemple https://raw.githubusercontent.com/aldelpech/p5js-sketch/master/Ajustement_canevas_2020_05_09_13_46_20/sketch.js
Créer un compte gitHub
Aller sur https://github.com/ et créer un compte si ce n’est pas encore fait.
Créer un depôt (repository en anglais)
Une fois qu’on est sur son compte, on peut créer un « repository » en cliquant sur le symbole + en haut à droite. Ici je crée le dépôt « p5js-sketch, en mode public, avec un fichier README.
Création d’un dépôt github public pour des sketches p5.js
Une fois que j’ai cliqué sur le bouton vert « Create repository », je dispose d’un nouveau depôt dont l’url est sous la forme https://github.com/USER/Nom-DEPOT (https://github.com/aldelpech/p5.js-sketches pour moi)
Transférer des fichiers au repository
Je voudrais transférer les fichiers qui m’ont permis de constituer la démonstration pour l’ article p5.js Brique 1 : un canevas “responsive”. Ces fichiers étaient dans un fichier compressé zio tel que téléchargé de l’éditeur de p5.js (https://editor.p5js.org/Anne-Laure/sketches/isSlIPoVn). Je les extrait avec mon ordinateur (windows). Et maintenant j’ai un répertoire contenant les 5 fichiers nécessaires à la démonstration :
Un répertoire de fichiers nécessaire à une animation p5.js
Il me suffit de prendre le répertoire et de le glisser dans mon repository gitHub.
Fichiers en cours de chargement par glisser-déposer
dans commit changes on précise sur quoi porte la modification (en fait le commit se fait vers master et pas maBranche) :
mieux vaut être clair et précis dans le commit
Lorsqu’on cliquer sur « commit changes », Github traite les fichiers et ça y est, j’ai un répertoire dans mon dépôt
Dans le dépôt, choisir l’onglet Settings en haut à droite. Descendre jusqu’à la partie GitHub Pages. Rien n’est réglé pour l’instant, il n’y aura pas d’affichage :
Les réglages de GitHub Pages ne sont pas encore faits
Je clique d’abord sur le bouton « Choose a theme ». Je choisis le thème Architect puis je clique sur le bouton vert « Select a theme ». Celà modifie le fichier readme.md. Je le commit :
Commit les modifications du Readme.md
Et maintenant je retourne dans l’onglet Settings et je descends jusqu’à GitHub Pages. Des réglages se sont faits !
Maintenant GitHub Pages est réglé et il a une adresse !
Si je communique le lien vers un fichier (par exemple ce lien pour le fichier sketch.js), le fichier devient visible dans GitHub si et seulement si on y est connecté.
Pour communiquer un lien accessible à une personne ne disposant pas d’un compte GitHub, il faut prendre le lien « RAW » et communiquer ce lien :
Nous avons tous des idées sur le travail à domicile, ses avantages, ses inconvénients et ses modalités. L’utilisation récente et massive du travail à distance montre qu’il y a cependant beaucoup à apprendre sur le sujet. Je démarre avec cet article une première liste de ressources qui peuvent être utiles pour se constituer un corpus de bonnes pratiques.
Outil Zoom de visioconférence, discord de partage de voix et d’écrans, ….
A explorer (je connais une entreprise qui l’utilise pour que ses salariés disposent de moyens de téléphoner à distance : Rainbow
Sur ce site, j’ai également écrit quelques articles qui peuvent être intéressants (les liens renvoient à des catégories d’article, il peut y avoir redondance) : sur des applications google, ou sur d’autres outils bureautique.
Avec Microsoft Office ou LibreOffice par exemple, il faut apprendre à utiliser tous les moyens existants de ne pas refaire plusieurs fois la même chose : styles, utilisation de modèles (templates), palette de couleurs standards, formulaires, publipostage, éventuellement macros.
Travailler en sécurité
J’ai suivi la formation en ligne à la sécurité numérique proposée par l’ANSSI, Agence nationale de la sécurité des systèmes d’information. C’était intéressant, et très utile.
Je pense qu’il est essentiel de réfléchir à la gestion des mots de passe : personnels et professionnels. Je ne vois pas comment on peut avoir une gestion correcte sans gestionnaire de mot de passe. Mais pour l’instant ce n’est pas simple d’en trouver un bon. Alors voici quelques pistes :
Avec les briques 1 et 2 – de cette série p5.js mes "briques" de connaissance – nous avons exploré la création de canevas « responsive » puis l’utilisation de « GRAPHICS » pour dessiner des rectangles sur des graphics, ou canevas virtuels. Cette fois ci nous allons dessiner des polygones avec des vertex à la place des rectangles. Un des polygones sera creux pour voir comment ça se passe. Nous obtiendrons ainsi quelque chose comme ça :
Des polygones, dont un creux, qui s’ajustent automatiquement à la taille de l’écran
J’ai fait ce sketch sur openProcessing.org, en p5.js :
Le script est intéressant pour son utilisation de beginShape et beginContour.
la fonction ajustPolygon(index, ep, w, h) crée les polygones (quadrilatères) 1 à 4 en calculant les coordonnées des extrémités (vertex) des 4 segments qui les constituent. Le polygone d’index 4, celui qui est représenté en bas à gauche, est « percé » d’un polygone à trois segments (un triangle). Ici les vertex sont donnés dans le sens des aiguille d’une montre si l’on veut juste indiquer un contour sans « percer » mais dans le sens inverse si l’on veut évider ou « percer ».
Et voilà nous avons une troisième brique ! Les autres briques sont et seront publiées dans cette même série, p5.js mes "briques" de connaissance.
Mon prochain objectif est de découper des images grâce à des graphics. Pour celà, il va me falloir maîtriser trois nouvelles briques au moins : charger des images prédéfinie, récupérer des images par une API ou via l’utilisateur, appliquer un masque de découpe à une image.
Je viens de découvrir que l’on peut dicter des choses à Googles Docs et le regarder transcrire nos propos en mots écrits. Je suis absolument scotchée par le résultat. Alors je partage !
Pour y accéder, ouvrir un nouveau document Google Docs puis suivre les instructions de cette vidéo :
Pour aller plus loin, on pourra regarder le contenu de ce document d’aide de Google. On y apprend des compléments utiles :
il est possible de donner des instructions pour la ponctuation ou les sauts à la ligne, même en français ;
Et si on a la chance de parler et écrire en anglais, on dispose d’une incroyable quantité de commandes vocales pour mettre en forme le document. J’imagine que ce sera accessible en langue française un jour ou l’autre.
Chapeau à l’intelligence artificielle qui permet celà !
Lorsqu’on conçoit des éléments visuels animés il peut être intéressant de superposer des éléments graphiques animés individuellement. Les GRAPHICS sont des canavas virtuels, ils peuvent être affichés à l’écran ou pas. Ils peuvent apparaître comme un élément qui est devant un autre, ou faire l’objet d’une transformation (rotation, translation, ….) sans que le reste du canevas soit altéré. Ils fonctionnent un peu comme des calques. des feuilles de papier virtuelles. On peut avoir plusieurs « graphics » ou calques dans le même projet.
Dans cette brique j’explore la création de 6 objets GRAPHIC, tous placés sur un canevas blanc qui fait la taille de l’écran :
Le script complet, qui réutilise la fonction ajustImage(txt, ratio) définie dans dans l’article « p5.js Brique 1 : un canevas « responsive » n’a pas été modifiée. Elle sert à calculer la taille du premier rectangle gris, le GRAPHIC graf.
/****************************************************************
https://editor.p5js.org/Anne-Laure/sketches/I4K--pRHH
Dessiner des polygones à l'intérieur d'un rectangle qui s'ajustent à la taille du rectangle
Suite de https://editor.p5js.org/Anne-Laure/sketches/isSlIPoVn
****************************************************************/
// les caractéristiques du rectangle de base
var grafSize;
var grafPos;
var ratio = 16 / 9; // ratio du rectangle w = ratio * h
var graf ; // le GRAPHICS qui va porter tout
var offsetY = 50 ; // l'espace en hauteur dédié à autre chose
var drawLoop = true ; // arrêter la boucle draw
var polyG = [] ; // le rectangle et les 4 polygones
function setup() {
createCanvas(windowWidth, windowHeight);
grafSize = createVector(0, 0);
grafPos = createVector(0, 0);
}
function draw() {
if( drawLoop) {
background( 255) ;
/*** initialiser les GRAPHICS, calculer les tailles ***/
grafSize = ajustImage("sz", ratio);
graf = createGraphics(grafSize.x, grafSize.y + offsetY );
for (let i = 0; i <5; i++) {
// renderer les formes
polyG[i] = createGraphics(grafSize.x, grafSize.y );
}
grafPos = ajustImage("ps", ratio);
/*** créer les GRAPHICS ***/
// graf est le renderer principal, celui qui sera sauvegardé
graf.background( 220 ) ;
/* créer les formes polyG[i] */
// i = 0 un simple rectangle blanc
polyG[0].fill( 255 ) ;
polyG[0].rect(0,0,graf.width, graf.height) ;
// i = 1 à 4 des polygones plus compliqués
let ep = grafSize.x/20 ; // espace autour des rectangles
let w = grafSize.x/2 - 3 * ep/2 ;
let h = grafSize.y/2 - 3 * ep/2;
polyG[1].fill( 255, 0, 0 ) ;
polyG[1].rect(ep,ep,w, h) ;
polyG[2].fill( 0, 255, 0 ) ;
polyG[2].rect(w+2*ep,ep,w, h) ;
polyG[3].fill( 0, 0, 255 ) ;
polyG[3].rect(w+2*ep,h+2*ep,w,h) ;
polyG[4].fill( 155, 55, 0 ) ;
polyG[4].rect(ep,h+2*ep,w, h) ;
for (let i = 0; i < 5; i++) {
// afficher les polygones dans graf
graf.image( polyG[i], 0, 0) ;
}
// graf.stroke(0) ;
graf.fill(0) ;
graf.textSize(offsetY/3) ;
graf.text("Et voilà !", 10, grafSize.y + 25 ) ;
graf.ellipse(grafSize.x/8, grafSize.y/4, 20, 20 ) ;
image( graf, grafPos.x, grafPos.y ) ;
drawLoop = false ;
}
}
function ajustImage(txt, ratio) {
// RAPPEL ratio = 3/4 ; // ratio du rectangle que je veux dessiner w= 3 --> h = 4
let coeff = 0.95; // on veut que l'image ne représente que 95% du plus petit côté du canevas
let OffH = height - offsetY ; // laisser place pour texte)
let CanR = width / OffH;
print(txt, " Canevas W/H ", CanR);
let maxSize = createVector(0, 0);
let gPos = createVector(0, 0);
if (CanR >= 1) {
// la largeur est supérieure à la hauteur. C'est la hauteur qui nous limite
if ( OffH * coeff * ratio >= width * coeff ) {
// il faut que la hauteur soit réduite malgré tout
maxSize.y = width * coeff / ratio ;
} else {
// il faut que la largeur ne dépasse pas la largeur moins la bordure prévue
maxSize.y = OffH * coeff ;
}
maxSize.x = maxSize.y * ratio ;
} else {
// la hauteur est supérieure à la largeur. C'est la largeur qui nous limite
/* maxSize.x est le plus petit de
- la largeur du canevas * le coefficient d'occupation (pour avoir une bordure)
- la hauteur du dessin qui doit quand même respecter le ratio initial sans dépasser la hauteur du canevas
*/
if ( width * coeff / ratio >= OffH * coeff ) {
// il faut que la largeur soit réduite malgré tout
maxSize.x = OffH * coeff * ratio ;
} else {
// il faut que la largeur ne dépasse pas la largeur moins la bordure prévue
maxSize.x = width * coeff ;
}
maxSize.y = maxSize.x / ratio ;
}
maxSize.x = int(maxSize.x);
maxSize.y = int(maxSize.y);
gPos.x = (width - maxSize.x) / 2;
gPos.y = (OffH - maxSize.y) / 2;
if (txt == "sz") {
print(txt, "l canvas, l size, h canvas, h size ", width, maxSize.x, OffH, maxSize.y);
return maxSize;
} else if (txt == "ps") {
print(txt, "x, y totx toty", gPos.x, gPos.y, maxSize.x + 2 * gPos.x, maxSize.y + 2 * gPos.y);
return gPos;
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
// redessiner avec draw()
drawLoop = true ;
}
Et maintenant ?
Et voilà nous avons une deuxième brique ! Les autres briques sont et seront publiées dans cette même série, p5.js mes "briques" de connaissance. La prochaine étape sera de faire des polygones plus compliqués avec certains GRAPHIC. A suivre !
Pour mieux apprendre à coder des travaux numériques avec la librairie p5.js (processing en javascript), j’ai décidé de construire des briques successives. Aujourd’hui, la première brique, c’est d’être capable d’ajuster la taille du canevas en instantané à la taille de la fenêtre. C’est comme si on avait un canevas « responsive », allusion aux sites internet qui s’ajustent aux écrans utilisés.
Pour valider cette brique, j’ai décidé de dessiner un rectangle de rapport 16/9 qui occupe au maximum 95% de la dimensions la plus faible de l’écran. Ce rectangle doit donc respecter les règles suivantes :
son ratio largeur sur hauteur est en permanence de 16/9 : lorsque la largeur fait 16 la hauteur fait 9 ;
si la fenêtre est plus large que haute alors la hauteur du rectangle fait 95% de la hauteur de la fenêtre (et donc la largeur du rectangle représente 16/9 de cette hauteur) ;
si la fenêtre est plus haute que large alors la largeur du rectangle fait 95% de la largeur de la fenêtre (et donc la hauteur du rectangle représente 9/16 de cette largeur) ;
/****************************************************************
https://editor.p5js.org/Anne-Laure/sketches/isSlIPoVn
Dessiner un rectangle qui prend 95% de la hauteur ou largeur d'écran et se centre
****************************************************************/
var grafSize;
var grafPos;
var ratio = 16 / 9; // ratio du rectangle que je veux dessiner w = ratio * h
var drawLoop = true ; // arrêter la boucle draw
function setup() {
createCanvas(windowWidth, windowHeight);
colorMode(HSB, 360, 100, 100, 100);
grafSize = createVector(0, 0);
grafPos = createVector(0, 0);
}
function draw() {
if( drawLoop) {
background(95) ;
let col = random(100) ; // couleur
grafSize = ajustImage("sz", ratio);
grafPos = ajustImage("ps", ratio);
fill( col, 80, 80, 100 ) ;
rect(grafPos.x, grafPos.y, grafSize.x, grafSize.y);
drawLoop = false ;
}
}
function ajustImage(txt, ratio) {
// RAPPEL ratio = 3/4 ; // ratio du rectangle que je veux dessiner w= 3 --> h = 4
let coeff = 0.95; // on veut que l'image ne représente que 95% du plus petit côté du canevas
let CanR = width / height;
print(txt, " Canevas W/H ", CanR);
let maxSize = createVector(0, 0);
let gPos = createVector(0, 0);
if (CanR >= 1) {
// la largeur est supérieure à la hauteur. C'est la hauteur qui nous limite
if ( height * coeff * ratio >= width * coeff ) {
// il faut que la hauteur soit réduite malgré tout
maxSize.y = width * coeff / ratio ;
} else {
// il faut que la largeur ne dépasse pas la largeur moins la bordure prévue
maxSize.y = height * coeff ;
}
maxSize.x = maxSize.y * ratio ;
} else {
// la hauteur est supérieure à la largeur. C'est la largeur qui nous limite
/* maxSize.x est le plus petit de
- la largeur du canevas * le coefficient d'occupation (pour avoir une bordure)
- la hauteur du dessin qui doit quand même respecter le ratio initial sans dépasser la hauteur du canevas
*/
if ( width * coeff / ratio >= height * coeff ) {
// il faut que la largeur soit réduite malgré tout
maxSize.x = height * coeff * ratio ;
} else {
// il faut que la largeur ne dépasse pas la largeur moins la bordure prévue
maxSize.x = width * coeff ;
}
maxSize.y = maxSize.x / ratio ;
}
maxSize.x = int(maxSize.x);
maxSize.y = int(maxSize.y);
gPos.x = (width - maxSize.x) / 2;
gPos.y = (height - maxSize.y) / 2;
if (txt == "sz") {
print(txt, "l canvas, l size, h canvas, h size ", width, maxSize.x, height, maxSize.y);
return maxSize;
} else if (txt == "ps") {
print(txt, "x, y totx toty", gPos.x, gPos.y, maxSize.x + 2 * gPos.x, maxSize.y + 2 * gPos.y);
return gPos;
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
// redessiner avec draw()
drawLoop = true ;
}
Dans le sketch ci-dessus, il y a deux fonctions intéressantes :
function windowResized() qui est une fonction p5.js qui s’exécute automatiquement dès que l’on modifie la taille de la fenêtre active. A l’intérieur j’indique qu’il faut retailler le canevas à la taille de la fenêtre et que la variable drawLoop est repassée à true. Ca signifie que la fonction draw redessinera le contenu du canevas.
function ajustImage(txt, ratio) que j’ai créée pour calculer la taille du rectangle contenant l’image à afficher. C’est cette fonction qui fait que le rectangle affiché a des dimensions qui respectent les règles exposées.
Mes Raspberry Pi sont « headless », c’est à dire sans écran, clavier et souris dédiés. Je m’y connecte en SSH à partir de mon PC (Windows) par le réseau local. Jusqu’à présent, je n’ai pas eu besoin de l’interface graphique et j’étais contente de la ligne de commande Linux, qui m’a permis d’apprendre énormément.
Mais maintenant je voudrais utiliser un Raspberry Pi pour des projets d’art numérique. Il va donc falloir que ce soit le Pi lui même, en autonomie, qui gère l’affichage sur un écran. J’avais exploré une solution avec VNC voici quelques années mais je ne m’en suis jamais vraiment servie. Et en lisant un article externe sur node.js, « Beginner’s Guide to Installing Node.js on a Raspberry Pi« , j’ai vu cette solution pour accéder à l’interface graphique du Pi de manière HeadLess. C’est celle solution que je teste et que je présente ici.
La situation initiale
J’ai un Raspberry Pi B3+ connecté « headless » par cable ethernet et en wifi sur mon réseau locale. Je l’ai préparé comme je l’expliquedans les articles suivants :
Le Raspberry Pi contient RealVNC depuis plusieurs années maintenant. Il ne m’enthousiasmait pas et semble ne pas être optimal pour des fonctionnements headless. Je vais donc installer tightVNC comme recommandé dans « Beginner’s Guide to Installing Node.js on a Raspberry Pi« .
Désactivation de VNC avec Raspi-config
J’ai désactivé VNC pour l’utilisateur al dans Raspi-config : choix 5 interfacing Options puis P3 Enable / disable VNC avec réponse NO (I don’t want it enabled). VNC est désactivé.
Installation de tightVNC et xRDP
Je me perds dans les protocoles de contrôle des sessions distantes. Ici nous allons installer tightVNC, un serveur VNC (Virtual Network Computing) auquel on se connecte avec une “connexion Bureau à distance” utilisant le protocole RDP (Remote Desktop Protocol) géré par xRDP, serveur RDP.
J’installe le serveur tightvnc avec la commande apt install -y tightvncserver. Seulement après j’installe le serveur xRDP avec la commande apt install -y xrdp.
En principe RealVNC qui était installés sur le Pi a été supprimé.
Accès à partir de la machine Windows
Dans notre machine Windows, nous pouvons accéder au Pi par son « hostname » puisque Samba a été installé et paramétré sur le Pi. Donc dans la machine Windows, je tape sur la touche Windows et je cherche « connexion Bureau à distance » (dans les accessoires windows). cliquer dessus.
Indiquer le nom du Pi (son hostname) dans la boîte de dialogue puis cliquer sur connexion
Pour se connecter au bureau à distance d’un Raspberry Pi – etape 1
Ensuite, on accepte de ne pas vérifier l’identité de l’ordinateur distant.
Pour se connecter au bureau à distance d’un Raspberry Pi – etape 2Pour se connecter au bureau à distance d’un Raspberry Pi – etape 3
Aller dans l’onglet Display et régler sur plein écran si nécessaire. Cliquer sur Connexion
Et enfin, on est dans le bureau du Raspberry Pi et on indique le nom d’utilisateur et le mot de passe de l’utilisateur Raspberry Pi qui se connecte.
Identification de l’utilisateur Raspberry Pi. A ce stade la fenêtre du bureau distant est générée par le Pi.
Et ça y est, je suis connectée à distance à mon Raspberry Pi en mode graphique !
Mon bureau à distance sur un Raspberry Pi !
Et maintenant j’enregistre dans ma machine Windows la connexion Bureau à distance sur le bureau Windows sous le nom Pi PI-ArtNum-01.rdp. Maintenant je double clique dessus, l’indique mon nom d’utilisateur et mon mot de passe et ça y est.
Et maintenant ?
Que vais-je bien pouvoir faire de ça ? Je ne sais pas encore !
Si vous avez des idées, partagez-les avec nous en commentaires.
Un Raspberry Pi sous Raspbian n’existe pas sur un reseau pour un ordinateur Windows, sauf en tant qu’adresse IP.
Par exemple un appareil « PI-ArtNum-01 » sous Raspbian connecté au réseau local avec l’adresse IP 192.168.1.114 sera visible en tapant ping 192.168.1.114 dans l’invite de commande Windows mais pas ping PI-ArtNum-01. Du moins pas tant qu’on aura pas installé samba sur le Pi et défini le workgroup comme indiqué dans cet article « Mise en service d’un Raspberry Pi« .
Et même lorsque Windows trouvera le pi par son « hostname », il n’y aura pas moyen d’échanger des fichiers tant qu’on n’aura pas défini un espace partagé avec Samba. C’est ce que nous allons faire dans cet article.
Qu’est-ce que Samba ?
Samba permet le partage de fichiers sur un réseau local. Il facilite le réglage des droits d’accès selon cet article de linuxConfig.org, en anglais qui sera intéressant pour aller plus loin.
l’état initial
Mon Raspberry Pi (un Pi 3 B+) est connecté à mon réseau local. Il porte le nom (hostname défini avec Raspi-config) « ArtNum-01 ». Samba a été installé en même temps que d’autres éléments de notre Pi puisque j’ai suivi mon tutoriel « Mise en service d’un Raspberry« . A ce stade, si je tape \\PI-ArtNum-01 dans l’explorateur Windows, le Pi apparaît dans les éléments réseau. Par contre il est « vide » pour Windows
Pas possible d’accéder au contenu du Pi à partir de l’explorateur Windows
Définir un répertoire partagé avec Samba
Pour définir un espace partagé avec Samba sur le Pi, on va éditer /etc/samba/smb.conf et y copier et coller (shift + inser avec l’éditeur MC) tout en bas le contenu qui suit :
Raspbian va redémarrer automatiquement Samba lorsqu’on sauvegarde le fichier de configuration.
Ensuite dans l’invite de commande du Raspberry Pi, on va créer un utilisateur et un mot de passe pour ce répertoire partagé.
smbpasswd -a al
On tape deux fois le mot de passe choisi. On le note soigneusement !
Sur une machine Windows du même réseau local, je vois maintenant le répertoire PiShare de PI-ArtNum-01. Si je double-clique dessus, Windows me demande le nom d’utilisateur et le mot de passe. Si vous les renseignez, vous avez maintenant accès (deux fois bizarrement) aux fichiers du Raspberry Pi :
Accès au répertoire partagé ( le même sous ses deux noms…)
Si je le souhaite, je peux également « connecter un lecteur réseau », ce qui revient à disposer du répertoire partagé sur une machine Windows comme s’il était sur un disque Windows
Je clique à droite sur Réseau dans la liste des répertoires de l’explorateur Windows et je choisis « connecter un lecteur réseau » (en anglais c’est « Map network drive » qui est probablement plus juste)
Dans la fenêtre qui s’ouvre je choisis d’affecter la lettre M au répertoire partagé de ce Pi (\\PI-ArtNum-01\PiShare).
connecter un répertoire partagé d’un Raspberry Pi comme un lecteur réseau
Et voilà ce PiShare apparaît comme un répertoire local.
Par contre comme je me suis déjà connectée en donnant le mot de passe, Windows ne me demande pas de fournir mon nom d’utilisateur et mon mot de passe. Lorsque je redémarre windows et que je recommence cette connexion :
saisie du nom d’utilisateur et du mot de passe d’un répertoire partagé par Samba
Et maintenant ?
Je vais pouvoir facilement placer des scripts p5.js pour des projets d’art numérique sur ce Pi.
Je veux installer node.js sur un Raspberry Pi car je voudrais disposer d’un serveur capable de diffuser des travaux d’art numérique (qui utilisent du javascript et la bibliothèque p5.js). C’est aussi une installation qui me servira à tester différents capteurs connectés à un Raspberry Pi pour des projets de domotique. J’en parlerai dans les prochains articles de cette série, .
Dans cet article je vais me concentrer sur l’installation de node.js. Je parlerai plus tard d’expériences que je réaliserai ensuite en art numérique ou domotique.
Préparer un Raspberry Pi avec Raspbian
Je dispose d’un Raspberry Pi 3 B+ qui fonctionnait sous Raspbian Stretch lite. J’y ai installé Raspbian Buster « with desktop and recommanded software ». C’est possible sous réserve d’avoir une carte SD de 8 Go au moins (avec 4Go, la carte est occupée à 85% dès l’installation de Raspbian).
L’installation a été réalisée sur la base de mon article « Mise en service d’un Raspberry Pi« . Le Pi est connecté en ethernet mais dispose aussi d’une connexion wifi. Son nom est Pi-ArtNum-01.
Qu’est-ce que node.js (et npm)
Je ne suis pas une experte, ce que je dis doit être pris avec des pincettes ! Ma source principale a été cette page de OpenClassRoom et aussi cet article, beaucoup plus concret mais en anglais. Node.js est un moyen de faire du JavaScript en dehors du navigateur, par exemple pour générer des pages web. Node.js est open source et compatible avec la plupart des plateforme.
et node.js est inséparable de npm le système de gestion de paquets de node.js. Ce que je comprends c’est que c’est le système qui gère les « extensions » de node.js.
et NodeRed ???
Pour savoir à quoi sert nodered, voir cet article de projetdiy.fr. nodeRED est une application reposant sur Node.js qui permet de programmer graphiquement des composants dans un environnement Web (source cet article de blog.ippon.fr). Pour l’instant nous ne nous y intéresserons pas, même s’il est déjà installé sur notre Raspberry Pi (essayez de taper node-red -v dans l’invite de commande).
Installation d’une version récente de node.js
Je vais avoir besoin des dernières versions de node.js et npm. Commençons par déterminer si j’ai ces programmes et dans quelle version avec les commandes node -v et npm -v.
Le dézipper puis le placer dans le répertoire home/al/ Hello_P5_drawing_2020_04_12_07_55_16 avec filezilla. Et maintenant regardons quel est son chemin exact sur le Pi :
cd /home/al
cd p5jsFiles
cd Hello_P5_drawing_2020_04_12_07_55_16
ls
Nota si j’étais entrée comme al, cd ~ ou seulement cd m’enverrait directmeent sur /home/al
Maintenant lancer le serveur http avec http-server, en étant dans le répertoire du script précédent
Dans un navigateur internet je peux en principe accéder au serveur avec l’une des trois adresses HTTP proposées. Dans mon cas je suis en accès distant (SSH) et la première adresse ne fonctionne pas. Par contre les deux autres adresses sont celles du Pi (en connexion ethernet et en connexion wifi). Si je tape http://192.168.1.100:8080, j’ai un message d’erreur d’abord et lorsque je recommence, mon canevas apparaît à l’écran du navigateur tandis que divers message apparaissent dans la console pi !
Le canevas d’un script p5.js apparaît dans mon navigateur. La console vers le Pi affiche plein de messages !
Et si je bouge ma souris dans le canevas, le script Hello P5 drawing fonctionne !
Je bouge la souris sur mon écran d’ordinateur et le Raspberry Pi donne l’ordre de tracer des traits en fonction de mes mouvements !
Donc ca y est j’ai réussi à servir des fichiers p5.js sur mon pi.
Autres utilisations possibles de node.js sur mon raspberry pi
Si je veux disposer de plusieurs serveurs (plusieurs nodes ou processus), il va falloir trouver un système qui permet de lancer simultanément des serveurs http sur plusieurs ports distincts. C’est ce que font les auteurs des articles suivants :
Je ne sais pas encore ce que je veux faire. Mon souhait est de pouvoir brancher un Pi à une télévision et le laisser tout seul pour exposer des travaux numériques. Et ensuite, je pourrai y connecter des capteurs divers pour que les scripts interagissent avec les visiteurs ou le contexte. A suivre donc dans la série !
Pour démarrer un Raspberry Pi neuf, il y a plusieurs opérations à réaliser. On trouve énormément de documents sur internet et je ne veux pas en ajouter un énième. Cet article vise simplement à établir une check-list pour me simplifier la vie.
Mettre l’OS sur la carte SD
Mise à jour du 31/08/2022 :
L’OS du Raspberry Pi est à télécharger sur le site de la fondation Raspberry Pi. J’ai choisi une version 64 bit compatible avec mon Pi 3B. J’ai pris la version lite, sans desktop. J’ai une carte sd 8 Go. J’ai utilisé Raspberry Pi Imager (téléchargeable sur le site de la fondation Raspberry Pi également).
Avec Raspberry Pi Imager j’ai effectué les réglages suivants avant de flasher la carte SD :
définir hostname de ce pi
définir l’utilisateur de base et le mot de passe correspondant (pi/raspberry n’est plus défini par défaut ! 😜)
cocher que le ssh doit être activé et indiquer le user name et le password. Je prévois en effet de connecter le Pi de manière « headless » (sans écran, clavier et souris)
configurer le wifi (j’ai mis un dongle wifi)
Et dire que clavier français et surtout timezone française.
Si nécessaire
Dans le cas où on n’utilise pas le paramétrage si dessus, on peut quand même autoriser la liaison ssh et régler le wifi autrement :
Autoriser la liaison SSH (headless)
On doit placer un fichier vide nommé ssh (sans extension) dans le répertoire boot de la carte SD. Pour plus d’explications voir cet article sur le site officiel du Raspberry Pi. On réalise cette opération par l’intermédiaire du lecteur de carte SD. Ensuite, lorsque le Pi démarre, il recherche ce fichier. S’il le trouve, il active le SSH puis détruit le fichier
Régler le wifi
Si on veut que le Pi se connecte en wifi, il faut lui donner les paramètres wifi. Sur cette page on voit comment faire. En l’occurence j’ai placé le fichier wpa_supplicant.conf dans le répertoire boot de la carte sd. Ce fichier contient les informations suivantes :
# wpa_supplicant.conf
# see https://github.com/binnes/tobyjnr/wiki/Raspberry-Pi-Initial-setup
# place this file named wpa_supplicant.conf in the /boot directory
ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
country=FR
network={
ssid="mon-reseau1"
psk="password1"
id_str="home 1"
priority=1
}
network={
ssid="mon-reseau2"
psk="password2"
id_str="home 1"
priority=2
}
Encrypter le mot de passe wifi
En principe on ne devrait pas mettre les mots de passe en clair. Une bonne pratique est d’encrypter cette information par un « hash ». J’ai découvert comment faire dans cet article en anglais.
Sur un Pi (on peut le faire plus tard si on n’a pas de deuxième pi), en ligne de commande, on tape wpa_passphrase mon-reseau2 password2 et en retour on obtient l’information cryptée : network={ ssid="mon-reseau2" #psk="password2" psk=261066f1ec70322a9b305031fd2164401fbae41235107dc66eaad93ed991abcf }
Je n’ai plus qu’à placer ce mot de passe cryptée à la place de celui que j’avais initialement mis en clair.
Brancher le Pi
Equipement nécessaire :
un chargeur 5V et au moins 1A avec un cable micro-USB ;
un cable ethernet.
Et c’est tout ! Il n’y a pas besoin de connecter le Pi à un clavier et un écran car il autorise la connexion SSH si on a placé un fichier ssh comme indiqué ci-dessus.
Premier démarrage
Dans l’écran du routeur, on voit apparaître un nouvel appareil, nommé RASPBERRYPI. Pour moi il a l’adresse IP 192.168.1.14.
Dans l’invite de commande Windows, ping RASPBERRYPI ne fonctionne pas mais ping 192.168.1.14 donne une réponse.
Démarrer la session avec ssh pi@192.168.1.14 (l’adresse est donnée en allant regarder quelle est l’adresse du dispositif « RASPBERRYPI », dans le tableau de bord du routeur ou de la box.
Nota : si on s’est déjà connecté en SSH à la même adresse, on peut avoir une erreur « @ WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! ». Dans ce cas, ssh-keygen -R 192.168.1.14 va générer une nouvelle clé SSH et la commande ssh pi@192.168.1.14 va fonctionner correctement.
Le mot de passe pour l’utilisateur pi est raspberry.
Et voilà !
Premiers paramétrages
sudo raspi-config nous amène à la configuration du Pi.
Au démarrage on est en anglais, on peut le changer si on préfère. Je ne le change pas.
On navigue avec les flèches de direction, on sélectionne avec la tabulation puis <ENTREE>.
Voici les changements à faire :
expand FileSystem (advanced options)
Oui, pour utiliser toute la carte SD
Time zone (internationalisation)
Europe / Paris
Wait for network at boot
Par défaut sur « non » dans Jessie ou stretch mais sur « oui » dans Jessie Lite ou stretch. Régler sur « NON »
Hostname (Network options)
Mettre un nom unique (AlRadio)
Password:
Modifier, ça ne doit plus être ‘raspberry’ pour l’utilisateur pi
Noter qu’en principe on ne modifie pas ces éléments :
configure keyboard
Inutile si pas de clavier
ssh (dans interfacing options)
activer est déjà réalisé
Boot Option
B1 console (on n’accède pas en mode graphique) – on pourra toujours accéder à l’interface graphique avec la commande startx
Ensuite on tape init 6 pour redémarrer le Pi.
On peut vérifier l’espace libre sur la carte SD en tapant
sudo df -h
Si on a utilisé une carte SD de 8 Go, on devrait voir que /dev/root fait environ 7 Go, avec environ 50% used, 50% available (disponible) si Raspbian Buster"normal", 12% si Buster "lite".
Autres réglages préliminaires
créer un utilisateur
Pour créer un utilisateur ‘al’ :
sudo useradd -m -G adm,dialout,cdrom,audio,plugdev,users al
puis créer son mot de passe
sudo passwd al
Changer le mot de passe root
sudo passwd root
nous demande le nouveau mot de passe. On peut ensuite devenir root en tapant su – puis le mot de passe correspondant.
Changer le mot de passe pi
Cet article, déjà cité, insiste sur l’importance du changement du mot de passe par défaut de l’utilisateur pi afin contrer les pirates qui utilisent l’internet des objets pour faire tomber des sites.
sudo passwd pi
nous demande le nouveau mot de passe, qui ne doit pas être ‘raspberry’ !
Pour installer l’éditeur MidnightCommander, en tant que root (avec su – , sinon sudo devant la commande) :
sudo apt-get install mc
Ca prend plusieurs minutes.
Ensuite, pour le démarrer
sudo mc
Dans mc, on peut utiliser la souris, cliquer sur options / Configuration puis entre [ ] devant « Use Internal Editor ». Comme ça on n’aura jamais besoin d’utiliser l’affreux éditeur nano fourni par défaut.
Si pour une raison ou une autre la souris ne fonctionne pas, on accède au menu avec F9 puis les flèches de direction.
Sortir de mc avec F10.
autoriser la connexion en tant que root (ssh ou ftp)
Editer, avec mc (sudo avant), le fichier /etc/ssh/sshd_config
Trouver la ligne sous # Authentication: contenant PermitRootLogin without-password .
La changer en PermitRootLogin yes.
permettre à windows de trouver le hostname
On a vu précédemment que ping ne fonctionnait pas avec le nom du Pi et c’est toujours le cas. On est obligé d’utiliser l’adresse IP du Pi, ce qui n’est pas pratique.
Pour y parvenir, il faut installer Samba sur le Pi et régler le « workgroup » au même groupe que celui de l’ordinateur windows utilisé.
Installer Samba avec cette commande (qui met longtemps à s’exécuter…) :
sudo apt-get install samba samba-common-bin
Editer, avec mc (sudo avant), le fichier /etc/samba/smb.conf et changer la ligne workgroup = WORKGROUP pour que WORKGROUP corresponde au bon nom.
Pour trouver le nom du workgroup utilisé par windows 10, aller dans paramètres puis système puis information système. Le nom du workgroup est indiqué en face de « organisation ».
C’est le fichier qui contient la configuration du « shell » de l’utilisateur. Il définit en particulier les couleurs employées pour différents éléments.
Le plus simple est de prendre un fichier .bashrc d’un autre Pi, par exemple en FTP (cf plus bas). Ensuite, dans le nouveau Pi, renommer le fichier .bashrc en .bashrcOLD et copier le nouveau fichier .bashrc.
A faire pour tous les utilisateurs définis dans le Pi (/home/pi/.bashrc) et pour root aussi (/root/.bashrc).
J’ai en particulier défini la ligne PS1 comme suit :
Depuis mon ordinateur Windows, je « ping » le pi dans l’invite de commande.
un ping du Pi par son « hostname » devrait renvoyer quelque chose
Si le ping ne renvoie rien, c’est probablement que le paramétrage de Samba n’a pas été fait correctement.
Vérifier le nom ‘hostname’ du pi et autres infos
La commande hostnamectl nous indique différentes informations comme le nom de l’appareil, sa version de Raspbian, etc
Faire une copie de la carte sd
A ce stade, si l’on veut éviter de devoir tout refaire pour un autre Pi, on peut faire une copie de la carte SD à l’aide de cet article. Attention si on fait ainsi la copie, on ne pourra restaurer la sauvegarde que sur une carte sd au moins égale à celle d’origine. Si besoin voir cet article en anglais, sur la manière de réduire (shrink) la taille d’une image disque.
Type d’authentification : demander le mot de passe
identifiant utilisateur ou root
mot de passe : selon l’utilisateur désigné
Commandes utiles
Quelques commandes utiles
apt update
génère une liste de ce qui doit être mis à jour
apt full-upgrade
fait la mise à jour des paquets. Voir la différence avec apt upgrade dans cet article.
rpi-update
Update the Pi firmware. Si la réponse est « rpi-update: command not found », lancer apt-get install rpi-update avant. Voir cet article.
apt-get clean
efface les paquets téléchargés pour la mise à jour
Pour redémarrer : reboot ou init 6
Pour éteindre le Pi : init 0 ou halt -p . Il est préférable d’éviter de le débrancher sans l’avoir éteint avant.
Si nécessaire (affichage de The following packages were automatically installed and are no longer required), on peut exécuter apt autoremove pour enlever tous les paquets qui ne sont plus utiles.
Pour mettre à jour le Pi avec des correctifs de sécurité :
Commentaires récents