Understanding QML Slider - slider

I am doing a simple slider project just to understand how sliders work in QML.
I am using the slider from Qt.labs.controls
I looked at their documentation and there are only two methods.
void decrease() and void increase()
All I want to do is display the value corresponding to the slider position.
I can't find any signal or method that tells me if the current position changed or something like that.
Am I looking in the right place?
Or Do I have to write everything from scratch to make my simple project work?
Update: I am using QT5.6 should I use higher version for this

You specifically mentioned labs, which means you're probably using QtQuick 2. There's been a lot of important developments of the Controls components since Qt5.6, so it would be advisable to upgrade if the intention is to continue using QtQuick 2.
http://doc.qt.io/qt-5/qml-qtquick-controls2-slider.html gives the latest docs. Note that the widget was updated in Qt5.7, and that the current import command is import QtQuick.Controls 2.1.
The latest Qt is 5.8, in which the Slider supports both position, and value.
position: the slider's position, from 0 to 1.
value: the output value mapped from position onto the scale [from, to]

You can use value property of that control. Every qml property has implicit signal handler.For ex: for value property you will have signal onValueChanged.
For your simple project you can also use slider control from QtQuick.Controls. Just import QtQuick.Controls 1.4 in your qml file.

Related

Cannot use QtMultimedia in Qt Creator (Windows)

I am using the designer within QtCreater to attempt to create a proof-of-concept video stream player with QML. It's using Quick Controls rather than widgets as it will need to run on a device with no widgets available.
I've successfully put a one-pixel red border on the screen edges with an empty rectangle inside it (rectangles withing column layout within row layout) as a simple start. This runs both under Windows and on the device I intend to deploy to.
However, I want to replace the empty rectangle with a video player control and I'm having trouble figuring out how to do that, initially for Windows.
I've added multimedia to the original qml quick that my QT variable was set to in ProjName.pro file, and I've run qmake from the menu to ensure it's been actioned.
However, when I then use QtCreator to try and import the module while editing the main form in the designer, I can see nothing containing the word "multimedia" at all. All I see is:
Qt.labs.calendar 1.0
Qt.labs.controls 1.0
Qt.labs.controls.material 1.0
Qt.labs.controls.universal 1.0
Qt.labs.folderlistmodel 2.1
Qt.labs.settings 1.0
Qt.labs.templates 1.0
QtCanvas3D 1.1
QtGraphicalEffects.private 1.0
QtPositioning 5.6
QtQuick.Controls 1.5
QtQuick.Extras 1.4
QtQuick.LocalStorage 2.0
QtQuick.Window 2.2
QtQuick.XmlListModel 2.0
QtSensors 5.6
QtTest 1.1
QtWebSockets 1.0
QtWebView 1.1
I can manually edit the MainForm.ui.qml file and insert import QtMultimedia 5.6 into it but, when the designer comes back up, it has an alert next to the top level control with the help text:
found not working imports:
file:///C:/path-to/MainForm.ui.qml:2 module "QtMultimedia"
is not installed
This is all with QtCreator 4.0.1 as downloaded from Qt's site about a month ago, and we're using Qt 5.6.1 on both Windows and the target platform.
All the solutions I found on the net seem to indicate that the import is all that's needed but this appears not to be the case here.
Any ideas what I'm doing wrong, or what is the process for getting one of the QtMultimedia controls running within a QML app?
Apparently this is intentional. From what I've been told, the best approach is to instead create a separate component (QML file, via the text editor) that itself imports the multimedia types. That can then be used in the designer. For example, if you create VideoItem.qml with the following contents, you can use that in the designer:
import QtQuick 2.0
import QtMultimedia 5.5
Rectangle {
width : 200
height : 200
color: "black"
Video {
id: video
source: "video.avi"
anchors.fill: parent
}
}

Unreal Engine 4 Blueprint

Im new to unreal
I have a problem with the communication from Hud_Blueprint to Level_Blueprint.
I want to have a slider in the Hud which controls the rotation of a cube in the level.
In the Hud_Blueprint i have the slider I made in a Widget_Blueprint.
Works perfect, printline values from 0 to 1.
I tried to use a Interface_Blueprint, like in the following link without success.
https://answers.unrealengine.com/questions/22126/pass-variable-from-hud-blueprint-to-level-blueprin.html
my Blueprints:
https://www.dropbox.com/s/k30ah9fjuwlff6x/zusammen.jpg?dl=0 (404 response)
Seems like i have no connection between the Blueprints.
The function works just in the Hud_Blueprint.
Well, your problem is maybe solved, but someone can find it helpful:
First, create new WidgetBlueprint and name it "Slider".
In Slider editor create Event Dispatcher called "ValueChanged" with float input. In designer, add slider and add it's OnValueChanged. From that node you must call ValueChanged with obtained Value as parameter.
In level blueprint, on EventBeginPlay create SliderWidget and Add (return value) To Viewport. You must promote Slider to variable to use it in next step - Assign ValueChanged with new event which will cover up rotation login in it's execution. See image at Dropbox
If you select your cube in the level outliner and drag that into your HUD_BP you can obtain a reference to the object that way. You can then drag a pin off the object reference and call SetActorRotation

