I'm using cytoscape.js with the arbor layout. Is there a way to manually stop the layout rendering ? In the doc i saw a 'layoutstop' event but no way to actually stop the layout.
Thanks
Here is how I worked around the problem if someone's interested : I just put a global stop_layout var in the stableEnergy function. Ugly but it works. Yay!
var stop_layout = false;
layout_params = {
name: 'arbor',
stableEnergy: function(energy){
var e = energy;
return (e.max <= 0.5) || (e.mean <= 0.3) || stop_layout;
}
};
// Then change the stop_layout value when you want to run or stop layout processing
layoutstop is an event to indicate that the layout has stopped running. Arbor includes a maxSimulationTime option so you can stop the layout early: http://cytoscape.github.io/cytoscape.js/#layouts/arbor
Related
Here I want to write a script that can stabilize the time lapse sequence by adding Warp Stabilizer VFX, then followed by deflicker using DEFlicker Time Lapse, and finally render and export the video, which runs before sleeping so that it does not slow down my computer at working time. However, I cannot find the API that adds effects to a layer in AE scripting documentation, does anyone knows how to do this? thanks in advance!
You can add effects to the layers like this:
if (!theLayer.Effects.property("Warp Stabilizer")){ //add only if no such effect applied
var theEffect = theLayer.property("Effects").addProperty("Warp Stabilizer"); // the regular way to add an effect
}
To test it you can add it to selected layer, full code to apply it to the selected layer can look like this:
var activeItem = app.project.activeItem;
if (activeItem != null && activeItem instanceof CompItem) { // only proceeds if one comp is active
if (activeItem.selectedLayers.length == 1) { // only proceeds if one layer is selected
var theLayer = activeItem.selectedLayers[0];
if (!theLayer.Effects.property("Warp Stabilizer")){
var theEffect = theLayer.property("Effects").addProperty("Warp Stabilizer"); // the regular way to add an effect
}
}
}
Solution is based on adobe forum: https://forums.adobe.com/thread/1204115
In titanium it is possible to hide a view like so:
$.foo.hide()
or
$.foo.visible = false
However, in both cases the object still seems to take physical space. It is just invisible. In other words it is similar to the CSS property visibility: hidden.
I want it so that it disappears and take no physical space in terms of width or height, so it's similar to the CSS property display: none
How can I do this?
The best hacky solution I have is the following:
$.foo.width = 0;
$.foo.height = 0;
$.foo.left = 0;
$.foo.right = 0;
But that means when I want to make it visible again, I have to set all those properties back to their original values which is a pain and hard to maintain.
First of all, don't afraid of doing some hard coding ;)
Coming to your query, yes, this is true that hiding a view just hide it from UI, but physical-space is still there.
To do what you want, you will need to either remove view on hide & create it on show, or you can use absolute layout in some tricky way.
Other way could be to animate this view using transform property like this:
// on hide
$.foo.animate({
duration : 100,
transform : Ti.UI.create2DMatrix({scale:0})
}, function () {
$.foo.visible = false;
});
// on show
$.foo.visible = true; // we need to make it visible again before resetting its UI state since we hid it after completion of animation in above code
$.foo.animate({
duration : 100,
transform : Ti.UI.create2DMatrix() // passing empty matrix will reset the initial state of this view
});
OR
this could also work but never tried this:
// on hide
$.foo.transform = Ti.UI.create2DMatrix({scale:0});
$.foo.visible = false;
// on show
$.foo.visible = true;
$.foo.transform = Ti.UI.create2DMatrix();
I'm trying to create functionality very similar to most websites these days.
The concept is 3 sections the size of the browser, the background images are supposed to be fixed positioned and revealed by the div scrolling up and down.
We need this to function as beautifully on mobile as it does on desktop, and it looks like Famous/angular is the solution.
Here is a pen.
http://codepen.io/LAzzam2/pen/XJrwbo
I'm using famous' Scroll.sync, firing javascript that positions the background image on every start / update / end.
scrollObject.sync.on("update", function (event) {
console.log('update');
test(event);
});
here is the function positioning the backgrounds.
function test(data){
var scroller = document.getElementsByClassName('famous-group');
styles = window.getComputedStyle(scroller[0], null);
tr = styles.getPropertyValue("-webkit-transform").replace('matrix(1, 0, 0, 1, 0,','').replace(')','');
var distanceTop = -(parseInt(tr));
var sections = document.getElementsByClassName('section');
sections[3].style.backgroundPosition="50% "+distanceTop+"px";
sections[4].style.backgroundPosition="50% "+(-(window.innerHeight)+distanceTop)+"px";
sections[5].style.backgroundPosition="50% "+(-(window.innerHeight*2)+distanceTop)+"px";
};
Any input / suggestions / advice would be wonderful, really just looking for a proof of concept with these 3 background images scrolling nicely.
That jittery-ness is unfortunate, I can't tell what would be causing the issue, except maybe the order in which events are fired?
**There are known issues, only works in -webkit browsers as of now
I think your idea to use Famous is good, but probably what I would do, would be taking a different approach to the problem.
You are solving this by touching the DOM, that is exactly what both Angular and Famous are meant to avoid.
If I had to face the same goal, I would probably use a Famous surface for the background instead of changing the property of the main one and synchronize its position with the scrolling view.
So, in your code, it would be something like this:
function test(data){
var scrollViewPosition = scrollObject.getAbsolutePosition();
var newBackgroundPosition = // Calculate the new background position
var newForegroundPosition = // Calculate the new foreground position
var backgroundSurface = backgroundSurface.position.set(newBackgroundPosition);
var foregroundSurface = foregroundSurface.position.set(newForegroundPosition);
};
I'm creating a seemingly simple dojo 1.8 web page which contains an app layout div containing a tab container and an alarm panel below the tab container. They are separated by a splitter so the user can select how much of the alarms or the tabcontainer they want to see.
Here's the example on jsfiddle:
http://jsfiddle.net/bfW7u/
For the purpose of the demo, there's a timer which grows the table in the alarm panel by an entry every 2 seconds.
The problem(s):
If one doesn't do anything and just lets the table grow, no scroll bar appears in the alarm panel.
If one moves the splitter without having resized the browser window first, the splitter handle ends up in a weird location.
Resizing the browser window makes it behave like I would expect it to begin with.
Questions:
Am I doing something wrong in the way I'm setting things up and that's causing this problem?
How can I catch the splitter has been moved event (name?)
How do I resize the splitter pane to an arbitrary height? I've tried using domStyle.set("alarmPanel", "height", 300) and this indeed sets the height property... but the pane does not resize!
Any help greatly appreciated!
I forked your jsFiddle and made some modifications to it: http://jsfiddle.net/phusick/f7qL6/
Get rid of overflow: hidden in html, body and explicitly set height of alarmPanel:
.claro .demoLayout .edgePanel {
height: 150px;
}
This tricky one. You have two options: to listen to splitter's drag and drop or to listen to ContentPane.resize method invocation. Both via dojo/aspect:
// Drag and Drop
var splitter = registry.byId("appLayout").getSplitter("bottom");
var moveHandle = null;
aspect.after(splitter, "_startDrag", function() {
moveHandle = aspect.after(splitter.domNode, "onmousemove", function() {
var coords = {
x: !splitter.horizontal ? splitter.domNode.style.left : 0,
y: splitter.horizontal ? splitter.domNode.style.top : 0
}
dom.byId("dndOutput").textContent = JSON.stringify(coords);
})
});
aspect.after(splitter, "_stopDrag", function() {
moveHandle && moveHandle.remove();
});
// ContentPane.resize()
aspect.after(registry.byId("alarmPanel"), "resize", function(duno, size) {
dom.byId("resizeOutput").textContent = JSON.stringify(size);
});
Call layout() method after changing the size:
registry.byId("alarmPanel").domNode.style.height = "200px";
registry.byId("appLayout").layout();
can anyone please explain, with an example if possible, how to load dynamic content inside an iscroll div and assign a new height to it?
I can get it to work but I can't control the height of the scroll for the new content.
I'm new to all this and have no clue were to start.
here's what I'm working on:
http://homepage.mac.com/jjco/test/index7.html
when the page is loaded you see the scroll bar where there's no content...
clicking on print/damm (shows the height I originally set for this content)
clicking on print/fcbarcelona (maintains the same height and position of the scroll you used before) as you see it's not working as it should.
obviously, I don't want the scroll to be there when it's not necessary.
any help would be greatly appreciated.
It's better to use the refresh() method in iScroll, which will recalculate the height.
myScroll.refresh();
I had a similar problem, and just refresh() didn't help, so didn't help destroying and recreating iScroll. In my case I was loading a lot of elements into iScroll div. What did solve the problem is setTimeout(). As MASTERING THE REFRESH() METHOD said adding even 0ms to a setTimeout() would solve a lot of problems. In my case it was 500ms. =
here is code sample:
var myScroll;
function createIScroll(){
myScroll = new iScroll('wrapper');
}
function iScrollRefresh(){
setTimeout(function(){
myScroll.refresh();
}, 500);
}
$ajax(){
//receiving data
}
function someFunction(){
//dynamic content is created
iScrollRefresh();
}
My problem was that refresh() function was executed before content was inserted into DOM, so increasing timeout helped. I hope it helps to beginners like me.
try this, when you insert your new data into iScroll do these steps
//myScroll is a global variable you initialize iScroll on
myScroll.destroy();
myScroll = null;
loaded();//this is a functions where you have have your iScroll initializer
To watch height changes:
setInterval(function () {
var newScrollerHeight = $scroller.innerHeight();
if (newScrollerHeight !== prevScrollerHeight) {
prevScrollerHeight = newScrollerHeight;
myScroll.refresh();
}
}, 500);
Take a look at iScroll4
In iscroll.js, I see experimental option: checkDOMChanges: false,// Experimental You can enable and use it.