Problem using Filters and Sprites in a StageGL context - createjs

First of all, sory my English.
I am working with some sprites using WebGL on CreateJS library. I need apply a custom color filter over the jpg used to create the spritsheet.
Here is my code:
let bmp = new createjs.Bitmap(rscTexture);
bmp.filters = [new createjs.AlphaFilter()];
bmp.cache(0, 0, rscTexture.width, rscTexture.height, {1, useGL:"stage"});
let frames = this.generateFrames();
this.sprite = new createjs.Sprite( new createjs.SpriteSheet({
framerate: 24,
"images": [bmp.cacheCanvas],
"frames": frames,
"animations": {
"run": [0, frames.length - 1],
}
}));
The problem is that this trow next error:
ERROR Cannot use 'stage' for cache because the object's parent stage
is not set, please addChild to the correct stage.
How can I add the element to the stage first, if I still do not create it?

If you have a StageGL instance that already exists, you can pass it in directly instead. The "stage" shortcut attempts to figure it out; however, sometimes you need to be specific and directly passing the reference is the only solution.
bmp.cache(0, 0, rscTexture.width, rscTexture.height, 1, { useGL: myStage });
The specific and full documentation can be found here:
https://createjs.com/docs/easeljs/classes/BitmapCache.html#method_define

Related

Is it possible to control which layers are in front on deck.gl?

On Leaflet, when I create a layer from a GeoJSON, I have a way of controlling which layer is shown in front of the map by looping the layer features and then using a function like feature.bringToFront(). The result is like the following:
On deck.gl however, after creating my layers from a GeoJSON, it's hard to tell which layer is in front of the map... The following image is the same example made with deck.gl instead of Leaflet.
So, is there any way of controlling the feature that I want to show in front with deck.gl? I know I could change the elevation when the view of the map is from above, but in this case, it's not a good solution when I'm navigating through the 3D map. Is it possible to do on deck.gl? Can I force some specific feature to appear in front of others? Is there any parameter or function that controls that?
Have been working on this for a few hours and from a leafletJs background.
The closest I've gotten to a feature.bringToFront equivalent is that you can order the layers and pass that to the DeckGl component, a description from the deck.gl documentation is here:
https://deck.gl/docs/developer-guide/using-layers#rendering-layers
The below works for me, however, it seems to work only for layers of the same type. In the example below, if I add a LineLayer type at index 0 of the layers array below, it will render in front of the two SolidPolygonLayer's below.
const layers = [
new SolidPolygonLayer({
id: 'at array index 0 and appears in the background',
data: helper.getPolygonData(),
getPolygon: d => d.coordinates,
getFillColor: d => [255, 0, 0],
filled: true,
}),
new SolidPolygonLayer({
id: 'at array index 1 and appears in the foreground',
data: helper.getPolygonData(),
getPolygon: d => d.coordinates,
getFillColor: d => d.color,
filled: true,
}),
];
return (
<DeckGL
layers={layers}
viewState={getViewState()}
onViewStateChange={e => setViewState(e.viewState)}
initialViewState={INITIAL_VIEW_STATE}
controller={true}
getTooltip={getTooltip}
>
...
</DeckGL>
);

Root.Js: how to pass parameters to THttpServer?

