Contenu dynamique avec synchronisation du moniteur

Ce tutoriel explique comment utiliser la fonction Monitor Sync pour lire du contenu dynamique.

Monitor Sync est une fonctionnalité qui permet au lecteur de synchroniser périodiquement des copies locales de fichiers avec leurs sources distantes via HTTP ou FTP. Typiquement, cette fonctionnalité est utilisée pour récupérer de petits fichiers de données contenant des informations sensibles au facteur temps, telles que des informations sur la météo ou les cours de la bourse.

Pour ce tutoriel, nous utiliserons la fonction Monitor Sync pour configurer une copie publicitaire qui récupérera la température actuelle et l'indice UV.

Note : Ce tutoriel utilise Monitor Sync pour les données, ce qui améliore la résilience aux pannes de réseau. Toutefois, en cas de panne de réseau prolongée, les données risquent de devenir obsolètes.

Pour terminer ce tutoriel, vous devrez suivre les étapes suivantes :

Ce tutoriel utilise différents fichiers, listés ci-dessous. Ces fichiers doivent être téléchargés dans Broadsign Control sous forme d'un seul fichier compressé. Vous pouvez télécharger ce fichier compressé.

Il s'agit du fichier principal à référencer lors du chargement du package HTML dans Broadsign Control.

Copier 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css" />
  <script src="./js/jquery-3.4.1.min.js"></script>
  <title>Welcome</title>
</head>

<body id="body">

  <img id="imagelogo" src="https://broadsign.com/static/20th_logo.601565da.svg"
    alt="Company Logo" />

  <div id="container" class="container">
    <div class="today">
      <div id="title" class="title row">Today</div>
      <div class="row">
        <div class="temp">Temperature:</div>
        <div id="tempCurrent" class="tempValue">10</div>
      </div>
      <div class="row">
        <div class="temp">UV Index: </div>
        <div id="uvCurrent" class="tempValue">0</div>
      </div>
      <div class="row">
        <img id="weatherIcon" src="" alt="Weather Icon"
          class="icon" />
      </div>
    </div>

  </div>

  <div class="attribution">Powered by Tomorrow.io</div>

  <script src="./broadsignObject.js"></script>
  <script src="./broadsignPlay.js"></script>
  <script src="./feed.js"></script>
  
  <script>
    getBroadsignVariables() // from broadsignObject.js
    getFeed() // from feed.js
  </script>


  <!-- Due to pre-caching, we will use BroadSignPlay to begin animation, it will be called automatically in the broadsign player -->

</body>

</html>

Toutes les options de mise en page du fichier HTML se trouvent dans le fichier CSS. Le fichier CSS comprend une section à la fin dédiée à des ajustements mineurs spécifiques à l'affichage en format portrait.

Copier 
html {
  height: 100%;
}

body {
  height: 100%;
  background-image: url("img/WelcomeTo.jpg");
  background-size: cover;
  background-position: center;
  font-family: "Poppins";
  overflow: hidden;
}

.container {
  display: flex;
  width: 100vw;
  height: 60vh;
  margin: 0;
  justify-content: center;
  align-items: center;
}

.today {
  margin: 20px;
  padding: 10px;
  color: white;
  text-shadow: 2px 2px 4px #000000;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 7vmin;
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

.row {
  display: flex;
  flex-direction: row;
  font-size: 5vmin;
  justify-content: space-around;
  align-items: center;
  margin: 0;
}

.temp {
  padding: 10px;
  text-align: left;
}

.tempValue {
  padding: 10px;
  text-align: right;
}

.icon {
  padding: 10px;
  margin: 5px;
  width: 12vmax;
}

.attribution {
  width: 100vw;
  position: absolute;
  bottom: 2vh;
  text-align: center;
  font-size: 1.5vmin;
  color: rgb(7, 98, 235);
}

#imagelogo {
  width: 20vw;
  max-height: 10vh;
  margin-left: 40vw;
  margin-top: 5vh;
}




@media screen and (orientation: portrait) {
  body {
    font-size: 16vmin
  }

  .title {
    font-size: 10vmin;
  }

  .row {
    font-size: 8vmin;
  }

  .icon {
    width: 20vmax;
  }
}

