saving QML image - qt

How can I save QML Image into phone memory ??
also if saving the image was applicable , I have this case which I need to add some text to the image (we can imagine it as we have a transparent image[that hold the text] and put it over the second image , so finally we have one image that we can save it into phone memory)

Not from Image directly. QDeclarativeImage has pixmap, setPixmap and pixmapChange methods, but for some reason there is no property declared. So you cannot use it fom qml. Unfortunately it cannot be used from C++ either - it is a private calsss.
What you can do is paint graphics item to your pixmap and save it to file.
class Capturer : public QObject
{
Q_OBJECT
public:
explicit Capturer(QObject *parent = 0);
Q_INVOKABLE void save(QDeclarativeItem *obj);
};
void Capturer::save(QDeclarativeItem *item)
{
QPixmap pix(item->width(), item->height());
QPainter painter(&pix);
QStyleOptionGraphicsItem option;
item->paint(&painter, &option, NULL);
pix.save("/path/to/output.png");
}
Register "capturer" context variable:
int main()
{
// ...
Capturer capturer;
QmlApplicationViewer viewer;
viewer.rootContext()->setContextProperty("capturer", &capturer);
// ...
}
And use it in your qml:
Rectangle {
// ...
Image {
id: img
source: "/path/to/your/source"
}
MouseArea {
anchors.fill: parent
onClicked: {
capturer.save(img)
}
}
}

With Qt 5.4+ you can do it straight from your Qml with:
grabToImage

Related

Enable / disable camera (QML Camera)

I have qml camera widget in camera.qml. the qml component is loaded from a Qt widget "WidgetCamera" that is placed on a stack widget in the background. The widget starts the camera device already at creation.
How to make the camera start only when the widget is shown in the foreground. And vice versa, how release the camera when the widget goes to the background?
camera.qml
Item {
width: 640
height: 360
Camera {
id: camera
}
VideoOutput {
source: camera
anchors.fill: parent
}
}
widgetCamera.h
class WidgetCamera : public QWidget
{
Q_OBJECT
public:
WidgetCamera() {
QQuickWidget *qw= new QQuickWidget;
qw->setSource(QUrl("qrc:///camera.qml"));
// ...
}
}
mainwindow.h
class MainWindow : QMainWindow
{
Q_OBJECT
public:
MainWindow() {
QStackedWidget *sw = new QStackedWidget;
sw->addWidget(new QWidget());
sw->addWidget(new WidgetCamera());
// ...
}
}
QML camera type has start(), stop() methods accessible directly inside QML. But to be able to turn the camera on/off at will from c++ side, you should first introduce it as a member in your MainWindow class, e.g. like this:
#include "widgetCamera.h"
class MainWindow : QMainWindow
{
Q_OBJECT
private:
WidgetCamera* _cameraWidget;
public:
MainWindow() {
QStackedWidget *sw = new QStackedWidget;
sw->addWidget(new QWidget());
_cameraWidget = new WidgetCamera();
sw->addWidget(_cameraWidget);
// PS: Make sure you free your instances correctly, too
// ...
}
}
Now, in your WidgetCamera class, you should also introduce a member variable to access the actual QML widget faster, similar to the above. Let's stick with the "qw" you already gave it.
Then, make sure you give objectNames to all QML children that you want to access (in this case, we want the camera), like this:
Item {
width: 640
height: 360
Camera {
id: camera
objectName: "theCamera"
}
VideoOutput {
source: camera
anchors.fill: parent
}
}
Once you have that, you need a function to enable/disable the capturing of the camera, which could be done like this:
void WidgetCamera::disableCapture() {
QObject* qmlCamera = qw->findChild<QObject*>("theCamera");
QCamera* camera = qvariant_cast<QCamera*>(qmlCamera->property("mediaObject"));
camera->stop();
}
Now, obviously, a lot of this could be improved and optimized (like making the actual c++ QCamera a member of WidgetCamera, etc.), but this should get you started.
As to when you want to call that function to enable/disable the camera, that is completely up to you.

How to show on QML (Qt) from SQLite BLOB data as image?

My code is like below.
Name - as TEXT field,
Photo - as BLOB data
class SqlQueryModel: public QSqlQueryModel
{
Q_OBJECT
QHash<int,QByteArray> *hash;
public:
explicit SqlQueryModel(QObject * parent) : QSqlQueryModel(parent)
{
hash = new QHash<int,QByteArray>;
hash->insert(Qt::UserRole, QByteArray("Name"));
hash->insert(Qt::UserRole + 1, QByteArray("Photo"));
}
inline RoleNameHash roleNames() const { return *hash; }
};
Selecting data
view = new QQuickView();
QSqlQueryModel *someSqlModel = new SqlQueryModel(this);
someSqlModel->setQuery("SELECT Name, Photo FROM some_table");
QQmlContext *context = view->rootContext();
context->setContextProperty("someSqlModel", someSqlModel);
view->setSource(QUrl("qrc:///MainView.qml"));
view->show();
Binding in QML
ListView {
id: someListView
model: SqlContactModel {}
delegate: ItemDelegate {
text: Name
Image {
id: Photo
source: ???
}
}
}
How to show on QML (Qt) from SQLite BLOB data as image?
You have three options:
let the model hand out some ID and use that with a QQuickImageProvider
let the model hand out a QImage and write a custom item that can display that
let the model hand out the image data as a data URI
For (2) the simplest solution is a QQuickPaintedItem derived class, something like this
class QImageItem : public QQuickPaintedItem
{
Q_OBJECT
Q_PROPERTY(QImage image READ image WRITE setImage NOTIFY imageChanged)
public:
explicit QImageItem(QQuickItem *parent = Q_NULLPTR) : QQuickPaintedItem(parent) {}
QImage image() const { return m_image; }
void setImage(const QImage &image);
void paint(QPainter *painter) Q_DECL_OVERRIDE;
private:
QImage m_image;
};
void QImageItem::setImage(const QImage &image)
{
m_image = image;
emit imageChanged();
update();
setImplicitWidth(m_image.width());
setImplicitHeight(m_image.height());
}
void QImageItem::paint(QPainter *painter)
{
if (m_image.isNull()) return;
painter.drawImage(m_image.scaled(width(), height()));
}
Register as usual with qmlRegisterType<QImageItem>("SomeModuleName", 1, 0, "SomeTypeName") and in QML import SomeModuleName 1.0 and use SomeTypeName in instead of Image, with the QImage returned by the model bound to the item's image property

QML StatusBar with SizeGrip

I notice that QML's StatusBar type doesn't include the SizeGrip like QStatusBar does.
In order to get a size grip, I had to instead embed the QML into a QMainWindow with a QStatusBar. Although this works, it complicates the rest of the app and it's not really the design I'm after.
Would it be possible to implement the QStatusBar directly in QML by subclassing it and how would QML be able to recognise/use the SizeGrip?
EDIT:
I've attempted to derive QQuickPaintedItem to try and render a QStatusBar in QML, but so far haven't had any luck. An error is being triggered in the render call: ASSERT failure in QCoreApplication::sendEvent: "Cannot send events to objects owned by a different thread. Current thread 399d3d8. Receiver '' (of type 'QStatusBar') was created in thread 8c9f00", file kernel\qcoreapplication.cpp, line 553
.h
class WindowStatusBar : public QQuickPaintedItem
{
Q_OBJECT
public:
explicit WindowStatusBar(QQuickItem *parent = 0);
virtual ~WindowStatusBar();
void paint(QPainter *painter);
protected:
QStatusBar *statusBar_;
};
.cpp
WindowStatusBar::WindowStatusBar(QQuickItem *parent)
: QQuickPaintedItem(parent)
, statusBar_(NULL)
{
setOpaquePainting(true);
setAcceptHoverEvents(true);
setAcceptedMouseButtons(Qt::AllButtons);
statusBar_ = new QStatusBar;
}
WindowStatusBar::~WindowStatusBar()
{
delete statusBar_;
}
void WindowStatusBar::paint(QPainter *painter)
{
statusBar_->render(painter, QPoint(), QRegion(),
QStatusBar::DrawWindowBackground | QStatusBar::DrawChildren);
}
Yes, you can derive your own statusbar QML type from StatusBar or you can use the standard QML StatusBar with a contentItem that you designed. To implement the size grip you would put a MouseArea at the right border- in the onPositionChanged you would emit a signal that is interpreted by the mainwindow as a resize command. Avoiding feedback loops (because resizing the main window may change the position in the MouseArea) is left as an exercise for the reader.

Assigning Keyboard Shortcuts to QML Components

