From the disheveled desk of Nathan Bak – Page 9 – Content may or may not also be disheveled

2016-02-14 12.18.45
With Christmas came the discovery that we have a lot of portable electronic devices including (but not limited to):

3 cell phones
4 Kindle Fire tablets (assorted models)
1 Nook e-reader
2 3DS XL gaming systems
3 Fitbit pedometers
4 laptop computers
1 TI-84 Plus C Silver Edition Graphing Calculator

Each device came with a means by which it can be connected to a wall outlet so that the battery can be charged. This led to having devices perched in random places wherever a free outlet could be found and of course nobody could find their device when it was desired and the correct type cord could never be located when it was needed most direly.

So I built a charging station with to provide a home for various gadgets. There are several shallow drawers that can each hold an electronic device and a shelf on the bottom which can hold a laptop.

The plywood body and solid trim are birch and the drawer handles were cut from some scrap oak that was leftover from another project. Because I wanted this to be a fast and cheap project, purchasing fancy drawer hardware wasn’t really an option so I sanded some poplar and found it to make serviceable drawer guides.

The middle portion of the piece is conveniently at the same height as a wall outlet and there is a smaller shelf there on which fit a couple multi-port USB charging devices. From there cords are routed to all the drawers above and the laptop shelf below. Most of the cords end with USB Micro-B plugs since that is what is used by most of the devices, but also we have a USB Mini-B for the calculator, the proprietary chargers for the 3DS systems, an extra power supply for the laptop, and the funky Fitbit Flex charging cable.

I meant to stain the wood, but it got put into use before I had the opportunity. Devices still go missing occasionally, but much less frequently than before. There are no more battles over cables and so devices are more likely to be charged. Once again we have free outlets in our home.

2016-02-14 13.49.18

A less obvious benefit is the ease with which my wife or I can assess which devices are in use. This is useful because there are rules which the children are expected to follow. We haven’t had any major problems with kids abusing screen privileges. When it’s bedtime and devices are to be put away until the next day, it is simple the check that everything is where it should be.

I expect that we shall continue to have more portable electronic devices appear in our home and need charging. Building the charging station was a quick, cheap, and fun way to address our current needs and we will evolve and adapt with what the future brings.

When I was about six, I wanted a digital watch. I still thought they were, as Douglas Adams would phrase it, “a pretty neat idea”. I actually wasn’t that interested in having ready access to a time device, but rather I wanted a watch with a game on it. Many kids my age desired a watch with Pac-Man, but I wanted a watch with a top-down shooter like Space Invaders. Of course, like many childhood desires for immediate gratification, I was thwarted by my mother.

My father liked to build things with electronics and over the years he had produced various digital clocks packaged in Radio Shack plastic cases. Thus I managed to be sufficiently informed of the time without having learned to read a traditional, analog clock. I saw no problem with the status quo, but my mother saw this deficiency as a flaw in my education. After various whining, complaining, and fussing on my part and unyielding patience on the part of my mother, an agreement was reached. Once I mastered reading an analog clock (and my mother was clear I couldn’t just have a general idea about the process), I would be permitted to purchase the desired digital device.

I learned. I got the watch. I owned a few digital watches during the subsequent years. Then Swatches became en vogue and so of course I jumped on that bandwagon. Here I benefited from my mother’s insistence of mastery because most Swatches didn’t have tick marks or numbers. I soon discovered that I preferred the analog face to a digital readout–to me the progression 60 minutes makes more sense when displayed in a circular fashion. Since then, I have generally not worn digital watches.

Last night as I was going to sleep, I was thinking about how in the web world that digital displays are much more prevalent on web pages than analog. So for fun, this morning I created a very simple, analog clock that can be displayed on a web page.

There are three basic technologies involved in my primitive clock: HTML, JavaScript, and SVG (Scalable Vector Graphics). Here’s what an HTML file looks like that displays the clock (with the important parts in bold):

<html>
    <head>
        <!-- I downloaded jQuery from http://code.jquery.com/jquery-2.2.0.min.js-->
        <script src="jquery-2.2.0.min.js"></script>
        <script src="clock.js"></script>
        <title>Analog Clock</title>
    </head>

    <body>

        <div class="clock"></div>

        <script>
            clock();
        </script>

    </body>
</html>

All the HTML really does is pull in the JavaScript goodness and kick off the clock() function that puts the clock into the “div” element. I used jQuery to make it easier to find and modify various elements.

Below is the clock.js content. There are some “magic” numbers: 300 is both the height and width and 150 is the midpoint (both vertical and horizontal). The 1000 the 1000 milliseconds (one second) interval to wait between updates.

function clock() {
    setupClock();
    updateClock();
    window.setInterval(function(){ updateClock(); }, 1000);
}

var radius = 120;

function setupClock() {
    var svg = "<svg class='clockSvg' viewBox='0 0 300 300' width='300' height='300' >" +
        "<circle class='circle' cx='150' cy='150' r='50' stroke='black' stroke-width='2' fill='none' />" + 
        "<line class='hourHand' x1='150' y1='150' x2='0' y2='150' style='stroke:rgb(0,0,0);stroke-width:2;' />" +
        "<line class='minuteHand' x1='150' y1='150' x2='150' y2='0' style='stroke:rgb(0,0,0);stroke-width:2;' />" +
        "<line class='secondHand' x1='150' y1='150' x2='150' y2='0' style='stroke:rgb(0,0,0);stroke-width:1;' />" +
        "</svg>";
    $('.clock').html(svg);
    
    $('.circle').attr('r', radius);
    
    var now = new Date();
    updateSecondHand(now.getSeconds());
    updateMinuteHand(now.getMinutes());
    updateHourHand(now.getHours(), now.getMinutes());
}

function updateClock() {
    var now = new Date();
    var seconds = now.getSeconds();
    
    updateSecondHand(seconds);
    
    if (seconds == 0) {
        updateMinuteHand(now.getMinutes());
        updateHourHand(now.getHours(), now.getMinutes());
    }
};

function updateSecondHand(seconds) {
    var degrees = 6 * seconds - 90;
    updateHand('secondHand', degrees, .9 * radius);
}

function updateMinuteHand(minutes) {
    var degrees = 6 * minutes - 90;
    updateHand('minuteHand', degrees, .9 * radius);
}

function updateHourHand(hours, minutes) {
    hours %= 12;
    hours += minutes/60;
    var degrees = 30 * hours - 90;
    updateHand('hourHand', degrees, .7 * radius);
}

function updateHand(hand, degrees, length) {
    var rads = degrees / 180 * Math.PI;

    x2 = parseInt(150 + length * Math.cos(rads));
    y2 = parseInt(150 + length * Math.sin(rads));                
    
    $('.' + hand).attr('x2', x2);
    $('.' + hand).attr('y2', y2);
}

Drawing a clock face with SVG is simple–it is just a circle and some lines and that is what the setupClock() function does. All the various “update” functions do is move one of the ends of each of the lines.

After I put this together, I did a quick search for “svg clock” and of course found many fancier, more complicated implementations. But I made this one and I don’t need numbers or tick marks or anything else–thanks to my mother . . .