Trash HTML Widget VIS2

[skvarel]

Bei Fragen und/oder Problemen, einfach hier posten

[skvarel]

Das Widget (inventwo Universal) für VIS2

Transparenter Hintergrund, um es direkt in eine vorhandene View zu importieren.

Den Datenpunkt ggf. anpassen

In meinem Fall:
{0_userdata.0.Termine.Kalender_Müll.Widget}

Der Export:

[
  {
    "tpl": "tplInventwoWidgetUniversal",
    "data": {
      "bindings": [],
      "type": "readonly",
      "g_common": true,
      "mode": "singleButton",
      "direction": "row",
      "oid": "",
      "httpType": "send",
      "buttonSize": 110,
      "btnSpacing": 10,
      "countStates": 0,
      "buttonHoldValue": false,
      "dialogWidth": 500,
      "g_attr_group_type_view_in_dialog": true,
      "dialogHeight": 300,
      "dialogPadding": 10,
      "dialogBackground": "rgb(18, 18, 18)",
      "dialogTitleColor": "rgb(255,255,255)",
      "dialogTitleSize": 20,
      "dialogCloseButtonBackground": "rgba(255,255,255,0)",
      "dialogCloseButtonColor": "rgba(255,255,255,1)",
      "dialogCloseButtonSize": 14,
      "dialogBorderRadiusTopLeft": 12,
      "dialogBorderRadiusTopRight": 0,
      "dialogBorderRadiusBottomRight": 12,
      "dialogBorderRadiusBottomLeft": 0,
      "contentBlinkInterval": 0,
      "g_attr_group_state_default": true,
      "outerShadowColor": "",
      "colorPickerColorModel": "hex",
      "g_attr_content_color_picker": true,
      "colorPickerWidth": 200,
      "colorPickerHandleSize": 8,
      "colorPickerHandleMargin": 6,
      "colorPickerComponentsSpace": 12,
      "colorPickerDirection": "vertical",
      "colorPickerBorderWidth": 0,
      "colorPickerShowWheel": true,
      "colorPickerShowSaturation": true,
      "colorPickerShowValue": true,
      "textDecoration": "none",
      "g_attr_group_css_text": true,
      "textMarginTop": 0,
      "textMarginBottom": 0,
      "textMarginLeft": 0,
      "textMarginRight": 0,
      "contentType": "image",
      "g_attr_group_css_content": true,
      "contentMarginTop": 0,
      "contentMarginBottom": 0,
      "contentMarginLeft": 0,
      "contentMarginRight": 0,
      "contentSize": 66,
      "contentRotation": 0,
      "contentMirror": true,
      "flexDirection": "column",
      "g_attr_group_css_alignment": true,
      "alignItems": "center",
      "textAlign": "center",
      "contentAlign": "center",
      "backgroundOpacity": 0,
      "g_attr_group_css_transparency": true,
      "contentOpacity": 1,
      "paddingLeft": 0,
      "g_attr_group_css_spacing": true,
      "paddingRight": 0,
      "paddingTop": 0,
      "paddingBottom": 0,
      "borderRadiusTopLeft": 0,
      "g_attr_group_css_border_radius": true,
      "borderRadiusTopRight": 0,
      "borderRadiusBottomRight": 0,
      "borderRadiusBottomLeft": 0,
      "borderSizeTop": 0,
      "g_attr_group_css_border": true,
      "borderSizeBottom": 0,
      "borderSizeLeft": 0,
      "borderSizeRight": 0,
      "borderStyle": "none",
      "outerShadowX": 0,
      "g_attr_group_css_outer_shadow": true,
      "outerShadowY": 0,
      "outerShadowBlur": 0,
      "outerShadowSize": 0,
      "innerShadowX": 0,
      "g_attr_group_css_inner_shadow": true,
      "innerShadowY": 0,
      "innerShadowBlur": 0,
      "innerShadowSize": 0,
      "background": "rgba(0, 0, 0, 1)",
      "contentColor": "",
      "textColor": "rgba(255,255,255,1)",
      "borderColor": "",
      "innerShadowColor": "",
      "view": "v000_index",
      "icon": "/vis-icontwo/Navigations/nav_i.png",
      "text": "{0_userdata.0.Termine.Kalender_Müll.Widget}",
      "image": "",
      "g_css_font_text": true,
      "valueTrue": "0"
    },
    "style": {
      "bindings": [],
      "left": "100",
      "top": "100",
      "width": "770px",
      "height": "220",
      "position": "absolute",
      "overflow": "visible",
      "text-shadow": "2px 2px 1px #000000",
      "z-index": 100,
      "text-align": "center"
    },
    "widgetSet": "vis-2-widgets-inventwo",
    "_id": "i000001"
  }
]

