def onHTTPRequest(webServerDAT, request, response):
# Remove the leading /
uri = request['uri'][1:]
# Serve up index_html DAT for /
if uri == "":
uri = 'index_html'
target_operator = op(uri)
if target_operator is None:
response['statusCode'] = 404 # Missing File
response['statusReason'] = 'Operator does not exist'
response['data'] = uri + ' not found'
return response
if target_operator.isDAT: response['data'] = target_operator.text
if target_operator.isTOP: response['data'] = target_operator.saveByteArray('.png')
response['statusCode'] = 200 # OK
response['statusReason'] = 'OK'
return response
Hello,
Thank you for your answer.
I know the Node tutorial, unfortunately its not complete, lack the most interesting part “Controling the browser from Touchdesigner”. I wrote to the autor and there is no plan to publish it.
Concerning the tutorial, they use image from TD with a numpy parsing to transform it from 32 bits RGBA and it take time. I want to use html to just send a simple light 8 bits jpg, because the project is to run several webserver to communicate with several phones. I just lack the know-how to reference an external file inside of python.
Have a nice day,
Jacques
I’m te Author of the tutorial on thenodeinstitute.org
This Tutorial should never have been published or accessable to the public! Some strange behaviour in our backend results in this being public, even though we reviced access. There will be in fact no cotinunation of this specific stuff as more then one element changed.
I will host a course soon on Web-Interactivity though, so look out for that.
Also, I built a meta-component that makes developing the webserver much easier:
@jacqueshoepffner Not sure what yo mea with numpy parsig? Simply set the data-member of the response via saveByteArray as @dejagrimm showed in their code-exaple. This is the cleanest way to go right now.
Hello Wieland,
Thank you for your answer. Stefan Kraus made the same…
Perhaps can you give me some advice.
We prepare a performance with players receiving instruction on their smartphone and I tried some path. The central machine use TD writing and reading a JSON file with some pictures, sounds and videos on separate folders. For the moment with 4 clients having different informations and returns but the final project will be with a lot more.
– TouchOSC, very poor UI, no pictures and necessity to use an app
– Open Stage Control, better UI, pictures possible but no sound, no video and only one web server (its possible to clone the app but its unstable)
– Node-Red with dashboard UI (actual working prototype). Easy to manage and communicate, perfect for pictures, sound, video and STT, easy management of CSS classes and JS scripts. The only problem its the unique webserver. I tried multiple instance but it crashes with pictures. For the moment I use the Tabs feature, allowing multiple views but if you redeploy the project, you have to reload the clients.
I am in the process to learn and try Node-Red with ui-builder using the Svelte framework. The possibilties are good with multiple web server. I think I can use pictures, sound and video without problem but I am still struggling to understand the framework and make the project works.
The web server inside TD would be the perfect solution but I have some difficulties to implement what I need. I have a problem with the proposition of your “forbiden” Node tutorial, using the parsing of the image inside the callback. I need a more simple way to send image to the client, as in HTML or Node-Red. But the possibility to work inside TD, to create new web server with replicator could be a great opportunity!
I want to know if someone have tested the possibility to use modern framework like Svelte, Angular on Vue with the TD web server?
If someone have a good understanding of what is possibile with it, I would be interested to exchange.
All the best and thank you for your incomplete, forbiden tutorial!
Jacques
Hey.
Basicly you have to understand that everything inside the HTML you send to the client is per default relative to the server. So when you write <img src="Foobar.jpg">, the browser will actually send a request to the webserver that is also hosting the website. This is basicly what is happening in the webServer Callback.
You can now fetch a lot of information from that request, for example the path. In our img example, it would just be /foobar.jpg. Based on this information you can choose what to write in the Data of the response (which will be sent back to client). In this case, you want to send bytdata of a JPG.
There is no simpler way of archiving what you want then a literal oneliner (for the case of having the source in TD already).
In regard to using JS-Frameworks. They are frontend frameworks. The WebserverDAT in itself it just a server. It can easily serve anything, from a simple API to a webpage or even a backendFramework (which would neet to be built though).
Basicly, there are three things you need to get streight (or find someone to do that for your):
Understand how the Web works in the way of Request/Response/Server/CLient
Daunting, I now, but not that hard once it clicks.
Understand how APIs work. What is an API etc. Again, in general streight forward once you understand th ontopic.
How to program a Frontend. The core process of developing a frontend is agnostic of TD or anything for that matter, but you will need to understand how Rest APIs work to actually get anywhere!
You can send me a PM with some more information about this project and your specific requirements/timeframes and I can write you an offer
def onHTTPRequest(webServerDAT, request, response):
if request['uri'] == '/verresdevin.jpg':
fileName = 'G:/Brigatta/2023/Images/verresdevin.jpg'
with open(fileName, mode='rb') as file: # b is important -> binary
fileContent = file.read()
#response['contentType'] = 'image/jpg' # Might need content-type header
response['statusCode'] = 200 # OK
response['statusReason'] = 'OK'
response['data'] = fileContent
return response
In this example the web client requests /verresdevin.jpg and the web server loads the local(to the server) file G:/Brigatta/2023/Images/verresdevin.jpg and responds with it to the client.
The image is embedded into a web page using:
<img src="http://TOUCHDESIGNER-IP/verresdevin.jpg" /> or just <img src="/verresdevin.jpg" /> if the web page was served from the same server.
The frontend can be any framework, but lets go with Svelt. The main web server is a Python framework, Django. This runs as a separate process to TD. Django is configured with a proxy to the TouchDesigner Web Server.
Django handles most of the default web server tasks. TouchDesigner only handles TouchDesigner-specific tasks. The Django TD proxy can be used if other web-server type functionality needs to be added (caching, etc) or TD can be can be accessed directly.
A Cloudflare tunnel is used to make the Django and TouchDesigner web servers accessible externally (the public internet). This makes the project portable (physically, like on a laptop) without the URL changing.
Hello,
Thank to both of you for your precise and useful informations.
For the moment, I continue with Node-Red and OSC, it works and we have a workshop with some people to test the entire project.
I am preparing the future of the project and for that I study the different solutions.
I can now have the image on the browser, I just have to find the way to write the javascript as to change it from the server side.
Thank you,
Jacques
