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]
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
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.
<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;
}
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.
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
(Name)
Indique le nom utilisé dans le code pour identifier l’objet. Préfixe : tmr Exemple : tmrHorloge
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.
Interval
int
Obtient ou définit la fréquence de temps en millisecondes du déclenchement de l’événement Tick.
Événement
Description
Tick
Se produit lorsque l’intervalle de temps spécifié s’est écoulé.
Méthodes
Description
Start
Démarre la minuterie. Exemple : tmrHorloge.Start();
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.
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.YETpbBalle.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.
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 :
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’instructiontextBox2.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 !
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) :
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 :
installation de MPD et MPC
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.
Déclenchement de la lecture au clic sur un élément de la liste.
Ajout de boutons de commandes
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;
}
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
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.
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:
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.
OpenALPR est un logiciel de reconnaissance de plaque d’immatriculation. Ce logiciel s’appuie sur la bibliothèque openCV et le logiciel de reconnaissance de caractères tesseract.
Raspbian Jessie
On trouve sur les forums tout ce qu’il faut pour télécharger, compiler et installer ce package depuis les sources. L’inconvénient est que la compilation sur raspberry est très longue. Nous proposons ici une version packagée de openALPR, ce qui réduit considérablement le temps d’installation.
(Name)
Enabled
Interval
Tick
Start
Stop
