A Kanban view for Things 3 : Part III – displaying the project-level information

Almost there!

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.

MockupScreenIt 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

statement.

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: 

Capture d_écran 2018-08-14 à 15.03.34

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:

KanbanView0.2b.jpg

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)…

5 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.