Habpanel Custom Widget Frage

fisch

Sorry,

habe dummerweise meine Frage in Allgemein gepostet...Vielleicht kann das ein MOD hier her verschieben Vielen Dank...

https://forum.iobroker.net/topic/33391/habpanel-shutter-widget-aussehen-verändern

CrunkFX

@fisch Könntest du auf den Weißen Rahmen verzichten?

CrunkFX

@fisch
Einmal die Ansicht mit weißem Rahmen:
Bild Text

<style>

div.shutterWidget {
  border: 1px solid white;
  border-radius: 15px;
  display: block;                                    /* flex in block ändern um Columns in Rows zu ändern */
  position: absolute;
  background-color: initial;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  align-items: center;
}

div.shutterWidget div {
  border: px solid white;
  width: 100%;
  text-align: center;
  align-items: center;
  background-color: inherit;
  display: block;                                    /* flex in block ändern um Columns in Rows zu ändern */
  justify-content: center;
  font-size: 1em;
}

div.shutterWidget button {
  border: 0px solid white;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  height: 1.5em;
  width: 1.5em;
  float: none;
  font-size: 3em;
  margin-right: 12px;
  padding: 0 0 0 0;
}

div.shutterWidget span {
  border: 0px solid white;
  width: 100%;
  height: 75%;
  align-items: center;
  display: block;                                    /* flex in block ändern um Columns in Rows zu ändern */
  padding-top: 12px;                                 /* Padding in Top ändern. Dieser Wert ist der Abstand zwischen Buttons und Text */
}

  </style>


<div class="shutterWidget">

<div> {{ngModel.name}}</div>

<span>

<button ng-click="sendCmd('homee.0.ElectricMotorMeteringSwitch-9.UpDown-100', '0')"> <i class="glyphicon glyphicon-menu-up"></i> </button>

<button ng-click="sendCmd('homee.0.ElectricMotorMeteringSwitch-9.UpDown-100', '2')">

<widget-icon iconset="'eclipse-smarthome-classic'" icon="'blinds'" size="45"

state="itemValue(config.blind_item)" />

  

  </button>

    <button style="margin-right: 0" ng-click="sendCmd('homee.0.ElectricMotorMeteringSwitch-9.UpDown-100', '1')"> <i class="glyphicon glyphicon-menu-down"></i>    </button>

</span>

Und einmal die Ansicht ohne:
Bild Text

<style>

div.shutterWidget {
  border: 0px solid white;                           /* Rahmen deaktivieren */
  border-radius: 15px;
  display: block;                                    /* flex in block ändern um Columns in Rows zu ändern */
  position: absolute;
  background-color: initial;
  top: 30%;                                          /* Textabstand zum Oberen Rand */
  left: 0%;
  width: 100%;
  height: 100%;
  align-items: center;
}

div.shutterWidget div {
  border: px solid white;
  width: 100%;
  text-align: center;
  align-items: center;
  background-color: inherit;
  display: block;                                    /* flex in block ändern um Columns in Rows zu ändern */
  justify-content: center;
  font-size: 1em;
}

div.shutterWidget button {
  border: 0px solid white;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  height: 1.5em;
  width: 1.5em;
  float: none;
  font-size: 3em;
  margin-right: 12px;
  padding: 0 0 0 0;
}

div.shutterWidget span {
  border: 0px solid white;
  width: 100%;
  height: 75%;
  align-items: center;
  display: block;                                    /* flex in block ändern um Columns in Rows zu ändern */
  padding-top: 12px;                                 /* Padding in Top ändern. Dieser Wert ist der Abstand zwischen Buttons und Text */
}

  </style>


<div class="shutterWidget">

<div> {{ngModel.name}}</div>

<span>

<button ng-click="sendCmd('homee.0.ElectricMotorMeteringSwitch-9.UpDown-100', '0')"> <i class="glyphicon glyphicon-menu-up"></i> </button>

<button ng-click="sendCmd('homee.0.ElectricMotorMeteringSwitch-9.UpDown-100', '2')">

<widget-icon iconset="'eclipse-smarthome-classic'" icon="'blinds'" size="45"

