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

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

Страница 1 из 2
  1. Simon

    Simon Нерд

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

    parovoZZ Гуру

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

    Simon Нерд

    Можно поподробнее пожалуйста?
     
    Simon, 17 июл 2021
    #3
  4. parovoZZ

    parovoZZ Гуру

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

    Simon Нерд

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

    NikitOS Король шутов Администратор

    Хранить данные не на SD-карте в CSV, а отправлять сразу на сервер, для сохранения в БД, чтобы потом выводить на страницу, как вариант.
     
    NikitOS, 18 июл 2021
    #6
    ИгорьК нравится это.
  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>
     
    Вот, например, разжеваны таблицы
     
    Vovka, 18 июл 2021
    #7
  8. Simon

    Simon Нерд

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

    b707 Гуру

    никак, парсинг нужен
     
    b707, 18 июл 2021
    #9
    Vovka нравится это.
  10. Simon

    Simon Нерд

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

    Feofan Нерд

    Feofan, 18 июл 2021
    #11
  12. parovoZZ

    parovoZZ Гуру

    написали же:
     
    parovoZZ, 19 июл 2021
    #12
  13. Andy16

    Andy16 Гик

    Так каждую точку с запятой надо заменить на "</td><td>". В начало добавить "<tr><td>", в конец - "</td></tr>".
    Нельзя ли это сделать на этапе формирования строки?
     
    Andy16, 19 июл 2021
    #13
  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++;
        }
    }
    Вот как-то так выходит.
     
    Igor68, 19 июл 2021
    #14
  15. Vovka

    Vovka Гик

    файл стилей забыли выложить ;)
     
    Vovka, 19 июл 2021
    #15
  16. Igor68

    Igor68 Гуру

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

    Vovka Гик

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

    Igor68 Гуру

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

    parovoZZ Гуру

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

    Дятел Нерд

    Не понятна конечная задача, зачем в вэб интерфейсе, кто будет его смотреть, где, на локалке, в интеренет?
     
    Дятел, 20 июл 2021
    #20
Страница 1 из 2