Dash UI

Дополнение Dash UI (Читается Дэш-ЮАЙ) Система визуализации для умного дома с неограниченными возможностями. Вот примеры интерфейсов созданных с помощью DashUI: http://dashui.ccu.io Здесь можно найти видео, где показывается создание нескольких простых страниц: https://www.youtube.com/watch?v=SztQvWVttnM

Roadmap и Changelog можно найти на странице проекта в Github.

Быстрый старт

Считается, что работающая CCU.IO система уже установлена.
Скопировать папку "dashui" из этого архива https://github.com/ioBroker/DashUI/archive/master.zip в папку "ccu.io/www", где установлена CCU.IO.
Используя современный браузер (Chrome, Safari, Firefox), открыть ссылку http://ccu-io-server:8080/dashui/edit.html
Теперь можно начинать добавлять графические элементы и страницы. Вот пример, как можно отобразить температуру:
- Перейти на закладку "Элементы"
- Выбрать в пакетах элементов - basic и выбрать элемент "hm_val - Number"
- Нажать "Добавить". На странице появится прямоугольный графический элемент и в закладке "Элементы" появятся дополнительные поля для ввода (Свойства элемента)
- В поле "ID объекта" нужно выбрать или вбить ID температуры
- В поле html_append_singular и html_append_plural на писать "°C" без кавычек
- Элемент обновится автоматически

Eventlist

Используется для отображения событий записанных CCU.IO в виде таблицы.
Можно легко подключить в Dash UI и yahui.

Die Roadmap und das Changelog werden auf der Github Projektseite gepflegt.

Highcharts

Interaktive grafische Darstellung der CCU.IO Logs, basiert auf Highstock.
Kann komfortabel in DashUI und yahui eingebunden werden.

Die Roadmap und das Changelog werden auf der Github Projektseite gepflegt.

ScriptEditor

Ein Codemirror basierter Editor für CCU.IO Scripte

Github Projektseite

ScriptGUI

ScriptGUI (Script Graphic User Interface) ist eine grafische Programmierumgebung, die die Erzeugung von CCU.IO-Scripten ohne Programmierkenntnisse ermöglicht.

Dokumentation

Diverse Video-Tutorials sind über das Hilfemenu oder direkt im CCU.IO-Youtube-Kanal erreichbar.

Bausteine

Es gibt zwei Typen von Bausteinen: FBS (Funktionsbausteine) und MBS (Masterbausteine). MBS sind Bausteine wie Trigger, Programmboxen und Kommentare. Sie lassen sich direkt per Drag&Drop einfügen. FBS sind alle Bausteine, die zum Programmieren benutzt werden. Sie lassen sich nur in Programmboxen einfügen. Jede Programmbox ist ein eigenständigen Programm, ein direkter Datenaustausch ist nicht vorgesehen. Trigger führen eine oder Mehrere Programmbox aus. Wobei sie Daten an das Programm übergeben die über die Triggerdatenbausteine genutzt werden können.

Verzeichnisse und Dateien

Program Dateien werden unter ccu.io/www/ScriptGUI/prg_Store/ abgespeichert. Sie besitzen die Endung .prg und sind im json Format gespeichert

Die erzeugten Scripte werden unter ccu.io/scripts/ abgespeichert. Sie besitzen die Endung .js

Einstellungen

 

Technik

ScriptGUI ist eine auf HTML5, CSS3 und Javascript basierende Webanwendung.

Die Roadmap und das Changelog werden auf der Github Projektseite gepflegt.

SlimUI

ein sehr leichtgewichtiges Framework zur Erstellung von CCU.IO WebUIs. Gemacht für alte Browser und langsame Clients. "Vanilla" JavaScript, es werden keine Bibliotheken wie jQuery o.Ä. eingesetzt.

Weitere Informationen und Dokumentation sind auf der Github Projektseite zu finden.

yahui

yahui ist eine jQuery Mobile basierte Weboberfläche für CCU.IO und ist für die Bedienung auf Tablets und Smartphones optimiert. yahui erfordert keine aufwendige Einrichtung, einfach Installieren und benutzen.

Dokumentation

Die Roadmap und das Changelog werden auf der Github Projektseite gepflegt.

Voraussetzungen

yahui benötigt einen modernen Browser (Chrome/Chromium/Iron, Firefox oder Safari).

Favoriten

Es werden nur Favoriten angezeigt die dem Benutzer "admin" zugeordnet sind.

Systemvariablen nur Anzeigen

Systemvariablen können in yahui bearbeitet werden. Wie bei WebMatic können Systemvariablen über ein (r) in der Variablenbeschreibung auf nur-lesen gesetzt werden.

Einbinden eigener Bilder/Icons

Bilder/Icons können einfach via Drag&Drop hochgeladen werden. Dazu muss sich yahui im "Edit-Modus" befinden (im Info-Dialog - erreichbar über den i-Button oben rechts - kann der Edit-Modus aktiviert und deaktiviert werden). Es sind alle Arten von Bilddateien erlaubt, empfohlen wird jedoch ein quadratisches PNG mit 230x230 Pixel Größe und leichter Transparenz. Wenn bereits Bilder von WebMatic vorhanden sind können diese einfach in das Verzeichnis yahui/images/user/ kopiert werden.

Sortierung der Elemente

Sortieren ist im Edit-Modus ebenfalls via Drag&Drop möglich.

Umbenennen von Elementen

Im Edit-Modus einfach auf das Zahnrad rechts klicken

Ändern der Farben und des Layouts

in der Datei settings.js ist es möglich für die Kopfzeile, den Inhalt und das Menü unten getrennt aus 5 vorgeingestellten Farb-Schemata zu wählen. Wer den Look darüber hinaus customizen will kann sich mit dem jQuery Mobile Theme Roller ein Theme "zusammenklicken". In Zeile 25 der Datei index.html muss dann die URL der jqueryMobile CSS-Datei entsprechend auf die mit dem Theme-Roller erstellte Datei angepasst werden.

Eigene Style-Angaben zum Anpassen des Layouts können in der Datei yahui/css/user.css vorgenommen werden. In der Datei user-dist.css ist ein passendes Grundgerüst angelegt, diese einfach umbenennen und die Kommentarzeichen in index.html Zeile 32 entfernen.

Hinzufügen von Erweiterungen

Wenn man sich im Edit-Modus befindet kann über den Button "hinzufügen" oben links eine neue Erweiterung angelegt werden. Zum bearbeiten oder löschen von Erweiterungen einfach im Edit-Modus die Erweiterung anklicken.

Ausblenden bestimmter Datenpunkte

In der Datei settings.js können Datenpunkte angegeben werden die nicht angezeigt werden sollen.

Voranstellen eines "Prefix" vor den Seitentitel

In der settings.js besteht die Möglichkeit einen Prefix anzugeben der vor jeden Seitentitel gesetzt wird.