I am deep into building a Desktop Application with QML and Qt Creator and I am currently researching keyboard handling and how it works with QML elements. I am already aware of the lack of proper QML replacements for Desktop Widgets.
My current problem is that I wish to assign some global keyboard shortcuts to some particular QML components (like assigning keyboard shortcuts to buttons on the GUI) which should activate them. The best I could manage is to use FocusScopes and Key Navigation to be able to just navigate the GUI via keyboards, but this isn't the same thing.
Can anyone suggest what to do in this scenario? Is there any such feature coming in with Qt 5? I couldn't find any information on this on the Internet.
Answering my own question as the Shortcuts are now possible to implement in Qt 5.1.1.
Shortcuts can be easily bound to QtQuick controls like Button, ToolButtons and MenuItem using the QML Action item. e.g. :
ApplicationWindow {
...
ToolButton { action: openAction } // Add a tool button in a ToolBar
...
Action {
id: openAction
text: "&Open"
shortcut: "Ctrl+O"
onTriggered: // Do some action
tooltip: "Open an image"
}
}
Pressing Ctrl+O will execute the action specified in the onTriggered section.
Refer to Qt Quick Controls Gallery example
Starting from Qt 5.9 the desired behavior is even included:
import QtQuick 2.9
Item {
Shortcut {
context: Qt.ApplicationShortcut
sequences: [StandardKey.Close, "Ctrl+W"]
onActivated: {
container.clicked()
console.log("JS: Shortcut activated.")
}
}
}
If you omit the context, it will only work for currently active windows, otherwise for the entire application, see the documentation.
You can totally use shortcut in QML by using EventFilter in C++(Qt).
You can do by below steps:
1. Create a Shortcut class by C++.
2. Register QML Type for Shortcut class
3. Import Shortcut to QML file and handle it.
#ifndef SHORTCUT_H
#define SHORTCUT_H
#include <QDeclarativeItem>
class Shortcut : public QObject
{
Q_OBJECT
Q_PROPERTY(QVariant key READ key WRITE setKey NOTIFY keyChanged)
public:
explicit Shortcut(QObject *parent = 0);
void setKey(QVariant key);
QVariant key() { return m_keySequence; }
bool eventFilter(QObject *obj, QEvent *e);
signals:
void keyChanged();
void activated();
void pressedAndHold();
public slots:
private:
QKeySequence m_keySequence;
bool m_keypressAlreadySend;
};
#endif // SHORTCUT_H
#include "shortcut.h"
#include <QKeyEvent>
#include <QCoreApplication>
#include <QDebug>
#include <QLineEdit>
#include <QGraphicsScene>
Shortcut::Shortcut(QObject *parent)
: QObject(parent)
, m_keySequence()
, m_keypressAlreadySend(false)
{
qApp->installEventFilter(this);
}
void Shortcut::setKey(QVariant key)
{
QKeySequence newKey = key.value<QKeySequence>();
if(m_keySequence != newKey) {
m_keySequence = key.value<QKeySequence>();
emit keyChanged();
}
}
bool Shortcut::eventFilter(QObject *obj, QEvent *e)
{
if(e->type() == QEvent::KeyPress && !m_keySequence.isEmpty()) {
//If you want some Key event was not filtered, add conditions to here
if ((dynamic_cast<QGraphicsScene*>(obj)) || (obj->objectName() == "blockShortcut") || (dynamic_cast<QLineEdit*>(obj)) ){
return QObject::eventFilter(obj, e);
}
QKeyEvent *keyEvent = static_cast<QKeyEvent*>(e);
// Just mod keys is not enough for a shortcut, block them just by returning.
if (keyEvent->key() >= Qt::Key_Shift && keyEvent->key() <= Qt::Key_Alt) {
return QObject::eventFilter(obj, e);
}
int keyInt = keyEvent->modifiers() + keyEvent->key();
if(!m_keypressAlreadySend && QKeySequence(keyInt) == m_keySequence) {
m_keypressAlreadySend = true;
emit activated();
}
}
else if(e->type() == QEvent::KeyRelease) {
m_keypressAlreadySend = false;
}
return QObject::eventFilter(obj, e);
}
qmlRegisterType<Shortcut>("Project", 0, 1, "Shortcut");
import Project 0.1
Rectangle {
.................
.................
Shortcut {
key: "Ctrl+C"
onActivated: {
container.clicked()
console.log("JS: " + key + " pressed.")
}
}
}
So assuming you are calling a function on that button click event like this,
Button {
...
MouseArea {
anchor.fill: parent
onClicked: callThisFunction();
}
}
Then you can assign assign global keyboard shortcuts in this way. But the limitation is the Global QML element (a parent element which holds all other QML elements) should have the focus. Ex. :
Rectangle {
id: parentWindow
...
...
Button {
...
MouseArea {
anchor.fill: parent
onClicked: callThisFunction();
}
}
Keys.onSelectPressed: callThisFunction()
}
This is not exactly what you want but it may help.

Problem with drawing focus frame in Qt

I'm trying to create custom widget inheriting QFrame. All works fine, but I'm unable to draw the focus rectangle around my widget. Below is the sample code I use for drawing:
frame.h
class Frame : public QFrame {
Q_OBJECT
public:
Frame(QWidget *parent = 0);
~Frame();
protected:
void paintEvent(QPaintEvent *event);
private:
Ui::Frame *ui;
};
frame.cpp
Frame::Frame(QWidget *parent) :
QFrame(parent),
ui(new Ui::Frame)
{
ui->setupUi(this);
setFocusPolicy(Qt::ClickFocus);
}
Frame::~Frame()
{
delete ui;
}
void Frame::paintEvent(QPaintEvent *event)
{
QFrame::paintEvent(event);
if (hasFocus()) {
QStylePainter painter(this);
QStyleOptionFocusRect option;
option.initFrom(this);
option.backgroundColor = palette().dark().color();
painter.drawPrimitive(QStyle::PE_FrameFocusRect, option);
}
}
What I mean by 'unable to draw focus frame' is that when you click a standard widget that accepts focus (let's say QLineEdit), it has a blue rectangle drawn around it. When I click my widget there is no such rectangle drawn. Are there any more things I should do besides setting focusPolicy on my widget?
It might have something to do with the style your app is using. When I try your code with the "gtk" and "cleanlooks" style, no focus rectangle is drawn. With "plastique" and "windows" it is. Since I'm on Linux, I cannot test "windowsxp" and "macintosh". Try running with the -style option and see what happens.
try also
setFocusPolicy(Qt::StrongFocus);
setAttribute( Qt::WA_MacShowFocusRect);

Resources