СЕТЕВОЕ ПРОГРАММИРОВАНИЕ



Это учебная книга по программированию для сетевой робототехники. Архитектура системы включает, соответственно, сервер, клиент, робот. Робот предствляет собой сенсорную сеть (датчики) и эффекторы (моторы, приводы, манипуляторы). Робот может быть один или их может быть несколько. Пространственно он может находится в одном месте, или причудливо распределен. Робот может быть реальным, виртуальным, смешанным. Специалист по робототехнике должен быть полиглотом: разнообразие языков программирования следует из обилия весьма различных между собой проблем, встречающихся при построении роботов.


CGI | Сайт Html-book | Справочник HTML | Справочник PHP | [2] [СЕССИИ]
Справочник Javascript | Связка PHP-Javascript | Технология Аякс
Mobilab (J2ME) | Microsoft | ASP | С# | putty


ОГРАНИЧЕНИЯ СИСТЕМЫ ЭЛЕКТРОННЫХ КНИГ


PHP-программа, обрабатывающая переданные данные, размещается тут в самом начале, ее коды окаймляются тэгами с вопросительными знаками.

Исполняемый алгоритм размещается между тэгами <math> ... </math>, php-программа пишется в обычных своих скобках. Запросим, например, версию обслуживающего нас php-транслятора.

В ряде практически полезных случаев помимо основной программы работы с клиентом скриптовыми процедурами вызывается вспомогательная php-программа, которая не имеет формы и всю свою работу выполняет на сервере. В учебнике под коды вспомогательной программы обработка отведен первый фрагмент. Форма окна вывода обязана следовать строго после него с идентификатором id="mainForm", тэг завершения ее не ставится, чтобы охватить сервисные функции учебника.

В целях безопасности договоримся в CGI интерфейсах textarea заменять на text-area (защита области редактирования), не употреблять или не менять разрешенные в примерах операторы записи на сервер, не менять URL папки обрабатываемых изображений. Независимый тэг IMG использует одинарные кавычки, для рисунка в двойных кавычках интерпретатор страницы подыскивает адрес местного каталога рисунков.

Примеры написаны для браузера Internet Explorer. В FireFox не работает синхронный запрос в ajax (если используется синхронный запрос – это уже sjax). В этих случаях не следует использовать обработчик событий onreadystatechange, а просто после метода send() нужно "снимать результат". Ныне браузеры подтянулись, и можно работать практически с любым браузером.

CGI-ИНТЕРФЕЙС



Еще на заре создания оконной системы в Windows сформировались ресурсы, к которым нужно обратиться для того, чтобы увидеть на форме вывода кнопки, переключатели, окна ввода и вывода текста. Правила составления обращения для интернета чрезвычайно упрощены, см. CGI-интерфейса. Особое значение имеет кнопка (input) типа submit страницы P1, она вызывает с сервера S на исполнение страницу P2, указанную атрибутом action формы ее сетевым адресом.


Помимо адреса P2 на сервер отсылаются заполненные у клиента поля ввода информации P1. Серверная программа на PHP, содержащаяся на странице P2, имеет доступ к информации клиента и к информации на сервере, обрабатывает ее и формирует ответ P2. Довольно часто страница вызывает самою себя, как показано ниже (исходные данные и итог размещаются на одной и той же странице), при этом приходится различать стартовый момент, когда страница запускается впервые


Рассморим пример. Атрибутами тэга form указаны имя формы mainForm и метод передачи данных POST, т.е. скрытная передача данных окон клиента "почтой". Атрибут action опущен, страница будет вызывать самою себя.

В системе электронных книг textarea заменяется на text-area (защита области редактирования). Тип, имя и значение ресурсов страницы вводятся атрибутами type, name и value. В программе обращением к input формируются текстовое окно ввода типа text со значением value и кнопка активизации процесса перезагрузки страницы типа submit.

PHP-программа, обрабатывающая переданные данные, размещается тут в самом начале, ее коды окаймляются тэгами с вопросительными знаками. Процедура isset() проверяет, заполнен ли буфер. На старте он не заполнен и ничего не происходит. При ротировании страницы есть смысл буфер читать. Чтение буфера переданных по POST данных происходит обращением $_POST['имя окна']. Как видно, в программе проверяется, нажата ли кнопка press.

Таким образом, можно вводить несколько кнопок типа submit с разными именами и организовывать для каждой свою обработку.

В данном случае кнопка одна (вы можете добавить сами еще такие кнопки, тренируясь). Если она нажата, сервер, следуя php-программе, добавляет приветствие (Привет) к содержимому текстового окна по имени str и выводит его на страницу командой echo. Строки текста соединяются в PHP (в отличие от javascript) точкой. Почему точкой, а не привычным сложением? Браузеру проще разобраться в обилии обрабатываемых разноязычных кодов тогда, когда синтаксис языков специфичен. Нажмите старт, посмотрите, как работает исполняемый алгоритм. Потренируйтесь с ним на учебном форуме.

