Patch Phone Edit Dialer Theme



= Editing the Dialer Background=

This section is for info about changing the background of the Dialer Application

It is still in development, so please correct any errors.

We can change that green background of the dialer screen pretty easily. We just need to change three files and reboot the Pre.

 Since this is a simple change that several people may want to accomplish, I'm going to be very granular about how to perform this task.

This does require access to the Pre's operating system. Please follow these steps first. Then open a SSH window to the Pre (either using "ssh -p 222 LOGIN_NAME@PALM_PRE_IP" or use a tool like PuTTY in Windows) You can find more information about this in the accessing linux page or by searching Google.

I started with a simple change because I don't have the Photoshop skills needed, I just made the current images black and white using Paint.net. Here are the steps I took:

Procedure
Open the SSH session and we'll open this directory (cd - change directory) and look at it's contents (ls - listing).

cd /usr/palm/applications/com.palm.app.phone/images/ ls

You'll see a long list of files that are in this directory, we'll only use three today, but more editing may come in the future. We'll backup the current image first incase we need to revert back to them (cp - copy). -Edit Stephen (Sprint Service and Repair): in order to copy a backup you have to make the file writeable. Same when installing the new images. This is since update 1.1.0. Make sure to make read-only after.

mount -o remount rw, / cp backdrop-phone.png backdrop-phone.png.old cp backdrop-phone-scroll-fade.png backdrop-phone-scroll-fade.png.old cp list-section-line.png list-section-line.png.old mount -o remount ro, /

If we do another listing (ls) we'll see the three files we just copied to make backups.

Next we'll need to copy (cp) the files to the location of the USB drive so that we'll be able to edit these files:

cp /usr/palm/applications/com.palm.app.phone/images/backdrop-phone.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/backdrop-phone-scroll-fade.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/list-section-line.png /media/internal/

Now click on the USB icon on the Pre's notification area, switch to USB Storage mode.

You can now copy the files off of the Pre and edit them any way you want, just make sure they have the same properties as the orig (transparency, size, file extention, etc). I didn't create these image below, they are just edited from the Palm Pre. You can use any 360 x 420 PNG to achieve these results.

Once they are edit to your liking, copy the files back to the Pre in USB mode with the same file name.

Eject your Pre from your computer, wait for Wifi to log back into your network, and SSH into the Pre again. Your old window probably timed out by now so you can close it.

Last step
Now we'll need to get the files (all 3 if you edited them) back to the correct location, so we'll use the copy (cp) command to do this. -Edit Stephen: Same thing here, you have to make the folder writeable. Make sure to make read-only after.

mount -o remount rw, / cp /media/internal/backdrop-phone.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/backdrop-phone-scroll-fade.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/list-section-line.png /usr/palm/applications/com.palm.app.phone/images/ mount -o remount ro, /

Once this is done exit the SSH session (type exit) and reboot the Pre from the Device Info menu. When it comes back up you should see your new background on the dialpad screen.

If you are going to use the files I edited you'll just need to copy them to the USB drive, and then complete the last step.

Here are my edits:


Two others for consistency:





Thanks to desairs at the PreCentral forums for pointing me in the correct direction.

If you want to use these modified images, you can download them directly to the directory and replace the files you backed up with cp.

wget http://img31.imageshack.us/img31/4630/backdropphone.png -O /usr/palm/applications/com.palm.app.phone/images/backdrop-phone.png wget http://img29.imageshack.us/img29/3571/backdropphonescrollfade.png -O /usr/palm/applications/com.palm.app.phone/images/backdrop-phone-scroll-fade.png wget http://img132.imageshack.us/img132/5493/listsectionline.png -O /usr/palm/applications/com.palm.app.phone/images/list-section-line.png

Then to reload you can try the following command instead of a reboot:

luna-send -n 1 palm://com.palm.appinstaller/rescan {}

=Installing the new Dialer Theme=



This page is for info about changing the theme of the Dialer Application. It is still in development, so please correct any errors.

This guide involves much the same process as demonstrated in the tutorial on changing the background. Most of the text here has been borrowed from that article, as it is written very well.

The theme I (Jwborc39963 [palmkernel on IRC]) created is shown to the right. You can download the files I modified here

Another theme made by Abyssul (on IRC and PreCentral.net). Similar to Jwborc39963, but blue instead of green:

Screenshot

Theme Download

Red theme made by OCaudi:

Red Theme

This guide assumes that you have already rooted your phone.

STEP ONE:
Open the SSH session and we'll open this directory (cd - change directory) and look at it's contents (ls - listing) cd /usr/palm/applications/com.palm.app.phone/images/ ls

STEP TWO:
You'll see a long list of files that are in this directory. We'll backup the current images to the USB accessible storage first in case we need to revert back to them (cp - copy)

cp /usr/palm/applications/com.palm.app.phone/images/dialpad-backspace.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/address-book.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/dialpad-row4dtmf.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/dialpad-row4.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/dialpad-row3dtmf.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/dialpad-row3.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/dialpad-row2dtmf.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/dialpad-row2.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/dialpad-row1dtmf.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/dialpad-row1.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/list-section-line.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/backdrop-phone-scroll-fade.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/backdrop-phone.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-icon-dtmfpad.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-icon-call-log.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-icon-voicemail.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-icon-dtmfpad.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-icon-contactbook.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-icon-addcall.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-icon-addcontact.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-icon-mute.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-icon-redial.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-icon-sms.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-icon-speaker.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-icon-speaker-bluetooth.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-icon-speaker-external.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-icon-speaker-internal.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-icon-unlock.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-popup-bluetooth.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-popup-bluetooth-headset.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-popup-bluetooth-headset-tty.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-popup-bluetooth-internal.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/menu-popup-bluetooth-speaker.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/missed-call-background.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/popup-icon-dropped.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/popup-icon-error.png /media/internal/ cp /usr/palm/applications/com.palm.app.phone/images/popup-icon-missed.png /media/internal/

