Category:HowTo:Branding

From Snom User Wiki

Jump to: navigation, search

Contents

Phone User Interface (PUI)

Syntax

The PUI screen can be dynamically replaced using the following configuration parameter:

<upload_gui perm="$" <URL> />

where

  • perm = permission flag
  • <URL> = URL of the tarball (file format) containing all images (*.png) of the new PUI design

Example

<upload_gui perm="$">http://192.168.1.68/branding/bmp-set.tar</upload_gui> 

The firmware of the phone checks whether the tarball is available and HAS NOT been loaded previously. It will then

  • upload the tarball
  • unpack the tarball
  • reboot the phone
  • start up with the new PUI design

Creating new PUI designs

The following steps show you how to create new PUI designs and explain how to upload them to the phone.

Note: A local Web (HTTP) Server is needed.

snom default PUI design

Download the snom820 default uncompressed PUI tarball which contains all necessary image files and open it with an appropriate application, e.g. 7-zip.


Since version 8.9.3.60 all the graphical elements can be found into the "Customisation archive file", inside the "bmp/colored" folder. The archive is released along with the firmware, so please refer to the firmware download page.


Until Version 8.7.3.7:

snom 760: snom760_pui_design.tar
snom 820/snom 821: snom820_pui_design.tar (Note: file names don't need to be changed) 
snom 870: snom870_pui_design.tar
snom 370 (only VPN version, or standard version > 8.4.27): snom370_pui_design.tar

Since Version 8.7.3.10:

snom 760: branding-87310-760.tar
snom 820/snom 821: branding-87310-82x.tar (Note: file names don't need to be changed) 
snom 870: branding-87310-870.tar
snom 370: branding-87310-370.tar

Since Version 8.9.3.51:

snom D375: branding-89351-D375.tar

The following image files are archieved: {{#tree:openlevels=2|root=snom820_pui_design.tar|

  • colored
    • 170 Byte(s) --> analog_clock_bgnd.png
    • 129 Byte(s) --> analog_clock_hours0.png
    • 137 Byte(s) --> analog_clock_hours1.png
    • 141 Byte(s) --> analog_clock_hours2.png
    • 147 Byte(s) --> analog_clock_hours3.png
    • 144 Byte(s) --> analog_clock_hours4.png
    • 152 Byte(s) --> analog_clock_hours5.png
    • 159 Byte(s) --> analog_clock_hours6.png
    • 160 Byte(s) --> analog_clock_hours7.png
    • 133 Byte(s) --> analog_clock_minutes0.png
    • 141 Byte(s) --> analog_clock_minutes1.png
    • 150 Byte(s) --> analog_clock_minutes2.png
    • 152 Byte(s) --> analog_clock_minutes3.png
    • 153 Byte(s) --> analog_clock_minutes4.png
    • 160 Byte(s) --> analog_clock_minutes5.png
    • 166 Byte(s) --> analog_clock_minutes6.png
    • 169 Byte(s) --> analog_clock_minutes7.png
    • 109 Byte(s) --> background_infobar.png
    • 91 Byte(s) --> background_selectedentry.png
    • 17991 Byte(s) --> snom820_bg.png
    • 1540 Byte(s) --> snom820_button_add_to_phonebook.png
    • 1869 Byte(s) --> snom820_button_add_to_phonebook_PRESSED.png
    • 1080 Byte(s) --> snom820_button_arrow_down.png
    • 1293 Byte(s) --> snom820_button_arrow_down_PRESSED.png
    • 987 Byte(s) --> snom820_button_arrow_left.png
    • 1160 Byte(s) --> snom820_button_arrow_left_PRESSED.png
    • 989 Byte(s) --> snom820_button_arrow_right.png
    • 1154 Byte(s) --> snom820_button_arrow_right_PRESSED.png
    • 1046 Byte(s) --> snom820_button_arrow_up.png
    • 1233 Byte(s) --> snom820_button_arrow_up_PRESSED.png
    • 617 Byte(s) --> snom820_button_blank.png
    • 736 Byte(s) --> snom820_button_blank_PRESSED.png
    • 1249 Byte(s) --> snom820_button_buddylist.png
    • 1485 Byte(s) --> snom820_button_buddylist_PRESSED.png
    • 1187 Byte(s) --> snom820_button_check_mark.png
    • 1336 Byte(s) --> snom820_button_check_mark_PRESSED.png
    • 1214 Byte(s) --> snom820_button_chk_history.png
    • 1359 Byte(s) --> snom820_button_chk_history_PRESSED.png
    • 1533 Byte(s) --> snom820_button_CMC.png
    • 1812 Byte(s) --> snom820_button_CMC_PRESSED.png
    • 1120 Byte(s) --> snom820_button_conference.png
    • 1119 Byte(s) --> snom820_button_conference_off.png
    • 1275 Byte(s) --> snom820_button_conference_off_PRESSED.png
    • 1288 Byte(s) --> snom820_button_conference_PRESSED.png
    • 915 Byte(s) --> snom820_button_cyrillic.png
    • 1007 Byte(s) --> snom820_button_cyrillic_PRESSED.png
    • 1420 Byte(s) --> snom820_button_C_arrow.png
    • 1629 Byte(s) --> snom820_button_C_arrow_PRESSED.png
    • 1261 Byte(s) --> snom820_button_dbl_arrow_down.png
    • 1439 Byte(s) --> snom820_button_dbl_arrow_down_PRESSED.png
    • 1335 Byte(s) --> snom820_button_decline.png
    • 1503 Byte(s) --> snom820_button_decline_PRESSED.png
    • 1247 Byte(s) --> snom820_button_directory.png
    • 1507 Byte(s) --> snom820_button_directory_PRESSED.png
    • 1096 Byte(s) --> snom820_button_DND.png
    • 1263 Byte(s) --> snom820_button_DND_PRESSED.png
    • 1031 Byte(s) --> snom820_button_double_angle_left.png
    • 1188 Byte(s) --> snom820_button_double_angle_left_PRESSED.png
    • 1021 Byte(s) --> snom820_button_double_angle_right.png
    • 1188 Byte(s) --> snom820_button_double_angle_right_PRESSED.png
    • 1372 Byte(s) --> snom820_button_edit.png
    • 1607 Byte(s) --> snom820_button_edit_PRESSED.png
    • 1392 Byte(s) --> snom820_button_expand.png
    • 1624 Byte(s) --> snom820_button_expand_PRESSED.png
    • 721 Byte(s) --> snom820_button_hebrew.png
    • 731 Byte(s) --> snom820_button_hebrew_PRESSED.png
    • 949 Byte(s) --> snom820_button_help.png
    • 1110 Byte(s) --> snom820_button_help_PRESSED.png
    • 1575 Byte(s) --> snom820_button_LDAP.png
    • 1901 Byte(s) --> snom820_button_LDAP_PRESSED.png
    • 1492 Byte(s) --> snom820_button_lowercase.png
    • 1731 Byte(s) --> snom820_button_lowercase_PRESSED.png
    • 1268 Byte(s) --> snom820_button_mail.png
    • 1503 Byte(s) --> snom820_button_mail_PRESSED.png
    • 741 Byte(s) --> snom820_button_menu.png
    • 879 Byte(s) --> snom820_button_menu_PRESSED.png
    • 1412 Byte(s) --> snom820_button_numbers.png
    • 1650 Byte(s) --> snom820_button_numbers_PRESSED.png
    • 986 Byte(s) --> snom820_button_presence.png
    • 1144 Byte(s) --> snom820_button_presence_PRESSED.png
    • 1221 Byte(s) --> snom820_button_record.png
    • 1653 Byte(s) --> snom820_button_record_off.png
    • 1939 Byte(s) --> snom820_button_record_off_PRESSED.png
    • 1420 Byte(s) --> snom820_button_record_PRESSED.png
    • 1265 Byte(s) --> snom820_button_redial.png
    • 1486 Byte(s) --> snom820_button_redial_PRESSED.png
    • 1088 Byte(s) --> snom820_button_redirect_off.png
    • 1278 Byte(s) --> snom820_button_redirect_off_PRESSED.png
    • 1151 Byte(s) --> snom820_button_redirect_on.png
    • 1334 Byte(s) --> snom820_button_redirect_on_PRESSED.png
    • 1404 Byte(s) --> snom820_button_reduce.png
    • 1612 Byte(s) --> snom820_button_reduce_PRESSED.png
    • 1215 Byte(s) --> snom820_button_registration.png
    • 1364 Byte(s) --> snom820_button_registration_PRESSED.png
    • 1155 Byte(s) --> snom820_button_speed_dial.png
    • 1347 Byte(s) --> snom820_button_speed_dial_PRESSED.png
    • 1081 Byte(s) --> snom820_button_spkr_off.png
    • 1316 Byte(s) --> snom820_button_spkr_off_PRESSED.png
    • 1185 Byte(s) --> snom820_button_spkr_on.png
    • 1423 Byte(s) --> snom820_button_spkr_on_PRESSED.png
    • 982 Byte(s) --> snom820_button_trash_can.png
    • 1211 Byte(s) --> snom820_button_trash_can_PRESSED.png
    • 1557 Byte(s) --> snom820_button_uppercase.png
    • 1879 Byte(s) --> snom820_button_uppercase_PRESSED.png
    • 614 Byte(s) --> snom820_call_bg.png
    • 5008 Byte(s) --> snom820_call_handset.png
    • 3352 Byte(s) --> snom820_call_phone_01.png
    • 3596 Byte(s) --> snom820_call_phone_02.png
    • 3903 Byte(s) --> snom820_call_phone_03.png
    • 4365 Byte(s) --> snom820_call_phone_04.png
    • 181 Byte(s) --> snom820_call_photoframe_corner.png
    • 123 Byte(s) --> snom820_call_photoframe_line.png
    • 490 Byte(s) --> snom820_icon_buddy_dnd.png
    • 488 Byte(s) --> snom820_icon_buddy_offline.png
    • 526 Byte(s) --> snom820_icon_buddy_online.png
    • 1194 Byte(s) --> snom820_icon_contact_state_available.png
    • 1041 Byte(s) --> snom820_icon_contact_state_away.png
    • 914 Byte(s) --> snom820_icon_contact_state_busy.png
    • 869 Byte(s) --> snom820_icon_contact_state_dnd.png
    • 1371 Byte(s) --> snom820_icon_contact_state_holding.png
    • 1261 Byte(s) --> snom820_icon_contact_state_inactive.png
    • 1332 Byte(s) --> snom820_icon_contact_state_in_a_call.png
    • 1408 Byte(s) --> snom820_icon_contact_state_in_a_meeting.png
    • 1310 Byte(s) --> snom820_icon_contact_state_offline.png
    • 1500 Byte(s) --> snom820_icon_contact_state_ringing.png
    • 1059 Byte(s) --> snom820_icon_contact_state_unknown.png
    • 664 Byte(s) --> snom820_icon_phone_active.png
    • 623 Byte(s) --> snom820_icon_phone_failed.png
    • 664 Byte(s) --> snom820_icon_phone_registered.png
    • 623 Byte(s) --> snom820_icon_phone_trying1.png
    • 645 Byte(s) --> snom820_icon_phone_trying2.png
    • 335 Byte(s) --> snom820_infobar_cyrillic.png
    • 204 Byte(s) --> snom820_infobar_hebrew.png
    • 474 Byte(s) --> snom820_infobar_lock_closed.png
    • 703 Byte(s) --> snom820_infobar_lowercase.png
    • 816 Byte(s) --> snom820_infobar_mail.png
    • 684 Byte(s) --> snom820_infobar_numbers.png
    • 645 Byte(s) --> snom820_infobar_rec.png
    • 825 Byte(s) --> snom820_infobar_uppercase.png
    • 907 Byte(s) --> snom820_infobar_vpn.png
    • 720 Byte(s) --> snom820_infobar_warning.png
    • 109 Byte(s) --> snom820_inline_screen_divider.png
    • 256 Byte(s) --> snom820_inline_selector.png
    • 6334 Byte(s) --> snom820_line_info_bg.png
    • 1055 Byte(s) --> snom820_logo.png
    • 325 Byte(s) --> snom820_screenover_background_adjustment_bar.png
    • 835 Byte(s) --> snom820_screenover_background_adjustment_marks.png
    • 905 Byte(s) --> snom820_screenover_background_adjustment_marks_full.png
    • 5375 Byte(s) --> snom820_screenover_dnd.png
    • 3152 Byte(s) --> snom820_screenover_redirect.png
    • 306 Byte(s) --> snom820_scrollbar.png
    • 203 Byte(s) --> snom820_scrollbar_thumb.png
    • 4054 Byte(s) --> snom820_sideMenu.png
    • 3429 Byte(s) --> snom820_splash_screen.png
    • 5451 Byte(s) --> snom820_splash_screen_ocs_edition.png
    • 144 Byte(s) --> snom820_statusbar.png
    • 153 Byte(s) --> snom820_statusbar_bg.png
    • 226 Byte(s) --> snom820_statusbar_end.png
    • 17156 Byte(s) --> snom_bg.png
    • 3525 Byte(s) --> snom_busy_icon_01.png
    • 3347 Byte(s) --> snom_busy_icon_02.png
    • 3542 Byte(s) --> snom_busy_icon_03.png
    • 3149 Byte(s) --> snom_busy_icon_04.png
    • 3006 Byte(s) --> snom_busy_icon_05.png
    • 2752 Byte(s) --> snom_busy_icon_06.png
    • 2208 Byte(s) --> snom_busy_icon_07.png
    • 2182 Byte(s) --> snom_busy_icon_08.png
    • 2846 Byte(s) --> snom_busy_icon_09.png
    • 3117 Byte(s) --> snom_busy_icon_10.png
    • 3576 Byte(s) --> snom_busy_icon_11.png
    • 103 Byte(s) --> snom_colors.png

}}

Create new images

Maintain the image file

  • name (e.g. "snom820_screenover_background_adjustment_marks_full.png")
  • format (*.PNG)
  • dimensions

The file size may differ - compare to the original file size and stay within reasonable limits.

Example: default snom820_bg.png (320px x 240px) is replaced by another snom820_bg.png (320px x 240px)

 is replaced by 

Create new tarball

Use 7-zip, WinRAR or another appropriate application to create a new tarball archive. For the snom820/snom870 you have to archive all files inside the folder "colored". For the snom370 only archive the files.

Note: You don't have to archieve all the files that were initially in the archive. It is enough, and recommended, to only archieve the files that you've changed. The more files you put in the archieve, the longer it will take for the phone to set it up.

     

and copy the resulting tarball, e.g. "snom820_mypuidesign.tar" onto your Web (HTTP) Server.

Upload the new design

If the design is complete you can upload the same tarball to several phones (of the same phone type) by using simplified Auto Provisioning.

Note: The configuration parameter upload_gui has to be cleared before applying the new design. Otherwise the phone will not reload the URL (unless the URL has been changed). This can be achieved by sending an empty configuration parameter:

http://phoneIP/dummy.htm?settings=save&upload_gui=

Create a XML file, e.g. branding.xml and copy it onto your Web (HTTP) Server, i.e. http://yourwebserver/branding.xml:

<?xml version="1.0" encoding="utf-8" ?> 
 <uploads>
  <file url="http://yourwebserver/branding/snom820_mypuidesign.tar" type="gui" /> 
</uploads>

Copy the URL (http://yourwebserver/branding.xml) and paste it into the Setting URL field


Web User Interface -> Advanced -> Update -> Setting URL
Press Save


Press Reboot


Upload successful

After uploading the tarball the phone will reboot again and should start with the new design. The final Idle Screen may look like this:


XML Idle Screen

Another way of changing the snom display on the phone is by using the XML Idle Screen.

Changing position and layout of icons (snom 870 only)

From firmware versions 8.7.4.x on, snom 870 icons can be rearranged and modified. Further information available here

Web User Interface (WUI)

"Home" page

Applies to:

Main headline image

  • Dimensions: 1680 x 119 pixel - format doesn’t need to be fixed

Block edges

  • Dimensions: 12 x 12 pixel - format fixed

"Function Keys" page

Applies to:

Navigation key images

  • Dimensions: 25 x 72 pixel/ 72 x 72 pixel

Free / Context-sensitive function key images

  • Dimensions: 44 x 19 pixel

Pre-programmed function key images

  • Dimensions: 44 x 19 pixel - format fixed

"OCS Account Data" page

Small data size header and footer pictures can be added. Applies to OCS versions of:

Style sheets

Main fonts and styles can be changed within the local Style sheet definition

Applies to:

normal.css

.flyoutMenu {BACKGROUND-COLOR: #ffffff}
.flyoutHeading {FONT-FAMILY: Verdana, Arial, Helvetica; BACKGROUND-COLOR: #ffffff}
.flyoutLink {
 BORDER-RIGHT: #ffffff 1px solid; PADDING-RIGHT: 0px;
 BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 6px;
 BORDER-LEFT: #ffffff 1px solid; BORDER-BOTTOM: #ffffff 1px solid;
 FONT-FAMILY: Verdana, Arial, Helvetica}
.flyoutMenu TD.flyoutLink {
 PADDING-RIGHT: 2px; BORDER-TOP: #ffffff 1px solid;
 PADDING-LEFT: 6px; BORDER-LEFT: #ffffff 1px solid;
 BORDER-BOTTOM: #ffffff 1px solid; FONT-FAMILY: Verdana, Arial, Helvetica}
.flyoutLink A {COLOR: black; TEXT-DECORATION: none}
.flyoutLink A:hover {COLOR: black; TEXT-DECORATION: none}
.flyoutLink A:visited {COLOR: black; TEXT-DECORATION: none}
.flyoutLink A:active {COLOR: black; TEXT-DECORATION: none}
.flyoutSubHeading {FONT-FAMILY: Verdana, Arial, Helvetica; BACKGROUND-COLOR: #ffffff}
.flyoutSubLink {
 BORDER-RIGHT: #ffffff 1px solid; PADDING-RIGHT: 2px;
 BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 11px;
 BORDER-LEFT: #ffffff 1px solid; PADDING-TOP: 1px;
 BORDER-BOTTOM: #ffffff 1px solid; FONT-FAMILY: Verdana, Arial, Helvetica}
.flyoutSubLink A {COLOR: black; TEXT-DECORATION: none}
.flyoutSubLink A:hover {COLOR: black; TEXT-DECORATION: none}
.flyoutSubLink A:visited {COLOR: black; TEXT-DECORATION: none}
.flyoutSubLink A:active {COLOR: black; TEXT-DECORATION: none}

Fox.css

A {COLOR: #0000FF}
A:hover {}
input,textarea{
 border-bottom: #666666 1px solid;border-left: #666666 1px solid;
 border-right: #666666 1px solid;border-top: #666666 1px solid;
 color: #666666;font: 8pt Verdana,Arial,Helvetica,Geneva,sans-serif;margin: 0;word-wrap: break-word;}
.normalText {FONT-SIZE: 11px; FONT-FAMILY: Verdana}
.errorText {FONT-SIZE: 11px; COLOR: #ff0000; FONT-FAMILY: Verdana}
.normalTextBold {FONT-WEIGHT: bold; FONT-SIZE: 11px; FONT-FAMILY: Verdana}
.disabledText {FONT-SIZE: 11px; COLOR: #bbbbbb; FONT-FAMILY: Verdana}
.disabledTextField {BACKGROUND-COLOR: #bbbbbb}
.normalTextField {BACKGROUND-COLOR: #eae8d9}
.bubbleTable {BACKGROUND-COLOR: #eae8d9}
.background {BACKGROUND-COLOR: #ffffff}
.headerText {FONT-WEIGHT: bold; FONT-SIZE: 24px; COLOR: black; FONT-FAMILY: Verdana}
.headerBackground {BACKGROUND-COLOR: #0062aa}
.pageHeadText {FONT-WEIGHT: bold; FONT-SIZE: 16px; FONT-FAMILY: Verdana}
.pageInfoText {FONT-SIZE: 11px; LINE-HEIGHT: 17px; FONT-FAMILY: Verdana}
.disabledInfoText {FONT-SIZE: 11px; COLOR: #bbbbbb; LINE-HEIGHT: 17px; FONT-FAMILY: Verdana}
.bubbleHeadText {FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #6487dc; FONT-FAMILY: Verdana}
.fieldText {FONT-SIZE: 12px; FONT-FAMILY: Verdana}
.checkboxRadioText {FONT-SIZE: 11px; FONT-FAMILY: Verdana}
.button {
 FONT-SIZE: 12px; FONT-FAMILY: Verdana;
 color: #000000; border-color: white #d6dff5 #d6dff5 white; background: #ffffff;}
.radio{background: transparent;border: 0px;}
.select_blue {background-color: #d6dff5;}
.select_std {background-color: #eae8d9;}
.selectedRadioText {FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #00a900; FONT-FAMILY: Verdana}
.selectedRadioDesc {FONT-SIZE: 11px; COLOR: #00a900; FONT-FAMILY: Verdana}
.selectedTextField {BORDER-LEFT-COLOR: #3a5bca; BORDER-BOTTOM-COLOR: #3a5bca; BORDER-TOP-COLOR: #3a5bca; BORDER-RIGHT-COLOR: #3a5bca}
.deselectedTextField {CLEAR: both; BACKGROUND-COLOR: white}
.logoutLink A {COLOR: #ffffff}
.logoutLink A:visited {COLOR: #ffffff}
.inputbig_blue {
 height: 18px;width: 180px;background-color: #d6dff5;
 border-bottom: #666666 1px solid;border-left: #666666 1px solid;
 border-right: #666666 1px solid;border-top: #666666 1px solid;}
.inputbig_std {
 height: 18px; width: 180px; background-color: #eae8d9;
 border-bottom: #666666 1px solid; border-left: #666666 1px solid;
 border-right: #666666 1px solid; border-top: #666666 1px solid;}

This category currently contains no pages or media.

Personal tools
Interoperability