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

<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>

JSON

{
    "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>

Page tree

Imageviewer