Подключение микроконтроллера к локальной сети: HTTP и CGI (заключение)

В прошлой части мы научились отдавать по HTTP достаточно жирную статику. Но всё, о чём я хотел написать в прошлую часть не влезло, так что эта часть будет маленьким дополнением. Добавим какие-нибудь элементы управления (проще говоря, гуй) для получения и отправки данных с сервера и на сервер.

Краткое содержание:

• Идея
• Сторона сервера
• Сторона клиента
• Заключение

Кроме того, в этой небольшой части мы коснёмся такой странной штуки, как javascript)

Идея

Допустим, мы хотим, чтобы на страничке была всякая полезная инфа, а также формы и прочий гуй.

Когда мы только начали играться с HTTP, то отдавали данные вместе со страничкой, генерируя страничку на лету, вместе с данными. Если мы отдаём страничку из файла, всё сложнее. Можно, конечно, вставить на страничку теги, которые следует заменить на те или иные полезные данные. Но это медленно и сложно)

Есть другой способ — можно реализовать на сервере простейшие «CGI-модули», которые будут отдавать/принимать ту или иную информацию, и дёргать их непосредственно с HTML-странички аяксом.

Реализуем для примера 2 CGI-модуля. Один будет управлять светодиодиком, другой считывать данные с DS1820.

Сторона сервера

На стороне сервера, при получении запроса, разбираем запрашиваемый URL. Если URL начинается на "/cgi-bin", передаём запрос обработчику CGI-запросов. Иначе рассматриваем URL как имя файла.



Таким образом, URL принимает такой вид:

/просто/путь/к/файлу

Или такой:

/cgi-bin/(имя модуля)/(команда)/?параметр1=значение1&...

Обработчик запросов. Разбираем полученный URL и заполняем структуру httpd_state_t, из которой сервер (про который я писал в предудщей части ;) ) будет брать данные для ответа клиенту.

void httpd_request(uint8_t id, httpd_state_t *st, char *url)
{
    uint16_t len;
    
    // запрошен индексный файл?
    if(!strcmp_P(url, PSTR("/")))
        url = "/index.htm";

    // значения по умолчанию
    st->statuscode = 4; // ошибка 404
    st->cursor = 0;
    st->numbytes = 0;

    if(!memcmp_P(url, PSTR("/cgi-bin"), 8))
    {
        // вызываем обработчик CGI-запроса
        if((len = cgi_exec(id, url+8, st->data.ram)))
        {
            st->statuscode = 2;                // статус: 200 OK
            st->type = http_text_plain;        // тип: text/plain
            st->data_mode = HTTPD_DATA_RAM;    // источник: буфер в памяти
            st->numbytes = len;                // длина блока
        }
    }

    else
    {
        // пробуем открывать файл
        if(!f_open(&(st->data.fs), url, FA_READ))
        {
            st->statuscode = 2;                        // статус: 200 OK
            st->type = httpd_get_mime_type(url);    // тип данных
            st->data_mode = HTTPD_DATA_FILE;        // источник: файл
            st->numbytes = st->data.fs.fsize;        // длина файла
        }
    }
    
    // документ не найден - возвращаем страничку с ошибкой 404
    if(st->statuscode == 4)
    {
        st->type = http_text_html;                    // тип: text/html
        st->data_mode = HTTPD_DATA_PROGMEM;            // источник: флешка
        st->data.prog = http_not_found;                // страничка 404
        st->numbytes = sizeof(http_not_found)-1;    // длина странички
    }
}

При получении CGI-запроса, вызывается обработчик cgi_exec.

uint16_t cgi_exec(uint8_t id, char *url, char *buf, cgi_callback_t *callback)
{
    char *param;
    
    // отрезаем строку параметров
    if((param = strchr(url, '?')))
        *(param++) = 0;

    // вызываем модуль cgi_led
    if(memcmp_P(url, PSTR("/led"), 4) == 0)
        return cgi_led_exec(url+4, buf);
    
    // вызываем модуль cgi_ds1820
    if(memcmp_P(url, PSTR("/ds1820"), 7) == 0)
        return cgi_ds1820_exec(url+7, buf);
    
    return CGI_NOT_FOUND;
}

Этот обработчик вытаскивает из URL имя модуля и передаёт запрос ему. Пока у нас есть модуль cgi_led (для управления светодиодом) и модуль cgi_ds1820 для получения данных с ds1820.

/*
 * модуль cgi_led
 */

// макросы для светодиодика
#define TEST_LED_PORT        PORTB
#define TEST_LED_DDR        DDRB
#define TEST_LED_BIT        (1<<PB1)

#define test_led_state()    ((TEST_LED_PORT & TEST_LED_BIT) ? 0 : 1)
#define test_led_on()        TEST_LED_PORT &= ~TEST_LED_BIT
#define test_led_off()        TEST_LED_PORT |= TEST_LED_BIT
#define test_led_init()        TEST_LED_DDR |= TEST_LED_BIT; test_led_off()

// обработчик запроса
uint16_t cgi_led_exec(char *action, char *buf)
{
    if(strcmp_P(action, PSTR("/on/")) == 0)
        test_led_on();
    else if(strcmp_P(action, PSTR("/off/")) == 0)
        test_led_off();
    else if(strcmp_P(action, PSTR("/state/")) != 0)
        return CGI_NOT_FOUND;

    *buf = test_led_state() + '0';
    return 1;
}

// инициализация модуля
#define cgi_led_init() test_led_init()

/*
 * модуль cgi_ds1820
 */

