Navigationselement (hoch/runter/links/rechts)

[gweber]

Hallo zusammen

ich vermute einen simplen Denkfehler, komme jedoch aktuell nicht weiter und hoffe, Ihr könnt mir evtl helfen. Ich versuche, ein Navigationselement auf einer Seite anzuzeigen. Links habe ich eine Navigationsleiste mit Weite 200 Pixel definiert. Ich hatte es so verstanden, als würde ich die Spaltenanzahl von 12 Spalten auf die verbleibende Seite beziehen und habe da (erfolglos) mit verschiedenen colspans versucht, eine Lösung zu finden (hoch-Taste: colspan=12, dann eine Reihe mit links, ok und rechts jeweils mit colspan=4 usw). Letzter Versuch war mit leeren Textelementen zur Formatierung:

<?xml version="1.0" encoding="UTF-8"?>
<pages xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" lib_version="8" design="metal" scroll_speed="0" bind_click_to_widget="true" xsi:noNamespaceSchemaLocation="../visu_config.xsd">
<meta>
<files>
<file type="css">resource/config/media/chezWeber.css</file>
<file type="js">resource/config/media/chezWeber.js</file>
</files>
<icons>
<icon-definition name="aa_apple" uri="/resource/config/media/pics/appletv.png"/>
<icon-definition name="aa_disney" uri="/resource/config/media/pics/disney.png"/>
<icon-definition name="aa_netflix" uri="/resource/config/media/pics/netflix.png"/>
<icon-definition name="aa_plex" uri="/resource/config/media/pics/plex.png"/>
<icon-definition name="aa_teleboy" uri="/resource/config/media/pics/teleboy.png"/>
</icons>
<plugins>
<plugin name="speech"/>
<plugin name="strftime"/>
<plugin name="mobilemenu"/>
<plugin name="openweathermap"/>
</plugins>
<mappings>
<mapping name="sceneSelection">
<entry value="sceneWatchAppleTV">
<icon name="aa_apple"/>
</entry>
<entry value="sceneWatchDisneyTV">
<icon name="aa_disney"/>
</entry>
<entry value="sceneWatchNetflixTV">
<icon name="aa_netflix"/>
</entry>
<entry value="sceneWatchPlexTV">
<icon name="aa_plex"/>
</entry>
<entry value="sceneWatchTeleboyTV">
<icon name="aa_teleboy"/>
</entry>
<entry value="sceneWatchAllOff">
<icon name="control_on_off"/>
</entry>
</mapping>
<mapping name="navigationTV">
<entry value="KEY_UP">
<icon name="control_arrow_up"/>
</entry>
<entry value="KEY_DOWN">
<icon name="control_arrow_down"/>
</entry>
<entry value="KEY_LEFT">
<icon name="control_arrow_left"/>
</entry>
<entry value="KEY_RIGHT">
<icon name="control_arrow_right"/>
</entry>
<entry value="KEY_ENTER">
<icon name="control_ok"/>
</entry>
<entry value="KEY_RETURN">
<icon name="control_return"/>
</entry>
</mapping>
</mappings>
<stylings>
<styling name="GreyGreen">
<entry value="0">grey</entry>
<entry value="1">green</entry>
</styling>
<styling name="Light">
<entry value="0">light-off</entry>
<entry value="1">light-on</entry>
</styling>
<styling name="RedGreen">
<entry value="0">red</entry>
<entry value="1">green</entry>
</styling>
<styling name="GreyGrey">
<entry value="0">grey</entry>
<entry value="1">grey</entry>
</styling>
<styling name="BluePurpleRedTemp">
<entry range_min="0" range_max="18">blue</entry>
<entry range_min="18" range_max="21">purple</entry>
<entry range_min="21" range_max="100">red</entry>
</styling>
<styling name="OpenWindows">
<entry value="0">green</entry>
<entry range_min="1" range_max="999">red</entry>
</styling>
</stylings>
<statusbar/>
<mappings/>
</meta>
<page name="Multimedia" flavour="transparent-background" showtopnavigation="false">
<navbar position="left" dynamic="true" width="200px">
<group name="Aktuelle Zeit">
<layout colspan="12"/>
<group nowidget="true">
<layout colspan="12"/>
<strftime lang="de" format="%H:%M:%S" class="timebig">
<layout colspan="12"/>
</strftime>
<strftime lang="de" format="%d. %B %Y" class="timedate">
<layout colspan="12"/>
</strftime>
</group>
</group>
<group name="Scene selection" nowidget="true">
<layout colspan="12"/>
<trigger value="sceneWatchAppleTV" align="left" bind_click_to_widget="true" mapping="sceneSelection">
<layout colspan="12"/>
<address transform="OH:string">sceneSelection</address>
</trigger>
<trigger value="sceneWatchDisneyTV" align="left" bind_click_to_widget="true" mapping="sceneSelection">
<layout colspan="12"/>
<address transform="OH:string">sceneSelection</address>
</trigger>
<trigger value="sceneWatchNetflixTV" align="left" bind_click_to_widget="true" mapping="sceneSelection">
<layout colspan="12"/>
<address transform="OH:string">sceneSelection</address>
</trigger>
<trigger value="sceneWatchPlexTV" align="left" bind_click_to_widget="true" mapping="sceneSelection">
<layout colspan="12"/>
<address transform="OH:string">sceneSelection</address>
</trigger>
<trigger value="sceneWatchTeleboyTV" align="left" bind_click_to_widget="true" mapping="sceneSelection">
<layout colspan="12"/>
<address transform="OH:string">sceneSelection</address>
</trigger>
<trigger value="sceneWatchAllOff" align="left" bind_click_to_widget="true" mapping="sceneSelection">
<layout colspan="12"/>
<address transform="OH:string">sceneSelection</address>
</trigger>
</group>
<group name="Wetter">
<openweathermap lang="de" lat="47.4054" lon="8.3998" appid="XXX" forecastItems="2" refresh="5" detailItems="1"/>
</group>
</navbar>
<group name="Control">
<layout colspan="12"/>
<slide min="0" max="30.0" format="%2.1f" step="1">
<layout colspan="12"/>
<address transform="OH:dimmer" mode="readwrite">denon3313_volume</address>
</slide>
<break/>
<text>
<layout colspan="1"/>
<label/>
</text>
<trigger value="KEY_UP" mapping="navigationTV" align="center" bind_click_to_widget="true">
<layout colspan="1"/>
<address transform="OH:String">theFrame_KeyCode</address>
</trigger>
<text>
<layout colspan="1"/>
<label/>
</text>
<break/>
<trigger value="KEY_LEFT" mapping="navigationTV" bind_click_to_widget="true">
<layout colspan="1"/>
<address transform="OH:String">theFrame_KeyCode</address>
</trigger>
<trigger value="KEY_ENTER" mapping="navigationTV" bind_click_to_widget="true">
<layout colspan="1"/>
<address transform="OH:String">theFrame_KeyCode</address>
</trigger>
<trigger value="KEY_RIGHT" mapping="navigationTV" bind_click_to_widget="true">
<layout colspan="1"/>
<address transform="OH:String">theFrame_KeyCode</address>
</trigger>
<break/>
<trigger value="KEY_DOWN" mapping="navigationTV" align="center" bind_click_to_widget="true">
<address transform="OH:String">theFrame_KeyCode</address>
</trigger>
<break/>
<trigger value="KEY_RETURN" mapping="navigationTV" bind_click_to_widget="true">
<address transform="OH:String">theFrame_KeyCode</address>
</trigger>
<break/>
<trigger value="test" bind_click_to_widget="true">
<address transform="OH:String">PlexTV_Pause</address>
</trigger>
</group>
<group name="Plex">
<layout colspan="12"/>
<info>
<label>Status</label>
<address transform="OH:String">PlexTV_Status</address>
</info>
<info>
<label>EndTime</label>
<address transform="OH:String">PlexTV_EndTime</address>
</info>
<info>
<label>Type</label>
<address transform="OH:String">PlexTV_Type</address>
</info>
<info>
<label>Play</label>
<address transform="OH:String">PlexTV_Play</address>
</info>
<info>
<label>Progress</label>
<address transform="OH:String">PlexTVProgress</address>
</info>
<info>
<label>Title</label>
<address transform="OH:String">PlexTV_Title</address>
</info>
<info>
<label>Stop</label>
<address transform="OH:String">PlexTV_Stop</address>
</info>
<trigger value="Play">
<address transform="OH:Switch">PlexTV_Play</address>
</trigger>
<trigger value="Pause">
<address transform="OH:Switch">PlexTV_Pause</address>
</trigger>
<trigger value="Stop">
<address transform="OH:Switch">PlexTV_Stop</address>
</trigger>
<trigger value="Backward">
<address transform="OH:Switch">PlexTV_Reverse</address>
</trigger>
<trigger value="Forward">
<address transform="OH:Switch">PlexTV_Forward</address>
</trigger>
</group>
<speech lang="en">
<address transform="OH:switch">denon3313_power</address>
</speech>
</page>
</pages>

