Using the jQuery UI Slider

Details

One of the interesting gadgets/widgets, which can be placed on htm pages is a slider made available in frame of the jQuery UI.  You can find a detailed explenation of how the slider works, how to create and parametrize it at http://docs.jquery.com/UI/Slider (if the link does not work - google: „jquery slider”).  

I will concentrate only on how to use the slider to control a PLC.  Here is the link to the package with examples.

Example1:

A Slider ‘slider1’ places at the end of being moved its value to the element 'value1'.  A button 'sendbutton1, which - when clicked - sends the value stored in 'value1' to the PLC: 

$("#slider1").slider({
	stop: function(){
		$('#value1').html($(this).slider( "option", "value" ));
	}
});

$('#sendbutton1').MakeWriteButton({
	write: 'MB11',
	dynamicvalue: 'value1'
});

Example 2:

Similar to Example 1, but value of the slider is not shown.  When the 'sendbutton2' is clicked the value red directly from the slider is sent to the PLC.

$("#slider2").slider();

$('#sendbutton2').MakeWriteButton({
	write: 'MB11',
	dynamicvalue: 'slider2'
});

Example 3:

It is a mixture of Examples 1 and 2.  When the slider is stopped, its value is entered into another element.  Clicking the sendbutton3 sends the data red directly from 'slider3' to the PLC.

$("#slider3").slider({
	stop: function(){
		$('#value1').html(‘Received Data: ‘+$(this).slider( "option", "value" ));
	}
});

$('#sendbutton3').MakeWriteButton({
	write: 'MB11',
	dynamicvalue: 'slider3'
})

Example 4:

Whenever the slider stops, its value is sent to the PLC to the address MB11 without clicking any additional buttons:

$("#slider4").slider({
	stop: function(){
		$(this).WriteValue({
			address: 'MB11',
			value: $(this).slider( "option", "value" )
		})
	}
});

Example 5:

Similar to the example 4, but additionally the slider is deactivated during sending data tot the PLC.  If the communication last over 5 sec. a covering layer with a 'loading' image is shown.  The value of the slider is periodically red form the PLC and the slider is updated:

$("#slider5").slider({
	stop: function(){
		$(this).ShowButtonCover();
		$(this).WriteValue({
			address: 'MB11',
			value: $(this).slider( "option", "value" )
		})
	}
});
$("#slider5").AddButtonCover();
$("#slider5").bind('OnWriteSuccess', function(){
	$(this).HideButtonCover()
});
$("#slider5").MakeReadField({
	read: 'MB11',
	refreshtype: 'slider'
});

• Prev
• Next