Вывод таблицы из файла csv в таблицу html

Тема в разделе "Arduino & Shields", создана пользователем Simon, 17 июл 2021.

  1. Simon

    Simon Нерд

    Здравствуйте, уважаемые форумчане.
    Решил сделать порядочную систему логирования с выводом в веб интерфейс. Взял SD карту и на ней ардуина создала файл, куда начала класть показания датчиков в формате таблицы .csv. После этого в веб интерфейсе создается HTML таблица, куда заносятся значения из строки таблицы на карте. Но вот незадача: вывести содержимое файла на веб страницу я смог, но вот вывести в формате таблицы HTML вообще никак не получается. Прошу руку помощи!
     
  2. parovoZZ

    parovoZZ Гуру

    берётся что-то с линуксом на борту (омега, например) и с помощью php скрипта выводится любая веб страница.
     
  3. Simon

    Simon Нерд

    Можно поподробнее пожалуйста?
     
  4. parovoZZ

    parovoZZ Гуру

    любое видео на тытрубе по кодовому слову php для начинающих.
     
  5. Simon

    Simon Нерд

    Ну хорошо, допустим у меня на raspberry будет php сервак, теперь у меня вопрос: как их можно обьеденить с arduino?
     
  6. NikitOS

    NikitOS Шут Администратор

    Хранить данные не на SD-карте в CSV, а отправлять сразу на сервер, для сохранения в БД, чтобы потом выводить на страницу, как вариант.
     
    ИгорьК нравится это.
  7. Vovka

    Vovka Гик

    Не понял, в чем проблема? Взять данные из csv и сформмировать HTML-таблицу???
    HTML:

    <html xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Language" content="ru" />
    <META http-equiv=Pragma content=no-cache>
    <title>Таблица</title>
    </head>
    <body>
    <!-- сюда вставляем код таблицы -->
    </body>
    </html>
     
    Вот, например, разжеваны таблицы
     
  8. Simon

    Simon Нерд

    А как вы буфер со строкой из CSV файла разместите в этой HTML таблице? Подскажите пожалуйста
     
  9. b707

    b707 Гуру

    никак, парсинг нужен
     
    Vovka нравится это.
  10. Simon

    Simon Нерд

    У меня есть строка с данными
    23:15:45;15.03.2021;2;Waterpur;0,00
    В таблице 5 колонок. До точки с запятой нужно в каждую колонку заносить одно значение: время, дату, код события, зону и счётчик.
    Как это реализовать?
     
  11. Feofan

    Feofan Нерд

  12. parovoZZ

    parovoZZ Гуру

    написали же:
     
  13. Andy16

    Andy16 Нерд

    Так каждую точку с запятой надо заменить на "</td><td>". В начало добавить "<tr><td>", в конец - "</td></tr>".
    Нельзя ли это сделать на этапе формирования строки?
     
  14. Igor68

    Igor68 Гуру

    Вот какая-то страница:
    Код (Text):
    <!DOCTYPE html>
    <html><head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type"><title>Монитор напряжения питания автоматики</title>
    <link rel="stylesheet" href="umon.css" type="text/css"/>
    </head>
    <body style="color: rgb(255, 255, 255); background-color: black;" alink="#000099" link="#000099" vlink="#990099">

    <div class="container">
        <div id="lay1">
            <canvas width="1000" height="480" id="canvas"></canvas>
            <div id="datetime">Дата и время</div>
            <div id="voltage">Напряжение</div>
            <div id="frequency">Частота</div>
            <div><button id="bdb" onclick="fbdb()" >ОТЧЁТ</button></div>
        </div>
    </div>
    <div id="db" align="center">
        <table width="100%" id="tbdb" onclick="dbheide()" title="Клик мышью принудительно закроет таблицу">
            <tr>
                <td colspan="3" style="text-align: center; color: rgb(100, 255,255); background-color: black;" >Отклонение параметров питания автоматики</td>
            </tr>
            <tr>
                <td width="40%" style="text-align: center; color: rgb(100, 255,255); background-color: black;" >Дата Время</td>
                <td width="30%" style="text-align: center; color: rgb(100, 255,255); background-color: black;" >Напряжение</td>
                <td width="30%" style="text-align: center; color: rgb(100, 255,255); background-color: black;" >Частота</td>
            </tr>
        </table>
        <button id="dbheide" onclick="dbheide()">Скрыть</button>
    </div>


    <script src="umon.js"></script>

    </body></html>
    тут она ещё тащит некий JS в котором есть функция
    Код (Javascript):
    function fbdb() {
        document.getElementById("db").style = "display: block;";
        var tstr;
        var xmlhttp = new XMLHttpRequest();
        //
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 ) {
                if(xmlhttp.status == 200){
                //
                    tstr = xmlhttp.responseText;
                    db = eval('(' + tstr + ')');
                    PWDBparse();
                    }
                }
            }
        xmlhttp.open("GET", "pwdb.php?dtime=" + new Date().getTime, true);
        //
        xmlhttp.send();
    }
    При нажатии на кнопку "отчёт" она вызывается и делает запрос на сервак (Apache), где есть pwdb.php:
    PHP:
    <?php

    $link = mysqli_connect("127.0.0.1", "abp", "abp", "abp_db");
            if($link == false)
            {
                    $err = "ErrConn";
                    mysqli_close($link);
            } else {
                    $dbs = "SELECT * FROM pwauto";
                    $res = mysqli_query($link, $dbs);
                    $n = mysqli_num_rows($res);
                    mysqli_close($link);
                    $DateTime = array($n);
                    $u = array($n);
                    $f = array($n);
                    $cnt = 0;
                    while($cnt < $n) {
                            $row = mysqli_fetch_array($res);
                            $DateTime[$cnt] = $row['DateTime'];
                            $u[$cnt] = $row['u'];
                            $f[$cnt] = $row['f'];
                            $cnt++;
                    }
                    $strDT = "\n\"DateTime\" : [";
                    $strU = "\n\"U\" : [";
                    $strF = "\n\"F\" : [";
                    for($i = 0; $i < $n; $i++) {
                            if($i < ($n - 1)) {
                                    $strDT .= "\"".$DateTime[$i]."\",\n";
                                    $strU .= "\"".$u[$i]."\",\n";
                                    $strF .= "\"".$f[$i]."\",\n";
                            } else {
                                    $strDT .= "\"".$DateTime[$i]."\"]";
                                    $strU .= "\"".$u[$i]."\"]";
                                    $strF .= "\"".$f[$i]."\"]";
                            }
                    }
            }
            $str = "{\n".$strDT.",\n".$strU.",\n".$strF."\n}";
            echo $str;

    ?>
    он читает данные из базы и формирует JSON ответ, который потом парсится при приёме на стороне клиента и строится таблица:
    Код (Javascript):
    function PWDBparse() {
        var table = document.getElementById("tbdb");
        while(true)
        {
            var par = db.DateTime[tcount];
            if(par == null)
                break;
            //
            var row = document.createElement("tr");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            //
            td1.innerHTML = db.DateTime[tcount];
            td2.innerHTML = db.U[tcount];
            td3.innerHTML = db.F[tcount];
            //
            if(tcount % 2) {
                td1.style = "color: rgb(255,255,100); text-align: center;";
                td2.style = "color: rgb(255,255,100); text-align: center;";
                td3.style = "color: rgb(255,255,100); text-align: center;";
            } else {
                td1.style = "text-align: center;";
                td2.style = "text-align: center;";
                td3.style = "text-align: center;";
            }
            //
            row.appendChild(td1);
            row.appendChild(td2);
            row.appendChild(td3);
            //
            table.appendChild(row);
            //
            tcount++;
        }
    }
    Вот как-то так выходит.
     
  15. Vovka

    Vovka Гик

    файл стилей забыли выложить ;)
     
  16. Igor68

    Igor68 Гуру

    Да я и не хотел ничего выкладывать. Тут интересовались как строить таблицу... динамическую таблицу. Сам когда-то искал, на на JS, PHP, HTML и др. ничего делать и не планировал. Думал обойдусь такой вот схемой:
    https://moxa.ru/forum/index.php?/topic/25208-uc-7112-lx-plus-может-баловство-а-может-и-нет/
    А вот пригодилось. Хоть я в указанных (HTML, PHP, JS и пр.) практически ни бум-бум, но вот кое как пользую.
     
  17. Vovka

    Vovka Гик

    А зачем JSON? В данном случае можно передавать текстовые данные "как есть", добавив вместо конца строки какой-нибудь маркер...
    Вот любители все усложнять... :)
     
  18. Igor68

    Igor68 Гуру

    JSON проще и гораздо стандартнее, потому как любой практически браузер его понимает и "парсит". А то "как есть" надо ещё и парсить незнамо чем и уметь многое на JS в котором я, как говорил ранее, ни бум-бум. Да и нет у меня цели быть в JS бум-бум. Просто идея WebSocket, как указывал ранее, не всегда выгодна... когда есть возможность всё делать в самом браузере.
     
  19. parovoZZ

    parovoZZ Гуру

    JSON и хранить удобно. Этот формат специально создан для пары время:значение. Поводов его не использовать я не вижу.
     
  20. Дятел

    Дятел Нерд

    Не понятна конечная задача, зачем в вэб интерфейсе, кто будет его смотреть, где, на локалке, в интеренет?