Hello there! My name is Ken and I am a Chinese senior high student in Guangdong Country Garden School. Welcome to Ken's Study Journey website and my study stratgies!
With a timer, you can concentrate on your study tasks and study productively within a time limit.
I have also made my personal study timer with some programming knowledge. It is now available for the public to set up and use.
In this tutorial, I am going to teach you how to set up and use my study timer. You can do it without any programming knowledge.
1. Prepare for Devices
The first step is to prepare for some devices for your clock.
There are 2 versions of the clock: Standalone and Server versions.
I usually use the server version at my home bedroom with some old phones acting as clock screens and standalone version on my laptop outside.
You need to prepare for some devices first if you use the server version in your rooms:
- A computer as a server (usually the PC)
- Some (old) phones and tablets (e.g. iPad) as clock screens
These devices must connect to the same WiFi or internal network and the server must have a static IP address.
If you are using iPhone or iPad, you can directly use the built-in Safari browser without downloading additional apps using App Store.
2. Download Files and Software
The second step is to download the code files as well as some server software.
Click the button below to download the code files (.zip). It will be uploaded onto other platforms (e.g. GitHub) soon.Download
Latest Version: 1.0 (Updated on 15 Apr. 2022)
As well as the file, you also need to download and set up some necessary software.
The first one is the HTTP servers and database on the server side. They are Apache/Nginx, PHP and MySQL, but you can use MAMP instead (3 in 1 server) without any programming knowledge.
The second one is Visual Studio Code which is used to edit code files on the server side.
3. Install Server and Set up Server Side
First, you need to set up the HTTP server and database ("Apache/Nginx + PHP + MySQL" or MAMP) on the server computer.
You may want to change the MySQL database password (both username and password are "root" by default). You can search the Internet if you need to change it.
You can then follow the instructions in "readme.txt" file to setup the server.
Then, unzip the downloaded code files and put it into the server's "htdocs" folder. I use MAMP in this tutorial.
You can open the "htdocs" folder with the following steps (Windows):
You can directly open the MAMP folder in Applications folder on macOS:
Note that there should be only one layer of folder, depending on your zip software (e.g. WinRAR, 7-Zip).
Open "config.php" and set your MySQL username and password as well as the root password. The root password is used to prevent unauthorised changes on your clocks on the network.
The default root password is "A1b2C3" (capital A, C and lowercase b). If you need to change the password, open "http://localhost/ken_study_timer/md5.php" to get the MD5 value of your password. Then paste it in the "config.php".
Open your browser and type "http://localhost/ken_study_timer/dbibit.php" to initialise the database on your computer's MySQL app for the first use.
Note: check the HTTP port numbers (80, 8080, 8888) in MAMP settings. Use the corresponding port number on your browsers. For example, type "http://localhost:8080/ken_study_timer/dbibit.php" if you are using port 8080, "http://localhost:8888/ken_study_timer/dbibit.php" if you are using port 8888. Add a colon (:) after "localhost" with your HTTP port number.
Set a Static IP Address
Then set a static IP(v4) address for the server.
You can find tutorials on the Internet, but I briefly teach you here.
First, on Windows computers, press "Windows Logo + R" and type "cmd". Then type "ipconfig" to see the current IP address.
Then, go to Control Panel - Network Settings - IPv4 Configurations to copy the information and type a new static IP address.
On macOS, you can simply choose "Using DHCP with manual address" and type a new address.
The new address should be outside the DHCP (automatic IP address allocation) range to avoid conflicts. For example, you can use "192.168.10.15" while the DHCP allocates 192.168.10.100 to 192.168.10.199
You can now access "http://<server static IP>/ken_study_timer/" on browsers on other devices under the same WiFi. If the following interface can be displayed and the server itself can access other websites (e.g. Google, Baidu), the server setup is successful.
4. Set up Manage Side
Then you can setup the manage side. You can use the server computer itself or other devices on the same WiFi as the manage side.
Type "http://<server static IP>/ken_study_timer/" on the manage side and then click "Manage Side".
Click "Add New Clock Group". Set a group name and a manage password and click "Add". You can host multiple groups of clocks for different places or rooms under the same server.
Then log in the manage side with the same logon details.
You can then add some reminders which can then be displayed on the screen at certain time points.
5. Set up Screen Side
The last step is to set up the screen side using (old) phones or tablets.
Make sure the screen devices are connected to the same WiFi as the server.
Open the browsers and type "http://<server static IP>/ken_study_timer/". Click "Screen Side" and log in with the same logon details.
Then rotate the screen to a horizontal direction without screen rotation lock. Click the button at the top to turn on the Wake Lock to prevent the screen display from turning off automatically.
You can also adjust the text zoom on the browser to a suitable value.
Scroll down the screen to a suitable height until you see the clock screen in the middle.
That's it! You can now control the clock using the manage side. You can use clock and timer, and adjust the brightness.
I usually dim the screen (adjust brightness to 0.7) 15 minutes before sleeping time and turn off the screen (adjust brightness to 0) while sleeping.
Additional Tip: Using API
You can also use APIs to provide additional functions and convenience.
For example, you can control the clocks using Apple Shortcuts and Siri.
Just use GET or POST requests (in a form, not JSON format) on the URL "http://<server static IP>/ken_study_timer/api/post.php" with the following parameters:
|name||The Group Name|
|password||The Manage Password|
|edit_type||mode, brightness, timer_time, timer_status|
Then there is an additional parameter for different circumstances.
Change between Clock and Timer
|mode||"clock" or "timer-reset" * (e.g. clock)|
* "reset" must be included when switching to timer.
Change Screen Brightness
|brightness||A number between 0.0 and 1.0 inclusive (e.g. 0.7)|
Change Timer Time
|hr||Hour between 0 and 99 inclusive (e.g. 1)|
|min||Minute between 0 and 59 inclusive (e.g. 45)|
|sec||Second between 0 and 59 inclusive (e.g. 0)|
Start or Pause Timer
|status||start or pause (e.g. start)|
Implement with Apple Shortcuts and Siri
A good example is to implement with Apple Shortcuts so that the commands can also be used with Siri and on Apple Watch to control the clocks conveniently.
Here, I use the built-in API module with POST requests and Forms along with some parameters.
When I go to bed, say "Hey, Siri! Turn off Desk Clock Screen." on Apple Watch. The watch will turn off the clocks as long as it is connected to the same WiFi as the server computer.
You can also add other shortcuts like dimming and turning on clock screens.
Using Standalone Version
There is a "standalone" folder in the zip package. You just need to open the index.html on a browser (e.g. Chrome), adjust the browser screen size and zoom to use it.