commit f29e50af4169e14f4f18daca765f02885d92f1eb Author: zhongjin Date: Fri Jun 29 05:19:22 2018 -0400 Initial commit diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..bdb0cab --- /dev/null +++ b/.gitattributes @@ -0,0 +1,17 @@ +# Auto detect text files and perform LF normalization +* text=auto + +# Custom for Visual Studio +*.cs diff=csharp + +# Standard to msysgit +*.doc diff=astextplain +*.DOC diff=astextplain +*.docx diff=astextplain +*.DOCX diff=astextplain +*.dot diff=astextplain +*.DOT diff=astextplain +*.pdf diff=astextplain +*.PDF diff=astextplain +*.rtf diff=astextplain +*.RTF diff=astextplain diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6bc41d8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,49 @@ +_ignore/*.* + +# Windows image file caches +Thumbs.db +ehthumbs.db + +# Folder config file +Desktop.ini + +# Recycle Bin used on file shares +$RECYCLE.BIN/ + +# Windows Installer files +*.cab +*.msi +*.msm +*.msp + +# Windows shortcuts +*.lnk + +# ========================= +# Operating System Files +# ========================= + +# OSX +# ========================= + +.DS_Store +.AppleDouble +.LSOverride + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk diff --git a/_ignore/images/bar-92.png b/_ignore/images/bar-92.png new file mode 100644 index 0000000..2d813e4 Binary files /dev/null and b/_ignore/images/bar-92.png differ diff --git a/_ignore/images/bar.png b/_ignore/images/bar.png new file mode 100644 index 0000000..5c91c59 Binary files /dev/null and b/_ignore/images/bar.png differ diff --git a/_ignore/images/bar_19.png b/_ignore/images/bar_19.png new file mode 100644 index 0000000..2a56850 Binary files /dev/null and b/_ignore/images/bar_19.png differ diff --git a/_ignore/images/bar_61.png b/_ignore/images/bar_61.png new file mode 100644 index 0000000..a756c8d Binary files /dev/null and b/_ignore/images/bar_61.png differ diff --git a/_ignore/images/bar_md.png b/_ignore/images/bar_md.png new file mode 100644 index 0000000..f416896 Binary files /dev/null and b/_ignore/images/bar_md.png differ diff --git a/_ignore/images/barbackground.png b/_ignore/images/barbackground.png new file mode 100644 index 0000000..9a28397 Binary files /dev/null and b/_ignore/images/barbackground.png differ diff --git a/_ignore/images/barcolor.png b/_ignore/images/barcolor.png new file mode 100644 index 0000000..ba41934 Binary files /dev/null and b/_ignore/images/barcolor.png differ diff --git a/_ignore/images/blink.png b/_ignore/images/blink.png new file mode 100644 index 0000000..ea0aa62 Binary files /dev/null and b/_ignore/images/blink.png differ diff --git a/_ignore/images/grid_0360_02.png b/_ignore/images/grid_0360_02.png new file mode 100644 index 0000000..8a5a550 Binary files /dev/null and b/_ignore/images/grid_0360_02.png differ diff --git a/_ignore/images/grid_0640_04.png b/_ignore/images/grid_0640_04.png new file mode 100644 index 0000000..3b4157e Binary files /dev/null and b/_ignore/images/grid_0640_04.png differ diff --git a/_ignore/images/grid_0960_06.png b/_ignore/images/grid_0960_06.png new file mode 100644 index 0000000..a18d8fd Binary files /dev/null and b/_ignore/images/grid_0960_06.png differ diff --git a/_ignore/images/grid_1280_08.png b/_ignore/images/grid_1280_08.png new file mode 100644 index 0000000..1a697e9 Binary files /dev/null and b/_ignore/images/grid_1280_08.png differ diff --git a/_ignore/images/states_0.png b/_ignore/images/states_0.png new file mode 100644 index 0000000..b0fb050 Binary files /dev/null and b/_ignore/images/states_0.png differ diff --git a/_ignore/images/states_1.png b/_ignore/images/states_1.png new file mode 100644 index 0000000..d34f497 Binary files /dev/null and b/_ignore/images/states_1.png differ diff --git a/_ignore/images/states_2.png b/_ignore/images/states_2.png new file mode 100644 index 0000000..731b754 Binary files /dev/null and b/_ignore/images/states_2.png differ diff --git a/_ignore/images/vis0-15-5 md.png b/_ignore/images/vis0-15-5 md.png new file mode 100644 index 0000000..a5d7448 Binary files /dev/null and b/_ignore/images/vis0-15-5 md.png differ diff --git a/changelog.MD b/changelog.MD new file mode 100644 index 0000000..4d24efb --- /dev/null +++ b/changelog.MD @@ -0,0 +1,44 @@ +2018-01-10 V1.8 +CSS: +mdui-state: Anzeige von Textstati mit Vorder-/Hintergrundfarbe (basic ValueList HTML) +dui-cols-X: Grid-System (152px) für responsive design, maximal 10 Spalten a 152 Pixel, + Umbruch nach Screenbreite:ab 360px=2cols 480px=3cols 640px=4cols 960px=6cols 1280px=8cols 1560px=10cols + mdui-tile bekommen dabei automatisch 4px margin +mdui-raisedbutton, mdui-flatbutton Texte werden nun horz/vert zentriert +der active-State der Buttons in tnav/bnav wird nun mit box-shadow statt border gezeichnet +Script: nix +ioBroker Projekte: MD_Demo, MD-Simple umgestellt auf 52er Raster +Anleitung: Ergänzt um mdui-state, mdui-cols-X + +2018-01-05 V1.7 +CSS: mdui-(color)-glow für red, yellow, blue und green hinzugefügt +Script: Korrektur mdui-lnav/rnav. Funktionierte mit mdui-toggle nicht korrekt +Anleitung: Ergänzt um mdui-(color)-glow + +2017-10-11 V1.5 +CSS: mdui-table Klassen +Script: Tabellenbehandlung +ioBroker Projekte: MD_Demo, MD-Simple ergänzt um Tabellenbeispiel +Anleitung: Ergänzt um Tabellenbeschreibung, optisch überarbeitet + +2017-10-02 V1.4 +CSS: FLOT-Diagramme, mdui-table (noch in Entwicklung) +Script: Zeitspanne für FLOT-Diagramme setzen +ioBroker Projekte: MD_Demo, MD-Simple ergänzt um "FLOT-Diagramme" +Anleitung: Ergänzt um "FLOT-Diagramme" + +2017-09-24 V1.3 +CSS: "Slider transparent" hinzu +ioBroker Projekte: MD_Demo, MD-Simple ergänzt um "Silder transparent" +Anleitung: Ergänzt um "Select" und "Silder transparent" + +2017-09-20 V1.2 +CSS: "Select" hinzu +ioBroker Projekte: MD_Demo, MD-Simple ergänzt um "Select" + +2017-09-17 V1.1 +Sidebar Menüs hinzu +MD_Demo aktualisiert + +2017-08-20 V0.1 +First Upload diff --git a/docs/Anleitung_layout.odg b/docs/Anleitung_layout.odg new file mode 100644 index 0000000..b2445a4 Binary files /dev/null and b/docs/Anleitung_layout.odg differ diff --git a/docs/Anleitung_layout.png b/docs/Anleitung_layout.png new file mode 100644 index 0000000..ace6c44 Binary files /dev/null and b/docs/Anleitung_layout.png differ diff --git a/docs/Elbphilharmonie.jpg b/docs/Elbphilharmonie.jpg new file mode 100644 index 0000000..ac1634a Binary files /dev/null and b/docs/Elbphilharmonie.jpg differ diff --git a/docs/Elbphilharmonie_saal.jpg b/docs/Elbphilharmonie_saal.jpg new file mode 100644 index 0000000..a1936a3 Binary files /dev/null and b/docs/Elbphilharmonie_saal.jpg differ diff --git a/docs/MD_1280_0720x1280_Demo_Inputs.png b/docs/MD_1280_0720x1280_Demo_Inputs.png new file mode 100644 index 0000000..93fee8a Binary files /dev/null and b/docs/MD_1280_0720x1280_Demo_Inputs.png differ diff --git a/docs/MD_1280_0720x1280_WZ.png b/docs/MD_1280_0720x1280_WZ.png new file mode 100644 index 0000000..896efc1 Binary files /dev/null and b/docs/MD_1280_0720x1280_WZ.png differ diff --git a/docs/MD_1280_1280x0720_Demo_Cards.png b/docs/MD_1280_1280x0720_Demo_Cards.png new file mode 100644 index 0000000..01c6232 Binary files /dev/null and b/docs/MD_1280_1280x0720_Demo_Cards.png differ diff --git a/docs/MD_1280_1280x0720_Demo_Inputs.png b/docs/MD_1280_1280x0720_Demo_Inputs.png new file mode 100644 index 0000000..82449f6 Binary files /dev/null and b/docs/MD_1280_1280x0720_Demo_Inputs.png differ diff --git a/docs/MD_1280_1280x0720_Demo_Labels.png b/docs/MD_1280_1280x0720_Demo_Labels.png new file mode 100644 index 0000000..a305bed Binary files /dev/null and b/docs/MD_1280_1280x0720_Demo_Labels.png differ diff --git a/docs/MD_1280_1280x0720_Main.png b/docs/MD_1280_1280x0720_Main.png new file mode 100644 index 0000000..8310d0c Binary files /dev/null and b/docs/MD_1280_1280x0720_Main.png differ diff --git a/docs/MD_1280_1280x0720_WZ.png b/docs/MD_1280_1280x0720_WZ.png new file mode 100644 index 0000000..04051b7 Binary files /dev/null and b/docs/MD_1280_1280x0720_WZ.png differ diff --git a/docs/MaterialDesign4ioBroker.mp4 b/docs/MaterialDesign4ioBroker.mp4 new file mode 100644 index 0000000..62912d8 Binary files /dev/null and b/docs/MaterialDesign4ioBroker.mp4 differ diff --git a/docs/anleitung.odt b/docs/anleitung.odt new file mode 100644 index 0000000..1ffdf5e Binary files /dev/null and b/docs/anleitung.odt differ diff --git a/docs/anleitung.pdf b/docs/anleitung.pdf new file mode 100644 index 0000000..1340ee9 Binary files /dev/null and b/docs/anleitung.pdf differ diff --git a/docs/mdui-uebersicht.png b/docs/mdui-uebersicht.png new file mode 100644 index 0000000..d7715db Binary files /dev/null and b/docs/mdui-uebersicht.png differ diff --git a/ioBroker projects/MD_Demo.zip b/ioBroker projects/MD_Demo.zip new file mode 100644 index 0000000..07c5dd8 Binary files /dev/null and b/ioBroker projects/MD_Demo.zip differ diff --git a/ioBroker projects/MD_Simple.zip b/ioBroker projects/MD_Simple.zip new file mode 100644 index 0000000..23f35b0 Binary files /dev/null and b/ioBroker projects/MD_Simple.zip differ diff --git a/license.md b/license.md new file mode 100644 index 0000000..d7078c9 --- /dev/null +++ b/license.md @@ -0,0 +1,20 @@ +### The MIT License (MIT) + +Copyright (c) 2017ff Uhula + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + + +### Deutsche Übersetzung + +Copyright (c) 2017ff Uhula + +Hiermit wird unentgeltlich jeder Person, die eine Kopie der Software und der zugehörigen Dokumentationen (die "Software") erhält, die Erlaubnis erteilt, sie uneingeschränkt zu nutzen, inklusive und ohne Ausnahme mit dem Recht, sie zu verwenden, zu kopieren, zu verändern, zusammenzufügen, zu veröffentlichen, zu verbreiten, zu unterlizenzieren und/oder zu verkaufen, und Personen, denen diese Software überlassen wird, diese Rechte zu verschaffen, unter den folgenden Bedingungen: + +Der obige Urheberrechtsvermerk und dieser Erlaubnisvermerk sind in allen Kopien oder Teilkopien der Software beizulegen. + +DIE SOFTWARE WIRD OHNE JEDE AUSDRÜCKLICHE ODER IMPLIZIERTE GARANTIE BEREITGESTELLT, EINSCHLIEẞLICH DER GARANTIE ZUR BENUTZUNG FÜR DEN VORGESEHENEN ODER EINEM BESTIMMTEN ZWECK SOWIE JEGLICHER RECHTSVERLETZUNG, JEDOCH NICHT DARAUF BESCHRÄNKT. IN KEINEM FALL SIND DIE AUTOREN ODER COPYRIGHTINHABER FÜR JEGLICHEN SCHADEN ODER SONSTIGE ANSPRÜCHE HAFTBAR ZU MACHEN, OB INFOLGE DER ERFÜLLUNG EINES VERTRAGES, EINES DELIKTES ODER ANDERS IM ZUSAMMENHANG MIT DER SOFTWARE ODER SONSTIGER VERWENDUNG DER SOFTWARE ENTSTANDEN. diff --git a/readme.MD b/readme.MD new file mode 100644 index 0000000..58dceca --- /dev/null +++ b/readme.MD @@ -0,0 +1,61 @@ +### CSS Skin für ioBroker im Material Design Stil + +**Inhaltsverzeichnis** + +1. [Funktionsumfang](#1-funktionsumfang) +2. [Systemanforderungen](#2-systemanforderungen) +3. [Installation](#3-installation) +4. [Anleitung](#4-anleitung) +5. [Changelog](#5-changelog) +6. [Sonstiges](#6-sonstiges) + + +![Beispiel 1280x0720 Main](docs/MD_1280_1280x0720_Main.png?raw=true "Beispiel 1280x0720 Main") + + +### 1. Funktionsumfang +In ioBroker.vis gestaltete Views können mit diesen CCS Anweisungen so dargestellt werden, dass sie ähnlich dem Look & Feel des Material Design Styles von Google funktionieren. Dazu gehören: +* Application bar +* Top-Navigation (Tabs), Bottom-Navigation, Left- und Right-Navigation (Sidepanels) +* Cards und Tiles +* Responsive Design (Grid, 13er/52er/156er Raster) +* Tables, inputs, labels, states ... + +Siehe auch Video: [Demo-Film](docs/MaterialDesign4ioBroker.mp4) (zum Ansehen herunterladen) + + +Beispiele: 1280 x 0720 +* [Beispiel 1280x0720 Main](docs/MD_1280_1280x0720_Main.png?raw=true "Beispiel 1280x0720 Main") +* [Beispiel 1280x0720 Wohnzimmer](docs/MD_1280_1280x0720_WZ.png?raw=true "Beispiel 1280x0720 Wohnzimmer") +* [Beispiel 1280x0720 Demo Cards](docs/MD_1280_1280x0720_Demo_Cards.png?raw=true "Beispiel 1280x0720 Demo Cards") +* [Beispiel 1280x0720 Demo Labels](docs/MD_1280_1280x0720_Demo_Labels.png?raw=true "Beispiel 1280x0720 Demo Labels") +* [Beispiel 1280x0720 Demo Inputs](docs/MD_1280_1280x0720_Demo_Inputs.png?raw=true "Beispiel 1280x0720 Demo Inputs") + +Beispiele: 0720 x 1280 +* [Beispiel 0720x1280 Wohnzimmer](docs/MD_1280_0720x1280_WZ.png?raw=true "Beispiel 0720x1280 Wohnzimmer") +* [Beispiel 0720x1280 Demo Inputs](docs/MD_1280_0720x1280_Demo_Inputs.png?raw=true "Beispiel 0720x1280 Demo Inputs") + + +### 2. Systemanforderungen +* ioBroker.vis + + +### 3. Installation +Keine. Die CSS Anweisungen müssen lediglich in einem ioBroker.vis Projekt unter "CSS / Projekt" eingefügt werden, die paar Zeilen Script unter "Skript". Beides am besten aus dem [Demo-Projekt]("ioBroker projects/MD_Demo.zip") entnehmen. + + +### 4. Anleitung + +Siehe Dokument [Anleitung](docs/anleitung.pdf) + +Beispiel-Projekte befinden sich im Ordner "ioBroker projects", einmal ein [Demo-Projekt]("ioBroker projects/MD_Demo.zip"), welches den Umfang zeigt und einmal ein [Simple-Projekt]("ioBroker projects/MD_Simple.zip"), welches als Basis für eigene vis-Projekte verwendet werden kann. Beide Projekte (ZIP-Dateien) lassen sich in ioBroker.vis importieren. + +### 5. Changelog +V1.8 10.01.2018 +Siehe [ChangeLog](./changelog.md). + + +### 6. Sonstiges + + +:copyright:2017ff Uhula, see [MIT license](./license.md). diff --git a/video/bargraph.gif b/video/bargraph.gif new file mode 100644 index 0000000..6b7a3e5 Binary files /dev/null and b/video/bargraph.gif differ diff --git a/video/bargraph.mp4 b/video/bargraph.mp4 new file mode 100644 index 0000000..2cb645c Binary files /dev/null and b/video/bargraph.mp4 differ diff --git a/video/flash.gif b/video/flash.gif new file mode 100644 index 0000000..c30b39a Binary files /dev/null and b/video/flash.gif differ diff --git a/video/flash.mp4 b/video/flash.mp4 new file mode 100644 index 0000000..9215085 Binary files /dev/null and b/video/flash.mp4 differ diff --git a/video/flot_timespan.gif b/video/flot_timespan.gif new file mode 100644 index 0000000..7d2087e Binary files /dev/null and b/video/flot_timespan.gif differ diff --git a/video/flot_timespan.mp4 b/video/flot_timespan.mp4 new file mode 100644 index 0000000..7de66ce Binary files /dev/null and b/video/flot_timespan.mp4 differ diff --git a/video/image_scale.gif b/video/image_scale.gif new file mode 100644 index 0000000..7629189 Binary files /dev/null and b/video/image_scale.gif differ diff --git a/video/image_scale.mp4 b/video/image_scale.mp4 new file mode 100644 index 0000000..3bdafbb Binary files /dev/null and b/video/image_scale.mp4 differ diff --git a/video/sidebar_menu.gif b/video/sidebar_menu.gif new file mode 100644 index 0000000..cd6c105 Binary files /dev/null and b/video/sidebar_menu.gif differ diff --git a/video/sidebar_menu.mp4 b/video/sidebar_menu.mp4 new file mode 100644 index 0000000..20cd345 Binary files /dev/null and b/video/sidebar_menu.mp4 differ diff --git a/video/tabelle.gif b/video/tabelle.gif new file mode 100644 index 0000000..3a6e507 Binary files /dev/null and b/video/tabelle.gif differ diff --git a/video/tabelle.mp4 b/video/tabelle.mp4 new file mode 100644 index 0000000..9a3021f Binary files /dev/null and b/video/tabelle.mp4 differ