Introduction

A server is to be setup for migrating the application control to cloud. Client-Server Setup for Application Customization is described below.

It is mandatory to setup the application server to configure the applications for the box which are available in that box.
Only the applications configured against a box id will be available to that box. 

Overview

This document provides the following details: 

• Prepare the environment (Pre-requisite)  
• Configure the web server and database for application configuration 
• Configure the box to connect to server 
• Customize the application

Server Setup 

The server setup is listed here:

Preparation 

Follow the steps listed here to setup the environment for application server. 

1. Install Java JDK in your system (check “java –version” in command prompt) and the release is tested using java 15.0.1 2020-10-20.
2. Download the Xampp installer (xampp-win32-1.8.2-2-VC9-installer.exe).
3. Follow steps 1 to 10 from the link: https://www.ionos.com/digitalguide/server/tools/xampp-tutorial-create-your-own-local-test-server/#c42765.
4. After successful installation execute xampp-control.exe in XAMPP folder from c://<pathtoXampp>/ xampp-control.exe  and then the Xampp control panel appears. 
5. Download the attached war file (CustomUI.war) and database (accelerator.sql).

           accelerator.sql.zip

 CustomUI.war

Initial Settings

Ensure the following are set before proceeding further:

1. Copy the Tata Elxsi Accelerator UI build folder to the box into /opt/www/ .
2. Application server address and serial number is configured in the box inside /opt/www/build/static/server/Serverconfig.json as described in section 3 of the document.
3. Firewalls are configured (or disabled) in the server machine to allow access from box.

 XAMPP Server Setup 

Start the Apache server and MySQL server components as described below:  

1. Open XAMPP Control Panel and Click the Start button for Apache and MySQL modules
    
   
   
2. Click on the Admin button on the MySQL module to launch the phpMyAdmin dashboard on browser
   
   
   
   
3. Follow the steps given below for Importing Database through phpMyAdmin page
   1. Click on the Import tab in the top menu of phpMyAdmin dashboard
      
      
   2. Click on Choose File then select the shared database zip file (accelerator.sql.zip) and click on Go button to import the database
       
   3. Click on the accelerator Database from the side bar to verify the Database tables
      
      
4. Configure the XAMPP Tomcat server by following the steps below 
   
   1. Copy the war file attached (CustomUI.war) and paste the same inside  “xampp\tomcat\webapps”
   2. Start Tomcat in XAMPP Control Panel and click on the Admin button next to the start button to view the tomcat server home page in the browser 
      

Client setup 

The steps to connect to the server is given below: 

Box Configuration 

1. Open /opt/www/build/static/server/Serverconfig.json in box. 
2. Serverconfig.json contains 3 fields: 
   

   "Server_ip": ip address of the server machine in which the xampp server is setup 

   "Server_port": port of Tomcat server 

   "serial_number": unique id of the box. 

3. Save and reboot the box.

The following command can be used to identify the ‘serial number’ in the box which is to be used in the database for its unique ID. 

Get Request: 
curl -d '{"jsonrpc":"2.0", "id":3, "method":"DeviceInfo.1.systeminfo"}'http://127.0.0.1:9998/jsonrpc 

Get Response: 
{ "jsonrpc": "2.0", "id":  1234567890, "result": {"version":" 1.0 #14452f612c3747645d54974255d11b8f3b4faa54", "uptime": 120, "totalram":  655757312, "freeram": 563015680, "devicename": "buildroot", "cpuload": "2", "serialnumber": "WPEuCfrLF45", "time" : "Mon, 11 Mar 2019 14:38:18" }} 

Customize the Application 

The steps to add a new box in database table are listed in this section. A default configuration is already given in the provided database. 

General procedure is: 

1. Enable/disable the menu item category in the Accelerator UI application home screen.  
   1. E.g., Enable/disable Premium Apps category home page 
2. Enable/disable individual application.
   1. E.g., Enable/disable Netflix within the Premium Apps category 
3. Enable/disable individual icons in InfoBar. 
   1. E.g., Enable/disable weather icon in the InfoBar 
4. Customize Home screen and Settings Screen Theme. 
   1. E.g., Customize Background Image/Color 
   2. E.g., Customize Background Image/Color 
   3. E.g., Customize Font Color and Font Face 

Note: The configuration is to be done against each box and each box is identified by a unique customer_id (representing boxid), which is the box serial number. This serial number should be same as serial number in /opt/www/build/static/server/Serverconfig.json in box. 

1. Steps to add a new customer/box into the server 

Follow the steps below to add a new box information to the server: 

1. Click on the customer_list Table from the list of tables available inside accelerator database as shown below.
2. Click the Insert button to insert the contents in the Table and enter the data in the respective fields.

           customer_id -> unique box id (serial_number) 

           customer_name -> name of the customer 

           customer_logo  -> path of required logo (/static/images/info/Logo.png) 

2. Steps to Enable a Premium App for a customer 

1. Click on the customer_menu_app_list table through phpMyAdmin page.
   
   
   
2. Click on the Insert button to add Customer data.
3. Premium apps feature in main menu of Accelerator UI app can be enabled by setting 6 in the menu_id field.
   [6 here refers to the Premium app content against that customer id]
