Anonymousprnt::Y
Click on images to see them in full screen

Special Customisation

With Door Tablet, you can perform some special customisation of the displays. You can change:
  1. The graphics used as the Traffic lights (using CSS)
  2. Facility icons (using CSS)
  3. Day names (using translation sets)
  4. Month names (using translation sets)
  5. Report subject names (using translation sets)
  6. Information Icons
  7. Current meeting styling
  8. Fonts
  9. Timer donuts
  10. QR Codes colors
  11. Schedule rows odd/even bars
  12. Language switching
  13. Button icons and Check-in button

From version 8.2.4 of the Door Tablet App you may customise the icons used in buttons and the special check-in button. See bottom of this page

To learn how to work with CSS please see here Database 'Door Tablet HELP', View 'Help Documents', Document 'Working with CSS'

Windows Store App
If you use the Door Tablet Windows Store App please note:
  1. Any reference to images must be absolute to the Door Tablet server. The means that your reference to images would look like so: "background-image: url(http://internal-dt-server.com/branding/logo.png);"
  2. Fonts cannot be added as described here but rather be embedded in the application, by us. The service is chargeable

Some examples
You can transform the Door Tablet display, completely if you like. This is the result of recent adaptation for a client and shows the usage of a single graphics to provide a metal look for the entire tablet background.
The adaptations may be performed on all Door Tablet displays including Room, Other Rooms, Welcome, Schedule and Cluster.






If you like this design or wish to base yours on it, please use the files attached below:


Adding a corporate logo in Android tablets
Due to a fault in the Android rendering engine, placing background images at the top right corner of the display is often problematic. We resolved this issue by adding two empty divs which you can use both in the Room and Cluster Displays. Use the following CSS in your own CSS and of course adjust as needed. As you can see below, the logo in the Cluster display will be placed a bit further to the left by setting its distance from the right edge to 160px;

#roomLogo, #clusterLogo {
top:10px;
background-image: url(logo.png);
background-repeat: no-repeat;
width:130px;
height: 90px;
right: 10px;
}
#clusterLogo {
right: 160px;
}

Getting Busy
When your room becomes busy the top object in the display gets a "class" added to it. This allows you to change the style of any object in the display for when the room becomes busy. For example, if you use the metallic background, when the room becomes busy you can simply change the background to, say, a copper colour pattern. This is achieved simply as follows:


#roomDisp.busy {
background-image: url(copper.png);
}

OR


#roomDisp {
background-image: url(/branding/background-free.jpg);
}
#roomDisp.busy {
background-image: url(/branding/background-busy.jpg);
}

A free room...

And now the room is busy...


Three Statuses
From version 7.4 of the Door Tablet client we implement three statuses:

  1. Free
  2. Busy soon (a meeting in ten minutes)
  3. Busy

For example...


To implement the new status, use the class "busysoon". You may use the class for all elements of the screen.

#roomDisp {
background-image: url('branding/free.jpg');
}
#roomDisp.busy {
background-image: url('branding/busy.jpg');
}
#roomDisp.busysoon {
background-image: url('branding/busysoon.jpg');
}



Graphics used as Traffic lights
Use the following IDs to specify the location of the our graphic files required for indicating a meeting room is engaged or busy. When these icons are touched they light up while the server is checked for the latest schedule. Hence the need for four images.
#green-light
#stop-light

Please note that you specify just one file for each mode. Door Tablet adds the "-up" to the file name when the icon is touched. Therefore your graphics could be named like so:
green-light.png
green-light-up.png
stop-light.png
stop-light-up.png

You CSS would look like so (when you place images in the "/doortablet/branding/" folder on the Door Tablet server itself:


#green-light {
background-image: url(/doortablet/branding/green-light.png);
}
#stop-light {
background-image: url(/doortablet/branding/stop-light.png);
}

Example icons...



Facility icons
You can use your own facilities icon by placing these on the Door Tablet server and refer to just one of these using the following ID:
#facility-icon

Please note that you only specify one file in this CSS. Door Tablet will expect that all your icons are in the same location and are named as:
pr.gif
wb.gif
mo.gif
vc.gif
au.gif
wi.gif
ac.gif
ca.gif
map.gif

We use map.gif for a touch function that shows when a map or photo of a resource exists. Please ensure its not too small.

Your CSS would look like this line:


#facility-icon {
background-image: url(/doortablet/facilities/wb.gif);
}

Default facility icons used by Door Tablet...

Note: If you change the size of these icons from their original size of 41x26 you will also need to change the dimensions listed in the following styles:


#roomFacil .facilTblList {
margin: 0 auto;
}
.facilTblList td{
border: 0px;
width: 42px;
height: 30px;
}
.facilTblList tbody tr td{
font-family: "HelveticaNeue-Roman", "Helvetica Neue", Helvetica,Arial,sans-serif;
border: 0px;
font-size:1.5em;
line-height:1.5em;
font-weight: bold;
}

