was successfully added to your cart.
All Posts By

Fabien Aubret

illustration_tutorielJava1

[Tuto 1]Développer vos applis Android en JAVA

By | Informatique | No Comments
  • Introduction

    Depuis longtemps déjà, lorsque j’apprenais à développer des programmes basiques en C++ et JAVA, j’avais pour objectif de concevoir des applications pour les plateformes mobiles. Aujourd’hui, le développement sur ce genre de plateforme s’est simplifié, chaque concepteur d’OS mobile a développé un langage dédié à ses plateformes. Tous, sauf un, Android, développé par Google, qui a décidé d’utiliser le très connu JAVA pour la conception de ses applications.
    En fait, au-delà d’un simple JAVA, c’est un couple de langage que Google a choisi d’intégrer pour la conception d’applications. En effet, tout comme sur Windows Phone, l’utilisation du langage XAML a été privilégiée pour la mise en place des interfaces graphiques. En fait, cela peut paraitre plus complexe mais nous verrons ensemble par la suite à quel point cette structure particulière va nous permettre de simplifier nos scripts.
    Tout au long de ces tutoriels, j’aurai pour objectif de vous amener à la création de votre première application mobile. Pour suivre ce cours, vous n’aurez besoin d’aucune connaissance préliminaire dans un quelconque langage. Je vais vous apprendre toutes les fonctions de bases qui nous seront utiles par la suite. Bien évidemment, des connaissances en JAVA ou plus généralement, sur les structures des langages pourront vous être d’une grande utilité si vous voulez accélérer votre apprentissage.

  • Les Bases

    Avant de rentrer dans le monde de la programmation JAVA, je vous propose de faire le point sur les outils dont nous aurons besoin. Pour écrire nos programmes JAVA, nous aurons besoin d’un éditeur de script, de préférence avec une coloration syntaxique. Ensuite, pour les exécuter, nous aurons besoin d’un compilateur qui se chargera de préparer nos programmes à l’exécution. Nous aurons aussi besoin d’un gestionnaire de projet afin d’éviter d’avoir un grand nombre de fichiers différents à gérer depuis des dossiers différents. Et bien sachez que sur le terrain des environnements de développement, nous n’avons pas à nous plaindre. En effet, il existe un logiciel complet et puissant, Eclipse, qui va nous permettre à la fois d’éditer nos scripts, de les exécuter et de gérer le projet qu’ils constituent. Je vous propose donc de télécharger gratuitement ce logiciel à l’adresse suivante: https://www.eclipse.org/downloads/
    Prenez bien soin de choisir Eclipse IDE for Java Developers. Ensuite, vous pourrez installer cet IDE. Vous aurez besoin de télécharger et installer le JDK java correspondant à la version de java installée sur votre ordinateur. Vous devrez aussi télécharger et installer le JRE correspondant à votre version de Java. Personnellement, tout au long de ce tutoriel, j’utiliserai en majorité Java 7 ( et donc JRE 7 ) puisque c’est la version installée sur mon ordinateur pour des besoins de développement.
    Bien, désormais, tous nos outils sont en place. Vous pouvez dès à présent ouvrir Eclipse et choisir le répertoire par défaut de vos programmes grâce à la boite de dialogue qui s’ouvrira.
    Maintenant, vous devriez vous retrouver face à cette interface qui ne vous est pas forcément encore très familière:

     

    inteface_eclipse

    Interface du logiciel Eclipse IDE Java au démarrage

     

    Il est maintenant temps d’entrer dans le vif du sujet en créant votre premier projet Java. Pour cela, je vous propose de cliquer sur cette icône:

     

    barre_outilsEclipse_newProject

    Icône à sélectionner pour créer un nouveau projet

     

    Plus précisément, je vous propose de cliquer sur la petite flèche noire à côté de cette icône puis de choisir « Java Project »
    Là, vous devriez arriver sur la fenêtre suivante:

     

    fenetre_newProjectEclipse

    Fenêtre de dialogue ouverte lors de la création d’un projet Eclipse

     

    Bien que les options semblent nombreuses, nous n’avons ici qu’à saisir un nom de projet dans « Project Name », un dossier dans lequel notre projet sera créé en modifiant l’entrée « Location » (vous pouvez aussi choisir, comme moi, d’utiliser le répertoire par défaut que vous avez spécifié au lancement d’Eclipse ). Enfin, nous devons spécifier le « Java Runtime Environment » (JRE que vous avez installé précédemment ). Cependant, si toutes les installations se sont correctement déroulées, vous devriez avoir, par défaut, le JRE installée de présélectionné.
    Ensuite, nous pouvons cliquer sur Finish, ce qui aura pour effet de créer notre projet et ainsi d’ajouter un « dossier » sur la colonne gauche de l’interface d’Eclipse.
    Pour ma part, j’ai décidé d’appeler le projet Tutoriel_SimpleDuino.
    Nous allons désormais créer notre premier programme mais avant, il faut que vous sachiez que Java est un langage plutôt orienté objet, c’est-à-dire qu’il facilite l’implémentation de librairie personnelle (en quelque sorte). Ainsi, notre projet créé ne représente qu’un dossier dans lequel seront stockés nos scripts mais nous allons devoir créer une sorte de « librairie par défaut », un « package » en langage Java. Pour cela, nous pouvons dérouler le dossier de notre projet dans la colonne de gauche d’Eclipse puis effectuer un clic droit sur le dossier « src ». Nous sélectionnons ensuite New puis Package. Finalement, nous nous retrouvons face à la fenêtre suivante:

     

    fenetre_creationPackageEclipse

    Fenêtre de dialogue ouverte lors de la création d’un Package sous Eclipse

     

    Encore ici, nous n’avons qu’à spécifier un nom de Package dans le champ « Name ». Pour ma part, je choisis d’entrer le nom « part1 ». En cliquant sur Finish, vous pourrez apprécier la création du Package en déroulant le dossier « src » contenu dans votre projet. Maintenant, nous allons créer notre première classe. Nous allons écrire nos scripts dans une classe pour débuter puisque la programmation orientée objet fera l’objet d’un prochain tutoriel.
    Pour créer cette classe, nous allons effectuer un clic droit sur le Package récemment créé et nous allons choisir New puis Class. Désormais, nous sommes donc face à cette fenêtre:

     

    fenetre_creationClassEclipse

    Fenêtre de dialogue ouverte lors de la création d’une classe dans un Package sous Eclipse

     

    La création d’une classe est légèrement plus complexe. Evidemment, nous allons spécifier un nom pour la classe que nous allons créer. Pour ma part, je choisis « main » puisque ce sera la classe principale de mon Package « part1 ». Après avoir entré le nom de votre nouvelle classe, je vous propose de cocher la case « public static void main(String[] args) ». Cela aura pour effet de « dire » au programme que cette classe sera la principale, celle qu’il faudra exécuter par défaut. En fait, nous aurions pu écrire le code que cette case va générer à la main mais puisque Eclipse nous propose une telle option, autant en profiter. Enfin, après avoir nommé votre nouvelle classe et coché cette case pour spécifier le caractère principale de notre classe, vous pourrez cliquer sur Finish, ce qui aura pour effet d’ajouter la classe dans le Package créé précédemment et de l’ouvrir dans l’éditeur de scripts d’Eclipse.
    Notre première classe est créée, nous allons pouvoir commencer ensemble à développer un programme.
    La manipulation précédente doit avoir donné naissance au script suivant:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    package part1;
     
    public class Main {
     
    public static void main(String[] args) {
     
    // TODO Auto-generated method stub
     
    }

    Je vous propose d’ajouter la possibilité d’afficher un texte à notre fichier main. Pour cela, nous allons utiliser la fonction « println() » héritée de « out », elle-même héritée de « System ». En effet, il faudra vous y faire, comme je l’ai écrit précédemment, Java est un langage orienté objet et privilégie donc la mise en place de librairies personnalisées. Vous serez donc régulièrement confrontés à des « fonctions » composées comme le « println() ». En fait, ce système a aussi un avantage: Vous constaterez rapidement que l’héritage des fonctions semble logique et qu’il vous permettra de mieux vous repérer dans votre script.
    Au final, la fonction « println() » est donc la suivante:

    1
    
    System.out.println("Hello World");

    Et nous devrions avoir au final le script suivant:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    package part1;
     
    public class Main {
     
    	public static void main(String[] args) {
    		// TODO Auto-generated method stub
    		System.out.println("Hello World");
     
    	}
     
    }

    Désormais, pour l’exécuter, il nous suffit alors d’utiliser cette icône située dans la barre d’outils:

     

    barre_outilsEclipse_Compiler

    Icône à sélectionner pour lancer la compilation de votre premier programme

     

    Nous devrions alors nous retrouver avec le résultat suivant sur notre interface Eclipse. Notez bien l’impression du message dans la console.

     

    PremierProgramme_compilation

    Résultat attendu de votre premier programme JAVA une fois compilé

     

Merci d’avoir suivi cette première partie du tutoriel Java pour le développement d’applications Android, j’espère que celui-ci vous aura plu.
A bientôt pour un prochain tutoriel.

Fabien A.

illustration tutoriel SWIFT

[Tuto 1]Découvrir Swift pour iOS et OS X

By | Informatique | No Comments

I. Introduction

Depuis pas mal de temps je me disais qu’apprendre le langage Swift afin de développer des applications pour ma propre utilisation me serait plus que bénéfique. Je me suis enfin décidé à sauter le pas. Cela permettra également de continuer le projet Simple-Domo en l’adaptant à la plateforme iOS.
Je vais essayer d’être le plus clair possible afin que vous puissiez vous aussi apprendre ce langage. Nous verrons ensemble si nous avons besoin d’apprendre l’Objective-C.

II. Plan

Dans ce tutoriel, je vais aborder les bases du langage Swift. Le plan sera régulièrement mis à jour puisque ce tutoriel sera complété par d’autres articles pour continuer notre apprentissage.
Dans un premier temps, nous allons donc aborder les bases.

III. Les bases

A. Les Variables et Constantes

Qu’est ce qu’une variable ?
Une variable est un paramètre que l’on déclare en général en début de programme. C’est un « espace de stockage » que l’on attribue à un résultat.
Cette variable peut être un Nombre (Simple, Double), mais aussi un Caractère.

Pour déclarer une variable, on utilise l’acronyme « var »

1
2
3
4
5
var exemple1: Int = 13 // exemple1 ne peut être qu’un "entier"
var exemple2 = 1.5
var exemple3 = "jour" // Les chaînes de caractères de déclarent entres guillemets "ceciEstUnCaractère"
var x = 1, y = 4, z = 5 // Permet de déclarer plusieurs variables à la suite
exemple1 = 3 // exemple1 vaut à present 3

Les variables sont susceptibles de changer de valeur au cours du programme contrairement aux constantes que l’on déclare de la manière suivante :

1
2
3
4
5
let constante1 = 12
let constante2 = "lundi"
let x = 5, y = 3 z = constante2 // Permet de déclarer plusieurs variables à la suite
let jours = 7
let nombreJours = "La semaine compte \(jours)" // la commande \(Fonction) permet de récupérer et afficher la valeur de la fonction

B. Impression d’une fonction à l’écran

Le Langage Swift permet une syntaxe relativement facile pour afficher un texte à l’écran.

1
2
let dateAnniversaire = 13
println("L’anniversaire d’Hugo est le \(dateAnniversaire)") // Cette fonction vous permet d’afficher la phrase dans la console

Vous pouvez tester cette fonction en créant le fameux « Hello World ».

Exemple : Afficher « Hello World » à l’écran

1
println("Hello World") // C’est aussi simple que ça

Compilez et regardez la console.

C. Les tableaux

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var tableau1 = ["Lundi", "Mardi", "Mercredi", "Jeudi"]
tableau1.append("Vendredi")
println(tableau1) // [Lundi, Mardi, Mercredi, Jeudi, Vendredi]
 
var tableau2: [String] = [ ]
tableau2.append("4")
println(tableau2)
 
var tableau3: [Int] = [ ]
tableau3.append(4)
 
var tableau4: [Float] = [ ]
tableau4.append(5.4)
 
var semaine = ["Lundi", "Mardi", "Mercredi", "Vendredi"]
semaine.insert("Jeudi", atIndex: 3) // Ajouter "Jeudi" à la quatrième position dans le tableau "semaine"

Attention, dans un tableau, la première valeur correspond à l’indice 0. C’est à dire que pour l’exemple précédent, Lundi correspond à 0, Mardi à 1 et ainsi de suite.

1
2
3
var semaine = ["Lundi", "Mardi", "Mercredi", "Vendredi"]
semaine.insert("Jeudi", atIndex: 3)
semaine.removeAtIndex(2) // Permet de supprimer la valeur à la troisième position. C’est à dire Mercredi

D. Les Conditions

Après avoir appris comment déclarer des fonctions, nous allons apprendre les conditions.
Les conditions en Swift, se font de la même manière que les autres langages que l’on peut rencontrer. On utilise un « if ».

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let heure = 19
if heure <= 12 {
      println("C’est le matin")
}
else if heure <= 19 {
      println("C’est l’après-midi")
}
else {
      println("C’est la nuit")
}
 
// C’est l’après-midi
 
let jours = 13
switch jours {
      case 1:
            println("Nous sommes le 1")
      case 2...15:
            println("Nous sommes entre le 2 et le 15")
      case 16, 17:
            println("Nous sommes le 16 ou 17 ")
      default:
            println("Nous sommes entre le 17 et la fin du mois")
}
 
// Nous sommes entre le 2 et le 15

E. Les Boucles

Les boucles « for » sont des actions qui se répètent autant de fois qu’on le souhaite.
« for » signifie « pour »

1
2
3
4
5
6
7
8
for var id = 1; id < 4; ++id {
      println("ajouter")
}
 
let couleur = ["Rouge", "Rose", "Vert"]
for k in couleur {
      println("Couleur : \(k)")
}
1
2
3
// Couleur : Rouge
// Couleur : Rose
// Couleur : Vert

Les boucles « while », « tant que » en français, exécutent une action tant que les conditions ne sont pas vérifiées.

1
2
var compteur = 0
while compteur < 10 { println("Je suis a \(compteur)") ++compteur } // tant que compteur est inférieur a 10, on affiche "Je suis a …" F.

F. Les Fonctions

À présent, nous allons apprendre à créer des fonctions.
Procédez de la manière suivante:

1
2
3
func addition(a: Int, b: Int) -> Int {
      return a + b
}

Au final, vous devriez avoir un éditeur xCode (PlayGround) qui ressemble à celui-ci:

ScreenShot Swift 1

Première capture d’écran du résultat attendu sur le tutoriel 1 Swift

ScreenShot Swift 2

Seconde capture d’écran du résultat attendu sur le tutoriel 1 Swift

Merci d’avoir suivi ce tutoriel.
Je vous prépare déjà la suite de ce cours qui vous permettra d’approfondir encore vos connaissances.

Grégoire A.

Couverture EggBot Par Nikodem

Egg-Bot: Le projet DIY de Nikodem

By | Projets | No Comments

Bonjour à tous,

petit article d’actualité aujourd’hui car on bosse toujours sur Simple-Domo et on prépare d’autres tutos pendant le peu de temps disponible.
L’egg-bot, vous connaissez ? Parce qu’aujourd’hui, un maker du nom de Nikodem a décidé de concevoir sa propre machine à base d’Arduino. Mais au fait, présentons l’egg-bot en détail avant d’aborder son modèle DIY.
L’egg-bot est une machine permettant d’écrire ou de dessiner sur un objet rond, plus particulièrement des œufs. Cette machine a été conçue en 1990 par Bruce Shapiro, un « maker » rapidement fasciné par les moteurs pas à pas et les fabuleuses conceptions qu’ils permettent. A l’origine, c’était une machine simpliste, avec un design épuré au maximum mais qui avait le mérite d’être fonctionnelle.

Photographie du premier prototype d'eggbot

Première version de l’EggBot

 

Au fur et à mesure des années, le prototype est devenu un projet sérieux, des pièces d’art ont été conçues par ces machines et Bruce a donc décidé de l’améliorer tant en termes de design qu’en termes de fonctionnalités. On a donc pu découvrir 3 autres modèles, l’un en 2009, un autre en 2010 et un final en 2014. A partir de 2009, il s’était mis en tête de concevoir un kit maison disponible au grand public, kit qu’il a alors conçu avec son fils, Ben Trombley et Brian Schmalz.

On a ainsi vu défiler 3 versions:

Photographie de la seconde version de l'eggbot

Seconde version de l’EggBot (2009)

Photographie de la troisième version de l'eggboy

Troisième version de l’EggBot (2010)

Photographie de la quatrième version de l'eggbot

Quatrième versions de l’EggBot, la plus récente à ce jour (2014)

 

La nouvelle importante, c’est qu’aujourd’hui, avec un Arduino et un peu de matériel, Nikodem est parvenu à concevoir un système fonctionnel et avec les mêmes capacités que cette machine. Il semble important que Nikodem n’en est pas à son coup d’essais puisqu’il avait déjà réalisé un « tachymètre » pour vélo au moyen d’un Arduino.

Enfin, sachez qu’il existe un tutoriel complet sur Instructable qui regroupe toutes les étapes pour concevoir votre propre egg-bot à la manière de Nikodem dont voici le lien :

http://www.instructables.com/id/DIY-Arduino-controlled-Egg-Bot/

 

A bientôt sur Simple-Duino.

Fabien A.

Python-Numpy Teaser

Installer Python 3 et Numpy sur Mac

By | Projets | No Comments

Vous vous êtes tous demandés comment installer et faire fonctionner Python sur Mac ? Et ensuite, comment installer la librairie Numpy sur Mac ? Et bien sachez qu’il est déjà présent sous une forme puisque OS X est basé sur UNIX. Pour lancer Python, il suffit d’ouvrir le Terminal et de taper « python ».

La version de Python installée sur Mac est la version 2.6 ou 2.7. Ce n’est pas la plus récente, vous aurez alors besoin d’utiliser la version 3 pour vos études, vos loisirs et faire tourner les bibliothèques telles que Numpy, Scipy… Pour cela, suivez attentivement le tutoriel suivant :

  1. Il vous faut avoir téléchargé Xcode (sur le Mac App Store). Ensuite ouvrez-le et acceptez les conditions d’utilisation. A ce moment, Xcode devrait installer et télécharger les contenus additionnels.

 

  1. Redémarrez (si nécessaire) votre Mac.

 

  1. Nous allons installer un gestionnaire, Homebrew qui simplifie l’installation de nombreux programmes et bibliothèques, (tel Numpy qui est difficile à installer).

 

  1. Ouvrez le Terminal et tapez la commande suivante :
1
ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)

 

  1. Lors de l’installation de Homebrew, l’installation de la ‘Command line tools’ d’Xcode va vous êtes demandé. Faites le. Si vous louper cette installation, vous pourrez toujours la faire grâce à la commande suivante :
