Displaying only the right part of an image in QML - sourceClipRect - image

I'm trying to display only the right part of an image in QML by using the sourceClipRect property
Here is a snippet of the code
Image
{
id : _image
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectCrop
width: parent.width
height: parent.height
sourceSize.width : undefined
sourceSize.height : undefined
source : imagePath
sourceClipRect: Qt.rect(sourceSize.width/2, 0, sourceSize.width/2, sourceSize.height)
smooth : true
mipmap : true
}
This image is inside an item with a fixed Width and Height
This gives me a warning and a binding loop on the property sourceClipRect, I'm guessing from using sourceSize in the sourceClipRect
I cannot use hard numbers in the sourceClipRect, as I don't know the original size of the picture
Do you know how can I avoid this binding loop ?
Maybe by getting the original width and height another way, but I don't know any other way than sourceSize in pure QML
Ps : The results works as expected and is working fine, i just have an ugly warning stating a binding loop
Thanks a lot in advance

I finnaly found a fix for this that is acceptable.
It is maybe not the cleanest but it's acceptable for me.
But at the instanciation of the image i just save the var without the binding like so
Image
{
id : _image
property var sourceSizeWidth :{sourceSizeWidth = sourceSize.width} //initializing this way avoids the binding between sourceSize.Width and sourceSizeWidth
property var sourceSizeHeight :{sourceSizeHeight = sourceSize.height} //initializing this way avoids the binding between sourceSize.height and sourceSizeHeight
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectCrop
width: parent.width
height: parent.height
sourceSize.width : undefined
sourceSize.height : undefined
source : imagePath
sourceClipRect: Qt.rect(sourceSizeWidth/2, 0, sourceSizeWidth/2, sourceSizeHeight) //Use the unbinded var to set the sourceClipRect
smooth : true
mipmap : true
}
Doing an initialization like this avoid the binding between newly created sourceSizeWidth and QML property sourceSize.width
property var sourceSizeWidth :{sourceSizeWidth = sourceSize.width}
As I said, not the cleanest and there is probably a smarter way of doing it, but it's enough for now, works fine and without warning binding loop.
Cheers !

Related

How to set background color of Phaser 3 Game during runtime?

I am new to Phaser 3 Framework , but have expertise in Angular/Ngrx.
Currently , I am creating a Custom Phaser 3 Game Editor using Angular/Ngrx. Need to modify background color of the Phaser 3 Game at run time.
In Phaser 2+ version ,
Below code set background color of the game ,
game.stage.backgroundColor = "#4488AA";
But how to set game background color in Phaser 3 irrespective of scene ?
Do we need to set via Camera like below?
this.cameras.main.setBackgroundColor(0xbababa)
Please guide me.
If you want the same background color regardless of the active scene, Phaser 3 has a backgroundColor property in the GameConfig object. You can see the documentation here and a working version here.
const config = {
type: Phaser.AUTO,
width: 600,
height: 700,
backgroundColor: '#4488aa',
scene: {...}
};
You also have the option of creating a transparent canvas for the game and using a div underneath it to change the background color. To do this, you'll use the transparent property of the GameConfig object. You'll also want to make sure you use the parent property as well with a corresponding <div id="gameContainer"></div> in the HTML to make it easier to grab and modify the color beneath the canvas.
const config = {
type: Phaser.AUTO,
width: 600,
height: 700,
parent: 'gameContainer',
transparent: true,
scene: {...}
};
Then, in the create method, you'll grab that parent item and modify the color:
create() {
var div = document.getElementById('gameContainer');
div.style.backgroundColor = "#4488AA";
}
You can see a working version here.

How do I make an image its actual size up to a certain point in a window? Extjs 6 classic

I want to have a window xtype that contains just an of its own size but when I show my window, it shows up as a tiny square in the middle of the screen (not the actual size of the image). I've tried using this block of code
listeners:{
afterrender: function(me){
me.el.on({
load: function (evt, ele, eOpts){
me.updateLayout();
},
error: function(evt,ele,eOpts){
}
});
}
}
to update the layout of the parent window from within the image xtype, but this makes the window not centered and centering the window during an afterrender event isn't working. Am I missing something simple? I also have the maxWidth and maxHeight configs of the image set to Ext.getBody().getViewSize().width and height respectively.
Sencha had a good reason not to use xtype: 'image' for their own icons etc.
xtype: 'image' only works with fixed width and height, so you can't even preserve aspect ratio, as far as I know.
What you want to do is to have a container and set the background-image of the container.
xtype: 'container',
style: 'background-image: url(\'image.jpg\'); background-repeat:no-repeat; background-position:50% 50%; background-size:contain'
or even just use the window: https://fiddle.sencha.com/#view/editor&fiddle/244n

qml listview image caching doesn't work as expected

