How do I make a digital clock with images?

[Phantom_309]

I want to make a specific theme that i can't find on deviantart, and i'm just not sure how I can make it using images of numbers instead of text. Can anyone put me on the right lines? I'm barely competent with coding, and I only discovered Rainmeter today. Thanks! c:

[lysy1993lbn]

You can achieve that with Bitmap meter, and i assume you're already familiar with Time Measure

[balala]

Sorry lysy1993lbn, you just beat me...

I want to make a specific theme that i can't find on deviantart, and i'm just not sure how I can make it using images of numbers instead of text. Can anyone put me on the right lines? I'm barely competent with coding, and I only discovered Rainmeter today. Thanks! c:

Yeah, the simpleast way is to use Bitmap meters. If you don't know how to work with such a meter, recommend to download the example skin which is posted on the above linked help page of the Bitmap meter (go downside and click Download), install and check it. If you find it useful, a clock can be made similarly, just let me (us) know if this is what you want.

[Phantom_309]

Sorry lysy1993lbn, you just beat me...


Yeah, the simpleast way is to use Bitmap meters. If you don't know how to work with such a meter, recommend to download the example skin which is posted on the above linked help page of the Bitmap meter (go downside and click Download), install and check it. If you find it useful, a clock can be made similarly, just let me (us) know if this is what you want.

I changed the numbers on the Bitmap meter to what I had in mind. It's looking pretty good, but now I'm not sure where and how to put the Time measure code into the Bitmap meter. Thanks for helping out, by the way.

[Phantom_309]

I changed the numbers on the Bitmap meter to what I had in mind. It's looking pretty good, but now I'm not sure where and how to put the Time measure code into the Bitmap meter. Thanks for helping out, by the way.

Scratch that, I think I understand it after some closer inspection.

[balala]

I changed the numbers on the Bitmap meter to what I had in mind. It's looking pretty good, but now I'm not sure where and how to put the Time measure code into the Bitmap meter.

Here is a short example. I started from the code of the Example, posted in the help of the Bitmap meter. If you have installed the skin, replace its code with the following one:

Code: Select all

[Rainmeter]
Update=1000
AccurateText=1
DynamicWindowSize=1

[Metadata]
Name=ExampleMeterBitmap
Author=The Rainmeter Team
Information=Example of the Bitmap meter
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
Version=1.0

[MeasureTime]
Measure=Time
Format=%H%M

[MeterCellBack1]
Meter=Image
ImageName=#@#Images\CellBack.png
X=0
Y=0

[MeterCellBack2]
Meter=Image
ImageName=#@#Images\CellBack.png
X=3R
Y=0r

[MeterCellBack3]
Meter=Image
ImageName=#@#Images\CellBack.png
X=3R
Y=0r

[MeterCellBack4]
Meter=Image
ImageName=#@#Images\CellBack.png
X=3R
Y=0r

[MeterCPU]
Meter=Bitmap
MeasureName=MeasureTime
X=8
Y=8
BitmapImage=#@#Images\Numbers.png
BitmapFrames=10
BitmapExtend=1
BitmapDigits=4
BitmapSeparation=12

[MeterCellFore1]
Meter=Image
ImageName=#@#Images\CellFore.png
X=0
Y=0

[MeterCellFore2]
Meter=Image
ImageName=#@#Images\CellFore.png
X=3R
Y=0r

[MeterCellFore3]
Meter=Image
ImageName=#@#Images\CellFore.png
X=3R
Y=0r

[MeterCellFore4]
Meter=Image
ImageName=#@#Images\CellFore.png
X=3R
Y=0r

A weird thig here might be that the above code shows only four digits, with no separation (no colon for instance) between the hour and minutes. The bitmap present there doesn't allow adding such a separator. But if needed there are solutions to this question as well. For now only four same distance separated digits are present (showing 1500 for 15:00 - 3:00 PM for example).
Try out the above code and let me know how do you find it. If it's good enough, pack please your skin, along with the desired bitmap and upload the package. Once it's here, I'm gonna take a look to see how can it be adapted to properly work.

