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...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice