LCD Clock v0.2 [Feb-12][FF]

Talk about add-ons and extension development.
Post Reply
Bloodeye
Posts: 582
Joined: July 12th, 2004, 7:20 pm

LCD Clock v0.2 [Feb-12][FF]

Post by Bloodeye »

LCD Clock - Is a LCD styled clock. Clock beeps on every hour, half-hour, and quarter hour if so desired. Alarm can be set through context menu. Appearance and display are highly customizable. Will work with all fonts.

Changes for v0.2:
-Options Dialog
-Set alarm Dialog
-24h format option
-quarter hour, half hour, and hour tone options
-Tooltip displays Date plus Alarm On\Off
-Clear alarm time function

Screenshot
Download: [LCD Font] [Digital Readout Font] [7 Segment Font]
Download: LCD Clock v0.2
Download: Royalty Free Clock sounds - There is no option to change alarm\beep sounds yet, but here's where you can find some.

Styling - Easy to change through userChrome.css
Background color, Font, Font size, Font Color, and Font\label postion. By default LCD Clock is setup for LCD2 Bold Font. If you change the font, then more than likely you will need to change the size and postion. Here's an example for serif font, which is what it defaults to if you don't install the LCD2 Bold font.

Code: Select all

/* LCD Clock serif font position settings within userChrome.css */
/* Will have to play around with these if using a different font */
.lcd-labels {
  position: absolute;
  top: 2px !important;
}

.lcd-disp-label[small="true"] {
  position: absolute;
  left: 10px !important;
}

Code: Select all

/* How about a different background and text color. Could change opacity too */
.lcd-fade-label {
  opacity: 0.2 !important;
  color: #00A651 !important;
}

.lcd-disp-label {
  opacity: 1.0 !important;
  color: #00FF00 !important;
}

.lcdclock-bgcolor {
  background-color: #0000FF !important;
}

Code: Select all

/* LCD Clock transparent background */
/* The color of your browser will be displayed instead */
.lcdclock-bgcolor {
  background-color: transparent !important;
}

Code: Select all

/* Everything else can be changed including images */
/* These are the images that make up the outline shape */
.lcdclock-lend {
  list-style-image: url('chrome://lcdclock/skin/left-endcap.png');
}
.lcdclock-middle {
  background-image: url('chrome://lcdclock/skin/mid-section.png');
  background-repeat:repeat-x;
}
.lcdclock-rend {
  list-style-image: url('chrome://lcdclock/skin/right-endcap.png');
}

/* These are the alarm and pm indicator images */
.lcd-alarm-on {
  list-style-image: url('chrome://lcdclock/skin/alarm-on.gif');
}
.lcd-alarm-off {
  list-style-image: url('chrome://lcdclock/skin/alarm-off.png');
}
.lcd-pm {
  list-style-image: url('chrome://lcdclock/skin/pm-off.png');
}
.lcd-pm[pm="true"] {
  list-style-image: url('chrome://lcdclock/skin/pm-on.png');
}



Change Log:
>>>> v0.1 <<<<<
Intial Release
Last edited by Bloodeye on February 12th, 2006, 1:02 pm, edited 1 time in total.
User avatar
XerBlade
Posts: 865
Joined: October 4th, 2005, 10:45 pm
Location: Nashville, TN, US

Post by XerBlade »

Cool. I'll be waiting patiently for further development on this one. Not sure why, I just think it looks nice.
User Agent
Extensions
AMD64/2.41GHz RAM/1.0GB ATI/256MB-GDDR3/128-bit/8xAGP Cable6.0M/384kbps
Bloodeye
Posts: 582
Joined: July 12th, 2004, 7:20 pm

Post by Bloodeye »

XerBlade wrote:Cool. I'll be waiting patiently for further development on this one. Not sure why, I just think it looks nice.

Thanks, I'm not sure where the direction of this is going either...but it is nice to look at. If anyone comes up with some nice color styles, post them. I'd like to have a couple different styles myself. Maybe I could include them in the package as a choice. If you do use a dark background color, then alarm\pm indicator may not show up. When I get some free time, maybe I'll create some lighter color images.

Some ideas I have:

1) Choice of when clock beeps - on the quarter, half, or full hour.
2) User selected beep\alarm sounds.
3) Clock time should flash when it beeps\alarms
4) Enter alarm time into clock, much like a textbox....not sure.
5) Turn alarm off by clicking on alarm.

I'd like to be able to loop a sound? nsISound doesn't have much. I'm not sure how to determine when a sound has finished playing to loop it? Right now the alarm sound plays once and is done. If your away from your computer...you might just miss it. I'd rather have it play until user interaction turns it off, or at least the option.
barf
Posts: 78
Joined: September 13th, 2004, 5:36 am

Post by barf »

Very nice. Looking forward to improvements.

Is it possible to have the colon blink? That would be neat.
User avatar
Cato62
Posts: 684
Joined: March 7th, 2005, 10:06 am
Location: Eugene, OR

Post by Cato62 »

I really like this extension. Great job! Keep up the great work!
"It is difficult to fight against anger, for a man will buy revenge with his soul." ~ Heraclites, 500 B.C.

The Blood Series: BloodFire, BloodFire 3, BloodThunder, BloodSun, & BloodSong
Bloodeye
Posts: 582
Joined: July 12th, 2004, 7:20 pm

Post by Bloodeye »

barf wrote:Is it possible to have the colon blink? That would be neat.

I'll look into it. The only problem it may cause is alignment issues. Right now the clock text is in one label. To have the colon blink I'd have to seperate it into 3 labels. Although I wouldn't mind seeing the colon centered.

