-@charset "utf-8";\r
-@import url("fonts.css");\r
-body {\r
- /*position: fixed;*/\r
- width:100%;\r
- height:100%;\r
- top: 0px;\r
- bottom: 0px;\r
- left: 0px;\r
- right: 0px;\r
- background-color: white;\r
- margin: 0;\r
- padding: 0;\r
- display:flex;\r
- flex-direction: column;\r
-}\r
-\r
-.plugin-container {\r
- flex: 1;\r
- overflow:auto;\r
-}\r
-\r
-#action_bar {\r
- border-bottom: rgba(0,0,0,0.07) solid 1px;\r
- display:flex;\r
- background-color: #fafafa;\r
-}\r
-\r
-#header_bar {\r
- min-height: 50px;\r
- display:flex;\r
- margin-left: auto;\r
- margin-right: 10px;\r
-}\r
-\r
-#action_bar,\r
-#action_bar_back_button,\r
-#action_bar_title,\r
-#action_bar_menu {\r
- min-height: 48px;\r
-/* background-color: #fafafa;*/\r
-}\r
-\r
-#action_bar_more {\r
- width: 56px;\r
- display:flex;\r
- align-items: center;\r
- justify-content: center;\r
- cursor: pointer;\r
- margin: 15px 0 15px 15px;\r
- /*background-color: red;*/\r
-}\r
-\r
-#action_bar_more:before {\r
- content: "";\r
- background-image: url("../res/option_ic_more.svg");\r
- background-size: contain;\r
- background-repeat: no-repeat;\r
- background-position: center;\r
- width: 100%;\r
- height: 18px;\r
- display: block;\r
-}\r
-\r
-#action_bar_back_button {\r
- width: 56px;\r
- display:flex;\r
- align-items: center;\r
- justify-content: center;\r
- cursor: pointer;\r
- -webkit-tap-highlight-color: transparent;\r
-}\r
-\r
-#action_bar_menu {\r
- width: 48px;\r
- visibility:hidden;\r
-}\r
-\r
-#action_bar_title {\r
- text-overflow: ellipsis;\r
- white-space: nowrap;\r
- flex:1;\r
- margin-left : 15px;\r
-}\r
-\r
-#action_bar_title_main {\r
- font-size:23px;\r
- color: #252525;\r
- font-stretch: condensed;\r
-}\r
-\r
-#action_bar_title_sub {\r
- font-size:13px;\r
- color: #252525;\r
- opacity: 0.6;\r
- font-stretch: condensed;\r
-}\r
-\r
-#loading {\r
- display:flex;\r
- flex-direction: column;\r
-}\r
-\r
-#loading .img {\r
- width: 60px;\r
- height: 60px;\r
- animation: spin 1s linear infinite;\r
-}\r
-\r
-@keyframes spin {\r
- 0% { transform: rotate(0deg); }\r
- 100% { transform: rotate(360deg); }\r
-}\r
-\r
-#content {\r
- display: none;\r
-}\r
-\r
-.dot {\r
- fill: #499ebd;\r
-}\r
-\r
-#icon_back .back_arrow {\r
- fill: none;\r
- stroke: #499ebd;\r
- stroke-width: 7;\r
-}\r
-\r
-#icon_back {\r
- max-width:24px;\r
- max-height:24px;\r
-}\r
-\r
-#icon_menu_box {\r
- display:flex;\r
- align-items: center;\r
- justify-content: center;\r
-}\r
-\r
-#icon_menu {\r
- max-height:24px;\r
- cursor: pointer;\r
- -webkit-tap-highlight-color: transparent;\r
-}\r
-\r
-#action_bar_menu ul {\r
- position: absolute;\r
- right: 5px;\r
- padding: 0px;\r
- margin: 0px;\r
- background-color: #fafafa;\r
- max-height: 0;\r
- transition: max-height 0.15s ease-out;\r
- overflow: hidden;\r
- border-radius: 5px;\r
- z-index: 2;\r
- position:absolute;\r
- top:10px;\r
-}\r
-\r
-#action_bar_menu ul li {\r
- min-width: 150px;\r
- display: flex;\r
- align-items: center;\r
- white-space: nowrap;\r
-}\r
-\r
-#action_bar_menu ul li a {\r
- display: inline-block;\r
- margin: auto;\r
- padding: 10px;\r
- text-decoration: none;\r
- color: black;\r
- -webkit-tap-highlight-color: transparent;\r
-}\r
-\r
-#action_bar_menu ul li:hover {\r
- background: #eee;\r
-}\r
-\r
-#action_bar_menu ul li:first-child {\r
- border-radius: 5px 5px 0px 0px;\r
- border-top: 1px #bbb solid;\r
- border-left: 1px #bbb solid;\r
- border-right: 1px #bbb solid;\r
-}\r
-\r
-#action_bar_menu ul li:last-child {\r
- border-radius: 0px 0px 5px 5px;\r
- border-bottom: 1px #bbb solid;\r
- border-left: 1px #bbb solid;\r
- border-right: 1px #bbb solid;\r
-}\r
-\r
-#action_bar_menu ul li:only-child {\r
- border-radius: 5px;\r
- border: 1px #bbb solid;\r
-}\r
-\r
-#action_bar_menu ul li {\r
- border-left: 1px #bbb solid;\r
- border-right: 1px #bbb solid;\r
-}\r
-\r
-#action_bar_menu.active ul {\r
- max-height: 1000px;\r
- transition: max-height 0.25s ease-in;\r
-}\r
-\r
-.button {\r
- border-radius: 5px;\r
- border-color: #d4d4d4;\r
- border-style: solid;\r
- border-width: 1px;\r
- display: inline;\r
- padding: 8px;\r
-}\r
-\r
-#power_icon_back_circle {\r
- border-radius: 50%;\r
- background: #3695dd;\r
- width: 35px;\r
- height: 35px;\r
- margin: 10px 20px 0 auto;\r
- display:flex;\r
- align-items: center;\r
-}\r
-\r
-.svg-class {\r
- width: 100%;\r
- height: 100px;\r
-}\r
-\r
-#combo_area {\r
- display: block;\r
- align-items: center;\r
- justify-content: center;\r
- margin-top: 5px;\r
-}\r
-\r
-.mode_bar {\r
- border-radius: 17px;\r
- height: 35px;\r
- width: 40%;\r
- border: 2px solid #3695dd;\r
- line-height: 34px;\r
- background-color: white;\r
-}\r
-\r
-.mode_bar_text {\r
- color: #3695dd;\r
- font-size: 17px;\r
- text-align-last:center;\r
-}\r
-\r
-#air_quality_area {\r
- height: 20%;\r
- margin-top: 40px;\r
- margin-left: auto;\r
- margin-right: auto;\r
- width: 70%;\r
- position: relative;\r
- text-align: center;\r
- color: white;\r
- font-size: 25px;\r
-}\r
-\r
-#svg-status-id {\r
- width: 100%;\r
- height: 100%;\r
-}\r
-\r
-#air_quality_area_text {\r
- position: absolute;\r
- top: 50%;\r
- left: 50%;\r
- transform: translate(-50%, -50%);\r
-}\r
-\r
-.status_sub_bar {\r
- text-align: center;\r
- font-weight: midium;\r
- font-size: 15px;\r
- color: #252525;\r
- padding: 10px 0;\r
- opacity:0.9;\r
-}\r
-\r
-.status-container {\r
- margin-top:20px;\r
- text-align:center;\r
- margin-bottom:20px;\r
-}\r
-\r
-.TOAHChildContainerTemp {\r
- width: 2.9rem;\r
-}\r
-.TOAHChildContainer {\r
- display: inline-block;\r
- width: 5.5rem; /* 130px; */\r
- height: auto;\r
- vertical-align: middle;\r
- margin: 0px 2px 20px 0px;\r
-}\r
-\r
-.TOAHChildTitle {\r
- width: 100%;\r
- font-size: 0.75rem;\r
- line-height: 0.75rem;\r
- color: rgb(103, 103, 103);\r
-}\r
-\r
-.TOAHChildTitleCaseFour {\r
- font-size: 0.75rem;\r
-}\r
-\r
-.TOAHChildDetail {\r
- width: 100%;\r
- margin-top: 0.4rem;\r
- text-align: center;\r
-}\r
-\r
-.TOAHTempValue {\r
- color: rgb(37, 37, 37);\r
- font-size: 1rem;\r
- line-height: 1rem;\r
- vertical-align: top;\r
-}\r
-\r
-.TOAHDivider {\r
- display: inline-block;\r
- width: 0.05rem;\r
- height: 2.325rem;\r
- /* #border-right: solid 0.05rem rgba(0, 0, 0, 0.5); */\r
- margin-left: 1.225rem;\r
- margin-right: 1.225rem;\r
- margin-top: 0.1rem;\r
-}\r
-\r
-.status_item_title {\r
- text-align: center;\r
- font-weight: regular;\r
- font-size: 15px;\r
- color: #252525;\r
- opacity:0.8;\r
-}\r
-\r
-.status_item_content {\r
- text-align: center;\r
- font-weight: midium;\r
- font-size: 15px;\r
- color: #252525;\r
-}\r
-\r
-.function_container{\r
- margin: 0 0 0 5%;\r
- padding: 10px;\r
- border-bottom: rgba(0,0,0,0.07) solid 1px;\r
-}\r
-\r
-.function_item{\r
- height:75px;\r
- width:100%;\r
- color: white;\r
-}\r
-\r
-.item_icon {\r
- width:30px;\r
- height:30px;\r
- display:inline-block;\r
-}\r
-\r
-.item_body {\r
- width:150px;\r
- height:40px;\r
- display: inline-block;\r
-}\r
-\r
-.function_item_singleline{\r
- margin: 0;\r
- font-size: 0.8rem;\r
- line-height: 1rem;\r
- color: #252525;\r
- margin-left: .8rem;\r
- float: left;\r
- padding-top: 1.275rem;\r
- white-space: nowrap;\r
- max-width: 12.4rem;\r
- display:inline;\r
-}\r
-.function_item_multiline{\r
- padding-top: 0.8rem;\r
- margin-left: .8rem;;\r
- float: left;\r
- display:inline;\r
-}\r
-\r
-.function_item_multiline_1{\r
- margin: 0;\r
- font-size: 0.8rem;\r
- line-height: 0.85rem;\r
- color: #252525;\r
- opacity:0.9;\r
-}\r
-\r
-.function_item_multiline_2{\r
- margin: 0;\r
- color: #3695dd;\r
- font-size: 0.7rem;\r
- line-height: 0.7rem;\r
- padding-top: 0.25rem;\r
-}\r
-\r
-.filter_icon {\r
- text-align:center;\r
-}\r
-\r
-.filter_icon:before {\r
- content: "";\r
- background-image: url("../res/ic_function_Filter_State.svg");\r
- background-size: contain;\r
- width: 100%;\r
- height: 100%;\r
- display: block;\r
-}\r
-\r
-.energy_icon {\r
- text-align:center;\r
-}\r
-\r
-.energy_icon:before {\r
- content: "";\r
- background-image: url("../res/ic_function_Energy_Consumption.svg");\r
- background-size: contain;\r
- width: 100%;\r
- height: 100%;\r
- display: block;\r
-}\r
-\r
-.row-custom {\r
- content: "";\r
- clear: both;\r
- display: block;\r
- height: inherit;\r
-}\r
-\r
-.left-col {\r
- float: left;\r
- width: 100%;\r
- background-color: #fafafa;\r
-}\r
-\r
-.right-col {\r
- float: left;\r
- width: 100%;\r
-}\r
-\r
-/* ---------- icon ------------- */\r
-\r
-.plus_icon { border-radius: 50%; background: #ffffff; }\r
-.plus_icon:before {\r
- content: "";\r
- background-image: url("../res/set_point_ic_plus.png");\r
- background-size: contain;\r
- width: 100%; height: 100%; display: block; }\r
-.minus_icon { border-radius: 50%; background: #ffffff; }\r
-.minus_icon:before {\r
- content: "";\r
- background-image: url("../res/set_point_ic_minus.png");\r
- background-size: contain;\r
- width: 100%; height: 100%; display: block; }\r
-.arrow_icon { position: absolute; right: 20px; margin-top: 15px;\r
- color: #252525; opacity: 0.9; }\r
-.arrow_icon:before { content: ""; background-image: url("../res/list_ic_arrow.svg");\r
- background-size: contain; width: 24px; height: 24px; display: block; }\r
-\r
-@media only screen and (orientation: landscape) and (min-height: 360px){\r
- .left-col {\r
- width: 50%;\r
- height: inherit;\r
- }\r
-\r
- .right-col {\r
- width: 50%;\r
- }\r
-\r
-.function_container{\r
- margin-left: 0;\r
- }\r
-}\r
-\r
-@media only screen and (min-width: 768px) {\r
- .left-col {\r
- height: inherit;\r
- }\r
-}\r
+@charset "utf-8";
+@import url("fonts.css");
+body {
+ /*position: fixed;*/
+ width:100%;
+ height:100%;
+ top: 0px;
+ bottom: 0px;
+ left: 0px;
+ right: 0px;
+ background-color: white;
+ margin: 0;
+ padding: 0;
+ display:flex;
+ flex-direction: column;
+}
+
+.plugin-container {
+ flex: 1;
+ overflow:auto;
+}
+
+#action_bar {
+ border-bottom: rgba(0,0,0,0.07) solid 1px;
+ display:flex;
+ background-color: #fafafa;
+}
+
+#header_bar {
+ min-height: 50px;
+ display:flex;
+ margin-left: auto;
+ margin-right: 10px;
+}
+
+#action_bar,
+#action_bar_back_button,
+#action_bar_title,
+#action_bar_menu {
+ min-height: 48px;
+/* background-color: #fafafa;*/
+}
+
+#action_bar_more {
+ width: 56px;
+ display:flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ margin: 15px 0 15px 15px;
+ /*background-color: red;*/
+}
+
+#action_bar_more:before {
+ content: "";
+ background-image: url("../res/option_ic_more.svg");
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ width: 100%;
+ height: 18px;
+ display: block;
+}
+
+#action_bar_back_button {
+ width: 56px;
+ display:flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
+}
+
+#action_bar_menu {
+ width: 48px;
+ visibility:hidden;
+}
+
+#action_bar_title {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex:1;
+ margin-left : 15px;
+}
+
+#action_bar_title_main {
+ font-size:23px;
+ color: #252525;
+ font-stretch: condensed;
+}
+
+#action_bar_title_sub {
+ font-size:13px;
+ color: #252525;
+ opacity: 0.6;
+ font-stretch: condensed;
+}
+
+#loading {
+ display:flex;
+ flex-direction: column;
+}
+
+#loading .img {
+ width: 60px;
+ height: 60px;
+ animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+#content {
+ display: none;
+}
+
+.dot {
+ fill: #499ebd;
+}
+
+#icon_back .back_arrow {
+ fill: none;
+ stroke: #499ebd;
+ stroke-width: 7;
+}
+
+#icon_back {
+ max-width:24px;
+ max-height:24px;
+}
+
+#icon_menu_box {
+ display:flex;
+ align-items: center;
+ justify-content: center;
+}
+
+#icon_menu {
+ max-height:24px;
+ cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
+}
+
+#action_bar_menu ul {
+ position: absolute;
+ right: 5px;
+ padding: 0px;
+ margin: 0px;
+ background-color: #fafafa;
+ max-height: 0;
+ transition: max-height 0.15s ease-out;
+ overflow: hidden;
+ border-radius: 5px;
+ z-index: 2;
+ position:absolute;
+ top:10px;
+}
+
+#action_bar_menu ul li {
+ min-width: 150px;
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+}
+
+#action_bar_menu ul li a {
+ display: inline-block;
+ margin: auto;
+ padding: 10px;
+ text-decoration: none;
+ color: black;
+ -webkit-tap-highlight-color: transparent;
+}
+
+#action_bar_menu ul li:hover {
+ background: #eee;
+}
+
+#action_bar_menu ul li:first-child {
+ border-radius: 5px 5px 0px 0px;
+ border-top: 1px #bbb solid;
+ border-left: 1px #bbb solid;
+ border-right: 1px #bbb solid;
+}
+
+#action_bar_menu ul li:last-child {
+ border-radius: 0px 0px 5px 5px;
+ border-bottom: 1px #bbb solid;
+ border-left: 1px #bbb solid;
+ border-right: 1px #bbb solid;
+}
+
+#action_bar_menu ul li:only-child {
+ border-radius: 5px;
+ border: 1px #bbb solid;
+}
+
+#action_bar_menu ul li {
+ border-left: 1px #bbb solid;
+ border-right: 1px #bbb solid;
+}
+
+#action_bar_menu.active ul {
+ max-height: 1000px;
+ transition: max-height 0.25s ease-in;
+}
+
+.button {
+ border-radius: 5px;
+ border-color: #d4d4d4;
+ border-style: solid;
+ border-width: 1px;
+ display: inline;
+ padding: 8px;
+}
+
+#power_icon_back_circle {
+ border-radius: 50%;
+ background: #3695dd;
+ width: 35px;
+ height: 35px;
+ margin: 10px 20px 0 auto;
+ display:flex;
+ align-items: center;
+}
+
+.svg-class {
+ width: 100%;
+ height: 100px;
+}
+
+#combo_area {
+ display: block;
+ align-items: center;
+ justify-content: center;
+ margin-top: 5px;
+}
+
+.mode_bar {
+ border-radius: 17px;
+ height: 35px;
+ width: 40%;
+ border: 2px solid #3695dd;
+ line-height: 34px;
+ background-color: white;
+}
+
+.mode_bar_text {
+ color: #3695dd;
+ font-size: 17px;
+ text-align-last:center;
+}
+
+#air_quality_area {
+ height: 20%;
+ margin-top: 40px;
+ margin-left: auto;
+ margin-right: auto;
+ width: 70%;
+ position: relative;
+ text-align: center;
+ color: white;
+ font-size: 25px;
+}
+
+#svg-status-id {
+ width: 100%;
+ height: 100%;
+}
+
+#air_quality_area_text {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.status_sub_bar {
+ text-align: center;
+ font-weight: midium;
+ font-size: 15px;
+ color: #252525;
+ padding: 10px 0;
+ opacity:0.9;
+}
+
+.status-container {
+ margin-top:20px;
+ text-align:center;
+ margin-bottom:20px;
+}
+
+.TOAHChildContainerTemp {
+ width: 2.9rem;
+}
+.TOAHChildContainer {
+ display: inline-block;
+ width: 5.5rem; /* 130px; */
+ height: auto;
+ vertical-align: middle;
+ margin: 0px 2px 20px 0px;
+}
+
+.TOAHChildTitle {
+ width: 100%;
+ font-size: 0.75rem;
+ line-height: 0.75rem;
+ color: rgb(103, 103, 103);
+}
+
+.TOAHChildTitleCaseFour {
+ font-size: 0.75rem;
+}
+
+.TOAHChildDetail {
+ width: 100%;
+ margin-top: 0.4rem;
+ text-align: center;
+}
+
+.TOAHTempValue {
+ color: rgb(37, 37, 37);
+ font-size: 1rem;
+ line-height: 1rem;
+ vertical-align: top;
+}
+
+.TOAHDivider {
+ display: inline-block;
+ width: 0.05rem;
+ height: 2.325rem;
+ /* #border-right: solid 0.05rem rgba(0, 0, 0, 0.5); */
+ margin-left: 1.225rem;
+ margin-right: 1.225rem;
+ margin-top: 0.1rem;
+}
+
+.status_item_title {
+ text-align: center;
+ font-weight: regular;
+ font-size: 15px;
+ color: #252525;
+ opacity:0.8;
+}
+
+.status_item_content {
+ text-align: center;
+ font-weight: midium;
+ font-size: 15px;
+ color: #252525;
+}
+
+.function_container{
+ margin: 0 0 0 5%;
+ padding: 10px;
+ border-bottom: rgba(0,0,0,0.07) solid 1px;
+}
+
+.function_item{
+ height:75px;
+ width:100%;
+ color: white;
+}
+
+.item_icon {
+ width:30px;
+ height:30px;
+ display:inline-block;
+}
+
+.item_body {
+ width:150px;
+ height:40px;
+ display: inline-block;
+}
+
+.function_item_singleline{
+ margin: 0;
+ font-size: 0.8rem;
+ line-height: 1rem;
+ color: #252525;
+ margin-left: .8rem;
+ float: left;
+ padding-top: 1.275rem;
+ white-space: nowrap;
+ max-width: 12.4rem;
+ display:inline;
+}
+.function_item_multiline{
+ padding-top: 0.8rem;
+ margin-left: .8rem;;
+ float: left;
+ display:inline;
+}
+
+.function_item_multiline_1{
+ margin: 0;
+ font-size: 0.8rem;
+ line-height: 0.85rem;
+ color: #252525;
+ opacity:0.9;
+}
+
+.function_item_multiline_2{
+ margin: 0;
+ color: #3695dd;
+ font-size: 0.7rem;
+ line-height: 0.7rem;
+ padding-top: 0.25rem;
+}
+
+.filter_icon {
+ text-align:center;
+}
+
+.filter_icon:before {
+ content: "";
+ background-image: url("../res/ic_function_Filter_State.svg");
+ background-size: contain;
+ width: 100%;
+ height: 100%;
+ display: block;
+}
+
+.energy_icon {
+ text-align:center;
+}
+
+.energy_icon:before {
+ content: "";
+ background-image: url("../res/ic_function_Energy_Consumption.svg");
+ background-size: contain;
+ width: 100%;
+ height: 100%;
+ display: block;
+}
+
+.row-custom {
+ content: "";
+ clear: both;
+ display: block;
+ height: inherit;
+}
+
+.left-col {
+ float: left;
+ width: 100%;
+ background-color: #fafafa;
+}
+
+.right-col {
+ float: left;
+ width: 100%;
+}
+
+/* ---------- icon ------------- */
+
+.plus_icon { border-radius: 50%; background: #ffffff; }
+.plus_icon:before {
+ content: "";
+ background-image: url("../res/set_point_ic_plus.png");
+ background-size: contain;
+ width: 100%; height: 100%; display: block; }
+.minus_icon { border-radius: 50%; background: #ffffff; }
+.minus_icon:before {
+ content: "";
+ background-image: url("../res/set_point_ic_minus.png");
+ background-size: contain;
+ width: 100%; height: 100%; display: block; }
+.arrow_icon { position: absolute; right: 20px; margin-top: 15px;
+ color: #252525; opacity: 0.9; }
+.arrow_icon:before { content: ""; background-image: url("../res/list_ic_arrow.svg");
+ background-size: contain; width: 24px; height: 24px; display: block; }
+
+@media only screen and (orientation: landscape) and (min-height: 360px){
+ .left-col {
+ width: 50%;
+ height: inherit;
+ }
+
+ .right-col {
+ width: 50%;
+ }
+
+.function_container{
+ margin-left: 0;
+ }
+}
+
+@media only screen and (min-width: 768px) {
+ .left-col {
+ height: inherit;
+ }
+}
-<!DOCTYPE html>\r
-<html lang="ko">\r
- <head>\r
- <title>Air Quality Sensor</title>\r
- <meta charset="utf-8">\r
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />\r
- <!-- Stylesheet-->\r
- <link rel="stylesheet" type="text/css" href="css/style.css"/>\r
- <link rel="stylesheet" type="text/css" href="css/sensor-co2.css"/>\r
- <!-- SAMSUNG CONNECT API -->\r
- <script type="text/javascript" src="lib/SCPluginApi.js"></script>\r
- <script type="text/javascript" src="js/capability_switch.js"></script>\r
- <script type="text/javascript" src="js/capability_airQualitySensorCO2.js"></script>\r
- <script type="text/javascript" src="js/capability_thermostatCoolingSetpointCO2.js"></script>\r
- <script type="text/javascript" src="js/indexCO2.js"></script>\r
- </head>\r
- <body>\r
- <!-- Action bar-->\r
- <div id="action_bar">\r
- <span id="action_bar_back_button" onclick="backAction()">\r
- <img src="res/board_ic_arrow_left.png" style="width: 100%; height:auto;" id="icon_back"/>\r
- </span>\r
- <span id="action_bar_title">\r
- <div id="action_bar_title_sub" class="roboto-condensed-bold">HOME - LIVING ROOM</div>\r
- <div id="action_bar_title_main" class="roboto-condensed-bold">Air Quality Sensor</div>\r
- </span>\r
- <span id="action_bar_more">\r
- </span>\r
- </div>\r
-\r
- <div class="row-custom">\r
- <div class="left-col">\r
- <!-- Header-->\r
- <div id="header_bar">\r
- <div id="power_icon_back_circle" onclick="onPowerBtnClicked()">\r
- <img class="svg-class"src="res/ic_power.svg">\r
- </div>\r
- </div>\r
- <div id="combo_area" align="center">\r
- <div class="mode_bar mode_bar_text roboto-condensed-bold">CO2 Density</div>\r
- </div>\r
- <!-- co2 air quality circle area-->\r
- <div id="air_quality_area" class="roboto-condensed-regular">\r
- <img id="svg-status-id" src="res/good.svg"/>\r
- <div id="air_quality_area_text"></div>\r
- </div>\r
- <div class="status_sub_bar roboto-condensed-regular">INDOOR</div>\r
-\r
- <!-- sensor value display area -->\r
- <div class="coolingset_container">\r
- <div class="coolingset_container_text">\r
- <span class="coolingset_item_content roboto-condensed-bold" id="sensor_value"></span>\r
- <span class="coolingset_item_content roboto-regular" id="sensor_unit">ppm</span>\r
- </div>\r
- </div>\r
-\r
- <!-- status description -->\r
- <div class="status-container">\r
- <table class="roboto-regular" align="center">\r
- <tr>\r
- <th class="cyan_back"></th>\r
- <th class="green_back"></th> \r
- <th class="orange_back"></th>\r
- <th class="red_back"></th>\r
- </tr>\r
- <tr>\r
- <td colspan="2">safe</td>\r
- <td colspan="2">warnning</td>\r
- </tr>\r
- </table>\r
- </div>\r
-\r
- <!-- calibration set area -->\r
- <div class="cali_container">\r
- <div class="cali_set_container">\r
- <span class="cali-value-box roboto-condensed-bold">\r
- <input type="number" id="coolingsetTemp" min="0" max="5000" value="2599" onfocus="this.value=''" />\r
- </span>\r
- <span class="cali_set_button roboto-condensed-bold" onclick="onSetBtnClicked()">set</span>\r
- </div>\r
- <div class="cali_title roboto-regular">Calibration Set (mV)</div>\r
- </div>\r
- </div>\r
- </div>\r
- \r
- </body>\r
-</html>\r
+<!DOCTYPE html>
+<html lang="ko">
+ <head>
+ <title>Air Quality Sensor</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <!-- Stylesheet-->
+ <link rel="stylesheet" type="text/css" href="css/style.css"/>
+ <link rel="stylesheet" type="text/css" href="css/sensor-co2.css"/>
+ <!-- SAMSUNG CONNECT API -->
+ <script type="text/javascript" src="lib/SCPluginApi.js"></script>
+ <script type="text/javascript" src="js/capability_switch.js"></script>
+ <script type="text/javascript" src="js/capability_airQualitySensorCO2.js"></script>
+ <script type="text/javascript" src="js/capability_thermostatCoolingSetpointCO2.js"></script>
+ <script type="text/javascript" src="js/indexCO2.js"></script>
+ </head>
+ <body>
+ <!-- Action bar-->
+ <div id="action_bar">
+ <span id="action_bar_back_button" onclick="backAction()">
+ <img src="res/board_ic_arrow_left.png" style="width: 100%; height:auto;" id="icon_back"/>
+ </span>
+ <span id="action_bar_title">
+ <div id="action_bar_title_sub" class="roboto-condensed-bold">HOME - LIVING ROOM</div>
+ <div id="action_bar_title_main" class="roboto-condensed-bold">Air Quality Sensor</div>
+ </span>
+ <span id="action_bar_more">
+ </span>
+ </div>
+
+ <div class="row-custom">
+ <div class="left-col">
+ <!-- Header-->
+ <div id="header_bar">
+ <div id="power_icon_back_circle" onclick="onPowerBtnClicked()">
+ <img class="svg-class"src="res/ic_power.svg">
+ </div>
+ </div>
+ <div id="combo_area" align="center">
+ <div class="mode_bar mode_bar_text roboto-condensed-bold">CO2 Density</div>
+ </div>
+ <!-- co2 air quality circle area-->
+ <div id="air_quality_area" class="roboto-condensed-regular">
+ <img id="svg-status-id" src="res/good.svg"/>
+ <div id="air_quality_area_text"></div>
+ </div>
+ <div class="status_sub_bar roboto-condensed-regular">INDOOR</div>
+
+ <!-- sensor value display area -->
+ <div class="coolingset_container">
+ <div class="coolingset_container_text">
+ <span class="coolingset_item_content roboto-condensed-bold" id="sensor_value"></span>
+ <span class="coolingset_item_content roboto-regular" id="sensor_unit">ppm</span>
+ </div>
+ </div>
+
+ <!-- status description -->
+ <div class="status-container">
+ <table class="roboto-regular" align="center">
+ <tr>
+ <th class="cyan_back"></th>
+ <th class="green_back"></th>
+ <th class="orange_back"></th>
+ <th class="red_back"></th>
+ </tr>
+ <tr>
+ <td colspan="2">safe</td>
+ <td colspan="2">warnning</td>
+ </tr>
+ </table>
+ </div>
+
+ <!-- calibration set area -->
+ <div class="cali_container">
+ <div class="cali_set_container">
+ <span class="cali-value-box roboto-condensed-bold">
+ <input type="number" id="coolingsetTemp" min="0" max="5000" value="2599" onfocus="this.value=''" />
+ </span>
+ <span class="cali_set_button roboto-condensed-bold" onclick="onSetBtnClicked()">set</span>
+ </div>
+ <div class="cali_title roboto-regular">Calibration Set (mV)</div>
+ </div>
+ </div>
+ </div>
+
+ </body>
+</html>
-<?xml version="1.0" encoding="utf-8"?>\r
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\r
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"\r
- width="172px" height="172px" viewBox="0 0 172 172" enable-background="new 0 0 172 172" xml:space="preserve">\r
-<g>\r
- <g>\r
- <rect style="fill:#FFFFFF;" x="82.607" y="41.205" width="6.775" height="35.889"/>\r
- <path style="fill:#FFFFFF;" d="M85.995,130.537c-24.247,0-43.973-19.745-43.973-44.014c0-17.017,9.964-32.673,25.385-39.886l2.87,6.137\r
- c-13.048,6.103-21.48,19.351-21.48,33.749c0,20.534,16.688,37.238,37.198,37.238c20.511,0,37.199-16.704,37.199-37.238\r
- c0-14.399-8.432-27.648-21.48-33.749l2.87-6.137c15.421,7.211,25.385,22.868,25.385,39.886\r
- C129.968,110.792,110.241,130.537,85.995,130.537z"/>\r
- </g>\r
-</g>\r
-</svg>\r
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="172px" height="172px" viewBox="0 0 172 172" enable-background="new 0 0 172 172" xml:space="preserve">
+<g>
+ <g>
+ <rect style="fill:#FFFFFF;" x="82.607" y="41.205" width="6.775" height="35.889"/>
+ <path style="fill:#FFFFFF;" d="M85.995,130.537c-24.247,0-43.973-19.745-43.973-44.014c0-17.017,9.964-32.673,25.385-39.886l2.87,6.137
+ c-13.048,6.103-21.48,19.351-21.48,33.749c0,20.534,16.688,37.238,37.198,37.238c20.511,0,37.199-16.704,37.199-37.238
+ c0-14.399-8.432-27.648-21.48-33.749l2.87-6.137c15.421,7.211,25.385,22.868,25.385,39.886
+ C129.968,110.792,110.241,130.537,85.995,130.537z"/>
+ </g>
+</g>
+</svg>
projects / apps / native / co2-meter.git / commitdiff
