New Theme: "Progressing decently" (+bugreport: <progress> doesn't work)

[X4]

Hi,

thanks for creating the plasmoid, it's great! I've forked the Theme "Progress" and noticed a bug. In order to see the progressbar animate, you've to scroll with the cursor on the plasmoid in the panel. That will switch to the next timezone and back, resulting in a manual "refresh". You can only the progressbar animate when you do that.

Here comes the second problem: This theme altough very similar, doesn't animate at all, regardless what you do. Could you please fix animations for custom themes?

<div class="clock">
    <p>%h</p>
    <div class="min">
        <span>%m</span><br>
        <progress value="15" max="59">&nbsp;</progress>
    </div>
    <div class="details">
        <span>%$w,</span>
        <span class="mon">%d.&nbsp;%!$M</span>
    </div>
</div>

*
{
    font-family: 'Segoe WP'; /* change the font accordingly.*/
    font-weight: bold;
    color: #fff;
}

progress
{
    width: 100%;
    height: 10px;
    border: 0;
    position: relative;
    bottom: 10px;
    background: transparent;
    opacity: 0.6;
    padding: 0 4px;
    margin-top:4px;
}

progress::-webkit-progress-bar
{
    background: rgba(230, 230, 230, 0.2);
    border-radius: 3px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

progress::-webkit-progress-value
{
    background: #0f0;
    border-radius: 3px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.clock
{
    width: 170px;
    padding: 3px;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
}

.clock .min {
    width: 45px;
    display:block;
    float: left;
}

.clock .details {
    width: 35px;
    display:block;
    float:left;
    padding-left: 5px;
}

.clock .details span {
    font-size: 16px;
    color:#FF8000;
    text-shadow: 2px 2px 8px #000;
}
.clock .details .mon {
    font-size: 22px;
    color:#eee;
    text-shadow: 2px 2px 10px #000;
}
.clock span
{
    font-size: 30px;
    opacity: 0.8;
}

.clock p
{
    margin: 0 5px 0 0;
    text-align: right;
    font-size: 50px;
    opacity: 0.9;
    float:left;
}

[Emdek]

Hello

Which version are you using? The main issue to resolve is that clock needs to reload every time when date / time placeholders needs to be replaced, so animations won't work properly. For long time I'm planning to remove that limitation by exposing JavaScript API that will allow to update values without need for full reload. But this is not easy task, since it must be perfect from beginning (so it won't be needed to break backwards compatibility in near future) and needs as transparent for theme makers as possible (preferably so it could be applied to existing themes without creating too complex solution) it will take some time to get implemented (especially since I'm quite busy recently)... I hope to finally finish that before end of this year.

[X4]

I'm using the version supplied in the Sabayon Weekly repository. (Sabayon is basically Gentoo) Currently adjustableclock-3.1.

Wouldn't it be easier if you used QML instead? I'm not an expert in QT though, but this manuals might come in handy. http://doc.qt.digia.com/qt/qdeclarativejavascript.html http://techbase.kde.org/Development/Tutorials/Plasma/QML/GettingStarted

λ SGC-Abydoss ~ → equo s adjustable      
>>  @@ Suche...
>>      @@ Paket: kde-misc/adjustableclock-3.1 Branch: 5, [sabayon-weekly] 
>>         Verfügbar:      Version: 3.1 ~ tag: NoTag ~ Version: 1
>>         Installiert:    Version: 3.1 ~ tag: NoTag ~ Version: 1
>>         Slot:           4
>>         Homepage:       http://kde-look.org/content/show.php/Adjustable+Clock?content=92825 
>>         Beschreibung:   Plasmoid to show date and time in 
>>                         adjustable format using rich text. 
>>         Lizenz:         GPL-2
>>  Schlüsselwörter:  adjustable
>>  Gefunden:         1 Eintrag

[Emdek]

QML makes no difference, since it would still use WebKit based control for display. ;-) Moreover, in your example there is static value for PROGRESS tag, it should be:

%~!s

[X4]

Yeah :+1: !! Thanks you were :100: % right! I used a little trick to force it to animate, because the dynamic value %~!s would only progress on a refresh. So I have visually hidden "%s" and it did the trick! It animates the progressbar every second

You're free to include it. Here's the code.

<div class="clock">
  <p>%h</p>
  <div class="min">
  <span>%m</span><br>
  <span class="visuallyhidden">%s</span>
  <progress value="%~!s" max="59">&nbsp;</progress>
  </div>
  <div class="details">
  <span>%$w,</span>
  <span class="mon">%d.&nbsp;%!$M</span>
  </div>
</div>

*
{
font-family: 'Segoe WP'; /* change the font accordingly.*/
font-weight: bold;
color: #fff;
}

progress
{
width: 100%;
height: 10px;
border: 0;
position: relative;
bottom: 10px;
background: transparent;
opacity: 0.6;
padding: 0 4px;
margin-top:4px;
}

progress::-webkit-progress-bar
{
background: rgba(230, 230, 230, 0.2);
border-radius: 3px;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

progress::-webkit-progress-value
{
background: #0f0;
border-radius: 3px;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.clock
{
width: 170px;
padding: 3px;
text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
}

.clock .min {
width: 45px;
display:block;
float: left;
}

.clock .details {
width: 35px;
display:block;
float:left;
padding-left: 5px;
}

.clock .details span {
font-size: 16px;
color:#FF8000;
text-shadow: 2px 2px 8px #000;
}
.clock .details .mon {
font-size: 22px;
color:#eee;
text-shadow: 2px 2px 10px #000;
}
.clock span
{
font-size: 30px;
opacity: 0.8;
}

.clock p
{
margin: 0 5px 0 0;
text-align: right;
font-size: 50px;
opacity: 0.9;
float:left;
}

.visuallyhidden
{
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

[X4]

I've installed the current version from git. The value in

<progress value="%~!s" max="59">&nbsp;</progress>

is always resetting to 15 after reopening the code editor.

Futhermore the list of styles is buggy. It shows every clock in the same style until you click onto the next clock several times. Opening the clock in the code editor by default instead of the richtext would make more sense too imho. The richtext field is more or less useless anyway.

[Emdek]

Master branch moved to scripting instead of parser, compatible code looks as follows (HTML, CSS, JavaScript):

<div class="clock">
    <p id="hour">12</p>
    <div class="min">
        <span id="minute">30</span><br>
        <progress id="second" value="15" max="59">15</progress>
    </div>
    <div class="details">
        <div class="weekday"><span id="weekday">Saturday</span>,</div>
        <div class="month"><span id="day">01</span>.&nbsp;<span id="month">Jan</span></div>
    </div>
</div>

.clock
{
    font-family: 'Segoe WP'; /* change the font accordingly.*/
    font-weight: bold;
    color: #fff;
}

progress
{
    width: 100%;
    height: 10px;
    border: 0;
    position: relative;
    bottom: 10px;
    background: transparent;
    opacity: 0.6;
    padding: 0 4px;
    margin-top:4px;
}

progress::-webkit-progress-bar
{
    background: rgba(230, 230, 230, 0.2);
    border-radius: 3px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

progress::-webkit-progress-value
{
    background: #0f0;
    border-radius: 3px;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.clock
{
    width: 170px;
    padding: 3px;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
}

.clock .min {
    width: 45px;
    display:block;
    float: left;
}

.clock .details {
    width: 35px;
    display:block;
    float:left;
    padding-left: 5px;
}

.clock .details .weekday {
    font-size: 16px;
    color:#FF8000;
    text-shadow: 2px 2px 8px #000;
}
.clock .details .month {
    font-size: 22px;
    color:#eee;
    text-shadow: 2px 2px 10px #000;
}
.clock span
{
    font-size: 30px;
    opacity: 0.8;
}

.clock p
{
    margin: 0 5px 0 0;
    text-align: right;
    font-size: 50px;
    opacity: 0.9;
    float:left;
}

Clock.setRule('#hour', Clock.HourValue);
Clock.setRule('#minute', Clock.MinuteValue);
Clock.setRule('#second', 'value', Clock.SecondValue);
Clock.setRule('#weekday', Clock.DayOfWeekValue, {'text': true});
Clock.setRule('#day', Clock.DayOfMonthValue);
Clock.setRule('#month', Clock.MonthValue, {'short': true, 'text': true, 'possessive': false});

That was required to achieve greater flexibility (easier to extend), make it cleaner (no custom expressions, only standard JavaScript, except custom API to query date and time components), unbreak few things (like use of CSS transitions, since parser required to reload HTML each time...) and will allow to add support for QML themes using similar API in both "engines". In editor all values are now substituted to make it more user friendly (previous placeholders looked horribly and tended to break layouts for numeric values), these will be overwritten anyway when theme is deployed by rules defined in JavaScript section. All those features are used by existing themes, located in data/themes.xml. Here is current API (methods marked as Q_INVOKABLE), it uses CSS queries to match elements that need value substitution (you can optionally specify attribute): https://github.com/Emdek/plasmoid-adjustable-clock/blob/master/applet/Clock.h#L59 Component identifiers are defined here: https://github.com/Emdek/plasmoid-adjustable-clock/blob/master/applet/DataSource.h#L36 There are also events fired when values of these components change. Common options (all booleans) are short, text, possessive (for months), alternative (for hour only, toggles between 24 and 12 hours format).

There is possibility to create converter for custom themes (even including pre 3.0 syntax), most of old features could be directly mapped to JavaScript API.

Could you please attach image showing that previews issue?

[Emdek]

Closing, if you still have issues with that list then please create new issue.