# Display Homescreen + Wallpaper Thread

#### Neps18Si

##### Senior Member I have this Graffiti App that i use. I onky wish i could use my letters   Advertisement

• Browncoat3000 and Triple_peaz

#### perkidddoh

##### Senior Member I have this Graffiti App that i use. I onky wish i could use my letters
Damn! I remember that website from like early 2000s, the OG one was Graffiticreator.com. Throwback! Nice wallpaper.

#### CIVIC BIGUS

##### New Member How do I disable the date? I'm sure there was a way of doing it, but I can't find it. Spoils the wallpaper.

#### Mike_R19

##### Senior Member  #### theryan1979

##### Member Maybe just me, but I thought it seemed like an obvious choice for wallpaper and clock background...  How do I get the clock photo without hands? NEED!

#### theryan1979

##### Member How do I get the clock photo without hands? NEED!
Ok I sent you a PM.

#### theryan1979

##### Member How do I get the clock photo without hands? NEED!
Did you get my PM?

#### DallasCRX

##### Senior Member #### scootibum

##### Member I made a wallpaper over the past few hours today, I love the way it turned out, I thought I'd share with everyone. ^_^

Edit: Tweaked a few things and added a dark version.    Last edited:

#### BarracksSi

##### Senior Member Here's the first pass at the 70's-style clock background, and the Python source code to generate it. The code is a bit long and messy, but it's hand-tweaked to get everything aligned nicely. I'll probably at some point add in the equivalent to the yellow inner "km/h" marks as hours 13-24.

https://i.imgur.com/AaQoiZS.jpg Code:
``````import math
from PIL import Image, ImageDraw, ImageFont

def findPointOnCircle(cx, cy, radius, angle):
x = cx + math.sin(math.radians(angle)) * radius
y = cy - math.cos(math.radians(angle)) * radius
x = int(round(x, 0))
y = int(round(y, 0))
return(x,y)

im = Image.new("RGB",(800,480))

fnt = ImageFont.truetype("Eurostile-LT-Std-Demi_16310.ttf", 30)

liner = ImageDraw.Draw(im).line
circle = ImageDraw.Draw(im).ellipse
texter = ImageDraw.Draw(im).text
arcer = ImageDraw.Draw(im).arc

zeros = (0,0)
lowright = (800,480)
center = (800/2,480/2)

white = (255,255,255)
black = (0,0,0)
red = (255,0,0)
green = (0,255,0)
blue = (0,0,255)
gray = (128,128,128)
# This is probably the primary color used for the Civic's clock. It's the Java standard "light gray".
lightGray = (0xD3,0xD3,0xD3)

# Lines and circles for debugging the image.
# liner([zeros, lowright], fill=white,width=1)
# liner([(0,480),(800,0)], fill=white,width=1)
# liner([(0,240),(800,240)], fill=white,width=1)
# liner([(400,0),(400,480)], fill=white,width=1)

# circle([(400-10,240-10),(400+10,240+10)], outline=gray)
# for i in range(10,240,10):
#  circle([(400-i,240-i),(400+i,240+i)], outline=gray)

for i in range(0,12):
pipInside = findPointOnCircle(400,240,130,i*30)
#  pipOutside = findPointOnCircle(400,240,150,i*30)
#  liner([pipInside, pipOutside], fill=green,width=8)
#  pipOutside = findPointOnCircle(400,240,149,i*30)
#  liner([pipInside, pipOutside], fill=blue,width=8)
#  pipOutside = findPointOnCircle(400,240,148,i*30)
#  liner([pipInside, pipOutside], fill=red,width=8)
pipOutside = findPointOnCircle(400,240,148,i*30)
liner([pipInside, pipOutside], fill=lightGray,width=8)

for i in range(0,12):
pipInside = findPointOnCircle(400,240,130,i*30 + 15)
pipOutside = findPointOnCircle(400,240,148,i*30 + 15)
liner([pipInside, pipOutside], fill=lightGray,width=5)

noonTextPoint = findPointOnCircle(400,240,110,0)
noonTextPoint = (noonTextPoint - 20, noonTextPoint - 15)
texter(noonTextPoint, "12", font=fnt, fill=lightGray)

oneTextPoint = findPointOnCircle(400,240,110,30)
oneTextPoint = (oneTextPoint - 10, oneTextPoint - 15)
texter(oneTextPoint, "1", font=fnt, fill=lightGray)

twoTextPoint = findPointOnCircle(400,240,110,60)
twoTextPoint = (twoTextPoint - 7, twoTextPoint - 15)
texter(twoTextPoint, "2", font=fnt, fill=lightGray)

threeTextPoint = findPointOnCircle(400,240,110,90)
threeTextPoint = (threeTextPoint - 5, threeTextPoint - 10)
texter(threeTextPoint, "3", font=fnt, fill=lightGray)

