Use TOPs as Pictures

Having a website only displaying text is kinda boring. To enhance the feedback on the user we can also easily display the content of a TOP on our website.
First, lets put some TOP in our network. I’m just placing a NoiseTOP, but you can choose any TOP displaying something.
To refference an Image in html, we use the <img> tag with a src parameter to define the path to our top.
Add the following line to the text1 operator:

<img src = "noise1">

This is a relative link to noise1. As we are already inside of /project1 with out website, we do not need to specify the complete path again. But if you want to refference any operator in your project without taking care of your current location in the network lead the uri with an /. Our img-tag would become

<img src = "/project1/noise1">

Loading this website will not work at the moment, as we can only handle text elements.
The first thing we will have to do is differ between our target operators. Luckily, there are already method of the op class for us to check the type of the operator. With isDAT and isTOP we know that it is save to perform certain actions. Lets add the first line below our target_operator is None block.

if target_operator.isDAT: response['data'] = target_operator.text

isDAT returns a boolean value, True or False. We don’tactually need to use a == operator as we get the condition right away. This way we can write neat code. Just something to keep in mind, we will use something similiar later.
But how do we get the content of our top? We cannot just send all the RGB Values for every pixel to the browser. We need to compress our top into a a filelike format for the browser to read. We could save our TOP and read the data back in. But luckily we have the saveByteArray function of the top, returning all the data we need. So lets add the following line

if target_operator.isTOP: response['data'] = target_operator.saveByteArray('.png')

And lastly, to get it work, we have to get rid of the last line in our callback still overriding our data in the response dictionary. Lets give it a try.

The function should now look like that:

def onHTTPRequest(webServerDAT, request, response):
	debug( request['uri'] )
	target_operator = op( request['uri'] )
	if target_operator is None:
		response['statusCode'] = 404 #Missing File
		response['statusReason'] = 'Operator does not exist'
		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