I have a problem with my assignment.
After receiving data in real time, I can create and show 1 moving object image on a background from C++ to qml using ImageProvider (this is simple and done). However, my assignment requirements: "Click on button to generate dynamically a number of object moving independently (example 3 objects, but it should not be fixed). So I decided to create 3 threads for each item, each thread will be received data and update to image separately. However, my problem is:
In qml file, I must declare a code segment for update a image such:
Image {
id: id_image
source: "image/MyImageProvider/id_image
cache: false
function reload(){
source = "";
source = "image/MyImageProvider/id_image"
}
Connections {
target: MyObject
onSignal_reload:{
id_image.reload()
}
}
How could I do the similar thing when I can not know number of object in advanced? Anyone have idea? Thanks.
You could put the Image Item into a Repeater.
Then subclass the QAbstractItemModel and use this as model for the Repeater.
Take a look at the example at
http://doc.qt.io/qt-5/qtquick-modelviewsdata-cppmodels.html
Related
Following situation:
I'm retrieving data from firestore via LiveData to display it in a RecyclerView like this:
val placesDataSet: LiveData<ArrayList<Pair<String, PlaceModel>>> = db.getCollection("places")
PlaceModel has a property previewImageUrl: String which will be passed to Picasso image library inside the RecyclerView.Adapter.
After retrieving the "place" information (which is an ArrayList of Pair<documentId: String, place: PlaceModel I want to get the previewImageUrl from Firebase Storage in the next step and map it to corresponding PlaceModel object before displaying it in the RecyclerView.
The storage data structure is as follows: images/$documentId/preview_image.jpg and therefore I need to get the place information (because of documentId) first to identify the right image folder.
How can I handle this using Transformations? I have also a function called getDownloadUrl(path: String): MutableLiveData<Resource<String>> which returns the downloadUrl for provided path from storage.
What I've tried till now is:
val dataSetFinalState = Transformations.map(placesDataSet) {
mapDownloadUrl(it)
}
private fun mapDownloadUrl(arrayList: ArrayList<Pair<String, PlaceModel>>):
ArrayList<Pair<String, PlaceModel>> {
arrayList.forEach {
it.second.previewImageUrl = // How to call getDownloadUrl(path: String) here and wait for response?
}
return arrayList
}
Unfortionally I couldn't solve this problem with Transformations so I decided to choose another approch. After uploading the preview image I try to get the download url to store this information into database.
The problem with this approch was that I use the image resize extension of firebase with delete original image option. Creating resized images takes a bit time so therefore I had an error in the next step because the image has not been existed. But I solved this problem with retry mechanism.
I can't seem to find any information on this, but does anyone know if it is possible to use an embedded image from my.resources within an ObjectListView SubItem?
I am currently using images stored in an ImageList control, but I find for some reason, those images get corrupted and start displaying imperfections. I don't have the problem if I pull them from the embedded resources as I previously have with the normal listview control.
I am using the ImageGetter routine to return a key reference the ImageList, however, ultimately I would like to pull these from embedded resources. I would like to also do this for animated GIF references as well.
If anyone knows a way, could you please assist. Sample code would be appreciated.
Thanks
You can return three different types from the ImageGetter
int - the int value will be used as an index into the image list
String - the string value will be used as a key into the image list
Image - the Image will be drawn directly (only in OwnerDrawn mode)
So option number 3 could be what you want. Note that you have to set objectListView1.OwnerDraw = true.
If that does not work, an alternative could be to load the images into the ImageList at runtime. There is an example here.
this.mainColumn.ImageGetter = delegate(object row) {
String key = this.GetImageKey(row);
if (!this.listView.LargeImageList.Images.ContainsKey(key)) {
Image smallImage = this.GetSmallImageFromStorage(key);
Image largeImage = this.GetLargeImageFromStorage(key);
this.listView.SmallImageList.Images.Add(key, smallImage);
this.listView.LargeImageList.Images.Add(key, largeImage);
}
return key;
};
This dynamically fetches the images if they haven’t been already fetched. You will need to write the GetImageKey(), GetSmallImageFromStorage() and GetLargeImageFromStorage() methods. Their names will probably be different, depending on exactly how you are deciding which image is shown against which model object.
I'm on ExtJS 4 and using an MVC approach. I've created a simple grid view class, and have added a componentquery type 'ref' to that view in my controller. Within the initial grid view itself I set several columns to be hidden and some to be visible by default. The rendering of the grid with those settings is all working fine.
Then I have a button that, when clicked and based on some other conditions, will make some of the initially hidden grid columns visible. This works as well.
But what I need is a way to later 'reset' the grid to its initial view (with the correct columns hidden/visible, as they were initially).
I've tried various permutations of the following with no effect:
var theGrid = this.getTheGrid();
theGrid.reconfigure(store, theGrid.initialConfig.columns);
theGrid.getView().refresh();
I suppose I could loop through every column and reset its 'hidden' state, but would think there's a way to just 'reset' back to what's set in the class? Advice?
SOLUTION UPDATE
Appreciate the pointer from tuespetre. For anyone coming along in the future looking for specifics, here is what was needed (at least for my implementation):
Within the view, moved the column defs into a variable
Within the view, columns ref within the class becomes:
columns: myColumns,
Within the view, the following function created within the class:
resetGrid: function(){
this.reconfigure(null, myColumns);
},
Within the controller:
var theGrid = this.getTheGrid();
theGrid.resetGrid();
You will just need to create a function on your view class to encapsulate that functionality.
I'm using Dojo dnd version 1.7.2 and it's generally working really well. I'm happy.
My app maintains many arrays of items, and as the user drags and drops items around, I need to ensure that my arrays are updated to reflect the contents the user is seeing.
In order to accomplish this, I think I need to run some code around the time of Source.onDndDrop
If I use dojo.connect to set up a handler on my Source for onDndDrop or onDrop, my code seems to get called too late. That is, the source that's passed to the handler doesn't actually have the item in it any more.
This is a problem because I want to call source.getItem(nodes[0].id) to get at the actual data that's being dragged around so I can find it in my arrays and update those arrays to reflect the change the user is making.
Perhaps I'm going about this wrong; and there's a better way?
Ok, I found a good way to do this. A hint was found in this answer to a different question:
https://stackoverflow.com/a/1635554/573110
My successful sequence of calls is basically:
var source = new dojo.dnd.Source( element, creationParams );
var dropHandler = function(source,nodes,copy){
var o = source.getItem(nodes[0].id); // 0 is cool here because singular:true.
// party on o.data ...
this.oldDrop(source,nodes,copy);
}
source.oldDrop = source.onDrop;
source.onDrop = dropHandler;
This ensures that the new implementation of onDrop (dropHandler) is called right before the previously installed one.
Kind'a shooting a blank i guess, there are a few different implementations of the dndSource. But there are a some things one needs to know about the events / checkfunctions that are called during the mouseover / dnddrop.
One approach would be to setup checkAcceptance(source, nodes) for any target you may have. Then keep a reference of the nodes currently dragged. Gets tricky though, with multiple containers that has dynamic contents.
Setup your Source, whilst overriding the checkAcceptance and use a known, (perhaps global) variable to keep track.
var lastReference = null;
var target = dojo.dnd.Source(node, {
checkAcceptance(source, nodes) : function() {
// this is called when 'nodes' are attempted dropped - on mouseover
lastReference = source.getItem(nodes[0].id)
// returning boolean here will either green-light or deny your drop
// use fallback (default) behavior like so:
return this.inhertied(arguments);
}
});
Best approach might just be like this - you get both target and source plus nodes at hand, however you need to find out which is the right stack to look for the node in. I believe it is published at same time as the event (onDrop) youre allready using:
dojo.subscribe("/dnd/drop", function(source, nodes, copy, target) {
// figure out your source container id and target dropzone id
// do stuff with nodes
var itemId = nodes[0].id
}
Available mechanics/topics through dojo.subscribe and events are listed here
http://dojotoolkit.org/reference-guide/1.7/dojo/dnd.html#manager
I am trying to add children tree nodes to a non-Root node dynamically when it's selected.
This is how I implemented it:
First, I populate my tree with a TreeStore then to dynamically add children tree nodes, I handle it on the itemexpand event in tree Controller.
//pThis is a NodeInterface obj of the selected node
itemexpand: function (pThis, pEOpts) {
//type is an attribute that I added so that I know what type of node that got selected
if (pThis.raw.type === 'Staff' && !pThis.hasChildNodes()) {
var staffNodeAry = [{text:"Teachers", type:"ChildStaff", leaf: false},
{text:"Principals", type:"ChildStaff", leaf: false}];
pThis.appendChild(staffNodeAry);
}
}
This worked quite good because I am able to see both "Teachers" and "Principals" node under "Staff" type but there are 2 issues that I found so far:
1) There's this error on the console:
Uncaught TypeError: Cannot read property 'internalId' of undefined
I don't know why but if anyone could enlighten that would be great.
2) When I expand either "Teachers" and "Principals", the NodeInterface obj that's returned by itemexpand has an undefined raw object.
So I couldn't do this: pThis.raw.type
From my understanding, I don't need to create a new TreeStore to add any new children nodes, I thought that by creating an array of objects that adhere to NodeInterface should be enough but I might be wrong.
If anyone could point me to the right direction, that would be great.
Handi
More info:
What I did was actually following the ExtJs 4 documentation so I believe this is a bug on ExtJs 4 framework.
I also tested this with Extjs-4.1.0-rc3 and it also produced the same error.
I have resolved this issue changing the event itemexpand with the event afteritemexpand. I have no documentation to justify this. The debugger says to me that the view listen for the itemexpand event and do something that goes wrong if add a node manually...
For the question number 2: you have no raw object because it is created by the reader of the store after the load operation. So if you add a node by hand the raw object does not exists.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Model-property-raw
The documentation for .appendChild() functions says:
node : Ext.data.NodeInterface/Ext.data.NodeInterface[]
The node or Array of nodes to append
And you are trying to append an array of 2 objects, but they are not "NodeInterface" instances. So you should create them properly like so:
var nodeToAppend1 = pThis.createNode({text:"Teachers", type:"ChildStaff", leaf: false});
pThis.appendChild(nodeToAppend1);
I remember making the same mistake a year ago, so I hope this helps.
I think it happens because your Ext.TreePanel working asyncroniously. So add process is:
Append Child, add virtual child leaf to your tree, with red mark in corner
Call store's create api
Receive response, if it success=true, change with virtual
The goal of changing is set internakId property, so you can add new child only after this change happens. I think better is write some recursive function and bind it to store's added event
tree.getStore().on('update', addChild);
or
tree.getStore().load({
success: function() {
addChild()
});