Is there an easy way to add a refresh button in glTF?
Or rather reload textures etc?
The way not to do it, would be:
if (gui.reset > 0)
{
console.log("RESET!");
gui.reset = 0;
init();
}
The idea being, not a reset button as such, but a button that changes the texture set,lighting environment,shaders etc. on the same model.
Or is it more practical to load both sets of data and switch between the two?
Related
I need to add back navigation on swipe. I can do that fairly easily by just adding a swipe listener to the page view and calling goBack. But I really would like the animation that goes with it (in Instagram or FB) where as soon as you start dragging your thumb, the page translates to the right and the previous page starts to translate into view. And then once you get to a certain point it actually performs the navigation.
I tried animating the page, as well as the frame to the right figuring since the view isn't being destroyed it might work. But it doesn't display the page Im navigating back to.
Looking for help on how to accomplish this!
I guess you might have come across the other SO thread answering this question natively.
All you have to do is modify the default gesture recogniser on iOS frame.
export function onNavigatedFrom(args: EventData) {
console.log("Adding gesture...");
const frame = (<Page>args.object).frame;
if (frame.ios && !(<any>frame)._gestureRecognizer) {
const controller = frame.ios.controller;
const popGestureRecognizer = controller.interactivePopGestureRecognizer;
const targets = popGestureRecognizer.valueForKey("targets");
if (targets) {
let gestureRecognizer = UIPanGestureRecognizer.alloc().init();
gestureRecognizer.setValueForKey(targets, "targets");
frame.nativeView.addGestureRecognizer(gestureRecognizer);
(<any>frame)._gestureRecognizer = gestureRecognizer;
}
}
}
export function onNavigatedTo(args: EventData) {
console.log("Back to root page, removing gesture...");
const frame = (<Page>args.object).frame;
if (frame.ios && (<any>frame)._gestureRecognizer) {
frame.nativeView.removeGestureRecognizer((<any>frame)._gestureRecognizer);
(<any>frame)._gestureRecognizer = null;
}
}
Playground Sample
I have two p5 sketches, and I want to use them in the same space of a website. So that after clicking a button, the sketches switch. So I made three different files. The first two, are the sketches, and they are wrapped in a function (instance mode). The third sketch is a code written in global mode, because It has the information that loads a button right when the website is first accesed, and it has the information containing what the button is supposed to do: call the other sketches.
The code looks like this:
var playing = false;
var button;
function setup() {
var col = color(185,185,185,150);
button = createButton('Play');
button.position(20,20);
button.parent('black');
button.style("background-color", col);
button.style("padding", "10px 20px");
button.style("font-size", "14px");
button.mousePressed(toggleCanvas); // attach button listener
}
function mousePressed() {
}
function toggleCanvas() {
if (playing) {
if(myp5r){
myp5r.remove();
runSketch();
button.html('Stop');
}else{
runSketch();
button.html('Stop');
}
}else {
if(myp5){myp5.remove();
stopSketch();
button.html('Play');
}else{
stopSketch();
button.html('Play');}
}
playing = !playing;
}
I have been warned, to not mix global and instance mode, although my "common sense" says that it is ok to use a global mode for the button. Because I want it to be loading first, along with the page.
I noticed that weird things happen, though. Like, I get a blank space added beneath the footer, it looks horrible. And, even more worse, button is not appearing in the correct spot in the site. I already ckecked that css has position:relative for example. And the design works in localhost, but not in the site.
Similar to what's being seen here in Google's Material Design Responsive Interaction documentation, I would like to have a button react to being pressed by flashing a color briefly but then returning to the original color gradually.
Can this effect be achieved using the default Xamarin.Forms Button control with a click handler method? Or must a custom renderer be implemented to try and create this effect?
You're looking for the animation methods available on ui components. Essentially you need to add a click handler to your button that runs animations (first your color change, then your gradual fade back using async/await). I have added a link to a sample that animates a size change, but the theory will remain the same.
// add a gester reco
this.GestureRecognizers.Add(new TapGestureRecognizer
{
Command = new Command(async (o) =>
{
await this.ScaleTo(0.95, 50, Easing.CubicOut);
await this.ScaleTo(1, 50, Easing.CubicIn);
if (callback != null)
callback.Invoke();
})
});
I am using the Alloy Diagram Builder to create and display network topology.
I would like to remove default click and drag events attached to each nodes, so viewers would not have the ability "build" diagrams but only view diagrams that I have generated.
http://alloyui.com/examples/diagram-builder/real-world/
I have tried these but it does not work.
// detach click event to all nodes with class aui-diagram-node.
Y.all('.aui-diagram-node').detach("click");
// unbind
$(".aui-diagram-node").each(function(){
$(this).unbind();
});
I believe the event is attached to the container .aui-diagram-builder-drop-container via delegate() and the event would be mousedown.
Merely by accident I found a hack that might work for this. I was adding tooltips to my page on which I had a diagram builder, well apparently the tooltips layer a div over the page and simply set the opacity on it to be clear and the object still resides. After a tooltip had come up i was unable to interact with the piece of the diagram builder the tooltip had popped up over.
So based of this concept, why not try overlaying a div over the entire canvas of the diagram and give it a high z-index so that it sits on top. It should effectively not allow interaction with the canvas.
Yes it's a kludge but it just may work.
To make a DiagramBuilder read-only, you can detach() events from all of its children recursively:
/*
* Readonly the diagram
*/
function ReadonlyDiagram(diagram) {
function detachRecursively(node) {
node.get('children').each(detachRecursively);
// You may also want to set the cursor to the default since it will
// change based on which elements the mouse is over.
// node.setStyle('cursor', 'auto');
// You may want to detach specific events such as 'click' or
// 'mousedown' if you do not want to disable all events.
node.detach();
};
diagram.on('render', function (event) {
detachRecursively(diagram.get('boundingBox'));
});
}
Now, you must be post diagramBuilder object to ReadonlyDiagram function like below codes:
YUI().use('aui-diagram-builder', function (y) {
var diagram = new y.DiagramBuilder(
{
availableFields: data,
boundingBox: '#' + containerId,
fields: nodes,
srcNode: '#' + builderId
}).render();
diagram.connectAll(connections);
if (callBackDiagram !== undefined) callBackDiagram(diagram);
if(isReadonly === true) ReadonlyDiagram(diagram);
});
});
Reference
I have created a tilelist and each tile of tile list is a canvas where graphics is drawn on rollover. When mouse is rolled out from that particular canvas the graphics drawn has to be removed. So I am doing graphics.clear but not able to remove the graphics.
Code
protected function canvas1_updateCompleteHandler(event:FlexEvent):void
{
var allowHighLight:Boolean = QzGridImpl(this.owner).m_bEnableHighLight;
if(!allowHighLight)
return;
var highLighted:Boolean = TileList(this.owner).isItemHighlighted(this.data);
if(highLighted)
{
high = true;
DrawBackgroundImage(QzGridImpl(this.owner).m_strBackgroundImage as String);
}
//when highlighted becomes false the below part is called
else
{
if(high)
{
this.graphics.endFill();//and cleanly im observing that endfill and clear is getting called and they are able to clear graphics when mouse is rolled out slowly but not able to clear when mouse is rolled out fast.
trace("endfill");
this.graphics.clear();
trace("clear");
}
}
private function DrawBackgroundImage(n_strBackImg:String):void
{
//code for drawing the background image
}
and cleanly I am observing that endfill and clear is getting called and they are able to clear graphics when mouse is rolled out slowly but not able to clear when mouse is rolled out fast.
What need to be done to make it working?
You could create a custom ItemRenderer for the TileList, and apply the image effect when the rollover is triggered in the itemRenderer (by adding a rollOver listener to the renderer). That might work - and is probably a neater way of doing it too.