Merge pull request #368 from smartdevicelink/release/0.10.0_RC1

Release 0.10.0

README.md

@@ -6,6 +6,21 @@ Note: This requires you to use Ubuntu 16.04 or 18.04.
 
 Clone the [SDL Core repository](https://github.com/smartdevicelink/sdl_core) and follow the setup instructions for the project. After the project is built, run an instance of SDL Core in your terminal.
 
+### Dependencies
+
+- nvm
+- chromium-browser
+- python3 and pip
+- ffmpeg
+- ffmpeg-python
+
+```
+sudo apt install chromium-browser ffmpeg python3 python3-pip -y
+python3 -m pip install ffmpeg-python
+```
+
+Check out [nvm on github](https://github.com/nvm-sh/nvm#installing-and-updating) to learn how to install and use nvm!
+
 ### Build and Run the HMI
 
 Once SDL Core is running, follow these steps to set up the Generic HMI.
@@ -44,14 +59,16 @@ After running the build command, you can launch the Generic HMI in a web browser
 chromium-browser generic_hmi/build/index.html
 ```
 
-### PTU with vehicle modem (optional)
+### HMI Backend
 
-In order to get policy table updates using the vehicle modem, some additional setup is required
+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.
 
 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
 
+Video streaming also requires you to have all the [aforementioned dependencies](#dependencies) installed.
+
 ## 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.
@@ -345,4 +362,4 @@ If you aren’t satisfied with the build tool and configuration choices, you can
 
 Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

deploy_server.sh

@@ -32,21 +32,45 @@ TARGET_SCRIPT="start_server.py"
 TARGET_DIR="./python_websocket/src"
 SOURCE_DIR="./tools"
 
-DeployServer() {
+SwitchSubmoduleVersion(){
+    version=$1
+    if [ -z "$version" ]; then
+        echo "Version number required"
+        return
+    fi
+
+    cwd=$(pwd)
+    cd ${TARGET_DIR}
+    if [[ -z $(git branch --list "v$version") ]]; then # Version branch does not exist
+        git checkout tags/$version -b v$version > /dev/null
+        echo "Using websockets version $version"
+    elif [[ "$(git rev-parse --abbrev-ref HEAD)" != "v$version" ]]; then # Not on version branch
+        git checkout v$version
+    fi
+    cd $cwd
+}
+
+InitSubmodules() {
     git submodule init
     git submodule update
 }
 
 StartServer() {
     cp ${SOURCE_DIR}/${TARGET_SCRIPT} ${TARGET_DIR}
-    python3 ${TARGET_DIR}/${TARGET_SCRIPT} --host 127.0.0.1 --port 8081
+    python3 ${TARGET_DIR}/${TARGET_SCRIPT} --host 127.0.0.1 --ws-port 8081
     rm ${TARGET_DIR}/${TARGET_SCRIPT}
 }
 
 if ! find $TARGET_DIR -mindepth 1 | read; then
     echo "Fetching HMI dependencies..."
-    DeployServer
+    InitSubmodules
 fi
+
+python_version=$(python3 -V | awk '{print $2}')
+if [[ $? == 0 && "$python_version" < "3.6.0" ]]; then
+    SwitchSubmoduleVersion "7.0"
+fi
+
 echo "Starting HMI Backend service..."
 StartServer
 echo "HMI Backend service was stopped"

package.json

@@ -13,6 +13,7 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.3",
+    "react-simple-keyboard": "^2.5.71",
     "redux": "^4.0.5"
   },
   "scripts": {

src/js/Flags.js → public/Flags.js

@@ -1,4 +1,4 @@
-var flags = {
+window.flags = {
     ExternalPolicies: false,
     ExternalPoliciesPackUrl: 'ws://127.0.0.1:8088',
     ExternalPoliciesUnpackUrl: 'ws://127.0.0.1:8089',
@@ -8,6 +8,4 @@ var flags = {
     CorePort: 8087,
     CoreWebEngineAppPort: 2020,
     AppStoreDirectoryUrl: 'https://sdl-webengine-app-store-example.s3.amazonaws.com/app-directory.json'
-};
-
-export {flags};
+};

public/index.html

@@ -10,6 +10,7 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="logo192.png" />
+    <script type="text/javascript" src="Flags.js"></script>
     <title>Generic HMI</title>
   </head>
   <body>

src/css/_config.scss

@@ -9,4 +9,9 @@ $accent-color: white;
 $secondary-accent-color: bright-blue;
 
 $font-primary-color: white;
-$font-secondary-color: slate;
+$font-secondary-color: slate;
+
+:export {
+  masterWidth: $master-width;
+  masterHeight: $master-height;
+}

src/css/base/_base.scss

@@ -61,7 +61,7 @@ body {
 .driver-distraction-button {
     margin-top: 22px;
     margin-left: 20px;
-    width: 210px;
+    width: 150px;
     border-radius: 2px;
     padding: 10px 0;
     float: left;
@@ -70,6 +70,13 @@ body {
     }
 }
 
+.resolution-selector {
+    margin-top: 18px;
+    margin-left: 20px;
+    border-radius: 2px;
+    float: left;
+}
+
 .webengine-app-container {
     iframe {
         position: absolute;

src/css/base/_typography.scss

@@ -11,7 +11,6 @@
 @mixin t-small() {
     -webkit-font-smoothing: antialiased;
     font-size: 25px;
-    line-height: 2;
 }
 
 .t-small {

src/css/components/_album-art.scss

@@ -4,11 +4,11 @@
     @if $calc-width <= $calc-height {
         $size: $calc-width + ($calc-width / 6.5);
         @include size($size);
-        @include transform(translateY(1%));
+        @include transform(translateY(2%));
     } @else {
         $size: $calc-height + ($calc-height / 6.5);
         @include size($size);
-        @include transform(translateY(1%));
+        @include transform(translateY(2%));
     }
 }
 

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

@@ -38,6 +38,10 @@
         bottom: 0px;
         width: 100%;
         height: 23%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
     }
 
     &__header {
@@ -72,6 +76,13 @@
             margin: auto;
         }
     }
+
+    &__secondary-image {
+        position: absolute;
+        right: 7px;
+        top: 5px;
+        width: 50px;
+    }
 }
 
 .hscrollmenu-item-disabled {

src/css/components/_keyboard.scss

@@ -0,0 +1,87 @@
+.keyboard {
+    width: 100%;
+    height: $master-height - 75px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    padding: 20px;    
+}
+
+.dark-theme .simple-keyboard.hg-theme-default.custom-keyboard {
+    background: color($primary-color);
+    display: flex;
+    flex-direction: column;
+    flex-grow: 4;
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+.light-theme .simple-keyboard.hg-theme-default.custom-keyboard {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 4;
+    padding-left: 0px;
+    padding-right: 0px;
+}
+
+.dark-theme .simple-keyboard.hg-theme-default.custom-keyboard .hg-button{
+    background-color: color($secondary-color);
+    color: color(white);
+    border-bottom-color: color(asphalt);
+    height: 100%;
+}
+
+.light-theme .simple-keyboard.hg-theme-default.custom-keyboard .hg-button{
+    height: 100%;
+}
+
+.dark-theme .simple-keyboard.hg-theme-default.custom-keyboard .hg-button:active{
+    background-color: color(tire);
+}
+
+.simple-keyboard.hg-theme-default.custom-keyboard .hg-row{
+    flex-grow: 4;
+}
+
+.dark-theme .keyboard .input-text {
+    width: 100%;
+    height: 200px;
+    padding: 20px;
+    font-size: 36px;
+    border: none;
+    box-sizing: border-box;
+    background-color: color($secondary-color);
+    color: color(white);
+}
+
+.dark-theme .keyboard .mask-option-label{
+    color: color(white);
+    margin-left: 5px;
+}
+
+.light-theme .keyboard .input-text {
+    width: 100%;
+    height: 200px;
+    padding: 20px;
+    font-size: 36px;
+    border: none;
+    box-sizing: border-box;
+}
+
+.light-theme .keyboard .mask-option-label {
+    margin-left: 5px;
+}
+
+.keyboard .input-row {
+    width: 100%;
+    white-space: nowrap;
+}
+
+.keyboard .mask-checkbox {
+    position: relative;
+    right: 100px;
+}
+
+.numeric .hg-button {
+    width: 33.3%;
+}

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

@@ -28,6 +28,7 @@
         display: flex;
         flex-direction: column;
         align-items: center;
+        justify-content: center;
 
         img {
             margin:auto;
@@ -36,7 +37,7 @@
 
         div {
             width: 100%;
-            height: 100%;
+            height: 85%;
             display: flex;
             flex-direction: column;
             align-items: center;
@@ -56,12 +57,15 @@
     &__name {
         flex: 6;
         margin-left: 2%;
+        display: flex;
+        flex-direction: column;
     }
 
     &__arrow {
         flex: 0.5;
         margin: auto;
         align-self: flex-end;
+        max-width: 55px;
 
         svg {
             display: block;
@@ -75,3 +79,7 @@
 .vscrollmenu-item-disabled {
     opacity: 0.7;
 }
+
+.mw-100px {
+    max-width: 100px;
+}

src/css/main.scss

@@ -44,4 +44,5 @@
 @import 'components/double-graphic-with-softbuttons';
 @import 'components/app-services-nav';
 @import 'components/appstore-menu';
+@import 'components/keyboard';
 

src/img/dynamic/IconSeekLeftWithText.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default class IconSeekLeftWithText extends React.Component {
+    render() {
+        return (
+            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                preserveAspectRatio="xMidYMid meet" viewBox="19 9.8 35 29.3" width="75" height="54">
+            <path d="M49,39l-1.4-1.4C50.4,34.8,52,31,52,27c0-4-1.5-7.8-4.4-10.6S41,12.1,37,12.1c-4,0-7.8,1.5-10.6,4.4
+                C21.1,21.8,20.5,30,25,36l-1.6,1.2C18.3,30.4,18.9,21.1,25,15c3.2-3.2,7.5-4.9,12-4.9c4.6,0,8.8,1.8,12,4.9c3.2,3.2,4.9,7.5,4.9,12
+                C54,31.6,52.2,35.8,49,39z"/>
+            <polyline class="svg-fill-important" points="19,37 25.2,38.8 27,33 "/>
+            <text transform="matrix(1.5 0 0 1.5 28 32)" style={{fontFamily : "Arial-BoldMT", fontSize : 12}} 
+                class="svg-stroke">{this.props.seekTime}</text>
+            </svg>
+        )
+    }
+}

src/img/dynamic/IconSeekRightWithText.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default class IconSeekRightWithText extends React.Component {
+    render() {
+        return (
+            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                preserveAspectRatio="xMidYMid meet" viewBox="19.9 9.8 35 29.3" width="75" height="54">
+            <path d="M20.1,27c0-4.5,1.7-8.8,4.9-12c3.2-3.1,7.4-4.9,12-4.9c4.5,0,8.8,1.7,12,4.9c6.1,6.1,6.7,15.4,1.6,22.2L49,36
+                c4.5-6,3.9-14.2-1.4-19.5c-2.8-2.9-6.6-4.4-10.6-4.4s-7.7,1.5-10.6,4.3S22,23,22,27s1.6,7.8,4.4,10.6L25,39
+                C21.8,35.8,20,31.6,20.1,27z"/>
+            <polyline class="svg-fill-important" points="47,33 48.8,38.8 55,37 "/>
+            <text transform="matrix(1.5 0 0 1.5 28 32)" style={{fontFamily : "Arial-BoldMT", fontSize : 12}} 
+                class="svg-stroke">{this.props.seekTime}</text>
+            </svg>
+        )
+    }
+}