Page tree
Skip to end of metadata
Go to start of metadata

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



widgettypeImageviewerDefiniert den Widget-Typ als Imageviewer

positionZahlenwerte für die x- und y-AchseDefiniert die Position des Widgets im Grid

sizeZahlenwerte für die x- und y-AchseDefiniert 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.

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




  • No labels