[Twisted-web] Python and Cors

27 Aug 2017

      First post so forgive me if I am not explaining this right.

I am trying to make a baby cam and then heavily document it for everyone to
have access to. I am using a Raspberry Pi with Rasbian. I am using
mjpg-streamer for the streaming with no problems.

The problem is I am also using two servos for pan and tilt. To accomplish
this I am using an Arduino Uno. This is so I can add IR lighting for night
vision, etc later. I am not a programmer so this is getting frustrating
after a few weeks of failure.

How is it failing you might ask..well, its working perfectly with only ONE
exception:
Every time I push the button for left/right/up/down I get this:

XMLHttpRequest cannot load http://192.168.1.122:81/servos.rpy?value=100P.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://192.168.1.122:9000' is therefore not allowed
access.

On the local area network, it still works, but taking it to the internet it
does not.

Here are the two programs that make this happen. One is servos.rpy and the
other is the supporting HTML/Get script;
****
servos.rpy
-----------------------------------
# Import necessary files
import serial
from twisted.web.resource import Resource
# Setup Arduino at correct speed
try:
        arduino = serial.Serial('/dev/ttyACM0', 9600)
except:
        arduino = serial.Serial('/dev/ttyACM1', 9600)

class MoveServo(Resource):
        isLeaf = True
        def render_GET(self,request):
                try:
                # Send value over serial to the Arduino
                        arduino.write(request.args['value'][0])
                        return 'Success'
                except:
                        return 'Failure'

resource = MoveServo()
***

Now for the HTML/Get script:

**
<!doctype html>
<html>
<head>
<title>Make Use Of DIY Security Camera</title>
<style type="text/css">
#container {
/* center the content */
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<img src="/?action=stream" /><br>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><br
/>
<button onclick="servos.move('P', 10)">Left</button>
<button onclick="servos.move('P', -10)">Right</button>
<button onclick="servos.move('T', -10)">Down</button>
<button onclick="servos.move('T', 10)">Up</button>
</div>
</body>
<script>
var servos;
$( document ).ready(function() {
servos = moveServos();
});
function moveServos() {
// Store some settings, adjust to suit
var panPos = 70,
tiltPos = 90,
tiltMax = 170,
tiltMin = 45,
panMax = 170,
panMin = 20;
return {
move:function(servo, adjustment) {
var value;
if(servo == 'P') {
if(!((panPos >= panMax && adjustment > 0) || (panPos <= panMin &&
adjustment < 0))) {
// Still within allowed range, "schedule" the movement
panPos += adjustment;
}
value = panPos + 'P';
}
else if(servo == 'T') {
if(!((tiltPos >= tiltMax && adjustment > 0) || (tiltPos <= tiltMin &&
adjustment < 0))) {
// Still within allowed range, "schedule" the movement
tiltPos += adjustment;
}
value = tiltPos + 'T';
}
// Use AJAX to actually move the servo
$.get('http://192.168.1.122:81/servos.rpy?value=' + value);
},
}
}
</script>
</html>

*****
Twisted is started:  sudo twistd -n web -p 81 --path /usr/local/www/

I would be forever grateful if someone could take a serious look at this
and tell me where I am going wrong. Once this is fixed, I can start
documenting the entire system for everyone. Thank you!

Deve

[Twisted-web] Python and Cors

Deve Krehbiel