[Phantom_309]

Here is a short example. I started from the code of the Example, posted in the help of the Bitmap meter. If you have installed the skin, replace its code with the following one:

Code: Select all

[Rainmeter]
Update=1000
AccurateText=1
DynamicWindowSize=1

[Metadata]
Name=ExampleMeterBitmap
Author=The Rainmeter Team
Information=Example of the Bitmap meter
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
Version=1.0

[MeasureTime]
Measure=Time
Format=%H%M

[MeterCellBack1]
Meter=Image
ImageName=#@#Images\CellBack.png
X=0
Y=0

[MeterCellBack2]
Meter=Image
ImageName=#@#Images\CellBack.png
X=3R
Y=0r

[MeterCellBack3]
Meter=Image
ImageName=#@#Images\CellBack.png
X=3R
Y=0r

[MeterCellBack4]
Meter=Image
ImageName=#@#Images\CellBack.png
X=3R
Y=0r

[MeterCPU]
Meter=Bitmap
MeasureName=MeasureTime
X=8
Y=8
BitmapImage=#@#Images\Numbers.png
BitmapFrames=10
BitmapExtend=1
BitmapDigits=4
BitmapSeparation=12

[MeterCellFore1]
Meter=Image
ImageName=#@#Images\CellFore.png
X=0
Y=0

[MeterCellFore2]
Meter=Image
ImageName=#@#Images\CellFore.png
X=3R
Y=0r

[MeterCellFore3]
Meter=Image
ImageName=#@#Images\CellFore.png
X=3R
Y=0r

[MeterCellFore4]
Meter=Image
ImageName=#@#Images\CellFore.png
X=3R
Y=0r

A weird thig here might be that the above code shows only four digits, with no separation (no colon for instance) between the hour and minutes. The bitmap present there doesn't allow adding such a separator. But if needed there are solutions to this question as well. For now only four same distance separated digits are present (showing 1500 for 15:00 - 3:00 PM for example).
Try out the above code and let me know how do you find it. If it's good enough, pack please your skin, along with the desired bitmap and upload the package. Once it's here, I'm gonna take a look to see how can it be adapted to properly work.

I finished it up about an hour and a half ago, thanks for the help, mate.

[jsmorley]

Bitmap is one way, but for a clock, another approach is to just separate the elements of the time into HH:MM:SS and use individual images. Then you can pretty easily add separators and such.

Something like this:

Code: Select all

[Rainmeter]
Update=1000
ContextTitle=Background 1
ContextAction=[!WriteKeyValue Variables Background "1"][!Refresh]
ContextTitle2=Background 2
ContextAction2=[!WriteKeyValue Variables Background "2"][!Refresh]
ContextTitle3=Background 3
ContextAction3=[!WriteKeyValue Variables Background "3"][!Refresh]
ContextTitle4=-----
ContextTitle5=Display seconds
ContextAction5=[!WriteKeyValue Variables DisplaysSeconds "1"][!Refresh]
ContextTitle6=Hide seconds
ContextAction6=[!WriteKeyValue Variables DisplaysSeconds "0"][!Refresh]
ContextTitle7=-----
ContextTitle8=Size : Small
ContextAction8=[!WriteKeyValue Variables Size "1"][!Refresh]
ContextTitle9=Size : Medium
ContextAction9=[!WriteKeyValue Variables Size "2"][!Refresh]
ContextTitle10=Size : Large
ContextAction10=[!WriteKeyValue Variables Size "3"][!Refresh]

[Metadata]
Name=Nixie Clock
Author=Mistic
Version=1.0.0
License=MIT
Information=Nixie clock widget | Based on https://play.google.com/store/apps/details?id=com.fWidget.nixclock

[Variables]
Background=1
DisplaysSeconds=0
Size=2

