Was ist der Imageviewer?

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.

Durch klick auf das aktuelle Bild, kann dieses in einer vergrößerten Ansicht geöffnet werden. In dieser Ansicht kann das Bild gezoomt und verschoben werden.

Mithilfe der Pfeiltasten können durch die Bilder navigiert (links, rechts) und gezoomt werden (hoch, runter).

Funktionalitäten

Anzeige von x Bildern (z.B. 2, 8, 18, 32)
Einzelbildansicht
Durchschalten von Bildern

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

Was ist der Imageviewer?

Funktionalitäten

Anlegen eines Imageviewer-Widgets im Portal

Definierbare Angaben und Parameter

Datasource