Дашборд и виджеты

Новые релизы, обновления и т.п.

Модератор: immortal

Аватара пользователя
sergejey
Site Admin
Сообщения: 4279
Зарегистрирован: Пн сен 05, 2011 6:48 pm
Откуда: Минск, Беларусь
Благодарил (а): 75 раз
Поблагодарили: 1529 раз
Контактная информация:

Дашборд и виджеты

Сообщение sergejey » Пт янв 20, 2017 12:07 pm

В альфа-ветке очередное достаточно масштабное обновление -- новые сущности: дашборд (dashboard) и виджеты (widgets).

Изображение

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

Изображение

Предназначение дашборда -- быстро и просто создавать интерфейсы для работы с системой. Т.е. ещё быстрее и ещё проще, чем было до этого :) Считайте, что это некая альтернатива сценам -- разница в том, что сцена хоть и бесконечно гибкая сущность, но сделать её сложнее. Меню сделать проще, но для большого экрана оно всё-таки не оптимально. Так вот, дашборд наполняется путём добавления панелей (вертикальные столбцы, можно задавать ширину) и виджетов (содержимое панелей). При этом дашборд ведёт себя адаптивно, т.е. при нехватки ширины панели будут перестраиваться, так что один и тот же дашборд можно вполне использовать на различных устройствах -- от телевизора до мобильного телефона. У дашборда два режима -- просмотра и управление. В режиме просмотра просто показываются все виджеты, а в режиме управления их можно организовывать -- перетаскивать панели, менять порядок виджетов внутри панели, менять количество колонок, добавлять/удалять виджеты.

Виджеты -- то, что располагается на панелях дашборда. Фактически, это небольшие блоки, отображающие какие-то данные и выполняющие какие-то функции. Есть ряд предустановленных виджетов, однако сторонние модули могут вводить в систему собственные виджеты в любом количестве, если оно необходимо.

Предустановленные виджеты (на момент написания поста):
* Часы (цифровые часы с днём недели и датой)
* Изображение (ссылка на внешнюю картинку)
* HTML (просто HTML-блок любого содержания)
* Scripts (кнопка запуска выбранного сценария)
* Menu (элемент из меню или группа элементов)
* Application (одно из установленных приложений)
* IFrame (ссылка на любую страницу -- кстати так можно даже сцену вставить в виде виджета)
* Chart (график, созданный в модуле Charts)
* Device (устройство из модуля Простые устройства)

У каждого виджета есть собственные настройки отображения. Чуть позже будет перевод интерфейса работы с дашбордом на русский (пока многое на английском, но в целом достаточно понятно).

По-умолчанию, система создаёт один дашборд для панели управления, но вообще в системе их может быть сколько угодно.

Основное развитие визуальной части дашборда будет идти через развитие модуля Простые устройства -- представление типовых устройств в первую очередь будет создаваться с оглядкой на дашборды.

Для разработчиков модулей.

Дашборд сделан на базе открытого проекта Freeboard.
Для добавления собственных виджетов необходимо положить в папку модуля файл вида ИМЯ_widgets.js.php (например ./modules/scripts/scripts_widgets.js.php). Внутри этого файла идёт код, который как раз описывает виджет, его возможные настройки, отображение и поведение. Кроме того, в папке шаблонов модуля можно создать css файл, который так же подгрузится автоматически вида ИМЯ_widgets.css (например ./templates/scripts/scripts_widgets.css)
Пример кодаПоказать

Код: Выделить всё

<?php
chdir(dirname(__FILE__) . '/../../');
include_once("./config.php");
include_once("./lib/loader.php");
$db = new mysql(DB_HOST, '', DB_USER, DB_PASSWORD, DB_NAME);
include_once("./load_settings.php");
?>

function runScriptClicked(script) {
    if (freeboard.isEditing()) return;
    runScript(script);
    $('#script_light'+script).addClass('on');
    setTimeout("$('#script_light"+script+"').removeClass('on');",1000);
}

