topic Re: Using Icon Font glyph in ImageButton in ArcGIS AppStudio Questions

Using Icon Font glyph in ImageButton

LesVegetables — Sun, 12 Dec 2021 08:43:09 GMT

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.

Re: Using Icon Font glyph in ImageButton

ErwinSoekianto — Sun, 12 Dec 2021 08:43:11 GMT

You can use icon font on Button (including RoundButton and ToolButton),

See the changes made below for /controls/HeaderBar.qml infoImageReact,

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

        ToolButton {
            id: infoIcon
            font.family: fontAwesome.name
            text: "\uf05a"
            font.pixelSize: 35 * scaleFactor
            height: 30 * scaleFactor
            width: 30 * scaleFactor
            anchors {
                centerIn: parent
            }
            onClicked: {
                descPage.visible = 1
            }
        }
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I hope this is helpful,

Erwin

Re: Using Icon Font glyph in ImageButton

JohnMDye — Tue, 02 Jul 2019 12:20:05 GMT

Just my two cents here, I think icon fonts might not be the best approach. The movement on the web these days is from icon fonts to inline SVG for lots of really good reasons. Of course, that article points out the benefits of using inline SVG on the web, not using SVG in Qt which is a little different. I think many of the points still stand though, especially those about dealing with font antialiasing issues. Also if you wanted to do multi-color icons, well its possible with icon fonts but man what a hassle. Not to mention the real pain of keeping an icon font up to date. I think you'd be better served by just dropping a bunch of SVG files into your assets folder and not dealing with the headache of trying to keep an icon font up to date.

If you're really committed to icon fonts though, I came across this blog post from Martin Höher a while back. I couldn't get it to work before I had to move on to something else, but it seems worth experimenting with. Especially the creating of a Fonts QML component to assign the unicode value for each of your glyphs to a property. That would make it much, much more readable.

Re: Using Icon Font glyph in ImageButton

LesVegetables — Wed, 03 Jul 2019 13:50:40 GMT

I kind of agree with the points John Dye‌ makes about icon fonts. However, it looks to me like Qt doesn't treat SVGs for what they are, vector images. Rather it appears to treat them as raster images. Does anyone know if this is true or not. For example, how would one change the fill color of an SVG, or change the fill color of one layer within the SVG without having to embed multiple versions of the same resource?