1
xcode-select –install

 

  1. L’installation de Homebrew est terminée.

 

  1. Fermer le Terminal afin de sauvegarder les modifications.

 

  1. Pour l’installation de Python 3.4, ouvrez un nouveau Terminal (j’insiste sur le fait qu’il faut avoir fermé pour ouvrir un autre terminal, sinon ça ne fonctionnera pas, un message d’erreur vous sera affiché) et tapez la commande suivante :
1
brew install python3

 

  1. Le gestionnaire Homebrew va se charger d’installer Python dans le bon répertoire, vous n’avez a vous soucier de rien.

 

  1. Une fois l’installation terminée, vous pouvez lancer « Python » avec la commande :
1
python3

 

  1. Attention, pour lancer « python 3.4 », il faut absoluement taper dans le Terminal « python3 ». Si vous ne tapez que « python », c’est la version 2.7 qui sera lancée. Pour quitter Python, taper « quit() ».

 

  1. Pour installer Numpy, tapez la commande dans le Terminal :
1
pip3 install numpy

 

  1. Occupons-nous de « scipy ». Entrez les commandes suivantes :
1
brew install gfortran
1
pip3 install scipy

Si un message d’erreur est affiché a l’installation de « fortran », entrez la commande qui vous est suggérée « brew install gcc »

  1. Enfin, l’installation de « matplotlib ». Suivez exactement les commandes suivantes dans l’ordre. (Il se peut que l’installation soit longue, dans ce cas, laissez le faire le travail)