Aber das Resultat ist leider nicht wirklich zufriedenstellend (siehe Anhang). Sorry, falls die Frage zu stumpfsinnig ist. Jegliche Hilfe wird gerne angenommen

Viele Grüsse
Gernot

[peuter]

Was genau hat denn an der Lösung mit den colspans nicht funktioniert? Das sollte eigentlich so gehen.

[peuter]

Also wenn ich folgendes nehme:

<group name="Control">
      <layout colspan="12"/>
      <slide min="0" max="30.0" format="%2.1f" step="1">
        <layout colspan="12"/>
        <address transform="OH:dimmer" mode="readwrite">denon3313_volume</address>
      </slide>
      <group nowidget="true">
        <layout colspan="12"/>
        <trigger value="KEY_UP" mapping="navigationTV" align="center" bind_click_to_widget="true" class="large">
          <layout colspan="12" rowspan="2"/>
          <address transform="OH:String">theFrame_KeyCode</address>
        </trigger>
        <trigger value="KEY_LEFT" mapping="navigationTV" align="right" bind_click_to_widget="true" class="large">
          <layout colspan="5" rowspan="2"/>
          <address transform="OH:String">theFrame_KeyCode</address>
        </trigger>
        <trigger value="KEY_ENTER" mapping="navigationTV" align="center" bind_click_to_widget="true" class="large">
          <layout colspan="2" rowspan="2"/>
          <address transform="OH:String">theFrame_KeyCode</address>
        </trigger>
        <trigger value="KEY_RIGHT" mapping="navigationTV" align="left" bind_click_to_widget="true" class="large">
          <layout colspan="5" rowspan="2"/>
          <address transform="OH:String">theFrame_KeyCode</address>
        </trigger>
        <trigger value="KEY_DOWN" mapping="navigationTV" align="center" bind_click_to_widget="true" class="large">
          <layout colspan="12" rowspan="2"/>
          <address transform="OH:String">theFrame_KeyCode</address>
        </trigger>
      </group>
      <trigger value="KEY_RETURN" mapping="navigationTV" bind_click_to_widget="true">
        <address transform="OH:String">theFrame_KeyCode</address>
      </trigger>
      <break/>
      <trigger value="test" bind_click_to_widget="true">
        <address transform="OH:String">PlexTV_Pause</address>
      </trigger>
    </group>

