{"id":713,"date":"2022-01-24T11:10:13","date_gmt":"2022-01-24T10:10:13","guid":{"rendered":"http:\/\/tescaweb.nl\/Carel\/?p=713"},"modified":"2022-01-26T21:35:22","modified_gmt":"2022-01-26T20:35:22","slug":"fischertechnik-txt4-0-and-web-sockets-1","status":"publish","type":"post","link":"http:\/\/tescaweb.nl\/Carel\/?p=713","title":{"rendered":"fischertechnik TXT4.0 and web sockets (1)"},"content":{"rendered":"\n

Two project about the web socket communication from a browser with the fischertechnik TXT4.0<\/p>\n\n\n\n

Project 1<\/h1>\n\n\n\n

Basic code to receive data over a web socket on the TXT. <\/h2>\n\n\n\n

First I tested the Pyhton code in RoboPro Coding in the text mode.<\/p>\n\n\n\n

import asyncio, itertools\nimport time\nimport subprocess\nfrom lib.controller import *\nfrom websockets import serve\n#simple websocket server\n\nasync def echo(websocket):\n    print('message')\n    async for message in websocket:\n        await websocket.send(message)\n\n\nprint('start')\n\nasync def handler(websocket, path):\n    # Get received data from websocket\n    print("wait for recv")\n    while True:\n      try:\n          print("before")\n          data = await websocket.recv()\n          print("after")\n      except websockets.exceptions.ConnectionClosed:\n            print("connection closed")\n            break\n      except websockets.exceptions.ConnectionClosedError:\n            print("connection closed error")\n            break\n      except websockets.exceptions.ConnectionClosedOK:\n            print("connection closed Ok")\n            break\n    # await handler( websocket, path)\n    # Send response back to client to acknowledge receiving message\n      else:\n            print('server: recv' + data)\n            await websocket.send("== " + data)\n            #print("send ready")\n            await handler( websocket, path)\n\n\nprint('test1')\n# Create websocket server\nstart_server = serve(handler, "0.0.0.0" ,  8085)\nprint('test2')\n# Start and run websocket server forever\nasyncio.get_event_loop().run_until_complete(start_server)\nprint('test3')\nasyncio.get_event_loop().run_forever()\nprint('test4')\n\n\nwhile True:\n    pass\nprint('test5')<\/pre><\/div>\n\n\n\n
The web page that runs on a client and contacts the TXT4.0 websocket.<\/p>\n\n\n\n
<!DOCTYPE HTML PUBLIC "-\/\/W3C\/\/DTD HTML 4.01\/\/EN" "http:\/\/www.w3.org\/TR\/html4\/strict.dtd">\n<html>\n<head>\n  <title>Test<\/title>\n  <script type='text\/javascript' language="javascript">\n  <!--\n  var connection;\n  var keepAlive = false;\n  var printError = function(error, explicit) {\n    console.log(`[${explicit ? 'EXPLICIT' : 'INEXPLICIT'}] ${error.name}: ${error.message}`);\n     }\n  const jj= '{"actuators":[{"M":{"i":1,"p":[0,0,214,214]}},{"M":{"i":2,"p":[0,0,214,214]}},{"M":{"i":3,"p":[0,0,214,214]}}]}';\n  const j={"actuators":[{"M":{"i":1,"p":[0,0,214,214]}},{"S":[0, 6,512]},{"firstName":"Peter","lastName":"Jones"}]};\n  \/\/const j=   {"actuators":[{"M":{"i":1,"p":[0,0,214,214]}},{"M":{"i":2,"p":[0,0,214,214]}},{"M":{"i":3,"p":[0,0,214,214]}}]};\n\n  function webSockKeepAlive() {\n    if (keepAlive) {\n      connection.send('ping'); \/\/ Send the message 'ping' to the server\n      setTimeout("webSockKeepAlive()", 10000);\n    }\n  }\n function sendButton1(par1,par2){\n     \/\/parameters not is use for the moment\n     myJSON=JSON.stringify(j);\/\/ to a JSON object\n\t console.log('sendButton: ' + myJSON);\n     connection.send(myJSON);\n  }\nfunction sendButton2(par1,par2){\n     \/\/parameters not is use for the moment\n     myJSON=JSON.stringify(j);\/\/ to a JSON object\n\t console.log('sendButton: ' + myJSON);\n     connection.send(myJSON);\n  }  \nfunction sendButton3(par1,par2){\n     \/\/parameters not is use for the moment\n     myJSON=JSON.stringify(j);\/\/ to a JSON object\n\t console.log('sendButton: ' + myJSON);\n     connection.send(myJSON);\n  }    \n  \n  function load() {\n    connection = new  WebSocket("ws:\/\/192.168.20.175:8085\/");\n    connection.onopen = function () {\n        var send = "init " + Math.round(Math.random()*4294967294+1);\n        console.log('Client: ' + send);\n        connection.send(send);\n        keepAlive = true;\n  \/\/      webSockKeepAlive();\n      };\n    connection.onclose = () => {\n            console.log('Web Socket Connection Closed');\n\t\t};\t\n    connection.onerror = function (error) {\n        keepAlive = false;\n        connection.close();\n        console.log('WebSocket error: ' + error);\n        alert("WebSocket error: "+ error);\n      };\n    connection.onmessage = function (e) {\n        console.log('Message: ' + e.data);\n\t\tvar msgStr = document.getElementById('msg');\n\t\ttry{\n\t\tvar objJ=JSON.parse(e.data);\n\t\tvar tt=objJ.actuators[1].S;\/\/tt=objJ.actuators[1].S[1];\n\t\tmsgStr.innerHTML ="<strong>Data received: <\/strong><br\/>"+  e.data+" <br\/><br\/><b>JSON object:<\/b><br> "+JSON.stringify(objJ) +" <br><br><b>JSON object selection:<\/b><br>"+JSON.stringify(tt);\n \t\t\n\t\t}catch(ex){\n\t\t   if (ex instanceof SyntaxError) {\n             printError(ex, true);\n\t\t     msgStr.innerHTML = "Exception: Parse syntax error, data received=<br\/>"+ e.data;\n \t\t   } else {\n             printError(ex, false);\n\t\t     msgStr.innerHTML = "Exception: No parse error, data received=<br\/>"+ e.data;\n   \t       }\n \t    }\n      };\n  }\n  \/\/-->\n  <\/script> \n\n<\/head>\n\/<!-- <body onload="load()"> -->\n<body>\n <input type="button" onclick="load();" value="Open websocket server"><\/button>\n <input type="button" onclick="connection.close();" value="Close websocket server"><\/button>\n  <input type="button" onclick="sendButton1('msg A','10');" value="msg 1"><\/button>\n  <input type="button" onclick="sendButton2('msg B','10');" value="msg 2"><\/button>\n  <input type="button" onclick="sendButton3('msg C','10');" value="msg 3"><\/button>\n  <input type="button" onclick="connection.send('msg D');" value="msg 4"><\/button>\n  <br\/>\n  <p id="msg"><\/p>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
The integration into the RoboPro Blockly structure<\/h2>\n\n\n\n
After testing the Python code, the code has been integrated into the Blockly structure. The callback has been placed in a sub page.
This project is available on the RoboPro Coding  fischertechnik GitLab page under: “CvanLeeuwenFt\/my_606_WebSocketReceiver_Bl”<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"
The RoboPro Coding callbacks page<\/figcaption><\/figure>\n\n\n\n
The main problems are:
How to to bring the data to Blockly-level?
Blockly has no user defined events and event handlers to deal with these events.<\/p>\n\n\n\n
Project 2 <\/h1>\n\n\n\n
Virtual Joystick and standard game control HTML page<\/h2>\n\n\n\n
A couple of years ago I already introduced a remote controller from a WIndows machine by HTML\/Websocket communication with a TXT-controller.
This with the help of embedded CivetWeb server and RoboPro SLI extension elements.
I adapted this web pages to the TXT4.0 with the Python web socket.<\/p>\n\n\n\n
I made use of two projects which were available on the internet:<\/p>\n\n\n\n