diff --git a/config/config.js b/config/config.js index dc7a2f0e..4079f96e 100755 --- a/config/config.js +++ b/config/config.js @@ -678,6 +678,15 @@ var config = { height: "1000", // height of iframe frameWidth: "600", // width of embedded iframe, height is beeing calculated by aspect ratio of iframe } + }, + { + module:"CHANGE_CLOCK" + }, + { + module:"CHANGE_WEATHER" + }, + { + module:"CHANGE_NEWSFEED" } ] }; diff --git a/modules/CHANGE_CLOCK/CHANGE_CLOCK.js b/modules/CHANGE_CLOCK/CHANGE_CLOCK.js new file mode 100644 index 00000000..3924df5b --- /dev/null +++ b/modules/CHANGE_CLOCK/CHANGE_CLOCK.js @@ -0,0 +1,167 @@ +Module.register("CHANGE_CLOCK",{ + + notificationReceived: function(notification, payload){ + + if(notification === 'HIDE_CLOCK'){ + this.setPositions(modules = { + 'clock':{ + visible: 'false' + } + }); + } + if(notification === 'SHOW_CLOCK'){ + this.setPositions(modules = { + 'clock':{ + visible: 'true' + } + }); + } + if(notification === 'TOP_RIGHT_CLOCK'){ + this.setPositions(modules = { + 'clock':{ + position: 'top_right', + } + }); + } + + if(notification === 'TOP_LEFT_CLOCK'){ + this.setPositions(modules = { + 'clock':{ + position: 'top_left', + } + }); + } + + if(notification === 'BOTTOM_RIGHT_CLOCK'){ + this.setPositions(modules = { + 'clock':{ + position: 'bottom_right', + } + }); + } + + if(notification === 'BOTTOM_LEFT_CLOCK'){ + this.setPositions(modules = { + 'clock':{ + position: 'bottom_left', + } + }); + } + + if(notification === 'TOP_CENTER_CLOCK'){ + this.setPositions(modules = { + 'clock':{ + position: 'top_center', + } + }); + } + + if(notification === 'TOP_BAR_CLOCK'){ + this.setPositions(modules = { + 'clock':{ + position: 'top_bar', + } + }); + } + + if(notification === 'UPPER_THIRD_CLOCK'){ + this.setPositions(modules = { + 'clock':{ + position: 'upper_third', + } + }); + } + + if(notification === 'LOWER_THIRD_CLOCK'){ + this.setPositions(modules = { + 'clock':{ + position: 'lower_third', + } + }); + } + if(notification === 'FULLSCREEN_ABOVE_CLOCK'){ + this.setPositions(modules = { + 'clock':{ + position: 'fullscreen_above', + } + }); + } + if(notification === 'FULLSCREEN_BELOW_CLOCK'){ + this.setPositions(modules = { + 'clock':{ + position: 'fullscreen_below', + } + }); + } + + + + }, + + getid: function(mname) { + var id; + MM.getModules().enumerate(function(module) { + if (mname == module.name){ + id = module.identifier; + } + }); + return id; + }, + + setPositions: function(object) { + //get data with: + var modulenames = Object.keys(object); + var values = Object.values(object); + + + for (var i = 0; i < modulenames.length; i++) { + var id = this.getid(modulenames[i]); + MM.getModules().withClass(modulenames[i]).enumerate(function(module) { + if (values[i].position) { + var split_position = values[i].position.split("_"); + var selected_module = document.getElementById(id); + var region = document.querySelector('div.region.' + split_position[0] + '.' + split_position[1] + ' div.container'); + + // Make sure the region is visible + if (region.style.display === 'none') { + region.style.display = 'block'; + } + + // Move module + region.appendChild(selected_module); + + } + + // Set the module visible after moving to trigger css opacity transition animation + if (values[i].visible == 'true') { + module.show(1000, function() {}); + }else if(values[i].visible == 'false'){ + module.hide(1000, function() {}); + } + }); + } + }, + + setDefaults: function() { + MM.getModules().enumerate(function(module) { + if (module.data.position) { + var split_position = module.data.position.split("_"); + var selected_module = document.getElementById(module.identifier); + var region = document.querySelector('div.region.' + split_position[0] + '.' + split_position[1] + ' div.container'); + + // Make sure the region is visible + if (region.style.display === 'none') { + region.style.display = 'block'; + } + + // Move module to its original position + region.appendChild(selected_module); + + // Show module + module.show(1000, function() {}); + } + }); + + }, + +}); \ No newline at end of file diff --git a/modules/CHANGE_CLOCK/README.md b/modules/CHANGE_CLOCK/README.md new file mode 100644 index 00000000..73e7e6d9 --- /dev/null +++ b/modules/CHANGE_CLOCK/README.md @@ -0,0 +1,53 @@ +# Magic Mirror² Module: MMM-Dynamic-Modules + +MMM-Dynamic-Modules moves modules without need to restart Magic Mirror. Module also allows to hide or show modules. Module have method to change configured positions back. + +## Installation + + +```bash +cd ~/MagicMirror/modules +git clone https://github.com/Toreke/MMM-Dynamic-Modules.git +``` + +Config: + +``` +{ + module: "MMM-Dynamic-Modules", +}, +``` + +## How to use + + +Module can be used by following way: + +``` +this.sendNotification('CHANGE_POSITIONS', + modules = { + 'clock':{ + visible: 'true', + position: 'top_right', + }, + + 'MMM-WeeklySchedule':{ + visible: 'true', + position: 'top_left', + }, + + 'MMM-AirQuality':{ + visible: 'true', + position: 'bottom_bar', + } + } +); +``` + +And positions according to your config: + +``` +this.sendNotification(CHANGE_POSITIONS_DEFAULTS); +``` + +Order of the modules matters. If there is multiple modules in the same position, first module will be top, second module under it, and so on. \ No newline at end of file diff --git a/modules/CHANGE_NEWSFEED/CHANGE_NEWSFEED.js b/modules/CHANGE_NEWSFEED/CHANGE_NEWSFEED.js new file mode 100644 index 00000000..aff5efe7 --- /dev/null +++ b/modules/CHANGE_NEWSFEED/CHANGE_NEWSFEED.js @@ -0,0 +1,166 @@ +Module.register("CHANGE_NEWSFEED",{ + + notificationReceived: function(notification, payload){ + + if(notification === 'HIDE_NEWSFEED'){ + this.setPositions(modules = { + 'newsfeed':{ + visible: 'false' + } + }); + } + if(notification === 'SHOW_NEWSFEED'){ + this.setPositions(modules = { + 'newsfeed':{ + visible: 'true' + } + }); + } + if(notification === 'TOP_RIGHT_NEWSFEED'){ + this.setPositions(modules = { + 'newsfeed':{ + position: 'top_right', + } + }); + } + + if(notification === 'TOP_LEFT_NEWSFEED'){ + this.setPositions(modules = { + 'newsfeed':{ + position: 'top_left', + } + }); + } + + if(notification === 'BOTTOM_RIGHT_NEWSFEED'){ + this.setPositions(modules = { + 'newsfeed':{ + position: 'bottom_right', + } + }); + } + + if(notification === 'BOTTOM_LEFT_NEWSFEED'){ + this.setPositions(modules = { + 'newsfeed':{ + position: 'bottom_left', + } + }); + } + + if(notification === 'TOP_CENTER_NEWSFEED'){ + this.setPositions(modules = { + 'newsfeed':{ + position: 'top_center', + } + }); + } + + if(notification === 'TOP_BAR_NEWSFEED'){ + this.setPositions(modules = { + 'newsfeed':{ + position: 'top_bar', + } + }); + } + + if(notification === 'UPPER_THIRD_NEWSFEED'){ + this.setPositions(modules = { + 'newsfeed':{ + position: 'upper_third', + } + }); + } + + if(notification === 'LOWER_THIRD_NEWSFEED'){ + this.setPositions(modules = { + 'newsfeed':{ + position: 'lower_third', + } + }); + } + if(notification === 'FULLSCREEN_ABOVE_NEWSFEED'){ + this.setPositions(modules = { + 'newsfeed':{ + position: 'fullscreen_above', + } + }); + } + if(notification === 'FULLSCREEN_BELOW_NEWSFEED'){ + this.setPositions(modules = { + 'newsfeed':{ + position: 'fullscreen_below', + } + }); + } + + + + }, + + getid: function(mname) { + var id; + MM.getModules().enumerate(function(module) { + if (mname == module.name){ + id = module.identifier; + } + }); + return id; + }, + + setPositions: function(object) { + //get data with: + var modulenames = Object.keys(object); + var values = Object.values(object); + + for (var i = 0; i < modulenames.length; i++) { + var id = this.getid(modulenames[i]); + MM.getModules().withClass(modulenames[i]).enumerate(function(module) { + if (values[i].position) { + var split_position = values[i].position.split("_"); + var selected_module = document.getElementById(id); + var region = document.querySelector('div.region.' + split_position[0] + '.' + split_position[1] + ' div.container'); + + // Make sure the region is visible + if (region.style.display === 'none') { + region.style.display = 'block'; + } + + // Move module + region.appendChild(selected_module); + + } + + // Set the module visible after moving to trigger css opacity transition animation + if (values[i].visible == 'true') { + module.show(1000, function() {}); + }else if(values[i].visible == 'false'){ + module.hide(1000, function() {}); + } + }); + } + }, + + setDefaults: function() { + MM.getModules().enumerate(function(module) { + if (module.data.position) { + var split_position = module.data.position.split("_"); + var selected_module = document.getElementById(module.identifier); + var region = document.querySelector('div.region.' + split_position[0] + '.' + split_position[1] + ' div.container'); + + // Make sure the region is visible + if (region.style.display === 'none') { + region.style.display = 'block'; + } + + // Move module to its original position + region.appendChild(selected_module); + + // Show module + module.show(1000, function() {}); + } + }); + + }, + +}); \ No newline at end of file diff --git a/modules/CHANGE_NEWSFEED/README.md b/modules/CHANGE_NEWSFEED/README.md new file mode 100644 index 00000000..73e7e6d9 --- /dev/null +++ b/modules/CHANGE_NEWSFEED/README.md @@ -0,0 +1,53 @@ +# Magic Mirror² Module: MMM-Dynamic-Modules + +MMM-Dynamic-Modules moves modules without need to restart Magic Mirror. Module also allows to hide or show modules. Module have method to change configured positions back. + +## Installation + + +```bash +cd ~/MagicMirror/modules +git clone https://github.com/Toreke/MMM-Dynamic-Modules.git +``` + +Config: + +``` +{ + module: "MMM-Dynamic-Modules", +}, +``` + +## How to use + + +Module can be used by following way: + +``` +this.sendNotification('CHANGE_POSITIONS', + modules = { + 'clock':{ + visible: 'true', + position: 'top_right', + }, + + 'MMM-WeeklySchedule':{ + visible: 'true', + position: 'top_left', + }, + + 'MMM-AirQuality':{ + visible: 'true', + position: 'bottom_bar', + } + } +); +``` + +And positions according to your config: + +``` +this.sendNotification(CHANGE_POSITIONS_DEFAULTS); +``` + +Order of the modules matters. If there is multiple modules in the same position, first module will be top, second module under it, and so on. \ No newline at end of file diff --git a/modules/CHANGE_WEATHER/CHANGE_WEATHER.js b/modules/CHANGE_WEATHER/CHANGE_WEATHER.js new file mode 100644 index 00000000..5c0a4853 --- /dev/null +++ b/modules/CHANGE_WEATHER/CHANGE_WEATHER.js @@ -0,0 +1,202 @@ +Module.register("CHANGE_WEATHER",{ + + notificationReceived: function(notification, payload){ + + if(notification === 'HIDE_WEATHER'){ + this.setPositions(modules = { + 'currentweather':{ + visible: 'false' + }, + 'weatherforecast':{ + visible: 'false' + } + }); + } + if(notification === 'SHOW_WEATHER'){ + this.setPositions(modules = { + 'currentweather':{ + visible: 'true' + }, + 'weatherforecast':{ + visible: 'true' + } + }); + } + if(notification === 'TOP_RIGHT_WEATHER'){ + this.setPositions(modules = { + 'currentweather':{ + position: 'top_right' + }, + 'weatherforecast':{ + position: 'top_right' + } + }); + } + + if(notification === 'TOP_LEFT_WEATHER'){ + this.setPositions(modules = { + 'currentweather':{ + position: 'top_left' + }, + 'weatherforecast':{ + position: 'top_left' + } + }); + } + + if(notification === 'BOTTOM_RIGHT_WEATHER'){ + this.setPositions(modules = { + 'currentweather':{ + position: 'bottom_right' + }, + 'weatherforecast':{ + position: 'bottom_right' + } + }); + } + + if(notification === 'BOTTOM_LEFT_WEATHER'){ + this.setPositions(modules = { + 'currentweather':{ + position: 'bottom_left' + }, + 'weatherforecast':{ + position: 'bottom_left' + } + }); + } + + if(notification === 'TOP_CENTER_WEATHER'){ + this.setPositions(modules = { + 'currentweather':{ + position: 'top_center' + }, + 'weatherforecast':{ + position: 'top_center' + } + }); + } + + if(notification === 'TOP_BAR_WEATHER'){ + this.setPositions(modules = { + 'currentweather':{ + position: 'top_bar' + }, + 'weatherforecast':{ + position: 'top_bar' + } + }); + } + + if(notification === 'UPPER_THIRD_WEATHER'){ + this.setPositions(modules = { + 'currentweather':{ + position: 'upper_third' + }, + 'weatherforecast':{ + position: 'upper_third' + } + }); + } + + if(notification === 'LOWER_THIRD_WEATHER'){ + this.setPositions(modules = { + 'currentweather':{ + position: 'lower_third' + }, + 'weatherforecast':{ + position: 'lower_third' + } + }); + } + if(notification === 'FULLSCREEN_ABOVE_WEATHER'){ + this.setPositions(modules = { + 'currentweather':{ + position: 'fullscreen_above' + }, + 'weatherforecast':{ + position: 'fullscreen_above' + } + }); + } + if(notification === 'FULLSCREEN_BELOW_WEATHER'){ + this.setPositions(modules = { + 'currentweather':{ + position: 'fullscreen_below' + }, + 'weatherforecast':{ + position: 'fullscreen_below' + } + }); + } + + + + }, + + getid: function(mname) { + var id; + MM.getModules().enumerate(function(module) { + if (mname == module.name){ + id = module.identifier; + } + }); + return id; + }, + + setPositions: function(object) { + //get data with: + var modulenames = Object.keys(object); + var values = Object.values(object); + + for (var i = 0; i < modulenames.length; i++) { + var id = this.getid(modulenames[i]); + MM.getModules().withClass(modulenames[i]).enumerate(function(module) { + if (values[i].position) { + var split_position = values[i].position.split("_"); + var selected_module = document.getElementById(id); + var region = document.querySelector('div.region.' + split_position[0] + '.' + split_position[1] + ' div.container'); + + // Make sure the region is visible + if (region.style.display === 'none') { + region.style.display = 'block'; + } + + // Move module + region.appendChild(selected_module); + + } + + // Set the module visible after moving to trigger css opacity transition animation + if (values[i].visible == 'true') { + module.show(1000, function() {}); + }else if(values[i].visible == 'false'){ + module.hide(1000, function() {}); + } + }); + } + }, + + setDefaults: function() { + MM.getModules().enumerate(function(module) { + if (module.data.position) { + var split_position = module.data.position.split("_"); + var selected_module = document.getElementById(module.identifier); + var region = document.querySelector('div.region.' + split_position[0] + '.' + split_position[1] + ' div.container'); + + // Make sure the region is visible + if (region.style.display === 'none') { + region.style.display = 'block'; + } + + // Move module to its original position + region.appendChild(selected_module); + + // Show module + module.show(1000, function() {}); + } + }); + + }, + +}); \ No newline at end of file diff --git a/modules/CHANGE_WEATHER/README.md b/modules/CHANGE_WEATHER/README.md new file mode 100644 index 00000000..73e7e6d9 --- /dev/null +++ b/modules/CHANGE_WEATHER/README.md @@ -0,0 +1,53 @@ +# Magic Mirror² Module: MMM-Dynamic-Modules + +MMM-Dynamic-Modules moves modules without need to restart Magic Mirror. Module also allows to hide or show modules. Module have method to change configured positions back. + +## Installation + + +```bash +cd ~/MagicMirror/modules +git clone https://github.com/Toreke/MMM-Dynamic-Modules.git +``` + +Config: + +``` +{ + module: "MMM-Dynamic-Modules", +}, +``` + +## How to use + + +Module can be used by following way: + +``` +this.sendNotification('CHANGE_POSITIONS', + modules = { + 'clock':{ + visible: 'true', + position: 'top_right', + }, + + 'MMM-WeeklySchedule':{ + visible: 'true', + position: 'top_left', + }, + + 'MMM-AirQuality':{ + visible: 'true', + position: 'bottom_bar', + } + } +); +``` + +And positions according to your config: + +``` +this.sendNotification(CHANGE_POSITIONS_DEFAULTS); +``` + +Order of the modules matters. If there is multiple modules in the same position, first module will be top, second module under it, and so on. \ No newline at end of file