ВЕБ МОРДА

[St@rz]

Кнопки делаем двух фиксированных размеров. Больше не нужно.
Первый 100Х100 пикселей под кнопки с иконками.
Второй 100Х210 пикселей под кнопки с надписями.

Размер, изображение и надписи кнопки берут из модулей.
Для красоты изображение динамическое (Пример).
Либо отображают какие то данные из модуля (примерно так). Так как это и сделано в Metro UI в Windows 8.

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

Заготовка для интерфейса меню (demo.zip).



Перемещаете кнопки так как вам надо, нажимаете кнопку "Получить параметры" и вносите изменения в файл index.html.
Параметр data-row отвечает за смещение сверху вниз.
Параметр data-col отвечает за смещение слева направо.

Автоматизировать это можно таким образом.
Скрипт отлавливает окончание перемещения кнопки (событие "Stop") и сохраняет положение в файл. Расположение кнопок читается из этого файла. В результате этого все изменения по расположению кнопок в меню сохраняются.

Из примера выше взял заготовку для скрипта отлавливающего окончание перемещения кнопки:

    <script type="text/javascript">
      var gridster;

      $(function(){

        var log = document.getElementById('log');

        gridster = $(".gridster ul").gridster({
          widget_base_dimensions: [100, 55],
          widget_margins: [5, 5],
          draggable: {

            stop: function(e, ui, $widget) {
              log.innerHTML = 'STOP' + "<br >" + log.innerHTML;
            }
          }
        }).data('gridster');


      });
    </script>

Его можно просто заменить событием "отпустили кнопку" после перемещения. Перемещение можно начать после события "длительное удержание кнопки" на кнопке меню.

Само меню выглядит так же как в видео про Switch Automation из этого сообщения. При нажатии кнопки "+" открываются модули. Через них можно добавлять или удалять модули в CyberWrt и ,соответственно, кнопки в главном меню.