Big Clock

Post Reply
User avatar
rbytes
Posts: 1338
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone 11 Pro Max
iPad Pro 11
MacBook
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

Big Clock

Post by rbytes »

It was a good challenge to figure out how to make a clock that would be readable from across the room. A timer could be made re-using most of the same code. Someday I'm sure we will have SPL commands for font style and size, and this technique won't be needed as much. Did any of you ever own an Amiga? They had something unique in the computing world - "colorfonts". These were bitmapped fonts that were beautifully drawn. I think the letters I used here may have come from one of them.

I have no doubt that the code can be made more efficient. For debugging purposes, I deliberately repeated certain structures to minimize any confusion over the program flow.

It works fine, but there is occasional flickering of the seconds units as the digits change. I'm not sure why that happens. The other digits seem pretty solid. The flicker seems to be random.

Use this Dropbox link, since you will need the images for the digits and the colon. They need to be in the Resources folder at the same location as the program.

https://www.dropbox.com/sh/087jp2pg82ou ... ALGza?dl=0

Code: Select all

''
Big Clock by rbytes
August 2017
Uses graphic images of the 10 digits and the colon
''
'#.drawrect(160,255,343,500)        ' used only for setting digit sizes and offsets
xn=[1,170,405,570,805,970]          ' reference x positions using p variable
hn=250;yn=230                       ' reference height and y position
#.scrclear(.5,.5,.5)

' the character images vary in size and xy offsets so this array stores correction data
q=[[-15,70,-6],[-2,40,18],[10,15,2],[-6,32,-16],[-8,41,22],[-10,42,20],[-10,37,-11],[-4,-3,-15],[20,25,-1],[-15,21,20]]

' the "s" flags prevent #.image and show being executed more than once per image object
s1,s2,s3,s4,s5,s6 = 0

' the "flag" flags only allow any digit to be refreshed once when a second, minute or hour changes
flag1,flag2,flag3,flag4,flag5,flag6 = 0

' draw the left colon
b = #.image                       ' colon image
b.source = "resources\cln.png"
b.height = 130
b.x = 373
b.y = 305
#.show(b)

' draw the right colon
c = #.image                       ' colon image
c.source = "resources\cln.png"
c.height = 130
c.x = 770
c.y = 305
#.show(c)

>
' check the time
hor,min,sec = #.now() 'time

'units of seconds
sc = #.int(sec-(sec>9)*#.lower(sec/10)*10)
? sc=0, sc = 10
e6 = sc
p = 6
? e6 != flag6
  nm="resources\"+e6+".png"
  h=hn+q[1,e6];x=xn[p]+q[2,e6];y=yn+q[3,e6]
  ? e6 = 1, x -= 40
  f6(s6,nm,h,x,y)
.
flag6 = e6
s6 = 1

' tens of seconds
sect = #.lower(sec/10)
? sect=0, sect = 10
e5 = sect
p=5
? e5 != flag5
  nm="resources\"+e5+".png"
  h=hn+q[1,e5];x=xn[p]+q[2,e5];y=yn+q[3,e5]
  f5(s5,nm,h,x,y)
.
flag5 = e5
s5 = 1

' units of minutes
mn = #.int(min-(min>9)*#.lower(min/10)*10)
? mn=0, mn = 10
e4 = mn
p=4
? e4 != flag4
  nm="resources\"+e4+".png"
  h=hn+q[1,e4];x=xn[p]+q[2,e4];y=yn+q[3,e4]
  f4(s4,nm,h,x,y)
.
flag4 = e4
s4 = 1

' tens of minutes
mint = #.lower(min/10)
? mint=0, mint = 10
e3 = mint
p=3
? e3 != flag3
  nm="resources\"+e3+".png"
  h=hn+q[1,e3];x=xn[p]+q[2,e3];y=yn+q[3,e3]
  ? e3 = 1, x += 5
  f3(s3,nm,h,x,y)
.
flag3 = e3
s3 = 1

' units of hours
hr = #.int(hor-(hor>9)*#.lower(hor/10)*10)
? hr=0, hr = 10
e2 = hr
p=2
? e2 != flag2
  nm="resources\"+e2+".png"
  h=hn+q[1,e2];x=xn[p]+q[2,e2];y=yn+q[3,e2]
  f2(s2,nm,h,x,y)
.
flag2 = e2
s2 = 1

' tens of hours
hort = #.lower(hor/10)
? hort=0, hort = 10
e1 = hort
p=1
? e1 != flag1
  nm="resources\"+e1+".png"
  h=hn+q[1,e1];x=xn[p]+q[2,e1];y=yn+q[3,e1]
  ? e1 = 1, x += 10
  f1(s1,nm,h,x,y)
.
flag1 = e1
s1 = 1

<

f1(s1,src,h,x,y) =      ' hours tens digit
  ? s1=0
    i1 = #.image
  .
  i1.source = src
  i1.height = h
  i1.x = x
  i1.y = y
  ? s1=0, #.show(i1)
.

f2(s2,src,h,x,y) =      ' hours units digit
  ? s2=0
    i2 = #.image
  .
'  i2 = #.image
  i2.source = src
  i2.height = h
  i2.x = x
  i2.y = y
  ? s2=0, #.show(i2)
.

f3(s3,src,h,x,y) =      ' minutes tens digit
  ? s3=0
    i3 = #.image
  .
'  i3 = #.image
  i3.source = src
  i3.height = h
  i3.x = x
  i3.y = y
  ? s3=0, #.show(i3)
.

f4(s4,src,h,x,y) =      ' minutes units digit
  ? s4=0
    i4 = #.image
  .
