+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Multiple images visualization (/showthread.php?tid=1581)
Multiple images visualization - Spiff - 10.09.2018
I'm facing a challenge that I'd like to get some ideas for how to solve:
My challenge:
I have a widget with one image object showing a weather forecast image (remote URL image). This is working, however I want the widget to contain 4+ different images. Basically be able to quickly switch between 4 predefined weather forecast locations. -I'm considering having 4+ "buttons" below the image as "tabs" to select which image to show.
The 4 images have 4 different URL's, and are currently loading directly from source. -Might be an idea to periodically download these images to LM5, but I assume that also adds complexity.
How would this be best solved?
-Use javascript to replace href in the image object, and reload?
-Use multiple widgets that reference each other? (button click opens new widget, current closes)
-Use a button object instead of image object? Download images locally, tie them to 4 states (integer)? -How about button image refresh?
-Other ways?
-I know the best way would be to have a tab-control for visualization, but since that's currently not available I need some workaround..
Any suggestions/help is appreciated.
RE: Multiple images visualization - buuuudzik - 10.09.2018
You can prepare 2 buttons < and > and create 4 windows via Custom JS which you will hide and unhide when user will using buttons. This windows you must draw on specific plan.
RE: Multiple images visualization - Erwin van der Zwart - 10.09.2018
Hi,
I use custom JS for this, give the image a custom class 'weather' and use this js script where 40/1/15 = object with URL
Code:
$(function(){
if (typeof grp != 'undefined') {
grp.listen('40/1/15', function(object, state) {
$('.weather').find('img').attr('src', object.value)
}, true);
}
});Erwin