Auteur/autrice : François Riotte

Memento CSS

CSS Cascade Style Sheet (feuille de style en cascade)

  1. Propriétés de mise en forme du texte

    Qu’est-ce que la mise en forme de texte ? C’est tout ce qui touche à la présentation du texte proprement dit : le gras, l’italique, le souligné, la police, l’alignement, etc.

    Propriété Valeurs (exemples) Description
    font-family police1, police2, police3, serif, sans-serif, monospace Nom de police
    @font-face Nom et source de la police Police personnalisée
    font-size 1.3em, 16px, 120%… Taille du texte
    font-weight bold, normal Gras
    font-style italic, oblique, normal Italique
    text-decoration underline, overline, line-through, blink, none Soulignement, ligne au-dessus, barré ou clignotant
    font-variant small-caps, normal Petites capitales
    text-transform capitalize, lowercase, uppercase Capitales
    font – Super propriété de police. Combine : font-weight, font-style, font-size, font-variant, font-family.
    text-align left, center, right, justify Alignement horizontal
    vertical-align baseline, middle, sub, super, top, bottom Alignement vertical (cellules de tableau ou éléments inline-block uniquement)
    line-height 18px, 120%, normal… Hauteur de ligne
    text-indent 25px Alinéa
    white-space pre, nowrap, normal Césure
    word-wrap break-word, normal Césure forcée
    text-shadow 5px 5px 2px blue (horizontale, verticale, fondu, couleur) Ombre de texte

  2. Propriétés de couleur et de fond

    Propriété Valeurs (exemples) Description
    color nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20… Couleur du texte
    background-color Identique à color Couleur de fond
    background-image url(‘image.png’) Image de fond
    background-attachment fixed, scroll Fond fixe
    background-repeat repeat-x, repeat-y, no-repeat, repeat Répétition du fond
    background-position (x y), top, center, bottom, left, right Position du fond
    background – Super propriété du fond. Combine : background-image, background-repeat, background-attachment, background-position
    opacity 0.5 Transparence

  3. Propriétés des boîtes

    Propriété Valeurs (exemples) Description
    width 150px, 80%… Largeur
    height 150px, 80%… Hauteur
    min-width 150px, 80%… Largeur minimale
    max-width 150px, 80%… Largeur maximale
    min-height 150px, 80%… Hauteur minimale
    max-height 150px, 80%… Hauteur maximale
    margin-top 23px Marge en haut
    margin-left 23px Marge à gauche
    margin-right 23px Marge à droite
    margin-bottom 23px Marge en bas
    margin 23px 5px 23px 5px (haut, droite, bas, gauche) Super-propriété de marge. Combine : margin-top, margin-right, margin-bottom, margin-left.
    padding-left 23px Marge intérieure à gauche
    padding-right 23px Marge intérieure à droite
    padding-bottom 23px Marge intérieure en bas
    padding-top 23px Marge intérieure en haut
    padding 23px 5px 23px 5px (haut, droite, bas, gauche) Super-propriété de marge intérieure. Combine : padding-top, padding-right, padding-bottom, padding-left.
    border-width 3px Épaisseur de bordure
    border-color nom, rgb(rouge,vert,bleu), rgba(rouge,vert,bleu,transparence), #CF1A20… Couleur de bordure
    border-style solid, dotted, dashed, double, groove, ridge, inset, outset Type de bordure
    border 3px solid black Super-propriété de bordure. Combine border-width, border-color, border-style. Existe aussi en version border-top,
    border-right, border-bottom, border-left.
    border-radius 5px Bordure arrondie
    box-shadow 6px 6px 0px black (horizontale, verticale, fondu, couleur) Ombre de boîte

  4. Propriétés de positionnement et d’affichage

    Propriété Valeurs (exemples) Description
    display block, inline, inline-block, table, table-cell, none… Type d’élément (block, inline, inline-block, none…)
    visibility visible, hidden Visibilité
    clip rect (0px, 60px, 30px, 0px) rect (haut, droite, bas, gauche) Affichage d’une partie de l’élément
    overflow auto, scroll, visible, hidden Comportement en cas de dépassement
    float left, right, none Flottant
    clear left, right, both, none Arrêt d’un flottant
    position relative, absolute, static Positionnement
    top 20px Position par rapport au haut
    bottom 20px Position par rapport au bas
    left 20px Position par rapport à la gauche
    right 20px Position par rapport à la droite
    z-index 10 Ordre d’affichage en cas de superposition. La plus grande valeur est affichée par-dessus les autres.

  5. Propriétés des listes

    Propriété Valeurs (exemples) Description
    list-style-type disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none Type de liste
    list-style-position inside, outside Position en retrait
    list-style-image url(‘puce.png’) Puce personnalisée
    list-style – Super-propriété de liste. Combine list-style-type, list-style-position, list-style-image.

  6. Propriétés des tableaux

    Propriété Valeurs (exemples) Description
    border-collapse collapse, separate Fusion des bordures
    empty-cells hide, show Affichage des cellules vides
    caption-side bottom, top Position du titre du tableau

  7. Autres propriétés

    Propriété Valeurs (exemple) Description
    cursor crosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, auto… Curseur de souris

 

