Dastihcz 3.20.0

[epik77]

Hi everyone,
I wanted to report that in the new version 3.20.5
the timegraph type no longer works.

blocks[539] = {
type: 'timegraph',
values: ['Usage'],
duration: 60
}

the graph no longer shows the red bar

Otherwise, I find this version lighter and faster. Great work.
Thanks

[madpatrick]

Ok. Noted a i'll look in to it
Just push a new version 3.30.0 as PR with a lot of additions
Once accepted by the moderator it will be available

[madpatrick]

The problem can be traced back to the switch to Chart.js 4.
In timegraph.js, data points were still being stored in the old format:

Code: Select all

{
  t: timestamp,
  y: value
}

Chart.js 4 verwacht voor een tijdas standaard:

Code: Select all

{
  x: timestamp,
  y: value
}

Fix is posted in new PR v3.30.0 issue 74f8627
Just wait for release by mod or download it manually

[epik77]

I made the change manually and it works.
I'm waiting for the release.
Thank you so much

[madpatrick]

I've made v3.42.7 with a large number of new features, editor improvements, and fixes.
This has now been pushed as PR to the Dashticz repository and i hope i will be merged soon.

When you can wait you can always check via my git branch : https://github.com/MadPatrick/dashticz/

Code: Select all

I want to express that you need to make a [b]backup [/b]and then make another backup to be sure you will not break anything 
There have been a lot changed and added so please check it out and give me you feedback via GIT
Espacially the wizard function with widgetsand the theming options are new

I want to thank @renber78 for the help with testing and feedback on the development


Here's a rundown of the major changes on beta that master doesn't have:

# Dashticz – Consolidated Update & Change Summary

This update combines the recent Dashticz development work into a single overview. Duplicate commits, repeated fixes, follow-up patches, and overlapping descriptions have been merged where possible.

## Wizard, Screen & Layout Editors

The Wizard and visual editors received major improvements:

* Added visual Device, Widget and Layout editors.
* Added drag-and-drop grid screen editing with resize and remove controls.
* Added support for multiple dashboard screens and an editable Standby screen.
* Added screen switching directly from the topbar.
* Added per-screen block positioning and independent screen layouts.
* Added support for converting classic Wizard column layouts to grid layouts.
* Added support for dragging blocks into empty grid rows.
* Improved layout handling for short and dynamically sized blocks.
* Reduced the minimum grid block height to 2 rows.
* Added direct configuration buttons to blocks in the Screen Editor.
* Added a contextual Add menu for Devices, Widgets, Custom Devices, Multi Devices and Separators.
* Added protection against editor-controlled blocks overwriting blocks used on another screen.
* Preserved complex, nested and hand-written CONFIG.js options during editor saves.
* Fixed Standby edits accidentally affecting Screen 1.
* Fixed widgets/devices being linked between multiple grid screens.
* Fixed active-screen tracking when using swipe navigation or Slide buttons.
* Improved overlay stability while Domoticz devices refresh.
* Improved editor controls, alignment, sizing and responsive behaviour.

## Configuration & CONFIG.js

Configuration handling has been significantly improved:

* Editors now support alternate configuration files using `?cfg=CONFIGx.js`.
* The active configuration file is used when saving instead of always writing to `custom/CONFIG.js`.
* Added filename validation to prevent path traversal.
* Editor saves now preserve hand-written configuration.
* Generated configuration sections are grouped more cleanly.
* Duplicate editor-managed CONFIG.js entries are removed automatically.
* Added safer parsing for complex values and regular-expression literals.
* Added support for empty object values across the JavaScript/PHP configuration boundary.
* Removed obsolete `edit_mode` configuration.
* Improved Wizard/Custom mode detection.
* Added a first-run configuration flow using the `#EMPTY#` placeholder.
* Fixed update scripts creating invalid empty CONFIG.js files.
* Added safer Wizard reset handling when switching configuration mode.
* Added a graphical Custom/Wizard mode picker instead of two separate topbar buttons.

## Topbar & Navigation

* Added Standby and multi-screen controls to the topbar.
* Added optional per-screen custom icons.
* Added PNG icon support for editor and screen-switcher controls.
* Added configurable topbar timeout and hide behaviour.
* Improved automatic topbar hiding in Standby mode.
* Fixed topbar positioning, spacing and icon alignment.
* Fixed the topbar Mini Clock in Custom mode.
* Custom topbars now respect the configured block order.
* The Mini Clock remains transparent when shown in the topbar.
* Replaced the Custom/Wizard text buttons with a single mode icon and popup selector.