[RikDRS]

Vielen Dank für dieses HTML-Widget!

ich habe es soweit eingebunden bekommen, das mir die Leerung der Tonnen zumindest in Textform angezeigt werden, allerdings bekomme ich die Symbole nicht angezeigt.
sowol der "originale Pfad

/vis-icontwo/Schedule/Trash/trash_blue.png

als auch so

../vis-icontwo/Schedule/Trash/trash_blue.png

zeigen keine grafischen Tonnen an.

Das Widget "image" mit dem Pfad

../vis-icontwo/Schedule/Trash/trash_blue.png

hingegen zeigt die blaue Tonne.

Ich habe im Blockly die Icon auf falsch und dann auf wahr zu setzen, hat aber auch nciht geholfen.

Mein Datenpunkt sieht inhaltlich wie folgt aus:

<table cellpadding="5" border="0" width=700px<tr><th><font size="3">Biomüll</font></th><th><font size="3">Restmüll</font></th><th><font size="3">Gelbe Tonne</font></th><th><font size="3">Papiermüll</font></th></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>Donnerstag 14.08.</td><td>Mittwoch 20.08.</td><td>Donnerstag 28.08.</td><td>Donnerstag 04.09.</td></tr><tr><td><i>In 5 Tagen</i></td><td><i>In 11 Tagen</i></td><td><i>In 19 Tagen</i></td><td><i>In 26 Tagen</i></td></tr></table>

Was übersehe ich?

Danke im voraus!

[RikDRS]

habs gefunden, Casesensitive war die Lösung

so klappt es auch mit den Icons

DANKE!

[skvarel]

UPDATE:

Eine Überarbeitung läuft .....

Horizontal:

Vertikal:

[skvarel]

UPDATE:

Ein paar neue/weitere Einstellungen im Script:

Der Code ist leider zu lang, um ihn hier zu Posten. Daher hier als txt hochgeladen

TrashHTML.txt

[Longbow]

@skvarel Danke, für das erste echt mega! Werde ich mal testen... werde Dir bescheid geben.

[skvarel]

@longbow .. ja, melde dich bitte ob alles klappt

[Longbow]

@skvarel

Guten Morgen, also weit klappt es die Ausrichtungen prima. So können die Leute es sich einstellen, wie sie es haben wollen.

Ein Problem ist nur, keine Ahnung warum, aber die Bilder werden nicht angezeigt. Weder die aus dem Pfad, die es ja gibt oder halt die möchte und hinterlegt habe.

hier mal der Pfad von dem was ich gern haben würde wollen :
/vis-2.0/smarthome/Image/views/muell/muelltonne-mit-armen_grau.png

hier die aus dem Adapter:
/vis-icontwo/Schedule/Trash/trash_brown.png

Das liegt aber echt wohl an Eurem Inventow Design Adapter, denn wenn ich dies Pfad so ein anzeigen lasse, als Bild Image, werden Sie mir angezeigt. An was kann das liegen?

[skvarel]

@longbow .. hast du dich an die genaue Schreibweise gehalten?

