Merge pull request #18 from ymw0407/NoticeAlert

Update : control UI 수정

Author: ymw0407

main-NoticeAlert/home/arduino/windowBlind/windowBlind.ino

@@ -11,18 +11,18 @@
 #define IN6 22
 #define IN7 14
 #define IN8 12
-#define W_STEP 685
+#define W_STEP 510
 #define B_STEP 3125
 
 const int stepsPerRevolution = 64;  // change this to fit the number of steps per revolution
 
 // initialize the stepper library
 Stepper window(stepsPerRevolution, IN1, IN3, IN2, IN4);
-Stepper blind(stepsPerRevolution, IN5, IN7, IN6, IN8);
+//Stepper blind(stepsPerRevolution, IN5, IN7, IN6, IN8);
 
 const char* ssid = "koss"; //사용하는 Wifi 이름
 const char* password = "a123456789!"; // 비밀번호
-const char* mqtt_server = "3.34.50.139"; // MQTT broker ip
+const char* mqtt_server = "3.34.1.95"; // MQTT broker ip
 const char* clientName = "wbController"; // client 이름
 
 WiFiClient espClient; // 인터넷과 연결할 수 있는 client 생성
@@ -83,17 +83,17 @@ void callback(char* topic, byte* payload, unsigned int uLen) {
   Serial.println(message[0]); // 1 or 0
 
   if((String)topic == "control/window"){
-    int move_step = (-W_STEP * (String(message[0]).toInt()-1)) - step1;
+    int move_step = (W_STEP * (String(message[0]).toInt()-1)) - step1;
     Serial.print("move_step: "); Serial.println(move_step);
     window.step(move_step);
     step1 += move_step;
   }
-  else if((String)topic == "control/blind"){
-    int move_step = ((B_STEP-1) * (String(message[0]).toInt()-1)) - step2;
-    Serial.print("move_step: "); Serial.println(move_step);
-    blind.step(move_step);
-    step2 += move_step;
-  }
+//  else if((String)topic == "control/blind"){
+//    int move_step = (B_STEP * (String(message[0]).toInt()-1)) - step2;
+//    Serial.print("move_step: "); Serial.println(move_step);
+//    blind.step(move_step);
+//    step2 += move_step;
+//  }
 }
 
 void setup() {
@@ -102,7 +102,7 @@ void setup() {
   setup_wifi();
 
   window.setSpeed(300);
-  blind.setSpeed(300);
+  //blind.setSpeed(300);
 
   client.setServer(mqtt_server, 1883); //mqtt 서버와 연결(ip, 1883)
   client.setCallback(callback); //callback 함수 세팅
@@ -113,37 +113,28 @@ void loop() {
   client.loop(); //연결을 계속해서 유지하고 들어오는 메시지를 확인할 수 있도록 함
   int x = analogRead(36);
   int y = analogRead(39);
-  if(x > 3000 && step1 >= -W_STEP * 4){
+  
+  if(x > 3000 && step1 >= 0){
     window.step(-1);
     step1--;
     Serial.println("X-- ");
   }
-  else if(x < 1000 && step1 <= 0){
+  else if(x < 1000 && step1 <= W_STEP * 4){
     window.step(1);
     step1++;
     Serial.println("X++ ");
   }
-  else if(y > 3000 && step2 >= 0){
-    blind.step(-1);
-    step2--;
-    Serial.println("y-- ");
-  }
-  else if(y < 1000 && step2 <= B_STEP * 4){
-    blind.step(1);
-    step2++;
-    Serial.println("y++ ");
-  }
-//  else if (prev1 != step1 || prev2 != step2){
-//    char wbMessage[100] = "";
-//    sprintf(wbMessage, "{'control': 'wb', 'wb': {'window1':%d, 'blind1':%d}}", step1, step2);
-//    Serial.print("Publish message: ");
-//    Serial.println(wbMessage);
-//    client.publish("status/wb", wbMessage);
-//    prev1 = step1;
-//    prev2 = step2;
+//  else if(y > 3000 && step2 >= 0){
+//    blind.step(-1);
+//    step2--;
+//    Serial.println("y-- ");
 //  }
+//  else if(y < 1000 && step2 <= B_STEP * 4){
+//    blind.step(1);
+//    step2++;
+//    Serial.println("y++ ");
 //  Serial.print("X: ");
 //  Serial.print(x);
 //  Serial.print(" Y: ");
 //  Serial.println(y);
-}
+}

main-NoticeAlert/wallpad/control/.gitignore

@@ -0,0 +1 @@
+.eslintcache

main-NoticeAlert/wallpad/control/control_app/.eslintcache

@@ -1,20 +1,46 @@
+
 tbody {
-  border : 15px solid white;
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
 }
 
 input[type="checkbox"] {
-  margin-left: 70px;
-  width: 1.8rem;
-  height: 1.8rem;
-  border-radius: 50%;
-  border: 10px solid white;
-  appearance: none;
-  cursor: pointer;
-  transition: background 0.2s;
+  position: absolute;
+  padding: 0;
+  overflow: hidden;
+  clip:rect(0,0,0,0);
+  border: 0;
+  padding-right: 10px;
+}
+
+.button {
+  display: block;
+  position: relative;
+  float: left;
+  width: 230px;
+  height: 140px;
+  padding: 0;
+  margin: 10px 10px 0px 0;
+  font-size: 1.3rem;
+  font-weight: 600;
+  text-align: center;
+  line-height: 50px;
+  color: rgb(39, 28, 28);
+  border-radius: 30px;
+  transition: all 0.2s ;
 }
 
-input[type="checkbox"]:checked {
-  margin-left: 70px;
-  background: rgb(226, 93, 69);
-  border: none;
+.btnLightBlue {
+  background: rgb(226, 207, 62);
+  border: #c16a2c;
+}
+.btnLightBlue.btnPush {
+  box-shadow: 0px 30px 0px 0px rgb(181, 110, 67);
+}
+.btnLightBlue.btnPush:active {
+  padding-top: 14px;
+  padding-bottom: 5px;
+  box-shadow: 0px 0px 0px 0px #c16a2c;
 }

main-NoticeAlert/wallpad/control/control_app/src/views/CheckBox.css

@@ -8,14 +8,16 @@ const bridge = new LS2Request();
 const StyledTable = styled.table`
   text-align: center;
   border-collapse: collapse;
+  background-color: rgb(37, 100, 101);
   tbody{
     tr{
       td{
         padding: 10px 10px;
-        border-bottom: 5px solid #eee;
+        padding-right: 10px;
         color: white;
         font-size: 25px;
         font-weight: 700;
+        background-color: rgb(37, 100, 101);
       }
     }
   }
@@ -84,8 +86,8 @@ export default function CheckBox() {
                   onChange={(e) => handleSingleCheck(e.target.checked3, data.id)}
                   // 체크된 아이템 배열에 해당 아이템이 있을 경우 선택 활성화, 아닐 시 해제
                   checked3={checkItems3.includes(data.id) ? true : false} />
+                <button className='button btnPush btnLightBlue'>{data.title}</button>
               </td>
-              <td className='second-row'>{data.title}</td>
             </tr>
           ))}
         </tbody>

main-NoticeAlert/wallpad/control/control_app/src/views/CheckBox.js

@@ -8,15 +8,17 @@ const bridge = new LS2Request();
 const StyledTable = styled.table`
   text-align: center;
   border-collapse: collapse;
+  background-color: rgb(37, 100, 101);
   tbody{
     tr{
       td{
         padding: 10px 10px;
-        border-bottom: 5px solid #eee;
         color: white;
         font-size: 25px;
         font-weight: 700;
+        background-color: rgb(37, 100, 101);
       }
+
     }
   }
   .second-row{
@@ -84,8 +86,8 @@ export default function CheckBox2() {
                   onChange={(e) => handleSingleCheck(e.target.checked2, data.id)}
                   // 체크된 아이템 배열에 해당 아이템이 있을 경우 선택 활성화, 아닐 시 해제
                   checked2={checkItems2.includes(data.id) ? true : false} />
+                  <button className='button btnPush btnLightBlue'>{data.title}</button>
               </td>
-              <td className='second-row'>{data.title}</td>
             </tr>
           ))}
         </tbody>

main-NoticeAlert/wallpad/control/control_app/src/views/CheckBox2.js

@@ -1,41 +1,45 @@
 .list {
-  padding-left: -100px;
   display: flex;
   float: left;
   text-align: center;
   margin-top: 5px;
-  margin-left: -100px;
+  background-color: rgb(37, 100, 101);
 }
 .tem1 {
-  padding-right: 250px;
+  padding-right: 120px;
+  background-color: rgb(37, 100, 101);
 }
 .tem1 p {
-  font-size: 130px;
+  font-size: 90px;
   font-weight: 600;
   padding-top: 50px;
-  padding-bottom: 250px;
+  padding-bottom: 150px;
   margin-left: 30px;
   color: white;
+  background-color: rgb(37, 100, 101);
 }
 .tem2 {
-  padding-right: 250px;
+  padding-right: 120px;
+  background-color: rgb(37, 100, 101);
 }
 .tem2 p {
-  font-size: 130px;
+  font-size: 90px;
   font-weight: 600;
   padding-top: 50px;
-  padding-bottom: 250px;
+  padding-bottom: 150px;
   margin-left: 30px;
   color: white;
+  background-color: rgb(37, 100, 101);
 }
 .tem3 {
-  padding-right: 150px;
+  background-color: rgb(37, 100, 101);
 }
 .tem3 p {
-  font-size: 130px;
+  font-size: 90px;
   font-weight: 600;
   padding-top: 50px;
-  padding-bottom: 250px;
+  padding-bottom: 150px;
   margin-left: 30px;
   color: white;
+  background-color: rgb(37, 100, 101);
 }