Merge pull request #508 from smartdevicelink/release/0.12.0

Release 0.12.0

README.md

@@ -63,14 +63,39 @@ chromium-browser generic_hmi/build/index.html
 
 ### HMI Backend
 
-The generic_hmi includes an additional backend component that is required for some features, such as in-browser video streaming and policy table updates using the vehicle modem.
+The generic_hmi includes an additional backend component that is required for some features, such as in-browser video streaming, policy table updates using the vehicle modem and accessing the webengine app store.
 
 1. Run `deploy_server.sh` in the root folder
-2. Run the HMI normally
-3. Select the `PTU using in-vehicle modem` checkbox to enable the feature
+2. Start and run the HMI normally
+
+#### Connection status icon
+
+The backend connection status is indicated by an icon in the hmi settings page (top-right). 
+
+<img src= "./src/img/static/0x30.svg" width=50/>
+
+The icon will contain a check mark if the backend server is connected/cross if the backend server is disconnected.
+
+Clicking on the icon will display a prompt allowing the user to set the url for the backend. Once the URL is set, the HMI will attempt to re-connect to the backend server.
+
+#### Features
+
+The following features can be used in the hmi if the backend server is connected.
+
+##### HMI PTU
+
+Select the `PTU using in-vehicle modem` checkbox to enable the feature
+
+##### Video streaming
+
+Start a video service from the SDL app. The video stream should start in the browser.
 
 Video streaming also requires you to have all the [aforementioned dependencies](#dependencies) installed.
 
+##### Webengine app store
+
+The app store can be accessed from the hmi settings page. Clicking on any of the listed webengine apps will allow you to download the webengine app.
+
 ## Developing/Modifying the HMI
 
 The main third-party technologies we use to develop this HMI are React, React-Redux, and React-Router. The HMI component of SDL is responsible for processing and responding to RPCs which are received from a connected SDL Core instance.
@@ -91,7 +116,7 @@ Implementing an RPC is the main activity when developing this HMI as it related
 
   1. An RPC comes in from SDL Core which changes some information displayed to the user in a view (Implementing Requests)
   2. The user takes action on an element in the React Application which generates a message to SDL Core (Sending messages to SDL Core)
-  3. An RPC comes in from SDL Core which forces the current view in the React Applicaton to change (Changing the router history)
+  3. An RPC comes in from SDL Core which forces the current view in the React Application to change (Changing the router history)
 
 #### Implementing Requests
 

deploy_server.sh

@@ -39,7 +39,7 @@ InitSubmodules() {
 
 StartServer() {
     cp ${SOURCE_DIR}/${TARGET_SCRIPT} ${TARGET_DIR}
-    python3 ${TARGET_DIR}/${TARGET_SCRIPT} --host 127.0.0.1 --ws-port 8081
+    python3 ${TARGET_DIR}/${TARGET_SCRIPT} "$@"
     rm ${TARGET_DIR}/${TARGET_SCRIPT}
 }
 
@@ -49,6 +49,6 @@ if ! find $TARGET_DIR -mindepth 1 | read; then
 fi
 
 echo "Starting HMI Backend service..."
-StartServer
+StartServer "$@"
 echo "HMI Backend service was stopped"
 

src/css/_config.scss

@@ -2,6 +2,8 @@
 $master-width: 960px;
 $master-height: 675px;
 
+$body-margin: 25px;
+
 $primary-color: tire;
 $secondary-color: black;
 

src/css/base/_base.scss

@@ -2,7 +2,7 @@ body {
     font-family: 'LivioNorm', Helvetica, sans-serif;
     font-weight: normal;
     font-size: 15px;
-    margin: 25px;
+    margin: $body-margin;
     overflow: hidden;
 }
 

src/css/base/fonts.scss

@@ -37,3 +37,10 @@
          url('../../fonts/LivioNorm-Bold-WebS.ttf') format('ttf');
     font-weight: 600;
 }
+
+@font-face {
+    font-family: 'LivioMask';
+    src: url('../../fonts/LivioMask.otf');
+    src: url('../../fonts/LivioMask.woff2') format('woff2');
+    font-weight: 400;
+}

src/css/components/_album-art.scss

@@ -4,11 +4,9 @@
     @if $calc-width <= $calc-height {
         $size: $calc-width + ($calc-width / 6.5);
         @include size($size);
-        @include transform(translateY(2%));
     } @else {
         $size: $calc-height + ($calc-height / 6.5);
         @include size($size);
-        @include transform(translateY(2%));
     }
 }
 
@@ -17,13 +15,24 @@
     @include align-items(center);
     margin: auto 0px;
     @include album-art-size();
+    height: 100% !important;
+    padding: 1%;
     border-radius: 4px;
 
     img {
-        width: 100%;
+        max-width: 100%;
+        max-height: 100%;
     }
 }
 
+.album-art-background {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .static-icon {
     @include size(100%);
 }

src/css/components/_alert.scss

@@ -7,7 +7,7 @@
     background-color   : rgba(0, 0, 0, 0.75);
     width: $master-width;
     height: $master-height;
-    margin: 25px;
+    margin: $body-margin;
     z-index: 1001;
 }
 