Framework Bootstrap

Initiation à Bootstrap

(merci au site apprendre-a-coder.com)

Intégration de Bootstrap dans Visual studio

Exercice

En s’aidant de ce qui a été fait précédemment reproduire au plus près la page web suivante à l’aide du framework Bootstrap.

Pour information :

initiation WEB avec Visual Studio

Créer un site web avec Visual Studio

  • Création d’un site web et utilisation du serveur local iisExpress
  • Incorporation d’images
  • Utilisation de l’interface graphique WYSIWYG (what you see is what you get)

Mise en page à l’aide des <div>

  • présentation des div
  • mise en forme automatique Visual Studio
  • affectation d’id aux div, modification d’un style pour une div.
  • utilisation de classe pour assurer un centrage de texte

Positionnement des éléments d’une page.

  • Réalisation d’une petite galerie photo
  • Utilisation des styles float et  margin pour gérer le flottement des éléments.

Structuration d’une page grâce aux balises sectionnantes HTML5

  • Réalisation d’une page dont la structuration est la suivante :

Pour l’utilisation de Framework CSS voir la page Framework Bootstrap

Tutoriel

Créer une page web qui ressemble à ceci :

Le plan de structuration de la page est le suivant :

Aide pour le bouton bleu « See more… »
Ce bouton est créé à l’aide d’une div qui contient un texte inclus dans une balise h2. Cette div se situe dans une section ayant pour id : finArticle

Le code de la section est alors :

[html]
<section id="finArticle">
<p>Etiam rhoncus nunc quis nulla dapibus pellentesque vitae vitae risus. </p>
<div>
<h2> See more…</h2>
</div>
</section>
[/html]

On peut constater que dans la section tous les textes sont centrés , nous pouvons donc déclarer le style suivant :

[css]
#finArticle{
text-align:center;
}
[/css]

Ce style ne s’applique qu’à la balise ayant pour id : finArticle.
Pour appliquer des modifications à une balise div incluse dans finArticle, il faut faire comme ceci :

[css]
#finArticle div {
width: 200px; /*largeur*/
height: 75px; /*hauteur*/
margin: auto; /*centrage de la div dans la page*/
background-color: #0094ff;/*couleur de fond (bleu)*/
border: 1px solid #ccc;/*bordure grise du "bouton"*/
border-radius:8px;/*angles arrondis*/
text-shadow: -1px -1px rgba(0, 0, 0, 0.31);/*effet d’ombrage du texte "See more" */
color: #FFFFFF;/*couleur du premier plan : le texte écrit "See more…"*/
}
[/css]

Technologie Web

Html, css, javascript…

Introduction

Le web est un système client/ serveur qui permet au client d’afficher des pages web sur un terminal. L’envoi de requêtes et leurs décryptages est assuré par un logiciel nommé navigateur. Les terminaux qui peuvent se connecter à internet sont de type et de technologie différente (ordinateur, tablette, téléphone portable, objet connecté…).

