/

Building an iPad Dashboard with JavaScript

Building an iPad Dashboard with JavaScript

In this blog post, I will walk you through the process of building a signups counter for the JavaScript Course using JavaScript. This counter allows me to keep track of how many people have signed up for the course, which is open from Nov 15 to Nov 22.

Although this counter may seem unnecessary, I often find myself working on such projects when I want to procrastinate and avoid important tasks.

Initially, I considered different approaches, such as creating an iOS widget with JavaScript using Scriptable. However, I decided to keep it simple and opted for a web page instead. By keeping the web page open on my iPad, I can conveniently view it from my desk or any other location.

To prevent the display from sleeping, I set the iPad to never sleep and configured the page to automatically refresh every 2 minutes. The advantage of using a web page is that I can access it from any device, including the iPad, iPhone, or Mac.

To fetch the data I need, I developed a Node.js program. The first step was to create a function to retrieve the required data:

1
2
3
4
5
6
7
const getData = async () => {
 return new Promise((resolve, reject) => {
 let count = 0
 //retrieve the count
 resolve(count)
 })
}

I made this function asynchronous due to the inclusion of a fetch request, which is likely to be necessary in your own implementation as well.

For those curious, I store all the signups in an Airtable record. Therefore, inside the getData() function, I included the code required to fetch the count from Airtable.

Next, I created a simple Express server to serve an HTML page displaying the count prominently in the center:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const express = require('express')
const app = express()

app.get('/', async (req, res, next) => {
 const count = await getData()
 const html = `
 <html>
 <head>
 <!-- refresh every 2 minutes -->
 <meta http-equiv="refresh" content="120">
 <!-- allow full screen on iOS -->
 <meta name="apple-mobile-web-app-capable" content="yes">

 <link href="https://fonts.googleapis.com/css2?family=Arvo:[[email protected]](/cdn-cgi/l/email-protection);500;600;700&amp;display=swap" rel="stylesheet" media="all">
 <style>
 html,
 body {
 font-family: Arvo,Helvetica,Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Noto Color Emoji,Segoe UI Symbol,Android Emoji,EmojiSymbols,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Noto Sans,sans-serif;
 margin: 0;
 font-size: 200px
 }
 h1 {
 display: grid;
 place-items: center;
 height: 100vh;
 }
 @media (prefers-color-scheme: dark) {
 body {
 filter: invert(100%);
 background-color: #000;
 }
 }
 </style>
 </head>
 <body>
 <h1>${count}</h1>
 </body>
 </html>
 `
 res.end(html)
})

const listener = app.listen(3000)

By running this program locally on your computer, you can access it from devices connected to the same Wi-Fi network. Alternatively, you can use a localhost tunnel service. If you prefer, you can also host the web page on the internet.

In my case, I hosted the app on a server I use for my Node scripts. This allows me to access it from anywhere, even when I’m on a 4G network. Additionally, if desired, I can also AirPlay the dashboard to an Apple TV, which would display the signups count on a large television screen.

By following these steps, you too can build your own dashboard for the iPad using JavaScript. It’s a practical way to keep track of important metrics or simply indulge in some productive procrastination.

Tags: JavaScript, dashboard, iPad, web development, Node.js, Express