ich bin neu im openHAB und HABPAnel. Aber ich unternehme gerade meine ersten Versuche.
Gerne würde ich das MusicControl Widget von Mike Murphy um eine Positionsfortschritt und eine Stop-Schaltfläche erweitern.
Kodi liefert die Zeit in Sekunden. Die Channel "Kodi_Media_Center_Laufzeit" ist die aktuelle Position und "Kodi_Media_Center_Dauer" ist die Gesamtlänge jeweils in Sekunden. Er wird im Format "Sekunden s" Also Sekunden mit Sekunden Zeichen ausgegeben. Es gibt noch den Channel "Laufzeit in Prozent". Wenn ich den in item eintrage und als ceil Wert 100 dann zeigt er den Slider an. Ich möchte aber gerne, dass er zusätzlich die Gesamtlänge in Stunden (wenn der Titel Stunden hat) Minuten und Sekunden neben dem Slider anzeigt.
Bis jetzt bin ich soweit gekommen:
Code: Alles auswählen
<style>
.btn-pad{
padding:20px 32px;
}
.btn-radius{
padding:40px 40px;
border-radius: 50%;!important
background-color: #d23f31;
height: 56px;
width: 56px;
box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
box-sizing: content-box;
margin-left:-13px;
position: relative;
z-index:1000;
cursor:pointer;
}
.btn-red{
background-color:red;
}
.glyphicon-text{
font-size:xx-large;
padding: 10px 0 0 5px;
}
.btn-lf{
position: relative;
top: -6px;
background-color:#fff;
box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
color:#000;
border-top-left-radius:50%;
border-bottom-left-radius:50%;
cursor:pointer;
}
.btn-lf:hover{
background-color:#eaeaea;
color:#fff;
}
.btn-rt{
position: relative;
top: -6px;
margin-left:-13px;
background-color:#fff;
box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
color:#000;
border-top-right-radius:50%;
border-bottom-right-radius:50%;
cursor:pointer;
}
.btn-rt:hover{
background-color:#eaeaea;
color:#fff;
}
.title-text{
margin-left: -90px;
display:block;
}
.div-slider{
width:300px;
margin:0 auto;
}
.div-position{
width:100px;
margin:0 auto;
}
.btn-stop{
position: absolute;
left: 12px;
border-top-left-radius:10%;
border-top-right-radius:10%;
width: 75px;
height: 75px;
background-color: #858585;
color:#575757;
box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
cursor:pointer;
}
.divTable{
display: table;
width: 100%;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell, .divTableHead {
display: table-cell;
}
.divTableCellSlider {
width: 250px;
margin-top:-20px;
position: relative;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
</style>
<div class="div-position"></div>
<div ng-init="slider = {
'item': 'Kodi_Media_Center_Laufzeit_in_Prozent',
'vertical': false,
'floor': 0,
'ceil': '100',
'step': 1,
'precision': 1,
'unit': ' ',
'hidelabel': true,
'hidelimits': true,
'hidepointer': true,
'showticks': false,
'bigslider': false,
'readonly': true,
}">
</div>
<div class="divTable";" >
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">{{itemValue('kodiTrackProgressString')}}</div>
<div class="divTableCellSlider"><widget-slider ng-model="slider" /></div>
<div class="divTableCell">{{itemValue('kodiTrackDurationString')}}</div>
</div>
</div>
</div>
<div class="btn-group">
<label class="btn-stop"
ng-click="sendCmd('Kodi_Media_Center_Stop','ON')"><i class="glyphicon glyphicon-stop"></i></label>
<label class="btn-pad btn-lf"
ng-click="sendCmd(config.action_item,(config.prev_command))"><i class="glyphicon glyphicon-step-backward"></i></label>
<label class="btn-radius btn-danger" ng-if="itemValue(config.status_item) !='PLAY'"
ng-click="sendCmd(config.action_item,'PLAY')"><i class="glyphicon glyphicon-play glyphicon-text"></i></label>
<label class="btn-radius btn-warning" ng-if="itemValue(config.status_item) =='PLAY'"
ng-click="sendCmd(config.action_item,'PAUSE')"><i class="glyphicon glyphicon-pause glyphicon-text"></i></label>
<label class="btn-pad btn-rt"
ng-click="sendCmd(config.action_item,(config.next_command))"><i class="glyphicon glyphicon-step-forward"></i></label>
</div>
<div class="div-slider">
<div ng-init='model={"item": (config.volume), "floor": 0, "ceil": 100, "step":(config.step)}'>
<widget-slider ng-model="model" />
</div>
</div>