Und dem noch ein bisschen Custom CSS Code spendiere in Form von:

.trigger.custom_large .actor {
    width: 6em;
    height: 4em;
}
.trigger.custom_large.center .actor {
    margin-left: -3em !important;
}

.trigger.custom_large .actor .value {
    position: relative;
    width: 100%;
    height: 100%;
}

.trigger.custom_large .actor .value .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 3em;
    width: 3em;
    margin-top: -1.5em;
    margin-left: -1.5em;
}

Dann sieht das so aus:
Bildschirmfoto vom 2020-07-29 18-16-55.png

Das dürfte doch im Wesentlichen das sein was Du möchtest, oder?

[gweber]

Hallo Tobias,

vielen Dank für Deine Antwort. Dein Screenshot sieht genauso aus, wie ich die Navigation gerne hätte. Bei mir kommt dabei mit Deinem Code leider folgendes heraus:

Bildschirmfoto 2020-07-29 um 21.29.13.png

Was sehr ähnlich zu meinem Versuch mit colspan=4 für die mittlere Reihe aussieht. Hast Du eine Idee, woran es liegen kann?

Viele Grüsse
Gernot

[gweber]

Mhm... Ich scheine irgendwas in meinem restlichen CSS verbogen zu haben. Ich habe eben alles bis auf Deine Styles gelöscht und dann sieht es gut aus. Vielen Dank für Deine Hilfe!

Gernot