B4J Question Retrieve variable from jquery with websocket

Discussion in 'B4J Questions' started by lucdrb, Jun 27, 2015.

  1. lucdrb

    lucdrb Member Licensed User

    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
     
  2. Roycefer

    Roycefer Well-Known Member Licensed User

    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...." :
    Code:
    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):
    Code:
    Public Sub fromWeb_newSliderValue(Params as Map)
         
    Dim val as String = Params.Get("value")
         
    Log("New Slider Value: " & val)
    End Sub
     
    lucdrb and Erel like this.
  3. rwblinn

    rwblinn Well-Known Member Licensed User

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

    Attached Files:

    lucdrb likes this.
  4. lucdrb

    lucdrb Member Licensed User

    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
     
  5. rwblinn

    rwblinn Well-Known Member Licensed User

    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:
    Code:
    <script>
        //
        $( document ).ready(function() {
          //Set the 
    slider properties
          $(function(){
          var slidervalue = $(
    '#slidervalue');
          $("#slider").slider({
            
    max100,
            
    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.
     
    Last edited: Jun 28, 2015
    lucdrb likes this.
  6. lucdrb

    lucdrb Member Licensed User

    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.
     
  7. lucdrb

    lucdrb Member Licensed User

    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
     
  8. rwblinn

    rwblinn Well-Known Member Licensed User

    That requires a b4j_raiseEvent, like example
    Add to HTML
    Code:
    b4j_raiseEvent("zero_slidervalue", {info:"slider is zero"});
    Add to B4J
    Code:
    Private Sub zero_slidervalue(Params As Map)
       
    Log(Params.GetKeyAt(0) & " = " & Params.GetValueAt(0))
       
    'with output info = slider is zero
    End Sub
     
    lucdrb and Erel like this.
  9. lucdrb

    lucdrb Member Licensed User

    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
     
Loading...