06.01.2019, 02:05
|
|
Новичок на форуме
|
|
Регистрация: 06.01.2019
Сообщений: 4
|
|
|
webiopi car robot mouseUP/down в key
1 Поздравляю Всех с наступившим!!! Продолжим.
Собрал на скорую управление (GPIO+l298n) для старой RC car.
Настроил всё естественно через webiopi.
Серверная часть на JS. Управление примитивное из готовых вариантов на просторах интернета.
Суть в том что управлять через веб интерфейс - кликая на ПК/смартфоне на экран совсем не удобно. пример
https://drive.google.com/open?id=1hj...gOyOUnQHEfiYWG
За последние 2 дня я так и не смог реализовать дублирование нажатий мышью кнопками с помощью keyup\down
Хочу услышать грамотное решение..
мой HTML
<!DOCTYPE html>
<html lang="ru">
<p align="center"><iframe align="middle" frameborder="0" height="720" id="strea$
<head>
<meta charset="utf-8">
<title>Робот</title>
<link rel="stylesheet" href="script.css">
<script src="/jquery.js"></script>
<script src="/script.js"></script>
</head>
<body>
<div id="wrapper">
<button id="up">▲</button>
<button id="left">◄</button>
<button id="right">►</button>
<button id="down">▼</button>
</div>
</body>
</html>
и главный виновник
var robot = {
ports: {
up: 26,
right: 13,
left: 6,
down: 19
},
ready: function() {
console.log('started');
$('#up, #right, #left, #right, #down').on({
mousedown: robot.start,
mouseup: robot.end
});
},
start: function() {
robot.send(this.id, 1);
},
end: function() {
robot.send(this.id, 0);
},
send: function(port, value) {
$.ajax({
type: 'POST',
url: '/GPIO/' + robot.ports[port] + '/value/' + value
});
}
};
$(document).ready(robot.ready);
Пытался добавить в функцию
ready: function() {
console.log('started');
$('#up, #right, #left, #right').on({
mousedown: robot.start,
mouseup: robot.end
});
что-то типо
document.addEventListener(' keydown', function(e) {
if(e.keyCode == 114){document.getElementById('button id="up"').click();
но т.к не смог разобрать ничего не вышло.
колдовал с
document.on keydown = function(e){
e = e || window.event;
if(e.keyCode === 87) {
document.location.href = "#up";
}
}
вижу решение в
$(document). keydown(function(e)
{
switch(e.which)
{
case 87:up();
case 83:down();
case 65:left();
case 68:right();
}
});
p.s исходный скрипт
https://drive.google.com/open?id=1ol...jPlqCYyNRE3RfJ
Последний раз редактировалось Artem_r32, 06.01.2019 в 02:12.
|
|
06.01.2019, 03:01
|
 |
Профессор
|
|
Регистрация: 13.03.2013
Сообщений: 1,572
|
|
возьмите svg рисованного джойстика или пульта и на его элементы вешайте события
и будет стильно и удобно, так как кнопочки можно будет фигурными сделать и цвет менять при нажати, наведении ...
<svg width="100%" height="100%" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(16,16,16);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(240,240,240);stop-opacity:1"/>
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(240,240,240);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(16,16,16);stop-opacity:1"/>
</linearGradient>
<linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(168,168,168);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(239,239,239);stop-opacity:1"/>
</linearGradient>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#grad1)"/>
<circle cx="50" cy="50" r="47" fill="url(#grad2)" stroke="black" stroke-width="1.5px"/>
<circle cx="50" cy="50" r="44" fill="url(#grad3)"/>
<circle cx="50" cy="50" r="20" fill="#cccccc" stroke="black" stroke-width="1px" onclick="alert('stop')"/>
<path d="M50,14 54,22 46,22Z" fill="#222" class="triangle"/>
<path d="M86,50 78,54 78,46Z" fill="#222" class="triangle"/>
<path d="M50,86 54,78 46,78Z" fill="#222" class="triangle"/>
<path d="M14,50 22,54 22,46Z" fill="#222" class="triangle"/>
<path fill="transparent" stroke="none" stroke-width="0"
d="m 64.455124,35.514695 c -9.69143,-8.0148 -19.38275,-7.95157 -29.07394,-0.0398 l -18.20456,-18.20456 c 18.2072,-18.12095 47.24543,-17.86741 65.42439,0.0985 z"
onclick="alert('up')"/>
<path fill="transparent" stroke="none" stroke-width="0"
d="m 64.474024,64.647305 c 8.0148,-9.691429 7.95157,-19.382741 0.0398,-29.073939 l 18.20456,-18.204563 c 18.120946,18.207207 17.867406,47.245432 -0.0985,65.424392 z"
onclick="alert('right')"/>
<path fill="transparent" stroke="none" stroke-width="0"
d="m 35.341384,64.548835 c 9.691429,8.0148 19.382741,7.95157 29.073939,0.0398 l 18.204561,18.20456 C 64.412679,100.91414 35.374454,100.6606 17.195493,82.694695 Z"
onclick="alert('down')"/>
<path fill="transparent" stroke="none" stroke-width="0"
d="m 35.381184,35.474895 c -8.0148,9.69143 -7.95157,19.38275 -0.0398,29.07394 l -18.20456,18.20456 c -18.12095,-18.2072 -17.86741,-47.24543 0.0985,-65.424387 z"
onclick="alert('left')"/>
</svg>
Последний раз редактировалось Vlasenko Fedor, 06.01.2019 в 03:03.
|
|
06.01.2019, 13:34
|
|
Новичок на форуме
|
|
Регистрация: 06.01.2019
Сообщений: 4
|
|
Спасибо за ответ! не думал что кто-то обратит внимание. Но как я и писал выше вся проблема в том что я не хочу управлять с помощью нажатий на экран. Как видно в примере я добавил стрим с камеры на фон а сверху накинул кнопки для удобства (чтобы не закрывало картинку) https://drive.google.com/file/d/1hjN...nQHEfiYWG/view
alert('right') вызовет сообщение о нажатой не более. У меня уже заданы функции up\left... Цель продублировать WASD данный скрипт или вообще изменить на управление с клавиш. т.к с древнего bb passport проще управлять клавиатурой.
var robot = {
ports: {
up: 6,
right: 13,
left: 19,
down: 26
},
ready: function() {
console.log('started');
$('#up, #right, #left, #right').on({
mousedown: robot.start,
mouseup: robot.end
});
},
start: function() {
robot.send(this.id, 1);
},
end: function() {
robot.send(this.id, 0);
},
send: function(port, value) {
$.ajax({
type: 'POST',
url: '/GPIO/' + robot.ports[port] + '/value/' + value
});
}
};
$(document).ready(robot.ready);
как заменить данный фрагмент на управление WSAD вы знаете?
ready: function() {
console.log('started');
$('#up, #right, #left, #right').on({
mousedown: robot.start,
mouseup: robot.end
});
},
|
|
06.01.2019, 17:12
|
|
Новичок на форуме
|
|
Регистрация: 06.01.2019
Сообщений: 4
|
|
Почти нашёл решение своего вопроса
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Р РѕР±РѕС‚</title>
<link rel="stylesheet" href="script.css">
<script src="/jquery.js"></script>
<script src="/script.js"></script>
</head>
<body>
<div id="wrapper">
<button id="up">▲</button>
<button id="left">◄</button>
<button id="right">►</button>
<button id="down">▼</button>
</div>
</body>
<script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
<script type="text/javascript">
hotkeys('w,s,a,d', function(event,handler) {
switch(handler.key){
case "w":document.getElementById('up').click();break;
case "s":document.getElementById('down').click();break;
case "a":document.getElementById('left').click();break;
case "d":document.getElementById('down').click();break;
}
});
</script>
</html>
Увы, моих знаний не достаточно что бы это осуществить_)
Последний раз редактировалось Artem_r32, 06.01.2019 в 17:22.
|
|
|
|
