QuickHMI Eagle | Editor: First Steps QuickHMI English German

QuickHMI Eagle | Editor: First StepsYouTube↗ IA↗(long shot)
Science & Technology 3.4K views 4 likes 1 dislikes 20 Jun 2018

QuickHMI 352 subscribers Germany YouTube↗

After you buyed and installed our visualization software "QuickHMI", start the QuickHMI Editor. Software download: https://www.quickhmi.com/download.html

Nachdem Sie die Visualisierungssoftware QuickHMI erworben und installiert haben, starten Sie den QuickHMI Editor. Software Download: https://www.quickhmi.de/download.html

While the program is loading, it informs you which version of QuickHMI you have.

Während die Software lädt, sehen Sie bereits, über welche Version Sie verfügen.

Now you are on our interactive homepage. This page is updated regularly.

Jetzt befinden Sie sich auf unserer interaktiven Startseite. Diese wird regelmäßig von uns akutalisiert.

Here you will find information about QuickHMI, news, documentations and our video tutorials.

Hier erhalten Sie Informationen über QuickHMI, News und Dokumentationen. Sie finden Termine für unsere Online-Schulungen und gelangen zu deren Anmeldung. Auch finden Sie hier ein paar der wichtigsten Video-Tutorials zum Programm.

Also visit our social media channels.

Hier finden Sie zudem den Kontakt zu unseren Social Media Seiten. Schauen Sie doch mal vorbei.

You have the option to start a new project or open an existing project. You will also see the last opened projects.

Oben, auf der linken Seite, haben Sie die Optionen, ein neues Projekt zu erstellen oder ein vorhandenes Projekt zu öffnen. Zudem sehen Sie die zuletzt verwendeten Projekte.

*New project

Klicken Sie auf "Neues Projekt..."

The project properties: Here you can define basic settings for your project page. Under "Presets", determine the screen ratio.

Sie gelangen in die "Projektseiteneigenschaften", in denen Sie die grundlegendsten Eigenschaften, Ihrer neuen Projektseite festlegen können. Bestimmen Sie unter "Vorlagen" beispielsweise das Bildschirmverhältnis.

There are a variety of presets available for this purpose. These are subdivided into "Desktop", "Mobile" and "Apple devices". *The side height and width adapts automatically.

Hierzu stehen Ihnen eine Vielzahl von Vorlagen zur Verfügung. Unterteilt sind diese in die Bereiche "Desktop-, Mobile- und Apple-Geräte". *Die Seitenhöhe und -Breite passt sich automatisch an.

Under Configuration, you can specify the name for your project page.

Auf der linken Seite unter "Konfiguration", können Sie den Namen der Projektseite bestimmen.

Here you have the option, to enter the screen ratios manually. By using the lock icon, you can change width and height independently of each other.

Hier können Sie zudem das Seitenverhältnis, auch manuell individuell eingeben. Durch die Deaktivierung des Schloss-Icons, können Sie die Breite und Höhe, unabhängig voneinander ändern.

Assign a "Header" and "Footer". All settings are displayed in a preview. From the header and footer, you can also set the height.

Vergeben Sie eine Kopf- und Fußzeile. *Alle Einstellungen werden in einer symbolischen Preview in Echtzeit angezeigt.

By activating the checkbox, you can reduce the project page to the height of the header and footer.

Mit der Aktivierung der Checkbox, können Sie die Seite um die Höhe der Kopf- und Fußzeile verkleinern. Somit beinhaltet das eingestellte Seitverhältnis, die Kopf- und Fußzeile, und die effektive Größe, in der gearbeitet werden kann, verkleinert sich.

Set the "Background Color".

Bestimmen Sie dann noch die Hintergrundfarbe.

Click "OK" to continue.

Sind alle Einstellungen getätigt, fahren Sie fort mit "OK".

The new project opens and you have access to the Editor Desktop.

Das neue Projekt öffnet sich, und Sie haben Zugriff auf die Editor-Arbeits- und Visualisierungsoberfläche.

You can switch between the main page, header and footer.

Sie können wechseln zwischen der Hauptseite, der Kopfzeile und der Fußzeile (Wenn Sie in den "Konfigurationen", zuvor welche angelegt haben).

With the "Controls" , you interact in the project. You can assign them properties, rules and actions. In various categories, a variety of controls are available.