## Widget Editor

The Widget Editor has been expanded considerably:

* Added per-widget configuration dialogs.
* Moved widget-specific settings out of the general Settings page.
* Added title, icon and display controls.
* Added typed Custom Field/Setting rows with validation.
* Preserved legacy widget options during editing.
* Fixed widget title persistence.
* Fixed widgets being overwritten with translated default titles after reload.
* Added localized widget catalog titles.
* Added support for widget configuration from the Screen and Device Editors.

### New / Expanded Widgets

Added or expanded graphical configuration for:

* iFrame
* XMLTV TV Guide
* Radio / Streamplayer
* Domoticz Log
* OpenWeatherMap
* Sunrise / Sunset
* TimeGraph
* Garbage collection
* Calendar
* Air Quality (WAQI)
* Multiple clock widgets

## Radio Widget

* Added graphical station management.
* Stations can be added and removed through a dedicated list.
* Removed duplicate raw `tracks` configuration from Custom Fields.
* Added a default Radio icon.
* Improved compatibility with existing `_STREAMPLAYER_TRACKS` configurations.

## XMLTV TV Guide

* Added the XMLTV TV Guide widget.
* Added XMLTV configuration to the Widget Editor.
* Added global XMLTV URL storage.
* Fixed XMLTV URL persistence in grid mode.
* Fixed Device Editor save failures when XMLTV uses the global URL.
* Added support for private/local XMLTV guide URLs through the proxy.

## Weather & Air Quality

* Added Weather Underground support to simple blocks.
* Improved missing-weather-configuration messages.
* Expanded OpenWeather display defaults and icon choices.
* Added OWM configuration to the Widget Editor.
* Replaced the obsolete Longfonds/RIVM Air Quality provider with WAQI.
* WAQI now supports city and layout configuration.
* Improved WAQI scaling and resizing.
* Fixed WAQI iframe overflow and scrollbar issues.

## Calendar & Garbage Collection

### Calendar

* Added support for multiple named ICS calendar sources.
* Added per-calendar colours.
* Legacy calendar formats remain readable.
* Added configurable maximum displayed items.
* Improved agenda auto-height behaviour.

### Garbage Collection

* Added configurable `maxitems`.
* Added configurable `maxdays`.
* Localized collection names, dates and status messages.
* Updated RecycleApp compatibility.
* Improved Modern Dark alignment for garbage collection information.

## Clock Widgets

Basic Clock, Station Clock, Flip Clock and Hayman Clock received several fixes:

* Added default clock icons.
* Fixed Title / `hide_title` handling.
* Fixed oversized clock faces.
* Corrected sizing calculations to account for titles, margins and padding.
* Added grid-height caps to prevent scrollbars.
* Improved resizing behaviour.
* Added Hayman Clock styling for Modern Dark.
* Improved clock rendering inside small grid tiles.

## TimeGraph

* Added full TimeGraph configuration to the Widget Editor.
* Supports:

* Main IDX
* Duration
* Height
* Axis options
* Appearance settings
* Multiple values
* Per-value IDX and labels
* Added a default chart icon.
* Fixed the Screen Editor configuration button opening Device Config instead of TimeGraph Widget Config.
* Updated TimeGraph for Chart.js 4 compatibility.

## Domoticz Log

* Added the Domoticz Log widget to Widget Config.
* Added ascending/descending sorting.
* Fixed the sorting comparator.
* Added configurable maximum displayed lines.
* Enlarged and later refined the sort switch size.
* Added an 8×8 default grid size.
* Added independent Log configuration per screen.
* Fixed Log widgets failing on secondary screens.
* Fixed unwanted outer grid scrollbars.

## iFrame

* Added configurable aspect ratio and scaling.
* New iFrames can fill their complete grid tile without requiring a fixed height.
* Fixed iFrames collapsing to approximately 150px in grid mode.
* Fixed persistent grid scrollbars.
* Fixed title-bar overflow.
* Added a default icon.
* Fixed asymmetric margins when an icon is enabled.
* Fixed scaled content overflowing the right side.
* Grid mode no longer forces classic-mode widget heights.
* Heights that were previously configured can now be cleared properly.