Существует более открытый (упрощенный) метод передачи GET, когда данные приписываются после вопросительного знака к адресу запускаемой страницы. Этот метод неудобен здесь, поскольку динамически генерируемая страница учебника по факту не хранится на сервере и у нее нет адреса, как такового.

ТЕХНОЛОГИЯ AJAX: ОБМЕН ДАННЫМИ С СЕРВЕРОМ


Язык javascript создавался как средство с жесткими ограничениями на обмен информацией с дисками клиента или сервера. Со временем эта мера безопасности стала стеснять разработчиков, возникла технология ajax прямой связи A между компьютерами сети (сервером и клиентом)


Опираясь на CGI, сформируем интерфейс ввода-вывода вида


и обеспечим обмен данных между окнами через сервер. Тип нажимаемой кнопки button отличается от submit, перезагрузки страницы не происходит. По value формируются надписи на них. При нажатии происходит обращение к указанным по onclick javascript-подпрограммам, исполняемым компьютером клиента. Это ускоряет процесс обработки, нет перезагрузки страницы. Первая кнопка сбрасывает данные первого текстового окна на сервер. Вторая кнопка - считывает их. Строка имени считываемого файла модифицируется рандомизированной опцией запроса фиктивных данных с ? для того, чтобы при повторном клике на чтение браузер брал данные не из кэша на вашем компьютере, а именно с сервера.

Можно обойтись и без сбрасывания на сервер, но мы этот процесс изучаем. В отличие от устоявшихся языков программирования, процедуры записи (write) и чтения (read) пишет сам пользователь на основе указанных штампов. Это позволяет их варьировать. Местный каталог методички '../robots/web/' в лабораторных меняется на им соответствующий.

Ключом true в open команды переводятся в асинхронный режим работы: когда исполнение программ не останавливается на завершении операций удаленного серверного чтения или записи. Иначе возникает ощутимый тормоз при работе со страницей. В FireFox вообще не работает синхронный запрос (если используется синхронный запрос по false – это уже sjax). В этих случаях не следует использовать обработчик событий onreadystatechange, а просто после метода send() можно "снимать результат". Штамп зубрить или разбирать подробно не надо, он употребляется целиком, как данность.

Процедуры заметно несимметричны. Более опасна для спама операция записи на сервер.Файл обмена file.xml содержит записываемые на сервер текстовые данные. Команда чтения, как видно, к нему напрямую обращается, итог чтения передается в текстовое окно с именем 'inp'. Команду записи так оформить нельзя (писать напрямую в файл), иначе в file.xml будут записывать данные не только мы, но и любой спаммер.

На сервере хозяином его размещается программа посредник, в данном случае putdata.php. Программа записи вызывает ее и передает ей данные из окна с именем 'out' и пароль password. Программа putdata.php первым делом проверяет пароль. Так как эта программа пишется хозяином сервера, он может закладывать в нее любые сколь угодно сложные процедуры проверки пароля. Спаммеру вход прикрыт. Если все в порядке, то putdata.php записывает переданные данные в файл file.xml. На внешнюю сложность подпрограмм чтения-записи едва ли стоит обращать внимание. Вариативность – обычное свойство интернет средств, ориентированных на многозадачность. Доступ к содержимому (value) окон интерфейса по их идентификаторам id обеспечивает процедура getElementById(идентификатор). Чтобы побудить браузер заново скачать данные (а не читать старые из буфера), наименование файла меняем добавкой случайного числа, причем в асинхронном режиме буфер buffer загружается по мере поступления информации.

Для сохранения данных на сервере используется текстовой формат. Предпочтителен его xml-вариант, когда тэгами помечаются версия формата, его параметры, начало базы данных root и ее столбцы data.



Запись производится программой putdata.php, проверяющей наличие пароля password и создающей xml-файлы заданного вида. На учебном сервере она уже есть, поэтому заботиться о ней не надо.



Стоит предупредить, что в рабочих реалиях putdata.php занята обработкой рисунков, поэтому передача через нее служебных аббревиатур (типа http, jpg и т.п.) не рекомендуется. К тому же, если вы хотите с ее помощью варьировать графические данные, помните, что в системе электронных книг независимый тэг IMG употребляется с одинарными кавычками. Двойные обязывают систему автоматически добавлять к имени рисунка адрес местного каталога с рисунками, это удобно при переносах фрагментов текстов от книги к книге.

ВЫВОД ГРАФИКИ


Графика играет большую роль при написании интерфейсов. Приведем отладочный пример с полупрозрачными изображениями квадратов. Назначим цвета и альфа-канал (прозрачность) второго из них. Обратите внимание, что обозначения переменных и массивов в php начинается со знака $. Заголовок header определяет способ сжатия изображения (png).