Le format web doit pouvoir s’adapter à tous ces types de connexions. Le web s’appuie sur 3 langages :

  • HTML pour véhiculer le contenu (texte, images, son, vidéo…),
  • CSS pour la mise en forme et l’adaptation aux différents terminaux
  • JS pour rendre la page interactive avec l’utilisateur ou le serveur.

Requête http

Le diagramme de séquence d’une requête web est la suivante :

  • Le client appelle la page web grâce à son URI. On parle de requête de type GET.
  • Le serveur renvoie la page demandée au format html.
  • La page contenant des liens hypertextes dans son entête reformule elle-même des requêtes GET afin de rapatrier les autres éléments de la page web : JS et CSS.
  • Une fois l’ensemble des éléments reçus, la page s’affiche avec sa mise en forme et sa capacité à interagir avec l’utilisateur.
  • La page html peut aussi appeler des images, des vidéos, du son…

En fait tous les éléments constituant la page sont rapatriés et c’est le navigateur qui s’occupe de tout mettre en place en fonction du flux html et du fichier CSS

HTML[1]

L’HyperText Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom HTML.

Les balises sont invisibles à l’écran du navigateur, mais elles permettent à ce dernier de comprendre ce qu’il doit afficher. Les balises se repèrent facilement. Elles sont entourées de « chevrons », c’est-à-dire des symboles < et >, comme ceci :

[html]<balise>[/html]

Elles indiquent la nature du texte qu’elles encadrent. Elles veulent dire par exemple : «Ceci est le titre de la page», «Ceci est une image», «Ceci est un paragraphe de texte», etc.

[html]
<titre>Ceci est un titre</titre>
[/html]

On distingue une balise ouvrante <titre> et une balise fermante </titre> qui indique que le titre se termine.

Il existe des balises dites orphelines c’est-à-dire qu’on n’a pas de texte à insérer entre l’ouverture de la balise et sa fermeture. Par exemple <br/> (back return = saut de ligne) ou <image/> qui permet l’insertion d’image…

Les documents HTML ont une véritable structure en arbre, avec un élément racine contenant tous les autres éléments. Par exemple <html> contient <head> et <body>. Cet « arbre du document » est utilisé pour repérer les éléments de la page et permettre leur formatage ou l’interaction avec l’utilisateur par le biais de scripts.

liste des balises HTML voir le memento HTML

Tutoriel

On veut réaliser la page suivante :
(pour savoir comment créer un site et des pages avec Visual Studio cliquer ici):

Le code html est le suivant:

[html]

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Démonstration des éléments de section HTML5</title>
<style>
span.elem {
display: none;
}
</style>
</head>

<body>
<!– Header –>
<header>
<h1>Nouveaux éléments de section, article, header, footer, aside, nav</h1>
<!– nav principale –>
<nav>
<ul>
<li><a href="#">Rubrique 1</a></li>
<li><a href="#">Rubrique 2</a></li>
<li><a href="#">Rubrique 3</a></li>
<li><a href="#">Rubrique 4</a></li>
</ul>
</nav>
</header>
<!– Main –>
<section id="main">
<span class="elem">section</span>
<article>
<span class="elem">article</span>
<header>
<span class="elem">header</span>
<h2>En tête de l’article</h2>
<p>Date de publication, auteur</p>
</header>
<p>Contenu de l’article, contenu de l’article, contenu de l’article, contenu de l’article, contenu de l’article,
contenu de l’article, contenu de l’article…</p>
</article>
<article>
<span class="elem">article</span>
<header>
<span class="elem">header</span>
<h2>Harry Gruyaert</h2>
<p>Par François, le
<time datetime="2016-11-05">5 novembre 2016</time>
</p>
</header>
<p>Harry Gruyaert (né le 25 août 1941 à Anvers) est un photographe belge. Il est membre de l’agence Magnum Photos
depuis 1981</p>
<aside>
<span class="elem">aside</span>
<p><b>Magnum Photos</b> est une coopérative photographique. Créée en 1947 par Robert Capa, Henri Cartier-Bresson,
George Rodger, William Vandivert et David Seymour, elle fut la première de ce genre à voir le jour1.</p>
</aside>
<footer>
<span class="elem">footer</span>
<p>Source : <a href="http://fr.wikipedia.org/wiki/Magnum_Photos">Wikipedia</a></p>
</footer>
</article>
</section>
<!– sidebar –>
<aside id="sidebar">
<span class="elem">aside</span>
<h2>Sidebar</h2>
<h3>Navigation</h3>
<nav>
<span class="elem">nav</span>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
</ul>
</nav>
<h3>Autre titre</h3>
<p>Autres informations…</p>
</aside>
<!– footer –>
<footer>
<span class="elem">footer</span>
<p class="mentions">Page de démonstration de l’article <a href="/article/lire/1376-html5-section-article-nav-header-footer-aside.html">Nouveaux éléments de section, article, header, footer, aside, nav</a></p>
</footer>
</body>

