Ich hatte dasselbe Problem. Dem Linux Adapter jedoch Zugangsdaten auf einen Linuxrechner zu geben, war keine Lösung für mich.
Deshalb habe ich einen Adapter geschrieben, über den ein slave (oder master) heruntergefahrenn oder neu gestartet werden kann.
https://www.npmjs.com/package/iobroker.power-off
@apollon77
Ja, ich denke es sollten schon channels sein auf zweiter Stufe. Zumindest verwende ich was, was sich "createChannel" nennt zum erstellen. In vereinfachter Form sieht das so aus:
this.createDevice(label,
{name: label,},
{},
(err: any, obj: any)=>{
this.createChannel(obj.id, 'A', (err: string | null, channel: any) => {
this.createState(obj.id, channel.id, "someSwitch", {
type: "boolean",
role: "switch",
read: true,
write: true,
},
(err: string | null, state: any) => {
});
})
}
);
@AlCalzone
VSCode mit @iobroker/adapter-core verwende ich schon. Hilft auch oft, navgier da oft und gern mit F12 durch die Definitionen durch. Debuggen von VSCode aus schaff ich auch. Der Typescript-Code mit dem ich arbeite basiert hab ich mit ioBroker gemäss Doku generiert.
Allerdings simmen die Defintionen nicht unbedingt immer mit der Realität überein.
"getDevices" hat zum Beispiel einen Callback vom Typ "GetObjectsCallback3<DeviceObject>" entsprechnd sollte ich nach Definition im Callback neben einem Error|null auch ein Attribut vom Typ Array<GetObjectsItem<DeviceObject>> zurück kommen. In Tat und Wahrheit bekomm ich aber ein Array<DeviceObject> zurück.
Ich hab mich selber an einem Fix des Problemes versucht und einen Fork erstellt:
https://github.com/jobe451/ioBroker.vis-materialdesign/blob/master/widgets/materialdesign/js/widgets/materialdesign.views.js
Statt einfach einen 100px default zu setzen
style="height: ${myMdwHelper.getNumberFromData(data.attr('viewsHeight' + i), 100)}px; ${viewWidth}; display: none;">
Mach ich darin vorgängig:
let viewHeightValue = myMdwHelper.getNumberFromData(data.attr('viewsHeight' + i), -1);
let viewHeight = "";
if (viewHeightValue !== -1) {
viewHeight = "height: " + viewHeightValue.toString() + "px; ";
}
Obs funktioniert, ich glaubs. Ich kriegs aber nicht getestet. Ich installier zwar den Adapter von meinem Fork, aber irgendwo bleibt das alte Script im cache. Alle iobroker uploads und restarts bringen nichts.
Anyway, damit würde das Problem gelöst sein. Vorher:
Nachher:
Edit: Verschoben da Frage nicht Einstellungen des Top App Bar Widget betrifft
Okey, ich hab mal einen "export (anonymized)" gemacht:
[entfernt]
Kommentare zum aktuellen Stand:
Edit: Verschoben da Frage nicht Einstellungen des Top App Bar Widget betrifft
@mcu
Danke für den Hinweis. Ist mir aber zu kompliziert.
Ich hab nun einen Weg gefunden. Ich brauch einfach das StateHTML Widget dazu.
@asgothian Nö, bringt nix. Ich hab 2.0.2 installiert und versuche es seit einem halben Tag. Hab den Schalter schon zig Mal angelernt, wieder gelöscht und zwischendurch versucht zu rekonfigurieren mit wachhalten und ohne. Ich habe noch 5 Rekonfigurierungsveruche übrig, was auch immer das bedeutet. Wahrscheinlich landen die Schalter aber vorher in der Tonne.
@mcu
Danke für den Hinweis. Ist mir aber zu kompliziert.
Ich hab nun einen Weg gefunden. Ich brauch einfach das StateHTML Widget dazu.
Ich habe via swiss-weather-api Wetterprognosen pro Stunde verfügbar und würde die gerne visualisieren.
HistoryGraph ist dazu ungeeignet, weil diese Zahlenreihen nicht in einer der History-DBs gespeichert sind. Auch Chart ist dazu nicht geeignet. Die einzige Möglichkeit wäre es Balkendiagramme zu nutzen und dazu hunderte von Datepunkten (Temperatur, Wind, Regen, über 48 Stunden) zu erfassen.
Hab ich da etwas übersehen?
Am liebsten würde ich
Gibt es sowas?
@jobe451 Update: Das Problem ist offenbar vielmehr, dass ich den ws selber nicht ugedated kriege auf 4.0.8... Was kann man da machen? Wie kann man den update erzwingen?
Also bei mir kommt dieser NPM nicht-gefunden-package.json Fehler immer noch, mit ws 4.0.8
Ich hatte dasselbe Problem. Dem Linux Adapter jedoch Zugangsdaten auf einen Linuxrechner zu geben, war keine Lösung für mich.
Deshalb habe ich einen Adapter geschrieben, über den ein slave (oder master) heruntergefahrenn oder neu gestartet werden kann.
https://www.npmjs.com/package/iobroker.power-off
Mir fällt da noch etwas auf. Die AppBar scheint nicht so perfekt Multi-User-Fähig zu sein.
Wenn ein User auf ein bestimmtes Untermenu navigiert und ein zweiter User gleichzeitg die Site betrachtet, wechselt auch beim zweiten User gleichzeitg die Ansicht. Weil auch die App-Bar des zweiten Users "sieht", dass der entsprechende menu-index-Datenpunkt geändert hat (via widget 8). Zudem wenn ich das nächste Mal wieder auf VIS gehe, ist immer noch die letzte Menu-Auswahl offen und nicht die "Homepage".
Es ist mir klar, das ist jetzt nicht unbedingt die wichtigste Frage, weil Multi-User-Einsatz mit gleichzeitig nutzenden Usern wird wohl nicht so oft passieren. Trotzdem scheint es eine gute Frage zu sein.
Gibt es da Ideen, wie man dieses Multi-User-verhalten verbessern könnte?
Edit: Verschoben da Frage Widget betrifft
Wo muss ich das denn eintragen. Im CSS hatte bei mir keinen Effekt.
Doch, hier:
Hier mein ganzes aktuelles CSS. Unkommentiert, unaufgeräumt mit allen möglichen Unschönheiten die noch drin stecken, hoffe es hilft:
div.mdc-typography--headline6 {
margin: 0 0 1.5rem 0;
}
.JB_float_right {
float: right;
box-sizing:border-box;
}
.JB_float_left {
float: left;
box-sizing:border-box;
}
div.JB_block {
display: block;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
table.overview td {
padding: 0 2rem 0.5rem 0;
width: 100%;
}
table.overview {
width: 100%;
max-width: 500px;
}
@media screen and (max-width: 420px) {
div.materialdesign-masonry-container {
column-gap: 3px;
padding: 5px;
}
div.mdc-materialdesign-masonry-item {
padding-bottom: 3px;
}
}
.materialdesign-masonry-item > div > div.vis-view {
padding: 1rem 0.5rem;
border-radius: 4px;
background-color: var(--materialdesign-color-card-background);
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
box-sizing: border-box;
}
html > body, #vis_container {
color: white;
background-color: var(--JB_background_primary);
}
.JB_weatherIcons img {
height: 48px !important;
filter: invert(100%) sepia(100%) saturate(10000%) hue-rotate(306deg) brightness(0.9) saturate(140%);
}
.JB_clearfix::after {
content: "";
clear: both;
display: table;
}
div.JB_light {
float: left;
}
div.JB_lights::after {
content: "";
clear: both;
display: table;
}
div.JB_lights_group {
float: left;
padding: 0 0.5rem 0.5rem 0;
}
div.JB_btn_light {
padding-bottom: 2em;
padding: 2.5em 2em 3em 2em;
}
div.JB_btn_settings {
}
div.JB_btn_settings, div.JB_btn_light {
width: 72px;
margin: 0.2em;
}
div.materialdesign-icon-list-item-layout-vertical-image-container {
padding: 0.3em 0;
}
div.materialdesign-icon-list-item-card--outlined {
border-color: var(--JB_background_tertiary);
}
div.materialdesign-icon-list-item-card {
background: var(--JB_background_primary);
}
div.theme--light.v-list {
background: #2f353a;
color: rgba(255,255,255,.87)
}
div.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
color: rgba(255,255,255,.87)!important
}
@media screen and (max-width: 420px) {
.JB_weatherIcons .materialdesign-icon-list-item {
padding: 0px;
margin: 2px;
border-width: 1px;
min-width: unset !important;
}
.JB_weatherIcons .materialdesign-masonry-container {
padding: 1px;
}
.JB_weatherIcons .materialdesign-icon-list-item-text, .JB_weatherIcons .materialdesign-icon-list-item-subText {
font-size: 12px;
}
.JB_weatherIcons img {
height: 40px !important;
}
}
.JB_rightClock {
right: 10px;
top: 29px;
font-size: large;
}
.JB_rightAlignedDate {
right: 10px;
top: 12px;
font-size: smaller;
}
.JB_rightClock, .JB_rightAlignedDate {
position: absolute;
z-index: 2001;
}
div.theme--light.v-card {
background-color: #00838f;
}
div.mdc-drawer__header {
background-color: var(--mdc-theme-primary);
}
.vis-tpl-basic-HTML {
color: white;
}
/*
--JB_background_primary: #2d323a;
--JB_background_secondary: #33363d;
--JB_background_tertiary: #2a2e35;
*/
:root {
--mdc-theme-primary:#009688 !important;
--mdc-theme-secondary:#0097a7 !important;
--material-progress-circular-color:#009688 !important;
--materialdesign-color-drawer-background:#33363d !important;
--materialdesign-color-drawer-sub-background: rgba(255,255,255,0) !important;
--materialdesign-color-list-item-background:#00838f !important;
--materialdesign-color-sub-list-item-background: #00695C !important;
--materialdesign-color-list-item-hover:#000 !important;
--materialdesign-color-sub-list-item-hover:#000 !important;
--materialdesign-color-list-item-selected:#000 !important;
--materialdesign-color-sub-list-item-selected:#000 !important;
--materialdesign-color-list-item-text:white !important;
--materialdesign-color-sub-list-item-text: white !important;
--materialdesign-color-list-item-text-activated: white !important;
--materialdesign-color-sub-list-item-text-activated: white !important;
--materialdesign-color-list-item-text-secondary:rgba(0, 0, 0, 0.54) !important;
--materialdesign-color-list-item-text-right:#000 !important;
--materialdesign-color-list-item-text-secondary-right:rgba(0, 0, 0, 0.54) !important;
--materialdesign-color-list-item-header:#000 !important;
--materialdesign-color-list-item-divider:rgba(0, 0, 0, 0.12) !important;
--materialdesign-color-list-item-backdrop:rgba(0,0,0,0.5) !important;
--materialdesign-color-sub-list-item-backdrop:rgba(0,0,0,0.5) !important;
--materialdesign-color-list-item-backdrop-activated:#1e88e566 !important;
--materialdesign-color-sub-list-item-backdrop-activated:#1e88e566 !important;
--materialdesign-color-card-background:#33363d !important;
--materialdesign-color-card-title-section-background:transparent !important;
--materialdesign-color-card-text-section-background:transparent !important;
--materialdesign-color-card-title:#ffffff !important;
--materialdesign-color-card-sub-title:#a1a1a1 !important;
--materialdesign-color-select-background:transparent !important;
--materialdesign-color-select-background-hover:rgba(0, 0, 0, 0.87) !important;
--materialdesign-color-select-hint:#009688 !important;
--materialdesign-color-select-hint_selected:#009688 !important;
--materialdesign-color-select-border:rgba(0,0,0,.38) !important;
--materialdesign-color-select-border-selected:#009688 !important;
--materialdesign-color-select-text:rgba(0, 0, 0, 0.87) !important;
--materialdesign-color-dialog-background:#fff !important;
--materialdesign-color-dialog-button-background:transparent !important;
--materialdesign-color-dialog-button-text:#009688 !important;
--materialdesign-color-dialog-button-hover:#009688 !important;
--materialdesign-color-dialog-title-background:transparent !important;
--materialdesign-color-dialog-title:#009688 !important;
--materialdesign-color-table-background:#fff !important;
--materialdesign-color-table-border:rgba(0,0,0,.12) !important;
--materialdesign-color-table-header-row-background:inherit !important;
--materialdesign-color-table-header-row-text-color:#009688 !important;
--materialdesign-color-table-row-background:inherit !important;
--materialdesign-color-table-row-text-color:rgba(0, 0, 0, 0.87) !important;
--materialdesign-color-table-row-divider:rgba(0, 0, 0, 0.12) !important;
--materialdesign-color-switch-on:#009688 !important;
--materialdesign-color-switch-off:#fff !important;
--materialdesign-color-switch-track:#000 !important;
--materialdesign-color-switch-off-hover:#009688 !important;
--materialdesign-color-slider-before-thumb:#009688 !important;
--materialdesign-color-slider-thumb:#009688 !important;
--materialdesign-color-slider-after-thumb:rgba(161, 161, 161, 0.26) !important;
--materialdesign-color-slider-track-marker:#009688 !important;
--materialdesign-masonry-gaps:20px !important;
--materialdesign-grid-gaps:0px !important;
--materialdesign-icon-list-items-per-row:3 !important;
--materialdesign-icon-list-items-min-width:50px !important;
--materialdesign-icon-list-items-gaps:4px !important;
--materialdesign-icon-list-items-text-font-size:14px !important;
--materialdesign-icon-list-items-text-font-family:inherit !important;
--materialdesign-icon-list-items-text-font-color:rgba(255,255,255, 0.7) !important;
--materialdesign-icon-list-items-subText-font-size:12px !important;
--materialdesign-icon-list-items-subText-font-family:inherit !important;
--materialdesign-icon-list-items-subText-font-color:rgba(255,255,255, 0.7) !important;
--materialdesign-icon-list-items-value-font-size:12px !important;
--materialdesign-icon-list-items-value-font-family:inherit !important;
--materialdesign-icon-list-items-value-font-color:#009688 !important;
--materialdesign-icon-list-item-layout-horizontal-image-container-width:auto !important;
--materialdesign-icon-list-item-layout-vertical-image-container-height:auto !important;
--vue-slider-thumb-label-font-color:#fff !important;
--vue-slider-thumb-label-font-size:12px !important;
--vue-slider-tick-before-color:#009688 !important;
--vue-slider-tick-after-color:#009688 !important;
--vue-text-field-before-color:rgba(0, 0, 0, 0.2) !important;
--vue-text-field-hover-color:#009688 !important;
--vue-text-field-after-color:#009688 !important;
--vue-text-field-label-before-color:rgba(0, 0, 0, 0.6) !important;
--vue-text-field-label-after-color:#009688 !important;
--vue-text-field-label-font-family:inherit !important;
--vue-text-field-label-font-size:16px !important;
--vue-text-field-label-width:inherit !important;
--vue-text-field-background-color:rgba(0, 0, 0, 0.06) !important;
--vue-text-field-background-hover-color:rgba(0, 0, 0, 0.12) !important;
--vue-text-field-background-after-color:rgba(0, 0, 0, 0.06) !important;
--vue-text-field-input-text-color:rgba(255, 255, 255, 0.87) !important;
--vue-text-field-input-text-font-size:inherit !important;
--vue-text-field-input-text-font-family:inherit !important;
--vue-text-field-message-color:rgba(0, 0, 0, 0.6) !important;
--vue-text-field-message-font-size:12px !important;
--vue-text-field-message-font-family:inherit !important;
--vue-text-field-counter-color:rgba(0,0,0,.6) !important;
--vue-text-field-counter-font-size:12px !important;
--vue-text-field-counter-font-family:inherit !important;
--vue-text-field-appendix-color:rgba(0,0,0,.6) !important;
--vue-text-field-appendix-font-size:inherit !important;
--vue-text-field-appendix-font-family:inherit !important;
--vue-text-field-translate-x:0px !important;
--vue-text-field-translate-y:-18px !important;
--vue-text-icon-clear-color:#009688 !important;
--vue-text-icon-clear-size:inherit !important;
--vue-text-icon-append-color:#009688 !important;
--vue-text-icon-append-size:inherit !important;
--vue-text-icon-append-cursor:inherit !important;
--vue-text-icon-append-outer-color:#009688 !important;
--vue-text-icon-append-outer-size:inherit !important;
--vue-text-icon-prepand-color:#009688 !important;
--vue-text-icon-prepand-size:inherit !important;
--vue-text-icon-prepand-inner-color:#009688 !important;
--vue-text-icon-prepand-inner-size:inherit !important;
--vue-list-item-height:auto !important;
--vue-list-item-background-color:inherit !important;
--vue-list-item-background-hover-color:black !important;
--vue-list-item-background-selected-color:black !important;
--vue-ripple-effect-color:#009688 !important;
--vue-list-item-font-size:inherit !important;
--vue-list-item-font-family:inherit !important;
--vue-list-item-font-color:inherit !important;
--vue-list-item-font-color-hover:inherit !important;
--vue-list-item-font-color-selected:inherit !important;
--vue-list-item-subtitle-font-size:inherit !important;
--vue-list-item-subtitle-font-family:inherit !important;
--vue-list-item-subtitle-font-color:rgba(0, 0, 0, 0.6) !important;
--vue-list-item-subtitle-font-color-hover:rgba(0, 0, 0, 0.6) !important;
--vue-list-item-subtitle-font-color-selected:rgba(0, 0, 0, 0.6) !important;
--vue-list-item-value-font-size:inherit !important;
--vue-list-item-value-font-family:inherit !important;
--vue-list-item-value-font-color:rgba(0, 0, 0, 0.6) !important;
--vue-list-item-value-font-color-hover:rgba(0, 0, 0, 0.6) !important;
--vue-list-item-value-font-color-selected:rgba(0, 0, 0, 0.6) !important;
--vue-list-item-icon-size:20px !important;
--vue-list-item-icon-color:#009688 !important;
--vue-list-item-icon-color-hover:#009688 !important;
--vue-list-item-icon-color-selected:#009688 !important;
--vue-alerts-background-color:#fff !important;
--vue-alerts-border-color:#009688 !important;
--vue-alerts-border-outlined-color:#009688 !important;
--vue-alerts-button-close-color:#009688 !important;
--vue-alerts-text-size:16px !important;
--vue-alerts-text-font-family:inherit !important;
--vue-alerts-text-font-color:inherit !important;
--vue-alerts-icon-color:black !important;
--vue-alerts-icon-size:24px !important;
--vue-alerts-bottom-margin:16px !important;
--vue-btn-background-color-before:transparent !important;
--vue-calendar-day-button-today-color:#009688 !important;
--vue-calendar-border-color:#e0e0e0 !important;
--vue-calendar-background-color:transparent !important;
--vue-calender-background-outside-color:#f7f7f7 !important;
--vue-calender-header-background-color:transparent !important;
--vue-calendar-time-axis-background-color:transparent !important;
--vue-calendar-time-axis-header-background-color:transparent !important;
--vue-calendar-time-axis-text-size:12px !important;
--vue-calendar-time-axis-text-font:inherit !important;
--vue-calendar-time-axis-text-color:black !important;
--vue-calendar-day-button-font-size:inherit !important;
--vue-calendar-day-button-font-family:inherit !important;
--vue-calendar-day-button-font-color:black !important;
--vue-calendar-day-button-today-font-size:inherit !important;
--vue-calendar-day-button-today-font-family:inherit !important;
--vue-calendar-day-button-today-font-color:#fff !important;
--vue-calendar-day-label-font-size:12px !important;
--vue-calendar-day-label-font-family:inherit !important;
--vue-calendar-day-label-font-color:#000000 !important;
--vue-calendar-day-label-previous-font-color:rgba(0, 0, 0, 0.38) !important;
--vue-calendar-day-label-today-font-size:12px !important;
--vue-calendar-day-label-today-font-family:inherit !important;
--vue-calendar-day-label-today-font-color:#009688 !important;
--vue-calendar-control-container-height:10px --vue-calendar-control-button-icon-size: 24px !important;
--vue-calendar-control-button-icon-color:#009688 !important;
--vue-calendar-control-button-text-size:12px !important;
--vue-calendar-control-button-text-color:black !important;
--vue-calendar-control-button-text-font:inherit !important;
--vue-aclendar-event-font-size:inherit !important;
--vue-aclendar-event-font:inherit !important;
--vue-calendar-control-button-container-flex:1 !important;
--vue-calendar-control-button-container-min-width:initial !important;
--vue-dialog-title-font-size:20px !important;
--vue-dialog-title-font-family:inherit !important;
--vue-dialog-footer-background-color:initial !important;
--vue-dialog-view-container-distance-to-border:24px !important;
--vue-toolbar-background-color:#009688 !important;
--vue-overlay-scrim-opacity:0.46 !important;
--vue-overlay-scrim-background-color:rgb(33, 33, 33);
--JB_background_primary: #2d323a;
--JB_background_secondary: #33363d;
--JB_background_tertiary: #2a2e35;
}
Sehe ich das richtig - für die dynamische Höhe muss ich immer wissen, welches Widget in der View das "höchste" ist? Oder Notfalls ein leeres HTML mit definierter Höhe einfügen.
Nein, überhaut nicht. Das Ziel ist ja, dass die Höhe des Contens die Höhe der Karte bestimmt. Egal ob das auf Handy oder Widescreen angeschaut wird. Auf Mobile ist ja dann gerne eine grössere Höhe Notwendig, weil Zeugs mehr in die vertikale umbricht.
Was ich da als screenshot gezeigt habe funktioniert aktuell nur mit einem ioBroker.vis-materialdesign Fork. Ich hoffe ich kann den schon bald wieder auflösen und der Change dort fliesst ins Projekt ein. Das Problem aktuell ist, dass wenn ich keine Höhe in einer Masonry-view oder Grid-view setze, das Widget automatisch fix 100px Höhe dem Element gibt. Das ist im wesentlichen der Change den ich gemacht hatte.
Mein einfachstes Beispiel ist meine Übersicht:
Das hier ist einfach ein HTML-widget mit einem div als Titel und einer Tabelle mit HTML Bindings.
Und sieht dann so aus:
Leben tut das ganze dann in einem einem Masonry-Widget als view.
Möglich sind aber auch komplexere Dinge. Man kann Elemente links / rechts floaten und mit clearfix die nächste Reihe beginnen:
(irgendwie bricht da der Automatisierungs-Button um, man sieht es kaum, ist aber noch zu verbessern.)
Die Elemente hier passen sich der Breite an und sind mittels float positioniert mittels clearfix fängt jeweils die nächste Kolonne an.
Grundsätlich versuch ich absolut-positionierte Elemente zu vermeiden. Braucht aber etwas Geduld und ausprobieren.
Was eine Fumellei ist, ist wenn man die Positionierung von Elemente verändern will. Dann gibt es cut and copy. VIS scheint das nicht vorzusehen. Als VIS konzipiert wurde, schien progressive-design noch nicht so weit gewesen zu sein und Zeugs absolut zu positionieren ist so für den Einstieg sicher einfacher.
@Scrounger
Danke! Dank dem Tipp mit dem Minify hab ich nun auch meinen Fork zum laufen gebracht und hab nun alle cards mit adaptiver Höhe am funktionieren.
Den card-look erreiche ich mit
.materialdesign-masonry-item > div > div.vis-view {
padding: 1rem 0.5rem;
border-radius: 4px;
background-color: var(--materialdesign-color-card-background);
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
box-sizing: border-box;
}
