Category Archives: Web Development

Time Keeping Automation with TOGGL

For my piano rebuilding business, I do not work by the hour!  I am working on spec projects, or on generally fixed quotes for customer projects.  But it’s nice to know how long a job takes.  On again and off again for the past several years, I’ve used the web service, TOGGL (toggl without an “e”) for the time keeping I’ve done.   On again and off again is a very appropriate description.

When going out to the shop, I’d forget to start the TOGGL task until I was well into it – or not at all.   Coming in from the shop, I’d forget to stop the timer, and then I’d have bad data.    While in the shop, I could generally remember to switch tasks, if I had, in fact, started one.

With a bit of creativity, I automated the starting and stopping of my work timekeeping.   The automation will start a “General Shop Work” time entry when I enter the shop, and stop the current time entry when leaving the shop.   This bit of magic occurs by knowing how many watts of electricity the shop is using.  In other words, my new app senses when I turn the lights on (or off).

This modality was available because I have minute-to-minute consumption data available on a raspberry pi server that collects and reports energy consumption.  So the application was very straightforward and the task was attached to the once-a-minute data collection process.   With a bit more work, I could learn how to query the home automation status, and get the lights on/off status more directly than the energy proxy I am using.

Here’s the python code I wrote:


#!/usr/bin/env python
import sqlite3
import requests
import json


sql = """
		order by ts desc limit 2

conn = sqlite3.connect(DATABASE)
c = conn.cursor()
now = c.fetchone()[0]
before = c.fetchone()[0]

# Check for transition from <200 watts to >200 watts
if now > 200 and before < 200:
	# Start General Shop Work, because the shop lights went on. 
	payload = {'time_entry': {'pid': GENERAL_SHOP_WORK, 'created_with': 'energyToggle'}}
	r ='',auth=(TOGGL_API_TOKEN,'api_token'),data=json.dumps(payload))

if now < 200 and before > 200:
	# Stop the current task, because the shop lights went out. 
	# Get current 
	r = requests.get('',auth=(TOGGL_API_TOKEN,'api_token'))
	if (r.status_code == 200 and r.json()['data'] != None):
		#Stop Current
		url = '' + str(r.json()['data']['id']) + '/stop'
		r = requests.put(url,auth=(TOGGL_API_TOKEN,'api_token'))
		print 'no current entry'


Android Saga App – Mileage tracking

Early in January I heard about the Saga app for Android and iPhone. It bills itself thus: “Record your life automatically and share it effortlessly with the people you care about.”

It will aggregate all of your social media stuff so that you can share EVERYTHING about your online self. Well I didn’t care to share my life in that way, but I have long been looking for a way to automatically track business mileage. Apps that I have tried have not been particularly useful, mostly because I’d forget to push the START button when I head off to an appointment. The Saga app, on the other hand, tracks travel when the phone is on and with me. And it does it without draining the battery too fast.

For my purposes, I just wanted to aggregate Google Calendar data and Saga travel data. The saga app has an option to export raw data in JSON format. I wrote an online utility to process that raw export into a spreadsheet. I’ll be using that to summarize business travel monthly.

If this sounds worthwhile, you may utilize the utility here:

DHTML Menu: Friendly to No-Script Browsers

Earlier I described in my design objectives for a new website, This article describes the menu system used for that site.

My objective was to use a DHTML mouse-over menu to aid navigation and site layout, but to preserve good functionality for browsers which do not support Javascript or have Javascript turned off.

Here’s the demo:

If you view this demo with Javascript disabled, your experience will be much different, but very appropriate.

The demo above is also available here:

The Javascript library I used for this implementation is from BrainJar. I made one modification the the brainjar.js library they present in their demo3 . The modification I made allows for the use of <UL> instead of <DIV> for menu containers.
The menu is implemented using CSS, Javascript (when detected), and ColdFusion. Though ColdFusion is used in these examples, any server-side technology could be used. And in fact no server-side technology is required, but as you will see, the server-side coding creates attractive code, which leads to easy maintenance.

The core code is contained in menu.cfm:

<cfparam name="url.area" default="home">
	// Server side function modifies the
	// class name of the current tab.
	// In this demo, modification is based on url of request.
	function activeTab(vArea){
		// this logic is for demo only
		// should be changed to suit the site architecture.
		if (url.area eq vArea){
			return "Current";
			return "";
<!--- Main Menu Bar --->
	The class of each "a tag" below is modified by the
	value of the function activeTab(area) below.
	The activeTab function returns either 'Current' or ''.
	Thus the "a tag" class is either menuButton or menuButtonCurrent
<div class="menuBar" >
	<a class="menuButton#activetab('home')#"
><a class="menuButton#activetab('document')#"
    onclick="return buttonClick(event, 'documentMenu');"
    onmouseover="buttonMouseover(event, 'documentMenu');"
><a class="menuButton#activetab('community')#"
    onclick="return buttonClick(event, 'communityMenu');"
    onmouseover="buttonMouseover(event, 'communityMenu');"
><a class="menuButton#activetab('contact')#"
Rather than putting out the dhtml menu directly, write it out with
client side script.  In that way, alternate browsers which may have
JS disabled will not see the divs at all.  We have also decluttered the
screens of these browsers if they also do not recognize CSS. We could
do this without coldfusion processing, but by stripping out CR and
TAB and escaping JS code, the menus:  documentMenu.cfm,
communityMenu.cfm, etc. are highly readable.
<cfsavecontent variable="dhtmlMenu">
	<cfinclude template="documentMenu.cfm">
	<cfinclude template="communityMenu.cfm">
	<cfinclude template="communityMenuNewsletters.cfm">
<cfset dhtmlMenu = replace(dhtmlMenu,chr(10),"","all")>
<cfset dhtmlMenu = replace(dhtmlMenu,chr(13),"","all")>
<cfset dhtmlMenu = replace(dhtmlMenu,chr(9),"","all")>

<script language="Javascript">

One of the menu <UL>’s, documentMenu.cfm, is shown here:

<!--- Document Menu --->
<ul id="documentMenu" class="menu"

	<li><a class="menuItem" href="index.cfm?page=content/documents/white_barn_PRUD_CCRs.pdf&area=document">Covenants and Restrictions</a></li>
	<li><a class="menuItem" href="index.cfm?page=content/documents/white_barn_PRUD_bylaws.pdf&area=document">By Laws</a></li>
	<li><a class="menuItem" href="index.cfm?page=documents/communityRules.cfm&area=document">Community Rules</a></li>
	<li><a class="menuItem" href="index.cfm?page=documents/petRules.cfm&area=document">Pet Rules</a></li>


Complete source code for this demo is available here:

And finally, by the way, the pages look fine when viewed on the simplest of browsers, lynx:
A view of the Documents Menu rendered by lynx

Tidy Web Design

Recently I had the chance (volunteer work) to do some web development from the ground up. That’s not part of my everyday work, where I do mostly maintenance on existing web applications. I approached this project with several objectives:

  1. HTML/CSS standards compliant
  2. No Table layout
  3. Attractive, functional layout for screen sizes 800×600 and higher
  4. Javascript DHTML menus which support a good experience in a No Script environment
  5. Support the visually impaired by using resizeable fonts
  6. Provide a good print layout through use of CSS @media selector
  7. Strong use of CSS

Its still a work in progress! I’m not quite there with 1 and 2 above. I need to continue my quest in those areas. However, I’m quite pleased with other aspects of the objectives above. More later. Here’s a view of my work: