change onscreenapp

16 files changed, 1022 insertions, 116 deletions

diff --git a/app/Onscreen.qml b/app/Onscreen.qml
new file mode 100644
index 0000000..76538cf
--- /dev/null
+++ b/app/Onscreen.qml
@@ -0,0 +1,138 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.1
+import QtQuick.Controls 2.0
+
+Rectangle {
+    id: mainform
+    height: 300
+    width: 1000
+    radius:2
+
+    gradient: Gradient {
+        GradientStop { position: 0.0; color: "#12262E" }
+        GradientStop { position: 1.0; color: "#18899B" }
+    }
+
+    ColumnLayout {
+        anchors {
+          topMargin: 10; bottomMargin:10
+          leftMargin: 20; rightMargin: 20
+          fill: parent
+        }
+        spacing: 2
+
+        ColumnLayout {
+            id: title_part
+            anchors {
+                top: parent.top
+                left: parent.left
+                    topMargin: 10
+            }
+
+            Label {
+                id: title
+                text: dsp_title
+                color: "white"
+                font.pixelSize: 32
+                font.bold: true
+                maximumLineCount: 1
+                wrapMode: Text.Wrap
+                elide: Text.ElideRight
+                horizontalAlignment: Label.AlignHCenter
+                verticalAlignment: Label.AlignVCenter
+                Layout.preferredWidth:  960
+                Layout.preferredHeight:  40
+            }
+
+            Image {
+                source: '../images/DividingLine.svg'
+                anchors.left: title.left
+                anchors.top: title.bottom
+            }
+        }
+
+        RowLayout {
+            id: contents_part
+            anchors {
+              left: parent.left; leftMargin: 20
+              right: parent.right; rightMargin: 20
+            }
+            Layout.preferredWidth: 920
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+            spacing: 10
+            Image {
+                id: dsp_mark
+                source: dsp_icon
+                Layout.maximumHeight: 120
+                Layout.maximumWidth:  120
+            }
+            Label {
+                text: dsp_contents
+                color: "white"
+                font.pixelSize: 24
+                wrapMode: Text.Wrap
+                maximumLineCount: btn_area.visible ? 4 : 5
+                elide: Text.ElideRight
+                horizontalAlignment: Label.AlignLeft
+                verticalAlignment: Label.AlignVCenter
+                Layout.preferredWidth: 780
+                Layout.preferredHeight: 160
+            }
+        }
+
+        RowLayout {
+            id: btn_area
+            spacing: 60
+            visible: btnNum > 0 ? true : false
+            anchors {
+              horizontalCenter: parent.horizontalCenter
+            }
+            Layout.preferredWidth: parent.width*0.75
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+
+            Button {
+                id: btn1
+                visible: btn1Name == "" ? false : true
+                text: btn1Name
+                highlighted: true
+                onClicked: {
+                    eventHandler.onScreenReply(btn1.text)
+                }
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            }
+
+            Button {
+                id: btn2
+                visible: btn2Name == "" ? false : true
+                text: btn2Name
+                highlighted: true
+                onClicked: {
+                    eventHandler.onScreenReply(btn2.text)
+                }
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            }
+
+            Button {
+                id: btn3
+                visible: btn3Name == "" ? false : true
+                text: btn3Name
+                highlighted: true
+                onClicked: {
+                    eventHandler.onScreenReply(btn3.text)
+                }
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            }
+        }
+
+        Rectangle {
+            id: footer
+            opacity: 0
+            width: parent.width
+            height: 5
+            anchors {
+                bottom: parent.bottom
+            }
+        }
+    }
+
+}
diff --git a/app/app.pro b/app/app.pro
index f234ea6..cf8a020 100644
--- a/app/app.pro
+++ b/app/app.pro
@@ -6,13 +6,16 @@ DESTDIR = $${OUT_PWD}/../package/root/bin
 PKGCONFIG += qlibwindowmanager libhomescreen
 
 HEADERS += \
-    eventhandler.h
+    eventhandler.h \
+    onscreenmodel.h
 
 SOURCES += \
     eventhandler.cpp \
-    main.cpp
+    main.cpp \
+    onscreenmodel.cpp
 
 RESOURCES += \
-	qml.qrc
+	qml.qrc \
+    images/images.qrc
 
 LIBS += -ljson-c
diff --git a/app/eventhandler.cpp b/app/eventhandler.cpp
index d76fcbe..802b11b 100644
--- a/app/eventhandler.cpp
+++ b/app/eventhandler.cpp
@@ -26,28 +26,22 @@
 
 #include "eventhandler.h"
 
+const char _myrole[] = "on_screen";
 const char _parameter[] = "parameter";
 const char _replyto[] = "replyto";
-const char _data[] = "data";
-const char _file[] = "file";
-const char _area[] = "area";
-const char _suffix[] = ".qml";
 const char _button_name[] = "buttonName";
-const char _button_press_mode[] = "buttonPressMode";
-const char _button_press_state[] = "buttonPressState";
 const char _drawing_name[] = "drawing_name";
 const char _application_id[] = "application_id";
-const char _onscreen_directory[] = "/usr/lib/qt5/qml/AGL/OnScreen/";
+
 
 void* EventHandler::myThis = 0;
 
 EventHandler::EventHandler(QObject *parent) :
     QObject(parent),
     mp_hs(nullptr),
