Building a City Hall Clock App for macOS: A Comprehensive Guide

rezmoss

Rez Moss

Posted on September 6, 2024

Building a City Hall Clock App for macOS: A Comprehensive Guide

Ready to build a cool City Hall Clock app for your Mac? Great! We're going to create an app that sits in your menu bar, chimes every 15 minutes, and even counts out the hours. Let's break it down step by step, and I'll explain every part of the code so you can understand what's going on.

Project Overview

Our City Hall Clock app will:

  • Display a clock icon in the macOS menu bar
  • Chime every 15 minutes
  • Chime the number of hours at the top of each hour
  • Provide a "Quit" option in the menu bar
  • Run as a proper macOS application without opening a terminal window

Setting Up the Project

First things first, let's set up our project:

  1. Create a new directory:
   mkdir CityHallClock
   cd CityHallClock
Enter fullscreen mode Exit fullscreen mode
  1. Initialize a new Go module:
   go mod init cityhallclock
Enter fullscreen mode Exit fullscreen mode
  1. Install the required dependencies:
   go get github.com/getlantern/systray
   go get github.com/faiface/beep
Enter fullscreen mode Exit fullscreen mode

The Main Code

Now, let's create our main.go file and go through each function:

package main

import (
    "bytes"
    "log"
    "os"
    "path/filepath"
    "time"

    "github.com/faiface/beep"
    "github.com/faiface/beep/mp3"
    "github.com/faiface/beep/speaker"
    "github.com/getlantern/systray"
)

var (
    audioBuffer *beep.Buffer
)

func main() {
    initAudio()
    systray.Run(onReady, onExit)
}

// ... (other functions will go here)
Enter fullscreen mode Exit fullscreen mode

Let's break down each function:

1. main() Function

func main() {
    initAudio()
    systray.Run(onReady, onExit)
}
Enter fullscreen mode Exit fullscreen mode

This is where our app starts. It does two important things:

  1. Calls initAudio() to set up our chime sound.
  2. Runs our systray app, telling it what to do when it's ready (onReady) and when it's quitting (onExit).

2. initAudio() Function

func initAudio() {
    execPath, err := os.Executable()
    if err != nil {
        log.Fatal(err)
    }
    resourcesPath := filepath.Join(filepath.Dir(execPath), "..", "Resources")
    chimeFile := filepath.Join(resourcesPath, "chime.mp3")

    f, err := os.Open(chimeFile)
    if err != nil {
        log.Fatal(err)
    }
    defer f.Close()

    streamer, format, err := mp3.Decode(f)
    if err != nil {
        log.Fatal(err)
    }
    defer streamer.Close()

    audioBuffer = beep.NewBuffer(format)
    audioBuffer.Append(streamer)

    err = speaker.Init(format.SampleRate, format.SampleRate.N(time.Second/10))
    if err != nil {
        log.Fatal(err)
    }
}
Enter fullscreen mode Exit fullscreen mode

This function sets up our audio:

  1. It finds where our app is running and locates the chime sound file.
  2. Opens the MP3 file and decodes it.
  3. Creates an audio buffer with the chime sound.
  4. Initializes the audio speaker.

If anything goes wrong (like not finding the sound file), it'll log the error and quit.

3. onReady() Function

func onReady() {
    systray.SetIcon(getIcon())
    systray.SetTitle("City Hall Clock")
    systray.SetTooltip("City Hall Clock")

    mQuit := systray.AddMenuItem("Quit", "Quit the app")

    go func() {
        <-mQuit.ClickedCh
        systray.Quit()
    }()

    go runClock()
}
Enter fullscreen mode Exit fullscreen mode

