I have a basic processing sketch rendering in the browser (Firefox). However, the geo-data is not rendering in the browser yet. The solution? Start with a very simple processing sketch that plots one ride, then start building from there. Also, call Yang, Amit or Jer Thorp.
- learn how canvas works
- sprinkle in codeacademy tuts
- get one ride rendered in processing to show in the browser (data?)
Loading processing sketches
Processing.js example, Ask Ken, doing much of what we want on the front-end
Elevation processing code
Basics of Canvas—Processing.js is a framework for canvas, so we shouldn’t have to do additional things in the web-browser defining the canvas; it’s all done in processing.
Simple processing sketch works in Firefox and Safari
Note: sketch does not work in Chrome, but could later with some troubleshooting with the help of ErisDS; for now, we will test primarily in Firefox.
In dropbox >> thesis >> processing >> hello_web >> hello-web.html
One map image is ready to test in processing.
Does not display the image when image is native to the processing file. Need to research. (I think the image should be displayed in HTML)
- get image to display
- get canvas element to display over the entire background
scale canvas element to fit page: Stackoverflow, Automatically scale the HTML5 canvas element to fit the page
related: Stackoverflow, Center both vertically and horizontally
- start experimenting with width and height options to size with browser size (determined in processing or in canvas markup)
Possibly something like this in Processing:
- look into centering the map on the page