1
brew install freetype
1
brew install pkg-config
1
brew install libpng
1
brew install ffmpeg
1
pip3 install matplotlib

Lancez Python3 et importez les modules pour une vérification.

Illustration tutoriel servomoteurs Arduino

Les servomoteurs et l’Arduino

By | Débutant Arduino | No Comments

Aujourd’hui, nous allons apprendre ensemble à contrôler un servomoteur de modélisme  à l’aide d’un arduino.

Le matériel nécessaire :

  • Un arduino
  • Un servomoteur
  • Des fils de connexions

 

Câblage du servomoteur à l’arduino.

Les servomoteurs ont 3 fils de connexions :

  • Le + (Généralement rouge)
  • Le – (La masse, généralement noire ou marron)
  • Le fil de l’impulsion de commande (Généralement blanc ou jaune)

Pour relier le servomoteur à l’arduino, vous devez brancher :

  • Le fil + sur le + de votre alimentation externe
  • Le fil noir (la masse), sur le 0V (ou GND « ground » en anglais)
  • Le fil de l’impulsion de commande sur une entrée numérique « digital » PWM

Voici un schéma de branchement :

Montage d'un ServoMoteur

Montage d’un ServoMoteur

Utilisation de la librairie

L’arduino est livré avec toute sorte de librairies (permettant d’invoquer des fonctions).
Pour inclure une librairie dans un programme arduino, rien de plus simple. Il suffit d’entrer la ligne suivante au début du programme :