'  i4 = #.image
  i4.source = src
  i4.height = h
  i4.x = x
  i4.y = y
  ? s4=0, #.show(i4)
.

f5(s5,src,h,x,y) =      ' seconds tens digit
  ? s5=0
    i5 = #.image
  .
'  i5 = #.image
  i5.source = src
  i5.height = h
  i5.x = x
  i5.y = y
  ? s5=0, #.show(i5)
.

f6(s6,src,h,x,y) =      ' seconds units digit
  ? s6 = 0
    i6 = #.image
  .
  i6.source = src
  i6.height = h
  i6.x = x
  i6.y = y
  ? s6 = 0, #.show(i6)
.
Attachments
Screenshot (15).png
Screenshot (15).png (717.98 KiB) Viewed 2829 times
Last edited by rbytes on Tue Aug 29, 2017 2:20 pm, edited 1 time in total.
The only thing that gets me down is gravity...

User avatar
Mr. Kibernetik
Site Admin
Posts: 4786
Joined: Mon Nov 19, 2012 10:16 pm
My devices: iPhone, iPad, MacBook
Location: Russia
Flag: Russia

Re: Big Clock

Post by Mr. Kibernetik »

Very interesting!
Yes, font functions will be added soon.
I will check the flickering.

I have no "zero" digit in my clock - it is an empty space instead.
Such code as

Code: Select all

s1 = 0;s2 = 0;s3 = 0;s4 = 0;s5 = 0;s6 = 0
can be written as

Code: Select all

s1,s2,s3,s4,s5,s6 = 0
Your digit changing cycle runs very fast - many times a second. You can go to digit changing only if digit must be changed, otherwise just loop and wait.
Снимок.PNG
Снимок.PNG (280.83 KiB) Viewed 2816 times

User avatar
Mr. Kibernetik
Site Admin
Posts: 4786
Joined: Mon Nov 19, 2012 10:16 pm
My devices: iPhone, iPad, MacBook
Location: Russia
Flag: Russia

Re: Big Clock

Post by Mr. Kibernetik »

Flickering can be caused by extremely frequent image reloading of seconds image.

User avatar
rbytes
Posts: 1338
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone 11 Pro Max
iPad Pro 11
MacBook
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

Re: Big Clock

Post by rbytes »

Yes. That is why I created a flag variable that only allows one reload for any changed digit. Would you please let me know if I coded that correctly?

I will start on making the code more efficient, including the handy shortcut you suggest.

Re the missing zero image. There was a faulty image saved to Dropbox. I will attach the working zero image. It has also been corrected in Dropbox.
Attachments
0.png
0.png (87.53 KiB) Viewed 2813 times
The only thing that gets me down is gravity...

User avatar
Mr. Kibernetik
Site Admin
Posts: 4786
Joined: Mon Nov 19, 2012 10:16 pm
My devices: iPhone, iPad, MacBook
Location: Russia
Flag: Russia

Re: Big Clock

Post by Mr. Kibernetik »

Yes, you are doing correctly, because each
I = #.image
just initializes object "I" as an image, sets image coordinates, source, etc. to default values.

What you are doing maybe not the best way is calling "f6" function many times a second - this executes the line
i6.source = src
many times a second. And executing this line sets image source to image again and again, causing it to reload the image many times a second.

User avatar
Mr. Kibernetik
Site Admin
Posts: 4786
Joined: Mon Nov 19, 2012 10:16 pm
My devices: iPhone, iPad, MacBook
Location: Russia
Flag: Russia

Re: Big Clock

Post by Mr. Kibernetik »

About missing zeroes.
Here in your code

Code: Select all

sect = #.lower(sec/10)
? sect=0, sect = 10
e5 = sect
p=5
? e5 != flag5
  nm="resources\"+e5+".png"
  h=hn+q[1,e5];x=xn[p]+q[2,e5];y=yn+q[3,e5]
  f5(s5,nm,h,x,y)
.
if sect is 0 then you set sect to 10
and then nm is "resources\10.png" instead of "0.png"

User avatar
rbytes
Posts: 1338
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone 11 Pro Max
iPad Pro 11
MacBook
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

Re: Big Clock

Post by rbytes »

Yes, I see. The zero needs to have its name changed to 10.png. It was simpler to name it that way, because the array that contains the size and xy offsets can not be given elements named 0. I have attached the 0 image, properly named as 10.png

Also I looked at why I was calling the seconds units function more than once for a changed digit. I had created the "flag" flag6 variable to prevent this, but then I forgot to add the code to the seconds units (function f6)! :o :x
All of the other functions were flagged properly.

This has now been fixed, and there are no more flickering seconds. ;)
Attachments
10.png
10.png (87.53 KiB) Viewed 2806 times
The only thing that gets me down is gravity...

User avatar
Mr. Kibernetik
Site Admin
Posts: 4786
Joined: Mon Nov 19, 2012 10:16 pm
My devices: iPhone, iPad, MacBook
Location: Russia
Flag: Russia

Re: Big Clock

Post by Mr. Kibernetik »

Yes, everything is working now :!:

User avatar
Mr. Kibernetik
Site Admin
Posts: 4786
Joined: Mon Nov 19, 2012 10:16 pm
My devices: iPhone, iPad, MacBook
Location: Russia
Flag: Russia

Re: Big Clock

Post by Mr. Kibernetik »

rbytes wrote:
Tue Aug 29, 2017 1:30 am
Someday I'm sure we will have SPL commands for font style and size, and this technique won't be needed as much.
Version with font functions is published.

Post Reply