Mit den Steuerelementen agieren Sie im Projekt. Sie können ihnen Eigenschaften, Aktionen und Regeln zuweisen. In verschiedenen Kategorien, stehen Ihnen eine Vielzahl von Steuerelementen zur Verfügung.

The "Layers": The option to work in different layers, should help you, to have a better overview. This is especially useful for very large projects.

Das Ebenen-Fenster: Die Möglichkeit, in verschiedenen Ebenen zu arbeiten, soll Ihnen die Übersicht erleichtern. Dies ist vor allem bei großen Projekten sinnvoll. *Mehr dazu, im Verlauf dieses Videos.

The "Project explorer": Here you can make project-related settings.

Der Projekt Explorer: Hier können Sie projektbezogene Einstellungen vornehmen.

The "Settings": Here you can specify all settings for the page and controls. For this, page or the control must be selected.

Das Eigenschaften-Fenster: Hier können Sie alle Eigenschaften bestimmen. Sowohl für die Seite, als auch für die Steuerelemente. Dazu müssen Seite oder Elemente angewählt sein.

For each window, you can define the properties.

Für jedes Fenster können Sie die Eigenschaften definieren.

In addition to properties such as "Dockable", "Floating", "Tablet document", "Auto hide" and "Hide", you can also detach the window from the grid or completely close them.

Neben den Eigenschaften "Andockbar", "Unverankert", "Dokument mit Registerkarten", "Automatisch ausblenden" und "Ausblenden", können Sie das Fenster auch vom Gitter lösen oder ganz schließen.

Closed windows can be open again under "Windows".

Geschlossene Fenster können unter "Windows" wieder geöffnet werden.

The main menu bar consists of several tabs.

Die Hauptmenü-Leiste besteht aus meheren Reitern.

Under "File" you will find all standard operations, such as "Save" or "Save as". With the "Server export", you export the files from the editor. These, will be use with the QuickHMI Runtime Manager.

Unter "Datei" finden Sie neben den bekannten Funktionen wie "Speichern", auch den "Server Export". Damit exportieren Sie die Dateien aus dem Editor, welche später, in Verbindung mit dem "QHMI Runtime Manager" verwendet werden.

A ".qexp" file would be generated.

Eine ".qexp" -Datei kann generiert werden.

Under "Runtime", you can preview the project.

Unter „Laufzeit“ können Sie sich das Projekt als Vorschau anzeigen lassen.“

Choose the runtime mode to use. Determine which browser on your system, will be started to run the application.

Wählen Sie, mit welchem Laufzeitmodus dies geschehen soll. Bestimmen Sie, mit welchem auf Ihrem Gerät befindlichen Browser, das Projekt geöffnet werden soll.

In addition, you have the option to determine which ports are to be used.

Darüber hinaus haben Sie die Möglichkeit festzulegen, welche Ports verwendet werden sollen.

Set various settings for the ports.

Legen Sie verschiedene Einstellungen für die Ports fest.

Under "Project", you will find all the contents, that are also contained in the "Project explorer". Only they are here, arranged side by side.

Unter "Projekt" finden Sie alle Inhalte, die auch im Projekt Explorer enthalten sind. Nur sind sie hier, übersichtlich nebeneinander angeordnet.

Under "Edit" you will find standard operations such as "Copy" and "Paste". But also the "View-Manager", "Navigation" and "Zoom & Pan".

Unter "Bearbeiten" finden Sie Standard-Operationen wie "Kopieren" und "Einfügen", aber auch den "View-Manager", "Navigation", sowie "Zoom & Pan".

Under "Navigation" you can switch between created pages.

Unter "Navigation" können Sie zwischen den erstellten Seiten wechseln.

If "Zoom and Pan" is activated, the editor desktop can be zoomed in and out as desired. To select control elements, the mode must be deactivated again.

Wenn "Zoom and Pan" aktiviert ist, kann der Editor-Desktop nach Wunsch vergrößert und verkleinert werden. Um Steuerelemente auszuwählen, muss der Modus wieder deaktiviert werden.

With the "View-Manager", you have the options of dividing your project into organized sections, to make navigation in the large projects significantly easier.

Mit dem "View-Manager" können Sie Views erstellen, die als Sprungmarken, vor allem in sehr großen Projekten, sehr nützlich sein werden.

The views can be placed on the editor desktop via Drag & Drop. Selected views, like all objects in the editor, have their own properties.

