AnsweredAssumed Answered

Using Icon Font glyph in ImageButton

Question asked by les.vegetables on Jun 28, 2019
Latest reply on Jul 3, 2019 by les.vegetables

New to AppStudio. New to Qt. New to ArcGIS. Pardon my ignorance. I did search the internets before asking but didn't find any examples.

 

Consider the following from the AppStudio Font Awesomized Icons sample app:

MyApp.qml

import QtQuick 2.7
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1

import ArcGIS.AppFramework 1.0
import ArcGIS.AppFramework.Controls 1.0
import ArcGIS.AppFramework.SecureStorage 1.0

import "controls" as Controls

App {
    id: app
    width: 400
    height: 750

    function units(value) {
        return AppFramework.displayScaleFactor * value
    }

    property real scaleFactor: AppFramework.displayScaleFactor
    property int baseFontSize : app.info.propertyValue("baseFontSize", 15 * scaleFactor) + (isSmallScreen ? 0 : 3)
    property bool isSmallScreen: (width || height) < units(400)
    property color iconColor: "#4C4C4C"

    QtObject {
        id: fa
        readonly property string  settings: "\uf013"
        readonly property string  home: "\uf015"
        readonly property string  email: "\uf0e0"
        readonly property string  gps: "\uf124"
        readonly property string  inbox: "\uf01c"
    }

    Page{
        anchors.fill: parent
        header: ToolBar{
            id:header
            width: parent.width
            height: 50 * scaleFactor
            Material.background: "#8f499c"
            Controls.HeaderBar{}
        }

        // sample starts here -----
        contentItem: Rectangle{
            anchors.top:header.bottom

            FontLoader {
                id: fontAwesome
                source: "assets/fontawesome-webfont.ttf"
            }

            ColumnLayout {
                anchors.horizontalCenter: parent.horizontalCenter

                RowLayout {
                    Layout.fillWidth: true
                    Layout.preferredHeight:app. height/3 * scaleFactor
                    spacing: 40 *scaleFactor
                    anchors.horizontalCenter: parent.horizontalCenter

                    //Add a Font Awesome Twitter icon by creating a Text element
                    Text {
                        font.family: fontAwesome.name
                        text: "\uf099"
                        font.pixelSize: 35 *scaleFactor
                        color: "#1DA1F2"
                    }
...

 

Pretty straight forward. Reference the icon-font in a FontLoader object then reference the icons you want by their unicode value within the font.

 

Next, consider the following from the same example app.

/controls/HeaderBar.qml

import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.1


import ArcGIS.AppFramework 1.0
import ArcGIS.AppFramework.Controls 1.0

RowLayout{
    anchors.fill: parent
    spacing:0
    clip:true

    Rectangle{
        Layout.preferredWidth: 50*scaleFactor
    }

    Text {
        text:app.info.title
        color:"white"
        font.pixelSize: app.baseFontSize * 1.1
        font.bold: true
        maximumLineCount:2
        wrapMode: Text.Wrap
        elide: Text.ElideRight
        anchors{
            verticalCenter: parent.verticalCenter
            horizontalCenter:parent.horizontalCenter
        }
    }

    Rectangle{
        id:infoImageRect
        Layout.alignment: Qt.AlignRight
        Layout.preferredWidth: 50*scaleFactor

        ImageButton {
            id:infoImage
            source: "../assets/info.png"
            height: 30 * scaleFactor
            width: 30 * scaleFactor
            checkedColor : "transparent"
            pressedColor : "transparent"
            hoverColor : "transparent"
            glowColor : "transparent"
            anchors {
                centerIn: parent
            }
            onClicked: {
                descPage.visible = 1
            }
        }
    }
}

 

Okay, strange. We've got an icon font loaded into our app. Why in the world would we use a png for an ImageButton when we have an icon font that could have a vector-based glyph in it that would scale nicely and allow us to set the icon color via a simple property assignment.

 

Question: I want to use an icon font for all of my apps icons, including those on buttons. Can someone provide an example of how to do that? I tried looking up the documentation on ImageButton to see if there were any properties I could use, but all I could find documentation for what the Button type, not ImageButton. F1 doesn't bring up any documentation on ImageButton either.

 

Thanks in advance.

Outcomes