Я хотел бы использовать apache2 и php для своего веб-сервера raspberry pi, так как у меня уже есть много файлов php, которые я могу использовать.Все установлено и работает, но теперь я должен сделать асинхронный запрос к моей малине: когда я перемещаю ползунок на своем веб-сайте, не обновляя страницу, я хочу отправить новое значение в скрипт php / python.
структура внутри:
/var/www/html/SCRIPTS (php/python scripts)
/var/www/html/WEB (web interface)
/var/www/html (an index that redirects inside WEB folder)
Мой индексный файл содержит следующий код.У меня есть CSS для создания трех слайдеров.При 'oninput' я хотел бы вызвать скрипт, который отправляет строку на сервер.Скрипт содержит функцию edited ();
<title>JMT Botler 1: admin panel</title>
<style type="text/css">
.slidecontainer {
width: 100%; /* Width of the outside container */
}
.slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 25px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
</style>
<script type="text/javascript">
function edited(str) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open('GET', '/var/www/html/SCRIPTS/test_rec.php?v=' + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<div align="center">
<p>STEERING</p>
</div>
<div class="slidecontainer">
<input type="range" min="1" max="179" value="90" class="slider" onchange="edited(this.value)" id="myRange" width="500">
</div>
<div align="center">
<p>Value: <span id="steering">-1</span></p>
</div>
<div align="center">
<p>THROTTLE</p>
</div>
<div class="slidecontainer">
<input type="range" min="1" max="179" value="90" class="slider" id="myRange2" width="500">
</div>
<div align="center">
<p>Value: <span id="throttle">90</span></p>
</div>
<div align="center">
<p>STER OPT</p>
</div>
<div class="slidecontainer">
<input type="range" min="1" max="179" value="90" class="slider" id="myRange3" width="500">
</div>
<div align="center">
<p>Value: <span id="steropt">90</span></p>
</div>
<div align="center">
<p>Value: <span id="demo"></span></p>
</div>
<script type="text/javascript">
var slider = document.getElementById('myRange');
var output = document.getElementById('steering');
var slider2 = document.getElementById('myRange2');
var output2 = document.getElementById('throttle');
var slider3 = document.getElementById('myRange3');
var output3 = document.getElementById('steropt');
var vs = slider.value;
var vt = slider2.value;
var so = slider3.value;
output.innerHTML = slider.value;
output2.innerHTML = slider2.value;
output3.innerHTML = slider3.value;
slider.oninput = function() {
steering.innerHTML = slider.value - 90;
edited("OPT");
}
slider2.oninput = function() {
throttle.innerHTML = slider2.value - 90;
edited("OPT");
}
slider3.oninput = function() {
steropt.innerHTML = slider3.value - 90;
edited("OPT");
}
</script>
</body></html>
Наконец, скрипт php, который получает строку, должен записать ее в документе.Очевидно, это не работает.Я впервые строю что-то подобное.Сколько я не в курсе?
<?php
$ric=$_GET['v'];
$my_file = 'log.txt';
$handle = fopen($my_file, 'a+');
$data = 'NUOVO DATO RICEVUTO';
fwrite($handle, $data);
$new_data = "\n".$ric;
fwrite($handle, $new_data);
?>
Заранее спасибо!