SCHEMA Blog (EN)

Corporate blog of SCHEMA GmbH

SCHEMA Reader: Your Own Design in Four Steps

Leave a comment

It’s difficult to uncork champagne with words, but today we do indeed have something to celebrate: After its pilot phase, SCHEMA Reader is now being officially launched.

As a sort of debut, we offered a free SCHEMA Reader customization two weeks ago here in this blog. With PHILIPS Healthcare, we were able to win one of our customers for this sample project. Stationary help plays a central role for PHILIPS for their user instructions.

What does a company-specific design for SCHEMA Reader look like? This is my topic for today’s post. I won’t just show you a few screenshots of the brand-new layout; I also want to show you what I did for this design customization. And you’ll see: it’s not that much.

How It Works
Before I take you through the configuration files, I want to show you the result. This is what PHILIPS Reader, the rebranded SCHEMA Reader, looks like. Individually customized application frame elements are e.g. the logo, the colors, and the availability of standard functionality. The content in the content frame is also displayed in PHILIPS CI.
loading_1
philips-reader-over-deze-gebruiksaanwijzing_2

How to Do It
There are only three configuration files with which you have to work for customizing the layout, and there are five graphics. You can find them all in the SCHEMA Reader installation directory under …\SCHEMA Reader\dist\branding.sample.

In order for the customizations to work, I first renamed the directory branding.sample to branding. Let’s get started.

File “branding.json”: Just Set a Few Values
As a first step in our configuration, let’s tackle the file branding.json. Once you open it in the editor, you’ll see that there isn’t a lot to do – and also that you can’t do much wrong. I defined a few bits of meta-information, e.g. the entry in the title pane via “name”. In addition, I declared the graphic names, and under “panes” I defined which features in the application frame should be active or hidden.
Name_3

Exchanging Image Files
The next exercise is also very easy. After I declared the graphics, the respective graphic files had to be available in the directory. Except for the one PNG file, we use SVG graphics, since this format gives us high quality with small file sizes (via SVG you can also include animations). Basically you can work with SVG, PNG and JPG.

Example: The file about-logo.svg creates the logo in the dialog Info/About, which you open via the question mark at top right.
philips-reader_japanisch

branding.css: Defining Colors
Like the file branding.json, the settings in branding.css apply to the application frame. Even without CSS knowledge you can quickly accomplish your tasks with this file: all you need to do is exchange color values. The SCHEMA Reader Help gives information about the effect of the respective color variables.
root_4

content.css: Defining Content Layout
Working with the content.css file is probably the most challenging. This file defines the layout for the content frame, i.e. typography, spacing, or cross-reference and table design. If you’re familiar with CSS, you won’t have any problems. I made my job easier by adopting most of the CSS definition from the previous help (HTML Help).
Help content_5

Where Content Comes From
That was it for layout configuration. With these four steps you’ve done everything to give SCHEMA Reader you own design.
philips-reader-japanisch_2

One final comment: Content for the PHILIPS Reader come directly from its precursor. We converted the data originally packaged in CHM with the Tool mshcMigrate to Microsoft Help Viewer format, then migrated them to SCHEMA Reader packages (see also postscript below). You can read how this last step works in the SCHEMA Reader help. You’ll also find further information there for layout configuration.

Have Fun “Branding”!
Now it’s your turn. Why don’t you try your own “branding” (this is what we call the process of layout customization internally). The installation package for SCHEMA Reader, along with all relevant information, can be found here. And it’s still true: You can use and distribute SCHEMA Reader for free!

Postscript
I received a few questions regarding problems with the tool mshcMigrate. Apparently, the tool has a bug, as the encoding of the generated MSHA file is corrupt.
If you open the MSHA file in an editor (e.g. Notepad++), change the encoding to UTF-8 and save the file again, the import into SCHEMA Reader should work without a problem.

Author: Jochen Marczinzik

Team lead web and mobile development at SCHEMA GmbH

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s