SMALL
대략 아래와 같은 UI를 만들고자 한다. 그림판으로 그려봤다.
지난번에 스트리밍에 실패해서 캡쳐화면만 남겨놨지만 refresh버튼을 눌러 언제든 화면갱신을 할 수 있도록 해보고자 한다.
노란선은 대략 table 모양이랄까.
역시 눈에 보이는건 순식간에 만들어진다.
여기서 refresh와 on/off 버튼들을 버튼으로 바꿔주어야 한다.
먼저 refresh 버튼을 해보자.
refresh의 기능은 위의 image를 갱신하는 것.
다음으로 구현해야 할 것은 db.
페이지를 불러올 때 db에서 motion, sound alarm설정값을 불러와서 화면에 표시해주어야 한다.
그리고 버튼을 눌렀을 때 db에 해당 값을 저장해주어야 한다.
지금은 버튼을 눌러도 아무런 동작을 하지 않는다.
모양을 다듬어보자.
온갖 구글링 다 해가면서 만들었는데 솔직히 맘에 안든다.
그러나 더 이상은 못하겠다. 표시할것만 표시하면 된다.....
html:
<!DOCTYPE html>
{% load static %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body style="text-align:center;">
<h1>dreaming my baby</h1>
<img src="{% url 'video_feed' %}" width="50%" height="50%">
<table align="center">
<tr>
<th> </th>
<th> </th>
<th> </th>
<th align="right">
<input type="button" class="button1" id="refresh" value="refresh">
</th>
</tr>
<tr>
<th align="left">alarm settings</th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<th align="right">motion</th>
<th align="left">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</th>
<th align="right">sound</th>
<th align="left">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</th>
</tr>
</table>
</body>
</html>css:
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap");
.button1 {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
padding: 0.5rem 1rem;
font-family: "Noto Sans KR", sans-serif;
font-size: 2rem;
font-weight: bold;
text-align: center;
text-decoration: none;
display: inline-block;
width: auto;
border: none;
border-radius: 5px;
}
table {
width: 50%;
font-size: 2rem;
}
다음엔 버튼기능 구현ㄱㄱ
LIST
'개발Study > IP Camera' 카테고리의 다른 글
| make IP camera using raspberry pi 4 (8) button event (0) | 2022.02.20 |
|---|---|
| make IP camera using raspberry pi 4 (7) model (0) | 2022.02.12 |
| make IP camera using raspberry pi 4 (5) django server (0) | 2022.01.28 |
| make IP camera using raspberry pi 4 (4) motion detect test (0) | 2022.01.28 |
| Web hook (0) | 2022.01.25 |
댓글