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"
}
...<SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>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
}
}
}
}<SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>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.
