How to put a plus sign in the background of an app

[tomy]

Hi all,

At the first steps of reading about Qt Quick, I did this example. And this time I want to manipulate it a little.
I want to put a big plus sign (+) on the background of the app, so that the bubble can stand on the middle of it when it's also in the middle of the page.

I thought about it and did some tasks to get what I want. But when I run the app by Desktop kit, no sign of the plus mark (a row and a column) is shown.

Would you please tell me the correct way of adding that "+" sign and have it work as needed?

Thanks.

[VRonin]

inside MainForm { add

Image {
source: "PlusSign.svg"
anchor.horizontalCenter = mainWindow.horizontalCenter 
anchor.verticalCenter = mainWindow.verticalCenter
width = mainWindow.width / 5
height = width 
}

[tomy]

so firstly I need an XML file to define that sign, not?

For example it's of the bubble (BTW, I made it a little bigger —r from 42 to 62):

<?xml version="1.0"?>

 <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
   <defs>
     <radialGradient id="grad1" cx="0.5" cy="0.7" r="0.7" fx="0.5" fy="0.4">
        <stop offset="0" style="stop-color:rgb(255,255,255)" />
        <stop offset="1.5" style="stop-color:rgb(0,102,153)" />
     </radialGradient>
   </defs>
   <circle cx="100" cy="80" r="62" fill="url(#grad1)"/>
 </svg>

[tomy]

Do I need to create an XML file, say, named "PlusSign.svg" please?
And is yes, how to do it so that it yields that Plus Sign for my app?

[Schluchti]

You don't need any XML. You can create a plus symbol either by drawing it yourself with QML or embedding a image of a plus symbol.

For now, it's probably easier, if you go for the image approach, as it's slightly easier to accomplish.

You basically need to to do the following:

• get a image of a plus symbol
• add that image to your resources file. (see the section "Adding Resources" here http://doc.qt.io/qtcreator/qtcreator-accelbubble-example.html)
• Now you can use the code snippet that @VRonin provided you. (you may need to adapt the source name )

[VRonin]

@Schluchti said in How to put a plus sign in the background of an app:

You don't need any XML

Technically SVG is XML, the code posted above by @tomy , for example, is a circle with a 3D effect

[Schluchti]

@VRonin Should have taken a better look at it. Looked a bit like a XML layout at first glance. Sorry!