Das Imageviewer-Widget dient der Anzeige von Bildern. Mit dem Widget lassen sich Bilder anzeigen, die - beispielsweise mittels R-Skripten - in der Datenbank abgelegt wurden.
Funktionen im Widget:
- Durch Klick auf das aktuelle Bild, kann dieses im Vollbild-Modus geöffnet werden.
- Um direkt auf eine Seite zu springen, kann auf die aktuelle Seitenzahl geklickt werden
- Anzeige von x Bildern (z.B. 1, 2, 4, 9)
- Durchschalten von Bildern
Funktionen im Vollbildmodus
- In das aktuelle Bild kann über das Mausrad hinein und auch wieder herausgezoomt werden.
- Im gezoomten Zustand kann der Bildausschnitt durch Halten der linken Maustaste und Ziehen verschoben werden.
- Das Drücken der Leertaste ist die einfachste Möglichkeit Zoom und Bildausschnitt anschließend wieder zurückzusetzen.
- Liegt der Mauszeiger auf der Bildvorschau, kann über das Mausrad durch die Bilder geschaltet werden.
- Durch einen Doppelklick in den Bildbereich, werden die Bedienelemente ausgeblendet.
Hotkeys im Vollbild-Modus:
Key | Funktion |
---|---|
Escape | Schließt die Vollbildansicht |
a, Pfeiltaste Links | Wählt das vorherige Bild aus |
d, Pfeiltaste Rechts | Wählt das nächste Bild aus |
w, +, Pfeiltaste Hoch | Hineinzoomen |
s, - , Pfeiltaste Runter | Herauszoomen |
Space | Zentriert das Bild und wechselt zwischen 1:1 und optimaler Skalierung |
YUNA-ML Definition
Anlegen eines Imageviewer-Widgets im Portal
<xml> <widget name="template_widget_Imageviewer"> <!-- Position from left top --> <position> <x>0</x> <y>0</y> </position> <!-- Size of the Widget --> <size> <x>6</x> <y>5</y> </size> <!-- Caption: title over the widget and additional features (Contextmenue) --> <caption> <!-- Display caption --> <show>true</show> <!-- Title of the Widget --> <label>Imageviewer-Template</label> </caption> <!-- Name of the WidgetType --> <widgettype>Imageviewer</widgettype> <!-- Query to execute --> <dataID>qy_NameOfDataID</dataID> <!-- URL-Paramters to listen on for triggering the widget --> <triggerParams> <mandatory> <list>jiid</list> <list>equi</list> </mandatory> </triggerParams> </widget> </xml>
{ "postition": { "position": [0, 0] }, "size": { "x": 6, "y": 5 } , "caption": { "show": true, "label": "Imageviewer-Template" }, "widgetname": "Imageviewer", "dataID": "qy_NameOfDataID", "triggerParams": ["jiid", "equi"] }
Definierbare Angaben und Parameter
Angabe / Parameter | mögliche Ausprägungen | Bedeutung | |
---|---|---|---|
Allgemeine Optionen | |||
widgettype | Imageviewer | Definiert den Widget-Typ als Imageviewer | |
position | Zahlenwerte für die x- und y-Achse | Definiert die Position des Widgets im Grid | |
size | Zahlenwerte für die x- und y-Achse | Definiert die Größe des Widgets | |
dataID | Definiert die im Widget anzuzeigende Datenquelle | ||
triggerparams (optinal / mandatory) | Definiert die Parameter, die für die Anzeige des Bilds im Imageviewer zuständig sind | ||
imagecount | Definiert die Anzahl der gleichzeitig im Widget angezeigten Bilder | ||
Caption-Optionen | |||
show | true false | Definiert, ob eine Caption angezeigt wird oder nicht. | |
label | Freitext | Definiert die Überschrift des Widgets | |
menu | show: true / false label: Freitext icon: fontawesome-icon tooltip: Freitext type: popup | Definiert Einträge des Caption-Menüs | |
Appearance-Optionen | |||
enlargeableY | true false | Definiert, ob das Widget ein- und ausgeklappt werden kann. | |
enlargedY | true false | Definiert, ob das Widget beim Aufruf der View aus- oder eingeklappt ist. |
Datasource
Über die Datasource (siehe Datasource) können Bilder aus einem IO-Channel in den Imageviewer geladen werden. Dafür muss ein ein Input-Channel in YunaML definiert werden.
Über den 'hash'-Input-Channel können Bilder aus der Tabelle FileStreamDataStorage anhand ihres Hashs geladen werden.
Beispiel: Hash-Input-Channel am Imageviewer
<inputs> <hash>tableData</hash> </inputs>
Über den 'src'-Input-Channel können URLs oder Data-URIs übergeben werden, aus denen die Bilder geladen werden sollen.
Beispiel: 'src'-Input-Channel am Imageviewer
<inputs> <src>tableData</src> </inputs>
View mit Tabellenwidget und Imageviewer
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <xml> <view name="dse_ImageviewerDemo" roles="System_Admin, AdHoc_Full_Issue"> <widget name="IV_table_default"> <position> <x>0</x> <y>0</y> </position> <size> <x>8</x> <y>8</y> </size> <widgettype>tabledirective</widgettype> <dataID>qy_images</dataID> <cols> <list> <field>ID</field> <width>50</width> <filter> <ID>number</ID> </filter> </list> <list> <field>DateTime</field> <type>genDate</type> <filter> <DateTime>date-custom</DateTime> </filter> <format>short</format> <width>120</width> </list> </cols> <outputs> <current>tableData</current> </outputs> <generalOptions> <addColumns>true</addColumns> <skipColumns><list>FileStreamData</list></skipColumns> <sortable>true</sortable> <filter>true</filter> </generalOptions> </widget> <widget name="IV_default"> <position> <x>8</x> <y>0</y> </position> <size> <x>8</x> <y>8</y> </size> <caption> <show>true</show> <label>Images</label> </caption> <inputs> <hash>tableData</hash> </inputs> <widgettype>Imageviewer</widgettype> </widget> </view> </xml>
Query:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <xml> <data name="qy_images" roles="System_Admin"> <friendlyName>qy_images</friendlyName> <type>QueryBuilder</type> <filter>false</filter> <path>DSE-PortalDB portal FileStreamDataStorage</path> <query> <![CDATA[ <QueryBuilder> <select> <table>DSE-PortalDB</table> <table>portal</table> <table>FileStreamDataStorage</table> <as>A</as> <fields> <field><name>ID</name></field> <field><name>Hash</name></field> <field><name>FileStreamDataGUID</name></field> <field><name>DateTime</name></field> <field><name>Extension</name></field> </fields> <where/> <groupby/> <orderby/> <limit>0</limit> <limitoffset>0</limitoffset> </select> <dictionary/> </QueryBuilder> ]]> </query> </data> </xml>