I always have a love-hate relationship with Conky: the fancy desktop monitoring system. Though I don't extensively use it, I adore the simple time widgets that are both stylish and useful. However, Cinnamon Desktop has its way of spicing up the experience: desklets, applets, and extensions. After procrastinating for a long, I decided to implement my favorite Conky theme: Gotham, as a Cinnamon desklet and end up with a new desklet that supports custom themes just like Conky but only to show date and time.
This article explains the basic features of this new desklet named "Timelet" and introduces its sub-API for other developers to create new themes for this desklet. As of writing this article, the desklet is just submitted for review. Currently, there are five themes available out of the box for end users to use. All five are inspired by famous Conky themes and other Cinnamon desklets. Let's see how to install and use this desklet on your desktop.
Step 1:
Right-click on your desktop and select "Add
Desklets".
Step 2:
Switch to the Download section and
search for "Timelet" without double quotes.
Step 3:
Visit the official Cinnamon
Spices page to find the fonts Timelet themes rely on and install them.
Step 4:
Download the desklet, switch to the Manage tab, and add the desklet to
your desktop.
Step 5:
By default, the desklet will have the Gotham theme enabled. Right-click
on the desklet and choose "Configure...".
Step 6:
In
the appeared dialog you can choose between any of the available themes, scale
in and out the desklet, change colors and choose the right background style to
match your taste.
Step 1:
Visit
~/.local/share/cinnamon/desklets/timelet@linuxedo.com/themesStep 2:
Create a new file
<theme-name>.js with the following content.
// Import dependencies
const St = imports.gi.St;
const GLib = imports.gi.GLib;
imports.searchPath.unshift(GLib.get_home_dir() + "/.local/share/cinnamon/desklets/timelet@linuxedo.com/themes");
const Theme = imports.theme.Theme;
/**
* <ThemeName> theme class.
*/
class <ThemeName>Theme extends Theme {
constructor(config) {
super(config);
}
getWidget() {
// TODO: Create and return a widget
}
setDateTime(date, locale) {
// TODO: Show the date in the widget created in getWidget
}
}Make sure to rename the class name and the file name to match your theme name.
Step 3:
getWidget and setDateTime
functions. The getWidget must return a valid St Widget such as St.BoxLayout.
Always use the this.createLabel function to create new labels. If you choose
to create the label yourself, always scale the font size using this.scale
function to scale the font size.setDateTime provides two
arguments date: Date and locale: str. Use any of the utility functions
available in the Theme class or utilize the functions from the Date class.Step 4:
4.1 Open the
themes.js4.2 Import the new class at the end of existing imports.
4.3 Append the theme name to the
getThemeNames return
list.4.4 Append a new
else if condition to the getTheme function to
return your new theme object if the themeName matches with the name added in
the previous step.After adding your new theme, the
themes.js file
should look like this:
/*
* A themeable desklet that shows the time.
*
* Copyright (C) 2022 Gobinath
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see .
*/
const GLib = imports.gi.GLib;
imports.searchPath.unshift(GLib.get_home_dir() + "/.local/share/cinnamon/desklets/timelet@linuxedo.com/themes");
const DigitalTheme = imports.digital.DigitalTheme;
const FlairTheme = imports.flair.FlairTheme;
const GothamTheme = imports.gotham.GothamTheme;
const JellyTheme = imports.jelly.JellyTheme;
const MetroTheme = imports.metro.MetroTheme;
const <ThemeName>Theme = imports.<theme-name>.<ThemeName>Theme;
/**
* A factory class acts as a theme register.
* Theme developers must register their theme in this class to be detected by Timelet.
*
* Step 1: Import your theme as a depenency
* Step 2: Append your theme name to the `getThemeNames()` function list.
* Step 3: Add an `else-if` condition to create your theme if the name matches the name you defined in Step 2.
*/
class Themes {
/**
* This output will be used as the config GUI theme selector values.
* Theme developers: append your theme name to the list
* @returns Return the list of registered theme names.
*/
static getThemeNames() {
return ["Digital", "Flair", "Gotham", "Jelly", "Metro", "<ThemeName>"];
}
/**
* Theme developers: add an `else if` condition to this method to create your theme.
* @param {str} themeName the theme name as defined in getThemeNames function
* @param {*} config the theme.Config object with user configuration
* @returns a new Theme object
*/
static getTheme(themeName, config) {
if (themeName == "Digital") {
return new DigitalTheme(config);
} else if (themeName == "Flair") {
return new FlairTheme(config);
} else if (themeName == "Gotham") {
return new GothamTheme(config);
} else if (themeName == "Jelly") {
return new JellyTheme(config);
} else if (themeName == "Metro") {
return new MetroTheme(config);
} else if (themeName == "<ThemeName>") {
return new <ThemeName>Theme(config);
}
}
} Note the line numbers 27, 45, and 65 to 67.
Step 5:
Once all changes are made, right-click on Taskbar → Troubleshoot → Restart Cinnamon.
Step 6:
Step 7:
No comments
Post a Comment