Hallo zusammen,
ich möchte gerne einen Raspberry PI mit einem Monitor in ein Regal stellen und dort eine Tablet-UI Oberfläche mit großen Symbolen/Schriften anzeigen. Die Steuerung (Bedienung) von TabletUI soll nicht direkt am Monitor per Touch oder Maus, sondern bequem vom Sofa aus über eine Harmony-Fernbedienung erfolgen. Ich stelle mir das in etwa so vor, wie die Menüsteuerung eines Smart-TVs oder von KODI mit einer Fernbedienung. Dann muss ich nicht immer zum Regal laufen um etwas umzustellen.
Bei den Smart-TVs wird mit den Pfeiltasten der mitgelieferten Fernbedienung ein großer Cursor (i.d.R. eine farbige Umrandung oder farbiger Hintergrund) bewegt und mit der OK-Taste die gewählte Aktion ausgelöst. Das gleiche Prinzip möchte ich beim TabletUI anwenden.
Ich stelle mir das so vor:
TabletUI läuft im Fullscreen Browser auf einem Raspberry PI, der einen Harmony-Tastatur-Empfänger eingesteckt hat. Meine Harmony-Fernbedienung kann so eine Tastatur simulieren und Tastatureingaben an den Raspberry senden.
Im TabletUI benötige ich einen großen und auch auf Entfernung gut sichtbaren Cursor, der sich mit den Pfeiltasten der (simulierten) Tastatur zwischen den einzelnen Tablet-UI Steuerelementen bewegt. Die Steuerelemente möchte ich dann über die Tastatursimulation mit der Enter-Taste auslösen.
Also so:
- Ein Tastendruck auf der Harmony-Fernbedienung simuliert auf dem Raspberry eine Tastatureingabe (4 Pfeiltasten + Enter)
- Die Pfeiltasten bewegen einen gut sichtbaren Cursor auf der TabletUI-Oberfläche
- Die Entertaste löst die ausgewählte Aktion auf TabletUI-Oberfläche aus (analog zu einem Mausklick im Browser)
Ich hoffe das ist halbwegs verständlich ausgedrückt.
Habt ihr eine Idee, wie ich das umsetzen könnte?
VG,
Alex
Als ideale Grundlage funktioniert das hier:
- https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS_for_TV/Interacting_with_TV_remote_controls
- https://github.com/luke-chang/js-spatial-navigation
- https://github.com/luke-chang/js-spatial-navigation/blob/demo_3.2/demo/3.2_like_youtube_tv.html
- https://luke-chang.github.io/js-spatial-navigation/demo/
Ich würde das demo/3.2_like_youtube_tv.html oder demo/3.1_put_all_together.html hernehmen und nur noch die sendFhemCommand() FTUI3 rufen, wenn ein Element mit Enter angewählt wurde.
Ich baue mal einen Demonstrator zusammen, das interessiert mich auch, wie schnell man da was Funktionierendes zusammen bekommt.
Hallo Setstate!
Vielen Dank für deine schnelle Antwort und die Links :)
Super, dass du eine Demo erstellen willst! Bin schon gespannt
Alex
Genau wie in der Spatial-Navigation-Demo stelle ich mir das vor ;D
https://luke-chang.github.io/js-spatial-navigation/demo/
https://luke-chang.github.io/js-spatial-navigation/demo/3.1_put_all_together.html
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<script src="js/fhem-tablet-ui.min.js" defer></script>
<script src="https://luke-chang.github.io/js-spatial-navigation/spatial_navigation.js"></script>
<script>
f7 = { ftui: { addNotification: function () { } } };
window.addEventListener('DOMContentLoaded', function () {
// Initialize
SpatialNavigation.init();
// Define navigable elements (anchors and elements with "focusable" class).
SpatialNavigation.add({
selector: '.focusable'
});
// Make the *currently existing* navigable elements focusable.
SpatialNavigation.makeFocusable();
// Listen to element enter event
document.querySelectorAll('.focusable').forEach(function (item) {
item.addEventListener('sn:enter-up', function () {
var button = item.querySelector('.famultibutton');
button.dispatchEvent(new Event('mousedown'));
button.dispatchEvent(new Event('mouseup'));
});
});
});
</script>
<style>
.focusable {
border-radius: 100%;
font-size: 2.5vw;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transition: transform 0.2s ease-in-out;
}
.focusable:focus {
transform: scale(1.25, 1.25);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
</style>
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="vbox items-space-around">
<div class="hbox items-space-around">
<div class="focusable">
<div data-type="button" data-device="HUEDevice1" data-icon="fa-bath"></div>
</div>
<div class="focusable">
<div data-type="button" data-device="HUEDevice2" data-icon="fa-couch"></div>
</div>
<div class="focusable">
<div data-type="button" data-device="HUEDevice3" data-icon="fa-shower"></div>
</div>
<div class="focusable">
<div data-type="button" data-device="HUEDevice4" data-icon="fa-coffee"></div>
</div>
<div class="focusable">
<div data-type="button" data-device="HUEDevice5" data-icon="fa-bell"></div>
</div>
<div class="focusable">
<div data-type="button" data-device="HUEDevice6" data-icon="fa-door-closed"></div>
</div>
</div>
<div class="hbox items-space-around">
<div class="focusable" data-get="HUEDevice5">
<div data-type="button" data-device="HUEDevice8" data-icon="fa-lightbulb"></div>
</div>
<div class="focusable">
<div data-type="button" data-device="HUEDevice9" data-icon="fa-plug"></div>
</div>
<div class="focusable">
<div data-type="button" data-device="HUEDevice10" data-icon="fa-bed"></div>
</div>
<div class="focusable">
<div data-type="button" data-device="HUEDevice11" data-icon="fa-snowflake"></div>
</div>
<div class="focusable">
<div data-type="button" data-device="HUEDevice12" data-icon="fa-air-freshener"></div>
</div>
<div class="focusable">
<div data-type="button" data-device="HUEDevice13" data-icon="fa-tv"></div>
</div>
</div>
</div>
</body>
</html>
Die spatial_navigation.js kann man sich downloaden, ins lokale js Verzeichnis kopieren und <script src="https://luke-chang.github.io/js-spatial-navigation/spatial_navigation.js"></script> in <script src="js/spatial_navigation.js"></script> ändern
Wow, vielen Dank für den Code! Werde ich ausprobieren :-)
VG,
Alex