HW4

단국대학교 멀티미디어공학전공 HCI프로그래밍2 (2015년 가을학기) 실습

날짜: 2015년 11월 20일

 

– 실습번호 : lab-04 (Due by 12/11)

– 실습제목 : Window.Forms Controls (ListView, ComboBox, etc), RSS, XML, GMap.Net, YahooWeather, LINQ

– 실습요약 : 지도 위에 현재의 날씨 정보를 보여준다.

 

– 실습문제

Resources.zip 파일을 사용하여 imageList 를 만든다.

  1. GMap.Net 컨트롤을 설치한다.

http://www.independent-software.com/gmap-net-tutorial-maps-markers-and-polygons/

http://dis.dankook.ac.kr/lectures/hci15/?p=541 커스텀 컨트롤 추가 참고

 

        private void Form1_Load(object sender, EventArgs e)
        {
            // Initialize map:
            gMapControl1.MapProvider = GMap.NET.MapProviders.GoogleMapProvider.Instance;
            GMap.NET.GMaps.Instance.Mode = GMap.NET.AccessMode.ServerOnly;
            gMapControl1.SetPositionByKeywords(“Seoul, Korea”);
            gMapControl1.CanDragMap = true;
            gMapControl1.DragButton = MouseButtons.Left;
            gMapControl1.MouseWheelZoomType = GMap.NET.MouseWheelZoomType.MousePositionAndCenter;
            gMapControl1.MinZoom = 3;
            gMapControl1.MaxZoom = 19;
            gMapControl1.Zoom = 4;
            gMapControl1.ScrollControlIntoView(this);

            // Update gMapMarker using weather list
            UpdateWeatherMarker(weatherList); // 구현 필요 – GMapMarkerImage과 GMapMarkerCircle를 사용하여 gMapControl1에 마커를 표현
        }

 

  1. 야후 날씨 정보 Yahoo Weather RSS Feed 설명

https://developer.yahoo.com/weather/documentation.html

 

  1. WOEID (World On Earth ID) 설명

https://developer.yahoo.com/geo/geoplanet/guide/concepts.html

 

  1. WOEID.csv 파일을 읽어서 List<WOEID>를 만든다.

NEWWOEID

http://dis.dankook.ac.kr/lectures/hci15/?p=572 Person.csv 파일 읽기 참고

 

  1. WOEID (World On Earth ID)에 따라 최근 야후 날씨 정보를 Feed 할 수 있다.

string url = string.Format(“http://weather.yahooapis.com/forecastrss?w={0}”, woeid);

http://weather.yahooapis.com/forecastrss?w=1132599 Seoul Yahoo Weather RSS

Yahoo! Weather – Seoul, KR (Seoul Yahoo Weather RSS XML 파일 예시)

  1. WeatherData 클래스를 만든다.

public class Condition

{

public string Text { get; set; }

public int Code { get; set; } // 0 (tornado) 3200 (not available)

public int Temperature { get; set; } // cloudy, rain, etc

public string Date { get; set; }

public Color TemperatureColor {} // Fahrenheit Color 계산 구현요망

}

public class Forecast

{

public string Day { get; set; }

public string Date { get; set; }

public int Low { get; set; }

public int High { get; set; }

public string Text { get; set; }

public int Code { get; set; }

}

public class WeatherData

{

public long WOEID { get; set; } // LINQ join을 위해 추가

public string Title { get; set; }

public double Lat { get; set; }

public double Lon { get; set; }

public string Link { get; set; }

public Condition Condition = new Condition();

public List<Forecast> FiveForecast = new List<Forecast>();

}

 

  1. List<WOEID>를 이용해서 Rss 피드해서 List<WeatherData >를 만든다.

http://dis.dankook.ac.kr/lectures/hci13/2013/11/26/%ec%a2%85%eb%a1%9c%ea%b5%ac-%ea%b0%80%ed%9a%8c%eb%8f%99-%eb%8f%99%eb%84%a4%ec%98%88%eb%b3%b4-rss-feed/ 기상청 RSS 서비스 Parsing 예시

http://dis.dankook.ac.kr/lectures/hci12/2012/11/21/readrssfeed/ 실시간 지진 데이타 RSS Parsing 예시

 

  1. List<WeatherData>를 이용해서 GMap.NET에 marker에는 현재 날씨 상태(Code)에 따른 아이콘 이미지를 보여주고, 그 위에 현재 날씨 온도(Temperature)에 따른 색깔로 원(circle polygon)을 그려준다.

http://www.independent-software.com/gmap-net-tutorial-maps-markers-and-polygons/

class GMapMarkerCircle : GMapMarker { // 날씨 온도에 따른 색깔로 Circle을 그려주고 그 아래엔 온도를 텍스트로 보여줌

public Color MarkerColor { get; set; }

public Brush Fill = null;

// 생성자에서 Fill = new SolidBrush(MarkerColor);

public override void OnRender(Graphics g) {

g.FillEllipse(Fill, new Rectangle(LocalPosition.X – R/2, LocalPosition.Y – R/2, R, R));

}

}

class GMapMarkerImage : GMapMarker { // 날씨 상태에 따른 Image와 Tooltip으로 날씨 상태 정보를 보여줌

public Image MarkerImage { get; set; }

public override void OnRender(Graphics g) {

g.DrawImage(MarkerImage, LocalPosition.X, LocalPosition.Y, Size.Width, Size.Height);

}

}

WeatherMap

지도에서 아이콘 이미지를 오른쪽 마우스로 클릭하면 위도, 경도 정보가 텍스트박스에 나타남.

private void gMapControl1_OnMarkerClick(GMapMarker item, MouseEventArgs e) { //  내부 구현 필요

}

콤보박스(ComboBox)에서 관심 지역을 선택하면 위도, 경도 정보가  텍스트박스에 나타나고 해당 지역으로 이동함.

private void comboBox1_SelectedValueChanged(object sender, EventArgs e) { // 내부 구현 필요

}

위도 경도 정보를 넣고 ‘이동’ 버튼을 누르면 해당 지역으로 이동함.

private void button1_Click(object sender, EventArgs e) { // 내부구현 필요

}

‘선택지역 날씨 자세히 보기’ 버튼을 누르면 웹 페이지를 띄움.

private void button2_Click(object sender, EventArgs e) { // 내부구현 필요

}

WeatherWeb

‘지역 전체 날씨보기’ 버튼을 누르면 비모달형 Form2가 뜨면서 지도에 보이는 지역의 날씨 정보를 ListView로 보여줌.

private void button3_Click(object sender, EventArgs e) { // 내부구현 필요

}

WeatherList

private void Form2_Load(object sender, EventArgs e) { // 내부구현 필요

// LINQ Joined Query 를 통하여 listView item에 추가

}