Custom Widget - HABPanel

[Sefina]

Hi zusammen

Das Ziel ist "soetwas - ähnliches"
https://community-openhab-org.s3-eu-...3b5dd64b62.png

Diesen Code habe ich im Englischen Forum gefunden und ihn Angepasst :

<div class="section">
    <div class="controls">
        <div class="widget.wide">

            <div class="controlGroup">
        <a href="#/view/Erdgeschoss">
                <div class="control" ng-class="{true: 'off'}[itemValue('Menu_page')=='Erdgeschoss']" ng-click="sendCmd('Menu_page', 'Erdgeschoss')">
          <svg viewBox="0 0 30 30"><use xlink:href="/static/Design01/Icons/girl_2.svg#setting-roll"></use></svg></div></a>
        <a href="#/view/Obergeschoss">
        <div class="control" ng-class="{true: 'off'}" ng-click="sendCmd('Menu_page', 'Obergeschoss')">
          <svg viewBox="0 0 30 30"><use xlink:href="/static/Design01/Icons/alarm.svg#pawn"></use></svg></div></a>
      </div>        
        </div>

    </div>
</div>

Ich habe ein String Item, wenn es sich ändert auch das Panel durchschaltet.
Es heisst "Menu_page"

Die Bilder sind in : /conf/html/Design01/Icons/xxxx.svg

Theoretisch habe ich den Code so verstanden :

Ist der Wert in dem Item z.b. Erdgeschoss dann soll das Icon als aktiv Leuchten die anderen nicht.
Drücke ich auf ein anderes Icon ändert sich der Wert und dadurch das Panel und dadurch auch der Status der Icons.

Soweit die Theorie

Folgende Fehler habe ich :

- Keine Icons sind zu sehen
- Die Butons sind untereinander und scheinbar viel zu groß
- Die Butons sind nur mit den "Überfahren der Maus erkennbar"

Habt ihr irgendwie ein anhaltspunkt wie ich die Navigationsleiste zum laufen bekomme.


MfG

[bkumio]

Bin kein AngularJS experte.....

Ich hatte mit aus dem Fritzbox threat mal was "zusammengekaut". Meine svg Icons sind im /html/fritzbox unterverzeichniss....Der widget code benutzt aber img source anstatt von xlink:href aber das liegt bestimm an der svg viewBox die du benutzt.

Aber vielleicht hilft auch der Link hier : https://community.openhab.org/t/usin...an-url/32574/5 (ganz unten) . Ich sehe keinen der noch ein #pawn oder #setting-roll an den code anhängt.....

<table class="table table-bordered">
  <caption>Anrufe</caption>
  <tr>
  <th>Typ</th>
  <th>Datum</th>
  <th>Name</th>
  <th>Nummer</th>
  <th>Dauer</th>
  </tr>
<tr ng-repeat="item in itemsInGroup('ZZ_FritzCalls')" align="left" cellpadding="25px" cellspacing="25px"  border="none">
    <td><img src="/static/fritzbox/fritz-{{itemValue(item.name).split(';')[0]}}.svg" height="20" width="20" </td>
  <td>{{itemValue(item.name).split(';')[1]}}</td>
  <td>{{itemValue(item.name).split(';')[2]}}</td>
  <td>{{itemValue(item.name).split(';')[3]}}</td>
  <td>{{itemValue(item.name).split(';')[6]}}</td>
  </tr>

[Sefina]

Hi zusammen,

Neues Widget neues Problem :

So sieht es derzeit aus :

problem.png

der Code ist :

<style>
.ecobee-table {
  width: 100%;
  height: 100%;
  padding: 0px;
  border: 0px;
}
.ecobee-table td {
  border: 2px solid white;
}
  </style>