## Camera

* Fixed classic camera height defaults being incorrectly forced onto grid layouts.
* Cameras without an explicitly configured height now fill their grid tile.
* Fixed multi-camera thumbnails becoming invisible on grid screens.
* Added proper layout handling for multiple camera wrappers.

## Dial Devices

* Added a Dial checkbox to Device Config.
* Supports normal devices, groups/scenes, Dummy devices and Custom devices.
* Dial-specific parameters remain configurable through Custom Fields.
* Added documentation for the `scale` parameter.
* Fixed oversized dial rendering.
* Improved dial face sizing and margins.
* Added live resizing using `ResizeObserver`.
* Dial sizing now uses the available width and height to prevent overflow.
* Fixed dial ring and needle scrollbar issues.
* Fixed Dial on multi-value Domoticz devices by resolving the base IDX.

## Device Editor

The Device Editor received a large workflow overhaul:

* Added Domoticz Groups and Scenes.
* Added Dummy devices.
* Added Separator / Title blocks.
* Added Custom Devices.
* Added Multi Devices.
* Added Slide buttons.
* Added editable width and display options.
* Added Title, Icon, Data and Updated checkboxes.
* Added Dial support.
* Added configurable Custom Fields.
* Added support for editing Main IDX on Custom and Multi Devices.
* Added a graphical value builder for Multi Devices.
* Multi Devices are now clearly identified separately from Custom Devices.
* Added default icons for Custom and Multi Devices.
* Added Icon support to Separator / Title blocks.
* Fixed incorrect config dialogs opening for Custom/Multi Devices.
* Fixed checkbox defaults and serialization.
* Fixed Device Editor saves accidentally restoring removed widget heights.

### Stable Device Keys

Editor-created devices now use stable IDX-based keys:

`device_<IDX>`

or:

`device_<IDX>_<subidx>`

This prevents Domoticz device renames from breaking CONFIG.js references.

Normal devices automatically follow their current Domoticz name, while groups and scenes retain explicit titles.

## Security Panel

* Added support for Domoticz devices with `Type: "Security"`.
* Fixed Security Panel tiles rendering empty.
* Fixed protected Security Panel rendering.
* Fixed automatic title handling.

## Themes & CSS

Theme support received a major overhaul:

* Added a dynamic Theme selector.
* Themes are discovered from valid theme directories.
* Added CSS variable-based theme configuration.
* Added graphical colour and font controls.
* Added safer CSS override parsing.
* Added support for resetting custom theme overrides.
* Automatically loads `customX.css` with `?cfg=CONFIGx.js`, with fallback to `custom.css`.
* Improved Modern Dark layout, sizing and widget styling.
* Added border radius for Weather Day and iFrame blocks.
* Improved miniclock styling.
* Improved title/state/value styling.
* Improved Device Editor and Widget Editor layout.
* Fixed numerous grid, spacing and overflow issues.

### New Liquid Glass Themes

Added:

* **Liquid Glass Grey**
* **Liquid Glass Blue**

Both are based on Modern Dark while retaining its block dimensions and spacing, but use translucent frosted-glass panels, background blur and a soft highlight effect.

## Internationalization

* Removed hardcoded UI strings throughout the editors and settings interface.
* Added language-backed strings for editor controls and widgets.
* English is now loaded first as the fallback language.
* Expanded French translations.
* Expanded Dutch translations.
* Localized widget catalog titles.
* Localized Garbage Collection output.
* Localized switch states.
* Updated screen/topbar configuration translations.
* Widget titles update correctly when changing language.

## Backgrounds & Visual Styling

* Added background selectors for dashboard screens.
* Added support for custom image directories.
* Hardened custom background handling.
* Custom backgrounds can be filtered using the `BG_` prefix.
* Added shared screen background handling.
* Fixed Standby background rendering.
* Added themed backgrounds for screen Mini Clocks.
* Improved title, state and value CSS.
* Added CSS variables for more consistent styling.

## Installer & Update Scripts

* `CONFIG.js` is created with `0644` permissions instead of executable permissions.
* Update scripts safely create missing custom directories.
* Added migrations for:

