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

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:
However after succesfully connecting(so after a client is accepted by the server) the button's appearance suddenly changes to this:
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
      # TCP server
      serverTest = socket.socket(socket.AF_INET, socket.SOCK_STREAM) #server open a socket
      serverTest.bind(("", 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"
      print "Foutje"
def schrijven():
   data = ""
   data = myclient.recv(512)
   print data
   print "geschreven"
   return data

def send():
   print "Dit is een test"



My html page looks as following:
Code: Select all

<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>
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() {

function connect() {
function send() {
<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>

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(("", 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
while 1:
    data = raw_input ("Send q to stop server:")
    if data == "q" :
    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.
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 2 guests