Start Application: loading page

Processing Libraries
#1

Hi. I’m trying to make my Corona Viz application public. A public beta.
It takes a while to load, big tables(getting bigger every day) and a lot of parsing.
I want to do a loading page, with a console, to give feedback to the user during setup, instead of showing a full blank screen.
I’m using ControlP5 console, but it shows up only after everything is ready, so actually is no use.

what is the best strategy for this UX deal?

tks in advance

1 Like
#2

If I’m understanding you, one strategy is to move most things out of setup and into a loader that is called on frame 1. Now you are free to display progress as things load. You may also want to do some of your loading in threads…

1 Like
#3

something like

if(frameCount==1){
  loader()
}

and move all the heavy stuff in setup to void loader(){}?

i was thinking about threading, but a lot of data handling is concatenated and threading them would be a major source of bugs.
i was thinking of threading methods, but from what i’ve read this would be difficult, i woud have to build a custom Thread class and right now this is very advanced for me.

#4

Unfortunately, Processing('s draw loop) is single-threaded. So your choices are:

  1. setup and draw first, then start a long load operation automatically or manually – so now you are still freezing but at a different place
  2. assuming your total load can be subdivided, spread out your big hits – load some things on frame 100, some on frame 200, etc. – so your sketch stays a bit more responsive, but isn’t fully operational for a while.
  3. use thread() https://processing.org/reference/thread_.html
  4. use Thread https://docs.oracle.com/javase/8/docs/api/java/lang/Thread.html
  5. break you loads down into single-threaded load workers if possible (not threads, just functions in that do a step and return). For example, an image load worker is working through a list of images, and loads one image every 10 frames before returning control. So if you have 100 images, it will take it 1000 frames to finish, but your single-threaded sketch won’t freeze.
#5

my biggest issue is chaining data. i need states built first, than cities, than parsing all the data that was collected. each action(build, collect, parse)are already in their proper functions called sequentially in setup.
since all that is in draw is data sensitive, i expect to get a cascade of ArrayOutOfIndes errors.

below is my setup function

  //build State
  estados=new ArrayList<Estado>();
  estado=loadTable("estados.csv", "header");
  numStates=estado.getRowCount();
  println("num states: "+numStates);
  buildState(estado);


  //build City
  cidades=new ArrayList<Cidade>();
  cidade=loadTable("municipios.csv", "header");
  numCities=cidade.getRowCount();
  println("num cities: "+numCities);
  buildCity(cidade);

  //scrapStateData
  println("LOAD STATE DATA");
  tabelaHistorico=loadTable("https://raw.githubusercontent.com/wcota/covid19br/master/cases-brazil-states.csv", "header");
  println("STATA DATA LOADED");
  scrapStateData(tabelaHistorico);
  igniteState();
  //scrapStateData
  println("LOAD CITY DATA");
  tabelaHistoricoCidades=loadTable("https://raw.githubusercontent.com/wcota/covid19br/master/cases-brazil-cities-time.csv", "header");
  println("CITY DATA LOADED");
  scrapCityData(tabelaHistoricoCidades);

  //build active city
  println("IGNITE ACTIVE CITIES");
  activeCities=new ArrayList<Cidade>();
  buildActiveCities();
  numActiveCities=activeCities.size()-1;
  igniteActiveCity();

  Collections.sort(estados);
  Collections.reverse(estados);
  Collections.sort(activeCities);
  Collections.reverse(activeCities);

  buildStateCityList();

  e=estados.get(indexState);
  e.buildGraph();
  e.buildChoreopletic(indexEntry);
  e.buildRMChoreopletic(indexEntry);
  c=activeCities.get(indexCity);
  c.isActive=true;

  //UNFOLDING MAPS
  AbstractMapProvider p1=new MapBox.CustomMapBoxProvider("https://api.mapbox.com/styles/v1/"+mboxUser+"/"+mboxStyle+"/tiles/256/{z}/{x}/{y}?access_token="+apiKey);
  mapU = new UnfoldingMap(this, 1281, 41, 639, 1039, p1);
  mapU.zoomTo(12.9);
  mapU.panTo(c.loc);
  debugDisplay = new DebugDisplay(this, mapU);

  //Charts and Lists
  pie1=createGraphics(320, 500, P2D);
  pieChartStateCases(pie1);
  pie2=createGraphics(320, 500, P2D);
  pieChartStateDeaths(pie2);
  list1=createGraphics(320, 500, P2D);
  listTopCities(list1);
  list2=createGraphics(320, 500, P2D);