1
#include <Servo.h>

Cette librairie concentre plusieurs fonctions, au nombre de 6 :

1
attach()
1
write()
1
writeMicroseconds()
1
int read()
1
boolean attached()
1
detach()

Nous allons voir ensemble a quoi correspondent les differentes fonctions ci-dessus.

La fonction « attach() » permet de rattacher le pin dans lequel nous avons branché le fil jaune.

1
2
3
4
5
6
7
8
9
10
11
#include <Servo.h>    // Permet d'inclure la librairie
 
Servo servo;       // Creation d'une variable appelee "servo"
 
void setup() {
 
  servo.attach(0)  // J'attache "servo" au pin A0 de l'arduino
 
}
 
void loop() {}

 

La fonction « write() » permet de donner une consigne au servomoteur.
On utilise généralement la syntaxe suivante : var.write(angle)

Avec « var » le nom de la variable du servo et « angle » la valeur que l’on veut donner au servo.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
#include <Servo.h>   // Permet d'inclure la librairie
 
Servo servo;       // Creation d'une variable appelee "servo"
 
void setup() {
 
  servo.attach(2)  // J'attache "servo" au pin 2 de l'arduino
 
  servo.write(90)  // Positionne le servomoteur à 90°
 
}
 
void loop() {}

 

La fonction « read() » permet de lire la valeur envoyée par la fonction « write() ». La valeur renvoyée est un entier (« integer » en anglais, souvent notée « int » dans les livres ou sur internet).