Find out Easing Functions for WinRT Theme Animations

A slightly odd question, but is there anyway to find out what easing functions are used in the WinRT XAML Theme Animations - more specifically I'm trying to replicate that of the EntranceThemeTransition (which I can't use directly).
I naively thought using something like .NET reflector would help, but I'd gather I'd need the actual source code rather than what .Net Reflector shows.
Anyone any ideas?
You might like to take a look at the AnimationMetrics sample on MSDN.
There is an AnimationDescription class that will tell you all sorts of info on the built in animation types, basically anything in the Windows.UI.Core.AnimationMetrics.AnimationEffect enum.
For example:
var animationDescription = new AnimationDescription(AnimationEffect.EnterPage, AnimationEffectTarget.Incoming);
var s = new System.Text.StringBuilder();
s.AppendFormat("Stagger delay = {0}ms", animationDescription.StaggerDelay.TotalMilliseconds);
s.AppendLine();
s.AppendFormat("Stagger delay factor = {0}", animationDescription.StaggerDelayFactor);
s.AppendLine();
s.AppendFormat("Delay limit = {0}ms", animationDescription.DelayLimit.TotalMilliseconds);
s.AppendLine();
s.AppendFormat("ZOrder = {0}", animationDescription.ZOrder);
s.AppendLine();
s.AppendLine();
//etc
Link: http://code.msdn.microsoft.com/windowsapps/Animation-metrics-sample-acb0220c
I believe these built in animations are implemented in a different way and they run independently from regular Storyboard + child animations, so you would need to approximate these with some tests that compare these with regular Storyboard animations that you implement running side by side.
One way to visualize easing functions is to run a theme transition moving a UI element in one axis while you run another one that moves the element in a perpendicular axis in a linear motion (with no easing function applied).

Qt5. Embed QWidget object in QML

