Feature/System_QML (#2121)

Add support for SYSTEM QML functions for show_text() and show_image()

The ui elements used are stored in the mycroft/res/ui folder

mycroft/res/ui/SYSTEM_ImageFrame.qml

@@ -0,0 +1,83 @@
+import QtQuick.Layouts 1.4
+import QtQuick 2.4
+import QtQuick.Controls 2.0
+import org.kde.kirigami 2.4 as Kirigami
+
+import Mycroft 1.0 as Mycroft
+
+Mycroft.Delegate {
+    id: systemImageFrame
+    skillBackgroundColorOverlay: "#000000"
+    property bool hasTitle: sessionData.title.length > 0 ? true : false
+    property bool hasCaption: sessionData.caption.length > 0 ? true : false
+
+    ColumnLayout {
+        id: systemImageFrameLayout
+        anchors.fill: parent
+
+        Kirigami.Heading {
+            id: systemImageTitle
+            visible: hasTitle
+            enabled: hasTitle
+            Layout.fillWidth: true
+            Layout.preferredHeight: paintedHeight + Kirigami.Units.largeSpacing
+            level: 3
+            text: sessionData.title
+            wrapMode: Text.Wrap
+            font.family: "Noto Sans"
+            font.weight: Font.Bold
+        }
+
+        Image {
+            id: systemImageDisplay
+            visible: true
+            enabled: true
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            source: sessionData.image
+            property var fill: sessionData.fill
+
+            onFillChanged: {
+                console.log(fill)
+                if(fill == "PreserveAspectCrop"){
+                    systemImageDisplay.fillMode = 2
+                } else if (fill == "PreserveAspectFit"){
+                    console.log("inFit")
+                    systemImageDisplay.fillMode = 1
+                } else if (fill == "Stretch"){
+                    systemImageDisplay.fillMode = 0
+                } else {
+                    systemImageDisplay.fillMode = 0
+                }
+            }
+
+
+            Rectangle {
+                id: systemImageCaptionBox
+                visible: hasCaption
+                enabled: hasCaption
+                anchors.bottom: parent.bottom
+                anchors.left: parent.left
+                anchors.right: parent.right
+                height: systemImageCaption.paintedHeight
+                color: "#95000000"
+
+                Kirigami.Heading {
+                    id: systemImageCaption
+                    level: 2
+                    anchors.left: parent.left
+                    anchors.leftMargin: Kirigami.Units.largeSpacing
+                    anchors.right: parent.right
+                    anchors.rightMargin: Kirigami.Units.largeSpacing
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: sessionData.caption
+                    wrapMode: Text.Wrap
+                    font.family: "Noto Sans"
+                    font.weight: Font.Bold
+                }
+            }
+        }
+    }
+}
+
+

mycroft/res/ui/SYSTEM_TextFrame.qml

@@ -0,0 +1,39 @@
+import QtQuick.Layouts 1.4
+import QtQuick 2.4
+import QtQuick.Controls 2.0
+import org.kde.kirigami 2.4 as Kirigami
+
+import Mycroft 1.0 as Mycroft
+
+Mycroft.ProportionalDelegate {
+    id: systemTextFrame
+    skillBackgroundColorOverlay: "#000000"
+    property bool hasTitle: sessionData.title.length > 0 ? true : false
+
+    Component.onCompleted: {
+        console.log(hasTitle)
+    }
+
+    Mycroft.AutoFitLabel {
+        id: systemTextFrameTitle
+        Layout.fillWidth: true
+        Layout.preferredHeight: proportionalGridUnit * 20
+        wrapMode: Text.Wrap
+        visible: hasTitle
+        enabled: hasTitle
+        font.family: "Noto Sans"
+        font.weight: Font.Bold
+        text: sessionData.title        
+    }
+
+    Mycroft.AutoFitLabel {
+        id: systemTextFrameMainBody
+        Layout.fillWidth: true
+        Layout.preferredHeight: proportionalGridUnit * 30
+        wrapMode: Text.Wrap
+        font.family: "Noto Sans"
+        font.weight: Font.Bold
+        text: sessionData.text
+    }
+}
+

mycroft/skills/core.py

@@ -350,7 +350,10 @@ def show_pages(self, page_names, index=0, override_idle=None):
         # Convert pages to full reference
         page_urls = []
         for name in page_names:
-            page = self.skill.find_resource(name, 'ui')
+            if name.startswith("SYSTEM"):
+                page = resolve_resource_file(join('ui', name))
+            else:
+                page = self.skill.find_resource(name, 'ui')
             if page:
                 if self.config.get('remote') is True:
                     page_urls.append(self.remote_url + "/" + page)
@@ -406,21 +409,24 @@ def show_text(self, text, title=None):
         self.clear()
         self["text"] = text
         self["title"] = title
-        self.show_page("SYSTEM_TEXTFRAME")
+        self.show_page("SYSTEM_TextFrame.qml")
 
-    def show_image(self, url, caption=None, title=None):
+    def show_image(self, url, caption=None, title=None, fill=None):
         """ Display a GUI page for viewing an image
 
         Arguments:
             url (str): Pointer to the image
             caption (str): A caption to show under the image
             title (str): A title to display above the image content
+            fill (str): Fill type supports 'PreserveAspectFit',
+            'PreserveAspectCrop', 'Stretch'
         """
         self.clear()
         self["image"] = url
         self["title"] = title
         self["caption"] = caption
-        self.show_page("SYSTEM_IMAGEFRAME")
+        self["fill"] = fill
+        self.show_page("SYSTEM_ImageFrame.qml")
 
     def show_html(self, html):
         """ Display an HTML page in the GUI