Merge pull request #264 from smartdevicelink/develop

Release 0.8.0

.gitignore

@@ -1,3 +1,3 @@
-.gitinore
 node_modules/
-.DS_Store
+.DS_Store
+webengine/

.gitmodules

@@ -0,0 +1,4 @@
+[submodule "python_websocket"]
+	path = python_websocket
+	url = https://github.com/smartdevicelink/websockets.git
+	branch = 8.1

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2017 - 2018 SmartDeviceLink Consortium, Inc.
+Copyright (c) 2017 - 2020 SmartDeviceLink Consortium, Inc.
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without

README.md

@@ -2,133 +2,69 @@
 
 ## Get an instance of SDL Core running
 
-There are two options for running SDL Core. You can either clone and compile the code yourself on an Ubuntu virtual machine, or you may use a Docker instance of SDL Core.
+Note: This requires you to use Ubuntu 16.04 or 18.04.
 
-### Option 1: Build & Run SDL Core Locally
+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.
 
-Note: This option requires you to use Ubuntu 14.04. If you do not have an Ubuntu environment available, please use setup option 2. 
-
-#### Compile Core
-
-  1. [Clone the SDL Core repository](https://github.com/smartdevicelink/sdl_core)
-  2. Create a folder for your build and run `cmake ../sdl_core`
-  3. If there are any dependency issues, install missing dependencies:
-
-
-```
-sudo apt-get install git cmake build-essential libavahi-client-dev libsqlite3-dev chromium-browser libssl-dev libudev-dev libgtest-dev libbluetooth3 libbluetooth-dev bluez-tools gstreamer1.0* libpulse-dev
-```
-
-  4. Run the following commands to compile and install SDL Core
-
-
-
-```
-make
-make install
-```
+## Start the HMI
 
-#### Start SDL Core
-Once SDL Core is compiled and installed you can start it from the executable in the bin folder
+Once SDL Core is running, follow these steps to set up the Generic HMI.
 
+First, clone this repository. Once cloned, you can initialize the git submodules in this project by running the following commands:
 ```
-cd bin/
-./start.sh
+cd generic_hmi
+git submodule init
+git submodule update
 ```
+Alternatively, you can clone this repository with the --recurse-submodules flag.
 
-### Option 2: Use Docker Instance
-
-[Install Docker](https://docs.docker.com/engine/installation/)
-
-*Docker version greater than 1.8 is required for OS X*
-
-Start a Docker container containing the latest version of core:
+After initializing the git submodules for this project, you can launch the Generic HMI in a web browser:
 ```
-docker run -d -p 12345:12345 -p 8087:8087 -p 3001:3001 --name core smartdevicelink/core:latest
+chromium-browser index.html
 ```
 
-*This [run](https://docs.docker.com/engine/reference/run/) command is starting a docker container in detached mode `-d` (so it won't take over your terminal). It then maps the ports `-p` 3001, 8080, 8087, 12345 of your machine to the same ports in the container. So the container can be easily referenced it is given the name `--name` core.*
-
-Core is now running and exposing ports for communication. Core logs can be viewed using:
-```
-docker logs -f core
-```
-*The `-f` flag allows the Docker [logs](https://docs.docker.com/engine/reference/commandline/logs/) output to be followed in terminal*
+### PTU with vehicle modem (optional)
 
-#### Core communication ports
-The Docker instance of Core exposes multiple ports for different types of communication:
+In order to get policy table updates using the vehicle modem, some additional setup is required
 
-| TCP port       | description                                                 	        |
-|----------------|----------------------------------------------------------------------|
-| 3001           | Exposes core's file system in `/usr/sdl/bin/storage`                 |        
-| 8087           | Websocket used by the HMI to communicate with SDL Core               |
-| 12345          | SDL Core's port used to communicate with mobile application over TCP |
+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
 
+## Developing/Modifying the HMI
 
-## Start 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.
 
-Once SDL Core is setup, follow these steps to clone, build, and run the SDL Generic HMI.
+### Building the HMI
 
-Clone this repository
+Before any changes can be made to the HMI, you will first need to set up your environment to allow for building the Generic HMI.
 
-Note: If you are not making any changes to the Generic HMI, you may skip straight to the last step and launch the Generic HMI in a web browser.
+Note: These instructions are written for Node version 7.2 
 
 Install webpack:
 ```
-npm install -g webpack
+npm install -g webpack@1.11
 ```
 
 Install dependencies (you might need to clean the `node_modules` folder):
 ```
 npm install
 ```
 
-Run webpack
-
-```
-webpack
-```
-
-Launch the Generic HMI in a web browser
-
-```
-chromium-browser index.html
-```
-
-## Usage
-
-Core should already be running. To verify, use the following command and you should see a container with the name `core`:
-```
-docker ps
-```
-
-Connect an SDL-connected application (such as [Hello SDL Android](https://github.com/smartdevicelink/sdl_java_suite/tree/master/android/hello_sdl_android)) to the instance of core running on your machine. The IP should be your machine's IP address and the port is `12345`
-
-Open (or refresh) the running HMI in a chrominium based browser (chrome). By default it is running at [http://localhost:3000/](http://localhost:3000/)
-
-**IMPORTANT** If you need to restart the HMI then Core must also be restarted! Just restart the Docker container using:
-```
-docker restart core
-```
-then go through the usage instructions again.
-
-## Developing the HMI
-
-The main third-party technologies we use to develop this HMI are React, React-Redux, and React-Router. Implement an SDL HMI is an exercise in receiving, processing, and responding to RPCs which are coming from a connected SDL Core instance.
-
 
-Note: After making any changes to the Generic HMI, you must run 
+Run webpack:
 ```
 webpack
 ```
-before relaunching the HMI in the browser to see any changes made.
+Note: This command must be run before relaunching the HMI in the browser to see any changes made.
 
+### Key Files
 
-### entry.js
+#### entry.js
 
 This is the main entry point for the entire application. It sets up the routes and highest level components in the React app. Once the application is loaded, it attempts to connect to an instance of SDL Core.
 
-### Controllers/Controller.js
+#### Controllers/Controller.js
 
 This is the main path to all things SDL related. The Controller routes RPCs coming from SDL to sub-controllers so that they can be handled, and responds to SDL. Sub-controllers all implement a `handleRPC()` function. The handleRPC function returns true if the Controller should respond with a generic success to SDL, return false for a generic false, return an object with a key of `rpc` to respond with a custom RPC, and return `null` if the Controller should not respond (such as in the case of incoming notifications from SDL). The Controller also implements a `sanitize` function which can be used to manipulate RPCs before they're sent off to a sub-controller to be handled.
 
@@ -344,7 +280,7 @@ The only thing left to do now is to make sure the connected React Component is p
 onClick={() => this.props.onSelection(this.props.appID, this.props.cmdID, this.props.menuID)}>
 ```
 
-#### Changing the router history
+### Changing the router history
 
 The last common activity required to implement an SDL HMI completely is the ability to change views based on messages received by SDL. Views in the React Application are defined by Routes. When a user selects an item that changes the view, a route is taken such as `/inapplist`. We can force a route to be taken using React Routers `withRouter`. Right now, since the AppHeader component is rendered in every single view, it is responsible for forcing a change to routing history (thereby changing the view) when it renders. So the flow is
 

deploy_server.sh

@@ -0,0 +1,53 @@
+#!/bin/bash
+
+# Copyright (c) 2020 Ford Motor Company,
+# All rights reserved.
+#
+# Redistribution and use in source and binary forms, with or without
+# modification, are permitted provided that the following conditions are met:
+#
+# * Redistributions of source code must retain the above copyright notice, this
+#   list of conditions and the following disclaimer.
+#
+# * Redistributions in binary form must reproduce the above copyright notice,
+#   this list of conditions and the following disclaimer in the documentation
+#   and/or other materials provided with the distribution.
+#
+# * Neither the name of Ford Motor Company nor the names of its
+#   contributors may be used to endorse or promote products derived from
+#   this software without specific prior written permission.
+#
+# THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+# AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+# IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+# DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+# FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+# DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+# SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+# CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+# OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+# OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+TARGET_SCRIPT="start_server.py"
+TARGET_DIR="./python_websocket/src"
+SOURCE_DIR="./tools"
+
+DeployServer() {
+    git submodule init
+    git submodule update
+}
+
+StartServer() {
+    cp ${SOURCE_DIR}/${TARGET_SCRIPT} ${TARGET_DIR}
+    python3 ${TARGET_DIR}/${TARGET_SCRIPT}
+    rm ${TARGET_DIR}/${TARGET_SCRIPT}
+}
+
+if ! find $TARGET_DIR -mindepth 1 | read; then
+    echo "Fetching HMI dependencies..."
+    DeployServer
+fi
+echo "Starting HMI Backend service..."
+StartServer
+echo "HMI Backend service was stopped"
+

src/css/base/_base.scss

@@ -45,4 +45,17 @@ body {
     }    
 }
 
+.toggle-ptu-with-modem-button{
+    margin-top: 22px;
+    margin-left: 20px;
+    width: 210px;
+    border-radius: 2px;
+    text-align: center;
+    padding: 10px 0;
+    float: left;
+    input{
+        margin-right: 10px;
+    }  
+}
+
 $base-box-shadow: 0 20px 40px 0 rgba(color(black), 0.75);

src/css/components/_alert.scss

@@ -38,11 +38,29 @@
 
 .alert-title {
     text-align: center;
+
+    p {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
 }
 
 .alert-top {
     display: flex;
     padding: 30px;
+    max-height: calc((#{$master-height} - 75px) * 0.6);
+
+    h4 {
+        overflow: scroll;
+    }
+
+    img {
+        min-width: calc((#{$master-height} - 75px) * 0.3);
+
+        width: calc((#{$master-height} - 75px) * 0.3);
+        height: calc((#{$master-height} - 75px) * 0.3);
+    }
 }
 
 .alert-icon{

src/css/components/_appstore-menu.scss

@@ -0,0 +1,60 @@
+.appstore-menu {
+    width: 100%;
+    height: $master-height - 75px;
+    overflow-y: scroll;
+
+    @include display(flex);
+    flex-direction: column;
+}
+
+::-webkit-scrollbar { 
+    display: none; 
+}
+
+.appstore-menu-item {
+    @include display(flex);
+    @include justify-content(space-between);
+    @include align-items(center);
+
+    flex-direction: row;
+    flex: 1;
+    max-height: 15%;
+    padding-left: 55px;
+    padding-right: 50px;
+    text-decoration: none;
+    color: color(white);
+    border-bottom: 2px solid;
+
+    &__image {
+        flex: 0.5;
+        border-radius: 4px;
+        width: 16%;
+        max-width: 16%;
+        height: 80%;
+        max-height: 80%;
+
+        img {
+            max-width: 100%;
+            max-height: 100%;
+        }
+    }
+
+    .svg-wrap {
+        display: block;
+        width: 44px;
+        height: 44px;
+    }
+
+    h2 {
+        flex: 3;
+        overflow: hidden;
+        margin-right: 5%;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    h4 {
+        flex: 1;
+        overflow: hidden;
+    }
+}

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

@@ -8,11 +8,24 @@
     position: relative;
 
     &__image {
+        display: flex;
+        align-items: center;
+        justify-content: center;
         @include size(50%);
-        margin: 25px auto 12px;
+        margin: 16% auto 12px;
 
         border-radius: 4px;
 
+        div {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            svg {
+                height: 100%;
+            }
+        }
+
         img {
             width: 100%;
         }
@@ -47,3 +60,7 @@
         }
     }
 }
+
+.hscrollmenu-item-disabled {
+    opacity: 0.7;
+}