I am using Qt5 beta and trying to embed a QWidget-based object into QML. The goal is to use QML as much as possible, and only use QWidget objects where QML does not do what I need. I found a link explaining how to do this for Qt4.7, but I have not found any information explaining how to do this in Qt5.
http://doc.qt.digia.com/4.7/declarative-cppextensions-qwidgets.html
The same example is also available in the Qt5 examples folder under:
examples\qtquick1\declarative\cppextensions\qwidgets
Unfortunately, this example uses QtQuick 1, rather than QtQuick 2, and I would like to use the new features of Qt5. I actually want to embed a qwt widget, but as a first step I would be happy to embed any simple QWidget-based object.
Can anybody help me get the example working under Qt5 / QtQuick 2 ?
Qt Quick 2 uses a scene graph for efficient rendering on the GPU. Unfortunately this makes it impossible to embed classic widgets into the scene. The old approach to embed such widgets with the help of QGraphicsProxyWidget works only with Qt Quick 1, because internally it uses a QGraphicsView for all the heavy lifting and QGraphicsProxyWidget is meant to be used with it.
As of now there are no plans to enable embedding classic QWidgets into the scene graph I know of. I think this is rather unlikely to change, because the concepts of QPainter, the painting framework used for the classic widgets, and the new scene graph doesn't play well with each other.
There some efforts to develop new widgets sets specifically tailored for the needs of QML, but none of them are as powerful and mature as the classic widgets. The most prominent ones are the QML Quick Controls, bundled with Qt since version 5.1.
If you really depend on QWT my advice would be to stick with Qt Quick 1.1 for now. It's still bundled with Qt 5, probably for cases like yours. That way you won't take advantage of the new scene graph, though.
You can embed QWidget to QML by using QQuickPaintedItem class:
http://doc.qt.io/qt-5/qquickpainteditem.html
Qt5 has an example:
http://doc.qt.io/qt-5/qtquick-customitems-painteditem-example.html
You should implement an inherent of QQuickPaintedItem with private widget attribute, that you want to embed. Provide paint method, that just render the QtWidget and provide mouse and other event transmitting from inherit of QQuickPaintedItem to embed QtWidget.
There's also QSG (Qt scene graph API), but my experience with that thing wasn't smooth. I believe the clue in multithreading (performing rendering in the different thread (not the Qt GUI thread one, however on Windows that's not true and all is done in main GUI thread).
I've implemented embedding of QCustomPlot, here's link: github.com/mosolovsa/qmlplot
What could be done is to render the widget to an image and upload as texture.For interaction someone needs to forward events like mouseClick or keyPressed from the sceneGraph, translate to widget coordinates, pass on, render and upload texture again. Just an idea :)
The recommended approach is to stay with a QWidget based application and embed the QML parts using QWidget::createWindowContainer.
Further to Julien's answer - a simple way to achieve this is to use QQuickWidget to display the QML scene, and then add a regular QWidget as a child of the QQuickWidget. You can also add a simple intermediate QObject to anchor the QWidget to an item in the scene.
E.g.:
In main.qml:
Item {
... // layouts, extra items, what have you
Item
{
objectName: "layoutItem"
anchors.fill: parent
}
... // more layouts, extra items, etc.
}
widgetanchor.h:
class WidgetAnchor: public QObject
{
ptr<QWidget> _pWidget;
QPointer<QQuickItem> _pQuickItem;
public:
WidgetAnchor(QWidget* pWidget, QQuickItem* pItem)
: QObject(pWidget), _pWidget(pWidget), _pQuickItem(pItem)
{
connect(_pQuickItem, &QQuickItem::xChanged, this, &WidgetAnchor::updateGeometry);
connect(_pQuickItem, &QQuickItem::yChanged, this, &WidgetAnchor::updateGeometry);
connect(_pQuickItem, &QQuickItem::widthChanged, this, &WidgetAnchor::updateGeometry);
connect(_pQuickItem, &QQuickItem::heightChanged, this, &WidgetAnchor::updateGeometry);
updateGeometry();
}
private:
void updateGeometry()
{
if (_pQuickItem)
{
QRectF r = _pQuickItem->mapRectToItem(0, QRectF(_pQuickItem->x(), _pQuickItem->y(), _pQuickItem->width(), _pQuickItem->height()));
_pWidget->setGeometry(r.toRect());
}
}
};
In main.cpp:
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
auto pqw = new QQuickWidget;
pqw->setSource(QUrl::fromLocalFile("main.qml"));
pqw->setResizeMode(QQuickWidget::SizeRootObjectToView);
pqw->setAttribute(Qt::WA_DeleteOnClose);
auto pOwt = new MyWidget(pqw);
if (auto pOverlayItem = pqw->rootObject()->findChild<QQuickItem*>("overlayItem"))
new WidgetAnchor(pOwt, pOverlayItem);
pqw->show();
return app.exec();
}
The documentation states that using QQuickWidget has advantages over QQuickView and QWidget::createWindowContainer, such as no restrictions on stacking order, but has a 'minor performance hit'.
Hope that helps.

How to set a JavaFX Stage/Frame to Maximized

I'm using JavaFX 2. I want my frame to open maximized but I'm not seeing a way. I searched a bit on the internet without success. For the stage I see setFullScreen() and setIconified() but I don't see anything like setMaximized().
The Java 8 implementation of the Stage class provides a maximized property, which can be set as follows:
primaryStage.setMaximized(true);
When evaluating the sourcecode of the Ensemble.jar provided with the samples of JavaFX 2.0 SDK, the currently valid way to achieve window maximizing is
Screen screen = Screen.getPrimary();
Rectangle2D bounds = screen.getVisualBounds();
primaryStage.setX(bounds.getMinX());
primaryStage.setY(bounds.getMinY());
primaryStage.setWidth(bounds.getWidth());
primaryStage.setHeight(bounds.getHeight());
(you find similar code in WindowButtons.java)
The 'maximize' button is still enabled and when clicking it, the windows will grow a bit more (Windows OS). After this the 'maximize 'button is disabled. In the provided example the standard buttons are replaced. Maybe this is still an issue.
Better use Multi-Screen compatible maximize logic:
// Get current screen of the stage
ObservableList<Screen> screens = Screen.getScreensForRectangle(new Rectangle2D(stage.getX(), stage.getY(), stage.getWidth(), stage.getHeight()));
// Change stage properties
Rectangle2D bounds = screens.get(0).getVisualBounds();
stage.setX(bounds.getMinX());
stage.setY(bounds.getMinY());
stage.setWidth(bounds.getWidth());
stage.setHeight(bounds.getHeight());
try this simpler code
primaryStage.setMaximized(true);
and it fills up the whole screen
. note that if you remove maximize/minise buttons the application will fill the whole screen as well as remove the taskbar so mnd your initStyles if you have any
Use this to remove the Minimise, Maximise Buttons :
primaryStage.initStyle(StageStyle.UTILITY);
Where primaryStage is your Stage object.