// переменные 
int ds1820_temp = 0x7fff;    // текущее значение
uint32_t ds1820_start_time;    // время сделующего опроса датчика
uint8_t ds1820_converted;    // опрос датчика запущен

// обрабочик запроса
uint16_t cgi_ds1820_exec(char *url, char *buf)
{
    uint8_t temp, len;
    
    if(!strcmp_P(url, PSTR("/value/")))
    {
        // нет данных - возвращаем "N/A"
        if(ds1820_temp == 0x7fff)
        {
            memcpy_P(buf, PSTR("N/A"), 3);
            return 3;
        }
        
        // форматируем строку со значением температуры (например, "-12.3")
        itoa(ds1820_temp>>4, buf, 10);
        len = strlen(buf);

        temp = ((abs(ds1820_temp) & 0x0f) * 10 + 7) >> 4;
        if(temp) {
            buf[len++] = '.';
            buf[len++] = '0'+temp;
        }
        
        return len;
    }
    
    return CGI_NOT_FOUND;
}

// вызывается периодически для опроса датчика
void cgi_ds1820_poll()
{
    if(rtime() >= ds1820_start_time)
    {
        if(ds1820_converted)
            ds1820_temp = ds1820_read();
        else
            ds1820_temp = 0x7fff;
        
        ds1820_converted = ds1820_start();
        ds1820_start_time = rtime() + 3;
    }
}

Пока можно проверить работоспособность наших модулей, просто введя соответствующий URL в браузере.

Сторона клиента

Добавим на HTML-страничку блоки, которые послужат нам каркасом для получения и отправки данных на сервер.

<!-- LED -->
<div id="led-control">
    <p>Управление светодиодиком:</p>
    <img id="led-on" src="i/led-on.gif">
    <img id="led-off" style="display: none;" src="i/led-off.gif">
</div>

<!-- DS1820 -->
<div id="ds1820-example">
    <p>Температура:</p>
    <div id="ds1820-value">N/A</div>
</div>

Принимать и отправлять данные на сервер будем с помощью аякса. Чтобы не выносить себе мозг этими XMLHttpRequest, воспользуемся эпичной библиотечкой jQuery. С использованием этой либы наш код упрощается до идиотизма)

Для чего идет подгрузка скриптов (либа Jquery и наш скрипт), которые лежат на флешкарте, вместе со всеми файлами. Если открыть index.htm то вначале будет

<head>
<title>Embedded Web Server</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

Собственно это оно и есть. js/jquery.js — библиотека, а в js/custom.js мы прописываем уже наше управление светодиодиком:

// Вызывается при изменении состояния светодиодика
function led_state(state) 
{
    switch(state) {
        case '0':
            // выключен - показываем кнопочку on
            $("#led-on").show();
            $("#led-off").hide();
            break;
        case '1':
            // включен - показываем кнопочку off
            $("#led-off").show();
            $("#led-on").hide();
            break;
    }
}

// обновляем состояние светодиодика
function led_update() {
    // запрашиваем состояния с сервера
    $.get("/cgi-bin/led/state/", null, led_state);
    
    // каждые 5 секунд)
    window.setTimeout(led_update, 5000);
}

// в начале,
function led_init()
{
    // привязываем действие к кнопке on
    $("#led-on").click(function() {
        // зажечь диодик
        $.get("/cgi-bin/led/on/", null, led_state);
    });
    
    // привязываем действие к кнопке off
    $("#led-off").click(function() {
        // погасить диодик
        $.get("/cgi-bin/led/off/", null, led_state);
    });
    
    // обновляем состояние диодика каждые 5 секунд
    led_update();
}

Получение данных с DS1820:

function ds1820_update()
{
    // получаем с сервера значение
    $.get("/cgi-bin/ds1820/value/", null, function(val) {
        // и вставляем его в блок на страничке
        $("#ds1820-value").html(val + "°");
    });
    
    // каждые 5 секунд
    window.setTimeout(ds1820_update, 3500);
}

Раз уж мы взялись за яваскрипт, можно немного позлорадствовать)

if(navigator.appName == "Microsoft Internet Explorer")
    window.location = "http://lleo.aha.ru/na/";

Инициализация всего хозяйства:

$(document).ready(function() {
    led_init();
    ds1820_update();
});

Осталось добавить CSS'ку и получаем вот такие штучки:

Заключение

В этой части мы рассмотрели ещё один вариант работы с HTTP. Он может быть полезен, например, если ты захочешь сделать какой-то мегадевайс с навороченной админкой. Либо, скажем, поднять свою домашнюю страничку на микроконтроллере)

Следующая часть будет посвящена описанию TCP/IP стека, который мы тут соорудили по ходу дела)

Скачать проект: chatek.zip.



Все статьи цикла

• Подключение микроконтроллера к локальной сети: Теория
• Подключение микроконтроллера к локальной сети: работаем с ENC28J60
• Подключение микроконтроллера к локальной сети: UDP-сервер
• Подключение микроконтроллера к локальной сети: UDP-клиент
• Подключение микроконтроллера к локальной сети: Широковещательные сообщения и DHCP
• Подключение микроконтроллера к локальной сети: TCP-клиент
• Подключение микроконтроллера к локальной сети: HTTP и CGI
• Подключение микроконтроллера к локальной сети: TCP и HTTP (продолжение)
• Подключение микроконтроллера к локальной сети: HTTP и CGI (заключение)
• Подключение микроконтроллера к локальной сети: тесты производительности и краткое описание API стека
• Подключение микроконтроллера к локальной сети: Заключение
• Веб сервер на Tiny2313. Чисто ради лулзов