fourTextPoint = findPointOnCircle(400,240,110,120)
fourTextPoint = (fourTextPoint - 10, fourTextPoint - 5)
texter(fourTextPoint, "4", font=fnt, fill=lightGray)

fiveTextPoint = findPointOnCircle(400,240,110,150)
fiveTextPoint = (fiveTextPoint - 10, fiveTextPoint - 10)
texter(fiveTextPoint, "5", font=fnt, fill=lightGray)

sixTextPoint = findPointOnCircle(400,240,110,180)
sixTextPoint = (sixTextPoint - 10, sixTextPoint - 10)
texter(sixTextPoint, "6", font=fnt, fill=lightGray)

sevenTextPoint = findPointOnCircle(400,240,110,210)
sevenTextPoint = (sevenTextPoint - 10, sevenTextPoint - 10)
texter(sevenTextPoint, "7", font=fnt, fill=lightGray)

eightTextPoint = findPointOnCircle(400,240,110,240)
eightTextPoint = (eightTextPoint - 10, eightTextPoint - 5)
texter(eightTextPoint, "8", font=fnt, fill=lightGray)

nineTextPoint = findPointOnCircle(400,240,110,270)
nineTextPoint = (nineTextPoint - 15, nineTextPoint - 10)
texter(nineTextPoint, "9", font=fnt, fill=lightGray)

tenTextPoint = findPointOnCircle(400,240,110,300)
tenTextPoint = (tenTextPoint - 15, tenTextPoint - 15)
texter(tenTextPoint, "10", font=fnt, fill=lightGray)

elevenTextPoint = findPointOnCircle(400,240,110,330)
elevenTextPoint = (elevenTextPoint - 15, elevenTextPoint - 15)
texter(elevenTextPoint, "11", font=fnt, fill=lightGray)

# Draw the equivalent of the lower-case "mpg" at the bottom of the dial.
hondaTextPoint = findPointOnCircle(400,240,170,180)
hondaTextPoint = (hondaTextPoint - 45, hondaTextPoint)
texter(hondaTextPoint, "honda", font=fnt, fill=lightGray)

# Draw the "low gear range" arc from 8 o'clock to noon, just inside the numbers.
# Include the little "L" in the circle, and the pips on the ends of the arc.
arcer([(400-80,240-80),(400+80,240+80)], 150, 270, fill=lightGray)

lowPipInside = findPointOnCircle(400,240,80,240)
lowPipOutside = findPointOnCircle(400,240,85,240)
liner([lowPipInside, lowPipOutside], fill=lightGray,width=1)
highPipInside = findPointOnCircle(400,240,80,0)
highPipOutside = findPointOnCircle(400,240,85,0)
liner([highPipInside, highPipOutside], fill=lightGray,width=1)

# Put the "L" in the circle between 10 and 11 o'clock directly on the arc.
# Arguably it should go between right under 10, but that looks weird and this
# covers up an ugly part of the arc.
lilCircleCenter = findPointOnCircle(400,240,80,320)
circle([(lilCircleCenter-10,lilCircleCenter-10),(lilCircleCenter+10,lilCircleCenter+10)],
outline=lightGray, fill=black)
lilfnt = ImageFont.truetype("Eurostile-LT-Std-Demi_16310.ttf", 12)
texter((lilCircleCenter-3,lilCircleCenter-3), "L", font=lilfnt, fill=lightGray)

# im.save("that_70s_clock.png","PNG")
# im.save("that_70s_clock.gif","GIF")
im.save("that_70s_clock.jpg","JPEG")``````
Thanks to your expertly-laid-out dial, I was able to paste in the new "California" clock face from my Apple Watch and have it line up correctly. I'd give a dozen thumbs-up to your post if I could.        #### BarracksSi

##### Senior Member Here's the first pass at the 70's-style clock background, and the Python source code to generate it. The code is a bit long and messy, but it's hand-tweaked to get everything aligned nicely. I'll probably at some point add in the equivalent to the yellow inner "km/h" marks as hours 13-24.

https://i.imgur.com/AaQoiZS.jpg Code:
``````import math
from PIL import Image, ImageDraw, ImageFont

def findPointOnCircle(cx, cy, radius, angle):
x = cx + math.sin(math.radians(angle)) * radius
y = cy - math.cos(math.radians(angle)) * radius
x = int(round(x, 0))
y = int(round(y, 0))
return(x,y)

im = Image.new("RGB",(800,480))

fnt = ImageFont.truetype("Eurostile-LT-Std-Demi_16310.ttf", 30)

liner = ImageDraw.Draw(im).line
circle = ImageDraw.Draw(im).ellipse
texter = ImageDraw.Draw(im).text
arcer = ImageDraw.Draw(im).arc

zeros = (0,0)
lowright = (800,480)
center = (800/2,480/2)