(function()
{

    freeboard.loadWidgetPlugin({
        // Same stuff here as with datasource plugin.
        "type_name"   : "scripts_plugin",
        "display_name": "Scripts",
        "description" : "MajorDoMo scripts",
        "fill_size" : false,
        "settings"    : [
            {
                "name"        : "script",
                "display_name": "Script",
                "required" : true,
                "type"        : "option",
                <?php
                $scripts=SQLSelect("SELECT ID,TITLE FROM scripts ORDER BY TITLE");
                ?>
                "options"     : [
                    <?php
                    foreach($scripts as $k=>$v) {
                        echo '{';
                        echo '"name" : "'.processTitle($v['TITLE']).'",'."\n";
                        echo '"value" : "'.$v['ID'].'"';
                        echo '},';
                    }
                    ?>
                ]
            },
            {
                "name"         : "title",
                "display_name" : "Title",
                "type"         : "calculated",
                "required" : true
            }

        ],
// Same as with datasource plugin, but there is no updateCallback parameter in this case.
        newInstance   : function(settings, newInstanceCallback)
        {
            newInstanceCallback(new myScriptsPlugin(settings));
        }
    });

    freeboard.addStyle('.indicator-light', "border-radius:50%;width:22px;height:22px;border:2px solid #3d3d3d;margin-top:5px;float:left;margin-right:10px;");
    freeboard.addStyle('.indicator-light.on', "background-color:#FFC773;box-shadow: 0px 0px 15px #FF9900;border-color:#FDF1DF;");
    freeboard.addStyle('.indicator-text', "margin-top:10px;cursor:pointer;vertical-align:middle;");
    var myScriptsPlugin = function(settings)
    {
        var self = this;
        var currentSettings = settings;

        var stateElement = $('<div class="indicator-text" onclick="runScriptClicked('+currentSettings.script+');">'+settings.title+'</div>');
        var indicatorElement = $('<div class="indicator-light" id="script_light'+currentSettings.script+'"></div>');

        self.render = function(element)
        {
            $(element).append(indicatorElement).append(stateElement);
        }

        self.getHeight = function()
        {
            return 1;
        }

        self.onSettingsChanged = function(newSettings)
        {
            currentSettings = newSettings;
            stateElement.text((_.isUndefined(newSettings.title) ? "" : newSettings.title));
        }

        self.onCalculatedValueChanged = function(settingName, newValue)
        {
        }

        self.onDispose = function()
        {
        }

    }


}());

<?php
$db->Disconnect();
?>
Документацию по созданию виджетов можно почитать здесь: http://freeboard.github.io/freeboard/do ... ample.html
За это сообщение автора sergejey поблагодарили (всего 19):
Dark_Veter (Пт янв 20, 2017 12:47 pm) • Denis_k (Пт янв 20, 2017 1:29 pm) • slgeo (Пт янв 20, 2017 1:35 pm) • Alien (Пт янв 20, 2017 1:42 pm) • C_3AXAPOB (Пт янв 20, 2017 1:48 pm) • lanket (Пт янв 20, 2017 2:20 pm) • kas5858 (Пт янв 20, 2017 11:43 pm) • Руслан (Сб янв 21, 2017 9:27 pm) • Vit (Вс янв 22, 2017 7:21 am) • ErmolenkoM (Вт янв 24, 2017 7:33 am) и ещё 9
Рейтинг: 22.62%

Сергей Джейгало, разработчик MajorDoMo
Идеи, ошибки -- за предложениями по исправлению и развитию слежу только здесь!
Профиль Connect -- информация, сотрудничество, услуги
Dark_Veter
Сообщения: 295
Зарегистрирован: Вт апр 23, 2013 5:16 pm
Откуда: Брянск
Благодарил (а): 18 раз
Поблагодарили: 94 раза

Re: Дашборд и виджеты

Сообщение Dark_Veter » Пт янв 20, 2017 12:47 pm

