카테고리 없음

017. 웹페이지에 가변저항 을 표시하기

20230919 2023. 10. 11. 17:01

연결도

전체코드 

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h> // 웹서버 관련기능 제공

#define  SensorIn A0


const char *ssid = "";
const char *password = "";
const char *mqtt_server = "";
 
ESP8266WebServer server(80);
//html 코드 한번에 저장 raw
String html = R"(
<!DOCTYPE html>
<html lang="ko">
<head>
   
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>yes</title>

    <style>
    *{
    color : black;
    }
    span{
        color : blue;
    }
    hr {
    height: 5px;
    background-color: black;
    }




    .html{
         display: flex;
            justify-content: center;
            align-items: center;


    }

    .wrap{
           
            display: flex;
            justify-content: center;
            align-items: center;
        }
   

    </style>
</head>
<body>
  <h1 class ="wrap"> 센서값 모니터링 </h1>




  <h2 id="clock" class ="wrap" style="color:black;">clock</h2>
   
    <script>
        var Target = document.getElementById("clock");
        function clock() {
            var time = new Date();

            var month = time.getMonth();
            var date = time.getDate();
            var day = time.getDay();
            var week = ['일', '월', '화', '수', '목', '금', '토'];

            var hours = time.getHours();
            var minutes = time.getMinutes();
            var seconds = time.getSeconds();

            Target.innerText =
            `${month + 1}월 ${date}일 ${week[day]}요일 ` +
            `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;
               
        }
        clock();
        setInterval(clock, 1000); // 1초마다 실행
    </script>
   
    <h3 class ="wrap">가변저항값은? : <span> %d </span></h3>
   
    <hr>
    <br>
    <p  style=color:orange > work </p>
</body>
</html>
)"; //r 내의 () 에다가 html 코드를 넣으면 한번에 저장됨

int cnt = 0;

//html 문서 안에 조도센서 값을 삽입 하는 함수
void handlePage(){
  String html_copy = html;  
  int cdsValue = analogRead( SensorIn);


  String cdsValue_s = String(cdsValue);
  Serial.println(cdsValue_s);
  html_copy.replace("%d", cdsValue_s);

  Serial.print("potentiometer value : ");
 Serial.println(cdsValue_s);

server.send(200, "text/html", html_copy); // 정상응답이면 html 콘텐츠 불러오기
} //빈칸채워 내보내기

void setup() {
  Serial.begin(115200);
 
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
 
WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");

  Serial.print("Use this URL : ");
  Serial.println(WiFi.localIP());

  server.on("/", handlePage); //키워드에 따른 함수 매핑
   // server.on("/", handlePage); "/" 랑 handle page 내용에 따라 달라짐
  server.begin();
}
 
void loop() {

  server.handleClient(); //웹서버 동작
}



 

String html = R"()";

은 괄호안에 html 코드가 들어갈수있도록 돼 있다.
이코드내에 CSS. SCRIPT 까지 들어갈수 있으며 php랑 다른 script src= 주소 은 안해봐서 모르겠다. 

 

그냥 한글을 입력하면 깨져서 나오게 되는데 
<meta charset="UTF-8"> 
 를 html 안에다가 넣어주자

스크립트는 밑에 링크에서 실시간 시간을 볼수있도록 하는 스크립트를 갖고왔다.

 

 

<meta http-equiv="refresh" content="5"> 

이코드를 넣어주면 content 의 수가 지나면 새로고침을한다. 가변저항 건들여주고 5초지나면 값이 바뀌어서 알려준다. 
하지만 필자는 이걸 쓰지 않았는데 와이파이 접속된 인터넷 느리면 

시계랑 가변저항 값이 안나와서 다시 직접 새로고침해야한다. 

 

  int cdsValue = analogRead( SensorIn);

왜 cbsValue이로 적혀있냐면 이전 코드를 다시갖고와서 사용했다. 
analogRead(값) 안에있는 값을 바꿔준뒤 

  String cdsValue_s = String(cdsValue);

문자열 로 변환해준다.

 

  html_copy.replace("%d", cdsValue_s);

변환한 문자열은 html %d 로 갈껀데 



<h3 class ="wrap">가변저항값은? : <span> %d </span></h3> 
%d 는 html %d로 이동하여 출력이 되게한다. 


보기좋게 가운데에 출력할려면 

스타일 안에다가 만들어낸 

   .wrap{
        display: flex;
        justify-content: center;
        align-items: center;
      } 

써서 넣어줘도 되고 

아니면 

html, body{
        width: 100%;
        height: 100%;
      }
      body{
        display: flex;
        justify-content: center;
        align-items: center;
      }

를사용하여 

<html>
<body>

</bodt> 

</html> 
내에 적용시킬수 있다. 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------

 

 

 

코드 쓰면서 도움이 된 스크립트 

시간을 알려주는 자바스크립트 

https://cocoon1787.tistory.com/539

 

[WEB] JavaScript로 HTML 문서에 실시간 시간 표시하기

개발환경 : Windows10, VScode 안녕하세요 이번 시간에는 자바스크립트로 html문서에 실시간으로 시간을 표시하는 방법에 대해 알려드리도록 하겠습니다. 화면에는 월, 일, 요일을 표시하고 시, 분, 초

cocoon1787.tistory.com

새로고침할때 사용한 코드 
https://bskyvision.com/entry/html-5%EC%B4%88%EB%A7%88%EB%8B%A4-%EC%9E%90%EB%8F%99%EC%9C%BC%EB%A1%9C-%EC%9B%B9-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90-%EC%83%88%EB%A1%9C%EA%B3%A0%EC%B9%A8%EC%9D%84-%ED%95%B4%EC%A3%BC%EA%B3%A0-%EC%8B%B6%EB%8B%A4%EB%A9%B4

 

[html] 5초마다 자동으로 웹 페이지를 새로고침 해주고 싶다면?

html 문서의 사이에 다음의 코드를 넣어주면, 해당 페이지는 5초마다 자동으로 새로고침(refresh)됩니다. 숫자를 10으로 바꾸면 10초마다 refresh 됩니다. (이 글은 2021-5-11에 마지막으로 수정되었습니

bskyvision.com

가운데 정렬할때 사용하기위하 사용한 코드 
https://velog.io/@jary/flex%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%A0%95%EB%A0%AC

 

[CSS] flex를 이용한 가운데 정렬

마크업에서 가장 많이 사용되는 수평,수직 가운데 정렬을 하는 방법에 대해 정리한다. 내가 사용하려고

velog.io