state="itemValue(config.blind_item)" />

  

  </button>

    <button style="margin-right: 0" ng-click="sendCmd('homee.0.ElectricMotorMeteringSwitch-9.UpDown-100', '1')"> <i class="glyphicon glyphicon-menu-down"></i>    </button>

</span>

Kombiniert man Rand mit Text Padding verschiebt sich das Icon in der Mitte. Ich hab leider zu wenig CSS erfahrung um zu beurteilen warum.
Bild Text
Falls du damit Leben kannst:

<style>

div.shutterWidget {
  border: 1px solid white;                           
  border-radius: 15px;
  display: block;                                    /* flex in block ändern um Columns in Rows zu ändern */
  position: absolute;
  background-color: initial;
  top: 0%;                                         
  left: 0%;
  width: 100%;
  height: 100%;
  align-items: center;
}

div.shutterWidget div {
  border: px solid white;
  width: 100%;
  text-align: center;
  align-items: center;
  background-color: inherit;
  display: block;                                    /* flex in block ändern um Columns in Rows zu ändern */
  justify-content: center;
  font-size: 1em;
  margin: 5% 0 0 0;                                  /* Abstand zwischen Text Und Rahmen */
}

div.shutterWidget button {
  border: 0px solid white;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  height: 1.5em;
  width: 1.5em;
  float: none;
  font-size: 3em;
  margin-right: 12px;
  padding: 0 0 0 0;
}

div.shutterWidget span {
  border: 0px solid white;
  width: 100%;
  height: 75%;
  align-items: center;
  display: block;                                    /* flex in block ändern um Columns in Rows zu ändern */
  padding-top: 12px;                                 /* Padding in Top ändern. Dieser Wert ist der Abstand zwischen Buttons und Text */
}

  </style>


<div class="shutterWidget">

<div> {{ngModel.name}}</div>

<span>

<button ng-click="sendCmd('homee.0.ElectricMotorMeteringSwitch-9.UpDown-100', '0')"> <i class="glyphicon glyphicon-menu-up"></i> </button>

<button ng-click="sendCmd('homee.0.ElectricMotorMeteringSwitch-9.UpDown-100', '2')">

<widget-icon iconset="'eclipse-smarthome-classic'" icon="'blinds'" size="45"

state="itemValue(config.blind_item)" />

  

  </button>

    <button style="margin-right: 0" ng-click="sendCmd('homee.0.ElectricMotorMeteringSwitch-9.UpDown-100', '1')"> <i class="glyphicon glyphicon-menu-down"></i>    </button>

</span>

MFG
CrunkFX

fisch

Suuuuuper vielen vielen DANK!!!

Das passt definitiv....

CrunkFX

@fisch Gerne, ab und zu mal Aufgaben zu haben hilft definitiv beim weiterlernen

fisch

klasse echt ...ich habs nicht hinbekommen.aber mit deiner Erklärung hab ich's noch etwas angepasst...

Eine Frage habe ich noch...hat aber Zeit

Und Zwar habe ich ein Kalender Widget importiert... mir gefällt nicht, dass die Überschrift "Kalender" sich je nach Termine horizontal verändert.

Vielleicht hast dazu ja auch eine Idee...ich bekomme das mit CSS einfach nicht gebacken. Je mehr Termine desto höher rutscht die Überschrift.. Hätte es einfach gerne fixiert.
Vielleicht hast du mal Muse , dir das anzusehen

