Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
107 lines (97 sloc) 2.97 KB
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
<title>MJPG Streaming from Raspberry Pi</title>
<link href='/favicon.ico' rel='shortcut icon'>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>
<!-- css -->
<link rel="stylesheet" href="styles.css" type="text/css" />
<!-- jquery -->
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="jquery.rotate.1-1.js"></script>
<!-- bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<!-- coffeescript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.6.3/coffee-script.min.js"></script>
</head>
<body>
<div id="wrap">
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img class="logo" src="/favicon.ico"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#" id="rotate">Rotate</a>
</li>
<li>
<a href="#" id="mirror">Mirror</a>
</li>
<li>
<a href="#" id="flip">Flip</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- -->
</ul>
</div>
</div>
</div>
<div class="container">
<div class="text-center">
<img id="streaming" class="img-responsive img-thumbnail" src="/?action=stream" />
</div>
</div>
</div>
</body>
<script type="text/coffeescript">
# default values
angle = 0
flipped = false
mirrored = false
# refresh current rotation
refreshRotation = ->
$('#streaming').attr('class', "img-responsive img-thumbnail x#{if flipped then '-flipped' else ''}#{if mirrored then '-mirrored' else ''}-rotated-#{angle}")
return
# initialize
initialize = ->
# set initial orientation
refreshRotation()
# set rotation angle angle and toggle rotate class
$('#rotate').click ->
angle = (angle + 90) % 360
refreshRotation()
# toggle mirror class component
$('#mirror').click ->
mirrored = !mirrored
refreshRotation()
# toggle flip class component
$('#flip').click ->
flipped = !flipped
refreshRotation()
return
$ ->
$.ajax(
url: '/config.json'
type: 'GET'
async: true
success: (msg) ->
angle = msg.angle
flipped = msg.flipped
mirrored = msg.mirrored
initialize()
error: ->
initialize()
)
return
</script>
</html>