Illustration tutoriel des variables Arduino

Les variables Arduino

By | Débutant Arduino | No Comments

Nous vous proposons aujourd’hui un cours théorique sur le choix et l’utilisation des variables dans le langage Arduino. On a tous constaté un jour qu’il existait un grand nombre de type de variables dont certaines que nous avions jusqu’ici jamais utilisé. Mais alors pourquoi tant de types de variables ? Parce que choisir un type de variable qui correspond exactement à ce dont vous avez besoin est important pour des raisons de mémoire sur votre Arduino. En optimisant vos scripts, vous pourrez mieux exploiter votre Arduino. Suivez nous dans ce cours théorique plus que tutoriel et découvrez alors les principaux types de variables existants en langage Arduino.

  • Les variables numériques

Les variables numériques sont sans doute les variables les plus utilisé sur Arduino. Elles permettent de stocker des valeurs entières ou décimales qui occuperont plus ou moins d’espace. Ici, nous allons en présenter 8 qu’il nous semble important de connaitre.

Le premier type de variable que nous souhaitons aborder est « byte »
Byte définie une donnée codée sur 8 bits (donc un octet) et qui peut donc  prendre une valeur comprise en 0 et 255.

On peut écrire:

1
byte val = 98; // 98 en décimal

OU

1
byte val = B00101111; // 47 en binaire (le B signifie binaire)

Il nous parait important d’aborder le type « int » qui est sans doute le plus utilisé
Int est codé sur 2 octets, soit 16 bits et peut ainsi prendre une valeur comprise entre -32 768 et +32 768

On peut écrire:

1
int val = -6526;

Conjointement à int, il existe une version non signée, « unsigned int », toujours codée sur 2 octets donc 16 bits mais positif c’est-à-dire qu’il peut prendre une valeur comprise entre 0 et 65535.

On peut écrire:

1
unsigned int val = 34000;

Un autre type de variable, « word » permet de définir une variable avec les mêmes attributs que le type « unsigned int », c’est-à-dire une variable codée sur 2 octets, soit 16 bits, toujours positive et qui prend une valeur comprise entre 0 et 65535.

Dans le même principe, il existe « long » et sa version non signée « unsigned long » qui permet de définir une variable codée sur 4 octets, signée dans le cas de « long » et non-signée dans le cas « unsigned long ».

On peut écrire:

1
long val-15697536;

OU

1
unsigned long val = 15976254;

Enfin, le type de variable « float » est relativement important puisque c’est l’un des seuls qui permet de gérer les nombres à virgules. Comme dans tous les langages, on constatera que la virgule décimale est remplacée par un point…

On peut écrire:

1
float val = 1.76;

Enfin, pour des raisons de cohérence avec le langage C, le type de variable « double » existe en Arduino et permet les mêmes définitions que pour « float ».

Ainsi, on peut écrire:

1
double val = 1.76;
  • Les variables logiques

Les variables logiques, dites « booléennes » sont au nombre de deux cependant nous n’en traiteront qu’une, la seconde étant propre au définition de fonctions que nous aborderons sans doute dans un prochaine tutoriel.

Ainsi, il existe le type de variable « boolean » qui peut prendre deux valeurs: « true » ou « false ». Cette variable occupe un octet de mémoire.

On peut écrire:

1
boolean val = true;

OU

1
Boolean val = false;

Voilà pour ce premier cours théorique sur les variables. Nous espérons que cela vous permettra d’optimiser un peu mieux vos scripts Arduino. Optimiser la mémoire utilisée est un élément important dans la conception d’un système complexe et pouvoir choisir un type de variable qui correspond exactement à votre besoin.

Nous traiterons les variables de textuelles dans un prochain tutoriel car le sujet est vaste et complexe.

Bon développement à tous, merci d’être toujours plus nombreux à nous suivre !

Illustration tutoriel utilisation de flowcode avec Arduino

Simplifier le développement Arduino avec Flowcode

By | Débutant Arduino | No Comments

Flowcode, vous connaissez ? Non ? Pourtant, ce logiciel permet de grandes choses qui vous aiderons certainement à développer vos prochains programmes Arduino. En effet, tout l’intérêt de ce logiciel, du moins dans sa version AVR, est qu’il va permettre de  » coder  » votre programme sous forme d’algorigramme. Ensuite, vous aurez la possibilité de l’uploader tel quel sur votre carte ou de le recoder proprement à la main. Pour ma part, j’opte toujours pour la seconde méthode mais vous allez voir que le logiciel nous simplifie tout de même grandement la tâche…

 

  • Découvrons l’interface de Flowcode AVR

Je vais résumer toute l’interface de Flowcode en une image qui détaille chacun des espaces, chacune des barres, qui composent le logiciel Flowcode.

 

présentation_interface

 

Maintenant, vous avez sans doute un nouveau regard sur le logiciel. Nous allons développer un simple programme qui écrit  » Hello World !  » sur un écran LCD lors de l’appui d’un bouton.

 

  • Ajouts des composants

