mirror of
https://github.com/cesanta/mongoose.git
synced 2024-12-23 07:54:16 +08:00
109 lines
3.8 KiB
HTML
109 lines
3.8 KiB
HTML
|
<!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>
|