4. Individual Premium apps in the Accelerator UI app can be enabled by setting the app_id field.
   [values for app_id can be referred from app_list table, see picture below with YouTube is 1, Netflix is 2 etc]
   
    

e.g. For enabling YouTube in first position 
      click on customer_menu_app_list -> click on insert 
      ->Add → menu_id : 6 
                 → app_id : 1 
                 → app_position :1 
                 →customer_id : boxid (serial_number) 

3. Steps to Disable a Premium App for a customer 

1. Click on the customer_menu_app_list table.
2. Delete the entry with app_id of the app to be disabled corresponding to the required customer_id. 

e.g. To delete Netflix premium app for a customer with customer_id: OEABAgME9i.
       → click on customer_menu_app_list .
       → Delete the entry corresponding to customer_id -> OEABAgME9i with app_id is 2. 

4. Steps to update an entry in table  

1. Click on the Edit button from the respective rows that is to be updated.
2. Make the required update and click on Go button. 

5. Steps to enable a customer to access Metro App content 

1. Click on the customer_menu_app_list table. 
   
   
   
2. Click on the Insert button to add Customer data .
3. Metro apps feature can be enabled by setting 7 in the menu_id field.
   [7 here refers to the Metro app content in menu_list table]  
4. Individual Metro apps can be enabled by setting the value in app_id field.
   [values for app_id can be referred from app_list table]  

e.g. For enabling CNN in first position. 
      click on customer_menu_app_list → click on insert  
      →Add→ menu_id : 7 
               → app_id  : 4 
               → app_position :1 
               → customer_id : boxid(serial_number) 

6. Steps to Disable a Metro App for a customer 

1. Click on the customer_menu_app_list table
2. Delete the entry with app_id of the app to be disabled corresponding to the required customer_id. 

e.g. To delete Radio line app for a customer with customer_id: OEABAgME9i.
       → click on customer_menu_app_list table.
       → Delete the entry corresponding to customer_id -> OEABAgME9i with app_id ->12. 

7. Steps to add a Recommended for you content for a customer 

1. Click on the customer_recommended_list table through phpMyAdmin page.
   
   
2. Click on the Insert button to add Customer data. 
3. Recommended For You content in main menu of demo app can be added for a particular customer by setting the required recommended_content_id against that customer_id.
   [values of  recommended_content_id  can be referred from recommended_list table, see the picture below]
   
   

eg. For enabling Tears of steel.
     click on customer_recommended_list →  click on insert  
     → Add → recommended_content_id : 1 
                → customer_id : boxid (serial_number) 

8. Steps to Remove a Recommended for you content for a customer 

1.  Click on the customer_recommended_list table.
2.  Delete the entry with recommended_content_id of the content to be removed corresponding to the required customer_id.  

9. Steps to add an icon in InfoBar for a customer 

1. Click on the info_settings_content table through phpMyAdmin page .
2. Click on Insert button to add Infobar icon path.
3. Infobar icon path can be added to the column of image in the table against corresponding menu name (i.e. icon name). 
   [menu_id can be referred from menu_list table]

  e.g. For adding bluetooth icon to the infobar.
        click on info_settings_content table-> click on insert  
        →  Add  → menu_id : 32 (corresponding to Bluetooth InfoBar icon from  menu_list table) 
                     → Image: 'images/info/bluetooth.png' (Add the local path of the icon in static folder )

10. Steps to delete an icon from the Infobar for a customer 

1. Click on the info_settings_content table.
2. Delete the entry with path to the corresponding info bar icon to be removed. 

 e.g. For Deleting Wi-Fi icon from the InfoBar.
      → Click on the info_settings_content table
      →  Delete the entry with path to the Wi-Fi icon

11. Steps to customize home screen background image/color, font face and font color for a customer

1. Click on the customer_theme_design table .
2. Click on the Insert button to add Customer data.
3. Background image/ Background color, font face and font color for the Home Screen can be customized by setting 1 in the menu_id field. 
4. Value for each field can be added in the appropriate column of the table based on the customization requirements.

Note: If both bg_image and bg_color are configured in the table , preference is given to bg_image.

       

e.g.  For Adding bg_color/bg_image , font face and font color for home screen .
      click on customer_theme_design →  click on insert  
     ->Add  → menu_id : 1 
                 → bg_image : images/settings/settings-bg.png 
                 → bg_color : 0xff211d30
                 → FontFace : bold
                 → text_fontColor: 0xff211d30
                 → customer_id: boxid(serial_number)  

12. Steps to customize settings screen background image/color, font face and font color for a customer 

1. Click on the customer_theme_design table.
2. Click on the Insert button to add Customer data.  
3. Background image/ Background color, font face and font color for the Home Screen can be customized by setting 4 in the menu_id field. 
4. Value for each field can be added in the appropriate column of the table based on the customization requirements .

Note: If both bg_image and bg_color are configured in the table, preference is given to bg_image .

e.g. For Adding bg_color/bg_image , font face and font color for home screen  
      click on customer_theme_design -> click on insert  
      -> Add → menu_id : 1 
                    → bg_image : images/settings/settings-bg.png 
                    → bg_color : 0xff211d30 
                    → FontFace : bold
                    → text_fontColor : 0xff211d30 
                    →  customer_id : boxid(serial_number)  

Appendix  

Whom to contact for Support