Note: when displaying the capacity of a room Door Tablet uses the above style. You may need to adjust the style to fit into your icons.
Note for Windows Store Apps: you cannot add fonts using CSS in the method described here. Fonts have to be added to the the Door Tablet Windows Store application, and is a chargeable service.


Day, Month and Report subject names
Door Tablet displays day and month names in an abbreviated format for each of the languages currently supported. You can change the names to long format and simply add your own language. You perform this customisation using the Translation feature in the system. For more information about translations see here Database 'Door Tablet HELP', View 'Help Documents', Document 'Translations'.

Days
To add day names, add an entry to your Translation Set using the following format:
daynames:<comma delimited list of days - 7 days must be listed starting with the equivalent of Sunday>

Example:
daynames:Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday
Note: if you do not specify 7 names the setting will simply be ignored.

Months
To add month names, add an entry to your Translation Set using the following format:
monthnames:<comma delimited list of days - 12 months must be listed starting with the equivalent of January>

Example:
monthnames:January,February,March,April,May,June,July,August,September,October,November,December
Note: if you do not specify 12 names the setting will simply be ignored.

Report subject
To add report subject names, add an entry to your Translation Set using the following format:
reportnames:<comma delimited list of report subject names - 10 subjects must be listed in the same order as showing below>

Example:
reportnames:Catering,Cleanliness,Computer LAN,Furniture,Climate,Lights,Projector,Telephone,Conferencing,Drawing Board
Note: if you do not specify 10 subject names the setting will simply be ignored.


Information Icon
The information icon at the bottom right corner of the Door Tablet display may only be changed by you supplying it to us, and we will embed the icons in the application. You will then be able to specify your icon at a global system level or on a room basis. To supply us with these icons you must first be a paying customer. The files are of type "png" and 24x24 pixels. The files must also look different where one of them must be red in tone.

The standard Information Icons:



Current meeting styling
When Door Tablet displays meetings, a list of the upcoming meetings of the day appears below the clock while actual meeting information appears below the meeting room name. When a meeting becomes current the entry in the meeting list is updated to contain the additional CSS class "current". Therefore, the combined class is "meetingBox current". You can add styling to this combined class and pain it in a different way compared to other meetings which are later on.


Fonts
There are few ways you can change fonts used by the Door Tablet display. One common method is using CSS3 @font-face. You can read about it here.


Steps

  1. Convert the fonts or obtain these in any one of these formats: eot, woff, ttf and svg. Depending on your Tablet or browser, not all formats are required.
  2. Place the files on the Door Tablet server under the HTML directory
  3. Define the font in CSS - see example below

Example for when using "Roboto Condensed" font:

@font-face {
font-family: 'Roboto Condensed';
src: url('/myCompantName/fonts/robotocondensed-webfont.eot');
src: url('/myCompantName/fonts/robotocondensed-webfont.eot?#iefix') format('embedded-opentype'),
url('/myCompantName/fonts/robotocondensed-webfont.woff') format('woff'),
url('/myCompantName/fonts/robotocondensed-webfont.ttf') format('truetype'),
url('/myCompantName/fonts/robotocondensed-webfont.svg#roboto_condensedbold') format('svg');
font-weight: normal;
font-style: normal;
}

Read to use...
You are now able to refer to the new font name in the CSS overriding the standard fonts used by Door Tablet.

Additional branding
When you display a Schedule screen on a large monitor a few objects can be used by branding. These elements may be viewed using common methods for identifying CSS on a page. In addition we inserted an empty DIV you can use to place graphics on and place this anywhere on your screen.

DIV IDs...
Schedule screens: brandingSc
Welcome screens: brandingWc

For example...


#brandingSc {
position: absolute;
top: 14px;
right: 100px;
height: 60px;
width:160px;
background-color:#006400;
text-indent: right;
display: block;
}

The above CSS results in the green box showing below...


Timer Donuts
Timer donuts appear on all pop ups that will abort within a certain number of seconds. Changed the following styles to control size and colours of timer donuts.


.countDown { height: 20px; width:20px;}

#pie_bkg {
/*donut starts with this image */
background-image: url("../img/pie_bkg_small.png");
}
#pie_frg {
/*donut ends with this image */
background-image: url("../img/pie_frg_small.png");
}

QR Codes
These codes show when Door Tablet checks you in. You can change the colour of the displayed code, as follows:


#qrcodes {
color: #000;
}

Schedule Rows
When displaying schedules of other rooms, and generally when time bars are shown in Wayfinding displays, we are wrapping each resource using a DIV. The divs have alternate classes allowing you to colour odd and even bars differently. Two classes are attributed, allowing you to set common styles to both odd and even bars. The classes are:
Common class: .schedule_row
For odd lines: .odd
For even lines: .even

Language switching
When you use the Door Tablet language switching features, you may wish the adjust the design according to language. When you touch a language the Door Tablet code will allow you specify CSS based on that language translation set name. For example, if you specify a translation set and you call it, say, Arabic, when you switch to Arabic all the objects on the display can reference this condition by using a class with descendants. In this example the class name will be "nls_arabic". You can now refer to objects easily when the language is indeed in Arabic. In the example CSS the standard for was change but when we switch to Arabic we want the standard fonts to be used:


