반응형 Javascript38 textarea 글자 수 제한 textarea의 글자수를 제한하고 alert을 출력하는 것을 생성자 함수 형태로 만들었다. 예시를 들면 아래와 같다. 위와 같이 titleM과 titleMLimit으로 연관된 이름으로 생성을 하고 자바스크립트로 아래에서 new limitTextArea('titleM',0,10); 형태로 넣어서 연결 시켜주면 된다. 2021. 12. 24. threejs 오브젝트 출력, 텍스쳐 입히기, 마우스 스크롤로 회전(임시) 샘플 어쩌다 보니 threejs파일에 대해서 조금 알아보게되었다. 3d로 만들어진 오브텍트와 텍스쳐를 입히는게 가능하고 웹상에서 다양한 이벤트들에 대해서도 동작을 시킬 수 있는것 같다. 나도 정확히 몰라서 다른 블로그, 티스토리 들을 찾아다녔으며 오브젝트 출력, 텍스쳐 입히기 소스를 찾았으나 화면에 뜨지 않았다. 여기에서 중요한점은 * 로컬에서 실행 하더라도 웹 서버를 이용해서 테스트 할것(그러지 않을 시 파일 읽어 들이는데 오류 발생) * 마우스 스크롤로 회전은 임시로 만든건데(정말 임시로...) 어떻게 스크롤로 이동 시켜야할지 아직은 OrbitControls를 정확히 모르겠다. 그래서 하다보니 임시로 offset값을 + 또는 - 로 줘서 회전하도록 변경하였다. 그리고 가장 도움이 된 곳의 링크 https:.. 2021. 12. 14. mapbox features 정보에 대한 삽질의 기록 하고자 했던것은 간단했다. 선택한 아이템의 state에 active를 true로 주는것. 그러기 위해서는 현재 선택된 아이템에 접근하는것과 state를 바꿔주는것.. state를 바꾸는것은 map.setFeatureState를 통해서 간단히 되었다. 그럼 해당 id를 가져와야 하는데 그거는 e.features[0].id로 간단히 가져와 졌었다...물론 그거를 모르고 나는 map.querySourceFeatures라는 방법과 많은 방법으로 시도를 했었다. 아래의 코드에 있는 주석 처리된 시도1~4가 삽질했던 기록이다. 그 중에서 가장 이해 안된것은 querySourceFeatures를 사용해서 feature를 가져올때 filter를 사용했는데 그게 properties의 값을 체크하는 용도로만 쓰였다는 것이.. 2021. 8. 23. mapbox 타일 불러오기 + 브이월드(공간정보 오픈플랫폼) 타일 사용 진행중인 프로젝트에서 지도의 타일을 변경해야하는 경우가 발생했었다. 지도는 mapbox라는 플랫폼을 사용중고, mapbox에서는 다양한 api들을 제공한다. 네이버 지도와의 차이를 말한다면 솔직히 큰 차이가 있는가 싶다. 네이버에서도 엄청 많은 기능들을 지도 API에서 제공을 하니깐.... 그래도 mapbox는 나름 유명한 대기업들이 사용중인것으로 나타나며 새로운 신기한 기술들이 많이 적용 가능하다. 3D같은거라던가.... 중요한점은 프로젝트에서 mapbox를 쓴다는것 타일을 변경하기 위해서는 1. 타일 적용 코드 2. 타일 url 이렇게 두가지가 필요하다. mapbox에서의 타일 적용 코드는 아래의 샘플 페이지에서 확인 가능하다. Mapbox에서 타일 적용 코드 https://docs.mapbox.co.. 2021. 7. 27. npm node-rtsp-stream(최종 버전) 전체 과정 node-rtsp-stream 삽질 - 1부 node-rtsp-stream 삽질 - 2부(개선) 어제까지도 이걸로 삽질을 많이 했다. 아래 코드의 내용을 설명 하자면.. 1. rtspList에 있는것을 반복문 돌면서 각각의 stream을 생성하면서 안에 stream에 저장을 시킴 2. 각 stream 마다 ffmpegStderr을 체크하면서 값이 새로 들어오면 시간을 갱신 3. 각 stream을 1초마다 체크하는 타이머를 만들었으며, 현재시간, stream의 마지막 시간의 초를 비교 4. 5초 이상 차이가 나면 해당 스트림 정지 밎 재시작 오히려 어제보다 코드 자체는 더 깔끔해진듯 하다. 이 방식이 효율적인지 아닌지는 모르겠다. 일단 node, rtsp에 대해서 잘 모르는 상태에서 처리를 하려.. 2021. 7. 8. npm node-rtsp-stream 전체 과정 node-rtsp-stream 삽질 - 1부 node-rtsp-stream 삽질 - 2부(개선) 이번 프로젝트에서 실제 운행중인 차량의 영상의 송출이 필요했다. 데모용이어서 크게 생각을 하지 않고 ip카메라를 이용해서 송출하고 웹 페이지에서 그 화면을 보여주면 된다고 간단하게만 생각했다. 알아보니 웹에서는 rtsp를 바로 출력할 수는 없고 ws(웹소켓)으로 변환을 하고 그것을 출력 해야했다. 물론 위의 방법도 Node.js를 사용하면 간단하게 해결할 수 있었다. 정말 다양한 모듈들을 지원하니...시간 날때 반드시 Node.js를 공부 해봐야겠다. 사설은 치우고... ip카메를 연결하고 해당 카메라의 공인ip를 node-rtsp-stream에 입력만 해주면 정말 간단하게 끝이 났다. 그리고 웹에.. 2021. 7. 6. 이전 1 ··· 3 4 5 6 7 다음 728x90
