Spring MVC2 - 6 - (1). SpringMVC2에 아두이노와 시리얼 통신

void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);

  pinMode(13, OUTPUT);  //  아두이노의 13번핀 옆에 L이라는 글자 옆에 LED가 있다.
                        //  이 LED를 On/Off할 수 있다.
}

void loop() {
  // put your main code here, to run repeatedly:
  Serial.print(1);

  delay(1000);

  Serial.print(0);

  delay(1000);
}

//  data를 받기
void serialEvent()
{
  char c = Serial.read();

  if (c == '1')       digitalWrite(13, HIGH);
  else if (c == '0')  digitalWrite(13, LOW);
}

자바에서 바로 Web Server로 직접 가지 못한다.
자바에서 웹 서버 접속을 url활용
자바에서 웹으로 가기 위해서는 소켓을 만들던 인터페이스가 필요하다.

springmvc2프로젝트로 이동한다.

view폴더에 arduino.jsp파일을 만든다.

arduino.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 
	<meta charset="UTF-8">
	<title>Hello</title>
	<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
	<style>
		 body {
			background-color: hsl(0, 60%, 65%);
			transition: background-color 1s; 
		} 

		h1 {
			font-family: 'Lato', sans-serif;
			font-size: 120px;
			font-weight: 100;
			color: white;
			text-align: center;
			margin: 60px;
		}

		h1:before{
			content: attr(class) ":";
			font-size: 22px;
			position: relative;
			top: -69px;
			left: 0;
			text-transform: uppercase;
		}
</style>

</head>
<body id=b>
<h1 id=data class="data">${applicationScope.data}</h1> <!-- ServletContext를 이용한 방법 -->
<%-- <h1 id=data class="data">${data}</h1> --%>
<script>
   setInterval(function(){ location.href="/serial1" }, 3000); 
</script>
</body>
</html>

IndexController로 이동한다. 아래의 함수를 추가한다.

@RequestMapping("/serialdata")
	public void serialdata(String data, HttpServletRequest request) {
		System.out.println("web data : " +data);
		
		//	아두이노로부터 전송된 데이터를 활용하여 처리
		
		//	DB처리
		
		//	web jsp에 데이터를 보내는 처리
		ServletContext app = request.getServletContext();	//	전역 저장 객체
		app.setAttribute("data", data);
	}

ArduinoToSerial프로젝트의 Main.java를 아래와 같이 실행시킨다.

그리고 springmvc2프로젝트의 IndexController.java를 다음과 같이 실행시키자.

콘솔 창의 화면은 다음과 같이 나타난다.

그리고, IndexController에 두 함수를 추가한다.

@RequestMapping("/serial1")
	public String serialdata1() {
		return "arduino1";
	}
	
	@RequestMapping("/serial2")
	public ModelAndView serialdata(HttpServletRequest request) {
		ModelAndView mv = new ModelAndView();
		
		ServletContext app = request.getServletContext();	//	전역 저장 객체
		String data = (String)app.getAttribute("data");
		
		mv.addObject("data",data);
		mv.setViewName("arduino2");	//	arduino페이지로 이동
		
		return mv;
	}

그리고 WEB-INF/view에 기존의 arduino.jsp파일을 삭제하고

arduino1.jsp과 arduino2.jsp 파일을 만든다.

arduino1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 
	<meta charset="UTF-8">
	<title>Hello</title>
	<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
	<style>
		 body {
			background-color: hsl(0, 60%, 65%);
			transition: background-color 1s; 
		} 

		h1 {
			font-family: 'Lato', sans-serif;
			font-size: 120px;
			font-weight: 100;
			color: white;
			text-align: center;
			margin: 60px;
		}

		h1:before{
			content: attr(class) ":";
			font-size: 22px;
			position: relative;
			top: -69px;
			left: 0;
			text-transform: uppercase;
		}
</style>

</head>
<body id=b>
<h1 id=data class="data">${applicationScope.data}</h1> <!-- ServletContext를 이용한 방법 -->
<%-- <h1 id=data class="data">${data}</h1> --%>
<script>
   setInterval(function(){ location.href="/serial1" }, 3000); 
</script>
</body>
</html>

arduino2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 
	<meta charset="UTF-8">
	<title>Hello</title>
	<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
	<style>
		 body {
			background-color: hsl(0, 60%, 65%);
			transition: background-color 1s; 
		} 

		h1 {
			font-family: 'Lato', sans-serif;
			font-size: 120px;
			font-weight: 100;
			color: white;
			text-align: center;
			margin: 60px;
		}

		h1:before{
			content: attr(class) ":";
			font-size: 22px;
			position: relative;
			top: -69px;
			left: 0;
			text-transform: uppercase;
		}
</style>

</head>
<body id=b>
<h1 id=data class="data">${data}</h1>
<script>
   setInterval(function(){ location.href="/serial2" }, 3000); 
</script>
</body>
</html>

Main.java를 실행시키고, 서버를 실행시키고 난후에 http://localhost:9090/serial1에 접속해보자.

그리고, http://localhost:9090/serial2호출해서 데이터가 잘 나오는지 확인하자.

아래는 두 프로젝트 전체 내용이다.

ArduinoToSerial & springmvc2.zip

0.02MB

아래의 내용에서 아두이노에 버튼을 연결하여 Serial통신을 해보자.

designatedroom87.tistory.com/346?category=909022

Spring MVC2 - 6 - (2). SpringMVC2에 아두이노와 시리얼 통신(버튼)

앞의 내용과 이어지는 부분이 있다. designatedroom87.tistory.com/345 Spring MVC2 - 6 - (1). SpringMVC2에 아두이노와 시리얼 통신 아래의 내용에 이어지는 내용이다. designatedroom87.tistory.com/344?catego..

designatedroom87.tistory.com

'JAVA > 웹 프로그래밍 - Spring' 카테고리의 다른 글

Spring MVC2 - 7. Web Socket( Led on/off, 서보모터 제어) (0)	2020.12.24
Spring MVC2 - 6 - (2). SpringMVC2에 아두이노와 시리얼 통신(버튼) (0)	2020.12.22
Spring MVC2 - 5. SpringMVC2 (0)	2020.12.21
Spring MVC2 - 4. MyBatis (0)	2020.12.18
Spring MVC2 - 3. Spring을 통해서 DB에 접근하기 (0)	2020.12.17

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

인기포스트

ABOUT ME

Design Design

'JAVA > 웹 프로그래밍 - Spring' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

인기포스트

ABOUT ME

'JAVA > 웹 프로그래밍 - Spring' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역