Musik View

[lustig29]

Ich bin immer noch auf der Suche Anregung für einen schönen Musik View. Ich habe einen Denon Avr mit Heos, 2 Sonos Lautsprecher und mehrere Alexas im Betrieb. Diese würde ich gerne darüber steuern. Ich höre überwiegend Radio über TuneIn und nutze Spotify. Wäre cool, wenn der ein oder andere mir seine Visus als Anregung zeigen würde.

[jogibear9988]

So hats einer in WebUI gebaut:

[sigi234]

@lustig29
Welche Vis Version?

[jogibear9988]

@sigi234
nicht vis, webui

[lustig29]

@sigi234 Bei mir läuft noch die „alte“ Vis. Habe noch nicht auf Vis 2.0 umgestellt

[jogibear9988]

@lustig29
Wie gesagt, nicht vis oder vis2, sondern webui. Ist eine andere Visualisierung.
(https://forum.iobroker.net/topic/68819/neue-visualisierung-webui-alternative-zu-vis-vis-2)

[DJMarc75]

@jogibear9988 sagte in Musik View:

Wie gesagt, nicht vis oder vis2, sondern webui. Ist eine andere Visualisierung.

Dann zeig mal bitte eine optisch schöne Musik View mit den Anforderungen wie es @lustig29 im Startbeitrag erfragt hatte.

[sigi234]

@lustig29

Na dann mal eine VIS2 Version die ich gerade bearbeite:

[haselchen]

@lustig29

Noch mit VIS1

[Ro75]

@lustig29 auch VIS1

Ro75.

[lustig29]

@ro75 @haselchen Sehr cool, würdet ihr mir davon was zu Verfügung stellen?

[haselchen]

@lustig29

Das war noch nen Screenshot, den ich hatte.
Die View hat nur mit Amazon Music funktioniert.
Sprich, Du musstest Musik abonniert haben.
Da ich das nun anders löse, habe ich die View nicht mehr.
Sollte als Anregung dienen.

[lustig29]

@haselchen Ok, danke. Finde die Aufmachung echt gut. Verräts du mir welche Widgets du genutzt hattest?

[haselchen]

@lustig29

Puuuuh.
Das Cover in der Mitte kommt vom DP -> Player-> current Main Art

Die Buttons kamen aus dem Netz.
Ich benutze dann immer paint.net (Windows Programm) um nur das Objekt zu bekommen und den Hintergrund und andere Störfaktoren zu entfernen.
Die anderen DP wie Liednamen und Remaining Time kommen alle aus dem Player Ordner des Echos (current Artist, current title)

[MCU]

@sigi234 Wie steuerst du da die Sender?

Wenn du dort drauf klickst, werden dann auf allen Echo Geräten die Musik gespielt?
Oder wenn du einen Player startest, schaut er nach, welcher Sender der aktiv ist (grün)?

[sigi234]

@mcu sagte in Musik View:

@sigi234 Wie steuerst du da die Sender?

Wenn du dort drauf klickst, werden dann auf allen Echo Geräten die Musik gespielt?

Ja kann man machen mit der Objekt ID Alexa Überall.

Oder wenn du einen Player startest, schaut er nach, welcher Sender der aktiv ist (grün)?

Hallo, da bin ich noch am testen, aber grundsätzlich funktioniert es.
Sind die neuen Inventwo Widgets-Universal für VIS2.

[
  {
    "tpl": "tplInventwoWidgetUniversal",
    "data": {
      "bindings": [],
      "type": "button",
      "g_common": true,
      "mode": "singleButton",
      "direction": "row",
      "oid": "alexa2.0.Echo-Devices.XXXXXXXXXXXXXXX.Music-Provider.TuneIn",
      "httpType": "send",
      "buttonSize": 110,
      "btnSpacing": 10,
      "countStates": 1,
      "dialogWidth": 500,
      "g_vis_2_widgets_inventwo_attr_group_type_view_in_dialog": true,
      "dialogHeight": 300,
      "feedbackDuration": 0,
      "g_vis_2_widgets_inventwo_attr_group_click_feedback": true,
      "backgroundFeedback": "rgba(69, 86, 24, 1)",
      "outerShadowColorFeedback": " rgba(0, 0, 0, 1)",
      "contentBlinkInterval": 0,
      "g_vis_2_widgets_inventwo_attr_group_state_default": true,
      "outerShadowColor": " rgba(0, 0, 0, 1)",
      "colorPickerColorModel": "hex",
      "g_vis_2_widgets_inventwo_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_vis_2_widgets_inventwo_attr_group_css_text": true,
      "textMarginTop": 0,
      "textMarginBottom": 0,
      "textMarginLeft": 0,
      "textMarginRight": 0,
      "contentType": "icon",
      "g_vis_2_widgets_inventwo_attr_group_css_content": true,
      "contentMarginTop": 0,
      "contentMarginBottom": 0,
      "contentMarginLeft": 0,
      "contentMarginRight": 0,
      "contentSize": 40,
      "contentRotation": 0,
      "contentMirror": false,
      "flexDirection": "column",
      "g_vis_2_widgets_inventwo_attr_group_css_alignment": true,
      "alignItems": "center",
      "textAlign": "center",
      "contentAlign": "center",
      "backgroundOpacity": 1,
      "g_vis_2_widgets_inventwo_attr_group_css_transparency": true,
      "contentOpacity": 1,
      "paddingLeft": 0,
      "g_vis_2_widgets_inventwo_attr_group_css_spacing": true,
      "paddingRight": 0,
      "paddingTop": 0,
      "paddingBottom": 0,
      "borderRadiusTopLeft": 12,
      "g_vis_2_widgets_inventwo_attr_group_css_border_radius": true,
      "borderRadiusTopRight": 12,
      "borderRadiusBottomRight": 12,
      "borderRadiusBottomLeft": 12,
      "borderSizeTop": 0,
      "g_vis_2_widgets_inventwo_attr_group_css_border": true,
      "borderSizeBottom": 0,
      "borderSizeLeft": 0,
      "borderSizeRight": 0,
      "borderStyle": "none",
      "outerShadowX": 0,
      "g_vis_2_widgets_inventwo_attr_group_css_outer_shadow": true,
      "outerShadowY": 0,
      "outerShadowBlur": 0,
      "outerShadowSize": 0,
      "innerShadowX": 0,
      "g_vis_2_widgets_inventwo_attr_group_css_inner_shadow": true,
      "innerShadowY": 0,
      "innerShadowBlur": 2,
      "innerShadowSize": 3,
      "valueTrue": "Ö3",
      "text": "Ö3",
      "icon": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzYxcHgiCgkgaGVpZ2h0PSIzNjFweCIgdmlld0JveD0iMCAwIDM2MSAzNjEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDM2MSAzNjE7Ij4KPGc+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggc3R5bGU9ImZpbGw6Y3VycmVudENvbG9yOyIgZD0iTTEzOS4zMzMsMTE5LjY2N2MwLDQzLDAsODYsMCwxMjljMCw2LjQ0OCwxMCw2LjQ0OCwxMCwwYzAtNDMsMC04NiwwLTEyOQoJCQkJQzE0OS4zMzMsMTEzLjIxOCwxMzkuMzMzLDExMy4yMTgsMTM5LjMzMywxMTkuNjY3TDEzOS4zMzMsMTE5LjY2N3oiLz4KCQk8L2c+Cgk8L2c+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggc3R5bGU9ImZpbGw6Y3VycmVudENvbG9yOyIgZD0iTTI1NS4zMzMsMTA3LjY2N2MwLDM4LjMzMywwLDc2LjY2NywwLDExNWMwLDYuNDQ4LDEwLDYuNDQ4LDEwLDBjMC0zOC4zMzMsMC03Ni42NjcsMC0xMTUKCQkJCUMyNjUuMzMzLDEwMS4yMTgsMjU1LjMzMywxMDEuMjE4LDI1NS4zMzMsMTA3LjY2N0wyNTUuMzMzLDEwNy42Njd6Ii8+CgkJPC9nPgoJPC9nPgoJPHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6Y3VycmVudENvbG9yO3N0cm9rZS13aWR0aDoxMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIGQ9Ik0yNjAuMzI4LDEwNS4wNjMKCQljMC42OTcsMy4wODctMS4yMzksNi4xNTgtNC4zMjcsNi44NThsLTEwMi4wNjIsMjMuMDljLTMuMDg4LDAuNjk3LTYuMTU4LTEuMjQtNi44NTctNC4zMjlsLTIuNzQxLTEyLjExNwoJCWMtMC42OTgtMy4wODgsMS4yMzktNi4xNTgsNC4zMjctNi44NTdsMTAyLjA2MS0yMy4wOWMzLjA4OC0wLjY5OCw2LjE2LDEuMjM5LDYuODU4LDQuMzI3TDI2MC4zMjgsMTA1LjA2M3oiLz4KCQoJCTxlbGxpcHNlIHRyYW5zZm9ybT0ibWF0cml4KDAuOTYzOCAtMC4yNjY3IDAuMjY2NyAwLjk2MzggLTYyLjg3MTkgNDEuMzI5MSkiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6MTA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7IiBjeD0iMTIwLjczOSIgY3k9IjI1Mi4xNjEiIHJ4PSIyMy40ODYiIHJ5PSIxNS40OTIiLz4KCQoJCTxlbGxpcHNlIHRyYW5zZm9ybT0ibWF0cml4KDAuOTYzOCAtMC4yNjY3IDAuMjY2NyAwLjk2MzggLTUyLjc2ODYgNzEuNzMzOSkiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6MTA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7IiBjeD0iMjM3LjczOSIgY3k9IjIzMC4xNjEiIHJ4PSIyMy40ODYiIHJ5PSIxNS40OTIiLz4KPC9nPgo8L3N2Zz4K",
      "undefined1": null,
      "compareBy1": "value",
      "oid1": "alexa2.0.Echo-Devices.XXXXXXXXXXXXX.Music-Provider.TuneIn",
      "comparisonOperator1": "===",
      "value1": "Ö3",
      "view1": null,
      "text1": "Ö3",
      "textTrue1": null,
      "icon1": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzYxcHgiCgkgaGVpZ2h0PSIzNjFweCIgdmlld0JveD0iMCAwIDM2MSAzNjEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDM2MSAzNjE7Ij4KPGc+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggc3R5bGU9ImZpbGw6Y3VycmVudENvbG9yOyIgZD0iTTEzOS4zMzMsMTE5LjY2N2MwLDQzLDAsODYsMCwxMjljMCw2LjQ0OCwxMCw2LjQ0OCwxMCwwYzAtNDMsMC04NiwwLTEyOQoJCQkJQzE0OS4zMzMsMTEzLjIxOCwxMzkuMzMzLDExMy4yMTgsMTM5LjMzMywxMTkuNjY3TDEzOS4zMzMsMTE5LjY2N3oiLz4KCQk8L2c+Cgk8L2c+Cgk8Zz4KCQk8Zz4KCQkJPHBhdGggc3R5bGU9ImZpbGw6Y3VycmVudENvbG9yOyIgZD0iTTI1NS4zMzMsMTA3LjY2N2MwLDM4LjMzMywwLDc2LjY2NywwLDExNWMwLDYuNDQ4LDEwLDYuNDQ4LDEwLDBjMC0zOC4zMzMsMC03Ni42NjcsMC0xMTUKCQkJCUMyNjUuMzMzLDEwMS4yMTgsMjU1LjMzMywxMDEuMjE4LDI1NS4zMzMsMTA3LjY2N0wyNTUuMzMzLDEwNy42Njd6Ii8+CgkJPC9nPgoJPC9nPgoJPHBhdGggc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6Y3VycmVudENvbG9yO3N0cm9rZS13aWR0aDoxMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDsiIGQ9Ik0yNjAuMzI4LDEwNS4wNjMKCQljMC42OTcsMy4wODctMS4yMzksNi4xNTgtNC4zMjcsNi44NThsLTEwMi4wNjIsMjMuMDljLTMuMDg4LDAuNjk3LTYuMTU4LTEuMjQtNi44NTctNC4zMjlsLTIuNzQxLTEyLjExNwoJCWMtMC42OTgtMy4wODgsMS4yMzktNi4xNTgsNC4zMjctNi44NTdsMTAyLjA2MS0yMy4wOWMzLjA4OC0wLjY5OCw2LjE2LDEuMjM5LDYuODU4LDQuMzI3TDI2MC4zMjgsMTA1LjA2M3oiLz4KCQoJCTxlbGxpcHNlIHRyYW5zZm9ybT0ibWF0cml4KDAuOTYzOCAtMC4yNjY3IDAuMjY2NyAwLjk2MzggLTYyLjg3MTkgNDEuMzI5MSkiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6MTA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7IiBjeD0iMTIwLjczOSIgY3k9IjI1Mi4xNjEiIHJ4PSIyMy40ODYiIHJ5PSIxNS40OTIiLz4KCQoJCTxlbGxpcHNlIHRyYW5zZm9ybT0ibWF0cml4KDAuOTYzOCAtMC4yNjY3IDAuMjY2NyAwLjk2MzggLTUyLjc2ODYgNzEuNzMzOSkiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6MTA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7IiBjeD0iMjM3LjczOSIgY3k9IjIzMC4xNjEiIHJ4PSIyMy40ODYiIHJ5PSIxNS40OTIiLz4KPC9nPgo8L3N2Zz4K",
      "iconTrue1": null,
      "image1": null,
      "imageTrue1": null,
      "html1": null,
      "htmlTrue1": null,
      "viewInWidget1": null,
      "viewInWidgetTrue1": null,
      "contentBlinkInterval1": null,
      "contentColor1": "rgba(255,255,255,1)",
      "contentColorTrue1": null,
      "background1": "green",
      "backgroundTrue1": "rgba(69, 86, 24, 1)",
      "textColor1": "rgba(255,255,255,1)",
      "textColorTrue1": null,
      "borderColor1": null,
      "borderColorTrue1": null,
      "outerShadowColor1": " rgba(0, 0, 0, 1)",
      "outerShadowColorTrue1": " rgba(0, 0, 0, 1)",
      "innerShadowColor1": null,
      "innerShadowColorTrue1": null,
      "g_countStates-1": true,
      "background": "rgba(2,55,96,1)",
      "contentColor": "rgba(255,255,255,1)",
      "textColor": "rgba(255,255,255,1)",
      "g_css_font_text": true
    },
    "style": {
      "bindings": [],
      "left": 436,
      "top": 761,
      "width": "75",
      "height": "75",
      "position": "absolute",
      "overflow": "visible",
      "z-index": 5,
      "font-size": "small"
    },
    "widgetSet": "vis-2-widgets-inventwo",
    "_id": "i000001"
  }
]

Edit:
Stoppe ich den Player bleibt die Farbe noch Grün. Sollte doch via bindings gehen?

[hubert9999]

@sigi234
Wie hast du das Cover gemacht?
Dass es auf einer Seite so durchsichtig wird?
Edit: ok habs gefunden. Gibt es schon fertig. Nur leider mit Fehler.

[hoschi2007]

@hubert9999 sagte in Musik View:

Edit: ok habs gefunden. Gibt es schon fertig. Nur leider mit Fehler.

und wo hast du es gefunden? Ist das eine Widget-Einstellung?

[hubert9999]

@hoschi2007 in den Material Widgets das Player Widget