Display Homescreen + Wallpaper Thread

CIVIC BIGUS

New Member
Joined
Sep 26, 2018
Threads
0
Messages
2
Reaction score
0
Location
Tf10 7er
Vehicle(s)
Civic
Country flag
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.
 


DallasCRX

Senior Member
First Name
Dallas
Joined
Sep 24, 2018
Threads
4
Messages
203
Reaction score
251
Location
Barrie, ON
Vehicle(s)
1980 Honda GL1100 GoldWing Interstate, 1986 Honda CRX Si, 2009 Honda CRF250X, 2009 Aprilia Shiver, 2010 Nissan Frontier, 2019 Honda Civic Si Coupe
Country flag

scootibum

Member
First Name
Mark
Joined
Feb 11, 2018
Threads
3
Messages
37
Reaction score
35
Location
Texas
Vehicle(s)
FC3
Country flag
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.

Honda Civic 10th gen Display Homescreen + Wallpaper Thread Honda Wallpaper-01


Honda Civic 10th gen Display Homescreen + Wallpaper Thread Honda Wallpaper-02


Honda Civic 10th gen Display Homescreen + Wallpaper Thread Honda Wallpaper-03


Honda Civic 10th gen Display Homescreen + Wallpaper Thread Honda Wallpaper-04
 
Last edited:

BarracksSi

Senior Member
Joined
Apr 1, 2017
Threads
13
Messages
2,188
Reaction score
1,298
Location
DC
Vehicle(s)
'17 Civic Sport Touring Hatch; '17 CR-V EX. Formerly '02 EP3.
Country flag
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

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[0] - 20, noonTextPoint[1] - 15)
texter(noonTextPoint, "12", font=fnt, fill=lightGray)

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

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

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

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

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

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

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

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

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

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

elevenTextPoint = findPointOnCircle(400,240,110,330)
elevenTextPoint = (elevenTextPoint[0] - 15, elevenTextPoint[1] - 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[0] - 45, hondaTextPoint[1])
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[0]-10,lilCircleCenter[1]-10),(lilCircleCenter[0]+10,lilCircleCenter[1]+10)],
  outline=lightGray, fill=black)
lilfnt = ImageFont.truetype("Eurostile-LT-Std-Demi_16310.ttf", 12)
texter((lilCircleCenter[0]-3,lilCircleCenter[1]-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.

Honda Civic 10th gen Display Homescreen + Wallpaper Thread IMG_8429.JPG


Honda Civic 10th gen Display Homescreen + Wallpaper Thread IMG_8428.JPG


Honda Civic 10th gen Display Homescreen + Wallpaper Thread Clock California watchOS 6


Honda Civic 10th gen Display Homescreen + Wallpaper Thread Clock Civic California carbon reflection


Honda Civic 10th gen Display Homescreen + Wallpaper Thread Clock California Green watchOS 6


Honda Civic 10th gen Display Homescreen + Wallpaper Thread Clock California Blue watchOS 6


Honda Civic 10th gen Display Homescreen + Wallpaper Thread Clock California Red watchOS 6


Honda Civic 10th gen Display Homescreen + Wallpaper Thread Clock California Red2 watchOS 6
 


BarracksSi

Senior Member
Joined
Apr 1, 2017
Threads
13
Messages
2,188
Reaction score
1,298
Location
DC
Vehicle(s)
'17 Civic Sport Touring Hatch; '17 CR-V EX. Formerly '02 EP3.
Country flag
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

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[0] - 20, noonTextPoint[1] - 15)
texter(noonTextPoint, "12", font=fnt, fill=lightGray)

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

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

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

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

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

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

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

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

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

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

elevenTextPoint = findPointOnCircle(400,240,110,330)
elevenTextPoint = (elevenTextPoint[0] - 15, elevenTextPoint[1] - 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[0] - 45, hondaTextPoint[1])
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[0]-10,lilCircleCenter[1]-10),(lilCircleCenter[0]+10,lilCircleCenter[1]+10)],
  outline=lightGray, fill=black)
lilfnt = ImageFont.truetype("Eurostile-LT-Std-Demi_16310.ttf", 12)
texter((lilCircleCenter[0]-3,lilCircleCenter[1]-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

Honda Civic 10th gen Display Homescreen + Wallpaper Thread that_70s_clock_redux


Honda Civic 10th gen Display Homescreen + Wallpaper Thread that_roman_clock


Honda Civic 10th gen Display Homescreen + Wallpaper Thread that_roman_clock_red
 

Attachments

  • 0 bytes Views: 0
Last edited:

Jay_Tech

Senior Member
First Name
Jarrett
Joined
Jul 23, 2019
Threads
1
Messages
137
Reaction score
111
Location
Kawartha Lakes Ontario
Vehicle(s)
2019 Honda Civic Si
Country flag
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
First Name
J
Joined
Nov 7, 2019
Threads
2
Messages
4
Reaction score
0
Location
Lexington KY
Vehicle(s)
2019 Sonic Gray Pearl CTR
Country flag
(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
Joined
Apr 1, 2017
Threads
13
Messages
2,188
Reaction score
1,298
Location
DC
Vehicle(s)
'17 Civic Sport Touring Hatch; '17 CR-V EX. Formerly '02 EP3.
Country flag
(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
Joined
Dec 8, 2019
Threads
0
Messages
2
Reaction score
1
Location
Toronto, Canada
Vehicle(s)
2020 Civic Sport Hatchback
Country flag
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.

Honda Civic 10th gen Display Homescreen + Wallpaper Thread Civic - Hatchback A NSR


Honda Civic 10th gen Display Homescreen + Wallpaper Thread Civic - Hatchback A YSR


Honda Civic 10th gen Display Homescreen + Wallpaper Thread Civic - Hatchback M NSR


Honda Civic 10th gen Display Homescreen + Wallpaper Thread Civic - Hatchback M YSR
 


 


Top