add new designsandbox/zheng_wenlong/hudtbt

51 files changed, 412 insertions, 37 deletions

diff --git a/app/Hudtbt.qml b/app/Hudtbt.qml
index 8d26719..6f3458b 100644
--- a/app/Hudtbt.qml
+++ b/app/Hudtbt.qml
@@ -15,30 +15,46 @@
  * limitations under the License.
  */
 
+//import QtQuick 2.6
+//import QtQuick.Window 2.2
+//import QtQuick.Layouts 1.1
+//import QtQuick.Controls 1.4
+//import QtWebSockets 1.0
 import QtQuick 2.6
 import QtQuick.Layouts 1.1
 import QtQuick.Controls 2.0
 import QtWebSockets 1.0
+import QtQuick.Controls.Styles 1.4
 
 ApplicationWindow {
     id: window
 
     title: "HUD Tbt Demo"
-    width: 1920
-    height: 1080
+    width: 1024
+    height: 768
 
     visible: true
 
     property string api_str: "naviapi"
     property string verb_subscribe: "subscribe"
     property string verb_getcurretdirstate: "navicore_getcurrentdestdir"
+    property string verb_getcurretdistance: "navicore_getcurrentdistance"
+    property string verb_getcurrentguidancestate: "navicore_getcurrentguidancestate"
     property string event_getdestdir: "naviapi/navicore_getdestdir"
+    property string event_getdistance: "naviapi/navicore_getdistance"
     property string event_cancelguidance: "naviapi/navicore_cancelguidance"
-    property string nodirection_str:"0"
+    property string event_startguidance: "naviapi/navicore_startguidance"
+
+    property string park_str:"13"
     property string arrivedirection_str:"12"
+    property string cancelguidance_str:"false"
+    property string startguidance_str:"true"
     property var msgid_enu: { "call":2, "retok":3, "reterr":4, "event":5 }
     property string request_str: ""
     property string status_str: ""
+    property real val: 0
+    property int total_distance: 0
+    property int cumulative_distance: 0
 
     property double state: 0
     WebSocket {
@@ -51,9 +67,12 @@ ApplicationWindow {
                 websocket.active = false
             }else if (websocket.status === WebSocket.Open){
                 console.log ("Socket Open")
-                do_getcurrentdirstate()
+                do_getcurrentguidancestate()
                 do_subscribe("getdestdir")
                 do_subscribe("cancelguidance")
+                do_subscribe("getdistance")
+                do_subscribe("startguidance")
+                subscribe_timer.start()
             }else if (websocket.status === WebSocket.Closed){
                 console.log ("Socket closed")
             }
@@ -61,8 +80,8 @@ ApplicationWindow {
         onTextMessageReceived: {
             var message_json = JSON.parse(message)
 
-            console.log ("Raw response: " + message)
-            console.log ("JSON response: " + message_json)
+            // console.log ("Raw response: " + message)
+            // console.log ("JSON response: " + message_json)
 
             if (message_json[0] === msgid_enu.event){
 
@@ -70,26 +89,66 @@ ApplicationWindow {
                 {
                     var state = message_json[2].data.state
                     tbt_board.state = state
-                    console.log ("state is ok !")
+                    // console.log ("state is ok !dirstate="+state)
                     if (tbt_board.state === arrivedirection_str)
                     {
                         clear_timer.start()
-                        console.log ("clear arrive direction state 12 is ok !")
+                        // console.log ("clear arrive direction state 12 is ok !")
                     }
                 }
+                else if(message_json[2].event === event_getdistance)
+                {
+                    var totaldistance = message_json[2].data.totaldistance
+                    var cumulativedistance = message_json[2].data.cumulativedistance
+                    setProgress(totaldistance,cumulativedistance)
+                    // console.log ("getdistance is ok !totaldistance="+totaldistance+"cumulativedistance="+cumulativedistance)
+                }
                 else if(message_json[2].event === event_cancelguidance)
                 {
-                    tbt_board.state = nodirection_str
+                    console.log ("cancelguidance !")
+                    distanceBar.visible = false
+                    totalDistance.visible = false
+                    val = 0
+                    total_distance = 0
+                    cumulative_distance = 0
+                    setProgress(total_distance,cumulative_distance)
+                    tbt_board.state = park_str
+                }
+                else if(message_json[2].event === event_startguidance)
+                {
+                    console.log ("startguidance !")
+                    distanceBar.visible = true
+                    totalDistance.visible = true
                 }
             }
             else if(message_json[0] === msgid_enu.retok){
                 if (message_json[2].request.info === verb_getcurretdirstate){
                     var currentdirstate = message_json[2].response[0].CurrentDirState
                     tbt_board.state = currentdirstate
-                    console.log ("get current state is ok !")
+                    // console.log ("get current state is ok !currentdirstate="+currentdirstate)
+                }
+                else if (message_json[2].request.info === verb_getcurretdistance){
+                    var currenttotaldistance = message_json[2].response[0].CurrentTotalDistance
+                    var currentcumulativedistance = message_json[2].response[0].CurrentCumulativeDistance
+                    setProgress(currenttotaldistance,currenttotaldistance)
+                    // console.log ("get current distance is ok !currenttotaldistance:"+currenttotaldistance+"currentcumulativedistance:"+currentcumulativedistance)
+                }
+                else if (message_json[2].request.info === verb_getcurrentguidancestate){
+                    var currentguidancestate = message_json[2].response[0].CurrentGuidanceState
+                    if (currentguidancestate === startguidance_str)
+                    {
+                        distanceBar.visible = true
+                        totalDistance.visible = true
+                        do_getcurrentdirstate()
+                        do_getcurrentdistance()
+                    }
+                    else
+                    {
+                        tbt_board.state = park_str
+                    }
+                    // console.log ("get current guidance state is ok !currentguidancestate="+currentguidancestate)
                 }
             }
-
             else{
                 if (message_json[0] !== msgid_enu.retok) {
                     console.log ("Return value is not ok !")
@@ -107,27 +166,136 @@ ApplicationWindow {
         websocket.sendTextMessage (request_str)
 
     }
+    //get current total distance and cumulative distance
+    function do_getcurrentdistance() {
+        request_str = '[' + msgid_enu.call + ',"99999","' + api_str+'/'+verb_getcurretdistance + '", {} ]'
+        console.log (request_str)
+        websocket.sendTextMessage (request_str)
+
+    }
+    //get current guidance state
+    function do_getcurrentguidancestate() {
+        request_str = '[' + msgid_enu.call + ',"99999","' + api_str+'/'+verb_getcurrentguidancestate + '", {} ]'
+        console.log (request_str)
+        websocket.sendTextMessage (request_str)
+
+    }
 	//subscribe
     function do_subscribe( event ) {
         request_str = '[' + msgid_enu.call + ',"99999","' + api_str+'/'+verb_subscribe + '", {"value":"' + event + '"} ]'
         console.log (request_str)
         websocket.sendTextMessage (request_str)
     }
+    //set distance
+    function setProgress(totaldistance,cumulativedistance) {
+        if (totaldistance === 0 && cumulativedistance === 0){
+            val = 0
+            total_distance = totaldistance
+            totalDistance.setTotalDistance(total_distance/1000)
+        }else{
+            total_distance = totaldistance
+            cumulative_distance = cumulativedistance
+            totalDistance.setTotalDistance(total_distance/1000)
+            val = ((total_distance + 60)-cumulative_distance)/(total_distance + 60)
+        }
+        if ( (bar.from <= val) && (val < bar.to ) ) {
+            bar.value = val
+        }
+        else if ( bar.to < val ){
+            bar.value = bar.to
+        }
+        // console.log ("setdistanceok! totalDistance:"+total_distance+"bar.value:"+val)
+
+    }
     TbtBoard {
         id: tbt_board
-        z: 1
         visible: true
         anchors.fill: parent
     }
+
+
+    Image {
+        id: distanceBar
+        width: 280
+        height: 110
+        anchors.right: parent.right
+        anchors.rightMargin: 10
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.verticalCenterOffset: 65
+        source: "qrc:distance_meter.png"
+        visible: false
+        Item {
+            width: 168
+            height: 20
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+
+            ProgressBar {
+                id: bar
+                anchors.fill: parent
+
+                LayoutMirroring.enabled: true
+                LayoutMirroring.childrenInherit: true
+                value: 0.0
+                from: 0.0
+                to: 1.0
+
+                    background: Rectangle {
+                        radius: 2
+                        color: "#111111"
+                        implicitWidth: 200
+                        implicitHeight: 24
+                    }
+
+                    contentItem: Rectangle {
+                        anchors.left: bar.left
+                        anchors.verticalCenter:bar.verticalCenter
+                        width: (1.0 - bar.visualPosition) * bar.width
+                        height: bar.height / 2
+                        color: "#00ff00"
+                    }
+            }
+        }
+
+        TotalDistance {
+            id: totalDistance
+            width: 30
+            visible: false
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenterOffset: -10
+            anchors.right: parent.right
+            anchors.rightMargin: 60
+        }
+    }
+
     Timer {
         id: clear_timer
         repeat: false
         interval: 5000
         triggeredOnStart: false
         onTriggered: {
-            tbt_board.state = nodirection_str
+            tbt_board.state = park_str
+            val = 0
+            total_distance = 0
+            cumulative_distance = 0
+            setProgress(total_distance,cumulative_distance)
+            distanceBar.visible = false
+            totalDistance.visible = false
+        }
+    }
+    Timer {
+        id: subscribe_timer
+        repeat: false
+        interval: 2000
+        triggeredOnStart: false
+        onTriggered: {
+            console.log ("subscribe again")
+            do_getcurrentguidancestate()
+            do_subscribe("getdestdir")
+            do_subscribe("cancelguidance")
+            do_subscribe("getdistance")
+            do_subscribe("startguidance")
         }
     }
-
 }
 
diff --git a/app/NextCrossDistance.qml b/app/NextCrossDistance.qml
new file mode 100644
index 0000000..7719976
--- /dev/null
+++ b/app/NextCrossDistance.qml
@@ -0,0 +1,92 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.1
+
+Item {
+    id: root
+    property int units: 0
+    property int tens: 0
+    property int hundreds: 0
+    ListModel {
+        id: model
+        ListElement {
+            name: "0"
+            picturePath: "qrc:tbt_0.png"
+        }
+        ListElement {
+            name: "1"
+            picturePath: "qrc:tbt_1.png"
+        }
+        ListElement {
+            name: "2"
+            picturePath: "qrc:tbt_2.png"
+        }
+        ListElement {
+            name: "3"
+            picturePath: "qrc:tbt_3.png"
+        }
+        ListElement {
+            name: "4"
+            picturePath: "qrc:tbt_4.png"
+        }
+        ListElement {
+            name: "5"
+            picturePath: "qrc:tbt_5.png"
+        }
+        ListElement {
+            name: "6"
+            picturePath: "qrc:tbt_6.png"
+        }
+        ListElement {
+            name: "7"
+            picturePath: "qrc:tbt_7.png"
+        }
+        ListElement {
+            name: "8"
+            picturePath: "qrc:tbt_8.png"
+        }
+        ListElement {
+            name: "9"
+            picturePath: "qrc:tbt_9.png"
+        }
+    }
+
+    RowLayout {
+        anchors.fill: parent
+        Image {
+            id: hundreds_image
+            width: parent.width * 0.25
+        }
+        Image {
+            id: tens_image
+            width: parent.width * 0.25
+        }
+        Image {
+            id: units_image
+            width: parent.width * 0.25
+            source: "qrc:tbt_0.png"
+        }
+        Image {
+            id: metre_image
+            width: parent.width * 0.25
+            source: "qrc:tbt_m.png"
+        }
+    }
+
+    function setCorssDistance(dis) {
+        hundreds = dis / 100 % 10
+        tens = dis / 10 % 10
+        units = dis % 10
+        if(hundreds != 0) {
+            hundreds_image.source = model.get(hundreds).picturePath
+            tens_image.source = model.get(tens).picturePath
+            units_image.source = model.get(units).picturePath
+        } else {
+            if(tens != 0) {
+                tens_image.source = model.get(tens).picturePath
+            }
+            units_image.source = model.get(units).picturePath
+        }
+
+    }
+
+}
diff --git a/app/TbtBoard.qml b/app/TbtBoard.qml
index 19daad2..d902721 100644
--- a/app/TbtBoard.qml
+++ b/app/TbtBoard.qml
@@ -3,13 +3,19 @@
 //turn by turn board view
 Rectangle {
     id: tbt_board
-    color: '#111111'
+    color: "#111111"
     // turn direction arrow board image
     Image {
         id: turnDirectionBoard
         visible: true
-        anchors.centerIn: parent
-        z: 3
+        width: sourceSize.width*1.5
+        height: sourceSize.height*1.5
+
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        // anchors.verticalCenterOffset: 10
+        anchors.horizontalCenterOffset: 50
+//        z: 3
     }
 
     // the cases of direction arrow board
@@ -20,7 +26,7 @@ Rectangle {
         },
         State {
             name: "1" // DirectionForward
-            PropertyChanges { target: turnDirectionBoard; source: "qrc:arrow-0-full.png" }
+            PropertyChanges { target: turnDirectionBoard; source: "qrc:tbt_B_centor.png" }
         },
         State {
             name: "2" // DirectionBearRight
@@ -28,37 +34,37 @@ Rectangle {
         },
         State {
             name: "3" // DirectionLightRight
-            PropertyChanges { target: turnDirectionBoard; source: "qrc:arrow-r-30-full.png" }
+            PropertyChanges { target: turnDirectionBoard; source: "qrc:tbt_B_R45.png" }
         },
         State {
             name: "4" // DirectionRight
-            PropertyChanges { target: turnDirectionBoard; source: "qrc:arrow-r-45-full.png" }
+            PropertyChanges { target: turnDirectionBoard; source: "qrc:tbt_B_R90.png" }
         },
         State {
             name: "5" // DirectionHardRight
-            PropertyChanges { target: turnDirectionBoard; source: "qrc:arrow-r-75-full.png" }
+            PropertyChanges { target: turnDirectionBoard; source: "qrc:tbt_B_R-45.png" }
         },
         State {
             name: "6" // DirectionUTurnRight
             //TODO modify qtlocation U-Turn best.For test, change app source.
-            PropertyChanges { target: turnDirectionBoard; source: "qrc:arrow-l-180-full.png" }
+            PropertyChanges { target: turnDirectionBoard; source: "qrc:tbt_B_L-90.png" }
         },
         State {
             name: "7" // DirectionUTurnLeft
             //TODO modify qtlocation U-Turn best.For test, change app source.
-            PropertyChanges { target: turnDirectionBoard; source: "qrc:arrow-r-180-full.png" }
+            PropertyChanges { target: turnDirectionBoard; source: "qrc:tbt_B_R-90.png" }
         },
         State {
             name: "8" // DirectionHardLeft
-            PropertyChanges { target: turnDirectionBoard; source: "qrc:arrow-l-75-full.png" }
+            PropertyChanges { target: turnDirectionBoard; source: "qrc:tbt_B_L-45.png" }
         },
         State {
             name: "9" // DirectionLeft
-            PropertyChanges { target: turnDirectionBoard; source: "qrc:arrow-l-45-full.png" }
+            PropertyChanges { target: turnDirectionBoard; source: "qrc:tbt_B_L90.png" }
         },
         State {
             name: "10" // DirectionLightLeft
-            PropertyChanges { target: turnDirectionBoard; source: "qrc:arrow-l-30-full.png" }
+            PropertyChanges { target: turnDirectionBoard; source: "qrc:tbt_B_L45.png" }
         },
         State {
             name: "11" // DirectionBearLeft
@@ -66,7 +72,11 @@ Rectangle {
         },
         State {
             name: "12" //arrive the destination
-            PropertyChanges { target: turnDirectionBoard; source: "qrc:destination_full.png" }
+            PropertyChanges { target: turnDirectionBoard; source: "qrc:tbt_dest.png" }
+        },
+        State {
+            name: "13" //park
+            PropertyChanges { target: turnDirectionBoard; source: "qrc:tbt_park.png" }
         },
         State {
             name: "invisible"
diff --git a/app/TotalDistance.qml b/app/TotalDistance.qml
new file mode 100644
index 0000000..c8fadeb
--- /dev/null
+++ b/app/TotalDistance.qml
@@ -0,0 +1,78 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.1
+
+Item {
+    id: root
+    property int units: 0
+    property int tenths: 0
+    ListModel {
+        id: model
+        ListElement {
+            name: "0"
+            picturePath: "qrc:no_0.png"
+        }
+        ListElement {
+            name: "1"
+            picturePath: "qrc:no_1.png"
+        }
+        ListElement {
+            name: "2"
+            picturePath: "qrc:no_2.png"
+        }
+        ListElement {
+            name: "3"
+            picturePath: "qrc:no_3.png"
+        }
+        ListElement {
+            name: "4"
+            picturePath: "qrc:no_4.png"
+        }
+        ListElement {
+            name: "5"
+            picturePath: "qrc:no_5.png"
+        }
+        ListElement {
+            name: "6"
+            picturePath: "qrc:no_6.png"
+        }
+        ListElement {
+            name: "7"
+            picturePath: "qrc:no_7.png"
+        }
+        ListElement {
+            name: "8"
+            picturePath: "qrc:no_8.png"
+        }
+        ListElement {
+            name: "9"
+            picturePath: "qrc:no_9.png"
+        }
+    }
+
+    RowLayout {
+        anchors.fill: parent
+        Image {
+            id: units_image
+            width: parent.width * 0.45
+            source: "qrc:no_0.png"
+        }
+        Image {
+            id: point_image
+            width: parent.width * 0.1
+            source: "qrc:no_comma.png"
+        }
+        Image {
+            id: tenths_image
+            width: parent.width * 0.45
+            source: "qrc:no_0.png"
+        }
+    }
+
+    function setTotalDistance(dis) {
+        units = dis % 10
+        tenths = (dis - units) * 10
+        units_image.source = model.get(units).picturePath
+        tenths_image.source = model.get(tenths).picturePath
+    }
+
+}
diff --git a/app/hudtbt.qrc b/app/hudtbt.qrc
index fd5fd7f..7d5d4cb 100644
--- a/app/hudtbt.qrc
+++ b/app/hudtbt.qrc
@@ -2,5 +2,7 @@
     <qresource prefix="/">
         <file>TbtBoard.qml</file>
         <file>Hudtbt.qml</file>
+        <file>TotalDistance.qml</file>
+        <file>NextCrossDistance.qml</file>
     </qresource>
 </RCC>
diff --git a/app/images/arrow-0-full.png b/app/images/arrow-0-full.png
deleted file mode 100644
index d390db7..0000000
--- a/app/images/arrow-0-full.png
+++ /dev/null
diff --git a/app/images/arrow-l-180-full.png b/app/images/arrow-l-180-full.png
deleted file mode 100644
index 0c71027..0000000
--- a/app/images/arrow-l-180-full.png
+++ /dev/null
diff --git a/app/images/arrow-l-30-full.png b/app/images/arrow-l-30-full.png
deleted file mode 100644
index de799ac..0000000
--- a/app/images/arrow-l-30-full.png
+++ /dev/null
diff --git a/app/images/arrow-l-45-full.png b/app/images/arrow-l-45-full.png
deleted file mode 100644
index a3d8354..0000000
--- a/app/images/arrow-l-45-full.png
+++ /dev/null
diff --git a/app/images/arrow-l-75-full.png b/app/images/arrow-l-75-full.png
deleted file mode 100644
index cd92e2d..0000000
--- a/app/images/arrow-l-75-full.png
+++ /dev/null
diff --git a/app/images/arrow-r-180-full.png b/app/images/arrow-r-180-full.png
deleted file mode 100644
index d761b48..0000000
--- a/app/images/arrow-r-180-full.png
+++ /dev/null
diff --git a/app/images/arrow-r-30-full.png b/app/images/arrow-r-30-full.png
deleted file mode 100644
index 0bebfb9..0000000
--- a/app/images/arrow-r-30-full.png
+++ /dev/null
diff --git a/app/images/arrow-r-45-full.png b/app/images/arrow-r-45-full.png
deleted file mode 100644
index fa170f0..0000000
--- a/app/images/arrow-r-45-full.png
+++ /dev/null
diff --git a/app/images/arrow-r-75-full.png b/app/images/arrow-r-75-full.png
deleted file mode 100644
index 08dc143..0000000
--- a/app/images/arrow-r-75-full.png
+++ /dev/null
diff --git a/app/images/destination_full.png b/app/images/destination_full.png
deleted file mode 100644
index e5c79d9..0000000
--- a/app/images/destination_full.png
+++ /dev/null
diff --git a/app/images/distance_meter.png b/app/images/distance_meter.png
new file mode 100644
index 0000000..449f7f7
--- /dev/null
+++ b/app/images/distance_meter.png
diff --git a/app/images/distance_meterline.png b/app/images/distance_meterline.png
new file mode 100644
index 0000000..31b7ec2
--- /dev/null
+++ b/app/images/distance_meterline.png
diff --git a/app/images/images.qrc b/app/images/images.qrc
index 1e519b9..6bd1a65 100644
--- a/app/images/images.qrc
+++ b/app/images/images.qrc
@@ -1,14 +1,39 @@
 <RCC>
     <qresource prefix="/">
-        <file>arrow-l-30-full.png</file>
-        <file>arrow-l-45-full.png</file>
-        <file>arrow-l-75-full.png</file>
-        <file>arrow-l-180-full.png</file>
-        <file>arrow-r-30-full.png</file>
-        <file>arrow-r-45-full.png</file>
-        <file>arrow-r-75-full.png</file>
-        <file>arrow-r-180-full.png</file>
-        <file>destination_full.png</file>
-        <file>arrow-0-full.png</file>
+        <file>distance_meter.png</file>
+        <file>distance_meterline.png</file>
+        <file>tbt_B_centor.png</file>
+        <file>tbt_B_L-45.png</file>
+        <file>tbt_B_L-90.png</file>
+        <file>tbt_B_L45.png</file>
+        <file>tbt_B_L90.png</file>
+        <file>tbt_B_R-45.png</file>
+        <file>tbt_B_R-90.png</file>
+        <file>tbt_B_R45.png</file>
+        <file>tbt_B_R90.png</file>
+        <file>tbt_dest.png</file>
+        <file>tbt_park.png</file>
+        <file>no_0.png</file>
+        <file>no_1.png</file>
+        <file>no_2.png</file>
+        <file>no_3.png</file>
+        <file>no_4.png</file>
+        <file>no_5.png</file>
+        <file>no_6.png</file>
+        <file>no_7.png</file>
+        <file>no_8.png</file>
+        <file>no_9.png</file>
+        <file>no_comma.png</file>
+        <file>tbt_0.png</file>
+        <file>tbt_1.png</file>
+        <file>tbt_2.png</file>
+        <file>tbt_3.png</file>
+        <file>tbt_4.png</file>
+        <file>tbt_5.png</file>
+        <file>tbt_6.png</file>
+        <file>tbt_7.png</file>
+        <file>tbt_8.png</file>
+        <file>tbt_9.png</file>
+        <file>tbt_m.png</file>
     </qresource>
 </RCC>
diff --git a/app/images/no_0.png b/app/images/no_0.png
new file mode 100644
index 0000000..ae94f48
--- /dev/null
+++ b/app/images/no_0.png
diff --git a/app/images/no_1.png b/app/images/no_1.png
new file mode 100644
index 0000000..bd8deea
--- /dev/null
+++ b/app/images/no_1.png
diff --git a/app/images/no_2.png b/app/images/no_2.png
new file mode 100644
index 0000000..faa7809
--- /dev/null
+++ b/app/images/no_2.png
diff --git a/app/images/no_3.png b/app/images/no_3.png
new file mode 100644
index 0000000..88ff0fa
--- /dev/null
+++ b/app/images/no_3.png
diff --git a/app/images/no_4.png b/app/images/no_4.png
new file mode 100644
index 0000000..9bd7c31
--- /dev/null
+++ b/app/images/no_4.png
diff --git a/app/images/no_5.png b/app/images/no_5.png
new file mode 100644
index 0000000..ab4dc55
--- /dev/null
+++ b/app/images/no_5.png
diff --git a/app/images/no_6.png b/app/images/no_6.png
new file mode 100644
index 0000000..0c23cca
--- /dev/null
+++ b/app/images/no_6.png
diff --git a/app/images/no_7.png b/app/images/no_7.png
new file mode 100644
index 0000000..9d7d1dd
--- /dev/null
+++ b/app/images/no_7.png
diff --git a/app/images/no_8.png b/app/images/no_8.png
new file mode 100644
index 0000000..8a2aee9
--- /dev/null
+++ b/app/images/no_8.png
diff --git a/app/images/no_9.png b/app/images/no_9.png
new file mode 100644
index 0000000..c91fa29
--- /dev/null
+++ b/app/images/no_9.png
diff --git a/app/images/no_comma.png b/app/images/no_comma.png
new file mode 100644
index 0000000..ce00b6d
--- /dev/null
+++ b/app/images/no_comma.png
diff --git a/app/images/tbt_0.png b/app/images/tbt_0.png
new file mode 100644
index 0000000..b35238f
--- /dev/null
+++ b/app/images/tbt_0.png
diff --git a/app/images/tbt_1.png b/app/images/tbt_1.png
new file mode 100644
index 0000000..65c300d
--- /dev/null
+++ b/app/images/tbt_1.png
diff --git a/app/images/tbt_2.png b/app/images/tbt_2.png
new file mode 100644
index 0000000..8672016
--- /dev/null
+++ b/app/images/tbt_2.png
diff --git a/app/images/tbt_3.png b/app/images/tbt_3.png
new file mode 100644
index 0000000..0a8e10f
--- /dev/null
+++ b/app/images/tbt_3.png
diff --git a/app/images/tbt_4.png b/app/images/tbt_4.png
new file mode 100644
index 0000000..be8bc0d
--- /dev/null
+++ b/app/images/tbt_4.png
diff --git a/app/images/tbt_5.png b/app/images/tbt_5.png
new file mode 100644
index 0000000..9b5cc55
--- /dev/null
+++ b/app/images/tbt_5.png
diff --git a/app/images/tbt_6.png b/app/images/tbt_6.png
new file mode 100644
index 0000000..5eb6ed2
--- /dev/null
+++ b/app/images/tbt_6.png
diff --git a/app/images/tbt_7.png b/app/images/tbt_7.png
new file mode 100644
index 0000000..2ee6b53
--- /dev/null
+++ b/app/images/tbt_7.png
diff --git a/app/images/tbt_8.png b/app/images/tbt_8.png
new file mode 100644
index 0000000..bef0410
--- /dev/null
+++ b/app/images/tbt_8.png
diff --git a/app/images/tbt_9.png b/app/images/tbt_9.png
new file mode 100644
index 0000000..77a7412
--- /dev/null
+++ b/app/images/tbt_9.png
diff --git a/app/images/tbt_B_L-45.png b/app/images/tbt_B_L-45.png
new file mode 100644
index 0000000..dcdd847
--- /dev/null
+++ b/app/images/tbt_B_L-45.png
diff --git a/app/images/tbt_B_L-90.png b/app/images/tbt_B_L-90.png
new file mode 100644
index 0000000..d5ddef9
--- /dev/null
+++ b/app/images/tbt_B_L-90.png
diff --git a/app/images/tbt_B_L45.png b/app/images/tbt_B_L45.png
new file mode 100644
index 0000000..6a2c50b
--- /dev/null
+++ b/app/images/tbt_B_L45.png
diff --git a/app/images/tbt_B_L90.png b/app/images/tbt_B_L90.png
new file mode 100644
index 0000000..3bfa4f1
--- /dev/null
+++ b/app/images/tbt_B_L90.png
diff --git a/app/images/tbt_B_R-45.png b/app/images/tbt_B_R-45.png
new file mode 100644
index 0000000..59a2a02
--- /dev/null
+++ b/app/images/tbt_B_R-45.png
diff --git a/app/images/tbt_B_R-90.png b/app/images/tbt_B_R-90.png
new file mode 100644
index 0000000..cecbf2f
--- /dev/null
+++ b/app/images/tbt_B_R-90.png
diff --git a/app/images/tbt_B_R45.png b/app/images/tbt_B_R45.png
new file mode 100644
index 0000000..fdacc59
--- /dev/null
+++ b/app/images/tbt_B_R45.png
diff --git a/app/images/tbt_B_R90.png b/app/images/tbt_B_R90.png
new file mode 100644
index 0000000..beecc29
--- /dev/null
+++ b/app/images/tbt_B_R90.png
diff --git a/app/images/tbt_B_centor.png b/app/images/tbt_B_centor.png
new file mode 100644
index 0000000..3b692f4
--- /dev/null
+++ b/app/images/tbt_B_centor.png
diff --git a/app/images/tbt_dest.png b/app/images/tbt_dest.png
new file mode 100644
index 0000000..2666224
--- /dev/null
+++ b/app/images/tbt_dest.png
diff --git a/app/images/tbt_m.png b/app/images/tbt_m.png
new file mode 100644
index 0000000..814533d
--- /dev/null
+++ b/app/images/tbt_m.png
diff --git a/app/images/tbt_park.png b/app/images/tbt_park.png
new file mode 100644
index 0000000..3d76d70
--- /dev/null
+++ b/app/images/tbt_park.png