<table class="ecobee-table">
  <tr>
    <td><div ng-init="knob = {
                    value: itemValue(config.Regler_Heizung) ,
                    options: {
                      scale: {
                        enabled: true,
                        type: 'dots',
                        color: 'gray',
                        width: 2,
                        spaceWidth: 10,
                        quantity: 5,
                        height: 8
                      },
                      skin: {
                        type:    'tron',
                        width:    5,
                        color: 'orange',
                        spaceWidth: 5
                      },
                      trackWidth: 30,
                      barWidth: 30,
                      step: 1,
                      startAngle: 20,
                      endAngle: 340,
                      trackColor: 'rgba(52,152,219,.1)',
                      barColor: 'rgba(52,152,219,.5)',
                      textColor: 'white',

                    }
                   };">
      </div>
      <div>
          <ui-knob value="knob.value" options="knob.options" ng-click="sendCmd(config.Regler_Heizung, knob.value)"/>
      </div></td>
    <td><table class="ecobee-table">
  <tr>
    <td>{{config.Name}}</td>
  </tr>
  <tr>
    <td> Es ist {{StringValue(config.Ist_Heizung)}} °C </td>
  </tr>
      <tr>
    <td>{{itemValue(config.An_Heizung)}}</td>
  </tr>
</table></td>
  </tr>
</table>

Das Problem ist der Knob ist nicht zu Skallieren,
daher ist er viel zu groß,
ich finde keine Einstellung um ihn händisch zu verkleinern oder ihn an die größe zu orientieren.

Es sollen die Werte auf ein 1*2 Feld passen so wie es im Hintergrund eingestellt ist.

Ich hoffe mir kann wer helfen.

MfG

[bkumio]

das ist relativ einfach ...

Füge mal hinter
trackColor: 'rgba(52,152,219,.1)',
barColor: 'rgba(52,152,219,.5)',
textColor: 'white',

und vor der geschweiften klammer noch ein : "size: 30 " ein


gefunden bei : https://radmie.github.io/ng-knob/

Gruss
bkumio

[Sefina]

Etwas feineinstellung und es rennt.

Danke dir

Aber die nächste Aufgabe die irgendwie nicht so will wie sie soll (ich denke irgendein Klammer Problem)

In den Settings habe ich eine String einstellung gemacht :

Art : String
ID: LinkURL
Label : Link URL
Default : /view/Kameras

Ich habe eine Sitemap erstellt die Kameras heißt und nun soll wenn man auf ein Bild klickt man auf diese Seitmap verweisen.

mit dem Befehl : <a href="#/view/Kameras"> geht es perfekt

nehme ich nun : <a href="# config.LinkURL"> lande ich in einer Index html ....

Habe es schon mit mehreren schreibweisen getestet ... immer das gleiche.

MfG

[bkumio]

Ah das Problem hatte ich auch schon.....hat mich auch fast wahnsinnig gemacht.

Probiers mal mit : {{config.LinkURL}}

cheers

[Sefina]

Auch das geht nicht .... und das nächste ist Number Item´s ....

min: config.Soll_Min,
max: config.Soll_Max,

so soll es gehen ... aber er zerhackt die gesammten einstellungen ....

(von dem Widget oben)

Hat noch wer ne idee ?

mit {{xx}}, mit "xx" geht es beides nicht ....

Das es keine Sinnvolle Doku mit Beispielen gibt ....

Also frage ist :

Number Config´s in den Einstellungen übernehmen,
String Config´s in URL´s übernehmen

MfG

[bkumio]

ja ich klau mir auch alles zusammen..... ist ein wenig mühsam.

aber das mit dem {{config.LinkURL}} geht bei mir .Hab ein string zum multistate widget hinzugefügt wo ich die fontgrösse in pixel dynamisch setzen kann.
welches widget möchtest du den anpassen?

[Sefina]

Also du hattest teilweise Recht ... Warum auch immer es genau so gehen muss ....

Normal sagt das # das alles davor fix ist.

#/view/Kameras
#/view/Erdgeschoss
#/view/Heizung

Mann kommt immer zu dem Dashboard .... nun aber zu dem Probelm mit den Settings ....

das Komando heisst nun

<a href="{{config.LinkURL}}">

sssooooo

Nun heist es http://192.168.100.100:8080/habpanel...#/view/Kameras

Es geht .... Also wweiter getestet .....

#/view/Kameras

geht auch ....

In einem String der als Link dient muss also das #/view/ stehen

Also kurz um :

<a href="{{config.LinkURL}}">
#/view/Kameras

geht

<a href="#{{config.LinkURL}}">
/view/Kameras

oder

<a href="#/view/{{config.LinkURL}}">
Kameras

geht NICHT !

Thx

nun Fehlt noch das Number Problem ....