Table of Contents
- Introduction
- Features
- Media
- Usage
- Login
- Deployment
- License
This is yet another web TODO app but designed for 3.5" inch screen and Raspberry pi. The idea is for this device to serve as task tracking device, replacing regular notebook and having to write stuff with pen. Editing tasks on paper is, let's say, not user friendly. As I'm a person who likes to write tasks down physically, I figured this project would make my life easier.
- Create,modify,delete todo tasks on your raspberry pi screen via stylus
- Create subtasks
- Assign tags to tasks
- The main tab presents tasks scheduled for current day, the rest is in the backlog
- If today's task was not done, it will be automatically scheduled for the next day
- Tasks can be freely moved between active and backlog sections
- Designed for touch screen, input is handled by virtual keyboard
- Tasks&subtasks can be synced with Google Task app on android/ios - there is a checkbox to enable it during task creation. All tasks created in TODO TERMINAL are then created in Google Tasks. If Task is completed, it gets marked as such in Google Tasks app and vice versa.
- History tab for historical data
- Filter active tasks by tag
- Login screen
- xp for completed tasks and subtasks + gaining levels!
- Open main menu
- Tap on 'New'
- New window will be shown
-
Set due date (1), check whether this task should sync with Google Tasks or not (2), set title (3), description (4), add at least 1 tag (5)
-
Accept by clicking 'Save' (6)
-
If everything goes well, the main page (current tab) will be shown
Tasks with due date set to today's date are always displayed under 'Current' tab. It is the main page of the app.
- Go to current tab or backlog and focus on task for which subtask needs to be added
- Tap on [A] button standing for 'Action'
- Select 'add subtask'
- New subtask page will be shown with only 1 field - subtask title
-
Specify the title and accept by clicking 'Save'
-
The main page (current tab) will be shown. The Subtask will be shown as a checkbox under the specific task. To expand Task, click on task's title.
To complete subtask, simply check the corresponding checkbox. The subtask will dissapear from the task.
To complete a task, expand the Action menu [A] and select "Complete". Page will be reloaded.
XP points are given everytime a subtask or task is completed. When the bar is fully filled, level is increased and xp points go back to 0 just to be gained again to get another level. Pure fun.
To update a task, click on [A] Action menu and select Edit. New window will be shown - update title,description,due date and tags. The only thing that cannot be updated is Google Tasks checkbox.
Subtask cannot be updated. To update, mark subtask as complete and then add it again, updated.
Click on Action [A] menu to open it and then select 'Delete'.
Task can be deleted from current,backlog and history tabs.
Subtask cannot be deleted per say, it can be completed. So if you need to make subtask dissapear, just complete it.
Once you have some tasks in place with various tags, you can filter them to show only those, related to selected task.
- Go to Filter window by clicking on Action [A] menu and selecting Filter
- Select tags you want to show tasks related to. If you want to show all, uncheck all
- Apply
- Main page (current tab) will be shown. It will have '*' symbol in tab's title to indicate that filter is ON.
A task can be moved to the next day if it is known that it won't be done in the current day. To do so, go to Action [A] menu and select 'Todo tomorrow'
A task can be moved to backlog if will be done in unspecified future. By doing that, 300 days will be added to task's due date.
Go to Action [A] menu and select '-> backlog'
Rest API experience needed.
You need to provide 4 things in order to enable Google Task sync: GOOGLE_SECRET,GOOGLE_CLIENT_ID,GOOGLE_REFRESH_TOKEN,GOOGLE_TASK_LIST_ID
Those are specified in views.py, line 25.
How to obtain GOOGLE_SECRET,GOOGLE_CLIENT_ID?
https://developers.google.com/identity/protocols/OAuth2WebServer?authuser=0
Paragraph:Obtaining OAuth 2.0 access tokens
How to obtain GOOGLE_REFRESH_TOKEN?
This is described under link: https://developers.google.com/identity/protocols/OAuth2WebServer?authuser=0
paragraph: Step 5: Exchange authorization code for refresh and access tokens
Response will contain both access_token and refresh_token. Refresh token is what you need here.
How to obtain GOOGLE_TASK_LIST_ID?
- create a new list in Google Tasks app
- fetch all tasklists via https://www.googleapis.com/tasks/v1/users/@me/lists GET call (do it manually via Postman or similar tool)
- get tasklist id that you want and specify it in views.py
- create a task on device with Google Task sync enabled
- make sure the task shows up in Google Tasks app on your device or web (if setup was done correctly)
- create task on device with Google Task sync enabled
- make sure the task shows up in Google Tasks app on your device or web
- finish task in Google Tasks app
- go to menu on device
- Select 'Sync'
- Task on device will be marked as completed after the sync is done correctly & moved to history tab
- create task in Google Tasks app
- create subtasks if you need to
- back to device, expand menu and select Sync option
- Google Task tasks (and subtasks) will be imported - those will have tag: gtask_import
- create task on device with Google Task sync enabled
- make sure the task shows up in Google Tasks app on your device or web
- finish task on device, from the current tab
- task will be finished on device & moved to the history tab and completed in the Google Tasks app
Login screen is the first screen that user sees. Login is required to view main app. Login is based on a simple, yet sufficient for such project mechanism: there are 8 buttons and 4 of them need to be tapped in a correct order.
Default combination is this:
It can be modified in views.py file, line 44:
find string: L O G I N S E T
set values for: expected_number_0 expected_number_1 expected_number_2 expected_number_3
*NOTE: a number is required but in a form of string. Default: '6','7','1','1'
The values: 6,7,1,1 are passed from login.js script and those are defined in login.html template:
<button onclick="loginChallengeClicked(1);" class="login-challenge-b1">?</button>
<button onclick="loginChallengeClicked(2);" class="login-challenge-b2">?</button>
<button onclick="loginChallengeClicked(3);" class="login-challenge-b3">?</button>
<button onclick="loginChallengeClicked(4);" class="login-challenge-b4">?</button>
<button onclick="loginChallengeClicked(5);" class="login-challenge-b5">?</button>
<button onclick="loginChallengeClicked(6);" class="login-challenge-b6">?</button>
<button onclick="loginChallengeClicked(7);" class="login-challenge-b7">?</button>
<button onclick="loginChallengeClicked(8);" class="login-challenge-b8">?</button>
So after you decide which 4 buttons and in which order are required for login, just update line 245 in views.py with your selected values corresponding to buttons from login.html.
To build a todo device, running this todo-terminal software you'll need:
- Raspberry Pi (I used model 3)
- 3.5" touch screen for Raspberry Pi (I used one from Waveshare)
The use case is this:
- the TODO TERMINAL flask app is started on raspberry pi boot
- Chromium browser starts on raspberry pi boot in kiosk mode and in fullscreen
- Chromium's start page is set to localhost:8787 which is the app's default address
- TODO TERMINAL is ready to be used
For detailed instructions how to build such device go to Hackster.io write up: Interactive todo list that syncs with Google Tasks
Licensed under MIT