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.
Solved! Go to Solution.
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
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
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.
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?