angular3 농장 온도변화 모니터 (plotly.js, RxJS) 설명:- 농장에 설치된 약 30개의 센서에서 감지하는 온도수치를 시각적으로 표현.- 5초 간격으로 서버에서 디바이스에 매핑된 약 30개의 온도에 대한 수치값을 가져와 최저/최고/평균 값을 동별로 보여준다.- Ploty를 활요해 농장을 3D 모델로 만들고, 실제 센서의 위치를 생성된 모델 안에 위치시킴으로써 최대한 현실과 비슷하게 만들어 사용자의 집중도를 높힘.- 왼쪽 위에 있는 항목들을 클릭하면 가운데 보이는 3D 농장의 레이어들이 토글되어 보이고 숨겨지고 한다. 특징: 1. blender로 3D 모델을 만든 뒤 gometry 를 뽑아냈다. (blener에서 geometry 뽑아내는 script 보기)2. 3D 모델(농장 inner/outer, 동/서/남/북, 센서위치)을 구성하는 geometry는 모두.. 2024. 5. 20. Angular project, Plotly.js & WebGL is not supported issue 로컬에서는 Plotly가 잘 작동되었다. 그리고 배포이후에도 잘 작동되었는데, 1개월 후 정도 지난 뒤 서비스에서 "WebGL is not supported by your browser" 문구가 Plotly 차트가 있어야할 부분에 크게 써있었다.해당 문구를 클릭하면 내가 접속한 디바이스에서 WebGL이 구동될 수 있는 환경인지 확인해주는 페이지로 이동했고, 정상적으로 구동되는 것을 보여주었다. (3D 와이어프레임 상자가 회전하는 모습이 보이면 정상) 구체적인 이슈 상황을 정리하자면...1. 2D type의 그래프는 정상적으로 나오나, 3D 타입(scatter3d, mesh3d)의 그래프는 " WebGL is not supported by your browser" 문구와 함께 canvas가 생성되지 않는.. 2024. 5. 17. Angular (Service & RxJS) vs NgRx / Redux 차이점 서비스와 NgRx의 비교. 개인적으로는 전역 상태관리 라이브러리인 Redux/NgRx가 Angular에서는 필요하지 않다고 생각한다. Angular의 서비스는 싱글톤이고, 컴포넌트간 데이터를 공유할 수 있도록 하기 때문이다. chatgpt에게 "what is the difference between Service from Angular and Redux"라고 질문했을때 4가지 항목으로 분류해 그 차이점을 설명한다. 1) 상태 업데이트의 추적성: Redux에서는 상태 업데이트가 엄격하게 추적되고 기록됩니다. 이는 디버깅을 용이하게 만들어줍니다. 반면에 Angular 서비스에서는 상태 변경이 어떻게 발생했는지 추적하기가 훨씬 어렵습니다. 각 컴포넌트가 서비스의 상태를 직접 변경할 수 있으며, 이는 예상치 못.. 2024. 5. 9. 이전 1 다음
