Interface Development #1

I’ve started building what will be my Foodprint Guide.

Styling the sliders was done with pure CSS and was not too difficult.

Currently I’m just trying to get an event handler to recognise the range slider amounts and output a corresponding value on the page. Besides some jquery maths that will interpret those numbers, that will be the hardest learning done.

Here’s how it looks – it will be changed. I’m going to keep the maths visible, perhaps in one version, to be transparent about what’s going on and keep the logic traceable. It should add an element of fun to an otherwise very simple app too.

Starting with the contingency plan

My app includes three basic elements – choosing food amounts, seeing those amounts appear on a plate, and seeing how many earths would be needed if we all ate that.

There is one step in this process which is not strictly needed. The plate. It is mainly a visual confirmation to see what a meal looks like. While the data for the plate will be necessary, the visual representation isn’t. It won’t be very hard to build (I have a plan to use css size values on various ingredients), but nevertheless I’ll leave it to last.

After getting the range inputs outputting to javascript, I’ll work on getting the basic maths working. It’ll work like this:

• inputs from food sliders given multipliers. These numbers control the size of food sprites on the plate.
  • Brocolli: 2; steak: 10;
• total figure from food sliders multiplied by foodmiles.
  • foodmiles: minimum doesn’t multiply food slider values. Maximum multiplies them by five.
• the resulting impact figure used to calculate an integer used to control the css width of a div containing the earths in a row (not vertical, as previously shown.

It would look something like this: ((foods * food-impacts) * foodmiles) = total impact.

State of the UI