Trash HTML Widget VIS2

[skvarel]

Kurze Anleitung:

Ich legen den Zieldatenpunkt NICHT im Script an. Den muss man VORHER anlegen und dann die Objekt ID im Blockly verlinken. Dieser Datenpunkt ist dann für das HTML-Widget.

'Datenpunkt: Ziel der Tabelle'

Als Quelle bitte den json Datenpunkt aus den Adapter-Objekten verwenden
'Datenpunkt: trash-Adapter JSON'

Mit den Größen muss man etwas experimentieren.
Wenn man mit der Breite runter geht, sollte man auch die Iconhöhe und die Titelhöhe anpassen

Hier lassen sich die Zeilen aus- und einblenden:
wahr = anzeigen ... falsch = ausblenden

Hier kann der Text (letzte Zeile) angepasst werden

Hier bitte genau die Namen eintragen, die im Trash-Adapter stehen

Die Icons werden hier definiert. Ein Umfärben ist zur Zeit (noch) nicht möglich. Ich arbeite hier mit unseren Ions mit fester Farbe pro Müllsorte

Selbsterklärend
Ich habe das Script so aufgebaut, dass bei jedem Speichern und Reload sowie bei einer Veränderung der Quelle, die Tabelle neu generiert wird. Das macht die Configuration einfacher und man hat die Änderungen der Einstellung direkt nach dem Speichern des Blockly.

[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.