{"id":20646497,"url":"https://github.com/gakuto1112/tabletclockserver","last_synced_at":"2026-04-13T00:16:52.706Z","repository":{"id":119540851,"uuid":"560855333","full_name":"Gakuto1112/TabletClockServer","owner":"Gakuto1112","description":"The web-based system which transforms your unused tablet devices into useful table clocks.","archived":false,"fork":false,"pushed_at":"2024-10-09T07:04:29.000Z","size":768,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-17T09:45:06.790Z","etag":null,"topics":["clock","css","html","humidity","javascript","nodejs","raspberry-pi","temperature","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Gakuto1112.png","metadata":{"files":{"readme":".github/README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-02T12:23:27.000Z","updated_at":"2024-10-09T07:04:26.000Z","dependencies_parsed_at":"2023-10-01T12:45:46.021Z","dependency_job_id":"d1399afb-a966-4dc0-8515-a9787e9afbd0","html_url":"https://github.com/Gakuto1112/TabletClockServer","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gakuto1112%2FTabletClockServer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gakuto1112%2FTabletClockServer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gakuto1112%2FTabletClockServer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gakuto1112%2FTabletClockServer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gakuto1112","download_url":"https://codeload.github.com/Gakuto1112/TabletClockServer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242721296,"owners_count":20174799,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clock","css","html","humidity","javascript","nodejs","raspberry-pi","temperature","typescript"],"created_at":"2024-11-16T16:25:58.106Z","updated_at":"2026-04-13T00:16:52.263Z","avatar_url":"https://github.com/Gakuto1112.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Language: 　**English**　|　[日本語](./README_jp.md)\n\n# TabletClock\nThis web-based system transforms your unused tablet devices into useful table clocks.\n\n![Main image](./README_images/main.jpg)\n\n## Background\nWhen I cleaned up on my desk and I found that I made more free space than I expected on it. Then, I thought that I put something like [Google Nest Hub](https://store.google.com/product/nest_hub_2nd_gen) and saw its product page. However, I realized that its functions are not enough for me (I want to know the temperature and humidity in my room), and I came to want to make a similar system by my self.\n\nInstead of Google Nest Hub, I considered that I get a small display device (with touch function) and show the screen from [Raspberry Pi](https://www.raspberrypi.com/). However, I thought that it was expensive to purchase a new display device just to show the clock. After thinking about it a lot, I remembered that I have a tablet device that I don't use very often (at home) and decided to create this system to make it more effective.\n\n## Features\n### Already implemented\n- Shows current date and time.\n- Shows temperature and humidity from sensors.\n  - Shows temperature and humidity changes over the last 24 hours with line graph.\n  - Shows current discomfort index.\n- Supports dark mode.\n  - Changes light or dark mode depending on current brightness.\n\n### Plan to be implemented\n- Shows current wether and wether forecast.\n- Shows upcoming schedules from [Google Calendar](https://calendar.google.com).\n- Changes the background into your favorite images.\n\n## Things needed\n- [Raspberry Pi 4](https://www.raspberrypi.com/products/raspberry-pi-4-model-b/) x1\n  - (Works on older Raspberry Pi, but newer ones are more stable.)\n  - [AHT21B (temperature and humidity sensor)](https://akizukidenshi.com/catalog/g/gK-17394/) x1\n  - [MCP3208-CI/P (A/D converter)](https://akizukidenshi.com/catalog/g/gI-00238/) x1\n  - [CdS cell (brightness sensor)](https://akizukidenshi.com/catalog/g/gI-00110/) x1\n  - [10kΩ resistor](https://akizukidenshi.com/catalog/g/gR-25103/) x1\n  - Circuit board ([bread board](https://akizukidenshi.com/catalog/g/gP-05294/), [universal circuit board](https://akizukidenshi.com/catalog/g/gP-03229/), etc.)\n  - Wire ([jumper wire](https://akizukidenshi.com/catalog/g/gC-05159/), etc.)\n- A device to show clock\n  - Recommended to use tablet devices.\n  - For iPad, use [Safari](https://www.apple.com/safari/).\n  - Cannot use iPhone (will not go to full screen).\n\n## Schematic\n![schematic](./README_images/raspberry_pi_curcuit_diagram.drawio.svg)\n\n## Setup\n### Setup Raspberry Pi and circuit\n1. Setup your Raspberry Pi. You need to make the bash shell (or other shells) available.\n2. Make the circuit refer to the [schematic](#schematic).\n2. Setup your Raspberry Pi.\n\n### Setup the system\n1. Install [Node.js](https://nodejs.org) by typing following commands on the shell (run one line at a time. `$` is not part of the commands).\n   ```sh\n   $ sudo apt update\n   $ sudo apt install nodejs npm\n   ```\n\n2. Install Node.js version manager (n).\n   ```sh\n   $ sudo npm install n -g\n   ```\n\n3. Install Node.js v20.\n   ```sh\n   $ sudo n 20\n   ```\n\nFrom here, there are 2 ways to install.\n\n#### A - The way to install from npm\n4. Create a new directory for the system.\n   ```sh\n   $ mkdir TabletClock\n   ```\n\n5. Install the system.\n   ```sh\n   $ npm install @gakuto1112/tablet-clock\n   ```\n\n6. Run the system.\n   ```sh\n   $ npx tablet-clock\n   ```\n\n#### B - The way to install from this repository\n4. Clone this repository.\n   - If your Raspberry Pi doesn't have [Git](https://git-scm.com/) system, you need to install it.\n   ```sh\n   $ git clone https://github.com/Gakuto1112/TabletClockServer.git\n   ```\n\n5. Install dependencies of the system.\n   ```sh\n   $ npm install\n   ```\n\n6. Prepare source files of the system.\n   ```sh\n   $ cd ./src/shell/\n   $ sh ./update_global_files.shell\n   $ sh ./build.sh\n   $ cd ../../\n   ```\n\n7. Run the system.\n   ```sh\n   $ npm start\n   ```\n\n---\n\n8. After running the system, you can access the tablet clock page on your browser at `http://\u003csystem_local_ip\u003e:5000`.\n\n## How to use\n### The side tab\nThe side tab will be appeared when you tap on the background. It will be closed automatically when you don't touch it for a while.\n\n![The side tab](./README_images/side_tab.jpg)\n\nThere are four buttons in it.\n\n#### 1 - Open/Close hamburger menu button\nOpens/Closes [hamburger menu](#the-hamburger-menu).\n\n#### 2 - Connect/Disconnect server button\nConnects/Disconnects the server. When the client is connecting to the server, a check mark (✓) will be appeared. The client will try to connect to the server when loading the page, so you don't have to click this button every time when loading the page.\n\n#### 3 - Enter/Exit full screen button\nEnters/Exits full screen mode. It will be appeared in translucent if your device or browser doesn't support full screen mode.\n\n#### 4 - Enter/Exit keep awake button\nEnters/Exits keep awake mode. The clock can prevent your device from entering sleep when it enabled. It will be appeared in translucent if your device or browser doesn't support full screen mode, or you use `http` scheme (not `https`).\n\n### The hamburger menu\nThe hamburger menu will appeared when you click [open/close hamburger menu button](#1---openclose-hamburger-menu-button). You can change settings of the tablet clock page from here. These settings are stored in your device and applied to the your device only.\n\n![The hamburger menu](./README_images/hamburger_menu.jpg)\n\n#### Display mode\nChanges the display mode (light mode or dark mode). There are four options.\n\n##### Light mode\nAlways uses light mode.\n\n##### Dark mode\nAlways uses dark mode.\n\n##### System auto\nUses light mode or dark mode depending on the display mode of your os/browser.\n\n##### Sensor auto\nUses light mode or dark mode depending on the sensor output.\n\n## Npm commands\nThis package includes some npm commands. These commands are available when cloning this repository directory. You don't have to use these commands when installing from npm. These commands must be run at the root directory of this package. You needs to run the following commands when you run npm commands for the first time:\n\n```sh\n$ cd ./src/shell/\n$ sh ./update_global_files.shell\n$ sh ./build.sh\n```\n\n### npm start\nLaunches the system. It is equivalent to `npx tablet-clock` when installing from npm.\n\n### npm run build\nBuilds the system.\n\n### npm run debug\nLaunches the system with debug mode. Also builds the system before launching.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgakuto1112%2Ftabletclockserver","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgakuto1112%2Ftabletclockserver","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgakuto1112%2Ftabletclockserver/lists"}