B4J Question Retrieve variable from jquery with websocket

lucdrb · Jun 27, 2015

Hi,

I would like to get the value of a variable from an HTML page made with Jquery and websocket.
The value is coming from a slider hereafter the index.html file

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>GPIO</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css" />
<link rel="stylesheet" href="assets/css/styles.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="assets/js/slider-jqueryui.js"></script>
<script src="/b4j_ws.js"></script>

</head>
<body>
<h1>Webb App GPIO</h1>
<p id="plog"></p>
<div id="maindiv">
<div id="slider"></div>
<p class="note">Current value: <span id="currentvalue">0</span></p>

</div>
<script>
//connect to the web socket when the page is ready.
$(function(){
var currentvalue = $('#currentvalue');
$("#slider").slider({
max: 100,
min: -100,
orientation :"vertical",
slide: function(event, ui) {
currentvalue.html(ui.value);
}
});

});
$( document ).ready(function() {
b4j_connect("/ws");
});
</script>
</body>

I've tried to use the variable currentvalue but I didn't have any value from it in the B4J program

Sub Class_Globals
Private ws AsWebSocket
Private currentvalue As JQueryElement
Private gp AsGpio_pwm
EndSub

Public Sub Initialize
gp.Initialize
EndSub

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
Log("Connecté")
ws = WebSocket1
EndSub

Private Sub currentvalue_Change (Params As Map)
Private cv1 As Future = currentvalue.GetVal
If IsNumber(cv1.Value) Then
gp.pwm_Write(1,cv1.Value)
EndIf
Log("CV1 :" & cv1)
EndSub

Private Sub WebSocket_Disconnected
Log("Déconnecté")
EndSub

Any help will be welcome

Luc

Roycefer · Jun 27, 2015

In your JavaScript code, you need to call "b4j_raiseEvent()" to trigger an event method in your B4J code. For example, in your "slide: function...." :

B4X:

slide: function(event,ui)
{
     currentvalue.html(ui.value);
     b4j_raiseEvent("fromWeb_newSliderValue", {value: ui.value});
}

This will cause the following B4J code to be executed on your server (in your WebSocket class):

B4X:

Public Sub fromWeb_newSliderValue(Params as Map)
     Dim val as String = Params.Get("value")
     Log("New Slider Value: " & val)
End Sub

rwblinn · Jun 28, 2015

Nice trigger for a small howto which shows in addition how to set the position. Please find attached.

lucdrb · Jun 28, 2015

Thanks you @ both of you, it's make me go further.

I've another question wich is the best way to set the slider to 0 when the mouse leave it?
I've made the following code but I'don't know how to tell the program that the value is 0 and how to reset tha slider to 0.
With a b4J_raiseEvent?
Should I've to change the variable?

$("#slider").mouseleave( function() {
alert("Mouveleave")
$( ".selector" ).slider( "value", 0 );
} );

Thanks in advance

Luc

rwblinn · Jun 28, 2015

Hi,
almost there. Just change .selector to #slider as that is the selector you defined.
Note, that the value will be set to 0 when you touch the slider with the mouse at any position and not only at the position indicator.

Cleaned the script section:

B4X:

<script>
    //
    $( document ).ready(function() {
      //Set the slider properties
      $(function(){
      var slidervalue = $('#slidervalue');
      $("#slider").slider({
        max: 100,
        min: -100,
        orientation :"horizontal",
        slide: function(event, ui) {
          slidervalue.html(ui.value);
          b4j_raiseEvent("update_slidervalue", {value: ui.value});
        }
       });
     }); 

    $("#slider").mouseleave( function() {
      $("#slider").slider( "value", 0 );
     } );
        
     //B4J Connect to the B4J server
     b4j_connect("/ws");
   });
</script>

PS:Use the BB code tags to display code.

lucdrb · Jun 29, 2015

rwblinn said:
Note, that the value will be set to 0 when you touch the slider with the mouse at any position and not only at the position indicator.

PS:Use the BB code tags to display code.

Once again thank you,

If I'm understanding you, I've to add also:

$("#slider").mouseenter( function() {
$("#slider").slider( "value", 0 );
} );

to the script?

Ps: I've never hear about BB Code but It's look well.

lucdrb · Jun 29, 2015

In fact i'm lost
I know how to receive the value when the slider change but I can't see how to receive the zero value into B4J Ws class when the mouse is leaving the slider.
The slider go to the 0 position but doesn't send the info.

Luc

rwblinn · Jun 29, 2015

That requires a b4j_raiseEvent, like example
Add to HTML

B4X:

b4j_raiseEvent("zero_slidervalue", {info:"slider is zero"});

Add to B4J

B4X:

Private Sub zero_slidervalue(Params As Map)
   Log(Params.GetKeyAt(0) & " = " & Params.GetValueAt(0))
   'with output info = slider is zero
End Sub

lucdrb · Jun 29, 2015

Ok many thanks

I think that the problem is my knowledge of Jquery.
I plan to learn it this week evening and thus become more clever

Luc

B4J Question Retrieve variable from jquery with websocket

lucdrb

Active Member

Roycefer

Well-Known Member

rwblinn

Well-Known Member

Attachments

lucdrb

Active Member

rwblinn

Well-Known Member

lucdrb

Active Member

lucdrb

Active Member

rwblinn

Well-Known Member

lucdrb

Active Member

Similar Threads