JS/JQuery/Arduino update div автоматически

Я создал проект Arduino, который в настоящее время размещает локальный сервер, который обновляется каждые 10 секунд (метаконтент).JS/JQuery/Arduino update div автоматически

Сервер в настоящий момент просто печатает одно сообщение для веб-клиента: «низкий», «средний» или «высокий» в зависимости от состояния датчика.

Я попытался создать пульсирующий круг, используя css/js, чтобы отобразить температуру (синий для низких, оранжевый для среднего и красного цвета для высоких). То, что я хотел бы сделать, это заставить круг менять цвет в зависимости от состояния датчика автоматически без необходимости обновления метаданных или нажатия ввода.

До сих пор я пытался следующее:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta name="description" content=""> 
<meta name="author" content=""> 
<title>Alert</title> 
<!-- css --> 
<style> 
#phone { 
    z-index: -1; 
    position:relative; 
} 
.holder { 
    margin-top: 20px; 
    margin-left: 30px; 
    position: relative; 
} 
.circle { 
    width: 160px; 
    height: 160px; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    background-color: #eb6d05; 
    z-index: 10; 
    position: absolute; 
    top: 40px; 
    left: 65px; 
} 
.ring { 
    border-width: 10px; 
    border-style: solid; 
    background: transparent; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    height: 200px; 
    width: 200px; 
    -webkit-animation: pulse 2.5s ease-out; 
    -moz-animation: pulse 2.5s ease-out; 
    animation: pulse 2.5s ease-out; 
    -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 
    animation-iteration-count: infinite; 
    position: absolute; 
    top: 11px; 
    left: 35px; 
    z-index: 1; 
    opacity: 0; 
} 
#holder .default .circle { 
    background-color: #eb6d05; 
} 
#holder .default .ring { 
     border-color: #eb6d05; 

} 
#holder .sync .circle { 
    background-color: #57C1C1; 
} 
#holder .sync .ring { 
     border-color: #57C1C1; 

} 
#holder .alert .circle { 
    background-color: #E4332A; 
} 
#holder .alert .ring { 
     border-color: #E4332A; 

} 

@-moz-keyframes pulse { 
0% { 
-moz-transform: scale(0); 
opacity: 0.0; 
} 
25% { 
-moz-transform: scale(0); 
opacity: 0.1; 
} 
50% { 
-moz-transform: scale(0.1); 
opacity: 0.3; 
} 
75% { 
-moz-transform: scale(0.5); 
opacity: 0.5; 
} 
100% { 
-moz-transform: scale(1); 
opacity: 0.0; 
} 
} 
@-webkit-keyframes "pulse" { 
0% { 
-webkit-transform: scale(0); 
opacity: 0.0; 
} 
25% { 
-webkit-transform: scale(0); 
opacity: 0.1; 
} 
50% { 
-webkit-transform: scale(0.1); 
opacity: 0.3; 
} 
75% { 
-webkit-transform: scale(0.5); 
opacity: 0.5; 
} 
100% { 
-webkit-transform: scale(1); 
opacity: 0.0; 
} 
} 
</style> 
</head> 

<body id="page-top" data-spy="scroll" data-target=".navbar-custom"> 
<div id="holder"> 
    <div id="phone" class="default"><!--<img src="" border="0" height="564px">--> 
    <div class="ring"></div> 
    <div class="circle"></div> 
    </div> 
</div> 
<div> 
    <input name="" id="txt" type="text" value=""> 
</div> 
<!-- Core JavaScript Files --> <script src="js/jquery.min.js"></script> 
<script type="text/javascript"> 
    function notify() { 
     var ct = $("#txt").val(); 
     console.log(ct); 

    if(ct == "a") { 
     $("#phone").removeClass(); 
     $("#phone").addClass("alert"); 
     console.log("1"); 
    } 
    else if(ct == "b") { 
     $("#phone").removeClass(); 
     $("#phone").addClass("sync"); 
     console.log("2"); 
    } 
    else { 
     $("#phone").removeClass(); 
     $("#phone").addClass("default"); 
     console.log("3"); 
    } 
} 
    $("#txt").on("change", notify); 
    </script> 

</body> 
</html>

Какой самый лучший способ, чтобы получить Arduino для печати состояние и сценарий для обнаружения его и обновлять его автоматически?

источник

2015-09-08 user2119971

Получить ответ сервера с помощью AJAX, просто сделать это:

<script type="text/javascript"> 
    function notify() { 
     var ct = $("#txt").val(); 
     console.log(ct); 

    if(ct == "a") { 
     $("#phone").removeClass(); 
     $("#phone").addClass("alert"); 
     console.log("1"); 
    } 
    else if(ct == "b") { 
     $("#phone").removeClass(); 
     $("#phone").addClass("sync"); 
     console.log("2"); 
    } 
    else { 
     $("#phone").removeClass(); 
     $("#phone").addClass("default"); 
     console.log("3"); 
    } 
} 
    $("#txt").on("change", notify); 

$.ajax({ 
    url: 'serverurl', 
    dataType: 'text' 
}).done(function(data){ 
    $("#txt").val(data); 
}); 
</script>

источник

2015-09-08 22:23:18

JS/JQuery/Arduino update div автоматически

ответ

Смежные вопросы