add jquery 3 & bootstrap 3

master
zenls 6 years ago
parent f00215deda
commit dcf2c676ce
  1. 29
      README.md
  2. 6
      www/css/bootstrap.min.css
  3. 23
      www/css/main.css
  4. 78
      www/index.html
  5. 34
      www/index.php
  6. 70
      www/info.html
  7. 7
      www/js/bootstrap.min.js
  8. 2
      www/js/jquery-3.3.1.min.js
  9. 68
      www/style.css

@ -84,8 +84,35 @@ sudo nano /etc/default/motion
```ffmpeg -i http://10.174.136.143:8081/ -t 00:00:10 out_video.avi```
5. Разбираемся с сервоприводами.
Есть 3 спосрба управления сервами с помощью ARM процессора:
* Софтверный ШИМ
* Использование внешнего контроллера (например ардуино)
* Генерация ШИМ с помощью [DMA](https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D1%8F%D0%BC%D0%BE%D0%B9_%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF_%D0%BA_%D0%BF%D0%B0%D0%BC%D1%8F%D1%82%D0%B8)
Первый способ сьедает время процессора, 2й много поять, 3й идеален для нас. Не будем изобретать велосипед и возьмем проект с гита.
```bash
git clone http://github.com/richardghirst/PiBits.git
cd PiBits/ServoBlaster/user
make
sudo make install
# Проверяем установился ли Servoblaster корректно:
ls /dev | grep servoblaster
#Должны увидеть:
servoblaster
servoblaster-cfg
# Теперь чтобы управлять сервой пробуем
echo 1=100 > /dev/servoblaster
# 1 - номер сервы, 100 - угол поворота
```
N. Пишем на пыхе
5. Пишем на пыхе

File diff suppressed because one or more lines are too long

@ -0,0 +1,23 @@
h1.page-header {
margin-top: -5px;
}
.sidebar {
padding-left: 15;
}
.main-container {
background: #FFF;
padding-top: 15px;
margin-top: -20px;
}
.footer {
width: 100%;
}
img {
max-width: 100%;
height: auto;
}

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<!-- JS -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Умный дом</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="https://gitlab.com/zenls/rpi_remote_cam.git" target="_blank">Gitlab</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid main-container">
<div class="col-md-2 sidebar">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="index.html">Видео стрим</a></li>
<li><a href="info.html">Информация</a></li>
</ul>
</div>
<div class="col-md-10 content">
<div class="panel panel-default">
<div class="panel-heading">
Видео
</div>
<div class="text-center">
<br>
<img style="-webkit-user-select: none;" src="http://10.174.136.143:8081/">
<br>
<br>
<form class="range-field">
<input type="range" value="20" min="0" max="100" oninput="alert('Клик!')" />
</form>
</div>
</div>
</div>
<footer class="pull-left footer">
<p class="col-md-12">
<hr class="divider">Проект создан в образовательных целях, при поддержке <a href="https://t.me/baumanrobotics">Bauman
Robotics</a>.</a>
</p>
</footer>
</div>
</body>
</html>

@ -1,34 +0,0 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>Чето напишем</h1>
</div>
<div id="menu">
<table>
<tr>
<td id="menu1"><a href="index.php">Page 1</a></td>
</tr>
<tr>
<td id="menu2"><a href="stitch.php">Page 2</a></td>
</tr>
<tr>
<td id="menu3"><a href="slam.php">Page 3</a></td>
</tr>
</table>
</div>
<div id="content">
<img style="-webkit-user-select: none;" src="http://10.174.136.143:8081/">
</div>
<div id="clear">
</div>
</div>
</body>
</html>

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<!-- JS -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Умный дом</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="https://gitlab.com/zenls/rpi_remote_cam.git" target="_blank">Gitlab</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid main-container">
<div class="col-md-2 sidebar">
<ul class="nav nav-pills nav-stacked">
<li><a href="index.html">Видео стрим</a></li>
<li class="active"><a href="info.html">Информация</a></li>
</ul>
</div>
<div class="col-md-10 content">
<div class="panel panel-default">
<div class="panel-heading">
Информация про автора и группу
</div>
<div class="panel-body">
Что-то написать. Может картинку добавить?
</div>
</div>
</div>
<footer class="pull-left footer">
<p class="col-md-12">
<hr class="divider">Проект создан в образовательных целях, при поддержке <a href="https://t.me/baumanrobotics">Bauman Robotics</a>.</a>
</p>
</footer>
</div>
</body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1,68 +0,0 @@
h1 {
color: #006363;
font-size: 50pt;
font-family: Georgia, Times, serif;
font-weight: normal;
}
body {
background: #e2e2e2;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}
#header {
text-align: center;
background: #5CCCCC;
height: 100px;
width: 900px;
}
#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}
#menu {
background: #ffffff;
float: left;
width: 150px;
height: 600px;
}
#content {
margin-top:30px;
background: #ffffff;
float: right;
width: 750px;
height: 600px;
}
#footer {
background: #838283;
height: 180px;
width: 900px;
}
#clear {
clear:both;
}
#textArea{
background: #EEFFFF;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 15px;
resize: none;
}
Loading…
Cancel
Save