Musings of a Fondue

Speed Test - UI

In the previous post, I used a Raspberry PI to gather a week’s worth of internet speed data.

I have a rough idea of what I want the D3 visualization to look like. My main inspiration is this one by Joseph Nudell where he visualizes his texting habits.

For the user interface I wanted big and fancy buttons and knobs. I searched the interwebs and came across several awesome Photoshop tutorials. My initial plan was to learn from them so that I could create my own custom designs from scratch. Learn I did but for now I will work with the designs from the tutorials and put my focus on the CSS.

  • The power button is based on this tutorial by IconDeposit
  • The slider is based on this tutorial by Nikola Lazarevic
  • The channel knob is based on this tutorial by Photoshop Plus
    • The code for calculating angle of rotation is based on this StackOverflow answer. I tried to write my own from scratch but my brain wasn’t cooperating.

Here they are in action,

  • Power button (works on Chrome, Safari)
    • Completed
  • Channel knob & slider (works on Chrome, Safari, Firefox)
    • WIP
    • Completed

The UI is a work in progress. Updates to come.