[Niyazi]

Hi,

 

I have picture and canvas in main qml.

It shows as expected on Android (samsung edge 7s) and not ios10 (iphone 5). Whey is that? How to corrected? The logo comes expected on android but on iOS

there is a big white gap. Also the portrait orientation is not working bot OS. Any help please?

Here is the part of the code.

 

{
    "title": "**********",
    "identifier": "com.***********",
    "orientation": "portrait",       // This part is not working in both OS.
    "versioncode": 1,
    "versionname": "1.0",
    "stage": "test"
} 

 

Main.qml

 

 
<div>import Felgo 3.0
import QtQuick 2.0
import QtGraphicalEffects 1.0</div>
<div>App {
id: root
licenseKey: “F039627A2C4E281D0EB9C3********************”</div>
<div>    onInitTheme: {
Theme.platform = “ios” // always use ios theme</div>
<div>        settings.language = “tr_TR”
uiScale: 1  // 1 for Mobiles 2 for Desktops</div>
<div>    }</div>
<div>    FontLoader {
id:fontAwesome;
source: “../qml/fonts/fontawesome-webfont.ttf”
}</div>
<div>    Loader{
active: root.portrait
}</div>
<div>    NavigationStack {</div>
<div>        Page {
id: rootPage
navigationBarHidden: true
anchors.fill: parent</div>
<div>            // MAIN BACKGROUND TEMPLATE
Canvas {
id:secCanvas
anchors.fill: parent
anchors.topMargin: dp(27)
antialiasing: true
renderTarget: Canvas.Image</div>
<div>                onPaint: {
var ctx = getContext(“2d”)
ctx.beginPath()
ctx.moveTo(0, 70)
ctx.lineTo(0, root.height / 3)
ctx.lineTo(root.width / 2, root.height / 2.80)
ctx.lineTo(root.width, root.height / 3)
ctx.lineTo(root.width, 70)
ctx.fillStyle = “#9ec428”
ctx.fill()
}
}</div>
<div>            // CAPITALBANK LOGO
Image {
id: capitalLogo
fillMode: Image.PreserveAspectFit
source: “../assets/CapitalLogo.png”
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: dp(25)
width: dp(160)
antialiasing: true
clip: true
}</div>
<div>            // CAPITAL LOGO GLOW EFFECTS
Glow {
id: logoGlow
anchors.fill: capitalLogo
radius: 6
samples: 6
color: “white”
width: dp(160)
source: capitalLogo
}
}
}
}</div>
 
<div></div>
 

 

 

 

 

 

 

 

 

 

 

[GüntherFelgo Team]

Hi,

I answered the question about portrait / landscape here: https://felgo.com/developers/forums/t/how-to-make-app-orientation-to-always-to-be-portrait#post-18041

What exactly does not work when running your app on iOS? Is you logo image visible when displaying it without other features like the canvas?

Also: Please use the QML code embed feature of the forum (“Code button above”) to paste your code. As you have it now, it is not readable at all with wrong formatting and <div> tags, which hard for us to test and read.

Best,
Günther

[Niyazi]

Thanks Günther.

Yes you are right. But sometimes the “Code” button is not working. I am using Microsoft Edge as internet explorer. I give details in my previous post about the orientation (= always to be potrait) that is not working.

 

For the ios part:

I set my top margin for canvas as shown below. Its looks good on android (samsung edge 7). But for ios (iphone 5) this looks very different. It shows top margin 2 or 3 times bigger than my setting.

 

 

 

// MAIN BACKGROUND TEMPLATE
 Canvas {
 id:secCanvas
 anchors.fill: parent
  anchors.topMargin: dp(50)
 antialiasing: true
 renderTarget: Canvas.Image

 

 

Ps: Now the code didnt worked again. And now I choose the top EDIT button to set the “code” again.

 

 

 

 

 

 

[GüntherFelgo Team]

Hi Niyazi,

Are you using the Felgo Live app for testing, or do you create your own iOS Build with the iOS Build Kit?

Do you get a different result when specifying the Canvas anchors like this:

// MAIN BACKGROUND TEMPLATE
 Canvas {
 id:secCanvas
 anchors.top: parent.top
 anchors.topMargin: dp(50)

 anchors.bottom: parent.bottom
 anchors.left: parent.left
 anchors.right: parent.right

 antialiasing: true
 renderTarget: Canvas.Image

 

 

[Niyazi]

Thanks Günther,

Yes is working when I use your code. Both Samsung and iPhone shows same.

Yes I am using the Felgo Live.

Kind Regards