The slightly different GUI for Tasmota.

[wjohn007]

With Tasmota you can create a remarkable WEB UI despite limited resources.

Here is an example of collecting data from a PV inverter via Modbus.
The Single-Page-Application updates all values ​​dynamically and only executes the Status xy commands after loading.

Entry point

Then it starts

[ortegafernando]

Hello, how have you done this? Thanks

[s-hadinger]

Our primary concern with rich UI is flash size. Esp8266 is very limited in Flash size when you use 1MB flash, which are quite common

[wjohn007]

@s-hadinger , @ortegafernando

A rudimentary web server is implemented in berry based on a sugestion of @sfromis .

The web files (.css,.js,*.html) currently require less than 30 kB. The browser bears the main load.

My goal is to start the app via a Tasmota controller. This means that a standard web pad can be used for visualization, which not only satisfies the "admins" but also normal users.

The following example shows the type of data binding with the custom attribute “pdi” (process data ID), which is simply the end-node of a JSON structure provided by Tastmota via REST

<tr>
    <td>Version</td>
    <td> <span pdi="StatusFWR.Version">??</span> </td>
</tr>

{
	"StatusFWR": {
		"Version": "14.4.1(release-tasmota32)",      // <---
		"BuildDateTime": "2024-12-15T13:33:17",
		"Core": "3_1_0",
		"SDK": "5.3.2",
		"CpuFrequency": 160,
		"Hardware": "ESP32-D0WD-V3 v3.0",
		"CR": "433/699"
	}
}

[forumlw06]

@wjohn007 this looks really nice. Any chance that you share the whole code? Pretty new to berry and like to learn from examples ...
Are you accessing your inverter modbus data via berry?

Danke!

Rainer

[wjohn007]

@forumlw06

Are you accessing your inverter modbus data via berry?

ModbusSend is used to collect the data. Otherwise, everything else is made from berry.

The following is an example of the definition of a data channel

    dp = man.addDp(Area.IR)       # define a channel in the area of input-register
    dp.name     ="Input Power"    # name of the data channel
    dp.symbol   ="Ppv"            # short name e.g. for sensor-msg
    dp.unit     ="W"              # unit description
    dp.index    = 1               # register no
    dp.dataType = DataType.int32  # data type, 2 registers have to be read for this
    dp.mult = 0.1                 # scaling factor
    dp.publish = true             # should be published via mqtt

[wjohn007]

With the integration of Petite Vue templates can also be used and almost every aspect of HTML can be made dynamic.

The content is comprehensively reactive.

Data binding is done according to Vue rules.

    <tr>
        <td>Version</td>
        <td style="text-align: center;" colspan="2">{{store.StatusFWR.Version}} </td>
        <td></td>
    </tr>

The site is served by Tasmota.
Integration via IFrame works just as well.

The files used are very small and hardly put a strain on Flash resources