В программе генерируется изображение $image со сторонами 200. Тремя (красный-зеленый-голубой) RGB-составляющими в шестнадцатиричной системе счисления 0x (цифры 0, 1, ... 9, A, B, ... E, F) задается цвет $col. Этим цветом заполняется квадрат со стороной 100. Тремя RGB-составляющими и прозрачностью задается новый параметр раскраски. Поверх рисуется еще один квадрат со стороной 150. Последний оператор выводит изображение на экран дисплея.

ВЫВОД ФОТОГРАФИИ


В данном случае с диска читается готовое изображение. Процедура чтения размеров фотографии GetImageSize(имя) формирует вектор, в котором помимо размеров указан и номер типа файла. Символ @ употребляется для разрешения неопределенности на тот случай, когда имя фотографии задано с ошибкой: по default возвращается квадрат стороною 200. Знание типа файла позволяет применить соответствующую процедуру чтения. Результат работы подпрограммы выведем на экран.


ВЫВОД АЛЬБОМА ФОТОГРАФИЙ


В дисковой операционной системе DOS вывод имен файлов на дисплей обеспечивала команда dir. Сходная команда на сервере посылает имена в массив $files из каталога (folder) records/images. Прочтем массив в цикле while строчка за строчкой $e, опуская файлы с типами, отличными от gif, jpg, png. Фильтр имен выглядит громоздко, неизбежные издержки вариативности формулировок условия выбора. Порядковый индекс $t.$e таблицы $table, в которую записывается путь $path, время $t и прочие параметры, учитывает еще и имя файла. Иначе при последующей сортировке krsort() таблица потеряются файлы, созданные одновременно. В цикле foreach каждая строка $line таблицы $table используются для формирования echo-команд вывода фотографий с указанием источника src изображения и его высоты 150.


Рядом с фото выводятся чекбоксы с порядковыми идентификаторами pic1, pic2 и т.п., по завершении цикла в скрытом буфере (hidden) хранится максимальное количество фотографий (max). Пока чекбоксы никак не используются, показывается возможность дать пользователю пометить фотографию. Обратите внимание, как свободно в текстовую строку вписывается содержимое текстовых переменных $folder и $e.

ОБРАБОТКА НА СЕРВЕРЕ


Добавим к альбому кнопку обработки, проверку нажатия ее, цикл перебора чекбоксов и операцию поворота выбранного фото с сохранением в файле image.jpg. Так как реверсная сортировка krsort() ставит на первое место последнюю записанную на сервер фотографию, итог операции будет виден как первое фото альбома. Чтобы побудить браузер заново скачать обновленное фото (иначе изображения берутся из буфера на клиенте) меняем ее имя добавкой текущего времени ?$t. Форма здесь и далее всегда вставляется после первой порции php-кодов, посвященных обработке (если не разделять этапы обработки и вывода, то система припишет форму ниже чекбоксов и их содержимое станет недоступным).


ОБРАБОТКА НА КЛИЕНТЕ


Компьютер клиента может вести обработку данных автономно, без обращения к серверу. Посредством getElementById(идентификатор) javascript оперирует c идентификаторами id (а не с именами name) объектов страницы, в остальном идея организации обработки близка предыдущей программе, включая стимуляцию загрузки фото браузером. Мощность серверного варианта выше, поэтому реализуем простую операцию показа выбранного изображения в первом окне img1.

Кнопка старта (button) употребляется без атрибута submit, вызывающего перезагрузку страницы. Среди ее атрибутов есть указатель процедуры обработки onclick. Доступ к переменным интерфейса обеспечивается с помощью getElementById(имя). Перезагрузите страницу, и вы увидите, что в отличие от предыдущего случая вся обработка велась на клиенте, а не на сервере. Восстановится прежний вид альбома фотографий. Контрольный вывод данных на клиенте обеспечивает отладочная процедура alert().

КРАТКАЯ ИНФОРМАЦИЯ О СЛОЯХ


Для создания слоев следует использовать тег DIV или SPAN. Эти теги взаимозаменяемы и различаются лишь внешним видом в браузере. Если требуются отступы до и после текста, следует использовать элемент DIV. При размещении текста внутри параграфа применяется тег SPAN. Ниже приведен пример создания эффекта наложения одного текстового фрагмента на другой:

Тип позиционирования слоя определяется параметром position, положение элемента - двумя координатами top и left, а порядок слоя значением z-index.

Позиционирование слоя. Свойство position может принимать одно из трех значений: static (статическое), relative (относительное) и absolute (абсолютное). Параметр static по умолчанию не оказывает никакого влияния на расположение слоев. Параметр position: relative используется для смещения слоя относительно родительского элемента. Установка этого значения не изменяет размещение элемента, но если установлены значения свойств top или left, то слой смещается от своего нормального положения в документе. При абсолютном позиционировании слой размещается относительно левого верхнего угла окна документа. В случае размещения слоя внутри другого, абсолютные координаты считаются от левого верхнего угла родительского слоя.