Die Ansichten können per Drag & Drop auf dem Editor-Desktop platziert werden. Ausgewählte Ansichten haben, wie alle Objekte im Editor, eigene Eigenschaften.

Under "Editor" you can (among other things) open previously closed windows again. Click on "Window". All windows that are closed, are now displayed here.

Unter "Editor" können Sie unter anderem, im Vorfeld geschlossene Fenster öffnen. Klicken Sie hierzu auf "Fenster". Hier werden alle Fenster angezeigt, die geschlossen wurden.

Click on "Message", the message window will be opened.

Klicken Sie beispielsweise auf "Meldungen", wird das entsprechende Fenster geöffnet.

Under "Help", you can access the offline help and get information about the currently used version of QuickHMI.

Unter "Hilfe" können Sie auf die Offline-Hilfe zugreifen und Informationen über die aktuell verwendete Version von QuickHMI erhalten.

Open system informations or check if drivers are digitally signed.

Lassen Sie sich hier außerdem Systeminformationen, sowie Informationen über die Direct-X Komponenten und -Treiber des Computers anzeigen.

You can also select the "Language" under "Editor". The language change is active after a restart of the editor.

Sie können auch die "Sprache" unter "Editor" auswählen. Starten QuickHMI neu, damit die Änderungen übernommen werden.

To use a control, drag & drop it onto the editor desktop.

Um ein Steuerelement zu verwenden, ziehen Sie es per Drag&Drop auf die Arbeitsoberfläche.

Place the control on the editor desktop as desired. To resize, drag it larger or smaller on the corner points.

Platzieren Sie das Element, je nach Wunsch auf der Oberfläche. Zum Ändern der Größe, ziehen Sie es einfach an den Eckpunkten größer oder kleiner.

When the control is selected, you can change its settings. There are settings that apply to all controls and those that vary from item to item.

Ist das Steuerelement angewählt, erscheinen deren "Eigenschaften" im gleichnamigen Fenster. Es gibt sowohl Eigenschaften, die für ALLE Elemente gelten, sowohl welche, die von Element zu Element unterschiedlich sind.

To rotate a control, change the value of the "ElementRotation" property. The element rotates in real time.

Um das Steuerelement beispielsweise rotieren zu lassen, tragen Sie den entsprechenden Wert, in die Eigenschaft "ElementRotation" ein. Das Element rotiert in Echtzeit.

It works more quick if you move the cursor over the control and use the mouse wheel. (10 degrees per step)

Schneller geht es, wenn Sie das angewählte Element rotieren, in dem Sie mit dem Cursor auf dem Element gehen und dann das Mouse-Rad verwenden. (10 Grad pro Step)

If you hold down the Shift key, the rotation is even more accurate. (1 degree per step)

Halten Sie dabei die Shift-Taste gedrückt, ist die Rotation noch genauer. (1 Grad pro Step)

For example change the "PipeColor" and the "FlangeColor" of the control. To do this, click on the color wheel and determine the color in the opened color palette.

Ändern Sie z.B. auch die Farben des Elements, oder bestimmen Sie die Füllfarbe für das Element, für den Fall, das es aktiv ist. Klicken Sie hierfür auf den Farbkreis, und bestimmen Sie die Farbe in der Palette.

Many other properties can be determined in this way.

Viele weitere Eigenschaften können Sie auf diese oder ähnliche Art festlegen.

In this example, a button and a lamp are used to create and visualize an S7 variable.

In diesem Beispiel wird ein Button und eine Lampe verwendet, zur Erstellung und Visualisierung einer S7 Variable.

*Change of properties

*Änderung deren Eigenschaften (Namen und Farben)

By clicking on the button, the value of the variable should change from "On" to "Off" and vice versa.

Durch einen Klick auf den Button, soll der Wert der Variable von "On" auf "Off" wechseln und umgekehrt.

As a first step, create a data source. Click on "Datasources" in the "Project explorer".

Hierzu legen Sie als ersten Schritt eine Datenquelle an, in dem Sie im "Projekt Explorer" auf "Datenquellen" klicken.

Adding a new data source.

*Hinzufügen einer neuen Datenquelle

Determine all specifications for the data source. Confirm with "Add".

Bestimmen Sie alle erforderlichen Spezifikationen für die Datenquelle. Klicken Sie anschließend auf "Hinzufügen".

The data source was created successfully.

Die Datenquelle wurde erfolgreich angelegt.

