Share via QR Code
Sharing QR Code

Copy the link below or use the menu on your browser to share.

Dark Mode:
Auto
Light
Dark
A Level international exam / assessment is in progress. Ken's Study Journey hopes you can pass the exam and get outstanding results!

How to Set Up and use Ken's Study Timer?

  Table of Contents

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
My Desk Clock Screen Devices

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.

You also need to have browsers, such as Google Chrome, Firefox or Apple Safari, on both server and screen sides.

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

Windows MAMP htdocs Folder
Move Timer to htdocs Folder

You can directly open the MAMP folder in Applications folder on macOS:

macOS MAMP htdocs Folder

Note that there should be only one layer of folder, depending on your zip software (e.g. WinRAR, 7-Zip).

Correct Folders
Incorrect Folders

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.

config.php File

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.

Get IP Address on Command Prompt

Then, go to Control Panel - Network Settings - IPv4 Configurations to copy the information and type a new static IP address.

Windows Static IP Address

On macOS, you can simply choose "Using DHCP with manual address" and type a new address.

macOS Static IP 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.

Timer Main Interface

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.

Add a New Clock Group

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.

Add Reminders

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:

Parameter Value
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

Parameter Value
edit_type mode
mode "clock" or "timer-reset" * (e.g. clock)

* "reset" must be included when switching to timer.

Change Screen Brightness

Parameter Value
edit_type brightness
brightness A number between 0.0 and 1.0 inclusive (e.g. 0.7)

Change Timer Time

Parameter Value
edit_type 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

Parameter Value
edit_type timer_status
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.

Timer with Apple Shortcut

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.

Timer with Apple Siri

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.

Share this Article: