분류 전체보기92 make IP camera using raspberry pi 4 (11) responsive web UI 고생하여(?) 만든 web page를 핸드폰에 띄웠을 때는 정말 당황스러웠다. UI가 엉망진창이라서.ㅎㅎ web page를 핸드폰에 띄웠을 때 최적의 사이즈로 맞춰주도록 반응형으로 변경해보고자 한다. html 코드를 수정한다. 아래는 기존의 html 코드이다. 아래는 화면크기에 따라 css가 변경되는 html 코드이다. 이렇게 바꿔준다. 이렇게하면 width가 801 pixel이상 되는 화면에서는 기존 ui가 나올 것이고, 800pixel 이하 되는 화면에서는 모바일 ui가 나올 것이다. html에 frame을 img로 넣어준 태그는 class를 부여했다. static에 들어있던 기존의 css파일을 mobile-css로 복사하여 사이즈를 수정해주자. 기존에는 50%였으나, 모바일에서는 가장 크게 보이게 .. 2022. 2. 22. make IP camera using raspberry pi 4 (12) android app 이번에 할 두가지. - 어플리케이션 실행시 핸드폰의 mac address를 읽어 url에 실어보내기. - UI 수정하기 일단 test로 url을 보냈던건 잘 동작되었다. 이제는 핸드폰의 mac address를 읽어 전송하도록 구현해야 알람기능이 완성될 수 있을 것이다. 1. app에 폰의 wifi 정보를 읽어올 수 있는 권한 주기 wifi phy의 mac address를 읽어올 것이다. AndroidManifest.xml에 아래 추가 2. wifi manager로부터 mac address 얻기 mac address를 얻어서 일전에 만들어두었던 url에 전송한다. 3. 동작테스트...! 간단간단해서 좋네. 테스트방법. 1) 어플을 실행시킨 후 motion혹은 sound on 한 상태로 save버튼을 누른다.. 2022. 2. 21. make IP camera using raspberry pi 4 (10) android web view android phone에서 web view로 앱을 개발할 계획이다. android studio설치 후 basic app project를 생성하여 시작한다. 1. app에 인터넷 사용 권한 추가 IDE 좌측에 있는 AndroidManifest.xml에 내용 추가. 웹 렌더링을 빠르게 하기 위해 hardwareAccelerated 를 추가해주었다. 2. http허용 android 9버전부터 http 접근이 금지되었다고 한다. 굳이 집에서만 쓸 어플. 그리고 https까지 적용할 시간도 없음. 솔루션탐색기에서 res directory 아래에 xml directory를 생성한다. xml directory 아래에 network_security_config.xml을 생성한다. 해당 파일 생성시 new -> fil.. 2022. 2. 21. android app 개발환경 구축 및 프로젝트 시작 android app 개발환경을 정말 오랜만에 해보는것 같다. 개발환경이 예전에 했던 것과는 많이 달라졌을 것이므로 새로 해보면서 정리한다. 라떼는 android app개발에 eclipse를 사용했었지~~~ 1. android studio 설치 android developer site에서 설치파일 다운로드 -> https://developer.android.com/studio 다운로드 완료 후 설치파일을 실행시킨다. 딱히 설정값을 변경하거나 추가할 것이 없다. 그냥 next만 누르면 된다. start android studio에 체크된 상태로 finish 버튼을 클릭한다. 2. android studio setup wizard android studio를 최초로 실행시키면 아래와 같이 setup wiza.. 2022. 2. 20. make IP camera using raspberry pi 4 (9) motion alarm setting 알람여부를 설정했으니, 실제로 알람을 보내는 기능이 필요함. 구현해보자. 1. django server에 url을 구성. sound와 motion을 각각 만들었음. sound는 나중에 구현. 2. motion eye에서 django server에 만들어 둔 url에 web hook 전송하도록 설정 3. django server는 motion eye로부터 위 url에 post를 받으면 alarm on 해둔 user를 검색하여 user에 알림을 띄움. alarm on해둔 user들에게 GET or POST를 보내려면 그들은 서버가 구동되고 있어야 한다. 이거슨 핸드폰기능으로 구현할 것이므로 좀 뒤에 해야겠다. 2022. 2. 20. make IP camera using raspberry pi 4 (8) button event 버튼이벤트 구현하기. 구현할 내용: motion과 sound alarm setting 버튼을 누를 때 각각 값을 db에 저장. 값을 저장하기 위해 save버튼을 생성했음. save버튼 클릭시 해당 page에 post로 전송되며, 이 때 check box들의 상태를 view에 전달하도록 구현. html 일부: motion {% if motion_alarm %} {% else %} {% endif %} sound {% if sound_alarm %} {% else %} {% endif %} save views.py: def index_mac(request, mac_addr): #1. find mac_addr from userlist user = User.objects.filter(Q(mac_address=m.. 2022. 2. 20. 이전 1 2 3 4 5 6 ··· 16 다음
