FANDOM


It's been a fortnight since my last post, and it is now week 7. Week 5 involved finishing up work for the another module, and I spent week 6 looking at arcane SRS rotation rules, LIBGDX, and programming a Tetris clone while everyone celebrates New Year, but let's not mention that here.

It's the end of week 7 and I finished the UI and logic for showing and controlling states of our devices. Oh, and we switched to CherryPy from Django for a server platform because it is easier to work with.

20130114screencap

Screen capture of UI with sample data (1920 x 1080)

JS

My JavaScript code interfaces with the Python on CherryPy, which forwards the requests to Microsoft Gadgeteer. We just got the platform working a couple of hours ago, so requests from the client get sent all the way successfully to Gadgeteer, and that made Michael very happy =)

The JS currently has two main parts. The first part builds up a rich internal data set to avoid all sorts of nasty DOM element searches and traversal. It does so by transforming units structured like these nested within the children property:

{
    id: "light1-1",
    name: "Bedroom light",
    type: "light",
    state: 1,
    children: []
}

to units like these, with no nesting:

{
    key: "hashed value",
    value: {
        id: id,
        name: name,
        type: type,
        state: state,
        generation: generation,
        relativeId: {
            parent: parentInfo.id,
            ancestor: ancestorInfo.id,
            sibling: siblingInfo.id,
            siblingOfType: siblingOfTypeInfo.id,
            children: childrenInfo.id,
            descendant: descendantInfo.id
        },
        panelId: {
            self: type + '-' + id,
            parent: parentInfo.panelId,
            ancestor: ancestorInfo.panelId,
            sibling: siblingInfo.panelId,
            siblingOfType: siblingOfTypeInfo.panelId,
            children: childrenInfo.panelId,
            descendant: descendantInfo.panelId
        }
    }
}

Second part of the JavaScript initializes the UI and button listeners and changes this internal data representation using that data set, updating the UI and sending commands to the CherryPy server as necessary. Actually both of these parts are executed at the same time so the UI and data builds in tandem. All that fancy stuff took me working full time for the better part of the week to get working, so I'm pretty proud of it.

Next steps

For once in this project I do not have a sure direction on where to proceed next. Sure, I can always improve the UI further, such as providing buttons to collapse those large panels, or implement drag-and-drop, but I think my resources are better spent preparing the API for the next step - continuous sensor polling. For that we need to wrap the JSON content up within another layer with synchronization data, just a unique integer for temporal synchro, and sender's IP for multiple-client access.

As you can probably guess from the screenshot above it is past 1AM as I am writing this, and it's been a very long week, so I will end the report here. See you next week =)