Exercice - Préparer les données JSON pour les expériences de réalité mixte

Effectué

Pour préparer vos données au monde de la réalité mixte, il vous suffit de vérifier que vous disposez de fichiers JSON complets.

Notes

La création d’images et de modèles 3D dépasse le cadre de ce module Learn. Toutefois, une autre étape est nécessaire si vous devez créer une expérience de réalité mixte à partir de zéro. Dans ce module, vous allez utiliser des images existantes et vérifier que les images et les données sont corrélées.

Dans le module précédent de ce parcours d’apprentissage inspiré de Space Jam : Nouvelle Ère, vous avez créé une application web qui affiche des informations relatives aux joueurs ainsi que leurs PER. Cela permet à un entraîneur de basket d’identifier les joueurs à placer sur le terrain et ceux auxquels un peu de repos doit être accordé pour que l’équipe reste globalement en forme.

Les données de cette application web reposent sur un fichier CSV (valeurs séparées par des virgules) appelé game_stats.csv. Vous trouverez l’exemple de fichier dans le dépôt GitHub.

Babylon.js et Mixed Reality Toolkit

Pour le projet de réalité mixte Babylon.js, vous pouvez extraire toutes les images de la Tune Squad à partir du web. Pour ce faire, vous avez besoin d’un fichier JSON qui contient les informations suivantes relatives à chaque joueur :

  • Nom
  • PER
  • URL de l’image

Heureusement, vous pouvez utiliser un peu de Python pour créer le fichier JSON.

Convertir un fichier CSV en JSON avec Python

Pour convertir le fichier CSV du module précédent en fichier JSON à utiliser dans le module suivant :

  1. Ouvrez Visual Studio Code.
  2. Ouvrez un nouveau dossier, par exemple ConvertCSV.
  3. Créez un fichier, par exemple convert.py.
  4. Téléchargez le fichier CSV en accédant à celui-ci sur GitHub et en sélectionnant Raw. Sinon, ouvrez cette page. Cliquez ensuite avec le bouton droit n’importe où à l’écran, puis sélectionnez Enregistrer sous.
  5. Déplacez le fichier game_stats.csv dans le dossier ConvertCSV que vous avez créé dans Visual Studio Code.

Vous devez avoir configuré le contenu suivant dans Visual Studio Code.

Screenshot of Visual Studio Code showing only File Explorer with two files and a portion of the editor pane with an empty Python file.

Écrire le lecteur CSV

Ensuite, utilisez le fichier convert.py pour extraire seulement les parties appropriées du fichier CSV, par exemple le nom et le PER de chaque joueur.

Vérifiez que vous avez importé le package CSV, puis créez un ensemble de constantes qui représentent votre équipe actuelle.

import csv

# The name of the player is in the second column (index 1).
NAME_INDEX = 1

# The PER of the player is in the 10th column (index 9).
PER_INDEX = 9

# There are only 15 players that we are reading in.
COUNT = 15

Le fichier CSV contient quatre fois le PER de chaque joueur, un pour chaque quart-temps de jeu. Vous avez seulement besoin du premier PER, celui qui est en vigueur avant le démarrage du jeu.

Utilisez le code suivant pour ouvrir le fichier CSV. Parcourez les 15 premières lignes, après l’en-tête de la première ligne. Créez une liste de noms, de PER et d’URL correspondant aux emplacements des images des joueurs.

# Open the game_stats.csv file.
with open('game_stats.csv') as csv_file:
    # Use the CSV reader and confirm the delimeter is a comma.
    csv_reader = csv.reader(csv_file, delimiter=',')

    # Initialize the counter and empty lists.
    character_count = 0
    names = []
    pers = []
    urls = []

    # Loop through each row in the CSV file.
    for row in csv_reader:
        # Ignore the first row since that is the header.
        if character_count == 0:
            character_count += 1
        # Only take data from the first 15 because we only need the player's initial PER, not for each quarter.
        elif character_count <= COUNT:
            # The name of the player is in the second column (at index 1).
            names.append(row[NAME_INDEX])

            # The image file of the player is their name with no spaces or period and all lowercase.
            urls.append("https://sjanlassets.blob.core.windows.net/assets/" + row[NAME_INDEX].replace(" ","").replace(".","").lower()+".png")

            # The PER of the player is in the 10th row (at index 9).
            pers.append(row[PER_INDEX])

            # Increment the counter so we only get one set of data for each player.
            character_count += 1
        else:
            break

Enfin, vous pouvez écrire l’ensemble de ce contenu dans un fichier JSON. Ouvrez le fichier JSON en mode écriture pour remplacer tout ce qui s’y trouve déjà. Effectuez ensuite une boucle parmi les 15 joueurs, et créez un objet JSON pour chaque joueur.

# Create a players.json file if it isn't already created and open it.
# The parameter "w" will overwrite the file if anything is in it.
f = open("players.json", "w")

# Write the opening bracket of the JSON object to the file.
f.write("[\n")

# Iterate over all of the players.
for index in range(0,COUNT):
    # Write the opening bracket of the first player object to the file.
    f.write("\t{\n")

    # Write the name, PER, and image url, with their labels, to the file.
    f.write("\t\t\"name\": \""+names[index]+"\",\n")
    f.write("\t\t\"per\": \""+pers[index]+"\",\n")
    f.write("\t\t\"imgUrl\": \""+urls[index]+"\"\n")
    f.write("\t},\n")

Ce fichier JSON n’est pas encore achevé. Cela est dû au fait que vous avez supprimé une valeur hors norme dans vos données d’origine. Toutefois, vous souhaitez l’inclure dans votre expérience de réalité mixte.

Rajouter le lecteur manquant dans les données

Dans le premier module de ce parcours d’apprentissage inspiré de Space Jam : Nouvelle Ère, vous avez réalisé que vos données comportaient des valeurs hors norme. Si vous avez suivi ce module, vous vous souvenez peut-être que dans l’Unité 5 : Rechercher les valeurs hors norme, il existait une valeur faible au niveau des points et des possessions. Il s’agissait de la ligne 35, ID 40. Il s’avère que ce joueur était Sam le pirate !

Vous souhaitez vérifier qu’il est bien rajouté à vos données JSON pour qu’il puisse s’afficher dans votre expérience de réalité mixte. Vous devrez écrire un peu de code supplémentaire.

Notes

Vérifiez que le reste du code n’est pas en retrait, car il ne fait pas partie de la boucle for.

# Write the opening bracket of the Yosemite Sam object to the file.
f.write("\t{\n")

# Write his name, PER (0), and image url, with the data labels, to the file.
f.write("\t\t\"name\": \"Yosemite Sam\",\n")
f.write("\t\t\"per\": \"0\",\n")
f.write("\t\t\"imgUrl\": \"https://sjanlassets.blob.core.windows.net/assets/yosemitesam.png\"\n")

# Since he is the last of the Tune Squad, don't include a comma after closing his object.
f.write("\t}\n")

# Write the closing bracket to the JSON object to the file.
f.write("]")

# Close the file.
f.close()

Vous devez voir à présent un fichier JSON dans votre dossier Visual Studio Code.

Screenshot of Visual Studio Code showing only the File Explorer with three files and a portion of the editor pane with a filled-in JSON file.

© 2021 Warner Bros. Ent. Tous droits réservés.