STEP THREE:
Now click on the USB icon on the Pre's notification area, and switch to USB Storage mode.

You can now copy the files off of the Pre and edit them any way you want, just make sure they have the same properties as the orig (transparency, file extention, etc). The 'background editing' article mentions to keeps these files the same size, however I did not and the phone still worked. I already created a theme (the one pictured above) and will upload the images later today. I changed the colors on the buttons using paint.net and the 'change color' brush. It was time consuming, but I think it was worth it.

Once they are edited to your liking, copy the files back to the Pre in USB mode with the same file name.

Edit & Discussion (by ultraBlack): It might be easier to use SFTP to do this.

popup-icon-missed.png popup-icon-error.png popup-icon-dropped.png missed-call-background.png menu-popup-bluetooth-speaker.png menu-popup-bluetooth-internal.png menu-popup-bluetooth-headset-tty.png menu-popup-bluetooth-headset.png menu-popup-bluetooth.png menu-icon-unlock.png menu-icon-speaker-internal.png menu-icon-speaker-external.png menu-icon-speaker-bluetooth.png menu-icon-speaker.png menu-icon-sms.png menu-icon-redial.png menu-icon-mute.png menu-icon-addcontact.png menu-icon-addcall.png menu-icon-contactbook.png menu-icon-dtmfpad.png menu-icon-voicemail.png menu-icon-call-log.png menu-icon-dtmfpad.png backdrop-phone.png backdrop-phone-scroll-fade.png list-section-line.png dialpad-row1.png dialpad-row1dtmf.png dialpad-row2.png dialpad-row2dtmf.png dialpad-row3.png dialpad-row3dtmf.png dialpad-row4.png dialpad-row4dtmf.png address-book.png dialpad-backspace.png

STEP FOUR:
Eject your Pre from your computer, wait for WiFi to log back into your network, and SSH into the Pre again. Your old window probably timed out by now, so you can close it. We'll need to get the files back to the correct location, so we'll use the copy (cp) command to do this.

cp /media/internal/popup-icon-missed.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/popup-icon-error.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/popup-icon-dropped.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/missed-call-background.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-popup-bluetooth-speaker.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-popup-bluetooth-internal.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-popup-bluetooth-headset-tty.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-popup-bluetooth-headset.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-popup-bluetooth.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-icon-unlock.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-icon-speaker-internal.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-icon-speaker-external.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-icon-speaker-bluetooth.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-icon-speaker.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-icon-sms.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-icon-redial.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-icon-mute.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-icon-addcontact.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-icon-addcall.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-icon-contactbook.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-icon-dtmfpad.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-icon-voicemail.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-icon-call-log.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/menu-icon-dtmfpad.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/backdrop-phone.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/backdrop-phone-scroll-fade.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/list-section-line.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/dialpad-row1.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/dialpad-row1dtmf.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/dialpad-row2.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/dialpad-row2dtmf.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/dialpad-row3.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/dialpad-row3dtmf.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/dialpad-row4.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/dialpad-row4dtmf.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/address-book.png /usr/palm/applications/com.palm.app.phone/images/ cp /media/internal/dialpad-backspace.png /usr/palm/applications/com.palm.app.phone/images/

Once this is done, exit the SSH session (type 'exit') and reboot the Pre from the Device Info menu. When it comes back up you should see your new theme on the dialpad screen.

--

Edit: Wouldn't this be a million times easier with wildcards? Edit: Also might suggest creating a folder in /media/internal rather than putting all this stuff in the root dir. Could get messy. Also if you use a hidden dir on /media/internal I think it will prevent the images from showing up in the photo browser on the phone. Maybe add "mkdir /media/internal/.theme/" and "mkdir /media/internal/.theme/dialer".

Please feel free to edit this page if you think something can be done better. This is how I did it, and I figured people could copy/paste into terminal/PuTTY, however if you see something that you think can be done better in this tutorial, please edit it for the better!

Editing the "Enter Number or Name..." Text Color
It was driving me slightly crazy that there's a slight greenish tint to the writing above the dialpad.

Easy fix.

Open /usr/palm/applications/com.palm.app.phone/stylesheets/dialpad.css

For versions 1.2 and 1.2.1 - Go to line 65 and change:

.text-input.hinttext { color: #bcceb3; font-size: 16px; padding: 0 60px 0 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

to:

.text-input.hinttext { color: #ffffff; font-size: 16px; padding: 0 60px 0 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

You can also change the size of the font so that it fills the space better. Right now it is at 16 pixels, but I like 20 pixels.

Blank Dialer Pad Graphics
Here are the 8 files needed to create your own dial pad. They are blank and ready for you to add text or graphics to!

Simply use a graphic editor to add what ever numbers or text you'd like and you're good to go!

Just make sure that when you save them to the PRE, you have to change the file names to remove the "-blank" and also change the uppercase D to a lowercase d, as Linux IS case sensitive, and will not read the file if you dont change it. Also ALWAYS a good idea to make or keep a copy of the original files for the disaster scenario! --edit by DianeHelen 09/09/09

Dialer Background Screens to choose from
If you would like to see a page JUST for dialer backgrounds please look here:

http://www.webos-internals.org/wiki/Pre_Dialer_Backgrounds