Skip to content

Commit

Permalink
Merge pull request #415 from peuter/fix/manual
Browse files Browse the repository at this point in the history
fix some doc-source errors, add xml-format content, disable scroll an…
  • Loading branch information
ChristianMayer committed Sep 10, 2016
2 parents 9fdbd48 + cd3ffbd commit 8cd6766
Show file tree
Hide file tree
Showing 7 changed files with 221 additions and 18 deletions.
12 changes: 10 additions & 2 deletions .doc/docutils/directives/widget_example.py
Expand Up @@ -99,7 +99,7 @@ class WidgetExampleDirective(Directive):
example_dir = path.join("cache", "widget_examples", "manual")
screenshot_dir = path.join("doc", "manual", "examples")
config_parts = {
"start": '<pages xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" lib_version="8" design="%%%DESIGN%%%" xsi:noNamespaceSchemaLocation="../visu_config.xsd">',
"start": '<pages xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" lib_version="8" design="%%%DESIGN%%%" xsi:noNamespaceSchemaLocation="../visu_config.xsd" scroll_speed="0">',
"meta": '<meta/>',
"content_start": '<page name="Example">',
"content_end": '</page>',
Expand Down Expand Up @@ -195,6 +195,11 @@ def run(self):
"name": screenshot.get("name", name + str(shot_index)),
"data": []
}
if screenshot.get("clickpath", None):
shot['clickPath'] = screenshot.get('clickpath')
if screenshot.get("waitfor", None):
shot['waitFor'] = screenshot.get('waitfor')

shot_index += 1

for data in screenshot.iter('data'):
Expand Down Expand Up @@ -222,11 +227,14 @@ def run(self):

# replace the design value in the config
visu_config_parts['start'] = visu_config_parts['start'].replace("%%%DESIGN%%%", design)
if config.tag == "page":
visu_config_parts['content_start'] = ""
visu_config_parts['content_end'] = ""