Ce fichier JavaScript s'exécutera une fois le fichier index.html chargé par le lecteur. Il recherchera la variable display_unit_address par défaut et l'affichera dans la console. De plus, il vérifiera la présence de la variable facultative logoURL.

Le logoURL doit utiliser le format « https://www.example.com/image.png ». L'image peut être au format PNG, JPG ou SVG. Pour plus d'informations, consultez Étape 2 – Ajouter une variable pour le logo (facultatif).

Copier 
let weatherLocation = "montreal" // "latitude,longitude zip/postal code or city name for weather in feed.js
let apiKey = "yourapikey" // here or as a variable in Broadsign Control UI, sign up https://app.tomorrow.io/signup to get an API key

getBroadsignVariables = () => {
    if (window.BroadSignObject) {
      // default variables listed here https://docs.broadsign.com/broadsign-control/latest/content-variables.html
      let address = decodeURIComponent(
        window.BroadSignObject.display_unit_address
      );

      // you can also add your own custom variables in the Control UI that can be accessed here
      let logoURL = decodeURIComponent(
        window.BroadSignObject?.logoURL // will change the logo used in the content
      );

      let location = decodeURIComponent(
        window.BroadSignObject.weatherLocation // will change the location used in the weather feed call
      );

      let weatherApiKey = decodeURIComponent(
        window.BroadSignObject.weatherApiKey // will change the API key used in the weather feed call
      );

      // if there is a custom weatherLocation variable, override the default of montreal
      if (location) {
        weatherLocation = location;
        console.log("weatherLocation: ", weatherLocation);
      }

      if (weatherApiKey) {
        apiKey = weatherApiKey;
      }
        
      // apply the variables to the HTML
      document.getElementById("imagelogo").src = logoURL;
      console.log("display_unit_address: ", address);
    }
    
};

Ce fichier JavaScript contient la fonction BroadSignPlay() que le lecteur appelle lorsqu'il programme ce contenu pour sa boucle. La fonction s'exécute après la mise en mémoire tampon préalable, lorsque le contenu est affiché à l'écran. Les vidéos, animations ou sons doivent être configurés pour ne démarrer qu'après l'appel de cette fonction.

Dans le fichier d'exemple, plusieurs classes CSS sont ajoutées aux éléments du fichier index.html afin de garantir que les animations ne commencent que lorsque le contenu s'affiche.

Copier 

BroadSignPlay = () => {
    // if this content is run within a Broadsign player, it will be pre-buffered and this function will be called when the content is displayed on screen
    console.log("Called Broadsign Play function")

    // we will add css classes to the elements when BroadsignPlay is called so the animation only begins when displayed
    document.getElementById("weatherIcon").classList.add("animated", "rubberBand", "icon");
    document.getElementById("container").classList.add("animated", "fadeIn", "container");
}

Ce fichier JavaScript charge le fichier temperature.json, qui est copié sur le lecteur via Monitor Sync (voirÉtape 3 – Configurer la synchronisation du moniteur). Il extrait la température, l'indice UV et le code météorologique du fichier JSON. Par la suite, des modifications sont apportées au fichier index.html pour afficher ces informations.

De plus, les icônes d'images pour le flux météo sont stockées dans le dossier weatherIcons. Ces icônes, fournies par tomorrow.io, sont utilisées avec mention de la source.

Note : Broadsign n'est pas associé à tomorrow.io et l'utilise simplement comme exemple d'API.

Copier 
// this file will access the example json feed and return the data
const feedURL = "https://api.tomorrow.io/v4/timelines"
// weatherLocation and apiKey should be set in broadsignObject.js or in the Broadsign Control UI as variables. 
// weatherLocation can be latitude,longitude zip/postal code or city name
const weatherCodes = {
    "0": "Unknown",
    "1000": "Clear, Sunny",
    "1100": "Mostly Clear",
    "1101": "Partly Cloudy",
    "1102": "Mostly Cloudy",
    "1001": "Cloudy",
    "2000": "Fog",
    "2100": "Light Fog",
    "4000": "Drizzle",
    "4001": "Rain",
    "4200": "Light Rain",
    "4201": "Heavy Rain",
    "5000": "Snow",
    "5001": "Flurries",
    "5100": "Light Snow",
    "5101": "Heavy Snow",
    "6000": "Freezing Drizzle",
    "6001": "Freezing Rain",
    "6200": "Light Freezing Rain",
    "6201": "Heavy Freezing Rain",
    "7000": "Ice Pellets",
    "7101": "Heavy Ice Pellets",
    "7102": "Light Ice Pellets",
    "8000": "Thunderstorm"
}