Кроме отмеченных тегов абсолютное позиционирование поддерживают следующие элементы: APPLET, TABLE, IMG, TEXTAREA, IFRAME, INPUT, BUTTON, OBJECT, SELECT, FIELDSET.

Положение слоя. В то время как свойство position указывает тип системы координат, параметры top и left определяют точную позицию слоя. Значения этих параметров могут определяться в процентном отношении или пикселах, принимать положительные и отрицательные величины. Это дает возможность размещать контент выше или ниже на странице независимо от физической позиции кода HTML. То есть, в верхней части страницы можно поместить слой, который описан внизу HTML-документа.

Свойство z-index. Свойство z-index определяет порядок слоев, или их перекрытие по отношению к другим слоям. По умолчанию все слои позиционированы со значением z-index равным нулю. Другие слои могут размещаться ниже путем установки отрицательного значения z-index. Для слоев, у которых z-index не установлен, это значение назначается неявно в соответствии с их положением в документе. Поэтому слой, который помещен в документ позже, размещается выше остальных элементов, позиционированных ранее.


Свойство visibility. Для отображения или скрытия слоя используется параметр visibility. Он может принимать значения visible, установленное по умолчанию, для показа слоя, и hidden, которое его прячет. Например, скрытый блок текста можно оформить следующим образом:



Динамическое управление слоями. Сценарии позволяют динамически управлять параметрами установленных слоев. Отсюда можно получить такие эффекты, как скрытие и отображение слоя, изменение порядка отображения, перемещение слоя в окне браузера. Все эти эффекты достигаются с помощью изменения соответствующих стилевых параметров установленных слоев.

Каждому слою присваивается собственное имя при помощи параметра id. Например:



Для того, чтобы скрыть отображение слоя div1, можно использовать следующую команду:



Для повторного обображения слоя следует выполнить следующее присвоение:



Ниже приведен пример, использующий динамическую смену слоев для изменения текста на странице. В данном примере для отображения некоторого слоя следует нажать на соответствующую ссылку. Эту идею можно применить и для организации выпадающих меню.

Более подробнее возможности скриптового управления рассмотрены в упражнениях.

ГРАФИКА НОВОГО ВЕКА


Языки разметки VML (Микрософт) и PGML легли в основу SVG (от англ. Scalable Vector Graphics – масштабируемая векторная графика) – язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML.

Стандарт поддерживает как неподвижную, так анимированную и интерактивную графику – или, в иных терминах, декларативную и скриптовую. Не поддерживает описание трёхмерных объектов (не путать с имитацией трёхмерности путём светотени). Это открытый стандарт, является рекомендацией консорциума W3C, – организации, разработавшей такие стандарты, как HTML и XHTML. Разрабатывается с 1999 года, в 2001 году вышла 1.1 версия, которая остается актуальной до сегодняшнего дня, в активной разработке версия 1.2.

Проблема состоит в том, что браузеры новой волны, FF и прочие, заметно активнее используют синтаксис, не исполняемый корректно в IE8. Обновленная версия IE9 выпущена 14 марта 2011 года, предназначена только для Windows 7, Windows Server 2008 R2, Windows Vista и Windows Server 2008 (с установленным обновлением Platform Update); для них имеются 32-х и 64-х версии. IE9 поддерживает спецификацию HTML5, многие компоненты CSS 3, формат шрифтов Web Open Font Format, векторную графику в формате SVG, цветовые профили ICC версий 2 и 4, обеспечивает более быструю обработку JavaScript. Также, в IE9 представлено аппаратное ускорение отрисовки графики при помощи Direct2D. Иными словами, Microsoft расстается с XP.

С принципами компромиссных решений – замена SVG вызовами адаптированных к особенностям ходовых браузеров процедур – можно познакомиться на примере быстро растущей в размерах библиотеки raphael.js. Лидерство SVG сделает компромиссные библиотеки ненужными, но пока, еще на десяток лет, они вполне разумны и приемлемы (к новому можно всегда перейти).

БИБЛИОТЕКА RAPHAEL - РИСУЕМ КРУГ


Пробуем библиотеку Raphael. Линк на новую библиотеку Raphael | пример | обсуждение. Ниже работает старая версия Raphael, исследование новой raphael2.js отложено.


Сетевой Java-MatLab помимо прочего эмулирует на клиентской машине AVR-микропроцессор, программируемый в среде AVR-GCC, и выводит графическое изображение отладочной платы или робота с AVR-микропроцессором.

Chipenable | Easyelectronics | 123avr



Rambler's Top100