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

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:

KeyFunktion
EscapeSchließt die Vollbildansicht
a, Pfeiltaste LinksWählt das vorherige Bild aus
d, Pfeiltaste RechtsWählt das nächste Bild aus
w, +, Pfeiltaste HochHineinzoomen
s, - , Pfeiltaste RunterHerauszoomen
SpaceZentriert 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



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




  • No labels