A Kanban view for Things 3 : Part III – displaying the project-level information
Quite surprisingly, I hadn’t written html code since I completed my PhD in 1996. From 1993 to 1996, I created and maintained our research group webpage. At the time, we were one of the few to actually have sites. Well, it does come back and boy it much easier than anticipated (at least at the current level) 😉
First I got a CSS style sheet document created and leaves only the minimum in the index.htm one. It will become obvious why in a bit. For the purpose of convincing myself that it was doable, I went for a three-column display with a fix header and footer. The mock-up version is displayed below.
It corresponds very well to the initial proposal. You can notice in the left column that I have one project displayed with a URL to the same project in Things. The URL format in Things look like this: things:///show?id=uuid, where uuid is the id of the project in the SQLite3 database. Interestingly, it does open the project in Things but does not automatically switch from the web browser (Safari in my case) to the Things app. Otherwise, it does the job as described. Now the nice thing here (no punt intended) and that it is easy to put all of this in a <a href> statement; it looks like this: <a href=things:///show?id=uuid>Project title</a> (nb tasks) due date inside a
Everything in bold face above constitute information contained in the tuple I have previously extracted (post II). In the meantime, I also discovered the Programming Historian Blog post on creating html file on the fly with Python!
It is simple, using f_write to parse strings either directly or via a str variable (which, yes you saw this coming could be the various elements of my tuple!). Having separated the style elements in a CSS file, I simply need to create on the fly my html within Python once I have extracted the necessary information. Even better, I can open automatically the view using import webbrowser and finishing the main portion of the code with webbrowser.open_new_tab(filename). In this context, one box in the display shown above could look like this:
box1 is the style for the left most box in the CSS file and rowProj is my tuple, containing the information I need out of the Things database. Having everything inside Python (except for the CSS file) make everything nice and easy. Now, putting it all together gives the Kanban-view shown below:
Pretty good, no? The projects are even well ordered by due date…
What is missing at this time:
- For display purposes, I might opt for 4 or 5 columns in the end. I still need to decide
- Related to the above, I need to extract the remaining information from the SQLite database for the other columns.
- Here I will likely use Areas in Things to separate the Mentoring projects from others Upcoming projects (research and writing projects). For every student in my research group, I do create an individual project in Things. So our of 40 or so projects that actually have a due date, at least 15 are mentoring related.
- I could also split the Upcoming category three folds: research, writing and mentoring for better outlook of things on my plate. Not decide yet…
- I will make each column scrollable independently to facilitate visibility (Trello like!)
- Try to make this visually look slightly better if I can 😉
Because of my current schedule (and vacation travel), I do not expect to have completed all of this before the end of the month but my next post on this topic should be to announce version 1.0 and make both the Python code and CSS document available!
Now demonstrated that it is feasible and considering that it only took me a few hours of spare time to get here, imaging what Cultured Code could do, especially with their very polish GUI, if they wanted (or request made heavily by its users)…
Posted on August 14, 2018, in General stuff, Research and Academia, Software, Technology and tagged Cultured Code, e-GTD, GTD, HTML, Kanban, project management, Python, SQLite, task management, task manager, Things 3. Bookmark the permalink. 4 Comments.