Monatsrückblick Januar/Februar 2026 ist online!

[maeuseking]

Moin!

Meine Frau gefällt die Übersicht aus der SunnyPortal App sowie der Website so sehr, dass ich dieses gerne irgendwie nachbauen möchte...

Ich habe dazu den entsprechenden Teil rauskopiert und auch die WebSite mal gespeichert (sodass die erforderlichen Icons zumindest zum Teil mit geladen werden...)

	<div class="batteryStatus-pv" data-feedin-pv="home-battery">
		<div class="batteryStatus-text">
			<span class="batteryStatus-label h3 header">PV-Erzeugung</span>
			<span class="batteryStatus-value h3 header">0.68</span>
			<span class="batteryStatus-unit h3 header">kW</span>
		</div>
	</div>
	<div class="batteryStatus-pv-feedIn">
		<img src="/Content/html-modules/images/batteryStatus/indicator-left-right.gif" class="batteryStatus-feedIn home" alt="">
		<img src="/Content/html-modules/images/batteryStatus/indicator-top-bottom.gif" class="batteryStatus-feedIn battery" alt="">
	</div>

	<div class="batteryStatus-consumption" data-feedin-home="">
		<div class="batteryStatus-text">
			<span class="batteryStatus-label h3 header">Gesamt- verbrauch</span>
			<span class="batteryStatus-value h3 header">0.58</span>
			<span class="batteryStatus-unit h3 header">kW</span>
		</div>
		<div class="batteryStatus-feedIn">
			<img src="/Content/html-modules/images/batteryStatus/indicator-border.png" class="border" alt="">
			<img src="/Content/html-modules/images/batteryStatus/indicator-left-right-rounded.gif" class="indicator" alt="">
		</div>
	</div>
	<div class="batteryStatus-consumption-level" data-consumption="true">
		<div class="batteryStatus-consumption-none"></div>
		<div class="batteryStatus-consumption-grid css3pie" style="height: 3px;"></div>
		<div class="batteryStatus-consumption-pv"></div>
		<div class="batteryStatus-consumption-battery css3pie" style="height: 0px;"></div>
	</div>

	<div class="batteryStatus-grid" data-grid="demand" data-offgrid="False">
		<div class="batteryStatus-text">
			<span class="batteryStatus-label h3 header">Netzbezug</span>
			<span class="batteryStatus-value h3 header">0.01</span>
			<span class="batteryStatus-unit h3 header">kW</span>
		</div>
	</div>
	<div class="batteryStatus-grid-feedIn">
		<img src="/Content/html-modules/images/batteryStatus/indicator-right-left.gif" class="batteryStatus-feedIn" alt="">
	</div>

	<div class="batteryStatus-battery" data-status="charge" data-percentage="80">
		<div class="batteryStatus-text battery-power">
			<span class="batteryStatus-label h3 header">Batterieladung</span>
			<span class="batteryStatus-value h3 header">0.11</span>
			<span class="batteryStatus-unit h3 header">kW</span>
		</div>
		<div class="batteryStatus-text battery-percentage">
			<span class="batteryStatus-label h3 header">Batterieladezustand</span>
			<span class="batteryStatus-value h3 header">68</span>
			<span class="batteryStatus-unit h3 header">%</span>
		</div>
		<div class="batteryStatus-percentage-icon"></div>
	</div>
    <div class="batteryStatus-battery-indicator">
        <img src="/Content/html-modules/images/batteryStatus/indicator-bottom-top.gif" class="batteryStatus-indicator" alt="">
    </div>

Hat hier jemand Erfahrung und kann mich in dem Nachbau unterstützen? Mir fehlt leider das wissen dafür... Die entsprechenden Daten müssen dann wohl aus modbus genommen werden?!

Ich kann mir gut vorstellen, dass diese Darstellung auch für andere Interessant sein dürfte?

[holgerwolf]

@maeuseking

Lies dich mal hier ein:

https://forum.iobroker.net/topic/1100/sma-wechselrichter/347

Gruß
Holger