Я занимаюсь программированием аудио/визуального управления. Один из моих клиентов использует систему на основе Node-Red, которая предоставляет панель мониторинга для настройки. Я использую его для отправки команд ТВ-тюнерам. Панель инструментов отображается на контроллере сенсорного экрана с разрешением 1920x1200 пикселей.
Потоки Node-Red для фактической отправки команд создать было довольно легко, но я не могу сделать что-то довольно простое в средах, к которым я привык: задать точные размеры и расположение кнопок с контролем над относительным размером шрифта и значков, отображаемых на указанных кнопках.
Ближе всего я подошёл к использованию узлов шаблона, включая Таблицы HTML для выравнивания и переопределения CSS для размера кнопок после ряда неудачных экспериментов с попытками установить размер v-btn в пикселях и сеток CSS, которые отображают все в одной строке, независимо от того, что я установил для начала строки сетки и начала столбца сетки.
Я рад опубликовать любой код моего шаблона, который может помочь. Для начала, вот HTML-версия D-Pad и то, как она выглядит в Chrome:
Панель FlowFuse, показывающая элементы управления телевизором
Код: Выделить всё
export default {
methods: {
// expose a method to our and Vue Application
up: function () {
this.send('clicked-up')
},
down: function () {
this.send('clicked-down')
},
left: function () {
this.send('clicked-left')
},
right: function () {
this.send('clicked-right')
},
center: function () {
this.send('clicked-center')
}
}
}
Код: Выделить всё
mdi-menu-up
mdi-menu-left
OK
mdi-menu-right
mdi-menu-down
Подробнее здесь: https://stackoverflow.com/questions/798 ... owfuse-das
Мобильная версия