
Source (link to git-repo or to original if based on someone elses unmodified work): Add the source-code for this project on opencode.net
Plasmoid to show date and time in adjustable format using rich text.
Developed and tested on KDE 4.11 with Qt 4.8 (Kubuntu 13.10).
Source (main repository, with more frequent updates) is located at:
https://github.com/Emdek/plasmoid-adjustable-clock
Warning!
Version 4.0 (and newer) is not backwards compatible with 3.x, all custom formats need to be exported and manually converted.
QML themes support is currently considered as experimental, behavior and available API are not yet stable and most probably will be changed with next release.
Tips:
- to change tool tip text you need to set options toolTipExpressionMain and toolTipExpressionSub in applets configuration file (usually located at ~/.kde4/share/config/plasma-desktop-appletsrc), in group containing line plugin=adjustableclock;
- you can use advanced WebKit features (all of these that work with for example rekonq should work here too), for example use CSS to create reflections:
-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
And much more. ;-)
If you created interesting theme and want to share it then post in comments!
Features:
- fully custom date and time using JavaScript API to obtain date and time components;
- multiple clock themes utilizing various designs;
- possibility to use rich text editor or edit source directly (HTML and CSS or QML) to adjust theme;
- context menu with actions to copy formatted (adjustable expressions) date and time to clipboard;
- fast copy to clipboard of adjustable date and time expression after middle mouse click on the clock or activation of keyboard shortcut;
- adjustable tool tip (hidden option, toolTipExpressionMain and toolTipExpressionSub keys);
- standard clock calendar.
If you have found bugs or have suggestions you can contact me via email, message or using comments, before you will vote bad. And remember that not everybody has enough time for fast replying. ;-)
7 years ago
4.1.4 (01.11.2013):
- fixed week number not being updated;
- added missing title of "Insert Component" dialog.
4.1.3 (27.09.2013):
- ensure that component values are always up to date;
- adjust timestamp for time zone offset;
- do not allow for accidental nesting of components in editor;
- added option to hide date in Train Clock theme;
- added workaround to ensure that hands of SVG Clock have correct initial positions as soon as possible.
4.1.2 (01.06.2013):
- ensure that center of SVG Clock theme is always valid;
- improve resizing in vertical panels.
4.1.1 (25.05.2013):
- fixed WYSIWYG editor for HTML themes;
- fixed missing dialog for "Insert Component" actions.
4.1 (15.05.2013):
- added SVG Clock theme (analog clock that uses Plasma theme);
- added experimental support for QML themes (alpha state);
- added simple file templates for new themes;
- move theme editor to own dialog;
- move theme specific actions to context menu;
- added ability to install and export themes (Plasma Package ZIP);
- some other improvements and fixes.
7 years ago
4.1.4 (01.11.2013):
- fixed week number not being updated;
- added missing title of "Insert Component" dialog.
4.1.3 (27.09.2013):
- ensure that component values are always up to date;
- adjust timestamp for time zone offset;
- do not allow for accidental nesting of components in editor;
- added option to hide date in Train Clock theme;
- added workaround to ensure that hands of SVG Clock have correct initial positions as soon as possible.
4.1.2 (01.06.2013):
- ensure that center of SVG Clock theme is always valid;
- improve resizing in vertical panels.
4.1.1 (25.05.2013):
- fixed WYSIWYG editor for HTML themes;
- fixed missing dialog for "Insert Component" actions.
4.1 (15.05.2013):
- added SVG Clock theme (analog clock that uses Plasma theme);
- added experimental support for QML themes (alpha state);
- added simple file templates for new themes;
- move theme editor to own dialog;
- move theme specific actions to context menu;
- added ability to install and export themes (Plasma Package ZIP);
- some other improvements and fixes.
chio
9 years ago
Report
Emdek
9 years ago
You can try to workaround it by commenting out or removing this line form AdjustableClock.cpp (should be 912.):
m_page.mainFrame()->evaluateJavaScript("document.fgColor = '" + Plasma::Theme::defaultTheme()->color(Plasma::Theme::TextColor).name() + '\'');
Report
chio
9 years ago
Report
Emdek
9 years ago
Report
janet
9 years ago
I can still configure style, font and color - but I cannot drag it to another size anymore!
It didn't help to remove the widget from desktop and to re-add and reconfigure it.
The packages that were updated are listed here: http://pastebin.com/a0T4zuY7
Can you identify the culprit?
And how do I get back the flexible size?
Report
Emdek
9 years ago
Or maybe applet handle moves as if it was resized?
If both are true then it might be broken scaling (for example WebKit ignoring requested value).
You can also try to add it to panel, then resize that panel and check if scaling works (preferably using fresh user account).
There are very slight chances that recompiling (after updating Qt) might help, but it shouldn't be required...
Report
janet
9 years ago
But only the widget area increases when I drag the handle, the font size always stays the same. I have also tested it with a fresh user. I can increase the font size in the settings, then it stays in that size. After that I also have to manually resize the widget because it's size does not automatically adjust to the bigger font.
It's the automatic size adjustment (of the font & of the widget) that is gone.
Report
Emdek
9 years ago
1. Qt WebKit is ignoring scaling requests (you can check if zooming works in Arora / rekonq / other Qt WebKit based browser or application).
2. Wrong applet size is send and algorithm that calculates zoom always returns 1 (much less possible).
Report
janet
9 years ago
Report
Emdek
9 years ago
For now I can only suggest to set values to fit or more easily, use CSS transforms to scale contents (similar to method used by applet but requires manual setting of zoom factor), you can use information from this site as an example:
http://cat-in-136.blogspot.com/2010/09/unofficial-css-property-zoom.html
If this doesn't help then I can prepare code with some debug information (applet size, zoom factor etc.) but it will require source recompiling and will take some time (I'm a bit busy recently...).
Report
maidis
10 years ago
http://www.tutorialguide.net/images/adobe_photoshop/0054/001.jpg
http://anilozbek.blogspot.com/2010/04/saatli-maarif-takvimi-programcg.html
http://i.imgur.com/0XyiY.png
http://pastebin.com/FnGNPfii
Report
Emdek
10 years ago
<div style="background:none;">
<pre style="background:-webkit-gradient(linear, left top, left bottom, from(#E5702B), to(#A33B03));border-radius:15px;text-align:center;color:white;font-weight:bold;font-size:30px;padding:30px 10px;font-family:sans serif;box-shadow: 5px 5px 5px #888;">
%A
<span style="font-size:120px;">%n</span>
<spn style="font-size:35px;">%B %Y</span>
</pre>
</div>
There should be shadow for main box but it seems to not work with Qt WebKit, at least on my PC without compositing (probably Intel break drivers recently...).
Report
maidis
10 years ago
Is there any way to have 1:1 aspect ratio?
Report
Emdek
10 years ago
<div style="background:none;width:300px;height:300px;;">
<pre style="background:-webkit-gradient(linear, left top, left bottom, from(#E5702B), to(#A33B03));border-radius:20px;text-align:center;color:white;font-weight:bold;font-size:30px;padding:30px 10px;font-family:sans serif;box-shadow: 5px 5px 5px #888;opacity:0.7;">
%A
<span style="font-size:120px;">%n</span>
<spn style="font-size:35px;">%B %Y</span>
</pre>
</div>
It's also possible to have that top part if someone will do needed graphics (could be embedded into CSS and repeated as background of layer positioned on top) or maybe simple blocks with gradient will be enough.
I'll think about adding this one as one of default formats (maybe slightly modified, bo have something more original).
Report
maidis
10 years ago
I wrote %m (%n) mistakenly at my first comment. It has to be %e.
Report
Emdek
10 years ago
Google translate is my friend, however it often gives funny results or can't translate some words but it's improving (I'm using it to validate own comments and I see it's progress). ;-)
Report
Emdek
10 years ago
<div style="background:none;width:300px;height:300px;">
<div style="background:-webkit-gradient(linear, left top, left bottom, from(#E5702B), to(#A33B03));border-radius:20px;text-align:center;color:white;font-weight:bold;font-size:30px;padding:30px 20px 20px 20px;margin:30px 0 0 0;box-shadow: 5px 5px 5px #888;opacity:0.7;position:relative;">
%A<br />
<span style="font-size:130px;line-height:140px;">%e</span><br />
<span style="font-size:35px;">%B %Y</span>
<div style="position:absolute;top:-30px;left:-10px;width:310px;height:60px;padding:10px 20px;">
<div style="width:13px;height:40px;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #757575), color-stop(0.5, #F7F7F7), color-stop(1, #757575));border:1px solid #999;margin:0 16px;float:left;"></div>
<div style="width:13px;height:40px;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #757575), color-stop(0.5, #F7F7F7), color-stop(1, #757575));border:1px solid #999;margin:0 16px;float:left;"></div>
<div style="width:13px;height:40px;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #757575), color-stop(0.5, #F7F7F7), color-stop(1, #757575));border:1px solid #999;margin:0 16px;float:left;"></div>
<div style="width:13px;height:40px;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #757575), color-stop(0.5, #F7F7F7), color-stop(1, #757575));border:1px solid #999;margin:0 16px;float:left;"></div>
<div style="width:13px;height:40px;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #757575), color-stop(0.5, #F7F7F7), color-stop(1, #757575));border:1px solid #999;margin:0 16px;float:left;"></div>
<div style="width:13px;height:40px;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #757575), color-stop(0.5, #F7F7F7), color-stop(1, #757575));border:1px solid #999;margin:0 16px;float:left;"></div>
</div>
</div>
</div>
With shadows it would look nicer...
Maybe I'll later try with repeated image etc.
Report
maidis
10 years ago
http://anilozbek.blogspot.com/2011/02/harika-programck-adjustable-clock.html [in Turkish]
Report
janet
10 years ago
Report
Emdek
10 years ago
Report
janet
10 years ago
BTW: Why the tooltip content isn't adjustable via the settings gui anymore? Same as with the background. As it is now it's too complicated for Joe Average User.
Report
Emdek
10 years ago
http://api.kde.org/4.x-api/kdelibs-apidocs/kdecore/html/classKConfigGroup.html#adccf3856e5efe5b93296cb5a749ad793
ignores keys with empty values from settings file. :-/
I'll try to workaround that in next days.
As far as I remember I've already explained why these options were removed. ;-)
It was done during review phase (started 15 months ago, but apparently somebody forgotten to make decision where it should be moved and it's still stuck in purgatory... I mean kdereview :-/), it was required to move it in some better place...
Report
janet
10 years ago
Report
Emdek
10 years ago
Tool tip format is still available but as hidden option in configuration file (using key toolTipFormat).
Automatic rescale is now always on (compliant with other clock widgets).
And transparent background can be now set by adding CSS rule background:none; to most top level container (it's set to most of default formats now, including default versions of dbClock).
Report
janet
10 years ago
BTW: I cannot customize the color of the clock, it is always black and always reverts back to black.
Report