# build the real config source
visu_config = visu_config_parts['start'] + \
visu_config_parts['meta'] + \
visu_config_parts['content_start'] + \
visu_config_parts['content_start'] + \
etree.tostring(config, encoding='utf-8').decode('utf-8') + \
visu_config_parts['content_end'] + \
visu_config_parts['end']
Expand Down
15 changes: 15 additions & 0 deletions .doc/screenshots-spec.js
Expand Up @@ -188,6 +188,9 @@ describe('generation screenshots from jsdoc examples', function () {
selectorPrefix = "";
mockedConfigData.mode = "editor";
}
if (settings.selector.includes(".activePage")) {
selectorPrefix = "";
}
mockupConfig.push(mockedConfigData);

it('should create a screenshot', function () {
Expand Down Expand Up @@ -240,6 +243,18 @@ describe('generation screenshots from jsdoc examples', function () {
cvMockup.sendUpdate(data.address, data.value);
});
}
if (setting.clickPath) {

var actor = element(by.css(setting.clickPath));
if (actor) {
actor.click();
var waitFor = setting.waitFor ? setting.waitFor : selectorPrefix+settings.selector;
widget = element(by.css(waitFor));
browser.wait(function() {
return widget.isDisplayed();
}, 1000);
}
}

widget.getSize().then(function (size) {
widget.getLocation().then(function (location) {
Expand Down
5 changes: 4 additions & 1 deletion doc/manual/de/colab/doc/directives.rst
Expand Up @@ -141,7 +141,10 @@ verfeinert werden.
| <caption> | | | |
+-------------------+-------------------+-------------------+----------------------------------------------------------------------------+
| <settings> | name | Text | Dateiname des Screenshots |
| <screenshot> | | | |
| <screenshot> +-------------------+-------------------+----------------------------------------------------------------------------+
| | clickpath | CSS-Selector | CSS-Pfad zu einem Element, das angeklickt werden soll vor dem Screenshot |
| +-------------------+-------------------+----------------------------------------------------------------------------+
| | waitfor | CSS-Selector | CSS-Pfad zu einem Element, das sichtbar sein soll vor dem Screenshot |
+-------------------+-------------------+-------------------+----------------------------------------------------------------------------+
| <settings> | address | Gruppenaddresse | Sende Daten an diese Adresse bevor der Screenshot gemacht wird |
| <screenshot> +-------------------+-------------------+----------------------------------------------------------------------------+
Expand Down
4 changes: 2 additions & 2 deletions doc/manual/de/config/hydraulik.rst
Expand Up @@ -175,8 +175,8 @@ ist die Leitung als Gruppe eingefasst
class="pipe_group show_flow flow_control"
data-cometvisu-active="1/0/3">
<path
..
./>
....
..../>
</g>
.. figure:: _static/XML4.png
Expand Down
8 changes: 3 additions & 5 deletions doc/manual/de/config/index.rst
Expand Up @@ -87,11 +87,9 @@ Der strukturierte Aufbau der xml-formatierte Konfigurationsdatei ist in mehrere
Sektionen unterteilt, innerhalb derer alle weiteren Einträge verschachtelt und durch
Tags umschlossen aufgenommen werden.

.. TODO::
.. toctree::

- Aufbau der Konfiguration (Grundstruktur)
- *Attribute*: Allgemein erklären
- *Elemente*: Allgemein erklären
xml-format


Navigationselemente in der CometVisu
Expand All @@ -104,7 +102,7 @@ Navigationselemente in der CometVisu
Die verfügbaren Designs
------------------------

* :doc:`Metal <examples/swiss>` - das wohl beliebteste Dasign
* :doc:`Metal <examples/swiss>` - das wohl beliebteste Design
* Pure - Standard-Design
* Diskreet
* Diskreet Sand
Expand Down
184 changes: 183 additions & 1 deletion doc/manual/de/config/xml-format.rst
@@ -1,6 +1,188 @@
.. replaces:: CometVisu/XML-Elemente
XML-Elemente

XML-Struktur
============

Eine XML-Datei besteht aus verschiedenen "Elementen", die insgesamt
einen Baum darstellen. Ein Element kann weitere Elemente einschließen.
Über "Attribute" kann ein Element Werte annehmen. Einige dieser
Attribute müssen zwingend vergeben werden.

Die visu_config.xml (Header)
----------------------------

Die Konfigurationsdatei beginnt immer mit folgenden beiden Zeilen:

.. code-block:: xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<pages xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" design="pure" xsi:noNamespaceSchemaLocation="visu_config.xsd">
In der zweiten Zeile ist folgende Einstellung relevant:

+---------------------+-------------------------------------------------------------------------------------------------------------+----------------------------------------------------------------------------+------------+
| Option | Beschreibung | Werte | Zwingend |
+=====================+=============================================================================================================+============================================================================+============+
| ``design="pure"`` | Mit dieser Option wird das Standard-Design festgelegt, dass auf die Visualisierung angewendet werden soll | pure, metal, discreet, discreet_sand, discreet_slim, alaska, alaska_slim | JA |
+---------------------+-------------------------------------------------------------------------------------------------------------+----------------------------------------------------------------------------+------------+



Als nächstes kommen in der visu_config.xml alle Definitionen für
Plugins, Mappings, Stylings, Icons und die Statusleiste. Die Reihenfolge
ist wie folgt:

.. code-block:: xml
<meta>
<plugins>
<plugin name="colorchooser"/>
</plugins>
<mappings>
<mapping name="Start/Stop">
<entry value="0">Stop</entry>
<entry value="1">Start</entry>
</mapping>
</mappings>
<stylings>
<styling name="RedGreen">
<entry value="0">red</entry>
<entry value="1">green</entry>
</styling>
</stylings>
<icons>
<icon-definition name="Icon1" uri="./icon/unterverzeichnis/icon1.png"/>
</icons>
<statusbar>
<status type="html"><![CDATA[
<img src="icon/comet_64_ff8000.png" alt="CometVisu" /> by <a href="http://www.cometvisu.org/">CometVisu.org</a>
- <a href=".?forceReload=true">Reload</a>
- <a href="?config=demo">Widget Demo</a>
]]></status>
<status type="html" condition="!edit" hrefextend="config"><![CDATA[
- <a href="edit_config.html">Edit</a>
]]></status>
<status type="html" condition="edit" hrefextend="all"><![CDATA[
- <a href=".">normal Mode</a>
]]></status>
<status type="html"><![CDATA[
- <a href="check_config.php">Check Config</a>
<div style="float:right;padding-right:0.5em">Version: SVN</div>
]]></status>
</statusbar>
</meta>
Die Optionen von oben nach unten im Überblick:

Plugins
-------

+--------------------------+------------------------------------------------------------------------------------------------------------------------------------------------------+----------------------------------+------------+
| Option | Beschreibung | Werte | Zwingend |
+==========================+======================================================================================================================================================+==================================+============+
| ``<plugin name=" "/>`` | Mit dieser Option werden die Plugins eingebunden. Hier wird der Name des Plugins eingetragen. Pro Plugin muss ein solcher Eintrag angelegt werden. | z.B. colorchooser oder diagram | NEIN |
+--------------------------+------------------------------------------------------------------------------------------------------------------------------------------------------+----------------------------------+------------+

Mappings
--------

+--------------------------------------------+--------------------------------------------------------------------------------------------------------------------------------+-------------+------------+
| Option | Beschreibung | Werte | Zwingend |
+============================================+================================================================================================================================+=============+============+
| ``<mapping name=" ">`` | Mit dieser Option wird der Name des Mappings definiert. Dieser wird auch im Web-Editor bei entsprechenden Widgets angezeigt. | z.B. | JA |
+--------------------------------------------+--------------------------------------------------------------------------------------------------------------------------------+-------------+------------+
| ``<entry value="WERT">NAME</entry>`` | Mit dieser Option wird einem Wert ein Namen zugewiesen. Für jeden möglichen Wert muss ein solcher Eintrag angelegt werden. | z.B. Stop | JA |
+--------------------------------------------+--------------------------------------------------------------------------------------------------------------------------------+-------------+------------+

Stylings
--------

+---------------------------------------------+--------------------------------------------------------------------------------------------------------------------------------+------------+------------+
| Option | Beschreibung | Werte | Zwingend |
+=============================================+================================================================================================================================+============+============+
| ``<styling name=" ">`` | Mit dieser Option wird der Name des Stylings definiert. Dieser wird auch im Web-Editor bei entsprechenden Widgets angezeigt. | z.B. | JA |
+---------------------------------------------+--------------------------------------------------------------------------------------------------------------------------------+------------+------------+
| ``<entry value="WERT">FARBE</entry>`` | Mit dieser Option wird einem Wert eine Farbe zugewiesen. | z.B. red | JA |
+---------------------------------------------+--------------------------------------------------------------------------------------------------------------------------------+------------+------------+

Icons
-----

+-----------------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+---------+------------+
| Option | Beschreibung | Werte | Zwingend |
+===============================================+=========================================================================================================================================================================================================================================================================================================================================================================================+=========+============+
| ``<icon-definition name=" " uri="WERT">`` | Mit dieser Option wird der Name des Icons definiert, welches sich unter dem in uri angegebenen Verzeichnis befindet. Auf die so definierten Icons kann dann im weiteren Verlauf über den einfacher zu merkenden Namen zugegriffen werden. Die Verzeichnisangabe ist im Beispiel relativ zur CV installation. Hier wurden vorher die Icons in einem eigenen Unterverzeichnis abgelegt. | z.B. | NEIN |
+-----------------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+---------+------------+

Statusbar
---------

.. TODO::

Inhalte übertragen
Statusbar beschreiben

Aufbau der Visu-Seiten
----------------------

Als erstes muss eine Seite als Startseite angelegt werden. Dies
geschieht mit dem obersten Container. Alle weiteren Widgets und Seiten
befinden sich innerhalb dieser Hauptseite. Die Position der Elemente
wird von oben nach unten verarbeitet. Das sieht schematisch so aus:

.. widget-example::

<settings selector=".page.activePage">
<screenshot name="structure_main_page">
<caption>Startseite mit Link zur Unterseite</caption>
</screenshot>
<screenshot name="structure_sub_page" clickpath=".widget.pagelink .actor" waitfor="#id_0_">
<caption>Unterseite</caption>
<data address="1/0/5">0</data>
</screenshot>
</settings>
<meta>
<plugins>
<plugin name="colorchooser"/>
</plugins>
</meta>
<page name="Startseite">
<page name="Seite1">
<switch on_value="1" off_value="0">
<label>Spot Fernseher</label>
<address transform="DPT:1.001" mode="readwrite" variant="">1/0/5</address>
</switch>
</page>
<colorchooser>
<label>RGB Küche</label>
<address transform="DPT:5.001" mode="readwrite" variant="r">1/2/59</address>
<address transform="DPT:5.001" mode="readwrite" variant="g">1/2/60</address>
<address transform="DPT:5.001" mode="readwrite" variant="b">1/2/61</address>
</colorchooser>
</page>

Dieses kleine Beispiel erstellt eine Hauptseite mit dem Namen
**Startseite**. Auf dieser Startseite wird zu oberst ein Link zu einer
Unterseite mit dem Namen **Seite1** angelegt. Auf dieser Unterseite wird
zu oberst eine Schaltfläche mit dem Namen **Spot Fernseher** eingefügt.
Als nächstes wird auf der Hauptseite der Colorchooser mit dem Namen
**RGB Küche** eingefügt.

Mit dieser Struktur können beliebig komplexe Seitenstrukturen angelegt
werden. Eine Beschreibung der einzelen Widgets mit den zugehörigen XML
Codes finden Sie in der :doc:`Widgetübersicht <widgets/index>`

In der letzten Zeile der Config muss noch der Tag geschlossen werden.
Dafür muss also noch folgender Eintrag am Ende der Datei eingefügt
werden:

.. code-block:: xml
</pages>
Damit ist die visu_config.xml vollständig und kann auf den Server
übertragen werden.
11 changes: 4 additions & 7 deletions doc/manual/de/install/wiregate.rst
Expand Up @@ -46,21 +46,18 @@ Schritte:
öffnen (kann eine kurze Verzögerung geben) und ggf. das Textfeld zur
besseren Übersicht mit dem Handle in der rechten unteren Ecke
vergrößern
#. Das HTML-Element abändern auf **, also z.B. auf *Edit*
#. Das *<a>*-HTML-Element abändern auf *<a href="editor">*, also z.B. auf *<a href="editor">Edit</a>*
#. Mit Klick ganz oben auf der Seite auf "preview" testen, ob die Seite
wie gewünscht funktioniert
#. Falls ja: mit Klick ganz oben auf der Seite auf "save" die Config
abspeichern

--------------

Um die neueste Version der CometVisu (0.8.5) auf dem WireGate zu
installieren sind folgende Schritte durchzuführen:
Um die neueste Version der CometVisu (0.8.5) auf dem WireGate zu installieren sind folgende Schritte durchzuführen:

#. Installation des CometVisu-Paketes (d.h. die alte Version 0.6) um
#. Installation des aktuellsten CometVisu-Paketes um
sicher zu stellen, dass alle Abhängigkeiten erfüllt sind - so diese
Version noch nicht genutzt wird. Siehe hier: `Installation Version
0.6 <CometVisu/manual/de#Installation_und_Zugriff_auf_einem_Wiregate-Multifunktionsgateway>`__
Version noch nicht genutzt wird.
#. Anmelden an der Konsole (Linux-Nutzer nehmen einfach ssh, Windows
Nutzer nehmen z.B. das kostenlose Programm putty)
#. An der Konsole werden diese Befehle benötigt:
Expand Down

0 comments on commit 8cd6766

Please sign in to comment.