Added Logo & Font

Viewer/assets/templates/default/defaultTemplate.html

@@ -1,3 +1,16 @@
+<style>
+    @font-face {
+        font-family: 'babylon';
+        src: url('{{babylonFont}}') format('woff');
+        font-weight: normal;
+        font-style: normal;
+    }
+
+    .icon {
+        font-family: "babylon";
+    }
+</style>
+
 <viewer></viewer>
 <loading-screen></loading-screen>
 <overlay></overlay>

Viewer/assets/templates/default/navbar.html

@@ -66,16 +66,25 @@
         pointer-events: none;
     }
 
+    nav-bar img,
     nav-bar .icon {
-        width: 18px;
+        pointer-events: none;
     }
 
-    nav-bar img {
-        pointer-events: none;
+    .logo-button {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        justify-content: center;
+        background-color: rgba(91, 93, 107, .75);
+        height: 48px;
+        min-width: 48px;
+        margin-right: 4px;
     }
 
-    .small-icon {
-        width: 12px;
+    .logo-button img {
+        height: 20px;
+        width: 20px;
     }
 
     .types {
@@ -96,6 +105,7 @@
         background-color: rgba(22, 24, 26, .90);
     }
 
+    .logo-button,
     .animation-label,
     .types-icon,
     .help,
@@ -103,6 +113,36 @@
         display: none;
     }
 
+    .types-icon:after {
+        font-size: 16px;
+        content: "\F6BE";
+    }
+
+    .up-icon:after {
+        font-size: 12px;
+        content: "\E70E";
+    }
+
+    .play-icon:after {
+        font-size: 16px;
+        content: "\E768";
+    }
+
+    .pause-icon:after {
+        font-size: 16px;
+        content: "\E769";
+    }
+
+    .fullscreen-icon:after {
+        font-size: 16px;
+        content: "\E740";
+    }
+
+    .help-icon:after {
+        font-size: 16px;
+        content: "\F70C";
+    }
+
     .progress-control {
         display: flex;
         flex: 1;
@@ -111,13 +151,18 @@
         cursor: pointer;
     }
 
+    .progress-bar-container {
+        position: relative;
+        overflow: hidden;
+    }
+
     .progress-bar {
         align-self: center;
         flex: 1;
         background-color: rgb(255, 255, 255);
-        height: 4px;
+        height: 2px;
         position: absolute;
-        width: calc(100% - 48px);
+        width: 100%;
         right: 0;
         pointer-events: none;
     }
@@ -134,7 +179,7 @@
         height: 0px;
         background-color: rgba(91, 93, 107, .75);
         width: 100%;
-        border-top: 4px solid rgba(204, 210, 214, .4);
+        border-top: 2px solid rgba(204, 210, 214, .4);
     }
 
     .progress-circle {
@@ -150,10 +195,10 @@
     }
 
     .default-control {
-        background-color: rgba(91, 93, 107, .75);
         display: flex;
         flex-direction: row;
         height: 100%;
+        background-color: rgba(91, 93, 107, .75);
     }
 
     .menu-options button {
@@ -190,24 +235,28 @@
     }
 
     @media screen and (min-width: 540px) {
+        .help,
         .types-icon,
         .speed {
-            display: flex;
+            display: inline-block;
         }
 
-        .help {
-            display: block;
+        .logo-button {
+            display: flex;
         }
+
         .types {
             width: 84px;
-            margin-right: 34px;
+        }
+
+        .progress-bar-container {
+            margin: 0 12px;
         }
 
         .types .menu-options {
             width: 84px;
         }
         .speed {
-            margin-right: 4px;
             width: 64px;
         }
 
@@ -217,16 +266,16 @@
     }
 
     @media screen and (min-width: 1024px) {
-        .speed {
-            margin-right: 28px;
-        }
         .animation-label {
             display: block;
-            margin-left: 6px;
         }
+
+        .progress-bar-container {
+            margin: 0 12px;
+        }
+
         .types {
             width: 144px;
-            margin-right: 0px;
         }
         .types .menu-options {
             width: 144px;
@@ -234,28 +283,43 @@
     }
 </style>
 
-{{#if (or (not animations) hideAnimations)}}
+{{#if (or (not animations) hideAnimations)}} {{#if hideLogo}}
 <style>
     nav-bar .nav-container {
         justify-content: flex-end;
     }
 </style>
+{{else}}
+<style>
+    nav-bar .nav-container {
+        justify-content: space-between;
+    }
+</style>
 {{/if}}
+<style>
+    nav-bar .fullscreen {
+        margin-left: 4px;
+    }
+</style> {{/if}}
 
 <div class="nav-container" id="navbar-control">
-    {{#unless (or (not animations) hideAnimations)}}
+    {{#unless hideLogo}}
+    <div class="logo-button" title="{{logoText}}">
+        <img src="{{logoImg}}">
+    </div>
+    {{/unless}} {{#unless (or (not animations) hideAnimations)}}
     <div class="animation-control">
         <div class="types">
             <button class="flex-container" id="types-button">
-                <img src="{{typeImg}}" class="svg icon types-icon">
+                <span class="icon types-icon"></span>
                 <span class="control-text animation-label">Animation</span>
                 <span class="control-text animation-number">{{selectedAnimation}}</span>
-                <img src="{{upImg}}" class="small-icon">
+                <span class="icon up-icon"></span>
             </button>
             <div class="menu-options">
                 {{#each animations}} {{#unless (eq ../selectedAnimation (add @index 1))}}
                 <button class="flex-container" id="label-option-button" data-value="{{this}}">
-                    <img src="{{../typeImg}}" class="icon types-icon">
+                    <span class="icon types-icon"></span>
                     <span class="control-text animation-label">Animation</span>
                     <span class="control-text animation-number">{{add @index 1}}</span>
                 </button>
@@ -265,8 +329,10 @@
         <div class="progress-control" id="progress-control">
             <button class="play-pause" id="play-pause-button">
                 {{#if paused}}
-                <img src="{{playImg}}" class="icon play-button">{{else}}
-                <img src="{{pauseImg}}" class="icon pause-button">{{/if}}
+                <span class="icon play-icon"></span>
+                {{else}}
+                <span class="icon pause-icon"></span>
+                {{/if}}
             </button>
             <div class="progress-bar-container flex-container" id="progress-bar-container">
                 <div class="progress-bar">
@@ -279,7 +345,7 @@
         <div class="speed">
             <button class="flex-container" id="speed-button">
                 <span class="control-text speed-text">{{selectedSpeed}}</span>
-                <img src="{{upImg}}" class="small-icon">
+                <span class="icon up-icon"></span>
             </button>
             <div class="menu-options">
                 {{#eachInMap speedList}} {{#unless (eq ../selectedSpeed id)}}
@@ -294,11 +360,11 @@
     <div class="default-control">
         {{#unless hideHelp}}
         <button class="help" id="help-button" title="Help">
-            <img src="{{helpImg}}" class="icon">
+            <span class="icon help-icon"></span>
         </button>
         {{/unless}} {{#unless hideFullScreen}}
         <button class="fullscreen" id="fullscreen-button" title="Fullscreen">
-            <img src="{{fullImg}}" class="icon">
+            <span class="icon fullscreen-icon"></span>
         </button>
         {{/unless}}
     </div>

Viewer/src/configuration/types/default.ts

@@ -4,7 +4,11 @@ export let defaultConfiguration: ViewerConfiguration = {
     version: "3.2.0-alpha4",
     templates: {
         main: {
-            html: require("../../../assets/templates/default/defaultTemplate.html")
+            html: require("../../../assets/templates/default/defaultTemplate.html"),
+            params: {
+                babylonFont: require('../../../assets/babylon.woff'),
+                noEscape: true
+            }
         },
         loadingScreen: {
             html: require("../../../assets/templates/default/loadingScreen.html"),
@@ -28,17 +32,10 @@ export let defaultConfiguration: ViewerConfiguration = {
                     "0.5x": "0.5",
                     "1.0x": "1.0",
                     "1.5x": "1.5",
-                    "2.0x" : "2.0",
+                    "2.0x": "2.0",
                 },
-
-                // update these to font
-                typeImg: "https://denalicdn.blob.core.windows.net/webassets/animation/Icon_Animation.svg",
-                playImg: "https://denalicdn.blob.core.windows.net/webassets/animation/Icon_Play.svg",
-                upImg: "https://denalicdn.blob.core.windows.net/webassets/animation/Icon_UpChevron.svg",
-                helpImg: "https://denalicdn.blob.core.windows.net/webassets/animation/Icon_Help.svg",
-                fullImg: "https://denalicdn.blob.core.windows.net/webassets/animation/Icon_FullScreen.svg",
-                pauseImg: "https://denalicdn.blob.core.windows.net/webassets/animation/Icon_Pause.svg", 
-                
+                logoImg: require('../../../assets/img/BabylonJS_logo_Small.png'),
+                logoText: 'BabylonJS'
             },
             events: {
                 pointerdown: {

Viewer/src/templateManager.ts

@@ -339,7 +339,7 @@ export class Template {
         this.initPromise = htmlContentPromise.then(htmlTemplate => {
             if (htmlTemplate) {
                 this._htmlTemplate = htmlTemplate;
-                let compiledTemplate = Handlebars.compile(htmlTemplate);
+                let compiledTemplate = Handlebars.compile(htmlTemplate, { noEscape: (this._configuration.params && this._configuration.params.noEscape) });
                 let config = this._configuration.params || {};
                 this._rawHtml = compiledTemplate(config);
                 try {

Viewer/src/viewer/defaultViewer.ts

@@ -232,8 +232,6 @@ export class DefaultViewer extends AbstractViewer {
             this._animationList = model.getAnimationNames(),
                 navbar.updateParams({
                     animations: this._animationList,
-                    //hideAnimations: true,
-                    //hideFullScreen: true,
                 });
 
             // default animation & speed

Viewer/webpack.config.js

@@ -51,8 +51,12 @@ module.exports = {
             }
         },
         {
-            test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+            test: /\.(jpe?g|png|ttf|eot|svg?)(\?[a-z0-9=&.]+)?$/,
             use: 'base64-image-loader?limit=1000&name=[name].[ext]'
+        },
+        {
+            test: /\.(woff|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+            loader: 'base64-font-loader'
         }]
     },
     devServer: {

package.json

@@ -40,6 +40,7 @@
     "readmeFilename": "README.md",
     "dependencies": {},
     "devDependencies": {
+        "base64-font-loader": "0.0.4",
         "typescript": "^2.8.1"
     }
 }