</html>
[/html]

L’appel de cette page dans un navigateur montre le contenu mais la mise en page est linéaire est suit le flux, c’est-à-dire l’ordre d’apparition des éléments dans l’ordre d’écriture de la page

En reprenant la page et en faisant apparaitre les éléments de section HTML5, on peut voir que les sections s’imbriquent ou s’empilent les unes sur les autres.

Ajout de style afin de modifier l’aspect de la page

C’est grâce aux feuilles de style  CSS (Cascade Style Sheet) que le positionnement des sections va avoir lieu. Si on ajoute les instructions suivantes dans la balise <style> de l’entête du fichier html :

[css]
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Démonstration des éléments de section HTML5</title>
<style>
span.elem {
display: none;
}

body {
width: 980px;
margin: 0 auto 0 auto;
}

#main {
float: left;
width: 75%;
margin: 0 0 50px 0;
}

#sidebar {
float: left;
width: 22%;
margin-left: 1%;
margin-top: 1em;
}

footer {
clear: both;
}

nav ul li {
display: inline-block;
}
</style>
</head>
<body>
<!– Header –>
…
[/css]

La page prend l’aspect attendu. En faisant apparaitre les sections, on peut constater que la section “aside” est passée à droite (en rose).

Conclusion : Le code html contient le texte, les balises permettent de structurer la page c’est-à-dire définir les zones de contenu. Les feuilles de styles quant à elles, permettent de dimensionner et positionner les balises sectionnantes. Les feuilles de styles jouent aussi sur les éléments décoratifs de la page (couleurs, polices, encadrement…). Le code html contient le fond (la structure et le texte), le code css contient la forme (mise en page). Cette séparation permet à la page de s’adapter à n’importe quel terminal (écran d’ordinateur, tablette, téléphone…) En ajoutant à CSS quelques scripts, on peut créer une  mise en page « responsive » ou page réactive qui s’auto-adapte à l’écran.

Pour en savoir plus, voir le Memento CSS

  1. https://fr.wikipedia.org/wiki/Hypertext_Markup_Language#Description_de_HTML ↑

Jeu de pong C#

Pong est un des premiers jeux vidéo d’arcade (1972). Au travers de quelques vidéos, nous allons recréer ce jeu dans l’environnement Windows, à l’aide du langage C#. Nous verrons comment intégrer des objets graphiques (pictureBox) et les faire se mouvoir, comment gérer les rebonds sur les bords et les raquettes. Nous verrons aussi comment ajouter du son.

PictureBox

le fichier contenant les images gif des balles est à télécharger ici

Déplacement d’une pictureBox

Reste à faire :

ajouter les boutons et le code afin que la balle puisse se déplacer en diagonale dans les 4 sens.

Résumé des informations concernant les timer :

Un composant Timer permet d’implémenter une minuterie déclenchant un événement selon un intervalle de temps défini par l’utilisateur.

