weird button layout after client/server connection(webiopi)

weird button layout after client/server connection(webiopi)

Postby devidation » Sat May 10, 2014 8:43 pm

Hello,
I have a little problem with my button layout in my html page.
At first I launch the website without doing anything and the css that I have applied to it works.
It looks like this: https://www.dropbox.com/s/3sth104zli44h6s/good.gif
However after succesfully connecting(so after a client is accepted by the server) the button's appearance suddenly changes to this: https://www.dropbox.com/s/49j1wlfyxh5na77/bad.gif
I do not know where the problem lies as I do not change anything related to css.

Below I will post all my related code:

For the server i'm currently using this
Code: Select all
import webiopi
import time
import socket
GPIO = webiopi.GPIO
server = webiopi.Server(port=8000, login="pi", password="raspberry")

def connect():
   print "er is op connect gedrukt"
   global myclient, address
   
   try:
      # TCP server
      serverTest = socket.socket(socket.AF_INET, socket.SOCK_STREAM) #server open a socket
      serverTest.bind(("192.168.137.2", 5000))    # socket = ip addres + port
      serverTest.listen(5)                   # server can listen to 5 client
      print "TCP server listening on port 5000"
      myclient, address = serverTest.accept()   # when a client want a connection, the server will accept
      print "Connected to ", address      # print ip addres of the client
      # bevestig verbinding
      myclient.send('0')               # send 0 to the client to comfirm itself
      print "test"
   except:
      print "Foutje"
      
def schrijven():
   data = ""
   data = myclient.recv(512)
   print data
   print "geschreven"
   myclient.send(data)
   return data

def send():
   print "Dit is een test"
   
server.addMacro(schrijven)
server.addMacro(send)
server.addMacro(connect)

webiopi.runLoop()

server.stop()


My html page looks as following:
Code: Select all

<html>
<head>
<link rel="stylesheet" type="text/css" href="Style.css">
<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/webiopi.js"></script>
</head>
<body>
<script>
var t

function readInterval() {
      t = setInterval(function(){
         webiopi().callMacro("schrijven", [], update);
      }, 1000);
      
      var update = function(macro, args, response) {
         var antwoord = response;
         // Following lines use jQuery functions
         $('#chatbox').append("geschreven: " + antwoord + "<br/>");
      }
   }

function stopInterval() {
   alert("testttttt");
   clearInterval(t);
}

function connect() {
   webiopi().callMacro("connect");
}
function send() {
   webiopi().callMacro("send");
}
</script> 
<h1>Pi Chatbox</h1>
<div id="chatbox"></div>
<input id="send" type="text" name="message"><br>
<button id="btnSend" onClick="connect()" type="button">Connect</button>
<button id="btnConnect" onClick="readInterval()" type="button">Recv</button>
<button id="btnStopInterval" onClick="stopInterval()" type="button">STOP</button>
</body>
</html>


And this is the python client i'm using to test the connection

Code: Select all
# TCP client
import socket
client = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
client.connect(("192.168.137.2", 5000))
# connect with server
data = client.recv(512)
if data<>"0":       # see its the correct server
    print "unexpected reply from the server, aborting"
    print data
    client.send("q")
    client.close()
    exit()
#communication
while 1:
    data = raw_input ("Send q to stop server:")
    client.send(data)
    if data == "q" :
        client.close()
    data = client.recv(512)
    print "received:" , data


I hope anyone knows a fix for this because it would be nice to have a clean layout in the end without these messed up buttons.
Thanks in advance.
devidation
 
Posts: 6
Joined: Thu May 08, 2014 2:03 pm

Return to Web Development

Who is online

Users browsing this forum: No registered users and 3 guests