Обновился, сделал домашнюю страницу, не могу найти предустановленные виджеты :-( В списке виджетов присутствуют только picture, html и widget plugin example. И еще вопрос, если создать виджет с типом html, можно ли туда вставлять свойства объектов, как в меню? (например %Me.Location%)
Debian GNU/Linux 7.9 (wheezy), версия 0.9.0b, Connect
Аватара пользователя
sergejey
Site Admin
Сообщения: 4279
Зарегистрирован: Пн сен 05, 2011 6:48 pm
Откуда: Минск, Беларусь
Благодарил (а): 75 раз
Поблагодарили: 1529 раз
Контактная информация:

Re: Дашборд и виджеты

Сообщение sergejey » Пт янв 20, 2017 1:06 pm

Dark_Veter писал(а):Обновился, сделал домашнюю страницу, не могу найти предустановленные виджеты :-( В списке виджетов присутствуют только picture, html и widget plugin example. И еще вопрос, если создать виджет с типом html, можно ли туда вставлять свойства объектов, как в меню? (например %Me.Location%)
Сорри, недогрузил виджеты. Сейчас все.
В html свои свойства пока нельзя добавлять.

Сергей Джейгало, разработчик MajorDoMo
Идеи, ошибки -- за предложениями по исправлению и развитию слежу только здесь!
Профиль Connect -- информация, сотрудничество, услуги
Dark_Veter
Сообщения: 295
Зарегистрирован: Вт апр 23, 2013 5:16 pm
Откуда: Брянск
Благодарил (а): 18 раз
Поблагодарили: 94 раза

Re: Дашборд и виджеты

Сообщение Dark_Veter » Пт янв 20, 2017 1:19 pm

Да, сейчас появились. Спасибо. Но помоему не хватает еще виджетов chart и menu.
Debian GNU/Linux 7.9 (wheezy), версия 0.9.0b, Connect
Аватара пользователя
slgeo
Сообщения: 545
Зарегистрирован: Чт фев 05, 2015 2:35 pm
Откуда: РнД
Благодарил (а): 134 раза
Поблагодарили: 72 раза

Re: Дашборд и виджеты

Сообщение slgeo » Пт янв 20, 2017 1:34 pm

Осталось прикрутить design-time для виджетов и будет совсем круто )
Raspberry Pi2 Model B + NRF24L01 (MySensors) + 1-Wire + Esp8266 (WiFi-IoT)
CONNECT
Аватара пользователя
sergejey
Site Admin
Сообщения: 4279
Зарегистрирован: Пн сен 05, 2011 6:48 pm
Откуда: Минск, Беларусь
Благодарил (а): 75 раз
Поблагодарили: 1529 раз
Контактная информация:

Re: Дашборд и виджеты

Сообщение sergejey » Пт янв 20, 2017 3:19 pm

Dark_Veter писал(а):Да, сейчас появились. Спасибо. Но помоему не хватает еще виджетов chart и menu.
chart да, забыл, он просто как сторонний модуль, поэтому пропустил. загрузил сейчас и его (можно обновить только модуль charts через маркет).

а меню вроде бы должно быть, у меня на тестовой системе появилось после обновления

Сергей Джейгало, разработчик MajorDoMo
Идеи, ошибки -- за предложениями по исправлению и развитию слежу только здесь!
Профиль Connect -- информация, сотрудничество, услуги
Аватара пользователя
sergejey
Site Admin
Сообщения: 4279
Зарегистрирован: Пн сен 05, 2011 6:48 pm
Откуда: Минск, Беларусь
Благодарил (а): 75 раз
Поблагодарили: 1529 раз
Контактная информация:

Re: Дашборд и виджеты

Сообщение sergejey » Пт янв 20, 2017 3:20 pm

slgeo писал(а):Осталось прикрутить design-time для виджетов и будет совсем круто )
design-time это что?

Сергей Джейгало, разработчик MajorDoMo
Идеи, ошибки -- за предложениями по исправлению и развитию слежу только здесь!
Профиль Connect -- информация, сотрудничество, услуги
Dark_Veter
Сообщения: 295
Зарегистрирован: Вт апр 23, 2013 5:16 pm
Откуда: Брянск
Благодарил (а): 18 раз
Поблагодарили: 94 раза

Re: Дашборд и виджеты

Сообщение Dark_Veter » Пт янв 20, 2017 3:40 pm

sergejey писал(а):а меню вроде бы должно быть, у меня на тестовой системе появилось после обновления
Странно, у меня меню доступно только из виджет с приложениями.
Debian GNU/Linux 7.9 (wheezy), версия 0.9.0b, Connect
Аватара пользователя
slgeo
Сообщения: 545
Зарегистрирован: Чт фев 05, 2015 2:35 pm
Откуда: РнД
Благодарил (а): 134 раза
Поблагодарили: 72 раза

Re: Дашборд и виджеты

Сообщение slgeo » Пт янв 20, 2017 3:49 pm

sergejey писал(а):
slgeo писал(а):Осталось прикрутить design-time для виджетов и будет совсем круто )
design-time это что?
Это чтобы мышью прямо на сцене/странице можно было двигать виджеты.
Raspberry Pi2 Model B + NRF24L01 (MySensors) + 1-Wire + Esp8266 (WiFi-IoT)
CONNECT
Dark_Veter
Сообщения: 295
Зарегистрирован: Вт апр 23, 2013 5:16 pm
Откуда: Брянск
Благодарил (а): 18 раз
Поблагодарили: 94 раза

Re: Дашборд и виджеты

Сообщение Dark_Veter » Пт янв 20, 2017 3:51 pm

slgeo писал(а):Это чтобы мышью прямо на сцене/странице можно было двигать виджеты.
Так их итак можно двигать, правда только в режиме редактирования, но по моему этого достаточно.
Debian GNU/Linux 7.9 (wheezy), версия 0.9.0b, Connect
Ответить