The second step: Adding a variable. Click on "Variables" in the "Project explorer".

Als zweiten Schritt, legen Sie eine Variable an, in dem Sie im "Projekt Explorer" auf "Variablen" klicken.

Adding a new variable.

Fügen Sie eine neue Variable hinzu.

Select the previously created data source and specify further specifications. Confirm with "Add". If you do not want to add any more variables, "Close" the window.

Wählen Sie als "Datenquelle", die zuvor angelegte, und bestimmen Sie weitere Spezifikationen. Bestätigen Sie Ihre Eingaben mit "Hinzufügen". Möchten Sie keine weitere Datenquelle hinzufügen "Schließen" Sie das Fenster.

The variable was created successfully.

Die Variable wurde erfolgreich angelegt.

Define a rule to visualize the state of the variable.

Definieren Sie nun eine Regel, um den Zustand der Variable zu visualisieren.

For this, select the lamp control and click on the wheel icon for the "LampOn" property

Dazu selektieren Sie die Lampe, und klicken in deren "Eigenschaften" auf das Zahnrad-Icon, der Eigenschaft "LampOn".

The "Edit rule" window opens. With the plus icon, you can add a new rule.

Das Fenster "Regel bearbeiten" öffnen sich. Fügen Sie eine neue Regel hinzu, indem Sie auf das Plus-Icon klicken.

Select the value type "Variable" and select the previously created data source and variable.

Wählen Sie als "Wert" "Variable" und wählen Sie die zuvor angelegte Datenquelle und Variable aus.

Confirm with the check button and "Close" the window.

Bestätigen Sie mit der Check-Taste und schließen Sie das Fenster.

To change the value of the variable, select the button and click on "Actions" in the properties.

Um den Wert der Variable zu ändern, selektieren Sie den Button, und klicken Sie in deren "Eigenschaften" auf "Aktionen".

Select a Click Event and click on the corresponding flash Icon. In this example, "Clicked" is selected.

Wählen Sie ein Klick-Event und klicken auf deren Blitz-Icon, um es zu öffnen. In diesem Bespiel wurde "Clicked" ausgewählt.

The "Edit Actionfunctions" window opens. With the plus icon, you can add a new action.

Das Fenster "Aktionsfunktionen bearbeiten" öffnet sich. Mit dem Plus-Symbol können Sie eine neue Aktion hinzufügen.

The "SET_VARIABLE" command assigns a new value to the variable.

Wählen Sie den Befehl "SET_VARIABLE", Dieser weist einer Variable, einen neuen Wert zu.

Choose the created data source and variable.

Auswahl der angelegten Datenquelle und Variable.

Specify the "Value" by clicking on the Functions icon.

Passen Sie den "Wert" an, in dem Sie auf das Funktionen-Icon klicken.

Select the "Operation" "NOT", so that the input value is negated.

Wählen Sie die Operation "NOT", damit der Eingangswert negiert wird.

"Save" to continue.

"Speichern" Sie, um die Eingaben zu bestätigen.

Confirm with the check button and "Close" the window.

Bestätigen Sie mit der Check-Taste und schließen Sie das Fenster.

Now the functions can be tested in runtime mode.

Jetzt können die Funktionen im Laufzeitmodus ausgeführt werden.

*Testing the functions in the runtime mode

*Testen der Funktionen im Laufzeitmodus

After you have started the runtime mode, the loading window opens. This has different functions. It shows the status of the ports and data sources.

Direkt nachdem Sie den Laufzeitmodus gestartet haben, erscheint ein Ladefenster. Dieses hat verschiedene Funktionen. Es zeigt den Status der Ports an, sowie den Status der Datenquellen, welche im Vorfeld angelegt wurden.

The runtime mode does not start, until all components have been loaded. If not all components can be loaded, also you can force the start. In addition you can access the log entries.

Der Laufzeitmodus startet erst dann automatisch, nachdem alle Komponenten geladen wurden. Sollten nicht alle Koponenten geladen werden können, können Sie den Start auch erzwingen. Auch können auf die Log-Einträge zugreifen.

You can copy controls by selecting them and choose the key combination "Ctrl + C". With "Ctrl + A" you can select all controls on the editor desktop.

Sie können Steuerelemente kopieren, indem Sie sie selektieren (einzelnd oder mehrere), und dann die Tastenkombination Strg + C wählen. Mit "Strg + A" können Sie alle Elemente auf der Oberfläche selektieren.

