Создание фирстиля и экстерьера киосков «Всё сам»
Клиент, когда-то первым в Москве установивший вендинговый аппарат по продаже кофе «3 в 1», теперь загорелся идеей установить по всему городу полностью автоматические торговые киоски. Прежде чем обратиться в студию, он уже досконально изучил опыт Европы, Америки и Китая в этой области и имел прототип устройства.
Перед тем как приступить к работе над поставленной задачей, едем взглянуть на рабочий прототип киоска. Смотрим, как выглядит панель управления, как работают механизмы, какой размер шрифта виден сквозь стекло.
Придумываем роботу-24-киоску новое имя и для наглядности примеряем его на крышу, пользуясь фотографией.
Клиент выбирает один из вариантов, но сомневается.
Думаем над лаконичным вариантом. Вот человек идет домой с работы и тут вспоминает, что нужно купить хлеба. О!
Примеряем на киоск (и пусть по ночам светится).
Баблы или прямая речь?
Клиент уходит подумать и выбирает название «Всё сам».
Как будет выглядеть киоск, какие материалы будут использоваться для отделки, как будет организовано освещение, как будет расположена вывеска? Прикидываем несколько вариантов.
Архитектор работает над вариантом конструкции крыши.
Одновременно думаем над логотипом. Появляются роботоруки, глазки, веселая корзина, пиксельные шрифты.
Показываем клиенту две концепции: роботизированные руки и пиксельные пиктограммы.
Для киоска выбираем черный цвет. Прикидываем, как киоск будет соединен с остановкой общественного транспорта.
Дальше думаем над характером и пропорциями логотипа. Смотрим какие бывают шрифты.
На их основе отрисовываем буквы с нужными пропорциями. Буква Ё подсказывает интересное решение.
Первый подход к пиктограммам для оформления инструкции и крыши киоска.
Арт-директор просит сделать все проще и однороднее.
Груша-жопа, очки-лифчик и звезда-неудачница отправляются на переделку.
Иконки общественного транспорта.
Пиктограммы-инструкция и раскадровка для анимации на экране терминала.
Собираем все детали вместе.
Дизайнер: Давайте котика-то сбоку на дверь посадим?
Думаем над оформлением панели управления. Нужно ли выделять разные элементы с помощью цветового кодирования? Нет, не нужно, выглядит сложно и непонятно.
Успокаиваем и упрощаем.
Смотрим на киоск и на киоск с остановкой в целом.
Приступаем к разработке ценников.
На ценнике обязательно должен быть куар-код, который считывает робот, цена и номер товара. Ценники будут разной длины, но не короче 4,5 см. Высота ценникодержателя — 22 мм, минимальный размер куар-кода — 20 мм. Код товара пишем со знаком решетки и выбираем для него пиксельный шрифт.
Подбираем наилучшую компоновку.
Понимаем, что для кода товара нужны пиксельные цифры, которые будут лучше читаться. Дизайнер рисует цифры, все встает на свои места.
У киоска есть большой дисплей на котором будет размещена различная информация о том, как пользоваться киоском, а также рекламные ролики. А в промежутках будет проигрываться какая-нибудь анимация. Какая?
Дизайнер: Это должно быть что-то простое, крупное и внятное, без мелочевки и ненужных деталей, которые издалека никто все равно не увидит.
Раз у нас живой робот-киоск, значит в верхнем экране будут его глаза.
Арт-директор и клиент одобряют. Передаем скетчи в руки разработчиков интерфейса.
Собираем презентацию для администрации города, с которой клиент отправляется за разрешением на установку киосков в Москве. Ура, разрешение получено.
Источник
Личный опыт создания справочно-информационного центра на базе «Kiosk» (или терминала) с сенсорной панелью
В статье будет рассказано про:
- Что и как работает.
- Некоторые моменты настройки такого аппарата на OpenSUSE 11.3.
- Некоторые моменты связанные с создание интерфейса (web интерфейса).
- Моя точка зрение на теме “Почему некоторым системным администраторам, иногда, нужно делать такие вещи, несмотря на то что можно было нанять фирму и “не парится””.
Признаюсь сразу — это все работает через веб-интерфейс.
Итак, имеем киоск или терминал с одной стороны и задачу с другой.
Задача. Есть сеть розничной торговли бла-бла-бла и косметики, дорогой косметики. Задача терминала — стоять в торговом зале и помогать продовцам-консультантам и/или клиентам. То-есть, все товары разбиты на категории, клиент или консультант выбирает что ему нужно, и получает список нужных позиций. Это была постановка задачи от руководства. От себя было дабавленно:
- рулить контентом удаленно.
- синхронизация с основной базой (MS-SQL). Новый товар должен сам переползать.
- прямые запросы в основную базу для поиска товара по филиалам по всему город.
Само железо. Тоже самое что и пополнялки мобильных в людных местах, но на порядок аккуратней и без банкнотоприемник. Изготовлено какой-то фирмой у которой есть сварщик, баллончик с краской и диск с windows xp. Но надо признать, сделано качественно и с душой. На борту Intel Atom, 1 ГБ ОЗУ, намертво прикрученный монитор, и накладка типа Touch Kit (оно и есть сенсорная панель).
UPD. Фотика сейчас нет, пока вот. Называется он Ск-И/П-1. Стоимость примерно 2,000 $.
1. Что и как работает
Вся сеть работает на желтой программе версии 7.7, с очень толковой специфической конфигурацией. Всё работает по типу звезда, есть склад который видит всех, все остатки и движения. Точки работают каждая со своей базой, раз в n минут точки сбрасываю информацию о себе (чеки, сведения о полученных накладных и т.д.). И вот проблема — структура базы никак не соответствует новой задаче. Можно было бы добавить несколько полей и данные вытягивать через веб-интерфейс, но как-то не хотелось. Пришлось бы добавлять новые обработки, лепить веб часть и т.д.
Немного порылся в интернете, и нашел интересную компоненту для joomla — VirtueMart, которая полностью подходила под задачу. А именно:
- есть поле остаток на складе и цена (ну это у всех есть)
- каждой позиции можно присваивать несколько категорий (а это очень важно)
- есть много полей которые можно задействовать под свои нужды
- удобный back-end интерфейс
Решение и весь процесс работы получился примерно таким:
Сначала сделал служебную категории типа “Новый товар”, которая не public, то-есть не выводятся в front-end. Далее синхронизация. MS-SQL выгружает в csv файл весь справочник (примерно 40 000 позиций), но выгружает только два поля — некий code и название. Code — не id, но он уникален, и содержит только цифры. Потом cron запускает скрипт и затягивает это все в MySQL. Тут и пригодились “служебные” категории. В “новый товар” попадают только новые позиции, все остальные игнорируются. Выгружать весь справочник необходимо, потому-что иногда могут поменять название, нужно сверить два справочника, найти весь новый и измененный товар. Если товар переименовали тогда, еще и удалить из всех категорий. Менеджеры видят новый товар, добавляют описания и присваивают категории.
А дальше все прелести CMS — кроссплатформенность, пользователи, поля для картинок, описаний и т.д…
Синхронизация проводится еще и по остаткам, в такой-же csv файл сливается code и сумма остатков по всем филиалам, если больше нуля, тогда становится доступна кнопка “поиск по филиалам”. Тут уже идет запрос в MS-SQL, который выводит результат в виде красивой таблички — где и сколько есть данного продукта.
Удобства в такой связке:
- проект пилотный, и неизвестно долго ли проживет, а мы не “засрали” конфигурацию и основную базу
- нет дублирования работы. Не нужно добавлять товары и филиалы по два раза
- в случае выхода в интернет, для своих или для всего мира, нужно только добавить шаблон с немного другим интерфейсом
2. Некоторые моменты настройки такого аппарата на OpenSUSE 11.3
Так как winxp был не белый и пушистый, да еще и с парой троянов на борту было решено ставить что-то линуксовое. Выбор пал на opensuse потому что я с ним работаю и я его знаю. Хотя дистрибутивов именно для такой задачи есть много, но по отзывам не вызвали доверия.
Итак сюрприз от OpenSUSE — знать не знает как работать с панелью. На винде стояла утилита и драйвера от eGalaxTouch, нашел для линукса — панель ожила, но тупит, оси перепутаны, и работает только половина, на настройки не реагирует.
После гугления нашел драйвер evtouch (x11-input-evtouch.rpm). Панель опять ожила, но работать с ней по прежнему не возможно. Пришлось калибровку делать вручную. Примерно такой у меня вышел конфиг:
Section «InputClass»
Identifier «touchscreen»
MatchIsTouchscreen «On»
MatchDevicePath «/dev/input/event*»
Driver «evtouch»
Option «Rotate» «CW»
Option «SwapX» «1»
Option «SwapY» «1»
Option «MinX» «380»
Option «MinY» «200»
Option «MaxX» «1560»
Option «MaxY» «1550»
Option «ReportingMode» «Raw»
EndSection
Если кто-то подскажет в каких единицах значение Min — Max буду очень признателен.
Далее мне нужно было запускать firefox 3.6 на весь экран. Но тут тоже была проблема, на gnome и kde браузер в режиме full screen жутко тормозил. Я вспомнил про lxde, который действительно оказался очень легким, тормоза пропали, да и вообще система поживее стала. От firefox требовалось еще несколько вещей — стартовать автоматически в все тот же full screen, убрать все панели, кнопки и т.д., а то мало-ли у кого ручки шаловливые будут. И последнее — переходить на начальную страницу при бездействие n минут. Решается двумя расширениями — fullfullscreen ( что делает ясно из названия, плюс убирает все панельки, меню и т.д..), и ResetKiosk — при бездействии n минут переходит на домашнюю страницу.
Тут все.
3. Некоторые моменты связанные с создание интерфейса (web интерфейса)
Мои выводы по этому поводу, которые возможно сэкономят время кому-нибудь:
- кнопки, естественно, большие, чтоб пальцами удобно нажимать
- кнопки должны быть похожими на кнопки (выделенные или объемные)
- кнопки должны нажиматься, светится или наоборот темнеть, должны как-то реагировать на нажатие
После того как я это переделал, мне стало значительно комфортней работать. Сразу видно где элементы управления, а где элементы дизайна, и сразу понятно на что я нажал.
Но с веб-интерфейсом была еще одна беда. То ли у меня пальцы не правильные, то ли панель слишком чувствительная, в общем не знаю почему но нажимать было жутко неудобно. Дело в том что firefox позволяет все элементы “драгать и дропать”, и при нажатии, в половине случаев, получается попытка перетащить элемент. Некрасиво, и по ссылке не переходит. Тут пригодился jquery. С его помощью я прикрутил jcarousel для прокрутки содержимого (очень красиво получилось), ну и здесь пригодился:
Такое решения отрыл где-то на форуме, но после этого … Получился прям iPad, нажимается все четко и приятно.
Немного не в тему, но высказаться хочется.
4. Моя точка зрение на теме “Почему некоторым системным администраторам иногда нужно делать такие вещи, несмотря на то что можно было нанять фирму и “не парится””
Работая системным администратором в непрофильной компании время от времени приходится делать не совсем свою работу. Часто это напрягает, а иногда делать ее нужно, например для оправдания себя на рабочем месте перед начальством. Попытаюсь пояснить.
Кого интересуют бекапы, контролеры доменов, базы и т. д… Когда все работает стабильно долгое время начинаются разговоры типа — “Сидит, смотрит в монитор, ничё не делает, и зарплату получает”. Вообще никого не интересует, да и не понимают, что и где нужно переделать, потому что когда то спешили, и сделали на скорую руку, что компания растет очень быстро, и я пытаюсь угнаться, спрогнозировать рост баз данных, увеличение трафика, выбить новое оборудование и т.д. и т.п… Да еще и сапорт 24/7 для всяких тетенек которым до пенсии осталось чуть-чуть. Такая ситуация наверно многим знакома, увы я изменить ничего не могу, профильных организаций мало, да и они все справляются без админов.
А я думаю что корень проблемы именно в том что люди непонимающие просто не видят нашей работы, поэтому и разногласия. Грузчик, видно что работает, был цемент в вагоне — стал на складе, вот это работа, а мы на кнопки жмем.
Свое руководство я радую, иногда, работой которую видно, несколько интернет сервисов для своих работников, не сложных, на недельку работы, и меня любят очень сильно, и зарплату поднимают. Сделал справочный центр, опять любят и премию дали.
Мой вывод — их нужно понять, и иногда давать то что хотят.
Источник