const getFeed = async () => {
    console.log("weatherLocation: ", weatherLocation)
    let url = `${feedURL}?apikey=${apiKey}&location=${weatherLocation}&timesteps=current&fields=temperature,weatherCode,uvIndex`

    // let jsonfeed = await fetch(url)
    //     .then((response) => {
    //         if (response.status !== 200) {
    //             throw new Error("HTTP error " + response.status);
    //         }

    //         return response.json()

    //     }).then(res => {
    //         return res
    //     })
    //     .catch(err => {
    //         console.log(err)
    //         // return incorrect information to display something for demo purposes, 
    //         return {
    //             "data": {
    //                 "timelines": [
    //                     {
    //                         "timestep": "current",
    //                         "endTime": "2024-02-29T15:28:00Z",
    //                         "startTime": "2024-02-29T15:28:00Z",
    //                         "intervals": [
    //                             {
    //                                 "startTime": "2024-02-29T15:28:00Z",
    //                                 "values": {
    //                                     "temperature": 15,
    //                                     "uvIndex": 0,
    //                                     "weatherCode": 1000
    //                                 }
    //                             }
    //                         ]
    //                     }
    //                 ]
    //             }
    //         }
    //     });

    let jsonfeed = await $.getJSON("../../sync/temperature.json");

    console.log("feed", jsonfeed)

    // assign the data to the HTML
    let temperature = jsonfeed.data.timelines[0].intervals[0].values.temperature
    let weatherCode = jsonfeed.data.timelines[0].intervals[0].values.weatherCode
    let uvIndex = jsonfeed.data.timelines[0].intervals[0].values.uvIndex

    document.getElementById("tempCurrent").innerHTML = parseInt(temperature) + "°C"
    document.getElementById("weatherIcon").src = "./weatherIcons/" + weatherCode + ".png"
    document.getElementById("uvCurrent").innerHTML = uvIndex

    console.log("weatherCode: ", weatherCodes[weatherCode])
}

Une copie publicitaire de package HTML vous permet de planifier un fichier HTML autonome qui affiche du contenu HTML5.

Broadsign stocke les fichiers extraits du package sur le système local. Par conséquent, vous n’avez pas à vous soucier des problèmes de réseau ou de latence pendant la lecture du contenu.

Pour plus d'informations sur les copies publicitaires HTML Package, consultez Copie publicitaire de package HTML.

Pour ajouter une copie publicitaire de package HTML :

  1. Accédez au ruban Schedules et sélectionnez la flèche sur l’icône Ad Copy. Ensuite, dans le menu déroulant, sélectionnez HTML Package.

  2. Sélectionnez un dossier dans lequel ajouter la copie publicitaire.

    3. L'assistant Add HTML Package Wizard s'ouvre.

  3. Donnez un nom à la copie publicitaire du package HTML.

  4. Parcourez vos fichiers pour localiser et sélectionner le fichier .zip de votre package HTML. Dans le champ Path to main HTML file, saisissez « index.html ».

  5. Cliquez sur Finish.

    6. Vous pourrez désormais configurer cette copie publicitaire HTML Package.

Vous pouvez ajouter, si vous le souhaitez, une variable à la copie publicitaire du package HTML qui sera utilisée lors de la lecture dans le lecteur. Les variables sont sensibles à la casse.

Pour plus d'informations sur les variables de copie publicitaire, consultez Variables de contenu.

