JSON Parsing

This sketch is an online information viewer for my MegaHits audio board editor project files. It loads a default demo file from my CDN but you can select your own file. Files are processed locally.

let jsonData;
let fileInput;
const qualityStrings = ["Standard","Long Play","Ultra Long Play"];

function preload() {
  // Load MegaHits Editor's hson file
  jsonData = loadJSON('https://s1.kmoene.com/need you now.hson');
}

function setup() {
  createCanvas(600, 600);
  fileInput = createFileInput(handleFile);
  fileInput.position(20, height + 20);
}

function draw() {
  background(10);
  fill(255);
  textSize(32);
  text("HitsEditor File Version." + (jsonData.MegaHitsFileVersion) + " Viewer", 20, 50);
  textSize(16);
  text("For viewing megahits version 0 project files information", 20, 70);
  textSize(24);
  text("Project Name:                          ID: " + (jsonData.ProjectNumber), 20, 100);
  text(jsonData.ProjectName, 20, 130);
  text("Flash Size:", 20, 160);
  text(jsonData.FlashSize/8*1024/2 + " Blocks", 20, 190);
  
  textSize(20);
  for (let i = 0; i < jsonData.PlayList.length; i++) {
    let audioFile = jsonData.PlayList[i];
    text("File: " + audioFile.fileName, 20, 220 + i * 70);
    text("Quality: " + qualityStrings[audioFile.audioQuality], 20, 240 + i * 70);
    text("Size: " + Math.ceil(audioFile.sampleSize/1024/2)+ " Blocks", 20, 260 + i * 70);
  }
    let totalFlashUsage = jsonData.FlashSize/8 * 1024 * 1024;
    let totalAudioFileSize = jsonData.PlayList.reduce((sum, audioFile) => {
      return sum + audioFile.sampleSize + 0x4000;
    }, 0);
    let flashUse = (totalAudioFileSize / totalFlashUsage) * 100;

    fill(50);
    rect(20, 550,  400, 30);
    fill(0, 255, 0);
    if(flashUse>100){
      fill(255, 0, 0);
      rect(20, 550, 400, 30);
    }else{
      rect(20, 550, flashUse * 4, 30);
    }

    textSize(20);
    fill(255);
    text("Flash Usage: " + flashUse.toFixed(2) + "%", 20, 540);
}

function handleFile(file) {
  loadJSON(file.data, (loadedData) => {
    jsonData = loadedData;
  });
}
Code language: JavaScript (javascript)