Customizing Printer Frontend

To allow vendors to deliver printers with their own ideas on what a frontend should contain and look like we publish
these original sources. You can modify and compile them. Copy the modified version into the shadow www directory at the
same place and your version will be used instead of the original. That way you can modify anything in the frontend.
Also this is possible you should be aware or one drawback of this concept. With every update from us there is the
possibility that we introduce new features or css rules that are required. So you should not deliver the original
server version to client but a encapsulated version. This encapsulated version installs first you adapted shadow
system data and then runs the original installer from our server. To achieve this add your custom config override script.
For linux this would be


for other os use the according storage directory. To change download info for updates, shadow directory and name it would
look like this:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
    <branded-name>Your Server Name</branded-name>

Prepare compilation

The build system uses NodeJS 6.7 and npm to compile the sources. Make sure they are installed in reachable over your path
variable. Then download the sources for 0.80.3 and
unzip them. Go to main directory in your shell and install all required packages by calling

> npm install

This installs a few hundred packages and dependent packages, so it may take a while. At the end you see a summary with
warnings and messages like “UNMET PEER DEPENDENCY zone.js@0.6.26”. Ignore them.



The compile commands have two different target folders. For development everything is compiled into wwwdev. These
files are not compressed making it much easier to debug it. In case of javascript they also contain map files so browsers
can even say in which source file the error is.

For production everything is compiled into wwwdist folder.

Both already have the exact structure for your shadow directory, so for testing point your local server isntace to use
one of these folders as shadow directory.

Compiling css files:

Compile for development:

> ./node_modules/grunt-cli/bin/grunt sass:dev

Compile for production:

> ./node_modules/grunt-cli/bin/grunt sass:prod

Compiling front application

Application is compile dusing webpack merging the several 1000 js files into just a few javascript libraries. This
decreases download immensely.

Compile for development:

> ./node_modules/webpack/bin/webpack.js


> ./node_modules/webpack/bin/webpack.js --watch

with –watch webpack will watch for changes in javascript and automatically recompile once you save a file.

Compile for production:

> NODE_ENV=./node_modules/webpack/bin/webpack.js webpack

Understanding the code structure

Stylesheet introduction

All stylesheet files are in wwwsrc/modules/front2/style. The ui.scss file is the main file that includes all
other files. To modify the overall apperiance change “blocks/_variables.scss” to your liking. The other files
contain the css definitions required. Do not change names and only change if you know what you are doing.
The configs folder contains per resolution variables. Normally there is no need to change them but if you want
to tweak some sizes, that is the place for it.

Frontend application

Apart from some node libraries the application uses 2 self written packages. These are located in

binding – Main module for communication with the server. Implements a Redux storage that mimics the server state,
handles all communication and has many actions to change everything you need.

front-ui – Implements all ui elements used in the frontend.

The main application resides in wwwsrc/modules/front2/app

app.modules.ts is the module loader of the app and binds all used modules/components.
dashboard.components.ts is the main screen. Here you would add new screens or remove existing screens.
app.routes.ts declares all used routes of the frontend.
Most of the remaining files are the different screens.