Библиотека для отображения бегущего текста (матрица 8х8)

vk007
Offline
Зарегистрирован: 16.06.2015

vworld пишет:

главное мне понять как текст из введеного в сериал порт окажется выведенным на светодиодную матрицу.

Для начала разделите задачу на два этапа. Первый - научитесь принимать текст из сериал порта в какой-нибудь буфер. Второй - выводить текст из буфера на матрицу.

vworld
vworld аватар
Offline
Зарегистрирован: 26.09.2011

нашел готовое решение

но веб страница не отображается как должна

с ESP8266 NodeMCU не подгрузились стили, хотя инет точно был
решил перепроверить как отрабатывает веб страница, создал отдельно файл *.html Вот такой код получился

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Send Text to ESP-01 / NeoMatrix / v2</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootst.." integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectru..">
<style>#sentMsgs{display:inline-block;margin:0 15px 20px;padding:10px 20px;min-height:60px;background-color:#777;color:lime;border:1px solid gray;clear:both;}.adjust-text{margin:20px 0 0;padding:0 20px;}.clearfix{clear:both;}</style>
</head>
<body style="background:#EFEFEF;">

<form>
<div class="col-md-4">
<h3>Enter Text to Send on the NeoPixel Matrix: <input type="text" id="color-picker"></h3>
<div class="input-group">
<input type="text" name="line" id="line" class="form-control" maxlength='60'>
<div class="input-group-btn">
<button class="btn btn-default" id="send-text">Send Text</button>
</div>
</div>
</div>
</form><br>
<div class="col-md-4 adjust-text clearfix"><h4>Messages Sent</h4></div>
<div id="sentMsgs" class="col-md-4" contentEditable="true"></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/p.." integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstr.." integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectru.."></script>

<script>

function sendMsg(){
var line = $('#line');
var color = '';
var colorPicker = $('#color-picker');
var msg = line.val().replace(';','');
if(colorPicker.val() == ''){ color = '&rgb=80,255,0'; }
else{ color = '&'+colorPicker.val().replace('(','=').replace(/\\)| /g,''); }

var url2Send = '/?line='+msg+color;
line.val('');
if(typeof msg !== 'undefined' && msg.trim() !== ''){
$.ajax({ url: url2Send }).done(function(){ $('#sentMsgs').prepend('Message Sent: '+msg+'<br>\\n\'); console.log('Message Sent: '+msg+' ['+color+']'); });
}
}
$(document).keypress(function(e){ if(e.which === 13){ sendMsg(); e.preventDefault(); } });
$('#send-text').click(function(e){ sendMsg(); e.preventDefault(); });
$('#color-picker').spectrum({preferredFormat:'rgb',clickoutFiresChange:true,color:'#50FF00'});
</script>

</body>
</html>

но всё равно не отрабатывает по стилям и скрипту

но если вывести строку вот так

<script
$('#color-picker').spectrum({preferredFormat:'rgb',clickoutFiresChange:true,color:'#50FF00'});
</script>

то появляется выбор цвета

Что-то не так явно со скриптом

vworld
vworld аватар
Offline
Зарегистрирован: 26.09.2011

позволю себе поделиться интересным сервисом, который готови html код к С++ виду

http://tomeko.net/online_tools/cpp_text_escape.php?lang=en

Я отладил html страницу в браузере, а потом по средствам сервиса перегнал в код удобоваримый ардуино