Clock Widget with a Transparent Background

Apps & Services HABPanel
1

Does anybody have a digital clock widget I could have? The canned one with HabPanel doesn’t allow you to have change the background.

Best, Jay

2

which clock are you referring to? You can override any style in HabPanel if you supply your own css file

3

On a HabPanel config screen; add widget then clock. I have the digital one set.

I think it’s this one from the source code → app/widgets/clock/clock.widget.js

Best, Jay

4

Unfortunately, you cannot remove the background on that one. That’s one of my pet peeves in HabPanel widgets, the box itself is styled and outside the scope of the widgets themselves. I suggest you just use a regular template widget and put the widget-clock in it. HTML would be like this (make sure you check no background and dont wrap:

<style>
 .customClock { 
  background-color: #232323; 
  color: red; 
  width: 100%;
  height: 100%
  }
</style>
<div class='customClock'>
<widget-clock ng-model='{ mode: "Digital", analog_theme: "dark", format: "h:mm a" }'></widget-clock>
</div>

image
image.png1235×822 30.1 KB

clock

5

Good morning Lucky!

Thanks for helping me again; the only issue is I’m looking for the same color for the back as the default background has for HabPanel (that dark blue); do you know the color code for that? I turned ON no background think it would be transparent but it’s just grey.

Also, is there a way to turn it to a 12 hour clock vs. 24 hour clock?

Capture

Best, Jay

6

Based off your screenshot (through a color droplet) #082e49
You can pick any format you like:
hh:mm:ss a

<style>
 .customClock { 
  background-color: #232323; 
  color: red; 
  width: 100%;
  height: 100%
  }
</style>
<div class='customClock' ng-init='m={mode: "Digital", analog_theme: "light", digital_format: "hh:mm:ss a" }'>
<widget-clock ng-model='m'></widget-clock>
</div>

Code is here:

8

Thank you! I took your latest code again and it worked!

Best, Jay