Скачать программу или прошивку dashboard для windows. Как запилить свой дешборд на все случаи жизни? Как обновлять данные
Однажды мне потребовался WYSIWYG редактор, я помнил как он выглядит, его функции, но не помнил названия. Через 45 минут я все же его нашел… Тогда я поставил перед собой задачу помочь многим, в том числе и себе: сделать сводный список всех чуть более известных WYSIWYG редакторов.
Вступление
Данный топик представляет собой обширный список визуальных редакторов, почти или частично пригодных для использования. Цель, которой я руководствовался, заключался в том, чтобы систематизировать существующие данные, разбросанные по интернету.TinyMCE
Один из самых распространенных визуальных редакторов, обладает недюжинным функционалом. Есть множество дополнений, по умолчанию установлено множество плагинов.
(Браузеры: Mozilla 1.3+, MSIE 5.5+, Opera 9.0+, Safari, Chrome)
[Официальный сайт | Демо ]
CKeditor
Полный аналог TinyMCE.
[Официальный сайт ]
CLEditor
Незамысловатый визуальный редактор, особенных функционалом не балует. Но сделан вполне добротно, качественно реализованы все функции.
(Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Camino 1.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт ]
NicEdit
Редактор очень похож на CLEditor. Обладает стандартным функционалом.
(Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт ]
elRTE
Очень качественный визуальный редактор. Обладает широким функционалом. Сделан очень качественно.
(Браузеры: Firefox 3.5+, Opera 10+, Safari 3.0+, Internet Explorer 7+, Google Chrome)
[Официальный сайт | Демо ]
Spaw
Очень средний визуальный редактор. Обладает стандартным функционалом.
[Официальный сайт | Демо ]
Xinha
Неплохой визуальный редактор, отличительная особенность - множество встроенных action"ов. Т.е. настроить его под свои нужды не составит трудностей.
(Браузеры: Firefox 1.5+, Opera 9+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome)
[Официальный сайт | Демо ]
Imperavi (Платный)
Достаточно милый редактор, функционал не большой, но его вполне хватает. Существует ряд ошибок связанных с переходом от html к визуальному редактору и обратно. (убираются align"ы) Важно заметить, что Imperavi работает как плагин к JQuery.
Имеется неплохая документация .
(Браузеры: Firefox 1.5+, Opera 9+, Safari 4+, Internet Explorer 7+, Google Chrome)
[Официальный сайт | Демо ]
Markitup
Markitup больше похож на удобный редактор html, который больше подойдет профессионалу, нежели рядовому пользователю. Но если вы знаете html, то он может оказаться вполне удобным.
(Браузеры: Firefox 3+, Opera 9+, Safari 3+, Internet Explorer 6+, Google Chrome)
[Официальный сайт | Демо ]
Aloha Editor
Неплохой редактор, очень удобен. Однако существует огромный минус, который затмевает почти все плюсы - это отказ от поддержки старых и не очень браузеров (доступны только последние версии браузеров).
(Браузеры: Требуется поддержка HTML5, Opera не поддерживается)
[Официальный сайт | Демо ]
Mercury editor
Mercury представляет собой цельную веб-страницу, и может быть использован для редактирования целой страницы или отдельных определенных областей. Он поддерживает функцию предварительного просмотра отредактированного содержимого, а также размещение ссылок, изображений, видео и таблиц. Загрузка файлов может быть осуществлена посредством интерфейса drag"n"drop.
Редактор также поддерживает совместную работу нескольких человек. Mercury может быть установлен в качестве отдельного Rails, либо за счет внедрения в код страницы. (Требуется JQuery)
И минус в том, что поддерживаются только следующие браузеры: Chrome 10+, Safari 5+, Firefox 4+.
[Официальный сайт | Демо на главной странице]
YUI Rich Text Editor
Визуальный редактор от Yahoo. Как справедливо заметил sdevalex , один из лучших визуальных редакторов. Обладает исчерпывающим функционалом, поддерживает подавляющим большинством браузеров.
[Демо ]
MooEditable
Набор функций сильно ограничен, однако порой больше и не требуется.
[Демо ]
OpenWysiwyg
Кросс-браузерный полноценный редактор со всеми требуемыми функциями. Он даже включает в себя привлекательные выпадающие меню и кнопки. К сожалению, Chrome не будет поддерживать его.
(IE 5.5+, Firefox 1.0+, Mozilla 1.3+ and Netscape 7+)
Представляем вашему вниманию новый дашборд (Dashboard). Так называемая прошивка в модем… Или говоря по-простому, программа управлением для модемов HUAWEI . Итак, посмотрим, что она умеет нового.
Программа управления модемом с настроенными профилями Российских операторов связи Сибири и Иркутской области. (МТС, БИЛАЙН, МЕГАФОН, ТЕЛЕ2, БайкалВестКом),
Функция автоматического выбора профиля подключения,(производится автоматическое определение сети и профиля оператора, после установки сим карты в модем и его подключения к компьютеру. Определение типа сим карты и оператора производится автоматически по коду сети оператора).
Отправлять и получать SMS,
Ведение истории подключений,
Функция авто подключения при разрыве связи,
Запрос баланса в один клик + редактирование дополнительных USSD команд, имеются так же добавленные команды:
Остаток пакета Мегафон
Остаток пакета МТС
Активация Билайн Home
Проверка услуг Мегафон
Подкл,/Откл, Мегафон Базовый
Подкл,/Откл, Мегафон Оптимальный
Возможность редактировании и добавления любого профиля или USSD команд
Имеется автозапуск самой программы при вставке модема в USB порт компьютера.
Драйверы для Windows XP, VISTA, 7. Версия пакета драйверов 4.23.04.00.
Модели модемов HUAWEI для которых можно применить данный дашборд: E150, E153, Е156, Е160, E171, E173, E1550, E1750, E1820, E352, E367, E369, E392. а так же возможно другие модемы серии HUAWEI
Рассмотрим теперь это достижение программной мысли более подробно.
Первый запуск программы (запуск произведен без сим карты в модеме)
Можно видеть, что Профиля оператора в строке подключения нет. Теперь подключим модем с симкартой Билаина и запустим программу повторно, больше ничего не меня и не трогая.
После подключения модема с сим картой происходит автоматическое определения сети, оператора и профиля оператора. Тем самым облегчая нам жизнь… Так как не приходится ничего ни настраивать, ни выбирать, ни вписывать. Авто определение оператора происходит автоматически по коду сети оператора.
Это уже окно истории
Дальше идут Вызовы… Тем самым позволяя нам звонить с модема не применяя телефона
Так же есть возможность отправлять и принимать СМСки
Как и в телефоне… В данной программе есть журнал
Имеется так же очень удобная записная книжка типа Контакты… Позволяя тем самым произвести оперативный звонок или быструю отправку СМС
Ну и не менее важна функция это проверка баланса на сим карте вашего модема
Как можно понять из скрина… В левой части находятся кнопки запроса баланса в один клик. В нижней части находится список USSD команд, которые вы всегда сможете сами добавить, убавить, отредактировать. Итак, посмотрим, как выглядит окно редактирования USSD команд
После редактирования, добавления USSD команды, вам достаточно нажать кнопку Сохранить. И ваши изменения будут сохранены.
А теперь посмотрим более тонкие настройки программы
Общие
Автоподключение
В работе почти каждого человека непременно есть цифры, от которых зависит всё. Посещаемость сайта, время отклика или количество коммитов - что угодно! И если поместить эти цифры на самое видное место, они сразу становятся либо отличным способом оперативно принимать решения, либо просто наглядным инструментом мотивации. А самый лучший способ сделать это - это собственный дешборд, информационное табло, которое можно повесить на самом видном месте в офисе.
Зачем нужны Dashboard’ы?
Если верить Google Translate, Dashboard - это приборная панель. И действительно, на тех Dashboard’ах, о которых пойдет речь в статье, можно оперативно наблюдать за изменениями разных параметров - словно на панели приборов самолета. Только вместо самолета у нас будет условный стартап, а вместо высоты, крена и температуры за бортом - количество посетителей онлайн, статус разных компонентов сервиса и загрузка сервера.По сути дэшборд - это экран, на который в реальном времени выводятся актуальные данные в какой-то красивой и наглядной форме, например, в виде графиков, цифр или диаграмм. Такие экраны висят на стенах офисов многих крутых компаний: например, на экран в офисе Яндекса выводятся поисковые запросы, которые пользователи вводят в данный момент. Во многих технических стартапах на экране для технических парней показывают данные всевозможных мониторингов. Я тоже захотел сделать что-то подобное и уже готовился несколько дней кодить - но оказалось, что все необходимое уже сделали до меня.
Как построить дэшборд?
Мы будем строить наш Dashboard с помощью свободного фреймворка Dashing , разработанного в недрах компании Shopify. Заложенная архитектура подразумевает, что дэшборд состоит:- из «рук», то есть граббера, который с заданным интервалом собирает необходимые данные;
- «мозга», то есть парсера, который эти данные в реальном времени обрабатывает;
- «морды» - фронтенда, на который эти данные выводятся в красивом и наглядном виде.
Всем по Хероку
Heroku - это идеальная площадка для того, чтобы бесплатно захостить Dashing.Для этого на главной странице Heroku жмем кнопку Sign Up, на появившейся странице вводим email, в полученном письме переходим по ссылке подтверждения, придумываем пароль и тыкаем Save. Готово! Теперь у нас есть маленький, но гордый уголок в облаке, в котором можно быстро создавать элегантные веб-приложения.
Страничка, на которой мы оказались, предлагает установить Heroku Toolbelt - утилиту для работы с облаком. Не будем себе в этом отказывать. Если у тебя, как и у меня, Ubuntu или Debian, то смело пиши в консоль:
Wget -qO- https://toolbelt.heroku.com/install-ubuntu.sh | sh
Если Windows или OS X, качаем с их сайта exe или pkg и устанавливаем.
Во-вторых, нам понадобится система контроля версий, чтобы оперативно вернуть все на свои места, если мы внезапно все испортим, и чтобы знать, кому надавать по шапке, если все испортит кто-то другой. Создатели Heroku рекомендуют для этих целей Git. Не будем отказываться - Git и вправду хорош. Установить его легко:
Sudo apt-get install git
Для другой операционной системы Git так же легко качается с официального сайта и так же просто устанавливается. Теперь у нас есть все, чтобы начать.
Установим Dashing
Для начала авторизуемся в Heroku. Для этого открываем командную строку, пишем:Heroku login
Вводим сюда email и пароль, указанные при регистрации. Создаем папку для будущего репозитория и переходим в нее.
Mkdir dashing
cd dashing
Клонируем Git-репозиторий Dashing:
Git clone https://github.com/Shopify/dashing.git
Теперь надо установить приложение, проинициализировать новый Git-репозиторий и закоммитить в него все, что мы только что клонировали:
Bundle install
git init
git add .
git commit -m "My beautiful dashboard"
Создаем приложение в Heroku
Heroku apps:create xakepdashboard
Теперь оно доступно по адресу xakepdashboard.herokuapp.com , но в нем ничего нет. Но утилита Heroku создала отдельную ветку репозитория heroku . Скопируем туда наше приложение.
Git push heroku master
Если консоль ругается на отсутствие файла Gemfile.lock несмотря на то, что он есть, открываем файл.gitignore
Gedit .gitignore
и удаляем оттуда строку./Gemfile.lock
После этого push пройдет успешно, после чего автоматически запустится установка. Ах, этот прекрасный век умных машин! Пока идет установка, можешь попить кофе и сделать рассылку коллегам, что через 20 минут будет готов невероятный по красоте и наглядности сервис визуализации корпоративных данных.
Первый Dashboard
Поскольку Dashing написан на Ruby, создать свой первый дэшборд будет проще простого. Устанавливаем соответствующий gem (убедись, что в системе установлен Ruby 1.9+): $ dashing new sweet_dashboard_project
Переходим в директорию sweet_dashboard_project и бандлим гемы:
$ bundle
Теперь можно запускать сервер:
$ dashing start
Если все прошло как надо, то на 3030-м порту запустился веб-сервер (в основе Dashing используется Sinatra), поэтому можно смело открывать в браузере localhost:3030.
Любой дэшборд идет вместе с демонстрационными виджетами и необходимыми файлами - вместе они представляют собой хорошую отправную точку, чтобы сделать дэшборд под себя. На экране будет несколько виджетов, которые произвольно можно перемещать и менять местами. Разработчики специально подобрали такой набор, чтобы продемонстрировать разнообразие способов визуализации данных: один из виджетов показывает график изменения некого параметра (например, загрузки процессора), второй больше подходит для визуализации стоимости и ее изменения ценных бумаг, третий визуализирует цифровое значение, но с помощью кругового индикатора, похожего на спидометр, в четвертом выводится табличка с определенной статистикой, еще в одном выводится текст и идет обратный отсчет.
Кстати, тут же приводится пример, как можно влиять на те данные, которые выводятся на Dashboard. Попробуй набрать в консоли:
Curl -d "{ "authtoken": "YOUR AUTH_TOKEN", "text": "Этот текст будет выведен на виджет" }" \http://127.0.0.1:3030/widgets/welcome
и в одном из виджетов изменится текст. Об этом мы еще поговорим далее.
Структура Dashing
Для начала надо разобраться с простой структурой приложения:- Assets - в этой папке находятся изображения, шрифты, библиотеки js/coffeescript.
- Dashboards - для каждого дэшборда есть свой erb-файл, в котором описывается расположение и параметры виджетов.
- Jobs - скрипты для сбора данных (например, вызова API внешних сервисов).
- Lib - опциональные вспомогательные Ruby-файлы, которые могут понадобиться.
- Public - статические файлы дэшборда (сейчас тут лежат favicon или кастомная 404-я страница).
- Widgets - весь HTML/CSS/coffee-код для собственных виджетов.
<% content_for(:title) { "Xakep dashboard" } %>
У каждого из виджетов два важных параметра: data-id (это идентификатор виджета, который далее используется при обновлении файлов), а также data-view (указывает тип виджета, в данном случае оба виджета числовые). Используя сетку, описываемую параметрами data-row (ряд) и data-col (столбец), как конструктор, собираем дэшборд из нужных виджетов (по умолчанию в Dashin реализованы clock, comments, graph, iframe, image, list, meter, number, text).
Никто не мешает написать свой виджет (не будем углубляться, все есть в документации), но на первых порах нам совершенно точно хватит и стандартных. А вот с чем важно разобраться, так это с обновлением данных, которые далее будут визуализироваться. Ведь это самое главное.
Как обновлять данные
Передача данных в виджеты реализована очень просто. Надо лишь указать виджет, который нужно использовать (с помощью его widget-id), и передать ему данные в виде JSON. Есть два пути это сделать.Задачи с планировщиком (Jobs)
В Dashing встроен специальный планировщик, который парсит job-скрипты, находящиеся в папке jobs, и выполняет заданные в них действия с нужной периодичности. Для того чтобы создать свой job-файл, используем generate job sample_job.SCHEDULER.every "1m", :first_in => 0 do |job|
send_event("karma", { current: rand(1000) })
end
Эта задача будет выполняться каждую минуту и отправлять рандомное значение всем виджетам, у которых data-id равен karma. Соответственно, для передачи значений используется метод send_event(widget_id, json_formatted_data).
Задачи очень полезны, когда надо забирать какие-то данные из базы данных или вызывать сторонние API (в Dashing реализована агрегация данных из Twitter’а).
API
Другой способ - апдейтить данные прямо через HTTP:Curl -d "{ "auth_token": "YOUR_AUTH_TOKEN", "current": 100 }" http://localhost:3030/widgets/karma
В целях безопасности используется токен (он прописывается в config.ru). Пример такого запроса мы уже видели, когда обновляли значение текстового поля в дэшборде, который Dashing создает по умолчанию.
Мой дэшборд для офиса
Вокруг Dashin начинает формироваться большое комьюнити, на специальных страницах github.com/Shopify/dashing/wiki/Additional-Widgets и dashing.challengepost.com собрано немало готовых виджетов.Я с ходу смог собрать дэшборд для своего офиса. Что я хотел сделать? В нем должен идти обратный отсчет до релиза (либо до конца итерации, если используется Agile). Также необходимо мониторить количество посетителей, в данный момент находящихся на сайте (данные будем брать из Google Analytics). Вместе с этим хорошо бы отслеживать нагрузку на сервер, дабы вовремя понять, что и где нужно оптимизировать и какие меры принять, чтоб не дать сайту внезапно обрушиться под волной посетителей или DDoS-атакой. Ну и наконец, будем следить за тем, что о нас пишут в социальных сетях: выведем на экран последние сообщения из твиттера с названием нашего сервиса.
В итоге я собрал следующий набор виджетов:
- Обратный отсчет Countdown widget .
- Мониторинг посетителей. Виджет Google Analytics .
- Нагрузка на сервер. Виджет Load Averages .
- Статус проекта в виде светофора. Виджет Github status перепишем под свой проект .
- Твиттер. Виджет Twitter Search .
Как вывести на телевизор?
Конечно, дэшборд будет полезен и просто на компьютере (можно установить его в качестве стартовой страницы), но все-таки традиционно изображение всей этой красоты выводится на телевизор. На современных телевизорах есть даже браузер, но, честно признаюсь, у меня такого в распоряжении нет, так что эту конфигурацию я не пробовал.Мой вариант - использовать для вывода Raspberry Pi. Он идеально запитывается через USB-порт телевизора (он-то сейчас есть почти везде) и подключается через HDMI. Единственной проблемой может стать подключение к сети: если не хочешь лишних проводов, то можно заюзать USB Wi-Fi модуль (инструкции ). К сожалению, Dashing на поверку оказался довольно прожорливым к ресурсам, поэтому пришлось даже установить специальную сборку Chromium - Hexxeh’s Chrome и ограничить частоту обновления изображения.
Резюмирую. Трудозатраты - один день. Программирование - почти не нужно. Необходимое железо - Raspberri Pi, одна штука. Результат - крутейший дэшборд в офисе, который теперь все хотят улучшать. Красота!