* `topbar_timeout`
* `hide_topbar`
* Fixed duplicated migration/config-check code.
* Missing CONFIG.js now uses the valid first-run `#EMPTY#` placeholder.
* Installer/update shell scripts are tracked as executable in Git.
* Renamed:

`tools/install-dashticz-write-access`

to:

`tools/install-dashticz-write-access.sh`

* Updated all corresponding references.

## Security & Validation

* Added filename validation for alternate CONFIG.js files.
* Added stronger server-side widget and block validation.
* Improved safe handling of configuration values.
* Excluded symlinks from theme discovery.
* Theme endpoint is restricted to same-origin GET requests.
* Hardened CSS variable parsing.
* Improved PHP-side validation for editor-generated data.
* Added and updated security regression tests.

## Cleanup & Maintenance

* Removed obsolete editor CSS and duplicated style sections.
* Removed the obsolete Longfonds component.
* Removed stale duplicate `tests/phpsecurity.test.js`.
* Fixed PHP 8 compatibility in the legacy iCalendar parser.
* Fixed stale security-test assertions.
* Removed duplicate configuration entries.
* Removed obsolete configuration options and translations.
* Cleaned up editor state and serialization logic.
* Updated README, documentation, changelogs and release notes throughout the development cycle.
* Updated screenshots and logo assets.
* Improved regression and Playwright browser coverage.

## Additional Fixes

Also included are fixes for:

* Widget save regressions after the IDX-key migration.
* Adding widgets and devices after editor migrations.
* Empty Wizard configuration startup.
* Standby layout editing.
* Grid screen migration.
* Screen deletion.
* Swiper page-change event handling.
* Widget colour handling on Standby.
* News, Sunrise/Sunset and device widget icons.
* Sunrise/Sunset grid resizing.
* Custom widget titles.
* Topbar icon placement.
* Layout Editor remove-button visibility.
* Device/widget field alignment.
* Google Maps widget rendering.
* Update button/update.php behaviour.
* Various CSS layout and responsive issues.

## Version Progression

---

A large part of this development cycle focused on making Dashticz configurable visually without sacrificing compatibility with existing hand-written CONFIG.js dashboards.

The result is a much more capable Wizard/Grid editor, stronger per-screen configuration, improved widget/device configuration, better responsive behaviour, expanded localization and significantly more robust configuration persistence.
-------------------

Since i'm not able to push a release to the Dashticz repo it is not yet available.


Please be aware that not all function are yet available in the WIZARD MODE.
If you have special blocks or modification, please stay in de CUSTOM MODE. Switch to the WIZARD MODE will break your current config.

The wizard mode is handy when you are a starter and don't want to manually edit the config.js or custom.css

[madpatrick]

Version 3.42.10 is available on the Dashticz beta branch
A lot of fixes and perfomance improvements

And more to come .....

[hyeronimo]

Wow, that is a lot of work madpatrick! thank you for these improvements. The wizard part looks very promising. As a long time config.js user I have just upgraded to 3.42.10, and I have noticed that all my graphs (except for the dials) have become half the original width. Is there a fix for that or has the grid been upgraded and do I have to update all my graph settings? And for those who have a special background, make a backup of that.

[madpatrick]

Hi.
Thanks !

Yes, the grid has been adjusted to a custom configurable setting (more control)
In de most recent version 3.45.5 (not yet pushed) you can setup your own grid settings via the menu

So far i know should the custom mode should not change anything in the layout, except when you go to the wizard mode
I mentioned therefor that you need make backups.

It is difficult implement new things and not break something
There has been a lot tested, but to test every configuration is not possible and therefor is all feedback very welcome
The easiest way is to make an issue on mu git (i can not admin the Dashticz git) : https://github.com/MadPatrick/dashticz
You can also find the latest version in beta of test branch

Don't forget to backup

[hyeronimo]

Ok Great, I will go for the 3.45.5. I did not do anything specific so I assume I am still in custom mode. I have a backup but I'd rather stay compatible with the latest versions. Keep up the good work! Oh and I would not mind re-arranging my graphs and blocks, but I would not want to lose the configured graphs from my config.js

[madpatrick]

Just let me know if you bump into something
And just try out the wizard mode even if it is just for fun (you can setup a 2nd directory for testing)

Don't forget to run /tools/install-dashticz-write-access.sh after a git clone

The test branch has the latest changes before i move it to my beta branch (and later to the Dashticz branch)