Advertisement

Display Homescreen + Wallpaper Thread

Shibefur

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

ZKABxAj.jpg


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

QUYh6LQ.png


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.

j48dCTz.jpg


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.



Advertisement


 

Shibefur

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

MR.CAMACHO

Member
First Name
Jorge
Joined
Aug 22, 2018
Messages
6
Reaction score
7
Location
Riverside California
Car(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
Messages
975
Reaction score
472
Location
Upstate NY
Car(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
Messages
155
Reaction score
101
Location
Belgium, Ghent
Car(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...

evo.jpg

evo2.jpg

evo2-breed.jpg


logo-evo.jpg

logo-evo2.jpg

logo-evo2-breed.jpg

logo-silouhette.png

silouhette.png


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'
LOGO.jpg
 

Riko

Senior Member
First Name
Erik
Joined
Jan 18, 2019
Messages
155
Reaction score
101
Location
Belgium, Ghent
Car(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
Messages
155
Reaction score
101
Location
Belgium, Ghent
Car(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
Messages
164
Reaction score
216
Location
Barrie, ON
Car(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...

20190127_164811.jpg
20190127_164826.jpg
 

Riko

Senior Member
First Name
Erik
Joined
Jan 18, 2019
Messages
155
Reaction score
101
Location
Belgium, Ghent
Car(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.
IMG-1984.jpg
 
Last edited:

fenix-silver

Senior Member
Joined
Nov 12, 2018
Messages
815
Reaction score
619
Location
Central PA
Car(s)
2019 Si
Country flag
Just created this one. Nice and simple.

honda_hpd_black.jpg
 

DallasCRX

Senior Member
First Name
Dallas
Joined
Sep 24, 2018
Messages
164
Reaction score
216
Location
Barrie, ON
Car(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

Advertisement






Advertisement




Top