Display the time on the dashboard

[jerome]

Hello @pierre-gilles and the community,

I’m gradually organizing my dashboard and I realized, and maybe you’ll find this silly , but we don’t have the ability to display the time in large or simply a clock.

On my home page, I have an indicator for the travel time to my different workplaces and having the time next to it would be nice.

What do you think?

[Tlse-vins]

Isn’t there already a request for this?

[jerome]

I quickly looked but no I didn’t see.

Some want the refresh time of a device or camera but just the time I didn’t see.

Too basic as a request.

[Lokkye]

Hello, I have started working on this request. Do you have any idea about the design? I was planning to display the time as well as the day’s date, does that sound good to you? I will make a PR in a few days to show you what I have done.

[Lokkye]

Here is the PR in question, with screenshots

Add clock box for dashboard (#1509)

[Tlse-vins]

Hello

• I would have liked to see the day next to the date.
• I find the clock display a bit small.

[jerome]

The time is indeed a bit small I find.

The time is more important than the date, we should reverse the size of the characters between the two.

Simple but effective format

[Lokkye]

@Tlse-vins and @jerome, thank you for your feedback.

I increased the size of the time, is it better like this:

But for adding the day, the dayjs library we use doesn’t allow me to do it

[Tlse-vins]

I find it’s clearer.
Pity about the day.

[damalgos]

@Lokkye

But for today’s addition, the dayjs library we use doesn’t allow me to do it

Hello,

For the day, the calculation can be done in my opinion several methods exist but generally I think you can easily calculate it by going through the timestamp / or even the date

[jerome]

Hello @Lokkye

I find this much better on my part, I approve.

[Lokkye]

Yes, I thought about it, but the date format is different from one locale to another. I will see what I can do, but I would like to avoid more development when we add more languages to Gladys.

[kenshimdev]

You can easily display the day in JS, no need for a library…

const d = new Date()
const locale = "fr-FR"
d.toLocaleString(locale, {weekday: 'long'})

You just need to pass the correct locale.

[VonOx]

A small mock (wild html modification)

[pierre-gilles]

Indeed, I would see something much more « design/visual » like what @VonOx did.

We could even consider going for something even more design-oriented, like a dial or a digital clock display?

[Lokkye]

Thanks @VonOx it’s true that it’s much prettier and more understandable

@pierre-gilles we can already make a first draft like this if you’re okay with it and evolve the poster but I had thought about the dial but I don’t know if it’s readable on a small screen

[kenshimdev]

A QLOCKTWO clock could be fun (GitHub - ndpdev/qlocktwo: JavaScript implementation of Biegert & Funk's QLOCKTWO · GitHub)

[pierre-gilles]

@Lokkye It’s worth seeing if it’s complicated to do something a bit more polished? Without necessarily reinventing the wheel, designs already exist. It just seems a bit rough ^^

@VonOx’s proposal is already better, but if it takes 20 minutes to set up a nice design, it would be a shame

[Lokkye]

@pierre-gilles: I’ve integrated the design of @VonOx and added an analog clock. I’m currently looking to restyle it a bit because I find it a bit bland.
What do you think of it?

[jerome]

@Lokkye the design by @VonOx is simple but effective.

Regarding the analog clock, retouching it can be a bit of an effect, but I think it’s important to stay subtle and clean to fit the Gladys dashboard theme.