Die Namen im Script müssen zwingend identisch mit den Namen in der Instanz sein. Die Reihenfolge ist da allerdings egal.

[Longbow]

@skvarel

danke, da war der Fehler.... jetzt probiere ich weiter

[Longbow]

@skvarel

Also läuft echt super auf dem MacBook, probiere es später auf einem Windows-Rechner noch aus.
Aber auf den Mobilen Geräten (iPhone und iPad) sieht es wie mit dem anderen Widget, wo dein Sohn dran ist.

Hier mal die Bilder:

Auf dem MacBook

Auf den Mobilen Geräten:

[Longbow]

@skvarel

Also läuft echt super auf dem MacBook, probiere es später auf einem Windows-Rechner noch aus.
Aber auf den Mobilen Geräten (iPhone und iPad) sieht es wie mit dem anderen Widget, wo dein Sohn dran ist.

Hier mal die Bilder:

Auf dem MacBook

Auf den Mobilen Geräten:

[skvarel]

@longbow ... du kannst auch ein Basic-HTML-Widget nehmen, anstatt das inventwo Widget. Dann müsste es auch in der mobilen Ansicht klappen.

[skvarel]

@longbow .. Export vom Basic-HTML-Widget

[
  {
    "tpl": "tplHtml",
    "data": {
      "bindings": [
        "html"
      ],
      "html": "{0_userdata.0.Termine.Kalender_Müll.Widget}",
      "refreshInterval": null,
      "g_common": true,
      "g_css_font_text": true
    },
    "style": {
      "bindings": [],
      "left": "460px",
      "top": "368px",
      "width": "688px",
      "height": "222px",
      "z-index": "50",
      "color": null,
      "text-align": "center",
      "text-shadow": null,
      "font-family": null,
      "font-style": null,
      "font-variant": null,
      "font-weight": null,
      "font-size": null,
      "line-height": null,
      "letter-spacing": null,
      "word-spacing": null
    },
    "widgetSet": "basic",
    "_id": "i000001"
  }
]

[Longbow]

Herzlichen Dank, das war auch mein Gedanke, hatte nur nicht schneller es aus probieren können.
Ich finde mega, was du gebastelt hast.

Jetzt muss nur noch das andere Thema wieder gehen.

Ein großes Dankeschön an Dich.

[hubert9999]

Danke für dein Script.
Klappt nun.

Wo genau kann man den Bilderpfad nachschauen?

[skvarel]

@hubert9999 .. die Icons liegen im icontwo Adapter

Der Pfad (z.B. für die braune Tonne):

/vis-icontwo/Schedule/Trash/trash_brown.png

Wenn du eigene Icons verwenden möchtest musst natürlich den Pfad zu deinem Icon in dem Script angeben. Den Pfad kannst du dir über den Dateimanager im VIS-Editor holen.

Z.B., wenn du eigene Icons im VIS-2.0 Verzeichnis geladen hast, dann ist der Pfad:

/vis-2.0/HOTBIN Nederland-safe-reviews-icon.png

Bitte nur hier den Pfad ändern. Sonst nichts an den grünen Blöcken ändern.

[RikDRS]

Guten Morgen zusammen!

noch eine Frage zu dem Widget: heute wird bei uns die Restmüll-Tonne geleert, allerdings wird nicht "HEUTE" angezeigt, sondern der nächste Abholtermin in 14 Tagen. Ich meine gestern auf der Anzeige auch kein "Morgen" gesehen zu haben.

Die Anzahl der verbleibenden Tage funktioniert dagegen ohne Probleme

[skvarel]

Das liegt dann aber nicht an den Script. Ich hole damit nur die Daten aus dem Adapter-Datenpunkt:

Wenn es dort schon falsch drinsteht, kann ich das mit dem Script nicht beeinflussen.

Ich werde das aber beobachten. Bei mir ist die nächste Tonne in 2 Tagen dran. Das Widget müsste morgen also 'Morgen' anzeigen.