<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="framework7.min.css">
<title>Smart.c mjpg example</title>
<style type="text/css">
.image img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- Views -->
<div class="views">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
<div class="left">
<a href="docs/docs/doc.html" class="link" onclick="location='docs/docs/doc.html'">
<span>About</span>
</a>
</div>
<div class="center sliding">Remote Camera</div>
<div class="right sliding">
<a href="https://github.com/cesanta/mongoose/tree/master/examples/raspberry_pi_mjpeg_led" class="link" onclick="location='https://github.com/cesanta/mongoose/tree/master/examples/raspberry_pi_mjpeg_led'">
<span>Github</span>
<i class="icon icon-next"></i>
</a>
</div>
</div>
</div>
<!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
<div class="pages navbar-through toolbar-through">
<!-- Page, "data-page" contains page name -->
<div data-page="index" class="page">
<!-- Scrollable page content -->
<div class="page-content">
<div class="content-block-title">Camera View</div>
<div class="content-block image">
<img src="/mjpg">
</div>
<div class="content-block-title">Device Control</div>
<div class="list-block">
<form action="/api" method="GET" enctype="application/json"
id="form-control">
<ul>
<!-- Switch (Checkbox) -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">LED on/off</div>
<div class="item-input">
<label class="label-switch">
<input type="checkbox" name="onoff">
<div class="checkbox"></div>
</label>
</div>
</div>
</div>
</li>
</ul>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="framework7.min.js"></script>
<script type="text/javascript">
var myApp = new Framework7({
pushState: true,
swipePanel: 'left',
// ... other parameters
});
Dom7(document).on('change', '#form-control', function(ev) {
var data = myApp.formToJSON('#form-control');
var json = JSON.stringify(data);
Dom7.ajax({
url: '/api',
method: 'POST',
contentType: 'application/json',
data: json
});
});
</script>
</body>
</html>