I have a qml image button. If button is pressed then an long operation is start at C++ side. I want button is disable when click on it , them enable it after function is finish.
Image {
id:searchimgbtn
source: "/Images/Search.png"
height: parent.height
width: dp(32)
fillMode: Image.PreserveAspectFit
enabled: isvalF
opacity: isvalF ? 1 :0.1
MouseArea {
anchors.fill: parent
hoverEnabled: true
onClicked: {
disablesearchbutton();
getcbsvalue();
}
onPressed:{
searchimgbtn.scale=1.08
// searchimgbtn.opacity=0.3
// opacity: enabled ? 1 :0.1
}
onReleased: {
searchimgbtn.scale=1
// searchimgbtn.opacity=1
// opacity: enabled ? 1 :0.1
}
}
}
You need to branch your long running job into another process/thread, so that the UI-Process is not blocked and can render.
Look into QProcess or QThread, I'm using it to ping stuff.
const QString PING_PATH = "C:/Windows/System32/ping.exe";
QStringList pingArguments << "192.168.1.1";
QProcess *pingProcess = new QProcess(this);
pingProcess->startDetached(PING_PATH, pingArguments);
Related
I have a basic question about naming components in QML files. I have read that the top element should always get the id root and parent is always the reference to the next element above it.
I have a two qml files, one with a ListView and one with the listview delegate
Userlogon.qml
Item {
id: root
height: parent.height
width: parent.width
property var password: ['0', '1', '2', '3']
property int selectedField : mill.selectedIndex
property int selectedUser : 0
property string p_background: configuration.getColor(Colors.ContentBackground)
ColumnLayout { anchors.fill: parent
Rectangle { id: userlist; Layout.fillWidth: true; Layout.fillHeight: true; Layout.preferredHeight: 300; color: p_background
ColumnLayout { anchors.fill: parent
ListView { Layout.fillWidth: true; Layout.fillHeight: true
model: user.model
currentIndex: 1
onCurrentIndexChanged: { console.log("currentIndex changed") }
header: UserItemDelegate { p_index: -1; p_name: "Benutzeranmeldung"; p_icon: "password"; p_isHeader: true }
delegate: UserItemDelegate { p_index: index; p_name: name; p_icon: icon; p_isHeader: false }
spacing: 20
}
}
}
UserItemDelegate.qml
Item {
id: root
height: configuration.getSize(Sizes.ListItemHeight)
width: parent.width
property int p_index
property string p_name
property string p_icon
property bool p_isHeader
property bool p_isSelected: root.ListView.view.currentIndex == p_index
property string p_color: configuration.getColor(p_isHeader ? Colors.ListItemDisabled : (p_isSelected ? Colors.ListItemSelected : Colors.ListItemDefault))
Rectangle { anchors.fill: parent; Layout.fillWidth: true; Layout.fillHeight: true; color: p_color
RowLayout { anchors.verticalCenter: parent.verticalCenter;
Image { Layout.leftMargin: 10; sourceSize.height: root.height * 0.6; source: "image://iconprovider/" + p_icon }
Label { Layout.leftMargin: 10; text: p_name }
}
MouseArea{ enabled: !p_isHeader; anchors.fill: parent; onClicked: { root.ListView.view.currentIndex = p_index; } }
}
}
With root.Listview.view.currentIndex I can access the listview in the parent UserLogon.qml although root is the id of the current item?
And is it possible to access e.g. a timer defined in UserLogon.qml from the delegate. If so how would the referencing be?
First of all, you don't need to name every root object "root". I don't know where you read that, but you can use whatever name makes sense to you.
When you call root.ListView.view.currentIndex, the root in that case is the id of the delegate, not the list. QML's scoping rules guarantee that. The ListView.view attached property then allows you to reference back to the list without needing its id.
Your timer question is unclear. In general, yes you can have access to the ListView's properties from the delegate, but you should usually do it the other way around. The ListView should reference the delegate's properties. The reason is that you may have a need to use that delegate somewhere else and you don't necessarily want it tightly coupled with the ListView in that case. Here's an example:
MyList.qml
ListView {
id: contactList
Timer {
id: backgroundTimer
interval: 3000
running: true
}
model: 5
delegate: MyDelegate {
width: contactList.width
// ListView binds the delegate's 'timedOut' property to something
timedOut: backgroundTimer.running
}
}
MyDelegate.qml
Rectangle {
id: contact
property bool timedOut: false
height: 30
radius: height / 2
color: timedOut ? "red" : "blue"
}
/* $margen var = left change page dir to rtl i want to change $margen value to right */
$margen: left;
html{
[dir=rtl] & {
$margen: right;
}
}
button {
margin-#{$margen}: 10px;
}
Code Editor Page
I am working with Phaser.js v2.6.2. When I try to use this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;, it adds a white strip on top of Stage area. If I remove this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; white strip is gone but stage not scaled.
I dont know what is the problem, I need some help here. Screenshot is attached.
My code is
var game = new Phaser.Game(800, 250, Phaser.AUTO, '', { preload: preload, create: create, update: update });
function preload() {
game.load.image('background', 'images/gamebg1.jpg');
}
function create() {
game.add.sprite(0, 0, 'background');
this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;
}
function update() {
}
NOTE: It only happen in emulator view, chrome.
I had a similar problem. I think it has to do with the page giving margin and or padding to the html or body tags.
Try adding some styling to the html and body elements, Make the margin and padding 0 like so:
<style>
* {
padding: 0;
margin: 0;
}
</style>
I trying to make custom button and few other elements styled as KDE 5 'Breeze' theme. I considered to make separated palette object (called BreezePalette.qml that contains a lot of readonly color properties) for all of this widgets (because I do not want them to be styled in any other way, that's thy they called Breeze). The main concept is to make palette as property of widgets and create one palette in main.qml where I can change property theme to light or dark. It looks to me rational, because I planning only include all subset of .qml files into project, without any other additional files to Qt itself (that making it portable and easy to deploy). Here is that I have, can someone let me know how can I forward palete as a property?
main.qml
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Window 2.0
import QtQuick.Dialogs 1.1
ApplicationWindow {
title: qsTr("Hello World")
width: 640
height: 480
visible: true
menuBar: MenuBar{
Menu{
title: "File"
MenuItem{
text: "Exit"
onTriggered: Qt.quit()
}
}
}
BreezeButton{
x: 106
y: 82
palette: brPalette
onClicked: {
Qt.quit()
}
caption: "Button"
}
BreezePalette{
id: brPalette
theme: "light"
}
}
BreezePalette.qml
import QtQuick 2.2
QtObject {
id: palette
property string theme: "light"
readonly property color base: if (theme == "light"){
"#eff0f1"
} else if (theme == "dark"){
"#31363b"
}
readonly property color focus: "#3daee9"
readonly property color buttonText: if (theme == "light"){
"#31363b"
} else if (theme == "dark"){
"#eff0f1"
}
}
BreezeButton.qml
import QtQuick 2.2
import QtQuick.Window 2.0
import QtQuick.Layouts 1.1
Item {
id: root
implicitHeight: bodyText.font.pixelSize + 32
implicitWidth: bodyText.width + 32
property string caption: "Button"
property string iconSource
property int fontSize: 18
//I've tried to throw BreezePalette as a property to BreezeButton, but looks like my skills ended there (I have no any experience with js or qml before. I started learn it only few weeks)
property BreezePalette palette
signal clicked
Rectangle {
id: body
border {
width: 1
color: "#808e8e"
}
anchors{
fill: parent
}
gradient: Gradient {
id: bodyGradient
GradientStop { position: 0.4; color: "#4c4c4c" }
GradientStop { position: 0.9; color: "#31363b" }
}
MouseArea{
id: bodyMouseArea
z: bodyText.z + 1
anchors {
fill: parent
}
hoverEnabled: true
onEntered: {
body.border.color = "#3daee9"
}
onExited: {
body.border.color = "#7f8c8d"
}
onPressed: {
body.color = "#3daee9" // this one works, but I need to switching theme as you can see n `BreezePalette.qml`
//This one not working as expected, but seeing my properties as I need
//body.color = palette.focus
body.gradient = null
}
onReleased: {
body.color = "#4d4d4d"
body.gradient = bodyGradient
}
onClicked: {
root.clicked()
}
}
Text {
id: bodyText
anchors {
verticalCenter: body.verticalCenter
horizontalCenter: body.horizontalCenter
}
font.pointSize: fontSize
color: "#fcfcfc"
text: caption
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
}
Since stackexchange designed for sharing knowledge (or maybe even for ask for something you don't know well) I see it's rational to post it there because I need knowledge of experts. If you have any other point of view regarding this question I'll be glad to hear that. Appreciated any help.
Thanks
Svyatoslav
UPDATE:
Just found an answer, this code snippet working as well
property BreezePalette palette: BreezePalette
So, my second answer is - is that good to user this method? It's provide me thing I need, exactly as was expected.
Quite a late answer, but there is a module to have breeze theme.
qml-module-qtquick-controls-styles-breeze
I’m not a fan of the collapsed 3 line nav button when bootstrap collapses for smaller viewports. Is there a way to get the navbar collapse to a select drop down menu, as well as place it somewhere else on the page, other than in the top right? Just like this: http://filamentgroup.com/examples/rwd-nav-patterns/
Looking at what happens on the filamentgroup site, you can see that below a certain width, the body gets the class nav-menu and removes if when sized larger. This is their rwd-nav.js complete with comments:
jQuery(function($){
$('.nav-primary')
// test the menu to see if all items fit horizontally
.bind('testfit', function(){
var nav = $(this),
items = nav.find('a');
$('body').removeClass('nav-menu');
// when the nav wraps under the logo, or when options are stacked, display the nav as a menu
if ( (nav.offset().top > nav.prev().offset().top) || ($(items[items.length-1]).offset().top > $(items[0]).offset().top) ) {
// add a class for scoping menu styles
$('body').addClass('nav-menu');
};
})
// toggle the menu items' visiblity
.find('h3')
.bind('click focus', function(){
$(this).parent().toggleClass('expanded')
});
// ...and update the nav on window events
$(window).bind('load resize orientationchange', function(){
$('.nav-primary').trigger('testfit');
});
});
Then in their rwd-nav.css, this repositions based on width
/* Media queries
------------------------------ */
#media screen and (min-width: 640px) {
.nav-primary,
.nav-primary ul {
float: left;
}
.nav-primary ul {
float: left;
}
.nav-primary li {
float: left;
font-size: 1.5em;
border-bottom: 0;
}
}
#media screen and (min-width: 910px) {
.nav-primary {
float: right;
clear: none;
}
}
Hope that helps!