Display Homescreen + Wallpaper Thread

Shibefur

Member
Joined
Aug 17, 2018
Threads
1
Messages
25
Reaction score
34
Location
Dairyland, USA
Vehicle(s)
2018 Civic Sedan EX-TA, 2002 Jeep Wrangler TJ SE, 1997 Camaro Z28 LT1
Country flag
Shibefur, that's out-frickin' standing.

So, the dial diameter across the outboard edges of opposing hour markers would be 300 pixels?
Well, yes. And no.

Basically, yes, roughly 300 across, left end of left pip to right end of right pip.

But it gets complicated when we're talking exact pixels. I would call it 296 pixels across if we're being as exact as we can. Which is tricky.

One reason things get vague is because, at least on my car, I can only upload a .JPG as a clock background. It ignores .PNG and .GIF images. And .JPGs are lossy and messy especially when you start looking at individual pixels, while .PNGs aren't compressed like that.

I did a test to see how much that is influencing things. I drew the pips at 20 pixels long in green from center + 130 to center + 150 pixels, then overlayed with pips 19 pixels long in blue, then overlaid with 18 pixel-long pips in red. Here's the .JPG version of the original image.

https://i.imgur.com/ZKABxAj.jpg

Honda Civic 10th gen Display Homescreen + Wallpaper Thread ZKABxA


And here's the .PNG version. Same exact image, just saved as .PNG. If you zoom in on any of the colored pips, you'll see that the edges are much cleaner, and generally you can see the red-blue-green progression. Not so much with the .JPG version. Plus, the .JPG has a lot of random trash around the pips due to smearing from the image compression process.

https://i.imgur.com/QUYh6LQ.png

Honda Civic 10th gen Display Homescreen + Wallpaper Thread QUYh6LQ


Here's the result on-screen of loading the .JPG version, with the clock's light-gray pips overlaying the image's red/blue/green pips.

Honda Civic 10th gen Display Homescreen + Wallpaper Thread j48dCTz


You can pretty consistently see the ends of the green (image) pips sticking out past the gray (clock) pips. The red peeks out on the 3 o'clock and 6 o'clock pips too, which might just be aliasing error (like the red sticking out on the sides of some pips).

[Also, the camera really picks up the .JPG compression trash. And the crud on the screen, even though I just cleaned and swiffered it.]

Soooo, from looking at that, yeah, I'd say that the ends of the clock pips are at +- 148 pixels from the center of the screen, or 296 pixels end-to-end. But probably for most things, calling it 300 is close enough.

The clock pips are drawn with a subtle "bevel" effect, that might be causing them to be drawn a pixel or two shorter. Or not, who knows.
 

Shibefur

Member
Joined
Aug 17, 2018
Threads
1
Messages
25
Reaction score
34
Location
Dairyland, USA
Vehicle(s)
2018 Civic Sedan EX-TA, 2002 Jeep Wrangler TJ SE, 1997 Camaro Z28 LT1
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

Honda Civic 10th gen Display Homescreen + Wallpaper Thread AaQoiZS


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")
 

MR.CAMACHO

Member
First Name
Jorge
Joined
Aug 22, 2018
Threads
0
Messages
6
Reaction score
7
Location
Riverside California
Vehicle(s)
2018 Civic Hatchback EX
Our cars aren't complete without a little personalization. I'd like to see your homescreen and wallpaper.

To get us started here is something I made for my car. I'm just a novice so don't be too harsh.

1920*1080
Civic X BG 1920x1080.png
800*480
Civic X BG Smooth.png
800*480
Civic X BG.png
IMG_20160119_172149.jpg
****^^^^^nice work id love this w black background and lime green pic and an apple sign can u hook me up
 


civicls

Senior Member
Joined
Aug 8, 2018
Threads
27
Messages
974
Reaction score
488
Location
Upstate NY
Vehicle(s)
2017 Honda Civic EX-T, 18' Odyssey Elite, 07' Sienna
Country flag
is there a way to keep the screen completely blank and just wallpaper while driving?
i know closest option is the info screen with the time.. but i don't even want the time there! haha i just want my wallpaper showing..
Yes, press info, then wallpaper. Viola
 

Riko