-    mp_wm(nullptr)
+    mp_wm(nullptr),
+    m_dsp_sts(false)
 {
-    m_dspreq = QString("");
-    m_req.clear();
 }
 
 EventHandler::~EventHandler()
@@ -68,35 +62,29 @@ void EventHandler::init(int port, const char *token)
 
     mp_hs = new LibHomeScreen();
     mp_hs->init(port, token);
-    
+
     mp_hs->registerCallback(nullptr, EventHandler::onRep_static);
     mp_hs->set_event_handler(LibHomeScreen::Event_ShowWindow, [this](json_object *object){
-        // {"id": "onscreenXXX", "parameter": {"file": "onsreen file path", "data": {"key": "value", ...}}, "replyto": "app's id"}
+        /*
+        {
+            "application_id": "onscreenapp",
+            "parameter": {
+                "title": "onscreen title",
+                "type": "critical,exclamation,question,information",
+                "contents": "message contents",
+                "buttons": ["button_name1", "button_name2", "button_name3"],
+                "replyto":"caller application id"
+            }
+        } */
         HMI_DEBUG(APP_ID, "recived json message is[%s]", json_object_get_string(object));
 
         struct json_object *param;
-        json_object_object_get_ex(object, _parameter, &param);
-        if(json_object_get_type(param) != json_type_object ) {
+        if(!json_object_object_get_ex(object, _parameter, &param)
+        || json_object_get_type(param) != json_type_object) {
             HMI_DEBUG(APP_ID, "parameter error!");
             return;
         }
 
-        struct json_object *qml_path;
-        const char *file = nullptr;
-        if(json_object_object_get_ex(param, _file, &qml_path))
-            file = json_object_get_string(qml_path);
-        if(file == nullptr) {
-            HMI_DEBUG(APP_ID, "received qml file is null!");
-            return;
-        }
-
-        QString qml_file = QString(_onscreen_directory) + file;
-        QFileInfo file_info(qml_file);
-        if(!file_info.isFile() || !qml_file.contains(QString(_suffix), Qt::CaseSensitive)) {
-            HMI_DEBUG(APP_ID, "received qml file error! file=%s.", file);
-            return;
-        }
-
         struct json_object *replyid;
         const char *replyto = nullptr;
         if(json_object_object_get_ex(param, _replyto, &replyid))
@@ -105,61 +93,46 @@ void EventHandler::init(int port, const char *token)
             HMI_DEBUG(APP_ID, "received replyto is null!");
             return;
         }
+        m_req = qMakePair(QString(replyto), QString(json_object_to_json_string(param)));
 
-        struct json_object *display_area;
-        const char *area = nullptr;
-        if(json_object_object_get_ex(param, _area, &display_area))
-            area = json_object_get_string(display_area);
-
-        struct json_object *param_data;
-        const char* data = nullptr;
-        if(json_object_object_get_ex(param, _data, &param_data))
-            data = json_object_to_json_string(param_data);
-
-        m_dspreq = QString(replyto);
-        if(m_req.contains(m_dspreq)) {
-            m_req[m_dspreq] = qMakePair(qml_file, QString(data));
+        if (this->getDisplayStatus() == HIDING) {
+            this->activateWindow(_myrole, "on_screen");
+        }
+        else if(this->getDisplayStatus() == SHOWING) {
+            this->setDisplayStatus(SWAPPING);
+            emit this->hideOnScreen();
+        }
+        else {
+            HMI_DEBUG(APP_ID, "onscreen swapping!");
         }
-        else
-            m_req.insert(QString(m_dspreq), qMakePair(qml_file, QString(data)));
-
-        if(area == nullptr)
-            this->activateWindow(ROLE_NAME);
-        else
-            this->activateWindow(ROLE_NAME, area);
-
         HMI_DEBUG(APP_ID, "received showWindow event, end!, line=%d", __LINE__);
     });
 
     mp_hs->set_event_handler(LibHomeScreen::Event_HideWindow, [this](json_object *object){
-        struct json_object *value;
-        json_object_object_get_ex(object, _application_id, &value);
-        const char *appid = json_object_get_string(value);
-        HMI_DEBUG(APP_ID, "request release onScreen application is %s!", appid);
-
-        // onscreenapp only can release by application which request show
-        if (appid == m_dspreq)
-            this->deactivateWindow();
-        else
-            HMI_DEBUG(APP_ID, "request hideWindow application isn't request displaying application, m_dspreq=%s", m_dspreq.toStdString().c_str());
+        emit this->hideOnScreen();
+        HMI_DEBUG(APP_ID, "hideWindow json_object=%s", json_object_get_string(object));
     });
 
-    if (mp_wm->requestSurface(ROLE_NAME) != 0) {
+    if (mp_wm->requestSurface(_myrole) != 0) {
         HMI_DEBUG(APP_ID, "!!!!LayoutHandler requestSurface Failed!!!!!");
         exit(EXIT_FAILURE);
     }
 
     mp_wm->set_event_handler(QLibWindowmanager::Event_SyncDraw, [this](json_object *object) {
-        HMI_DEBUG(APP_ID, "Surface %s got syncDraw!", ROLE_NAME);
-        emit this->signalLoader(QVariant("file://" + m_req[m_dspreq].first));
-        emit this->signalOnScreenParameter(QVariant(m_req[m_dspreq].second));
-        this->mp_wm->endDraw(QString(ROLE_NAME));
+        HMI_DEBUG(APP_ID, "Surface %s got syncDraw!", _myrole);
+        this->mp_wm->endDraw(QString(_myrole));
     });
 
     mp_wm->set_event_handler(QLibWindowmanager::Event_Visible, [this](json_object *object) {
         struct json_object *value;
         json_object_object_get_ex(object, _drawing_name, &value);
         const char *name = json_object_get_string(value);
+        if(!strcasecmp(_myrole, name)){
+            this->setDisplayStatus(SHOWING);
+            this->m_dsp = this->m_req;
+            this->updateModel(QVariant(this->m_dsp.second));
+            emit this->showOnScreen();
+        }
 
         HMI_DEBUG(APP_ID, "Event_Visible kKeyDrawingName = %s", name);
     });
@@ -195,24 +168,24 @@ void EventHandler::activateWindow(const char *role, const char *area)
 void EventHandler::deactivateWindow()
 {
     HMI_DEBUG(APP_ID, "EventHandler::deactivateWindow()");
-
-    emit this->signalLoader(QVariant(""));
-    mp_wm->deactivateWindow(ROLE_NAME);
+    if(getDisplayStatus() == SWAPPING) {
+        setDisplayStatus(SHOWING);
+        m_dsp = m_req;
+        updateModel(QVariant(this->m_dsp.second));
+        emit showOnScreen();
+    }
+    else {
+        this->setDisplayStatus(HIDING);
+        mp_wm->deactivateWindow(_myrole);
+    }
 }
 
-void EventHandler::onScreenReply(const QString &btn_name, const QString &press_mode, const QString &press_state)
+void EventHandler::onScreenReply(const QString &btn_name)
 {
-    HMI_DEBUG(APP_ID, "EventHandler::onScreenReply()");
-//    deactivateWindow();
-
-    struct json_object* j_obj = json_object_new_object();
-    json_object_object_add(j_obj, _application_id, json_object_new_string(m_dspreq.toLatin1()));
+    HMI_DEBUG(APP_ID, "EventHandler::onScreenReply(),btn_name=%s", btn_name.toStdString().c_str());
+    emit this->hideOnScreen();
 
     struct json_object* j_param = json_object_new_object();
     json_object_object_add(j_param, _button_name, json_object_new_string(btn_name.toStdString().c_str()));
-    json_object_object_add(j_param, _button_press_mode, json_object_new_string(press_mode.toStdString().c_str()));
-    json_object_object_add(j_param, _button_press_state, json_object_new_string(press_state.toStdString().c_str()));
-    json_object_object_add(j_obj, _parameter, j_param);
-
-    mp_hs->replyShowWindow(m_dspreq.toLatin1(), j_obj);
+    mp_hs->replyShowWindow(m_dsp.first.toStdString().c_str(), j_param);
 }
diff --git a/app/eventhandler.h b/app/eventhandler.h
index 612e3de..40e3672 100644
--- a/app/eventhandler.h
+++ b/app/eventhandler.h
@@ -21,12 +21,11 @@
 #include <string>
 #include <QVariant>
 #include <QPair>
-#include <QMap>
+//#include <QMap>
 #include <libhomescreen.hpp>
 #include <qlibwindowmanager.h>
 #include "hmi-debug.h"
 
-#define ROLE_NAME "on_screen"
 #define APP_ID "onscreenapp"
 
 class QQmlApplicationEngine;
@@ -46,20 +45,28 @@ public:
     static void* myThis;
     static void onRep_static(struct json_object* reply_contents);
 
-    void activateWindow(const char *role, const char *area = "normal");
     Q_INVOKABLE void deactivateWindow();
-    Q_INVOKABLE void onScreenReply(const QString &btn_name,
-                                   const QString &press_mode = QString("shortPress"),
-                                   const QString &press_state = QString("release"));
+    Q_INVOKABLE void onScreenReply(const QString &btn_name);
 
 signals:
-    void signalLoader(QVariant url);
-    void signalOnScreenParameter(QVariant text);
+    void updateModel(QVariant data);
+    void showOnScreen();
+    void hideOnScreen();
 
 private:
+    enum {
+        HIDING = 0,
+        SHOWING,
+        SWAPPING
+    };
+
+    int getDisplayStatus() {return m_dsp_sts;}
+    void setDisplayStatus(int sts) {m_dsp_sts = sts;}
+    void activateWindow(const char *role, const char *area = "normal.full");
+
     LibHomeScreen *mp_hs;
     QLibWindowmanager* mp_wm;
-    QMap<QString, QPair<QString, QString>> m_req;
-    QString m_dspreq;
+    QPair<QString, QString> m_req, m_dsp;
+    int m_dsp_sts = HIDING;
 };
 #endif // HOMESCREENHANDLER_H
diff --git a/app/images/DividingLine.svg b/app/images/DividingLine.svg
new file mode 100644
index 0000000..788256c
--- /dev/null
+++ b/app/images/DividingLine.svg
@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg12699"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   width="960"
+   height="1"
+   viewBox="0 0 960 1"
+   sodipodi:docname="DividingLine-960.svg">
+  <metadata
+     id="metadata12705">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs12703" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1615"
+     inkscape:window-height="917"
+     id="namedview12701"
+     showgrid="false"
+     inkscape:zoom="1"
+     inkscape:cx="403.34338"
+     inkscape:cy="-3.7733099"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg12699" />
+  <image
+     width="960"
+     height="1"
+     preserveAspectRatio="none"
+     xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvoAAAABCAIAAAAgt51xAAAAAXNSR0IArs4c6QAAAARnQU1BAACx jwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAbSURBVEhLY1g2CkbBKBgFo2AUjIJRMIzBsmUA zyfKoJIKS6oAAAAASUVORK5CYII= "
+     id="image12707"
+     x="0"
+     y="1.3877788e-17" />
+</svg>
diff --git a/app/images/critical.svg b/app/images/critical.svg
new file mode 100644
index 0000000..e2df6fc
--- /dev/null
+++ b/app/images/critical.svg
@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="320"
+   height="320"
+   viewBox="0 0 320 320.00001"
+   id="svg5033"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="critical.svg">
+  <defs
+     id="defs5035">
+    <linearGradient
+       gradientTransform="matrix(1.0123741,0,0,1.0052855,226.82647,753.70831)"
+       inkscape:collect="always"
+       xlink:href="#SVGID_36_"
+       id="linearGradient5005"
+       x1="-125.27629"
+       y1="217.50423"
+       x2="-4.2735882"
+       y2="57.848095"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="SVGID_36_"
+       gradientUnits="userSpaceOnUse"
+       x1="4.0481"
+       y1="287.94919"
+       x2="320.4859"
+       y2="-15.4029"
+       gradientTransform="matrix(1,0.00546456,-0.00546456,1,-2.0192,-3.0212)">
+      <stop
+         offset="0"
+         style="stop-color:#54d187;stop-opacity:0.90588236"
+         id="stop300" />
+      <stop
+         id="stop9348"
+         style="stop-color:#12c1bb;stop-opacity:0.65882355"
+         offset="0.51862437" />
+      <stop
+         offset="1"
+         style="stop-color:#055658;stop-opacity:0.38431373"
+         id="stop302" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffa4ff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.7480469"
+     inkscape:cx="10.563348"
+     inkscape:cy="199.74517"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1615"
+     inkscape:window-height="1026"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <sodipodi:guide
+       position="160,377.00001"
+       orientation="1,0"
+       id="guide5666" />
+    <sodipodi:guide
+       position="60,448.00001"
+       orientation="1,0"
+       id="guide5668" />
+    <sodipodi:guide
+       position="260,414.00001"
+       orientation="1,0"
+       id="guide5670" />
+    <sodipodi:guide
+       position="-44.5,265.00001"
+       orientation="0,1"
+       id="guide10700" />
+    <sodipodi:guide
+       position="-36.5,60.000002"
+       orientation="0,1"
+       id="guide10702" />
+    <sodipodi:guide
+       position="-133.64318,165.46299"
+       orientation="0,1"
+       id="guide10704" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5038">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-732.36216)">
+    <path
+       style="fill:#00ffbd;fill-opacity:1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
+       d="M 160.42857,785.99962 A 104.88141,105.22039 0 0 0 55.54771,891.21837 104.88141,105.22039 0 0 0 160.42857,996.43908 104.88141,105.22039 0 0 0 265.30943,891.21837 104.88141,105.22039 0 0 0 160.42857,785.99962 Z m -0.33984,3.38867 A 101.83055,101.66108 0 0 1 261.92076,891.0504 101.83055,101.66108 0 0 1 160.08873,992.71056 101.83055,101.66108 0 0 1 58.25865,891.0504 101.83055,101.66108 0 0 1 160.08873,789.38829 Z"
+       id="path4374"
+       inkscape:connector-curvature="0" />
+    <ellipse
+       style="opacity:0.77;fill:url(#linearGradient5005);fill-opacity:1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;fill-rule:nonzero"
+       id="path4417"
+       cx="160.24997"
+       cy="891.04053"
+       rx="102.26696"
+       ry="101.89165" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
+       id="rect4394"
+       width="166.1017"
+       height="18.983051"
+       x="-600.41077"
+       y="733.77344"
+       transform="matrix(0.70710678,-0.70710678,0.70710678,0.70710678,0,0)" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
+       id="rect4394-6"
+       width="166.1017"
+       height="18.983051"
+       x="659.83057"
+       y="508.15701"
+       transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" />
+  </g>
+</svg>
diff --git a/app/images/exclamation.svg b/app/images/exclamation.svg
new file mode 100644
index 0000000..c43ebdd
--- /dev/null
+++ b/app/images/exclamation.svg
@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="320"
+   height="320"
+   viewBox="0 0 320 320.00001"
+   id="svg5033"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="exclamation.svg">
+  <defs
+     id="defs5035">
+    <linearGradient
+       gradientTransform="matrix(1.0123741,0,0,1.0052855,226.82647,753.70831)"
+       inkscape:collect="always"
+       xlink:href="#SVGID_36_"
+       id="linearGradient5005"
+       x1="-125.27629"
+       y1="217.50423"
+       x2="-4.2735882"
+       y2="57.848095"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="SVGID_36_"
+       gradientUnits="userSpaceOnUse"
+       x1="4.0481"
+       y1="287.94919"
+       x2="320.4859"
+       y2="-15.4029"
+       gradientTransform="matrix(1,0.00546456,-0.00546456,1,-2.0192,-3.0212)">
+      <stop
+         offset="0"
+         style="stop-color:#54d187;stop-opacity:0.90588236"
+         id="stop300" />
+      <stop
+         id="stop9348"
+         style="stop-color:#12c1bb;stop-opacity:0.65882355"
+         offset="0.51862437" />
+      <stop
+         offset="1"
+         style="stop-color:#055658;stop-opacity:0.38431373"
+         id="stop302" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffa4ff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.6505829"
+     inkscape:cx="210.27412"
+     inkscape:cy="19.42679"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1615"
+     inkscape:window-height="1026"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <sodipodi:guide
+       position="160,377.00001"
+       orientation="1,0"
+       id="guide5666" />
+    <sodipodi:guide
+       position="60,448.00001"
+       orientation="1,0"
+       id="guide5668" />
+    <sodipodi:guide
+       position="260,414.00001"
+       orientation="1,0"
+       id="guide5670" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5038">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-732.36216)">
+    <path
+       style="fill:#00ffbd;fill-opacity:1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
+       d="M 160.42857,785.99962 A 104.88141,105.22039 0 0 0 55.54771,891.21837 104.88141,105.22039 0 0 0 160.42857,996.43908 104.88141,105.22039 0 0 0 265.30943,891.21837 104.88141,105.22039 0 0 0 160.42857,785.99962 Z m -0.33984,3.38867 A 101.83055,101.66108 0 0 1 261.92076,891.0504 101.83055,101.66108 0 0 1 160.08873,992.71056 101.83055,101.66108 0 0 1 58.25865,891.0504 101.83055,101.66108 0 0 1 160.08873,789.38829 Z"
+       id="path4374"
+       inkscape:connector-curvature="0" />
+    <ellipse
+       style="opacity:0.77;fill:url(#linearGradient5005);fill-opacity:1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;fill-rule:nonzero"
+       id="path4417"
+       cx="160.24997"
+       cy="891.04053"
+       rx="102.26696"
+       ry="101.89165" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:196.94758606px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="112.91733"
+       y="1033.4916"
+       id="text5620"
+       sodipodi:linespacing="125%"
+       transform="scale(1.0772696,0.92827274)"><tspan
+         sodipodi:role="line"
+         id="tspan5622"
+         x="112.91733"
+         y="1033.4916">!</tspan></text>
+  </g>
+</svg>
diff --git a/app/images/images.qrc b/app/images/images.qrc
new file mode 100644
index 0000000..842a9fb
--- /dev/null
+++ b/app/images/images.qrc
@@ -0,0 +1,10 @@
+<RCC>
+    <qresource prefix="/images">
+        <file>DividingLine.svg</file>
+		<file>critical.svg</file>
+		<file>exclamation.svg</file>
+		<file>information.svg</file>
+		<file>question.svg</file>
+    </qresource>
+    <qresource prefix="/"/>
+</RCC>
diff --git a/app/images/information.svg b/app/images/information.svg
new file mode 100644
index 0000000..44b0ef8
--- /dev/null
+++ b/app/images/information.svg
@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="320"
+   height="320"
+   viewBox="0 0 320 320.00001"
+   id="svg5033"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="information.svg">
+  <defs
+     id="defs5035">
+    <linearGradient
+       gradientTransform="matrix(1.0123741,0,0,1.0052855,226.82647,753.70831)"
+       inkscape:collect="always"
+       xlink:href="#SVGID_36_"
+       id="linearGradient5005"
+       x1="-125.27629"
+       y1="217.50423"
+       x2="-4.2735882"
+       y2="57.848095"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="SVGID_36_"
+       gradientUnits="userSpaceOnUse"
+       x1="4.0481"
+       y1="287.94919"
+       x2="320.4859"
+       y2="-15.4029"
+       gradientTransform="matrix(1,0.00546456,-0.00546456,1,-2.0192,-3.0212)">
+      <stop
+         offset="0"
+         style="stop-color:#54d187;stop-opacity:0.90588236"
+         id="stop300" />
+      <stop
+         id="stop9348"
+         style="stop-color:#12c1bb;stop-opacity:0.65882355"
+         offset="0.51862437" />
+      <stop
+         offset="1"
+         style="stop-color:#055658;stop-opacity:0.38431373"
+         id="stop302" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffa4ff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.1606835"
+     inkscape:cx="150.68658"
+     inkscape:cy="151.76859"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1615"
+     inkscape:window-height="1026"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <sodipodi:guide
+       position="160,377.00001"
+       orientation="1,0"
+       id="guide5666" />
+    <sodipodi:guide
+       position="59.494972,568.63465"
+       orientation="1,0"
+       id="guide5668" />
+    <sodipodi:guide
+       position="259.71844,528.58996"
+       orientation="1,0"
+       id="guide5670" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5038">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-732.36216)">
+    <path
+       style="fill:#00ffbd;fill-opacity:1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
+       d="M 160.42857,785.99962 A 104.88141,105.22039 0 0 0 55.54771,891.21837 104.88141,105.22039 0 0 0 160.42857,996.43908 104.88141,105.22039 0 0 0 265.30943,891.21837 104.88141,105.22039 0 0 0 160.42857,785.99962 Z m -0.33984,3.38867 A 101.83055,101.66108 0 0 1 261.92076,891.0504 101.83055,101.66108 0 0 1 160.08873,992.71056 101.83055,101.66108 0 0 1 58.25865,891.0504 101.83055,101.66108 0 0 1 160.08873,789.38829 Z"
+       id="path4374"
+       inkscape:connector-curvature="0" />
+    <ellipse
+       style="opacity:0.77;fill:url(#linearGradient5005);fill-opacity:1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;fill-rule:nonzero"
+       id="path4417"
+       cx="160.24997"
+       cy="891.04053"
+       rx="102.26696"
+       ry="101.89165" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:196.94758606px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="122.20006"
+       y="1033.4916"
+       id="text5620"
+       sodipodi:linespacing="125%"
+       transform="scale(1.0772696,0.92827274)"><tspan
+         sodipodi:role="line"
+         id="tspan5622"
+         x="122.20006"
+         y="1033.4916">i</tspan></text>
+  </g>
+</svg>
diff --git a/app/images/question.svg b/app/images/question.svg
new file mode 100644
index 0000000..7d55a46
--- /dev/null
+++ b/app/images/question.svg
@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="320"
+   height="320"
+   viewBox="0 0 320 320.00001"
+   id="svg5033"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="question.svg">
+  <defs
+     id="defs5035">
+    <linearGradient
+       gradientTransform="matrix(1.0123741,0,0,1.0052855,226.82647,753.70831)"
+       inkscape:collect="always"
+       xlink:href="#SVGID_36_"
+       id="linearGradient5005"
+       x1="-125.27629"
+       y1="217.50423"
+       x2="-4.2735882"
+       y2="57.848095"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="SVGID_36_"
+       gradientUnits="userSpaceOnUse"
+       x1="4.0481"
+       y1="287.94919"
+       x2="320.4859"
+       y2="-15.4029"
+       gradientTransform="matrix(1,0.00546456,-0.00546456,1,-2.0192,-3.0212)">
+      <stop
+         offset="0"
+         style="stop-color:#54d187;stop-opacity:0.90588236"
+         id="stop300" />
+      <stop
+         id="stop9348"
+         style="stop-color:#12c1bb;stop-opacity:0.65882355"
+         offset="0.51862437" />
+      <stop
+         offset="1"
+         style="stop-color:#055658;stop-opacity:0.38431373"
+         id="stop302" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffa4ff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.2360558"
+     inkscape:cx="192.682"
+     inkscape:cy="132.16195"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1615"
+     inkscape:window-height="1026"
+     inkscape:window-x="65"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     units="px"
+     showguides="true"
+     inkscape:guide-bbox="true">
+    <sodipodi:guide
+       position="160,377.00001"
+       orientation="1,0"
+       id="guide5666" />
+    <sodipodi:guide
+       position="60,448.00001"
+       orientation="1,0"
+       id="guide5668" />
+    <sodipodi:guide
+       position="260,414.00001"
+       orientation="1,0"
+       id="guide5670" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5038">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-732.36216)">
+    <path
+       style="fill:#00ffbd;fill-opacity:1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none"
+       d="M 160.42857,785.99962 A 104.88141,105.22039 0 0 0 55.54771,891.21837 104.88141,105.22039 0 0 0 160.42857,996.43908 104.88141,105.22039 0 0 0 265.30943,891.21837 104.88141,105.22039 0 0 0 160.42857,785.99962 Z m -0.33984,3.38867 A 101.83055,101.66108 0 0 1 261.92076,891.0504 101.83055,101.66108 0 0 1 160.08873,992.71056 101.83055,101.66108 0 0 1 58.25865,891.0504 101.83055,101.66108 0 0 1 160.08873,789.38829 Z"
+       id="path4374"
+       inkscape:connector-curvature="0" />
+    <ellipse
+       style="opacity:0.77;fill:url(#linearGradient5005);fill-opacity:1;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;fill-rule:nonzero"
+       id="path4417"
+       cx="160.24997"
+       cy="891.04053"
+       rx="102.26696"
+       ry="101.89165" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:196.94758606px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+       x="101.77805"
+       y="1033.4916"
+       id="text5620"
+       sodipodi:linespacing="125%"
+       transform="scale(1.0772696,0.92827274)"><tspan
+         sodipodi:role="line"
+         id="tspan5622"
+         x="101.77805"
+         y="1033.4916">?</tspan></text>
+  </g>
+</svg>
diff --git a/app/main.cpp b/app/main.cpp
index 67a6e9e..7dbd13c 100644
--- a/app/main.cpp
+++ b/app/main.cpp
@@ -19,10 +19,12 @@
 #include <QtGui/QGuiApplication>
 #include <QtQml/QQmlApplicationEngine>
 #include <QtQml/QQmlContext>
+#include <QtQml/qqml.h>
 #include <QQuickWindow>
 #include <QtQuickControls2/QQuickStyle>
 
 #include "eventhandler.h"
+#include "onscreenmodel.h"
 
 
 int main(int argc, char *argv[])
@@ -58,6 +60,7 @@ int main(int argc, char *argv[])
     EventHandler *eventHandler = new EventHandler();
     eventHandler->init(port, token.toStdString().c_str());
     engine.rootContext()->setContextProperty("eventHandler", eventHandler);
+    qmlRegisterType<OnScreenModel>("OnScreenModel", 1, 0, "OnScreenModel");
     engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
     if (engine.rootObjects().isEmpty()) {
         HMI_DEBUG(APP_ID, "Fatal Error, rootObject is empty!");
@@ -66,10 +69,11 @@ int main(int argc, char *argv[])
 
     QObject *root = engine.rootObjects().first();
     QQuickWindow *window = qobject_cast<QQuickWindow *>(root);
-    QObject::connect(eventHandler, SIGNAL(signalLoader(QVariant)), window, SLOT(qmlLoader(QVariant)));
-    QObject::connect(eventHandler, SIGNAL(signalOnScreenParameter(QVariant)), window, SLOT(qmlOnScreenParameter(QVariant)));
+    QObject::connect(eventHandler, SIGNAL(updateModel(QVariant)), window, SLOT(setOnScreenModel(QVariant)));
+    QObject::connect(eventHandler, SIGNAL(showOnScreen()), window, SLOT(showOnScreen()));
+    QObject::connect(eventHandler, SIGNAL(hideOnScreen()), window, SLOT(hideOnScreen()));
 
-    HMI_DEBUG(APP_ID, "Launched!");
+    HMI_DEBUG(APP_ID, "onscreenapp started!");
     return app.exec();
 }
 
diff --git a/app/main.qml b/app/main.qml
index 758115b..99d50f8 100644
--- a/app/main.qml
+++ b/app/main.qml
@@ -19,6 +19,7 @@ import QtQuick.Window 2.2
 import QtQuick.Layouts 1.1
 import QtQuick.Controls 2.0
 import AGL.Demo.Controls 1.0
+import OnScreenModel 1.0
 
 Window {
     id: root
@@ -30,29 +31,95 @@ Window {
     height: 1488
     color: '#00000000'
 
-    function qmlLoader(url) {
-        console.log(qsTr('onscreenapp >>> qmlLoader load ' + url));
-        osLoader.source = url;
-    }
+    Onscreen {
+        id: ons
+        anchors.centerIn: parent
+        visible: true
+        scale: 0
+
+        property string dsp_sts: "hide"
+        property string dsp_title: ""
+        property string dsp_icon: ""
+        property string dsp_contents: ""
+        property int btnNum: 0
+        property string btn1Name: ""
+        property string btn2Name: ""
+        property string btn3Name: ""
 
-    function qmlOnScreenParameter(text) {
-        console.log(qsTr('onscreenapp >>> qmlOnScreenParameter.' + text));
-        if (osLoader.status == Loader.Ready) {
-            // call qmlOnScreenParameter in qml to post parameter which from application
-            if (osLoader.item && osLoader.item.qmlOnScreenParameter) {
-                osLoader.item.qmlOnScreenParameter(text);
+        states: [
+            State {
+                name: 'active'
+                when: ons.dsp_sts == "show"
+                PropertyChanges {
+                    target: ons
+                    scale: 1
+                    z: 1
+                }
+            },
+            State {
+                name: 'inactive'
+                when: ons.dsp_sts == "hide"
+                PropertyChanges {
+                    target: ons
+                    scale: 0
+                    z: -1
+                }
+            }
+        ]
+        transitions: Transition {
+            NumberAnimation {
+                properties: 'scale';
+                duration: 300;
+                easing.type: Easing.Linear
+                alwaysRunToEnd: true
             }
         }
-        else {
-            console.log("osLoader.status is not ready")
+    }
+
+    OnScreenModel {
+        id: onscreenModel
+    }
+
+    Timer {
+        id: ons_timer
+        interval: 3000
+        onTriggered: {
+            hideOnScreen();
+            clearOnScreenModel();
         }
     }
 
-    Loader {
-        objectName: "loaderObject"
-        id: osLoader
-        anchors.centerIn: parent
-        width: childrenRect.width
-        height: childrenRect.height
+    Connections {
+        target: ons
+        onScaleChanged : {
+            if(ons.scale == 0) {
+                console.log(qsTr('hide animation finished'));
+                eventHandler.deactivateWindow();
+            }
+        }
+    }
+
+    function showOnScreen() {
+        console.log(qsTr('show onscreenapp'));
+        ons.dsp_title = onscreenModel.getTitle()
+        ons.dsp_icon = "../images/" + onscreenModel.getType() + ".svg"
+        ons.dsp_contents = onscreenModel.getContents()
+        ons.btnNum = onscreenModel.buttonNum()
+        ons.btn1Name = onscreenModel.buttonName(0)
+        ons.btn2Name = onscreenModel.buttonName(1)
+        ons.btn3Name = onscreenModel.buttonName(2)
+        ons_timer.running =  ons.btnNum > 0 ? false : true
+        ons.dsp_sts = "show"
+    }
+
+    function hideOnScreen() {
+        console.log(qsTr('hide onscreenapp'));
+        ons.dsp_sts = "hide"
+        ons_timer.running = false
+    }
+
+    function setOnScreenModel(data) {
+        console.log(qsTr('onscreenapp >>> setModel status: ' + data));
+        onscreenModel.setModel(data)
     }
 }
diff --git a/app/onscreenmodel.cpp b/app/onscreenmodel.cpp
new file mode 100644
index 0000000..429c711
--- /dev/null
+++ b/app/onscreenmodel.cpp
@@ -0,0 +1,74 @@
+#include "onscreenmodel.h"
+#include "hmi-debug.h"
+#include <json-c/json.h>
+
+const char _modelName[] = "OnScreenModel";
+const char _title[] = "title";
+const char _type[] = "type";
+const char _contents[] = "contents";
+const char _buttons[] = "buttons";
+
+
+void OnScreenModel::setModel(QVariant data)
+{
+    HMI_DEBUG(_modelName, "setModel start!");
+    clearModel();
+    struct json_object *j_title = nullptr, *j_type = nullptr, *j_contents = nullptr, *j_buttons = nullptr;
+    struct json_object *j_param = json_tokener_parse(data.toString().toStdString().c_str());
+    if(json_object_object_get_ex(j_param, _title, &j_title)) {
+        m_title = json_object_get_string(j_title);
+    }
+    else {
+        HMI_DEBUG(_modelName, "title input is null");
+    }
+
+    if(json_object_object_get_ex(j_param, _type, &j_type)) {
+        m_type = json_object_get_string(j_type);
+    }
+    else {
+        HMI_DEBUG(_modelName, "type input is null");
+    }
+
+    if(json_object_object_get_ex(j_param, _contents, &j_contents)) {
+        m_contents = json_object_get_string(j_contents);
+    }
+    else {
+        HMI_DEBUG(_modelName, "contents input is null");
+    }
+
+    if(json_object_object_get_ex(j_param, _buttons, &j_buttons)) {
+        if(json_object_get_type(j_buttons) != json_type_array) {
+            HMI_DEBUG(_modelName, "buttons josn type isn't array!");
+        }
+        else {
+            m_buttons.clear();
+            int len = json_object_array_length(j_buttons);
+            struct json_object *json_tmp = nullptr;
+            for (int i = 0; i < len; i++) {
+                json_tmp = json_object_array_get_idx(j_buttons, i);
+                m_buttons << QString(json_object_get_string(json_tmp));
+            }
+        }
+    }
+    else {
+        HMI_DEBUG("OnScreenModel", "buttons input is null");
+    }
+    HMI_DEBUG(_modelName, "setModel end!titile=%s,type=%s,contents=%s,btnNum=%d",
+              m_title.toStdString().c_str(), m_type.toStdString().c_str(), m_contents.toStdString().c_str(), m_buttons.size());
+}
+
+QString OnScreenModel::buttonName(int index) const
+{
+    if(index >= m_buttons.size())
+        return QString("");
+    else
+        return m_buttons[index];
+}
+
+void OnScreenModel::clearModel(void)
+{
+    m_title = "";
+    m_type = "";
+    m_contents = "";
+    m_buttons.clear();
+}
diff --git a/app/onscreenmodel.h b/app/onscreenmodel.h
new file mode 100644
index 0000000..4524904
--- /dev/null
+++ b/app/onscreenmodel.h
@@ -0,0 +1,32 @@
+#ifndef ONSCREENMODEL_H
+#define ONSCREENMODEL_H
+
+#include <QObject>
+#include <QVariant>
+#include <QStringList>
+
+
+class OnScreenModel : public QObject
+{
+    Q_OBJECT
+public:
+    explicit OnScreenModel(QObject *parent = nullptr){}
+    ~OnScreenModel() = default;
+
+    Q_INVOKABLE QString getTitle(void) const {return m_title;}
+    Q_INVOKABLE QString getType(void) const {return m_type;}
+    Q_INVOKABLE QString getContents(void) const {return m_contents;}
+    Q_INVOKABLE int buttonNum(void) const {return m_buttons.size();}
+    Q_INVOKABLE QString buttonName(int index) const;
+    Q_INVOKABLE void setModel(QVariant data);
+
+private:
+    void clearModel(void);
+
+    QString m_title;
+    QString m_type;
+    QString m_contents;
+    QStringList m_buttons;
+};
+
+#endif // ONSCREENMODEL_H
diff --git a/app/qml.qrc b/app/qml.qrc
index 5f6483a..bad4ade 100644
--- a/app/qml.qrc
+++ b/app/qml.qrc
@@ -1,5 +1,6 @@
 <RCC>
     <qresource prefix="/">
         <file>main.qml</file>
+        <file>Onscreen.qml</file>
     </qresource>
 </RCC>
diff --git a/onscreenapp.pro b/onscreenapp.pro
index 8d60f8b..90b63a8 100644
--- a/onscreenapp.pro
+++ b/onscreenapp.pro
@@ -18,7 +18,6 @@ load(configure)
 
 SUBDIRS += \
     package \
-    app \
-    sample
+    app
 
 package.depends += app