/*Standard font changed to UTM_Neo_Sans */
@font-face {
font-family: 'NeoSans';
src: url('http://samsung.door-tablet.com/branding/Samsung/UTM_Neo_Sans_IntelBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#wcHeader, #clusterName, #slideShowTitle, #lightStatus,#schedTimes, #airportTimes,
#wcTimes, #freeTimes, #clusterTimes,#meetingOwners, #curMeetTime, #welcome,
#meetingSubject, #curHour, #curMin, #curSec, #upcoming, #curDay, #curDayDisp {
font-family: 'NeoSans';
-ms-transform: scale(1,0.8); /* IE 9 */
-webkit-transform: scale(1,0.8); /* Safari */
transform: scale(1,0.8); /* Standard syntax */
}
/*When arabic is used, we will use Helvetica, Arial and sans-serif */
.nls_arabic #roomName, .nls_arabic #nbrName, .nls_arabic #schedName, .nls_arabic #airportName {
font-family: Helvetica, Arial, sans-serif;
}
.nls_arabic #wcHeader, .nls_arabic #clusterName, .nls_arabic #slideShowTitle, .nls_arabic #lightStatus,
.nls_arabic #schedTimes, .nls_arabic #airportTimes, .nls_arabic #wcTimes,
.nls_arabic #freeTimes, .nls_arabic #clusterTimes, .nls_arabic #meetingOwners,
.nls_arabic #curMeetTime, .nls_arabic #welcome, .nls_arabic #meetingSubject, .nls_arabic #curHour,
.nls_arabic #curMin, .nls_arabic #curSec, .nls_arabic #upcoming, .nls_arabic #curDay, .nls_arabic #curDayDisp {
font-family: Helvetica,Arial,sans-serif;
}
.nls_arabic #lightStatus {
font-size: 12em;
}


Paired Displays: in-room
When displaying tablets in pairs, outside and inside the room, you may change the way the timer count down look. In fact you can change how the entire display looks.

The following applies to all themes:


.endsin10 {
color: #F4AB1B !important;
}
.endsin5 {
color: #F10039 !important;
}


When you select to use a Small Size tablets the following CSS is used...


/* fix buttons at the bottom of the display */
.paired_in .doorBut img { margin: 6px; margin-top: 8px; }
.paired_in .doorBut span { margin-top: 8px; margin-right: 10px; font-size: 20px; }

/* gives the meeting time in the schedule a bit more room */
.paired_in .meetingTime { width: 40%; }

/* reduces font size for the time display */
.paired_in #curHour, .paired_in #curMin { font-size: 86px; }

.paired_in #curSec { font-size: 54px; }

/* hides facility icons altogether */
.paired_in #roomFacil { height: 0; }

/* adjusts the height of the roomName text span */
.paired_in #roomName span { margin-top: 8px; }

.paired_in #roomName span{ font-size: 86px; }

/* the times box is now smaller so we reduce its height */
.paired_in #times { height: 170px; }

/* reduce the size of the upcoming text */
.paired_in #upcoming { font-size: 32px; }


Button icons and Check-in button
You may use your own icons and control the looks of the check-in button, which changes its look in three phases.

Check-in button text changes colours using the following CSS. The icon may be changed to, as explained below.


#checkin {
font-weight: bold;
}
.meet-before span{
color: #3dba43;
}
.meet-during span{
color: #ffcb00;
}
.meet-urgent span{
color: red;
}
#secsToEnd {
color: white;
}


Buttons Icons are simple to change. For consistency we have separated sizes in a single definitions while the actual graphics is listing individually for each button type. If you wish to use base 64 data-URI you may do so. This eliminates the need to use graphic files and improves performance. Use this tool to convert your graphics files to base 64 data-URI and embed these in your CSS: https://websemantics.uk/tools/image-to-data-uri-converter/


.img_clock, .img_lock, .img_lockopen, .img_srverror, .img_forward, .img_suspend,
.img_mphone, .img_globe, .img_checkin, .img_help {
display:block;
width: 24px; height:24px;
background-repeat:no-repeat;
vertical-align:text-bottom;
margin-left: 10px;
}
.img_clock {
background-image: url('../img/clock.png');
}
.img_lock {
background-image: url('../img/lock.png')
}
.img_lockopen {
background-image: url('../img/lock_open.png')
}
.img_srverror {
background-image: url('../img/server_error.png')
}
.img_forward {
background-image: url('../img/forward.png')
}
.img_suspend {
background-image: url('../img/suspend.png')
}
.img_mphone {
background-image: url('../img/mphone.png')
}
.img_globe {
background-image: url('../img/globe.png')
}
.img_checkin {
background-image: url('../img/checkin.png')
}
.img_help {
background-image: url('../img/help.png')
}