BTW: Anyone know if CSS text-decoration: blink; works on XUL text?
itsme_4ucz
Posts: 9
Joined: November 10th, 2005, 8:20 pm

Post by itsme_4ucz »

Keep up that great work!
User avatar
XerBlade
Posts: 865
Joined: October 4th, 2005, 10:45 pm
Location: Nashville, TN, US

Post by XerBlade »

Bloodeye wrote:
barf wrote:Is it possible to have the colon blink? That would be neat.

I'll look into it. The only problem it may cause is alignment issues. Right now the clock text is in one label. To have the colon blink I'd have to seperate it into 3 labels. Although I wouldn't mind seeing the colon centered.

BTW: Anyone know if CSS text-decoration: blink; works on XUL text?

Well, I tried it, and it didn't seem to work, but that could have been a case-by-case thing (naturally wasn't going to re-code the entire extension just to see exactly what was suggested work just to test the answer to one related question [I actually just used userChrome to see if I could make something totally unrelated yet still of the same basic type blink]).
By the way, I'd like to see the colon centered as well.
Which leaves me now wondering two things about the LCD font instead of just one. The new one being, why is the colon not in LCD standard form? The original being, why do the '1's not look anything like proper LCD '1's?
User Agent
Extensions
AMD64/2.41GHz RAM/1.0GB ATI/256MB-GDDR3/128-bit/8xAGP Cable6.0M/384kbps
User avatar
zoriv
Posts: 1249
Joined: May 6th, 2005, 2:01 pm
Contact:

Post by zoriv »

Bloodeye wrote:

If anyone comes up with some nice color styles, post them. I'd like to have a couple different styles myself.


You can change the colors using css code:

Code: Select all

.lcd-disp-label {
  opacity: 1.0 !important;
  color: #0000cd !important;
 }

.lcdclock-bgcolor {
  background-color:#C6E2FF !important;
}

.lcd-labels {
font-family:LCD  !important;
font-weight-bold !important;}
}



and the final effect is this one:
Image
You can play with colors if you usethis site.
User avatar
dickvl
Posts: 54146
Joined: July 18th, 2005, 3:25 am

Post by dickvl »

Could you make a 24h version?
mattcoz
Posts: 1021
Joined: November 7th, 2002, 11:15 pm

Post by mattcoz »

Shouldn't the "1"s match up with the segments below?
Bloodeye
Posts: 582
Joined: July 12th, 2004, 7:20 pm

Post by Bloodeye »

mattcoz wrote:Shouldn't the "1"s match up with the segments below?

This kinda ties into what XerBlade was talking about. For a true LCD "display" all the numbers would come from the number 8. There may be a LCD font out there that aligns all numbers within the boundries of the number 8, but I haven't found one yet. If you look at zoriv's image his LCD font is closer to a true LCD display, but still the number 1 is aligned in the middle of the number 8. I could try and align everything, but then it would more than likely break when people used different fonts.

@dickvl - I'll add that as an option.

@zoriv - I like the color combo you use, any idea if that LCD font your using is freely available for download?
max1million
Posts: 2810
Joined: November 15th, 2004, 5:03 am

Post by max1million »

Thinking you want a 7 segment font like http://www.twyman.org.uk/Fonts/ or google 7 segment font download. The basic figure 8 on LCD and LED clocks were 7 segments.
On another note, the bright colors look more like LED then LCD to me. LCD generally black on a silvergray background closer to #969682, where as LED generally light up in a color.
User avatar
zoriv
Posts: 1249
Joined: May 6th, 2005, 2:01 pm
Contact:

Post by zoriv »

max1million wrote:
Thinking you want a 7 segment font like http://www.twyman.org.uk/Fonts/ or google 7 segment font download. The basic figure 8 on LCD and LED clocks were 7 segments.

First of all, thank You very much for the suggested font. It looks very nice in the LCD Clock v0.1.

When you analyze either font, the fact is that these fonts are based on # 8. It means, # 1 must be displayed as not aligned in the middle of the number. But, there is something interesting when you play in CSS with these two fonts, LCD and 7 Segment.
Please, look at this situation. The numbers are written in word.
Image
It's evidently from the above image 7 Segment is real LCD font.
Now I will show you the same fonts implemeted in LCD Clock v0.1 using CSS.

LCD Clock v0.1 with 7 segment: Look at carefully #1 and #7

Image
Image

LCD Clock v0.1 with LCD: Look at carefully #1 and #7
Image
Image

Now in this case when you see the clocks, the LCD font is much more appropriate than 7 Segment. The mistake is most evident in # 7, the situation which is out of any logic.
max1million, did you notice this situation. If you have the same like me, I'm afraid that something is bugging in this nice extension.
Bloodeye
Posts: 582
Joined: July 12th, 2004, 7:20 pm

Post by Bloodeye »

The 7 Segment font doesn't work for me on Win98...not sure why? Anyways I found one that works and the 1's and 7's line up correctly. Go to here CLICK ME, and download one of the "Digital Readout" fonts. It doesn't matter which one because they are all in the same zip file. Mouse over the download link and you will see that digreado.zip is the same for all. Digital Readout Thick Upright, and Digital Readout Thick are the two I like and may make the default.

For now...Within userChrome.css change:

Code: Select all

.lcd-labels {
  font-family: Digital Readout Thick Upright !important;
  font-size: 2.0em !important;
  padding: 0px 2px !important;
  margin: 0px !important;
}

.lcd-disp-label[small="true"] {
  position: absolute;
  left: 10px !important;
}
Post Reply