Language Switcher
Wykorzystanie jQuery UI Slider (tzw.’ suwak’)
- Szczegóły
Jednym z ciekawych gadżetów/widgetów możliwych do umieszczenia na stronach htm jest ‘suwak’ udostępniany w ramach jQuery UI. Szczegóły o tym, jak taki element działa, jak go tworzyć i parametryzować dostępne są pod http://docs.jquery.com/UI/Slider (gdyby link nie działał, google: „jquery slider”).
Koncentrować się będę wyłącznie na tym, jak wykorzystać go do sterowania PLC, pozostawiając pytających o ‘suwak’ sam w sobie na pastwę powyższych adresów i odsyłaczy. Oto link do paczki z przykładami
Przykład 1:
Suwak ‘slider1’, który po zakończeniu przesuwania umieszcza swoją zawartość w elemencie ‘value1’ oraz przycisk ‘sendbutton1’, który po kliknięciu wysyła do PLC wartość zawartą w ‘value1’:
$("#slider1").slider({
stop: function(){
$('#value1').html($(this).slider( "option", "value" ));
}
});
$('#sendbutton1').MakeWriteButton({
write: 'MB11',
dynamicvalue: 'value1'
});
Przykład 2:
Podobnie jak w przykładzie 1, jednakże tym razem wartość suwaka nie jest nigdzie ‘publikowana’. Przyciśnięcie przycisku ‘sendbutton2’ powoduje wysłanie do PLC wartości odczytanej bezpośrednio z suwaka ‘slider2’.
$("#slider2").slider();
$('#sendbutton2').MakeWriteButton({
write: 'MB11',
dynamicvalue: 'slider2'
});
Przykład 3:
Połączenie przykładu 1 i 2. Po zatrzymaniu suwaka jego wartość wpisywana jest w inny element z dodatkowym tekstem. Przyciśnięcie przycisku ‘sendbutton3’ powoduje wysłanie do PLC wartości odczytanej bezpośrednio z suwaka ‘slider3’.
$("#slider3").slider({
stop: function(){
$('#value1').html(‘Received Data: ‘+$(this).slider( "option", "value" ));
}
});
$('#sendbutton3').MakeWriteButton({
write: 'MB11',
dynamicvalue: 'slider3'
})
Przykład 4:
Po każdym zakończeniu ruchu wartość suwaka wysyłana jest do PLC na adres ‘MB11’:
$("#slider4").slider({
stop: function(){
$(this).WriteValue({
address: 'MB11',
value: $(this).slider( "option", "value" )
})
}
});
Przykład 5:
Podobnie jak przykład 5, jednakże dodatkowo w czasie zapisu suwak jest deaktywowany, a gdy komunikacja trwa powyżej 0.5 sec, pojawia się obrazek ‘loading’. Wartość suwaka jest okresowo aktualizowana poprzez odczytanie wartości z adresu ‘MB11’
$("#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'
});