Avant de développer notre programme, nous allons ajouter les composants nécessaires grâce à la barre d’outils que j’ai nommé  » Réalisation du montage  » sur l’image précédente. Dans sorties, nous allons choisir  » lcd  » et nous ajouterons un bouton (switch) que nous aurons sélectionné dans le menu  » entrées « . Voici ce que vous devriez obtenir à ce moment du tutoriel :

 

réalisation_montage

 

Vous remarquerez que j’ai modifié l’apparence de mon bouton : J’ai simplement fait un clic droit puis  » Propriétés Ext  » et j’ai sélectionné  » Bouton poussoir  » dans le menu  » Type « .

 

  • Création du programme

Bien, notre montage est prêt, nous n’avons rien à relier, c’est là aussi la simplicité de Flowcode…

Désormais, nous allons devoir créer notre programme.

Dans le menu à gauche, nous allons cliquer-glisser sur un bloc « Routine composant » vers le zone de développement. Vous devez déposer ce bloc entre les balises « DEBUT » et « FIN ». Double-cliquez sur ce que vous venons d’ajouter. Vous devriez avoir cette fenêtre devant vous :

 

fenetre_creation_programme

 

Nous allons commencer par initialiser l’afficheur LCD. Sélectionnons  » LCDDisplay(0)  » puis  » Init « , on valide ensuite en appuyant sur « ok ». Voilà, l’écran est initialisé. Sur le même principe, vous aurez besoin de la macro « Curseur » de « LCDDisplay(0) », de la macro « Ecrit_chaine » (LCDDisplay(0) toujours) ainsi que de la macro « Lire_Etat() » de « SWITCH(0) ».

 

Concernant cette macro, voici la manière dont j’ai procédé pour stocker l’état du bouton. J’ai créé une variable PushButton qui prends la valeur 1 si le bouton est appuyé. Pour cela, vous devez cliquer sur la flèche à droite de « Valeur Retour » après sélection de « Lire_Etat ». Une fenêtre va s’ouvrir, vous allez pouvoir double-cliquer sur « Variables » pour en créer une nouvelle. Nommez la « PushButton », mettez 0 en valeur initale et choisissez « octet » en type de variable.

Enfin, je vous propose de vous présenter mon programme complet afin que vous compreniez comment j’ai procédé pour la suite:

 

programme_termine

 

Les points de jonction permettent de « retourner » vers un point d’ancrage. Le premier est le repère vers lequel le second se dirigera si la condition est fausse. En condition, j’ai mis pushButton = 1 car cela signifie que le bouton est appuyé.

 

Voilà pour le programme ! Vous pouvez désormais l’exécuter grâce au symbole symbole_compilation situé dans la « barre de compilation ».

Testez-le en appuyant sur le bouton poussoir et le texte « Hello World » devrait normalement s’afficher comme sur l’exemple suivant:

 

hello_world_flowcode

 

En conclusion de ce tutoriel, nous pourrions rappeler que Flowcode est un logiciel qui possède de grandes qualités avec une large diversité de programme à développer. Ici, je n’ai présenté que le « plus simple » de Flowcode mais il faut savoir qu’il est aussi capable de simuler des modules radiofréquences, des serveurs webs, etc…

Encore un logiciel complet et relativement simple dont vous ne pourrez maintenant plus vous passer.

Simple-Domo: Des news du système

By | Non classé | No Comments

Bonjour tout le monde !

Vous vous souvenez de notre projet SimpleDomo ? Oui ? Et bien sachez que nous ne l’avons pas oublié et qu’il est même d’actualité dans notre équipe en ce moment même !

 

Introduction à Simple-Domo

Pendant la longue période de calme sur notre site, majoritairement due aux études qui nous ont pris un certain temps, nous nous sommes attelés durant notre peu de temps libre au développement de l’interface de notre système. Cependant, nous n’avons pas oublié le traitement de l’information car la partie récupération des données, interprétation et envoie aux prises est aussi développée.

Nous allons faire un point ensemble de ce qu’il reste à faire et de ce qui est déjà terminé. Pour cela, nous allons aborder le système selon trois points principaux : L’interface web, la gestion du flux de données et enfin, le contrôle des prises sans fils.

 

Interface Web

C’est principalement ici que nous concentrons toutes nos forces. La raison est simple, c’est la partie du système qui doit être la mieux réussie car c’est celle que verra l’utilisateur à chaque fois qu’il souhaitera contrôler ses prises. Ici, les bugs tant graphiques que fonctionnels sont nos pires ennemis.

A ce jour, nous sommes en plein développement de la partie Administration de l’interface web. Cependant, il faut comprendre que c’est la seule partie importante et complexe à développer. La raison est simple : puisque nous avons souhaité un système entièrement personnalisable, l’utilisateur doit pouvoir tout modifier, son menu, ses pages, ses prises sans toucher à une seule ligne de code. En théorie, l’idée est simple mais en pratique, côté programmation, on ne fait jamais trop confiance à ce que dit/rentre l’utilisateur. L’interface doit donc être simple et sans failles. Voici à ce jour l’allure de l’interface Administration de notre système :

Vous pouvez voir que nous avons adapté le flat-design avec un thème bootstrap (kit css). Cela nous permet de revenir vers une simplicité à la mode qui plait à bon nombre de personnes. Vous remarquerez que notre système est en anglais ! Et oui, nous avons souhaité qu’il soit international dans un premier temps. Ensuite, nous envisageons le développement d’un système de traduction dans la partie « General settings » qui vous permettra alors de choisir le langage de votre système.
screenshot_1_Simple-Domo

 

En parlant de langue anglaise, si vous êtes bilingue ou professeur d’anglais, sachez que nous accueillons volontiers votre aide au développement du système sur les traductions parfois complexes de termes techniques.

Notre interface web vous plait ? Parfait, c’est un bon début ! Continuons la visite de contrôle de notre système SimpleDomo !

 

Gestion des flux de données