To paste, select the key combination "Ctrl + V".

Mit "Strg + V" fügen Sie kopierte Elemente ein. Alle Eigenschaften und Funktionen werden dabei vom zu kopierenden Element übernommen.

You have the opportunity to work in different layers. This guarantees a better overview in large projects.

Die Möglichkeit, in verschiedenen Ebenen zu arbeiten, soll Ihnen die Übersicht erleichtern. Dies ist vor allem bei großen Projekten sinnvoll.

In this example, a Breaker Button and an LED will be added.

In diesem Beispiel wird der Seite ein Breaker Button und eine LED hinzugefügt.

All controls that you drag on the editor desktop, appears directly in the layers window.

Alle Steuerelemente, die Sie auf die Editorarbeits-Oberfläche ziehen, erscheinen direkt im Ebenen-Fenster des Editors.

If you right-click in the layer window, you can add a new folder.

Klicken Sie im Ebenen-Fenster die rechte Mouse-Taste, so können Sie einen neuen "Ordner hinzufügen".

In the openned "Create folder" window, you can name the new folder. In this example, "Layer 1".

Im Fenster "Ordner anlegen", können Sie nun den Namen für den neuen Ordner bestimmen. In diesem Beispiel nennen wir ihn "Ebene 1".

Continue with ok.

Mit "OK" fahren Sie fort.

Now you can drag & drop the items into the created folder.

Jetzt können Sie per Drag&Drop, die Elemente in die erstellten Ordner ziehen. Wozu dies gut ist, werden Sie gleich erfahren. Vielleicht vermuten Sie es aber schon. ;)

Two equal controls are created again. In this case with copy and paste.

Zur Anschauung werden nochmal zwei gleiche Steuerelemente erstellt. Dies geschieht, in dem die vorhandenen Elemente kopiert und eigefügt werden.

A second folder (or layer) with the name "Layer2" is created. As before, the elements are drag & drop in this folder.

Eine zweiter Ordner (bzw. Ebene) mit dem Namen "Ebene 2" wird erstellt, und die neuen Elemente werden dort per Drag&Drop reingezogen.

All windows can be moved individually.

Alle Fenster können einzeln bewegt werden.

With the eye icon, you can show and hide the folders. This will hide all controls that are in it. Then, they are no longer visible and no longer selectable.

Mit dem Augen-Symbol können Sie die Ordner ein- und ausblenden. Dadurch werden alle darin enthaltenen Steuerelemente ausgeblendet. Sie sind dann nicht mehr sichtbar und können nicht mehr angewählt werden.

If you open the folders, you can show and hide all the controls they contain individually.

Wenn Sie die Ordner öffnen, können Sie alle darin enthaltenen Steuerelemente ein- und ausblenden.

With the QuickHMI Plug-In Manager, you can also add additional controls.

Mit dem "QuickHMI Plug-In Manager" können Sie, zusätzlich zu den bereits vorhandenen Steuerelementen im Editor, weitere Steuerelemente hinzufügen.

Click on "PlugIn Manager" in the "Project explorer".

Klicken Sie hierzu im "Projekt Explorer" auf den "PlugIn Manager".

Now you can select the "Available" extensions by clicking.

Jetzt können Sie die unter „Verfügbar“ stehenden Extensions auswählen, indem Sie sie anklicken.

The controls, which contained in the extensions, are displayed by placing the cursor on the extension.

Die in einer Extension enthaltenen Elemente werden Ihnen angezeigt, indem Sie mit dem Cursor auf einer ausgewählten Extension stehen bleiben.

With the green arrow, add your selected controls.

Mit dem grünen Pfeil, fügen Sie Ihre ausgewählten Steuerelemente hinzu.

These then appear under "Installed" and in your controls window.

Diese erscheinen dann unter "Installiert". Sie finden Sie dann mit dem Namenszusatz "Extention", bei den regulären Steuerelementen.

If you would like to remove the installed extensions again, select them and click on the red arrow.

Möchten Sie Extensions wieder entfernen, wählen Sie sie unter "Installiert" an, und klicken Sie auf dem roten Pfeil.

Also you have the option, to add or remove ALL extensions with just one click. Use the corresponding buttons.

Übrigens haben Sie auch die Möglichkeit, mit einem Klick ALLE Extensions hinzuzufügen oder zu entfernen. Nutzen Sie dazu die entsprechenden Buttons.