Pour ajouter une variable :

  1. Localisez la copie publicitaire du package HTML que vous avez téléchargée.
  2. Double-cliquez sur la copie publicitaire.

    3. La fenêtre Ad Copy Properties s'ouvre.

  3. Cliquez sur la section Settings à gauche, puis sur l'onglet Variables.

  4. Cliquez sur le bouton Add.
  5. Veuillez saisir les informations suivantes :
    • Variable name : logoURL
    • Value : URL de votre logo

  6. Ajoutez une variable avec la localisation météorologique :
    • Variable name : weatherLocation
    • Value : 37,7783, -119,4179
  7. Ajoutez une variable avec la clé API :
    • Variable name : weatherApiKey
    • Value : VotreCléAPI

    8. La clé API est requise si elle n'est pas intégrée directement dans le fichier broadsignObject.js avant le téléchargement de la copie publicitaire du package HTML.

  8. Cliquez sur OK.

Ce tutoriel propose deux façons de configurer Monitor Sync pour obtenir des informations météorologiques : avec ou sans utiliser l’API.

Pour plus d'informations, consultez Section Monitor Sync.

Une fois la configuration terminée, vous pourrez programmer la copie publicitaire du package HTML dans une campagne.

Pour ce tutoriel, nous allons configurer la synchronisation du moniteur pour obtenir soit temperature1.json, soit temperature2.json à partir d'un compartiment statique (il ne s'agit pas de flux en direct), et l'enregistrer localement sur le lecteur sous le nom temperature.json.

  • https://broadsign-quickstart.s3.amazonaws.com/temperature1.json
  • https://broadsign-quickstart.s3.amazonaws.com/temperature2.json

Pour configurer la synchronisation statique du moniteur :

  1. Localisez la copie publicitaire du package HTML que vous avez téléchargée.
  2. Double-cliquez sur la copie publicitaire.

    3. La fenêtre Ad Copy Properties s'ouvre.

  3. Cliquez sur la section Settings à gauche, puis sur l'onglet URL.

  4. Cliquez sur le bouton Add.

    5. La fenêtre Synchronization URL s'ouvre.

  5. Veuillez saisir les informations suivantes :
    • Remote URL : https://broadsign-quickstart.s3.amazonaws.com/temperature1.json
    • Destination Path : temperature.json
    • Protocol : HTTP/HTTPS
    • Laissez le reste tel quel.

  6. Cliquez sur OK.

    7. Le fichier sera alors téléchargé dans le dossier de synchronisation du lecteur.

Cette approche fait appel à l'API tomorrow.io en utilisant les variables de copie publicitaire pour transmettre les informations nécessaires.

Note : Broadsign n'est pas associé à tomorrow.io et l'utilise simplement comme exemple d'API.

Pour la configuration de l'URL distante, nous transmettrons des variables pour la clé API et l'emplacement.

Copier 
https://api.tomorrow.io/v4/timelines?apikey={{weatherApiKey}}&location={{weatherLocation}}&timesteps=current&fields=temperature,weatherCode,uvIndex

Si les coordonnées géographiques sont configurées sur l'appareil d'affichage, vous pouvez également les utiliser au lieu de spécifier un emplacement.

Copier 
https://api.tomorrow.io/v4/timelines?location={{display_unit_lat_long}}&apikey={{weatherApiKey}}&timesteps=current&fields=temperature,weatherCode,uvIndex

Pour configurer la synchronisation statique du moniteur à partir de l'API :

  1. Localisez la copie publicitaire du package HTML que vous avez téléchargée.
  2. Double-cliquez sur la copie publicitaire.

    3. La fenêtre Ad Copy Properties s'ouvre.

  3. Cliquez sur la section Settings à gauche, puis sur l'onglet URL.

  4. Cliquez sur le bouton Add.

    5. La fenêtre Synchronization URL s'ouvre.

  5. Veuillez saisir les informations suivantes :
    • Remote URL : https://api.tomorrow.io/v4/timelines?apikey={{weatherApiKey}}&location={{weatherLocation}}&timesteps=current&fields=temperature,weatherCode,uvIndex
    • Destination Path : ./temperature.json
    • Use URL variables : cochez
    • Protocol : HTTP/HTTPS
    • Laissez le reste tel quel.

  6. Cliquez sur OK.