Propriété Type Description
https://sites.google.com/site/notionscsharpcem/_/rsrc/1412335790755/guicontroles/timer/Propri%C3%A9t%C3%A9.png (Name) Indique le nom utilisé dans le code pour identifier l’objet. Préfixe : tmr Exemple : tmrHorloge
https://sites.google.com/site/notionscsharpcem/_/rsrc/1412335790755/guicontroles/timer/Propri%C3%A9t%C3%A9.png Enabled bool Obtient ou définit l’état de la minuterie, soit active ou non. true si la minuterie est active ; sinon, false.
L’état par défaut est false.
https://sites.google.com/site/notionscsharpcem/_/rsrc/1412335790755/guicontroles/timer/Propri%C3%A9t%C3%A9.png Interval int Obtient ou définit la fréquence de temps en millisecondes du déclenchement de l’événement Tick.
Événement Description
https://sites.google.com/site/notionscsharpcem/_/rsrc/1282076684193/guicontroles/button/Evenements.png Tick Se produit lorsque l’intervalle de temps spécifié s’est écoulé.
Méthodes Description
https://sites.google.com/site/notionscsharpcem/_/rsrc/1401026160445/instanciation_objet/M%C3%A9thode.png Start Démarre la minuterie. Exemple : tmrHorloge.Start();
https://sites.google.com/site/notionscsharpcem/_/rsrc/1401026160445/instanciation_objet/M%C3%A9thode.png Stop Arrête la minuterie. Exemple : tmrHorloge.Stop();

Déplacement et rebond de la balle

Reste à faire :
  • Modifier le code afin que la balle se déplace en diagonale et rebondisse sur les 4 bords du conteneur.
  • A l’aide des propriétés Height, Width, Location.X et Location.Y des divers composants modifier le code afin que les butées (les valeurs limites permettant de définir s’il y a rebond) soit indépendantes de la tailles des éléments : si l’utilisateur redimensionne la fenêtre de l’application, l’application doit toujours fonctionner.

Ajout d’une raquette et gestion de son déplacement à l’aide des touches du clavier.

L’image gif de la raquette peut être téléchargée ici

Reste à faire :
  • Modifier le code afin d’ajouter la raquette de gauche.
  • Provoquer le rebond de la balle sur les 2 raquettes, pour cela on utilisera les propriétés Location.X, Location.Y, ainsi que les propriétés Height et Width de la raquette.

Le rebond à lieu lorsque plusieurs conditions sont réunies :

  • horizontalement : lorsque pbBalle.Location.X + pbBalle.Width devient supérieur ou égale à pbRqDroite.Location.X
  • verticalement : pbBalle.Location.Y + pbBalle.Height supérieur ou égal à pbRqDroite.Location.Y ET pbBalle.Location.Y inférieure ou égal à pbRqDroite.location.Y + pbRqDroite.Height

gestion des scores :

  • Placer des labels afin d’afficher les scores : chaque fois que la balle rebondit sur les lignes verticales du conteneur, le score du joueur opposé s’incrémente ;
  • Ajouter une fonction indiquant une fin de partie lorsqu’un des scores arrive à 10.
  • Proposer une solution pour réinitialiser le jeu en fin de partie.

Simplification de  la gestion du rebond.

Ajouter du son[1]

  1. http://stackoverflow.com/questions/4125698/how-to-play-wav-audio-file-from-resources ↑

Initiation C#