Enfin, nous retombons sur notre quotidien, le vôtre aussi sans doute, l’utilisation du Raspberry Pi. Ici, nous avons choisi un Raspberry Pi B qui pourrait évoluer vers un B+. La raison d’un tel choix est simple : la connexion Ethernet est essentielle pour un système domotique fiable.

Ensuite, c’est un simple script Python, comme ceux que nous vous apprenons à développer sur notre site, que nous avons implanté au sein du Raspberry Pi. Ce script se charge d’effectuer la liaison entre l’interface web et les prises de contrôle.

C’est une partie cachée du système mais qui ne donne cependant aucun droit à l’erreur. En effet, si ce programme « plante », c’est le système entier qui s’arrête tant que nous n’aurons pas mis en place un moyen de relancer ce script au moyen de l’interface web.

Ici, pas grand-chose à dire, le script est plus ou moins terminé, même s’il est encore susceptible d’être modifier pour une meilleure adaptation à nos besoins.

 

Contrôle des prises sans fils

Et voilà la partie que nous allons enfin débuter. Ce sont un peu les pièces maitresses du système puisqu’elles permettront de contrôler vos appareils à distance. Même si la partie Hardware est plutôt simple, c’est la partie Software qui nous pose problème car l’utilisateur doit pouvoir relier d’une manière simple la prise qu’il a ajoutée sur son interface web avec la prise physique.

Bref, ici, il nous reste de nombreuses heures de réflexion et de programmation avant d’arriver à un résultat convenable.

 

En conclusion, vous voyez qu’il nous reste encore un petit bout de chemin à parcourir avant d’arriver au terme de ce projet. Sachez que nous sommes ouverts à toutes les propositions que vous pouvez laisser en commentaire sous cet article. Je prendrai soin d’y répondre personnellement pour vous remercier et vous informer si oui ou non votre proposition sera prise en compte dans le développement. Comprenez que le projet est vaste et que nous n’avons sans doute pas encore tout imaginé.

Enfin, n’ayez pas peur de commencer de grands projets. Dites-vous que ce qui vous plaît, plaira aussi à quelqu’un d’autre, essayez d’être universel et fier de votre travail. N’oubliez pas que dans tous les projets que vous aborderez, vous serez souvent le chef d’orchestre et qu’il reviendra donc à vous de prendre les grandes décisions. Ne réfléchissez pas, foncez, vous n’avez rien à perdre.

 

 

Image de une du tutoriel HTML/CSS

Tutoriel basique HTML/CSS

By | Informatique | No Comments

Bonjour à tous,

Nouveau tuto aujourd’hui pour vous présenter une partie de programmation dont vous aurez certainement besoin si vous souhaitez par la suite développer un système domotique relativement puissant et surtout agréable à utiliser. En effet, les deux langages que nous allons aborder aujourd’hui : HTML et CSS sont des langages qui vont vous permettre de développer des interfaces web et donc de donner un « visage » à votre application.

Vous allez pouvoir constater que ces langages ne sont pas complexes dans la mesure où ils sont assez « logiques ».

Dans un premier temps, nous allons aborder la programmation HTML, c’est la programmation essentielle à connaitre puisqu’elle va donner une forme à votre page. Le CSS lui sera chargé d’améliorer l’aspect de votre page, c’est-à-dire de styliser votre page.

Nous partons du principe que vous avez déjà téléchargé et installé Notepad++ ou équivalent (Sublime text 2, etc…). Pour tester vos pages html, il suffira de les enregistrer au format .html et de les ouvrir grâce à un navigateur classique : Google Chrome, Firefox, Opera, Internet Explorer

Ainsi, en html, il y a un « format  » de page que vous réutiliserez à chaque fois :

1
2
3
4
5
6
7
8
<!DODCTYPE html>
<html>
   <head>
   </head>
 
   <body>
   </body>
</html>

Nous allons détailler ligne par ligne cette partie essentielle à votre page.

1
2
3
4
5
 <!DOCTYPE html><!--Permet de signaler au navigateur que le code que nous allons écrire est du html. Sans cette ligne, chacun des navigateurs interprétera le script à sa propre manière.>
 <html></html><!--Ici, on dis que le code html sera compris entre ces deux balises et donc qu’il faudra interpréter tout ce que nous écrirons à l’intérieur comme tel.
<head></head><!--On va déclarer l’en-tête de notre page. Ce sont un peu les "options" de notre page, elles ne modifierons pas le contenu de la page.>
 
<body></body><!-- C’est entre ces deux balises que nous allons écrire notre page. La plupart du temps, tout ce que nous modifierons entre ces balises modifiera le contenu et/ou l’aspect du site.>

Ensuite, il y a quelques balises html à connaitre :

1
2
<p></p> <!-- C’est la balise "paragraphe ", c’est elle qui encadrera le plus souvent notre texte à
<h1></h1> <!--de <h1> à <h6>, ces balises sont des balises de titres, sous-titres, sous-sous-titres, etc… -->

Et enfin, la balise qui permet le retour à la ligne :

1
    <br/>

Vous remarquerez la plupart des balises est de la forme <ouverture><fermeture/>, c’est la forme la plus courante des balises html.

Toutes ces balises nous permettrons de constituer le corps de la page, mais en fait, que mettons-nous dans l’en-tête ?

Et bien nous allons définir l’encodage des caractères (les normes de caractères qui permettront par exemple d’afficher les é, è, à, etc…) ainsi que le titre qui s’affichera dans l’onglet du navigateur et enfin, les feuilles de styles (.css) qui s’occuperont de l’apparence de notre site.

Allez, c’est parti ! Codons notre première page :

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
 
<html>
 
<head>
 
</head>
 
<body>
 
<h1>Ma première page web

<p>Voici la première page web que j’ai codé grâce au tutoriel disponible sur <a href= »http://simple-duino.com »>Simple-Duino