<style>
  .calendar {
		top: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    bottom: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
    padding: 100px;
  }
  .calendar-col-1 {
  	text-align: right;
    flex-shrink: 0;
  }
  .calendar-col-2 {
  	text-align: left;
    flex-grow: 1;
    margin-left: 10px;
 		overflow: hidden;
	}
  .calendar-row {
     display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  div.event-date {
  	font-size: 1.5vw;
  	color: {{config.CalendarGlobalHighlightColor}};
  }
  div.event-day {
  	font-size: 1vw;
  }
  div.event-summary {
  	font-size: 1.5vw;
  	color: {{config.CalendarGlobalHighlightColor}};
  	white-space: nowrap;
  	overflow: hidden; 
  	text-overflow: ellipsis;
  }
  div.event-time {
  	font-size: 1vw;
  	font-weight: bold;
  }
  div.event-location {
  	font-size: 1vw;
  	white-space: nowrap;
  	overflow: hidden; 
  	text-overflow: ellipsis;
  }  
	hr.event-divider { 
  	border: 0; 
  	height: 1px; 
  	margin: 0px;
  	background-image: -webkit-linear-gradient(left, #212124, #666666, #FFFFFF, #666666, #212124);
	}
</style>
<div class="calendar">
  <div ng-repeat-start="n in [].constructor(5) track by $index">
    <div ng-if="config.CalendarGlobalNumberOfEvents > $index" class="calendar-row" 
         ng-init="endTime =config['CalendarEvent'+ ($index+1)+'EndDateTime']; 
                  startTime=config['CalendarEvent'+ ($index+1)+'StartDateTime']; 
                  summary=config['CalendarEvent'+ ($index+1)+'Summary'];
                  location=config['CalendarEvent'+ ($index+1)+'Location'];">
      <div class="calendar-col-1">
      	<div ng-if="(config.CalendarGlobalShowDate)" class="event-date"> {{itemValue(startTime) | date:'dd. MMM'}}</div>
      	<div ng-if="(config.CalendarGlobalShowDay)" class="event-day"> {{itemValue(startTime) | date:'EEE'}}</div>
      </div>
     	<div class="calendar-col-2">
        <div class="event-summary">
      		<span ng-if="(config.CalendarGlobalShowSummary)"> {{itemValue(summary)}}</span>
        </div>
        <div class="event-time">
          <span ng-if="(config.CalendarGlobalShowTime) && ((itemValue(startTime) | date:'dd.MM.yyyy') == (itemValue(endTime) | date:'dd.MM.yyyy'))"> {{itemValue(startTime) | date:'HH:mm'}}</span>
          <span ng-if="(config.CalendarGlobalShowTime) && ((itemValue(startTime) | date:'dd.MM.yyyy') == (itemValue(endTime) | date:'dd.MM.yyyy'))"> - </span>
          <span ng-if="(config.CalendarGlobalShowTime) && ((itemValue(startTime) | date:'dd.MM.yyyy') == (itemValue(endTime) | date:'dd.MM.yyyy'))"> {{itemValue(endTime) | date:'HH:mm'}}</span>
          <span ng-if="(config.CalendarGlobalShowTime) && ((itemValue(startTime) | date:'dd.MM.yyyy') < (itemValue(endTime) | date:'dd.MM.yyyy'))"> All day </span>      
        </div>
        <div class="event-location">
        	<span ng-if="(config.CalendarGlobalShowLocation)"> {{itemValue(location)}}</span>
        </div>
      </div>
    </div>
	</div>
  <div ng-repeat-end ng-if="(config.CalendarGlobalNumberOfEvents > $index +1)">
      <hr class="event-divider"/>
  </div>
</div>

Bildschirmfoto 2020-05-15 um 20.22.41.png

CrunkFX

@fisch Probier mal was passiert wenn du die Zeile justify-content: space-between; gegen justify-content: flex-start; tauscht. Welches Widget benutzt du dafür ein von GitHub?

Edit: Ups nicht zuende gelesen, probier das mal:

<style>

  .calendar {

		top: 0px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    bottom: 0px;

    left: 0px;

    right: 0px;

    height: 100%;  /* Den Wert entsprechend anpassen */

    position: absolute;

    padding: 100px;

  }
/* Der Rest ............................................. */

fisch

@CrunkFX

Top! läuft :-). Vielen vielen Dank

CrunkFX

@fisch Perfekt freut mich das ich helfen konnte.

NEWS

Habpanel Custom Widget Frage

Support us

1.6k
Online

30.5k
Users

76.7k
Topics

1.2m
Posts

NEWS

Habpanel Custom Widget Frage

Support us

1.6kOnline

30.5kUsers

76.7kTopics

1.2mPosts

1.6k
Online

30.5k
Users

76.7k
Topics

1.2m
Posts