I am using root.js and querying a fixed TH2I via JavaScript
<script type='text/javascript'>
var histo;
JSROOT.httpRequest("https://subdomain.doamin.xx/root/Objects/subfolder/histo/root.json", 'object')
.then(obj => {
histo = JSROOT.parse(obj);
histo.fName = "2D";
JSROOT.redraw('object_draw', histo, "lego2");
console.log(obj)
})
</script>
At the backend I am doing (in Python):
serv = ROOT.THttpServer("http:8080")
serv.CreateServerThread()
histo = ROOT.TH2I('h1', '', 320, 0, 320, 320, 0, 320)
histo.SetName("histo")
histo.SetBinContent(40, 50, 5)
serv.Register("subfolder", histo)
Now I want to pass parameters to the THttpServer to generate dynamical histograms e.g. by parsing the filename of a (non root) data file as data source.
The documentation of THttpServer::RegisterCommand() mentioned parameters, corresponding I did:
hpx = Hpx()
serv.RegisterCommand('/test', '/hpx/.notify(arg1%,\'arg2%\')')
where Hpx is some class providing a notify function taking 2 parameters.
I tried call this by
https://subdomain.doamin.xx/root/Objects/test/root.json?arg1=1&arg2=2
But Hpx::notify is not getting called.
There is also the kind post_data in JSROOT.httpRequest but then the THttpServer should not return (JSon) data.
One should use cmd.json request. root.json returns JSON representation of requested object.
You can find more details in THttpServer documentation
For the future - please submit question about ROOT framework to ROOT forum.
See ROOT forum.
self.__serv.RegisterCommand('/Folder/Start', TPython::Exec("do_something(\'%arg1%\')")') # for strings
self.__serv.RegisterCommand('/Folder/Start', 'TPython::Exec("do_something(%arg1%)")') # for integers / floats
def do somethings(arg1) needs to be outside the class.

Why does data in list1 changed automatically when I change the data in the other list2 which is cloned from the list1? Using Vue.Draggable

I am using Vue.Draggable in my Vue project and trying to drag(clone) a button from sider into a draggable component.
I want to modify the data when I clone the button into the component. But I find that when I modify the data in the list which is binded with the component, the original list that sider used got changed automatically.
Is there some kind of synchronization mechanism in Vue.Draggable or something? I want to change the object data in the component only.
I tried to modify the object in the list2 manually by using a vue extension in Chrome browser. And it still happens. So I think maybe it's not bug in my code.
addEntity (conditionID, entity) {
if (!entity.forChoose) {
}
else {
let variable = 0;
for (let i = 0, len = this.whens.length; i < len; i++) {
if (this.whens[i].entity[0].id == entity.id) {
variable++;
}
}
this.whens[conditionID].entity[0].forChoose = false;
this.whens[conditionID].entity[0].variable = variable;
this.whens[conditionID].entity[0].name = entity.name + '-fake';
}
},
The code above is the event when I drag the data into the component, and changed some variable.
Although I did nothing to the original data in the Sider where I cloned the data from, it still got changed as well.
Is there a way to change the dragged data but do not affect the original data?
Please help me, thank you!
I think this is happening because of the immutability.
so can you try using spread operator to create new shallow copy of your list before you change it.
how to use spread operator (triple dot)
let newArrayOfWhens = [...this.whens]
then use the "newArrayOfWhens" array in your code
You can create a deep clone as well if you want, but try to avoid it if it is not necessary.
you can use a library call "lodash" to do it very easily
deepClone

Cytoscape.js move nodes to allow for pasted nodes

I have to provide a copy/paste functionality using the dagre layout. The idea is the user copies a node and where ever they decide to "paste" it, the hierarchy of nodes copied, will be created there. This would mean that all nodes in the way would have to move.
I first thought maybe I could call layout again but that doesn't "fit" them in.
I'm still learning cytoscape.js so if this is a simple question, please excuse me.
This would be something quite hard to achieve, so hear me out:
First step:
Cytoscape has a extension called context-menus (demo)
Another extension is called clipboard (demo)
make yourself familiar with these two
Second step:
create your graph with these two extensions and a dagre graph
when you copy these nodes, make the copy function behave like this:
add the nodes with their edges in the right hierarchy
when you right click on a node, add a insert into hierarchy function, which adds the copied nodes into the graph
Code examples:
var options1 = {
// List of initial menu items
menuItems: [
{
id: 'addToHierarchy',
content: 'Add to hierarchy',
tooltipText: 'Add nodes to hierarchy here',
selector: 'node',
onClickFunction: function () {
// your handlerFunction
},
disabled: false
}
]
};
var instance = cy.contextMenus( options1 );
var options2 = {
clipboardSize: 0,
// The following 4 options allow the user to provide custom behavior to
// the extension. They can be used to maintain consistency of some data
// when elements are duplicated.
// These 4 options are set to null by default. The function prototypes
// are provided below for explanation purpose only.
// Function executed on the collection of elements being copied, before
// they are serialized in the clipboard
beforeCopy: function(eles) {},
// Function executed on the clipboard just after the elements are copied.
// clipboard is of the form: {nodes: json, edges: json}
afterCopy: function(clipboard) {},
// Function executed on the clipboard right before elements are pasted,
// when they are still in the clipboard.
beforePaste: function(clipboard) {},
// Function executed on the collection of pasted elements, after they
// are pasted.
afterPaste: function(eles) {}
};
var clipboard = cy.clipboard(options2);

Gmaps4Rails v2 - removeMarkers() not working after calling addMarkers()

I have a function responsible for hiding/showing markers, so I decided to use removeMarkers() and addMarkers() with a variable which contains all markers displayed on map, preventing AJAX requests. However, removeMarkers() appears to not working when used after addMarkers() function:
#/assets/javascript/general.js.coffee
#buildMap = (markers)->
provider = Gmaps.build(
'Google',
{
builders: { Marker: RichMarkerBuilder},
markers:
clusterer:
gridSize: 50
styles: [
url: "/assets/cluster.png"
textSize: 15
width: 56
height: 56
]
}
)
Gmaps.handler = #clustereredHandler()
Gmaps.handler.buildMap {
provider: provider,
internal: {id: 'map'} }, ->
Gmaps.markers = _.map(markers, (marker_json) ->
marker = Gmaps.handler.addMarker(marker_json)
_.extend marker, marker_json
marker
)
Gmaps.map = Gmaps.handler.getMap()
Gmaps.handler.bounds.extendWith(Gmaps.markers)
Gmaps.handler.fitMapToBounds()
#app/views/stores/index.html.erb
buildMap(<%=raw #hash.to_json %>);
So, I have:
Handler on Gmaps.handler variable;
All markers on Gmaps.markers variable;
Map on Gmaps.map variable.
Steps to failure:
Load map - OK (All markers loaded correctly);
> Gmaps.handler.removeMarkers(Gmaps.markers) - OK (All markers hidden correctly);
> Gmaps.handler.addMarkers(Gmaps.markers) - OK (All markers shown correctly);
> Gmaps.handler.removeMarkers(Gmaps.markers) - FAILURE! (Markers still being displayed);
I'm using 2.1.2version. Is there any fix for it?
Thanks
According to my plunkr here, there is no bug with gmaps4rails.
I feel like you have an issue with your own functions (maybe dont use extend?) and replace with:
marker.json = marker_json
I cant tell much more since they are not included.
I think the issue is in saving the markers. Whenever you add new markers, you overwrite the old ones. Try
Gmaps.markers.push.apply(Gmaps.markers, Gmaps.handler.addMarkers(Gmaps.markers))
to append the new markers instead.