NumberWidth=(40 * #Size#)
NumberOffsetX=(#NumberWidth# / 2)
BackgroundWidth=(#NumberOffsetX# * 2 + #NumberWidth# * 5 + #DisplaysSeconds# * #NumberWidth# * 3)
BackgroundOffsetY=(#NumberWidth# * 1.7 - #DisplaysSeconds# * 10)

[MeasureTime]
Measure=Time
Format=%I%M%S

[MeasureHourDec]
Measure=String
String=[MeasureTime]
DynamicVariables=1
RegExpSubstitute=1
Substitute="^([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})$":"\1"

[MeasureHourUnit]
Measure=String
String=[MeasureTime]
DynamicVariables=1
RegExpSubstitute=1
Substitute="^([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})$":"\2"

[MeasureMinuteDec]
Measure=String
String=[MeasureTime]
DynamicVariables=1
RegExpSubstitute=1
Substitute="^([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})$":"\3"

[MeasureMinuteUnit]
Measure=String
String=[MeasureTime]
DynamicVariables=1
RegExpSubstitute=1
Substitute="^([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})$":"\4"

[MeasureSecondDec]
Measure=String
String=[MeasureTime]
DynamicVariables=1
RegExpSubstitute=1
Substitute="^([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})$":"\5"

[MeasureSecondUnit]
Measure=String
String=[MeasureTime]
DynamicVariables=1
RegExpSubstitute=1
Substitute="^([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})([0-9]{1})$":"\6"

[MeasureSeparator]
Measure=Calc
Formula=MeasureSeparator = 0 ? 1 : 0
Substitute="0":"dots-off","1":"dots-on"

[ImageBackground]
Meter=Image
ImageName=#@#backgrounds\#Background#
W=#BackgroundWidth#
Y=#BackgroundOffsetY#

[ImageHourDec2]
Meter=Image
ImageName=#@#_.png
W=#NumberWidth#
X=#NumberOffsetX#

[ImageHourDec]
Meter=Image
ImagePath=#@#numbers\
MeasureName=MeasureHourDec
W=#NumberWidth#
X=#NumberOffsetX#

[ImageHourUnit]
Meter=Image
ImagePath=#@#numbers\
MeasureName=MeasureHourUnit
W=#NumberWidth#
X=0R
Y=0r

[ImageHourSeparator]
Meter=Image
ImagePath=#@#numbers\
MeasureName=MeasureSeparator
W=#NumberWidth#
X=0R
Y=0r

[ImageMinuteDec]
Meter=Image
ImagePath=#@#numbers\
MeasureName=MeasureMinuteDec
W=#NumberWidth#
X=0R
Y=0r

[ImageMinuteUnit]
Meter=Image
ImagePath=#@#numbers\
MeasureName=MeasureMinuteUnit
W=#NumberWidth#
X=0R
Y=0r

[ImageMinuteSeparator]
Meter=Image
ImagePath=#@#numbers\
MeasureName=MeasureSeparator
W=#NumberWidth#
X=0R
Y=0r
Hidden=(1-#DisplaysSeconds#)

[ImageSecondDec]
Meter=Image
ImagePath=#@#numbers\
MeasureName=MeasureSecondDec
W=#NumberWidth#
X=0R
Y=0r
Hidden=(1-#DisplaysSeconds#)

[ImageSecondUnit]
Meter=Image
ImagePath=#@#numbers\
MeasureName=MeasureSecondUnit
W=#NumberWidth#
X=0R
Y=0r
Hidden=(1-#DisplaysSeconds#)

NixieClock_1.0.rmskin

test1.gif

Or:

1.jpg

[balala]

I finished it up about an hour and a half ago, thanks for the help, mate.

Does it work well? If you need help in adding a separator or any other question, I'm waiting for the package. Additionally see jsmorley's above post, that's another approach of the same question.

[SilverAzide]

That nixie clock is awesome! I've been a fan of that skin for years. And not only is it cheaper than a real nixie clock, but the tubes are much cheaper and easier to replace if they ever burn out.