B4J Question How to display image by WebSocket

derez · Dec 27, 2015

In the cctv server I have in the index file this text which takes care of calling the GetIimages handler and put a new image in the html page:

B4X:

<script type="text/javascript">
function get_images(){
$.ajax({
url: "/GetImages",
success: function(result)
{
$("#images").html(result);},
});
}
$(document).ready(function(){
get_images();
setInterval(function(){get_images();}, 300);
});

Is it possible to add the image functionality to this index of a homecontrol app, which use a websocket :

B4X:

:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>EREZ home control</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" />
<script src="/b4j_ws.js"></script>
</head>
<body>
<h1><img src='kimel.jpg'/ width=100 height=100> EREZ home control<br/> </h1> <p id="plog"></p>
<div id="maindiv">
<br>Switch1 :
<input Type="radio" name="sw1" checked="True"> OFF <input Type="radio"id="sw1on" name="sw1" > ON <br>
<br>Switch2 :
<input Type="radio" name="sw2" checked="True"> OFF <input Type="radio"id="sw2on" name="sw2" > ON <br>
<br>Switch3 :
<input Type="radio" name="sw3" checked="True"> OFF <input Type="radio"id="sw3on" name="sw3" > ON <br>
<br>Switch4 :
<input Type="radio" name="sw4" checked="True"> OFF <input Type="radio"id="sw4on" name="sw4" > ON <br><br>
<buttonid="submit">Submit</button><br>
<p id="result"></p><br/>
</div>
<script>
//connect to the web socket when the pageis ready.
$( document ).ready(function() {
b4j_connect("/ws");});
</script>
</body>

Erel · Dec 27, 2015

Yes. Just add image div and the above javascript.

derez · Dec 27, 2015

B4X:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>EREZ home control</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" />
    <script src="/b4j_ws.js"></script>
</head>
<body>
    <h1><img src='kimel.jpg'/ width=100 height=100> EREZ home control<br/> </h1>
    <p id="plog"></p>
    <div id="maindiv">
        <br>Switch 1 :
        <input Type="radio" name="sw1" checked="True"> OFF <input Type="radio" id="sw1on" name="sw1" > ON <br>
         <br>Switch 2 :
        <input Type="radio" name="sw2" checked="True"> OFF <input Type="radio" id="sw2on" name="sw2" > ON <br>
         <br>Switch 3 :
        <input Type="radio" name="sw3" checked="True"> OFF <input Type="radio" id="sw3on" name="sw3" > ON <br>
         <br>Switch 4 :
        <input Type="radio" name="sw4" checked="True"> OFF <input Type="radio" id="sw4on" name="sw4" > ON <br><br>
        <button id="submit">Submit</button><br>
        <p id="result"></p><br/>
     </div>
  
<div id="images"></div>
    <script type="text/javascript">
    function get_images(){
        $.ajax({
           url: "/GetImages",
           success: function(result)
           {
               $("#images").html(result);
           },        
         });
    }
    $(document).ready(function(){
        get_images();
        setInterval(function(){get_images();}, 1000);
    });

    <script>
    //connect to the web socket when the page is ready.
    $( document ).ready(function() {
       b4j_connect("/ws");
    });
    </script>
</body>

It does not work. Neither handler is called (Control or GetImages).
I tried to all the document ready in one place - no.

Erel · Dec 28, 2015

Have you checked the browser developer console for any errors?

derez · Dec 28, 2015

I was not aware of it ! found it now in chrome.
I'll try and report.

Daestrum · Dec 28, 2015

I would try putting your get_images() function in <head>..<head>

then change the

B4X:

 $( document ).ready(function() {
 b4j_connect("/ws");
 });

to

B4X:

$( document ).ready(function() {
 b4j_connect("/ws");
 get_images();
 setInterval(function(){get_images();}, 1000); 
});

not sure how it handles two document ready functions ( as you had in your code), I would guess it ignores one and uses the last one it finds.

derez · Dec 28, 2015

Thanks Daestrum but I was working with the console and could change the index file and see the results in real time, I got the following to work nicely with the pictures bellow the buttons and test:

B4X:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>EREZ home control</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" />
    <script src="/b4j_ws.js"></script>
</head>
<body>
    <h1><img src='kimel.jpg'/ width=100 height=100> EREZ home control<br/> </h1>
    <p id="plog"></p>
    <div id="maindiv">
        <br>Switch 1 :
        <input Type="radio" name="sw1" checked="True"> OFF <input Type="radio" id="sw1on" name="sw1" > ON <br>
         <br>Switch 2 :
        <input Type="radio" name="sw2" checked="True"> OFF <input Type="radio" id="sw2on" name="sw2" > ON <br>
         <br>Switch 3 :
        <input Type="radio" name="sw3" checked="True"> OFF <input Type="radio" id="sw3on" name="sw3" > ON <br>
         <br>Switch 4 :
        <input Type="radio" name="sw4" checked="True"> OFF <input Type="radio" id="sw4on" name="sw4" > ON <br><br>
                <button id="submit">Submit</button><br>
        <p id="result"></p><br/>
           <div id="images"></div>
</div>
  
    <script type="text/javascript">
    function get_images(){
        $.ajax({
           url: "/GetImages",
           success: function(result)
           {
               $("#images").html(result);
           },        
         });
    }
    $(document).ready(function(){
        get_images();
        setInterval(function(){get_images();}, 1000);
    });

//    <script>
    //connect to the web socket when the page is ready.
    $( document ).ready(function() {
       b4j_connect("/ws");
    });
    </script>
</body>

B4J Question How to display image by WebSocket

derez

Expert

Erel

B4X founder

derez

Expert

Erel

B4X founder

derez

Expert

Daestrum

Expert

derez

Expert

Attachments

Similar Threads