I created an list view with images which automatically requests new items when scrolled down. I am using Image component to show the image from url source. the problem is that the images are not cached in memory once they are loaded. I can see them when I scroll down but when I go back up I have to wait for them to be loaded again. Is there a way to fix this? Image component has a property cache but it doesn't do any improvement. I know that in Android this is done in exactly the same way and the images are persisted in memory once downloaded.
here is a sample code:
ApplicationWindow {
visible: true
width: 800
height: 600
id: rootId
property url fullImageUrl
property string tag : "windsurfing"
XmlListModel{
id : modelId
namespaceDeclarations: "declare namespace media = 'http://search.yahoo.com/mrss/';"
source: "http://api.flickr.com/services/feeds/photos_public.gne?format=rss2&tags="+tag
query: "//item[title and media:thumbnail and media:content]"
XmlRole{name:"fullImage"; query:"media:content/#url/string()" }
}
TextField{
id : userValueId
font.pointSize: 14
width: parent.width
height : implicitHeight
placeholderText: "Enter a Flickr Tag"
onEditingFinished: tag = text
}
ListView{
id : listViewId
anchors.fill: parent
anchors.topMargin: userValueId.height + 10
Layout.minimumWidth: 400
Layout.maximumWidth: parent.width - 50
model: modelId
delegate: delegateId
}
Component{
id: delegateId
Rectangle{
id :itemId
height : 300
width : 500
Image{
id : imageId
source : fullImage
anchors.fill: parent
fillMode: Image.Stretch
cache: true
}
}
}
}
How can I cache the graphic items supplied by the model and drawn in
QML ListView?
I would try to use ListView cacheBuffer property which is specified in pixels to fit delegates. If your delegate is of 300 pixels in the scroll direction (say, height and you scroll vertically) then having one delegate per row and 10000 pixels for the "cache buffer" it fits up to 33 delegates then.
ListView {
id : listViewId
anchors.fill: parent
anchors.topMargin: userValueId.height + 10
cacheBuffer: 10000 // pixels in direction of scrolling the view,
// saves a bit of processing just by caching
// delegates content in memory, causes async
// read-ahead for images outside of view area
Layout.minimumWidth: 400
Layout.maximumWidth: parent.width - 50
model: modelId
delegate: delegateId
}
If the amount of memory strictly limited it makes sense to specify reasonably small cacheBuffer e.g. 2 pages of list view to prevent too much read-ahead. The cache is not a guarantee that the data won't be read again. I also had some doubts if using Component is the right way to go with image caching but concluded it should not affect things as long as there is no Loader in the code for that Component that does the load at arbitrary times.
And you can also try to implement own image provider in C++ to explicitly control the image download / caching so the logic will be fully controlled by your code.

KineticJS : get image array id

Here is the problem :
I have a canvas, and four (would be more in future, but 4 for testing...anyway, doesn't matter) images that can be "poped" into the canvas by clicking on it.
Each image can be present multiple times in the canvas.
So far, poping is working fine, images are draggable... But I can't add some resize or zIndex function as I can only select the last image add to the canvas.
In a ideal world, I would like, by clicking/dragging an image, put it on top of the canvas, and kinda "select" it, so that I can connect the resize functions to the image.
But with the array of images, I can't manage to identify properly the item dragged, and can't use (or don't manage to use) the selectors.
Thank you.
EDIT : some code
var imgCpt = 0;
var image = [];
function addDetails(img) {
imgCpt++;
var imageObj = new Image();
imageObj.onload = function() {
image[imgCpt] = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
draggable: true,
id:image[imgCpt]
});
image[imgCpt].setX((stage.getWidth()/2) - (image[imgCpt].getWidth()/2));
image[imgCpt].setY((stage.getHeight()/2) - (image[imgCpt].getHeight()/2));
eval(image[imgCpt]).on('click', function() {
alert(eval(imgCpt));
});
layer.add(image[imgCpt]);
stage.add(layer);
};
imageObj.src = 'uploads/'+img;
}
I've already tried different solutions : multiple layer, and acting on it instead of acting on image, working with shapes filled with image instead of image, but it's always the same problem : I can't get the id of the concerned element (instead of the id of the last insert element)
This version works with array, but I tried yersterday to build the image id with eval(); without more success.
Thank you for your help
EDIT² : sorry to insist, but I would really be glad to have some assistance on this point, even if I think it's more JS related than pure KineticJS related.
Thank you.
Ok Guys, just solved the problem :
eval("image["+imgCpt+"].on('click', function() {alert("+imgCpt+");});");
Instead of :
eval(image[imgCpt]).on('click', function() {
alert(eval(imgCpt));
});
Now time to set a true action behind the click.
Thank you for helping ;)

Appcelerator Titanium - How do I place an image at the bottom of the screen

I have a main view, then on that view I have, as children, two labels and an image. I want the labels to flow one after another from the top of the screen and I want the image at the bottom. I get the labels to flow properly by setting layout:'vertical' in the main window. But once that is done, I can't seem to force the image to the bottom. Here is a snippet of my code:
var self = Ti.UI.createView({
backgroundColor:'#fff',
layout:'vertical'
});
var l1 = Titanium.UI.createLabel({
text:quote,
color:'#000',
shadowColor:'#ddd',
shadowOffset:{x:2,y:2},
font:{fontFamily:'Marker Felt',fontSize:24},
top:20,
left:15,
right:15,
height:'auto'
});
self.add(l1);
var l2 = Titanium.UI.createLabel({
text:author,
color:'#000',
shadowColor:'#ddd',
shadowOffset:{x:2,y:2},
font:{fontSize:16},
top:10,
left:15,
right:15,
height:'auto',
textAlign:'right'
});
self.add(l2);
var imgView = Titanium.UI.createImageView({
image:myimage,
setBottom:10,
height:100
});
self.add(imgView);
I have tried setting the image layout and that doesn't work. If I change the 'self' window layout to 'absolute' then I can't seem to get the labels to flow cleanly after one another. The first label is of variable height so I need them to follow each other.
I am using Titanium 1.82.
Thanks. In advance.
You might need to add another view. The 'base' view would have what you are calling 'self' added at top:0 and height: 'auto'
Then add imgView to 'base' with bottom: 10 (not setBottom like you have).
Just set the bottom:0; position: fixed; i think this will help u to set the image bottom of the screen.. If it still not working means try with Html,Css and Javascript for design it will be very easy.

Resources