Visual Studio est un outils de développement (IDE en anglais : Integrated Development Environment) . Il s’agit d’un logiciel qui permet au développeur d’écrire des programmes. Visual Studio est une plateforme complète qui peut autorise le développement de toutes sortes d’applications (bureautique, web, jeux..) pour toutes sortes de plateformes (ordinateurs de bureaux, mobiles, serveurs, stations de jeux, Arduino…) et pour toutes sortes de langages (C , C++, C#, VB, JS, HTML, Python…) . Cette plateforme de développement est modulaire, c’est-à-dire qu’on peut rajouter des modules (gratuits ou payants) pour cibler un nouveau matériel ou un nouveau langage.

langage C# et utilisation de Visual Studio

De par la richesse du produit, la prise en main de ce logiciel peut être complexe. Nous allons voir comment développer des applications visuelles simples et comment l’utilisateur peut interragir avec l’application. On parle d’Interfaces Homme/ Machine (IHM).

tutoriel de découverte

détail du tutoriel

Lancer Visual studio

Choisir un modèle de type C# (prononcer C sharp)

Changer (éventuellement ) le nom du projet et l’emplacement, puis cliquer sur OK

Visual Studio initialise le projet en créant les dossiers et les fichiers nécessaires à la création de l’application.

Présentation de la fenêtre de l’IDE

A droite on trouve l’Explorateur de solution (1) il s’agit du dossier et les fichiers qui composent de projet.

A gauche on trouve l’espace de composition qui va permettre de dessiner l’application. Par défaut Visual Studio créer une fenêtre d’application Windows nommée Form1.

A gauche de la fenêtre de composition il y a 3 onglets, dont un qui porte le nom « Boite à Outils »  (3) .

En haut de la fenêtre de boite à outils, on voit une petite « punaise » qui permet d’ancrer la boite à outils et qui évite qu’elle se replie à chaque fois que la souris s’en écarte.

La boite à outils contient tous les éléments qui permettent de composer l’application

Depuis la boite à outils, faire glisser sur la « Form1 » un « Button » et deux « Textbox »

Modifier la propriété « Text » de button1 : remplacer le texte « button1 » par « Copier »

Sélectionner la « TextBox2 » , modifier la propriété « ReadOnly » pour la faire passer à « true ». de cette façon la boite de texte sera grisée et l’utilisateur de l’application n’aura pas la possibilité de modifier le texte.

Dans la fenêtre de composition : double-cliquer sur le bouton »Copier ». une nouvelle fenêtre s’ouvre alors (Form1.cs). Cette fenêtre contient le code affairant à l’application.

Modifier le code de la fonction button1_click de la manière suivante :

private void button1_Click(object sender, EventArgs e)
   {
       textBox2.Text = textBox1.Text;
   }

Cette fonction est appelée lorsque l’utilisateur clique sur le bouton.

Toutes les instructions comprises entre les accolades {} seront exécutées. Chaque instruction se termine obligatoirement par un « ; »

L’instruction textBox2.Text = textBox1.Text;peut se traduire par « la propriété Text de TextBox2 prend la valeur de la propriété Text de TextBox1 ». Autrement dit le texte de textBox1 sera recopié dans la textBox2.

Tester le programme : dans la barre d’outils cliquer sur le bouton « Démarrer »

Le programme est alors compilé et s’il ne contient pas d’erreurs, il se lance. Bravo !

Lecteur WebRadio avec node-red, MPD et MPC

Cet article propose de créer une IHM pour piloter un lecteur de radio internet. Le système est embarqué dans une carte Raspberry Pi équipée de node-red. Nous verrons d’abord comment installer MPD et MPC qui permettent de transformer la carte en lecteur audio. Nous verrons ensuite comment créer une interface web à l’aide de node-red qui permette de piloter le lecteur.

MPD est un lecteur média qui fonctionne comme un service (daemon). Il met en relation des sources de musiques, des codecs et une API de pilotage via le réseau. En fait il se comporte comme un serveur auquel on envoie des commandes de type « play », « stop »,… afin qu’il les exécute.
MPD / MPC[3]
Nous allons installer MDP (Music Player Daemon) qui va servir de lecteur de musique embarqué, ainsi que MPC (Music Player Command) qui servira à piloter MPD (telle une télécommande) :
MPD
Pré-requis
Vérifier que le driver audio est correctement installé :

[shell]
lsmod[/shell]

Il doit apparaître le driver snd_bcm2835 dans le résultat. Si ce n’est pas le cas, essayer :

[shell]sudo modprobe snd_bcm2835[/shell]

Forcer la sortie son sur la prise casque :

[shell]amixer cset numid=3 1
sudo alsactl store
[/shell]

Pour que la sortie audio soit toujours la prise Jack (au lieu de la prise HDMI), éditer le fichier /boot/config.txt et dé-commenter la ligne  hdmi_drive=2 en enlevant le dièse en début de ligne.

[shell]
# uncomment to force a HDMI mode rather than DVI. This can make audio work in
# DMT (computer monitor) modes
hdmi_drive=2
[/shell]

Installation

Sous Raspbian stretch, l’installation est facile (après mise à jour des dépôts) :

sudo apt update
sudo apt install mpc mpd

Il faut ensuite éditer le fichier /etc/mpd.conf et retirer le commentaire de la ligne “device” dans la section “audio_output”

# An example of an ALSA output:
#
audio_output {
    type		"alsa"
    name		"My ALSA Device"
    device		"hw:0,0"	# optional

il faut ensuite redémarrer MPD :

sudo /etc/init.d/mpd restart

Télécharger le fichier radio.m3u. Ce fichier contient la liste de quelques radios, il peut être édité. Pour ajouter d’autres radios rendez-vous à : www.ecouter-en-direct.com/
Coller le fichier playlist radio.m3u dans /var/lib/mpd/playlists/
Le fichier de configuration de mdp est /etc/mdp.conf. On pourra y paramétrer les dossiers où MPD ira chercher la musique et les playlist par exemple. Une fois les réglages effectués, redémarrer le service : [shell]sudo /etc/init.d/mpd restart[/shell]

charger le fichier playlist : [shell]mpc load radio[/shell]

lancer la diffusion : [shell]mpc play 1[/shell]

Vidéos

La playlist suivante contient 5 vidéos :

  1. installation de MPD et MPC
  2. Affichage de la liste des radio (DahBoard node-red)
    Remarque : bien décocher les cases “Pass through…” et “Add output…” dans le template  de la liste des radios.
  3. Déclenchement de la lecture au clic sur un élément de la liste.
  4. Ajout de boutons de commandes
  5. Affichage du nom de la radio et du titre en cours

Annexe

Le fichier css pour la mise en forme du tableau:

table {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

td, th {
    border: 1px solid transparent;
    /* No more visible border */
    height: 30px;
    transition: all 0.3s;
    /* Simple transition for hover effect */
}

th {
    background: #DFDFDF;
    /* Darken header a bit */
    font-weight: bold;
}

td {
    background: #3a3a3a;
    text-align: center;
}

/* Cells in even rows (2,4,6...) are one color */

tr:nth-child(even) td {
    background: #313131;
}

/* Cells in odd rows (1,3,5...) are another (excludes header cells)  */

tr:nth-child(odd) td {
    background: #3e3e3e;
}

tr td:hover {
    background: #F1F1F1;
    color: #000;
}

 

  1. Voir : http://www.peyregne.info/wp/radio-internet-sur-raspberry-pi-partie-1-mpdmpc/ ↑

Interface de gestion de base de données

jsGrid est une bibliothèque jQuery qui permet de gérer un tableau de données et offre les options de CRUD (Create Read Update Delete) au travers de requêtes AJAX. L’objet de l’article consiste à mettre en œuvre ce composant en liaison avec une collection mongoDB, à travers l’interface de développement Node-Red.

Exemple de grille obtenue avec jsGrid

vidéos

La playlist suivante contient 5 vidéos :

  • Installation en local des fichiers scripts et CSS
  • Mise en œuvre de jsGrid à partir de l’exemple fournit sur le site de jsGrid dans une page structurée avec le framework BootStrap
  • Utilisation de la base de données afin de remplir la grille jsGrid avec les documents d’une collection.
  • Insertion et effacement d’un nouveau document dans la collection
  • Mise à jour d’un  document.

 

Mongodb et Node-red

Mongodb est un moteur de base de données noSQL (not only SQL) orienté documents. Ce genre de base de données est structurée autour de classeurs qu’on nomme “collections”, chaque collection contenant des documents. Les documents sont indexés afin de pouvoir y accéder rapidement. Les bases de données noSQL favorisent la vitesse d’accès aux données, au détriment parfois de la compacité. Nous verrons ici comment installer mongoDB sur Raspberry Pi, puis comment l’utiliser au sein de Node-Red.

Installation de mongoDB sur raspberry pi

(voir le document complet)

MongoDB et node-red

Installation du nœud mongodb2 et insertion d’un document dans une collection par injection :

Création d’un formulaire d’insertion de données à l’aide des nœuds Dashboard.

 

Installation de mongoDB et mongo-express

Pour mongoDB c’est plutôt simple :

sudo apt-get install mongodb

On peut vérifier que cela fonctionne :
Démarrage du service mongodb

$ sudo /etc/init.d/mongodb start

Le serveur mongo db démarre normalement à l’adresse 127.0.0.1 :27017

$ mongo

Ça lance une console

> use myDB
> db.LicencePlate.insert({})

Confirmation de l’existence de la base et de la collection :

> show dbs
> show collections

Mongo-express est une interface utilisateur permettant de manipuler mongoDB de manière visuelle. Il faut que node-red et npm soit installés (voir le document d’installation de node-red avec Johnny5)

sudo npm install -g mongo-express

Par défaut le login et le mot de passe sont admin et pass cela peut être changé en modifiant le fichier de configuration. Sur raspberry le fichier de configuration se trouve dans /usr/lib/node_modules/mongo-express

Il faut recopier en le renommant config.js  puis l’éditer:

sudo cp /usr/lib/node_modules/mongo-express/config.default.js /usr/lib/node_modules/mongo-express/config.js
sudo nano /usr/lib/node_modules/mongo-express/config.default.js

Si la base myDB a été créée (voir l’installation de mongodb et les commandes shell), il faut modifier le fichier config.js :

// Accessing Bluemix variable to get MongoDB info 
if (process.env.VCAP_SERVICES) {
    var dbLabel = 'mongodb-2.4';
    var env = JSON.parse(process.env.VCAP_SERVICES);
    if (env[dbLabel]) {
        mongo = env[dbLabel][0].credentials;
    }
} else {
    mongo = {
        db: 'myDB',
        host: 'localhost',
        // password: 'pass', 
        port: 27017,
        ssl: false,
        url: 'mongodb://localhost:27017/db',
        // username: 'admin',
    };
}

 

Si on veut accéder à l’interface utilisateur depuis un autre ordinateur que le raspberry, dans la section « site »,  il faut renseigner l’adresse IP du raspberry à la place de localhost et modifier le login et le mot de passe:

site: {
        // baseUrl: the URL that mongo express will be located at - Remember to add the forward slash at the start and end! 
        baseUrl: process.env.ME_CONFIG_SITE_BASEURL || '/',
        cookieKeyName: 'mongo-express',
        cookieSecret: process.env.ME_CONFIG_SITE_COOKIESECRET || 'cookiesecret',
        host: process.env.VCAP_APP_HOST || '0.0.0.0', //connexion quelle que soit l’adresse de la carte Raspberry 
        port: process.env.VCAP_APP_PORT || 8081, //port du serveur web requestSize
        Limit: process.env.ME_CONFIG_REQUEST_SIZE || '50mb',
        sessionSecret: process.env.ME_CONFIG_SITE_SESSIONSECRET || 'sessionsecret',
        sslCert: process.env.ME_CONFIG_SITE_SSL_CRT_PATH || '',
        sslEnabled: process.env.ME_CONFIG_SITE_SSL_ENABLED || false,
        sslKey: process.env.ME_CONFIG_SITE_SSL_KEY_PATH || '',
    },
    //set useBasicAuth to true if you want to authenticate mongo-express loggins 
    //if admin is false, the basicAuthInfo list below will be ignored 
    //this will be true unless ME_CONFIG_BASICAUTH_USERNAME is set and is the empty string 
    useBasicAuth: process.env.ME_CONFIG_BASICAUTH_USERNAME !== '',
    //useBasicAuth: false, 
    basicAuth: {
        username: process.env.ME_CONFIG_BASICAUTH_USERNAME || 'admin',
        password: process.env.ME_CONFIG_BASICAUTH_PASSWORD || 'pass',
    },

Ensuite on peut lancer mongo-express :

cd /usr/lib/node_modules/mongo-express/ && node app.js

ou plus simplement

$ mongo-express

Lancer un navigateur http://<adresse_IP_Raspberry>:8081 puis s’authentifier avec le l’identifiant et le mot de passe choisit précédemment :

Page d’accueil de mongo express Collections de la base myDB(cliquer sur « View » sur la page d’accueil pour voir les collections)
Documents de la collection « LicencePlate », on voit qu’une plaque d’immatriculation est inscrite (AV865XG) Cliquer sur « New Document » pour créer une nouvelle plaque d’immatriculation : ajouter “immatriculation”:”XX123YY”, avant “_id”: ObjectID() puis cliquer sur Save.

En cliquant sur le numéro de plaque on peut modifier le document, en cliquant sur le bouton rouge représentant une poubelle, on peut effacer ce document.