Energiefluss - erweitert *Configuration*

Alias	Value	Actions
There are currently no shortcuts added!

Loading your Energiefluss Workspace

Object Browser

Filter

Loading Object Browser ...

Code Editor

Tour

Element

Size

Width

Height

Tipp: Square Icons need same width and height! Other ones can have other formats.

Rounded Corner

Radius

Stroke width

Position

Position X-Axis

Position Y-Axis

Organize

The lower the number, the further the element is in the foreground

Alignment

This will change, if you rotate the element

Rotation

Note: Rotating a switch is not supported in Safari/Apple!

Alignment

Horizontal/Vertical flip

Rotation

Color

Outline Color Animation Color Color of the knob

Line Color

Color of the knob (Active)

Fill color

Fill color (Active)

Text/icon color

Text/icon color (Active)

Design

Icon

Icon (Active)

Shadow

Shadow color

SVG Settings

ViewBox

SVG Content

Foreign Object Settings

ForeignObject content

Image Settings

Address:

preserveAspectRatio:

Icon

Enter a keyword to search other icons
For better view of available icons, visit: https://icon-sets.iconify.design/

Text

Font family

Font-Size

Text Options

Use as Clock/Date

Use 12h format

Year

Month

Day

Hour

Minute

Second

Day

Actions for the data source can be configured in the 'Advanced' tab

Datasource

Source

Info: Toggling the switch will wait for the current state to be confirmed. A slight delay may occur before the switch updates its status.

Datasource for control

Actions for the data source can be configured in the 'Advanced' tab

Options for Datasource

Show Timestamp of last update

Show Timestamp of last change

Please select only one, as the first enabled one will be selected!

Display source as

Linebreak after x Charaters

Unit

Prepend Text

Append Text

Animate Value

Highlight value on change

Source for Animation

Animate when Source is

If the value has changed sign, animate in the other direction (reverse)

Show line only, when animation is active

Connection

Distance to the first curve (in percent)

Length of the curve radius (in pixel)

Start slot

End slot

Click the button to reconnect the line

Actions

Calculation

Convert value to positive

Calculation

The unit will be set automatically, if its not set inside the 'Basic'-Tab!

Threshold (raw value)

Decimal places

Reduce this value by

Add this to the value

If used, the subtraction or addition states are available under energiefluss-erweitert.Instance-No#.calculation.elements.element_[#ID].

Animation Depency

Type

Min Duration on the line

Max dots on the line

Max power on the line (raw value)

Browser Frame

Address:

Open in

Use user defined Settings

Width

Height

Width and height support values in percent or pixels. Please add the desired unit.

You use click options for this element. Therefore, the Browser-Frame options are not useable!

Actions Options

Clickoptions

Type

Display freeform text field

By clicking on “Preview” the selected action is executed directly on the data source!

Fill Element according to value

Type

Direction

The direction starts at 0° (3 o'clock) on the right side and rotates clockwise

Fill color

If you use a gradient with an angle, it will be replaced with the one specified above.

Max expected power (raw value in watts)

Necessary for calculation

Fill Outline according to value

Type

Starting point

Direction

Line Style

Unfilled area color

Max expected power (raw value in watts)

Necessary for calculation

If the value has changed sign, fill the other direction (reverse)

color for the other direction

CSS classes

General

Source over threshold (positive)

Source below threshold (positive)

Source over threshold (negative)

Source below threshold (negative)

How to use CSS

Override settings depending on value

Set override for the line

Set override for the animation

Choose an alignment and select a reference element

Click the button above to connect 2 elements

Edit (multiple selection) (Ctrl + M)

Datasources

Datasource

Alias

Factor of the source

Available Datasources

Alias	Datasource	Factor	Action
There are currently no Datasources added!

Animation

Power-saving mode for animations

Line-Size

Amount of dots

Distance

Distance between the dot blocks

Length

Width

Duration of the animation (in ms)

Animation Type

Animation Ends

Power-saving mode for animations

Duration of the animation for low Performance (in ms)

Frames per second (Default: 30)

Note:To use the Power-saving mode, activate it inside 'settings'-tab!

Preview

Here you only set the Animation properties.
All colors will be defined for each element!

Remaining battery runtime

Status: Not active (Configuration missing)

Battery capacity (watt) *

Discharge till % *

Battery percent *

Battery charge *

Battery discharge *

For the calculation to work, the marked fields with a star are necessary

Info: After filling in all necessary values, the remaining battery-time will appear in the Datapoint energiefluss.Instance-No#.battery_remaining, which can be added via Datasources
Please note: The time shows both directions - the time for charging, if it is charging and the time for discharging, if it is discharging

Additional Info: The adapter also provides 2 additional Datapoints, which can show, if the battery is charged via grid or solar. For this to work, you need to provide the production datapoint(s) in the upper area on the right side.

Consumption

Status: Not active (Configuration missing)

Production

Public grid feed-in

Consumption public grid *

Battery charge

Battery discharge

For the calculation to work, the marked fields with a star are necessary

Info: After filling in all necessary values, the remaining battery-time will appear in the Datapoint energiefluss.Instance-No#.calculation.consumption, which can be added via Datasources.

Upload

Status:

Please select file(s)!

▶ Open Error Log

File	Description

Gallery

Filter

There are currently no images inside the gallery! You can upload some using the upload function!

There are no results for the provided criteria!

Loading images gallery ...

Filter

There are currently no images inside the gallery! You can upload some using the upload function!

There are no results for the provided criteria!

Loading images gallery ...

▶ Upload

Status:

Please select file(s)!

▶ Open Error Log

File	Description

Settings

Configuration

Show Config Icon on Live-View

Enable context menu on Live-View

Show last Source in Object Browser, if current source is empty

Enable autocomplete inside data sources

Show coordinates of the element while moving

Make configuration bar transparent when changing settings

Live-View

Use less power mode for animations

Line animation during startup and while showing and hiding them

Icon-Proxy

Use Icon-Proxy for all request

Basic Settings

Text

Font Family

Font Size

Outline Color

Fill color

Alignment

Rectangle

Height

Width

Rounded Corner

Circle

Radius

Rectangle / Circle

Stroke width

Outline-Color

Fill color

Icons

Height

Width

Outline-Color

Coordinates

Position X-Axis

These coordinates (+ random number between 0 and 50) will be used as a starting value when adding a new element.

Background

Background color

Value animation

Time in ms

Please note: For the changes to take effect, you need to save them!

Save

Password

Your workspace is password protected! Please enter the password, to save the configuration!

If you want to password protect your workspace, you can set a password inside the adapter settings of ioBroker!

Save your Workspace

Save your Workspace & Exit to LiveView

Exit to LiveView

Backup

Backup *

Support

If you like this adapter, please consider making a donation to support my work.

Output Output