white = (255,255,255)
black = (0,0,0)
red = (255,0,0)
green = (0,255,0)
blue = (0,0,255)
gray = (128,128,128)
# This is probably the primary color used for the Civic's clock. It's the Java standard "light gray".
lightGray = (0xD3,0xD3,0xD3)

# Lines and circles for debugging the image.
# liner([zeros, lowright], fill=white,width=1)
# liner([(0,480),(800,0)], fill=white,width=1)
# liner([(0,240),(800,240)], fill=white,width=1)
# liner([(400,0),(400,480)], fill=white,width=1)

# circle([(400-10,240-10),(400+10,240+10)], outline=gray)
# for i in range(10,240,10):
#  circle([(400-i,240-i),(400+i,240+i)], outline=gray)

for i in range(0,12):
pipInside = findPointOnCircle(400,240,130,i*30)
#  pipOutside = findPointOnCircle(400,240,150,i*30)
#  liner([pipInside, pipOutside], fill=green,width=8)
#  pipOutside = findPointOnCircle(400,240,149,i*30)
#  liner([pipInside, pipOutside], fill=blue,width=8)
#  pipOutside = findPointOnCircle(400,240,148,i*30)
#  liner([pipInside, pipOutside], fill=red,width=8)
pipOutside = findPointOnCircle(400,240,148,i*30)
liner([pipInside, pipOutside], fill=lightGray,width=8)

for i in range(0,12):
pipInside = findPointOnCircle(400,240,130,i*30 + 15)
pipOutside = findPointOnCircle(400,240,148,i*30 + 15)
liner([pipInside, pipOutside], fill=lightGray,width=5)

noonTextPoint = findPointOnCircle(400,240,110,0)
noonTextPoint = (noonTextPoint - 20, noonTextPoint - 15)
texter(noonTextPoint, "12", font=fnt, fill=lightGray)

oneTextPoint = findPointOnCircle(400,240,110,30)
oneTextPoint = (oneTextPoint - 10, oneTextPoint - 15)
texter(oneTextPoint, "1", font=fnt, fill=lightGray)

twoTextPoint = findPointOnCircle(400,240,110,60)
twoTextPoint = (twoTextPoint - 7, twoTextPoint - 15)
texter(twoTextPoint, "2", font=fnt, fill=lightGray)

threeTextPoint = findPointOnCircle(400,240,110,90)
threeTextPoint = (threeTextPoint - 5, threeTextPoint - 10)
texter(threeTextPoint, "3", font=fnt, fill=lightGray)

fourTextPoint = findPointOnCircle(400,240,110,120)
fourTextPoint = (fourTextPoint - 10, fourTextPoint - 5)
texter(fourTextPoint, "4", font=fnt, fill=lightGray)

fiveTextPoint = findPointOnCircle(400,240,110,150)
fiveTextPoint = (fiveTextPoint - 10, fiveTextPoint - 10)
texter(fiveTextPoint, "5", font=fnt, fill=lightGray)

sixTextPoint = findPointOnCircle(400,240,110,180)
sixTextPoint = (sixTextPoint - 10, sixTextPoint - 10)
texter(sixTextPoint, "6", font=fnt, fill=lightGray)

sevenTextPoint = findPointOnCircle(400,240,110,210)
sevenTextPoint = (sevenTextPoint - 10, sevenTextPoint - 10)
texter(sevenTextPoint, "7", font=fnt, fill=lightGray)

eightTextPoint = findPointOnCircle(400,240,110,240)
eightTextPoint = (eightTextPoint - 10, eightTextPoint - 5)
texter(eightTextPoint, "8", font=fnt, fill=lightGray)

nineTextPoint = findPointOnCircle(400,240,110,270)
nineTextPoint = (nineTextPoint - 15, nineTextPoint - 10)
texter(nineTextPoint, "9", font=fnt, fill=lightGray)

tenTextPoint = findPointOnCircle(400,240,110,300)
tenTextPoint = (tenTextPoint - 15, tenTextPoint - 15)
texter(tenTextPoint, "10", font=fnt, fill=lightGray)

elevenTextPoint = findPointOnCircle(400,240,110,330)
elevenTextPoint = (elevenTextPoint - 15, elevenTextPoint - 15)
texter(elevenTextPoint, "11", font=fnt, fill=lightGray)

# Draw the equivalent of the lower-case "mpg" at the bottom of the dial.
hondaTextPoint = findPointOnCircle(400,240,170,180)
hondaTextPoint = (hondaTextPoint - 45, hondaTextPoint)
texter(hondaTextPoint, "honda", font=fnt, fill=lightGray)

# Draw the "low gear range" arc from 8 o'clock to noon, just inside the numbers.
# Include the little "L" in the circle, and the pips on the ends of the arc.
arcer([(400-80,240-80),(400+80,240+80)], 150, 270, fill=lightGray)