</body> </html>

Hein ? Quoi ?! Mais c’est tout moche !

Et bien oui, nous n’avons pas spécifié d’encodage dans notre en-tête donc les caractères spéciaux ne s’affichent pas. Pour l’encodage, je vous conseil la norme utf-8 qui contient la plupart des caractères spéciaux européens.

Ajoutons donc cette ligne :

1
    <meta charset="utf-8" />

dans notre en-tête et profitons-en pour ajouter un nom dans l’onglet du navigateur, toujours dans l’en-tête en ajoutant la balise :

1
Nom de ma page;

Vous remarquerez que j’utilise la balise qui permet de placer des liens sur ma page. En fait, elle utilise une « condition  » : href qui va permettre de spécifier le lien. Ensuite, on place le texte souhaité entre les et notre lien est en place.

Maintenant, vous savez coder votre première page internet mais elle est quand même fade vous ne trouvez pas ? Allez, allons égayer tout ça.

Pour améliorer l’aspect de notre page, nous allons avoir besoin d’aborder la notion de classes. En fait, on peut spécifier des classes à chacune des balises html. On fait cela de manière très simple en ajoutant simplement class= « nom_de_la_classe  » à l’interieur de la balise :

On peut spécifier plusieurs classes en les séparant par un espace.

Bien, vous êtes désormais en mesure d’attribuer des classes à chacun des éléments de votre page. Nous allons donc créer un fichier style.css, l’enregistrer dans le même répertoire que votre première page et lier la page html au style css grâce à la balise suivante : à placer dans l’en-tête de votre page.

En attribuant une classe à chaques élements, on arrive donc au script de page html suivant :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="utf-8" />
 
<link rel="stylesheet" href="style.css" />
 
<title>Nom de ma page
 
</head>
 
<body>
 
<h1 class="titre1" >Ma première page web

<p class= »paragraphe1″ >Voici la première page web que j’ai codé grâce au tutoriel disponible sur Simple-Duino

</body> </html>

Maintenant, nous allons aborder les bases du css mais sachez qu’il existe une infinité de possibilité pour styliser votre page. Il existe de très nombreuses balises disponibles, tellement nombreuses que nous ne pouvons pas toutes les présenter.

Tout d’abord, il faut savoir que la structure de notre fichier .css est totalement différente de celle de notre page html. En effet, ici, on utilisera une structure de la forme suivante :

1
2
3
4
5
.class
 
{
 
}

Ou alors

1
2
3
4
5
Balise
 
{
 
}

Nous allons modifier un peu notre page.

Commençons par modifier la police utilisée sur notre site :

1
2
3
4
5
6
7
*
 
{
 
font-family: sans-serif;
 
}

L’étoile nous permet de spécifier que toutes les balises devront adopter cette police de caractères.

Modifions aussi la couleur du texte :

1
color: #333333;

à ajouter entre les deux {} que nous avons mis en place précédemment.

Pour centrer notre texte, utilisons l’instruction suivante :

1
2
3
4
5
6
7
body
 
{
 
text-align :center ;
 
}

Modifions la couleur d’arrière-plan :

1
background-color : #eeeeee ;

à ajouter entre les deux {} du body précédemment défini

Soulignons notre titre :

1
2
3
4
5
6
7
.titre1
 
{
 
text-decoration : underline ;
 
}

Et faisons en sorte que notre lien soit en gras non-souligné :

1
2
3
4
5
6
7
8
9
a
 
{
 
text-decoration: none;
 
font-weight: bold;
 
}

Et qu’il change d’apparence lors du survol :

1
2
3
4
5
6
7
a:hover
 
{
 
opacity:0.7;
 
}

Et voilà ! Votre page commence à avoir un peu plus de style mais son apparence peut encore être améliorée.

apperçu

Vous avez désormais des bases essentielles en programmation html et css. En complément, nous ne pouvons que vous conseiller de visiter l’excellent tutoriel disponible sur le site d’openclassroom, ex-site du zéro réalisé par Mathieu Nebra :

http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3

Merci d’avoir suivi notre tutoriel et bonne continuation dans vos projets futurs…

A plus !

Image de une La domotique par Simple-Duino

La domotique vue par Simple-Duino

By | Non classé | No Comments

Bonjour à tous !
Aujourd’hui, l’article est spécial. En effet, je ne vais pas présenter un tutoriel mais plutôt un projet, notre projet, celui de la conception d’un système domotique de A à Z pour un prix général maximum de 100€.
C’est un réel défi que nous nous sommes lancé et qui a commencé il y a déjà un an avec la conception de notre système domotique DomoArduino.

Aujourd’hui, nous avons voulu allez plus loin. Nous débarrasser de la contrainte du filaire au profit de la radiofréquence, bref, simplifier ce que nous avions créé. Parce que la conception d’un tel système est complexe, longue et coûteuse, nous avons mobilisé toute l’équipe de Simple-Duino.
Notre système, nous l’avons appelé Simple-Domo. Nous sommes en train de développer l’interface web avant d’entamer ensuite le développement des programmes qui équiperont chaque prises sans fils.
Bien, la présentation est faite, je vais maintenant rentrer dans les détail.
Le système repose sur l’utilisation de 5 langages : HTML, CSS, PHP, JavaScript, Java, SQL.
Concrètement, l’interface web va interagir directement avec le Java qui pilotera alors l’envoie d’informations aux modules de prise.
Nous n’entrerons pas dans les détails puisque rien n’est encore définitif.
Ce qu’il faut retenir c’est que l’équipe de Simple-Duino développe la domotique de demain, une domotique fiable et à bas coûts.
Un grand merci à vous qui nous suivez. Vous faites vivre notre site et vous êtes chaque jour plus nombreux à venir visiter notre site.