This function sets up our menu bar icon:

  1. Sets the icon (using getIcon()).
  2. Sets the title and tooltip.
  3. Adds a "Quit" option to the menu.
  4. Starts listening for when the "Quit" option is clicked.
  5. Starts running our clock (in a separate goroutine so it doesn't block).

4. onExit() Function

func onExit() {
    // Cleanup tasks go here
}
Enter fullscreen mode Exit fullscreen mode

This function is called when the app is quitting. We're not doing anything here, but you could add cleanup tasks if needed.

5. runClock() Function

func runClock() {
    ticker := time.NewTicker(time.Minute)
    defer ticker.Stop()

    for {
        select {
        case t := <-ticker.C:
            if t.Minute() == 0 || t.Minute() == 15 || t.Minute() == 30 || t.Minute() == 45 {
                go chime(t)
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

This is our clock's "heart":

  1. It creates a ticker that "ticks" every minute.
  2. In an infinite loop, it checks the time every minute.
  3. If it's the top of the hour or quarter past, it triggers the chime.

6. chime() Function

func chime(t time.Time) {
    hour := t.Hour()
    minute := t.Minute()

    var chimeTimes int
    if minute == 0 {
        chimeTimes = hour % 12
        if chimeTimes == 0 {
            chimeTimes = 12
        }
    } else {
        chimeTimes = 1
    }

    for i := 0; i < chimeTimes; i++ {
        streamer := audioBuffer.Streamer(0, audioBuffer.Len())
        speaker.Play(streamer)
        time.Sleep(time.Duration(audioBuffer.Len()) * time.Second / time.Duration(audioBuffer.Format().SampleRate))

        if i < chimeTimes-1 {
            time.Sleep(500 * time.Millisecond)  // Wait between chimes
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

This function plays our chimes:

  1. It figures out how many times to chime (once for quarter-hours, or the number of the hour at the top of the hour).
  2. It then plays the chime sound that many times, with a short pause between chimes.

7. getIcon() Function

func getIcon() []byte {
    execPath, err := os.Executable()
    if err != nil {
        log.Fatal(err)
    }
    iconPath := filepath.Join(filepath.Dir(execPath), "..", "Resources", "icon.png")

    // Read the icon file
    icon, err := os.ReadFile(iconPath)
    if err != nil {
        log.Fatal(err)
    }

    return icon
}
Enter fullscreen mode Exit fullscreen mode

This function gets our menu bar icon:

  1. It finds where our app is running.
  2. Locates the icon file in the Resources directory.
  3. Reads the icon file and returns its contents.

Creating the macOS Application Bundle

To make our app a proper macOS citizen, we need to create an application bundle. This involves creating an Info.plist file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleExecutable</key>
    <string>CityHallClock</string>
    <key>CFBundleIconFile</key>
    <string>AppIcon</string>
    <key>CFBundleIdentifier</key>
    <string>com.yourcompany.cityhallclock</string>
    <key>CFBundleName</key>
    <string>City Hall Clock</string>
    <key>CFBundlePackageType</key>
    <string>APPL</string>
    <key>CFBundleShortVersionString</key>
    <string>1.0</string>
    <key>CFBundleVersion</key>
    <string>1</string>
    <key>LSMinimumSystemVersion</key>
    <string>10.12</string>
    <key>LSUIElement</key>
    <true/>
    <key>NSHighResolutionCapable</key>
    <true/>
</dict>
</plist>
Enter fullscreen mode Exit fullscreen mode

Save this as Info.plist in your project directory.

Adding Custom Icons

We need two icons:

  1. Menu Bar Icon: Create a 22x22 pixel PNG named icon.png.
  2. App Icon: Create an .icns file:
    • Make images sized 16x16 to 1024x1024 pixels.
    • Save them in AppIcon.iconset with names like icon_16x16.png.
    • Run: iconutil -c icns AppIcon.iconset

Building and Packaging

Let's create a build script (build.sh):

#!/bin/bash

# Build the Go application
go build -o CityHallClock

# Create the app bundle structure
mkdir -p CityHallClock.app/Contents/MacOS
mkdir -p CityHallClock.app/Contents/Resources

# Move the executable to the app bundle
mv CityHallClock CityHallClock.app/Contents/MacOS/

# Copy the Info.plist
cp Info.plist CityHallClock.app/Contents/

# Copy the chime sound to Resources
cp chime.mp3 CityHallClock.app/Contents/Resources/

# Copy the menu bar icon
cp icon.png CityHallClock.app/Contents/Resources/

# Copy the application icon
cp AppIcon.icns CityHallClock.app/Contents/Resources/

echo "Application bundle created: CityHallClock.app"
Enter fullscreen mode Exit fullscreen mode

Make it executable with chmod +x build.sh, then run it with ./build.sh.

Conclusion

And there you have it! You've built a fully functional City Hall Clock app for macOS. You've learned about:

  • Creating a menu bar app with Go
  • Playing sounds at specific intervals
  • Packaging a Go application as a native macOS app

Feel free to expand on this. Maybe add preferences for custom chimes or different chiming intervals. The sky's the limit!

You can find full source code here https://github.com/rezmoss/citychime

Happy coding, and enjoy your new clock!

💖 💪 🙅 🚩
rezmoss
Rez Moss

Posted on September 6, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related