Initiation Xamarin Forms

Xamarin Forms permet de créer des applications cross-platform, c’est à dire qui pourront être compilées pour Android, IoS et Universal Windows. Ce tuto d’initiation permet de découvrir l’interface de développement pour créer une petite application qui affiche la météo en renseignant le code postal.

La playlist contient 7 vidéos

App Météo

  1. Première application : découverte de l’environnement . Il s’agit ici de créer une petite application permettant de changer le texte d’un label en réponse à un “clic” sur un bouton. C’est un peu la version “Hello world ! ” d’une application Xamarin Forms.
  2. Application  météo partie 1 : utilisation de l’API openWeatherMap afin de récupérer un jeu de données pour un code postal donné.
  3. Application  météo partie2 : Création d’un client web dans l’application puis interrogation de openWeatherMap à l’aide de ce client.
  4. Application  météo partie3 : Création d’une classe permettant d’exploiter je fichier json fournit par openWeatherMap.
  5. Application  météo partie 4 : Mise en forme de l’interface graphique.
  6. Application  météo partie 5 : Finalisation de l’application –
    • Intégration d’une image représentative de l’état du temps.
    • Gestion des exceptions.
  7. Application  météo partie 5 : Dans cette vidéo on aborde la question du débogage. L’application fonctionne pour un ciblaque d’android 8 mais ne fonctionne plus quand on cible une version d’android 9 et supérieure. On voit donc comment repérer le dysfonctionnement et comment y remédier.

Pilotage d’une LED RVB par la liaison Série

L’objectif est ici de faire interagir une carte Arduino et une application C#. Les échanges entre l’application et la carte Arduino s’effectuent via la liaison série. Le programme C# permet de sélectionner et d’ouvrir le port série de la carte Arduino. Ensuite le déplacement des curseurs de l’application envoie des messages sur la liaison série. Messages qui sont interprétés par la carte Arduino afin de commander l’intensité lumineuse l’une Led RVB.

câblage

La plus grande broche de la LED correspond à la cathode à relier à la masse

De gauche à droite

  1. Anode Bleu (+)
  2. Anode Vert (+)
  3. Cathode commune (-)
  4. Anode Rouge (+)
1234

Programme Arduino

Le programme consiste à lire les données reçues sur la liaison série, d’en extraire les données concernant la commande des leds. Le pilotage des leds à proprement parlé s’effectue à l’aide des instructions analogWrite.

Le programme est le suivant :

#define ROUGE 3
#define GND 4
#define VERT 5
#define BLEU 6
void setup() {
  // put your setup code here, to run once:
  pinMode(GND, OUTPUT);
  digitalWrite(GND, LOW);
  Serial.begin(115200);

}

void loop() {
  if (Serial.available() > 0)
  {
    byte valRouge = Serial.parseInt();
    byte valVert = Serial.parseInt();
    byte valBleu = Serial.parseInt();
    while(Serial.available() > 0) Serial.read();
    analogWrite(ROUGE, valRouge);
    analogWrite(VERT, valVert);
    analogWrite(BLEU, valBleu);
  }

}

 

programme C#

l’application ressemble à ceci :

Le code final est le suivant :

using System;
using System.Windows.Forms;
using System.IO.Ports;

namespace pilotage_led_RVB
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            if (serialPort1.IsOpen)
            {
                button1.Text = "Connexion";
                serialPort1.Close();
                trackBar1.Enabled = false;
                trackBar2.Enabled = false;
                trackBar3.Enabled = false;
            }
            else {
                button1.Text = "Déconnexion";
                serialPort1.PortName = comboBox1.SelectedItem.ToString();
                serialPort1.Open();
                trackBar1.Enabled = true;
                trackBar2.Enabled = true;
                trackBar3.Enabled = true;
            }
            
        }

        private void trackBar1_Scroll(object sender, EventArgs e)
        {
            serialPort1.WriteLine(trackBar1.Value + "/" + trackBar2.Value + "/" + trackBar3.Value);
        }

        private void trackBar2_Scroll(object sender, EventArgs e)
        {
            serialPort1.WriteLine(trackBar1.Value + "/" + trackBar2.Value + "/" + trackBar3.Value);
        }

        private void trackBar3_Scroll(object sender, EventArgs e)
        {
            serialPort1.WriteLine(trackBar1.Value + "/" + trackBar2.Value + "/" + trackBar3.Value);
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            String[] ports = SerialPort.GetPortNames();
            foreach (var port in ports)
            {
                comboBox1.Items.Add(port);
            }
        }
    }
}

 

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 !