@@ -61,6 +61,7 @@
     display: flex;
     padding: 30px;
     max-height: calc((#{$master-height} - 75px) * 0.6);
+    justify-content: space-around;
 
     h4 {
         overflow: auto;

src/css/components/_app-header.scss

@@ -33,7 +33,12 @@
         text-transform: uppercase;
     }
 
-    .settings-menu svg{
+    .settings-menu-icon svg{
+        @include size(40px);
+        margin-left: 0px;
+    }
+
+    .connection-status-icon svg{
         @include size(40px);
         margin-left: 0px;
     }

src/css/components/_app-services-nav.scss

@@ -177,7 +177,7 @@
   left              : 0;
   right             : 0;
   width: $master-width;
-  margin: 25px 0px 0px 25px;  
+  margin: $body-margin 0px 0px $body-margin;  
   z-index:1001;
 }
 

src/css/components/_control-bar.scss

@@ -33,6 +33,7 @@
                 width: 75px;
             }
         }
+        border-radius: 5px;
     }
 
     .svg-wrap {

src/css/components/_double-graphic-with-softbuttons.scss

@@ -22,11 +22,12 @@
 }
 
 .double-graphic-with-softbuttons-template .double-graphic {
-    padding-right: 10px;
-    padding-left: 10px;
-    width:50%;
+    width:100%;
     height:100%;
+    max-height: 100%;
+    max-width: 100%;
     object-fit: contain;
+    display: flex;
 }
 
  .double-graphic-with-softbuttons-template .soft-buttons {
@@ -63,4 +64,20 @@
 
 .double-graphic-with-softbuttons-template .soft-button:last-child {
     margin-right: 0px !important;
+}
+
+.width-50 {
+    width:50%;
+}
+
+.height-100 {
+    height:100%;
+}
+
+.double-graphic-with-softbuttons-template .double-graphic-container {
+    width:50%;
+    height:100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }

src/css/components/_graphic-with-text-and-softbuttons.scss

@@ -5,10 +5,9 @@
     display: flex;
 
     .large-graphic {
-        padding-right: 25px;
-        padding-left: 10px;
         max-height: 100%;
         width: 100%;
+        max-width: 100%;
         object-fit: contain;
     }
 

src/css/components/_graphic-with-text-buttons.scss

@@ -7,18 +7,18 @@
 
 .graphic-with-text-buttons-container {
     height: 100%;
-    width: 50%;
+    width: 100%;
     display: flex;
     align-items: center;
+    justify-content: center;
 }
 
 .graphic-with-text-buttons-template .large-graphic {
-    padding-left: 25px;
-    padding-right: 10px;
     width:100%;
     max-height:100%;
     object-fit: contain;
     margin-bottom: 20px;
+    max-width: 100%;
 }
 
  .graphic-with-text-buttons-template .soft-buttons {

src/css/components/_graphic-with-text.scss

@@ -10,14 +10,14 @@
     min-width: 50%;
     display: flex;
     align-items: center;
+    justify-content: center;
 }
 
 .graphic-with-text-template .large-graphic {
-    padding-right: 25px;
-    padding-left: 10px;
     max-height: 100%;
     width: 100%;
     object-fit: contain;
+    max-width: 100%;
 }
 
 .graphic-with-text-template .text-body {

src/css/components/_graphic-with-tiles.scss

@@ -7,29 +7,29 @@
 
 .graphic-with-tiles-container {
     height: 100%;
-    width: 50%;
+    width: 100%;
     display: flex;
     align-items: center;
+    justify-content: center;
 }
 
 .graphic-with-tiles-template .large-graphic {
-    padding-left: 25px;
-    padding-right: 10px;
     width:100%;
     max-height:100%;
     object-fit: contain;
     margin-bottom: 20px;
+    max-width: 100%;
 }
 
 .graphic-with-tiles-template .soft-buttons {
     width: 100%;
     height: 100%;
     @include display(flex);
-    @include justify-content(flex-start);
+    @include justify-content(center);
     @include flex-direction(row);
     @include flex-wrap(wrap);
     @include align-items(stretch);
-    @include align-content(flex-start);
+    @include align-content(center);
     //@include align-content(space-between);
     padding-left: 10px;
     padding-right: 25px;

src/css/components/_h-scroll-menu-item.scss

@@ -13,7 +13,7 @@
         align-items: center;
         justify-content: center;
         @include size(50%);
-        margin: 16% auto 12px;
+        margin: 13% auto 12px;
 
         border-radius: 4px;
 
@@ -29,16 +29,21 @@
 
         img {
             width: 100%;
+            max-height: 100%;
+            object-fit: contain;
         }
     }
 
     &__name {
         position: absolute;
         overflow: scroll;
+       p {
+            overflow: hidden;
+        }
         scrollbar-width: none;
         bottom: 0px;
         width: 100%;
-        height: 23%;
+        height: 33%;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -83,6 +88,9 @@
         right: 7px;
         bottom: -2px;
         width: 50px;
+        max-height: 100%;
+        max-width: 60px;
+        object-fit: contain;
     }
 }