lowPipInside = findPointOnCircle(400,240,80,240)
lowPipOutside = findPointOnCircle(400,240,85,240)
liner([lowPipInside, lowPipOutside], fill=lightGray,width=1)
highPipInside = findPointOnCircle(400,240,80,0)
highPipOutside = findPointOnCircle(400,240,85,0)
liner([highPipInside, highPipOutside], fill=lightGray,width=1)

# Put the "L" in the circle between 10 and 11 o'clock directly on the arc.
# Arguably it should go between right under 10, but that looks weird and this
# covers up an ugly part of the arc.
lilCircleCenter = findPointOnCircle(400,240,80,320)
circle([(lilCircleCenter-10,lilCircleCenter-10),(lilCircleCenter+10,lilCircleCenter+10)],
outline=lightGray, fill=black)
lilfnt = ImageFont.truetype("Eurostile-LT-Std-Demi_16310.ttf", 12)
texter((lilCircleCenter-3,lilCircleCenter-3), "L", font=lilfnt, fill=lightGray)

# im.save("that_70s_clock.png","PNG")
# im.save("that_70s_clock.gif","GIF")
im.save("that_70s_clock.jpg","JPEG")``````
Hey, I had to choose a different font name to run this on macOS. A couple different tries and the "honda" at the bottom is off center, and the numerals are also off to the left. What should I look at to fix it?

(EDIT) Ok, I'm figuring it out -- change the parameters for each object (sixTextPoint, hondaTextPoint, etc) and move them by pixels as needed. Changed version (still in progress; "IIII" is still too low, for example) shown in red.

Shibefur, outstanding work once again.

View attachment 177438   #### Attachments

• 0 bytes Views: 0
Last edited:

#### Jay_Tech

##### Senior Member Anyone know if there is a way to get the live wallpaper to stay on at all times? The second its put it in gear it goes to a default wallpaper.

#### KYRiverDog

##### New Member (Attempt 1) I initially tried changing the wallpaper by going through the settings/clock-wallpaper, and in the wallpaper setting there was a way to add 5 images (max) via USB thumb drive. Here you could preview what they'd look like or delete them from the head unit. However, I was never able to get these to successfully show up as wallpaper.

(Attempt 2) I then read some of the posts here and was able to change the wallpaper setting from the blank screen in the main menu via upload of an individual jpg via USB from a thumb drive. When the thumb drive was plugged in the display showed "Gallery", "Wallpapers", and I think a "Live Wallpapers" folders, as well as images found on the thumb drive. It allowed me to crop to specs (which I couldn't do in attempt #1).

What is puzzling is why did none of the 5 images I saved to the head unit in attempt #1 show up in any of the folders during attempt #2? Id like to be able to somewhat easily change wallpapers w/o having to constantly have a thumb drive in hand, but is that possible?. To change the wallpaper does one always go thru a USB connected device and have only one image at a time in storage? If so, what's the point of being able to load the 5 images as described in step #1? Thanks...

#### BarracksSi

##### Senior Member (Attempt 1) I initially tried changing the wallpaper by going through the settings/clock-wallpaper, and in the wallpaper setting there was a way to add 5 images (max) via USB thumb drive. Here you could preview what they'd look like or delete them from the head unit. However, I was never able to get these to successfully show up as wallpaper.

(Attempt 2) I then read some of the posts here and was able to change the wallpaper setting from the blank screen in the main menu via upload of an individual jpg via USB from a thumb drive. When the thumb drive was plugged in the display showed "Gallery", "Wallpapers", and I think a "Live Wallpapers" folders, as well as images found on the thumb drive. It allowed me to crop to specs (which I couldn't do in attempt #1).

What is puzzling is why did none of the 5 images I saved to the head unit in attempt #1 show up in any of the folders during attempt #2? Id like to be able to somewhat easily change wallpapers w/o having to constantly have a thumb drive in hand, but is that possible?. To change the wallpaper does one always go thru a USB connected device and have only one image at a time in storage? If so, what's the point of being able to load the 5 images as described in step #1? Thanks...
I think they store the Clock Wallpaper images in a totally different directory. Shoot, I think the teams that wrote the background wallpaper selector app and the Clock app didn't interact with each other at all, which is why they're so different.

A week or two ago, I tried to remember how to store several images on-device as homescreen wallpaper, but I had forgotten.

And in the Clock app for choosing wallpaper, the stupid UI thinks that you've selected a file to download just by touching it -- which you have to do just to Preview it.

I want to know who Honda hired to create this UI just so I'll know to never ever hire them for any project.

#### Hieberrr

##### New Member I'm hoping to purchase a 2019/2020 hatchback in the next couple of months, but made these in case anyone is interested in using them. The intent is to have the menu items on the left side.    • BarracksSi

Advertisement

Advertisement