Настройка внешнего вида программы Hobdrive

Долго описывать программу Hobdrive не буду. Всё уже описано на офф сайте. От себя добавлю, что использовал я и Torque и DashCommand, но Хоб свой, российский. Плюс на моей машине он умеет считать расход бензина по форсунке и имеет встроенную статистику заправок.  Из недостатков, это внешний вид. До недавнего времени, что либо изменить в этом вопросе было крайне трудно, но лед тронулся и в последних версиях программы стало возможным подстроить вид экрана с программой под свой вкус, хоть ограничения  все еще присутствуют. Этой статейкой попробую разжевать как же изменить внешний вид Хобдрайва.

И так, нам понадобятся персональный компьютер, ваше устройство с Хобдрайвом и текстовый редактор, устройство на Андроиде. На других OS я не проверял и не знаю, так же меняется внешний вид или нет.
Я использую текстовый редактор Notepad++ и программу для связи со смартфоном MyPhoneExplorer. MyPhoneExplorer позволяет  редактировать файлы непосредственно на смарте, без промежуточного сохранения на компьютере. Ваши предпочтения в редакторах и т.д., могут быть совсем другими, это не столь важно. 
Предостережения. Все действия на ваш страх и риск, делайте резервные копии ваших файлов.
Подопытным кроликом стал Asus Zenfone Laser. Я не гарантирую, что "расширенный" графический интерфейс программы Хобдрайв сможет более менее сносно, в плане быстродействия, работать на вашем устройстве.

И так поехали.

 

Первое что вам необходимо, это выяснить сколько датчиков вам необходимо наблюдать на экране. Второе, это как они должны выглядеть. Возьмите карандаш и лист бумаги и набросайте приблизительный макет и уже дальше отталкиваться от этого макета. В моем примере, будем рисовать экран с ХХ датчиками, х датчиков по горизонтали, у по вертикали. А я буду рисовать то что на рисунке ниже. 

Графическое оформление программы Hobdrive

Итого выходит 10 датчиков D1-D10, причем D3 занимает две ячейки по вертикали, или по другому две строки, а датчик D7 занимает 2 ячейки по горизонтали или по другому, две колонки. 

Создаем файл user.layout .  .layout , это расширение файла, то есть должно быть не user.layout.txt, а именно user.layout . Кто так и не понял, можно просто скачать готовый.

показать содержимое

  1. <!-- комментарий -->
  2. <ui>
  3. <section name="наш экран" fixed="true" title-height="20">
  4. <grid rows="30,30,10,30" cols="40,20,40">
  5. <item id="TripTime"/>
  6. <item id="TripTime"/>
  7. <item id="TripTime"/>
  8. <item id="TripTime"/>
  9. <item id="TripTime"/>
  10. <item id="TripTime"/>
  11. <item id="TripTime"/>
  12. <item id="TripTime"/>
  13. <item id="TripTime"/>
  14. <item id="TripTime"/>
  15. <item id="TripTime"/>
  16. <item id="TripTime"/>
  17. </grid>
  18. </section>
  19. </ui>

Теперь пояснение по строкам в файле.
1 строка, это комментарий. Можете вписать в строку все что хотите, а можете и не вписывать. Все что находится между  <!-- и  --> не обрабатывается программой и ни на что не влияет.
2, 22, 23, 24 строки присутствуют всегда и не нуждаются в редактировании.
3 строка. В ней три параметра. 
   section name="наш экран" - задает нашему экрану название. Пишем что хотим. 
   fixed="true" - может иметь два значения. Если true, то наш экран всегда будет отображаться при запуске программы, точно так же как и дефолтные экраны.  Второе значение - false. Если задать его, то наш экран будет доступен только по вызову из меню "экраны"
   title-height="20" - высота строки названия. Может иметь нулевую высоту.
4 строка. Это та самая "сетка" расположения датчиков. rows=" " - задает количество строк и их высоту в процентах. Значения отделяются запятой. В нашем примере это 4 строки. Первая, вторая и четвертая высотой 30%, третья 10%. Сумма значений необязательна должна равняться 100 процентам, можно больше, можно меньше. Так же может пустое значение, к примеру rows="30,30, ,30". В этом случае 3 строка заберет себе остаток от 100%.  
cols="40,20,40" - тоже самое что и rows, но задает количество и ширину колонок, а не строк.
В 6 по 20 строках находятся наши датчики. Названия датчиков между кавычек. В нашем случае, для удобства все ячейки заполнены датчиком "время в пути"(TripTime). Ячейки экрана могут быть пустыми. для этого необходимо  в строке датчика прописать <item/>. такой пустой датчик не имеет никаких настроек из интерфейса программы, и для начального макетирования это не совсем удобно.
Если вы все прочитали, или не прочитали, а файл примера закинули в смартфон, то запустив Хобдрайв, вы найдете экран, который получился.
у меня вышло так
Графическое оформление программы HobdriveТак как мне не нужно название экрана, то в третей строке поменял значение title-height на 0, вышло так - <section name="наш экран" fixed="true" title-height="0">
Снова запустил программу, увидел что границы некоторых датчиков "уползли" не туда куда мне  надо. Поигрался со значениями высоты строк и колонок и получил нужный мне результат.
Теперь про датчики занимающие несколько ячеек. Условно все ячейки можно пронумеровать. Первая в левом верхнем углу, вторая справа от него и так далее до 12-ой в нижнем правом углу. Изначально мы хотели что бы датчик D3 занимал две ячейки, в нашем случае это ячейка 3 и 6. а датчик D7 должен занимать ячейки 8 и 9.  Снова отрываем наш user.layout и редактируем датчики. В строке 8(это наш D3) дописываем значение rowspan="2", то есть говорим занять датчику две строки. После редактирования строка должна выглядеть так - <item id="TripTime" rowspan="2"/>. Аналогично меняем строку для датчика D7, но задаем ему не две строки, а две колонки. Строка 15 (именно в ней находиться наша ячейка с датчиком) должна приобрести такой вид - <item id="TripTime" colspan="2"/>. Если на этом и остановиться, то получится небольшая "каша", часть датчиком наложатся друг на друга. Что бы этого не произошло, необходимо освободить ячейки на которые должны перейти наши датчики D3 и D7. Исходя из нашей условной нумерации ячеек, датчик D7 занимает ячейку 3 и 6. нам необходимо прописать "пустой" датчик в ячейку 6. Для создания пустой ячейки необходимо прописать   <item/>, что мы и делаем заменяя строку 6 на <item/>. Для D7 операцию освобождения ячейки делать не надо. По горизонтали, смещение произойдет автоматически. Все датчики сдвинутся на одну позицию. В нашем варианте это приведет к вытеснению последней 12 ячейки за экран. так что строку под номером 20 можно удалить.

Результат
Графическое оформление программы Hobdrive

Если результат не нравится, вы уже знаете что делать. Если все ок, то просто в файле заменяете TripTime на названия ваших датчиков.
Как рисовать стрелки и скины будет чуть позже, во второй части.

 

По просьбам. архив с моим оформлением. Заработает далеко не у всех. hobdrive.zip

Расширения для Joomla
  • /velozhelezki/technology/54-nastrojka-graficheskikh-elementov-v-programme-hobdrive
  • /velozhelezki/technology/45-linkage-1