/ How to

How to Add a Clock in Wallpaper Engine

Wallpaper Engine allows you to create stunning animated wallpapers for your desktop. One useful element you can add is a customizable clock. Here is a step-by-step guide on how to add a clock to your Wallpaper Engine wallpaper.

Adding a Clock Asset

  1. Click on the “Add Asset” button on the left sidebar in Wallpaper Engine. This opens an overview of default assets.
  2. Select the “Clock” asset and click “OK” to confirm.

The clock will be added to your wallpaper.

Customizing the Clock

The clock asset is highly customizable. Here are some ways to tailor it to your needs:

Changing the Font

  1. In the Properties panel on the right sidebar, locate the “Font” dropdown under Text.
  2. Choose from dozens of font options or import your own font file.

For example, select “Alcubierre” for a sleek, modern look.

Enabling a 12 or 24 Hour Clock

  1. Create a Boolean property called “Show 24H Clock” with a default value of true.
  2. In the clock’s text formatting, use Date.formatTime(new Date(), properties.Show24HClock.value ? 24 : 12) to switch between 12 or 24 hour time based on the property value.

Showing Seconds

  1. Set “Show Seconds” to true in the Text section of Properties.

Conditional Visibility

You can show/hide the clock based on a custom property’s value:

  1. Create a Boolean property called “Show Clock” defaulted to true.
  2. In the clock asset’s Properties, set a Display Condition of ShowClock.value == true

This will hide the clock when Show Clock is false.

Positioning the Clock

Once added, click and drag the clock asset’s handles to move, scale, and rotate it:

Moving

Click the center handle and drag to desired position.

Scaling

Drag the corner handles to resize.

Rotating

Click just outside a corner handle then drag to rotate.

Linking Assets

You can make the clock a “parent” asset so other assets move with it:

  1. In the asset list, drag an asset onto the clock asset.
  2. It becomes a child asset, following the clock’s transformations.

Adding Multiple Clocks

Want more than one clock? Just repeat the steps to add additional clock assets.

Configuring Visibility Conditions Between Clocks

For example:

  1. Create a Boolean Property called “Use Analog Clock” defaulted to False
  2. Add both Analog Clock and Digital Clock assets
  3. In Analog Clock properties, set condition to UseAnalogClock.value == True
  4. In Digital Clock properties, set condition to !UseAnalogClock.value

Now only one clock displays based on the property value.

Accessing the Clock Through Code

Use Date.now() to get current timestamp and format with Date.formatTime():

// Update text every second 
setInterval(() => {
  textLayer.text = Date.formatTime(Date.now(), 24); 
}, 1000);

Adding a Date

Use similar text formatting to show the date:

// Update date every second
setInterval(() => {
  dateLayer.text = Date.formatDate(new Date(), "MMM d, yyyy");  
}, 1000);

Wallpaper Engine Clock Tips

  • Search the Workshop for pre-made clock wallpapers to use or edit
  • Use audio visualizers that pulse to the beat to make cool music clocks
  • Link particle effects and other assets to the clock transforms
  • Animate the clock hands if making an analog clock
  • Use Lua scripts for advanced clock customization
  • Enable the Wallpaper Engine screensaver and use your clock wallpaper

So in summary, Wallpaper Engine makes it really easy to add customizable clocks to your animated desktop wallpapers! Follow this guide to create the perfect clock for your style.

Related Posts