jumping of modules

[kclemen]

Hi,

When using the hide/show function the new function jumps from the bottom to the top.
Rather difficult to explain, but I made a movie about it. Sorry for the moving around…

Youtube, jumping of modules.

What would be a solution to immediately show the new module on the top?

[tidus5]

@kclemen not sure im right

but are you using the hide() show() ?
from your own module ?

[kclemen]

The code I’m using is in my “skywriter” module:

Module.register("MMM-skywriter",{
	
	// Default module config.
	defaults: {
		gesture_up: 0,
		gesture_right: 0,
		
	},

	// Override socket notification handler.
	socketNotificationReceived: function(notification, payload) {
		if (notification === "gesture_observed"){
			
			console.log ("socketnotificationreceived.");
		
			//self.sendNotification(notification, payload);
			
			if (payload === "up"){
				if (this.config.gesture_up == 0) {
						
						MM.getModules().withClass(this.config.defaultClass).exceptWithClass(this.config.everyoneClass).enumerate(function(module) {
							module.hide(1000, function() {
								Log.log(module.name + ' is hidden.');
							});
						});
				
						MM.getModules().withClass("class_up_1_show").enumerate(function(module) {
							module.show(1000, function() {
								Log.log(module.name + ' is shown.');
							});
						});
						
						this.config.gesture_up = this.config.gesture_up+1;
						console.log (this.config.gesture_up);

						console.log("gesture_up is nu 1");
				}
				else if (this.config.gesture_up == 1) {
						this.config.gesture_up = this.config.gesture_up+1;
						console.log (this.config.gesture_up)
						console.log("gesture_up is nu 2");
				}
			}
			else if (payload === "left"){
				console.log("test - left");
			}
			else if (payload === "down") {
				console.log("test - down");
				
				if (this.config.gesture_up == 1){
					this.config.gesture_up = this.config.gesture_up-1;
					
					MM.getModules().withClass("class_up_1_show").enumerate(function(module) {
						module.hide(1000, function() {
							Log.log(module.name + ' is hidden by gesture.');
						});
					});
					
					MM.getModules().withClass(this.config.defaultClass).exceptWithClass(this.config.everyoneClass).enumerate(function(module) {
							module.show(1000, function() {
								
								
								
								Log.log(module.name + ' is hidden.');
							});
						});
					
				}
				else if (this.config.gesture_up == 2){
					this.config.gesture_up = this.config.gesture_up-1;
					console.log("gesture up is terug 1");
				}
			}
		}
	},
	
	notificationReceived: function(notification, payload, sender) {
		if (notification === 'DOM_OBJECTS_CREATED') {
			MM.getModules().exceptWithClass("default").enumerate(function(module) {
				module.hide(1000, function() {
					Log.log('Module is hidden.');
				});
			});
		}
	},
	
	start: function() {
		this.current_user = null;
		this.sendSocketNotification('CONFIG', this.config);
		Log.info('Starting module: ' + this.name);
	}
	
});

[tidus5]

@kclemen
what’s the position of your module in the config?
2 différents zone ?

[kclemen]

@tidus5, No they have the same zone: position: ‘top_right’,

[tidus5]

@kclemen so if i understand correctly the problem is because the second module move when you hide the first one ?

as far as i understand the module - if you have 2 module in the same zone and you hide one the other take the free space

maybe if you change the second one from “top_right” to an other zone ?

[tidus5]

@kclemen or is it the small latency when your module is hide ?

[kclemen]

The problem is that the second module comes in the screen before the first one is completely hided I geuss? Or what do you mean with the latency of the module?

[tidus5]

@kclemen ok ok i understand now

[tidus5]

@kclemen

if you try

module.hide(500, instead of 1000?

[kclemen]

Needed to change it to the following:

hide: 100
show: 7000

This works for the first gesture “up”. If I repeat the same for going back to the first “page” the module flips for a second back to the lower position, before it fades away. Because the time is set to 7000 the fade becomes slow.

Should I put a wait between hide and show? How?

[tidus5]

@kclemen
http://api.jquery.com/delay/

delay()?

[kclemen]

I thought that version 2 of the mirror did not use jquery anymore?

[tidus5]

@kclemen i didnt know -_-

with css ?

[kclemen]

@tidus5, how do you mean with css?

[tidus5]

i know you can play with CSS and hide/show but not a pro :s

http://www.w3schools.com/js/js_timing.asp ?

[kclemen]

@tidus5 Will check it tomorrow. Thanks for all of your input so far!

[tidus5]

@kclemen you are welcome :-)

let me know if that works

[kclemen]

@MichMich, Could it be that this is a “fault” in the system?

[kclemen]

Adding setTimeout works for the gesture up, so hiding the defaultclass. But it does not work to show the defaultclass again with gesture down. Then the screen stays black. Removal of the 2nd setTimeout results back in showing the fefaultclass again. Is it possible that it is not possible to use 2 times setTimeout in the same file or so???

Module.register("MMM-skywriter",{
	
	// Default module config.
	defaults: {
		gesture_up: 0,
		gesture_right: 0,
		
	},

	// Override socket notification handler.
	socketNotificationReceived: function(notification, payload) {
		if (notification === "gesture_observed"){
			
			console.log ("socketnotificationreceived.");
		
			//self.sendNotification(notification, payload);
			
			if (payload === "up"){
				if (this.config.gesture_up == 0) {
						
						MM.getModules().withClass(this.config.defaultClass).exceptWithClass(this.config.everyoneClass).enumerate(function(module) {
							module.hide(1000, function() {
								Log.log(module.name + ' is hidden.');
							});
						});
						
						setTimeout(function() {
								MM.getModules().withClass("class_up_1_show").enumerate(function(module) {
									module.show(1000, function() {
										Log.log(module.name + ' is shown.');
									});
								});
						}, 1000);		
								this.config.gesture_up = this.config.gesture_up+1;

								console.log("gesture_up is nu 1");
						
				}
				else if (this.config.gesture_up == 1) {
						this.config.gesture_up = this.config.gesture_up+1;
						console.log (this.config.gesture_up)
				}
			}
			else if (payload === "left"){
				console.log("test - left");
			}
			else if (payload === "down") {
				if (this.config.gesture_up == 1){
					MM.getModules().withClass("class_up_1_show").enumerate(function(module) {
						module.hide(1000, function() {
							Log.log(module.name + ' is hidden by gesture.');
						});
					});
					
				//	setTimeout(function() {
						MM.getModules().withClass(this.config.defaultClass).exceptWithClass(this.config.everyoneClass).enumerate(function(module) {
							module.show(1000, function() {
								Log.log(module.name + ' is hidden.');
								});
							});
				//	}, 1000);
					this.config.gesture_up = this.config.gesture_up-1;
					console.log("test - down");
				}
				else if (this.config.gesture_up == 2){
					this.config.gesture_up = this.config.gesture_up-1;
					console.log("gesture up is terug 1");
				}
			}
		}
	},
	
	notificationReceived: function(notification, payload, sender) {
		if (notification === 'DOM_OBJECTS_CREATED') {
			MM.getModules().exceptWithClass("default").enumerate(function(module) {
				module.hide(1000, function() {
					Log.log('Module is hidden.');
				});
			});
		}
	},
	
	start: function() {
		this.current_user = null;
		this.sendSocketNotification('CONFIG', this.config);
		Log.info('Starting module: ' + this.name);
	}
	
});