⚠️ Attention Ce site n'est plus maintenu et une nouvelle version de laboîte est disponible ici !

Les boîtes sont des petites horloges connectées qui affichent des informations provenant d'Internet. Pour monter votre boîte, nous vous invitons à lire le guide ci-dessous.

laboîte est un Arduino accompagnée d'un module Ethernet et d'un écran (appelé aussi matrice de LED).

Components

Building

The following list outlines steps for building a laboite device:

  1. Commencez par brancher le module Ethernet sur l’Arduino
  2. Utilisez les fils de prototypage pour raccorder la matrice de LED au module Ethernet.
    Attention Deux versions de la matrice de LED sont disponibles avec des connecteurs différents. La dernière version de la matrice indique une tension d'alimentation de 12V mais fonctionera parfaitement avec les 5V fournis par notre Arduino.
    Écran Arduino
    5V/12V +5V
    GND GND
    DATA 7
    WR 6
    CS 5
    CLK 4
  3. Placez l'ensemble dans le boîtier assemblé (vis placées entre les parties avant et arrière)
    Si vous avez une imprimante 3D (ou un FabLab) à proximité, téléchargez nos fichiers .stl :
    boitiers.stl v1 boitiers.stl v4
  4. Raccordez le câble Ethernet sur votre box Internet
  5. Raccordez le câble USB à votre ordinateur (après avoir installer l'IDE Arduino (la version 1.0.5 est recommandée pour avoir une compatibilité avec la librairie ht1632)
    Attention Si le téléversement échoue, veuillez installer ces pilotes Mac ou Windows
  6. Téléchargez la librairie ht1632c puis décompressez le contenu de l'archive dans votre répertoire Arduino /libraries
    ht1632c.zip
  7. Téléchargez le croquis Arduino puis décompressez le contenu de l'archive dans votre répertoire Arduino (le répertoire laboite-master devra être renommé en laboite)
    laboite.ino
    Votre répertoire Arduino devrait ressembler à quelque chose comme cela :
  8. Créez un compte sur le site laboite.cc
  9. Identifiez vous ensuite pour ajouter une boîte en cliquant sur le bouton Add
  10. Une fois votre boîte créée, copiez la suite de caractère appelée Clé d'API
  11. Configurez ensuite vos apps en cliquant sur l'onglet Apps. Reportez vous à la section ci-dessous pour plus d'informations sur la configuration des apps
  12. Activez ensuite les apps sur votre boîte (onglet My devices)
  13. Ouvrez votre IDE Arduino et modifiez la ligne 69 du fichier laboite.ino en indiquant la clé d'API que vous avez copié à l'étape 10 :
    char apikey[] = "61c119ce"; // your device API key
  14. Upload the sketch and enjoy a coffee to celebrate !

Apps allows you to modify the information displayed on the devices. Each app allows the display of one or more information. Here are some examples:

  • Time
    shows time for a city in the world
  • Emails
    shows the number of unread mails
  • Weather
    displays the weather forecast
  • Métro
    affiche l'état du réseau métro STAR
  • Waves
    displays predicted conditions for a surf spot
  • Calendrier
    affiche votre prochain rendez-vous

Description : Shows the clock time

Paramètre : City

Valeur : permet de régler le fuseau horaire affiché par laboîte. Les valeurs possibles pour ce paramètre sont listées sur ce site.

Défaut : Europe/Paris

Description : Displays the weather forecast based on data received from wunderground.com

Paramètre : City

Valeur : permet de régler la localisation des prévisions météo. Les valeurs possibles pour ce paramètre sont listées sur le site de Wunderground.

Défaut : Rennes

Description : Displays the number of minutes you have to wait for the next bus at your stop (Keolis)

Paramètres : Bus stop (Timeo), N° ligne de bus, Direction

Valeur : permet de spécifier votre arrêt de bus. Nous vous invitons à consulter le site m.starbusmetro.fr puis indiquez le nom de votre arrêt. Choississez ensuite votre direction et votre ligne. Enfin reprenez les éléments indiqués dans l'url du site dans les paramètres comme indiqué ci-dessous :

http://m.starbusmetro.fr/arret/1176/4/0

Bus stop (Timeo)

N° ligne de bus

Direction

Exemple : Pour l'arrêt Beaulieu Insa de la ligne 4, les paramètres seront les suivants : 1176 (N° arrêt de bus), 4 (N° ligne de bus), 0 (Direction).

Description : Displays the number of bikes available at your bike station (Keolis)

Paramètre : Bike station

Valeur : permet de spécifier votre arrêt de vélo. Nous vous invitons à consulter le site levelostar.fr puis indiquez le numéro de votre arrêt.

Exemple : Pour l'arrêt Place de Bretagne, le numéro de la station est 24.

Description : Displays the energy consumption history chart of an emoncms.org feed

Description : Displays the predicted quality and conditions of a surf spot

Paramètres : API key, Feed id

Valeur : permet de régler la localisation des prévisions de vagues. Les valeurs possibles pour ce paramètre sont listées sur le site de Allosurf.

Description : Displays messages sent by your friends

Optional L'application Messages permet l'affichage de messages courts sur une boîte. Pour envoyer un message sur une boîte, vous pouvez utiliser le bouton Envoyer dans l'onglet Mes boîtes. Vous pouvez également taper la commande suivante depuis votre ordinateur : $ curl -X POST http://api.laboite.cc/<votre_clé_API>/message -d '{"message":"Votre message"}' -H 'Content-Type: application/json'

Description : Displays your daily coffee consumption

Paramètre : Identifiant

Valeur : permet de spécifier votre identifiant utilisateur sur api.laclef.cc.

Description : Displays the number of unread emails from your Gmail inbox

Paramètres : Adresse email et mot de passe Gmail

Valeur : permet de spécifier vos identifiants Gmail afin de récupérer le nombre de mails non-lus de votre compte Gmail.

Description : Displays the number of minutes you have to wait for the next bus/Tram/subway/RER at your stop

Paramètres : Nom des arrêts RATP/SNCF de départ et d'arrivée (Exemples : Sentier, Opéra...)

Description : Displays the upcoming event

Paramètre : Adresse URL de votre agenda privé

Valeur : permet de spécifier l'adresse de votre agenda privé (iCal uniquement). Pour savoir comment trouver cette URL, nous vous invitons à consulter l'aide de Google agenda ou celle de Yahoo agenda. Sachez que l'app Agenda est comptatible avec tous les agendas au format .ics.

Description : Displays the number of available parking places and if the parking is open (Keolis)

Paramètre : Nom du parc relais

Valeur : permet de sélectionner l'un des parcs relais STAR

Défaut : Henri Fréville

Description : Displays the number of minutes before the metro service recovery (Keolis)

Paramètre : Aucun (Toutes les anomalies du réseau de métro sont remontées)

Description : Displays the buses timetable at your stop (Keolis)

Paramètre : Bus stop (Timeo)

Valeur : permet de spécifier votre arrêt de bus. Nous vous invitons à consulter le site m.starbusmetro.fr puis indiquez le nom de votre arrêt. Choississez ensuite votre direction et votre ligne. Enfin reprenez le numéro de l'arrêt indiqués dans l'url du site :

http://m.starbusmetro.fr/arret/1176/4/0

Bus stop (Timeo), N° ligne de bus, Direction

N° ligne de bus

Direction

Exemple : Pour l'arrêt Beaulieu Insa de la ligne 4, le numéro de l'arrêt sera le suivant : 1176 (N° arrêt de bus).

Description : Shows the last tweet from @starbusmetro

Paramètre : Aucun (Tous les tweets du réseau de métro sont remontées)

An API allows your laboite devices to retrieves its apps data using a computer-friendly network protocol and format. There are two network protocols available: CoAP and HTTP. Two formats are supported to recover data: XML and json. Here is a XML file example containing three apps (Time, Buses and Weather):

<?xml version="1.0" encoding="utf-8"?>
<response>
  <version>0.1</version>
  <time>18:18</time>
  <nextbus>5</nextbus>
  <weather>
    <today>
      <icon>0</icon>
      <temperature>25</temperature>
    </today>
    <tomorrow>
      <icon>1</icon>
      <low>15</low>
      <high>28</high>
    </tomorrow>
  </weather>
</response>

Same info in json format:

{
  "version": "0.1",
  "time": "19:10",
  "nextbus": 1,
  "weather": {
    "today": {
      "icon": 0,
      "temperature": 25
    },
    "tomorrow": {
      "icon": 1,
      "low": 15,
      "high": 28
    }
  }
}

These files can be retrieved using this url: http://api.laboite.cc/<apikey>.<xml|json>

Le nombre d'apps affichées par votre boîte est quasi infinie. Le guide ci-dessous vous guidera dans la création d'une nouvelle app laboîte personnalisée !

Attention La section ci-dessous nécessite une bonne connaissance en développement web PHP et en développement embarqué C.

Introduction et architecture

Votre boîte fonctionne de la manière suivante :

  1. Toutes les boîtes disposent d'un identifiant unique appelée clé d'API. Lorsque vous connectez votre boîte sur internet, celle-ci va alors interroger le serveur avec une requête de ce type GET http://api.laboite.cc/<votre_clé_api>.json
  2. Si vous avez correctement configuré vos apps sur https://laboite.cc/apps, votre boîte devrait recevoir un fichier json de ce type :
  3. Ce fichier contient toutes les informations (au format json) qui vont être analysées puis affichées par votre boîte
  4. Dans les sections ci-dessous, nous verrons comment créer une app web (en PHP) puis nous détaillerons le développement nécessaire à la partie Arduino (en langage C)

Création d'un app (partie web en PHP)

Voici les étapes de création d'une app en PHP :

  1. Commencez par isoler la donnée que vous souhaiteriez afficher, cela peut être une donnée provenant d'une page web ou d'une API
  2. Nous prendrons pour exemple les données ouvertes du réseau STAR, plus particulièrement nous chercherons à afficher sur notre boîte le nombre de vélos disponibles à la station Place de Bretagne
  3. La documentation présente sur le site https://data.explore.star.fr/ nous indique que l'url permettant de récupérer les données liées à la station Place de Bretagne est la suivante GET https://data.explore.star.fr/explore/dataset/vls-stations-etat-tr/api/?refine.nom=Place+de+Bretagne
  4. Si vous tapez cette url dans votre navigateur, vous devriez obtenir un fichier qui ressemble à cela :
    {
    "records": [
        {
          "datasetid": "vls-stations-etat-tr",
          "fields": {
            "coordonnees": [
              48.1096206,
              -1.684018814
            ],
            "etat": "En fonctionnement",
            "idstation": 24,
            "lastupdate": "2015-12-14T11:20:04+00:00",
            "nom": "Place de Bretagne",
            "nombreemplacementsactuels": 20,
            "nombreemplacementsdisponibles": 3,
            "nombrevelosdisponibles": 17
          },
          "geometry": {
            "coordinates": [
              -1.684018814,
              48.1096206
            ],
            "type": "Point"
          },
          "record_timestamp": "2015-12-14T11:20:00+00:00",
          "recordid": "03bd9f7320deca7e70c171d1a1a14224c446698b"
        }
      ]
    }
  5. Nous avons surligner ci-dessus l'information pertinente que nous souhaiterions envoyer à laboîte. Il ne nous reste plus maintenant qu'à récupérer cette valeur en PHP puis à déployer cette app sur notre serveur. Pour ce faire, télécharger le fichier suivant :
  6. Si vous souhaitez tester cette app, nous vous invitons à installer PHP sur votre ordinateur en suivant ce guide
  7. Une fois la partie web créée, la donnée va pouvoir être analysée et affichée par laboîte (ceci est décrit dans la section suivante)

Création d'un app (partie Arduino en C)

Une fois la donnée envoyée par le code PHP décrit ci-dessus, nos prochaines étapes vont porter sur le traitement et l'affichage de cette donnée par laboîte :

  1. Tout d'abord, reprenez les étapes 6 à 14 du guide de montage
  2. Une fois votre boîte fonctionnelle, ouvrez le fichier laboiteLib.ino et ajoutez le code suivant dans la fonction parseJSON()
  3. Ce code permet de récupérer la valeur envoyée par le serveur et de la stocker dans une variable appelée bikes
  4. Reste maintenant à afficher cette variable sur notre matrice de LED laboîte. Pour ce faire, nous vous invitons à ajouter le code suivant dans le fichier laboiteLib.ino :
  5. Une fois cette modification effectuée, vous pouvez téléverser votre nouveau programme dans votre boîte et voir le résultat
  6. N'hésitez pas à nous envoyer vos contributions en utilisant l'outil prévu à cet effet, si votre application est approuvée alors celle-ci sera déployée sur notre serveur officiel laboite.cc

Si vous souhaitez partager avec la communauté une photo de votre boîte ou une app que vous avez dévellopée. Ou bien, si vous ne trouvez pas de réponse à votre problème sur cette page, nous vous invitons à vous inscrire à notre liste de discussion ici support@laboite.cc :

Oui, je souhaite m'inscrire à la liste de discussion
Veuillez me retirer de la liste de discussion
Veuillez indiquer votre adresse email ici :

Veuillez à nouveau indiquer votre adresse email ici pour vérification :