맹주환 / take_an_umbrella

Go to a project
Toggle navigation Toggle navigation pinning
맹주환
5a8edf5c 2 parents 2f615b2d 862e3743

Merge branch 'feature/Location' into feature/react.js 

# Conflicts:
#	package-lock.json
#	package.json
Inline Side-by-side
Showing 8 changed files with 262 additions and 0 deletions
<!DOCTYPE html>
<html>
<head>
<title>Take an Umbrella</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1 style="font-family:Nanum Gothic;"> Take an Umbrella </h1>
<h3 style="font-family:Nanum Gothic;"> 철학과 2017101598 맹주환 </h3>
<pre align="center" style="font-family:Nanum Gothic;" font size="20">
반가워요!
Take an umbrella는 스마트 조명 제품 Philips hue API와 기상청 공공데이터 날씨 API로 구성되어 있어요.
Hue가 연결된 WI-FI로 접속하셔서 아래의 지도로 현재 위치를 조회하시면, 해당 지역 기상 예보를 받아와 조명을 통해 우산을 챙겨야 하는지 알려줘요!
</pre>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<h1 style="font-family:Nanum Gothic;"> 당신의 현재 위치 </h1>
<div align="center">현재 위도: <span id="lat"></span></div>
<div align="center">현재 경도: <span id="lng"></span></div>
</body>
<script src="map.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAguo3zH8vWZJbzXEqyp8D8UvnBh3zX8rQ&callback=initMap&v=weekly" async> </script>
</html>
\ No newline at end of file
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
let map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 37.5642135, lng: 127.0016985 },
zoom: 10,
});
infoWindow = new google.maps.InfoWindow();
const locationButton = document.createElement("button");
locationButton.textContent = "위치 조회 하기";
locationButton.classList.add("custom-map-control-button");
map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
locationButton.addEventListener("click", () => {
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
infoWindow.setPosition(pos);
infoWindow.setContent("위치를 찾았습니다.");
infoWindow.open(map);
map.setCenter(pos);
document.getElementById("lat").innerHTML = pos.lat;
document.getElementById("lng").innerHTML = pos.lng;
// console.log(dfs_xy_conv("toXY",pos.lat,pos.lng));
},
() => {
handleLocationError(true, infoWindow, map.getCenter());
}
);
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
});
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(
browserHasGeolocation
? "Error: 위치 조회 서비스가 실패하였습니다."
: "Error: 브라우저가 위치 조회 기능을 지원하지 않습니다."
);
infoWindow.open(map);
}
\ No newline at end of file
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
h1 { text-align: center; }
h2 { text-align: center; }
h3 { text-align: center; }
#map {
width:600px;
height:400px;
margin: 0 auto;
}
.custom-map-control-button {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
height: 40px;
cursor: pointer;
}
.custom-map-control-button:hover {
background: #ebebeb;
}
\ No newline at end of file
const request = require('request');
const moment = require('moment');
require('moment-timezone');
moment.tz.setDefault("Asia/seoul");
let date = new String(get_base_date());
let time = new String(get_base_time());
var url = 'http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getVilageFcst';
var queryParams = '?' + encodeURIComponent('serviceKey') + '=5e8RQfsCMcXO61FvD7j5tgt5fHf0NYadkSaW6%2FhYQHdoxSgQFXbN7VSb4CI%2BW9scLv2usb3riB7UAGNF7Wb6nA%3D%3D'; /* Service Key*/
queryParams += '&' + encodeURIComponent('pageNo') + '=' + encodeURIComponent('1'); /* */
queryParams += '&' + encodeURIComponent('numOfRows') + '=' + encodeURIComponent('10'); /* */
queryParams += '&' + encodeURIComponent('dataType') + '=' + encodeURIComponent('JSON'); /* */
queryParams += '&' + encodeURIComponent('base_date') + '=' + encodeURIComponent(date); /* */
queryParams += '&' + encodeURIComponent('base_time') + '=' + encodeURIComponent(time); /* */
queryParams += '&' + encodeURIComponent('nx') + '=' + encodeURIComponent('55'); /* */
queryParams += '&' + encodeURIComponent('ny') + '=' + encodeURIComponent('127'); /* */
function get_base_date() // 날짜 추출 함수
{
// 0000~0210 사이 시간대에 조회시 전일(date -1)로 변경
let date =moment().format('YYYYMMDD');
let time = new String(moment().format('HHmm'));
if ('0000'<=time && time<'0210'){date -= 1}
return date
}
function get_base_time() // 시간 추출 함수
{
//단기예보
//- Base_time : 0200, 0500, 0800, 1100, 1400, 1700, 2000, 2300 (1일 8회)
//- API 제공 시간(~이후) : 02:10, 05:10, 08:10, 11:10, 14:10, 17:10, 20:10, 23:10
//- 시간대 맞추기
let time = new String(moment().format('HHmm'));
if ('0000'<=time && time<'0210'){time = '2300'}
else if ('0210'<=time && time<'0510'){time = '0200'}
else if ('0510'<=time && time<'0810'){time = '0500'}
else if ('0810'<=time && time<'1110'){time = '0800'}
else if ('1110'<=time && time<'1410'){time = '1100'}
else if ('1410'<=time && time<'1710'){time = '1400'}
else if ('1710'<=time && time<'2010'){time = '1700'}
else if ('2010'<=time && time<'2310'){time = '2010'}
else if ('2310'<=time && time<'2359'){time = '2300'}
return time
}
request({
url: url + queryParams,
method: 'GET'
}, function (error, response, body) {
console.log('Status', response.statusCode);
console.log('Headers', JSON.stringify(response.headers));
console.log('Reponse received', body);
});
//
// (사용 예)
// var rs = dfs_xy_conv("toLL","60","127");
// console.log(rs.lat, rs.lng);
dfs_xy_conv = function (code, v1, v2) {
// 소스출처 : http://www.kma.go.kr/weather/forecast/digital_forecast.jsp
// LCC DFS 좌표변환 ( code : "toXY"(위경도->좌표, v1:위도, v2:경도), "toLL"(좌표->위경도,v1:x, v2:y) )
var RE = 6371.00877; // 지구 반경(km)
var GRID = 5.0; // 격자 간격(km)
var SLAT1 = 30.0; // 투영 위도1(degree)
var SLAT2 = 60.0; // 투영 위도2(degree)
var OLON = 126.0; // 기준점 경도(degree)
var OLAT = 38.0; // 기준점 위도(degree)
var XO = 43; // 기준점 X좌표(GRID)
var YO = 136; // 기1준점 Y좌표(GRID)
var DEGRAD = Math.PI / 180.0;
var RADDEG = 180.0 / Math.PI;
var re = RE / GRID;
var slat1 = SLAT1 * DEGRAD;
var slat2 = SLAT2 * DEGRAD;
var olon = OLON * DEGRAD;
var olat = OLAT * DEGRAD;
var sn = Math.tan(Math.PI * 0.25 + slat2 * 0.5) / Math.tan(Math.PI * 0.25 + slat1 * 0.5);
sn = Math.log(Math.cos(slat1) / Math.cos(slat2)) / Math.log(sn);
var sf = Math.tan(Math.PI * 0.25 + slat1 * 0.5);
sf = Math.pow(sf, sn) * Math.cos(slat1) / sn;
var ro = Math.tan(Math.PI * 0.25 + olat * 0.5);
ro = re * sf / Math.pow(ro, sn);
var rs = {};
if (code == "toXY") {
rs['lat'] = v1;
rs['lng'] = v2;
var ra = Math.tan(Math.PI * 0.25 + (v1) * DEGRAD * 0.5);
ra = re * sf / Math.pow(ra, sn);
var theta = v2 * DEGRAD - olon;
if (theta > Math.PI) theta -= 2.0 * Math.PI;
if (theta < -Math.PI) theta += 2.0 * Math.PI;
theta *= sn;
rs['x'] = Math.floor(ra * Math.sin(theta) + XO + 0.5);
rs['y'] = Math.floor(ro - ra * Math.cos(theta) + YO + 0.5);
}
else {
rs['x'] = v1;
rs['y'] = v2;
var xn = v1 - XO;
var yn = ro - v2 + YO;
ra = Math.sqrt(xn * xn + yn * yn);
if (sn < 0.0) - ra;
var alat = Math.pow((re * sf / ra), (1.0 / sn));
alat = 2.0 * Math.atan(alat) - Math.PI * 0.5;
if (Math.abs(xn) <= 0.0) {
theta = 0.0;
}
else {
if (Math.abs(yn) <= 0.0) {
theta = Math.PI * 0.5;
if (xn < 0.0) - theta;
}
else theta = Math.atan2(xn, yn);
}
var alon = theta / sn + olon;
rs['lat'] = alat * RADDEG;
rs['lng'] = alon * RADDEG;
}
return rs;
}
\ No newline at end of file
<<<<<<< HEAD
경위도 : https://developers.google.com/maps/documentation/javascript/examples/map-geolocation?hl=ko#maps_map_geolocation-javascript
=======
https://www.data.go.kr/tcs/dss/selectApiDataDetailView.do?publicDataPk=15084084 기상청
>>>>>>> feature/add_Weather_API
......
// 서비스 제공을 위한 html 홈페이지를 express로 구현하기 (기본적인 뼈대)
var express = require('express')
var app = express(); // express 선언
const port = 10000 //임의의 포트 10000
// request 와 response 라는 인자를 줘서 콜백 함수를 만든다.
// localhost:port 브라우저에 res.sendFile() 내부의 파일이 띄워진다.
app.use(express.static(__dirname + "/html"));
app.get('/', function(req,res) {
res.sendFile(__dirname + "/html/index.html")
})
//임의의 포트 10000, 접속 주소 localhost:10000/
app.listen(port, function(){
console.log('서버 구동중 port : %d', port);
});
\ No newline at end of file