Senior Member
First Name
Erik
Joined
Jan 18, 2019
Threads
16
Messages
178
Reaction score
123
Location
Belgium, Ghent
Vehicle(s)
Civic 1.0L Turbo, CVT, Elegance trim
Vehicle Showcase
1
Country flag
Deciding between two options here tell me which one you vote for...also feel that the display default is too bright to feel safe using it at night in the dark. Lights up like an iPad from 10 feet away. No tint for me yet.

20170123_115328.jpg


20170123_120542.jpg
you know thats the Honda Motorcycle division logo right? :)

Anyhow, I am surprised nobody has attempted to make this their wallpaper in all the 27 pages? :eek:
I'll make an attempt at testing these and see how they work out...

Honda Civic 10th gen Display Homescreen + Wallpaper Thread evo

Honda Civic 10th gen Display Homescreen + Wallpaper Thread evo2

Honda Civic 10th gen Display Homescreen + Wallpaper Thread evo2-breed


Honda Civic 10th gen Display Homescreen + Wallpaper Thread logo-evo

Honda Civic 10th gen Display Homescreen + Wallpaper Thread logo-evo2

Honda Civic 10th gen Display Homescreen + Wallpaper Thread logo-evo2-breed

Honda Civic 10th gen Display Homescreen + Wallpaper Thread logo-silouhette

Honda Civic 10th gen Display Homescreen + Wallpaper Thread silouhette


I assume the narrow wallpapers are gonna give issues, we'll see.

To be continued :)

If they dont work out, I'll keep it simple, in the spirit of 'Less is more'
Honda Civic 10th gen Display Homescreen + Wallpaper Thread LOGO
 

Riko

Senior Member
First Name
Erik
Joined
Jan 18, 2019
Threads
16
Messages
178
Reaction score
123
Location
Belgium, Ghent
Vehicle(s)
Civic 1.0L Turbo, CVT, Elegance trim
Vehicle Showcase
1
Country flag
Yeah, no problem!

BlMbgj6.jpg


(Edit: Fixed the side vent)
Ah man if only I'd gone back a page a few hours ago. This is a very important step that just ocurred to me a few minutes ago. I was sitting in the car with three different USB devices and it wasn't recognizing any of them.

I went with a minimalist image that has my production number.

civic si 2.jpg
Here's a clock wallpaper & normal wallpaper I created for my new Honda Civic Prestige.

IMG_3057.JPG


IMG_3058.JPG


Honda Civic Clock.jpg


Honda Civic Wallpaper.jpg
best wallpapers and clock I've found in the 27 pages, by far
 
Last edited:

Riko

Senior Member
First Name
Erik
Joined
Jan 18, 2019
Threads
16
Messages
178
Reaction score
123
Location
Belgium, Ghent
Vehicle(s)
Civic 1.0L Turbo, CVT, Elegance trim
Vehicle Showcase
1
Country flag
IMG-1929.jpg

IMG-1932.jpg

IMG-1933.jpg


The Honda logo has to be moved up a lill bit and than its perfect :)
I'll upload the picture here as soon as I have finished it.

The one with the side profile picture of a white Civic might also look great!
As soon as I get bored of my current background, I might try that one.

EDIT: this version should fit better
logo-evo-v2.jpg
 
Last edited:

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
Maybe just me, but I thought it seemed like an obvious choice for wallpaper and clock background...

Honda Civic 10th gen Display Homescreen + Wallpaper Thread 20190127_164811
Honda Civic 10th gen Display Homescreen + Wallpaper Thread 20190127_164826
 


Riko

Senior Member
First Name
Erik
Joined
Jan 18, 2019
Threads
16
Messages
178
Reaction score
123
Location
Belgium, Ghent
Vehicle(s)
Civic 1.0L Turbo, CVT, Elegance trim
Vehicle Showcase
1
Country flag
thats actually funny :agree:

updated mine so the logos dont intertwine with the menu text.
Honda Civic 10th gen Display Homescreen + Wallpaper Thread IMG-1984
 
Last edited:

fenix-silver

Senior Member
Joined
Nov 12, 2018
Threads
27
Messages
1,184
Reaction score
968
Location
Central PA
Vehicle(s)
2019 Si
Country flag
Just created this one. Nice and simple.

Honda Civic 10th gen Display Homescreen + Wallpaper Thread honda_hpd_black
 

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


 


Top