Patch Phone Edit Dialer Theme

From WebOS Internals

Jump to: navigation, search


Background-editing.png

Contents

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:

Backdropphone.png

Two others for consistency:

Backdropphonescrollfade.png

Listsectionline.png

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

Edit-dialer-theme.png

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


MAIN Files DTMF Files

Dialpad-row1-blank.png dialpadrow1

Dialpad-row2-blank.png dialpadrow2

Dialpad-row3-blank.png dialpadrow3

Dialpad-row4-blank.png dialpadrow4

Dialpad-row1dtmf-blank.png dialpadrow1dtmf

Dialpad-row2dtmf-blank.png dialpadrow2dtmf

Dialpad-row3dtmf-blank.png dialpadrow3dtmf

Dialpad-row4dtmf-blank.png dialpadrow4dtmf

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

Personal tools
Google AdSense