Custom Drawing

Das Custom Drawing Widget ermöglicht es, beliebige Bilder oder PDF's (z. B. Grundrisse, Produktfotos, Körper-Silhouetten) hochzuladen und mit interaktiven Pins, Sticker oder Freihandzeichnungen zu versehen. Jede Markierung kann mit einer Notiz, Kategorie oder zusätzlichen Information verknüpft werden. Ideal für Anwendungen in Bau, Mode, Medizin, Logistik u. v. m.

Anwendungscode

arcCustomDrawing({
			uniqueId: "titel " + Nr,
			embedded: false,
			height: "800px",
			tableId: tableId("Shapes"),
			fieldId: fieldId("Shapes", "helper_shapeDataValue"),
			changeFieldValues: [{
					fieldId: fieldId("Tabelle", "Feld Name"),
					value: "Wert"
				}],
			exportSettings: {
				allowedTypes: [{
						format: "jpg"
					}, {
						format: "png"
					}, {
						format: "svg"
					}, {
						format: "pdf",
						mergeFile: false
					}],
				target: "file",
				recordId: Nr,
				fieldId: fieldId("Tabelle", "Feld für den Export"),
				mergeFile: "Feld mit der Originaldatei",
				apiKey: "API_KEY",
			},
			canvas: {
				width: 4000,
				height: 4000,
				offsetX: 0,
				offsetY: 0
			},
			zooming: {
				step: 0.25,
				min: 0.01,
				max: 4
			},
			drawingSettings: {
				strokeWidth: 1,
				strokeColor: "#ffffff"
			},
			artboard: {
				width: 1000,
				height: 1000,
			},
			stickerTypes:[{
				uid: uid,
				image: "stickerBase64",
				icon: base64,
				label: Name,
				width: 100,
				height: 100,
				originX: 0.5,
				originY: 0.89,
				default: false
			}],
			shapes: (Shapes).[{
					shapeId: Nr,
					movable: true,
					shapeDataValue: helper_shapeDataValue,
					stickerUID: "",
					sidebarItem: {
						header: "Titel des Eintrags",
						content: "Beschreibung des Eintrags",
					}
				}],
			rightSideContent: {
				show: true,
				header: "Header",
				footer: "Footer"
			}
		})

🔸 embedded

Gibt an, ob das Widget sich in eine bestehende Maske (z. B. Ninox-Formular) einfügt.

embedded: "" // default: false
embedded: true,

👀 Tipp: Bei true ist keine feste Höhe nötig – das Widget passt sich automatisch dem Elterncontainer an.

🔸 height

Mit dem Parameter height gibst du die Gesamthöhe des Drawing-Tools in Pixel an.
Er bestimmt, wie viel vertikaler Platz das Widget im eingebetteten Kontext (z. B. in einem Formular oder auf einer Seite) einnimmt.

Empfehlung: Das Widget sollte für eine bessere UI idealer Weise in Custom Layout eingebunden werden. Und die Höhe im Layout Block bestimmt werden.

height: "", // default: 600px
height: "800px",
height: "100%", // z. B. in einem Layout Block

🔸 tableId & fieldId

Diese beiden Parameter definieren, wo die Formdaten (Shapes) gespeichert oder geladen werden.

• tableId gibt die Tabelle an, in der die Shapes verwaltet werden.

• fieldId verweist auf das konkrete Feld innerhalb dieser Tabelle, das die Geometriedaten (shapeDataValue) des jeweiligen Shapes enthält. Achtung: Hier muss ein Ninox-Textfeld verwendet werden.

Du kannst hiermit eigene Formen, Marker oder Objekte dynamisch speichern – z. B. Rechtecke, Sticker, Kreise, Bilder oder Linien.

tableId: tableId("Shapes"),
fieldId: fieldId("Shapes", "helper_shapeDataValue"),

🔸 changeFieldValues

Erlaubt es, beim Anlegen eines neuen Shapes zusätzliche Felder oder Verknüpfungen zu befüllen – z. B. Kategorie, Ersteller o. ä.

changeFieldValues: [{
					fieldId: fieldId("Tabelle", "Feld Name"),
					value: "Wert"
				}],

🔸 exportSettings

Mit diesem Block konfigurierst du die Exportfunktion des Widgets. Du kannst festlegen, in welchen Formaten der Nutzer exportieren darf (z. B. PNG, PDF), wohin die Datei gespeichert werden soll und ob bei PDF ein bestehendes Dokument zusammengeführt wird.

💡 Hinweis: Konvertierung in eine vektorisierte PDF fallen Kosten an und es ist eine Verbindung zum Internet notwendig (funktioniert nicht im Offline Modus). Genaue Kosten erfragst du bitte bei dem arcRider Support.

exportSettings: {
				allowedTypes: [{
						format: "jpg"
					}, {
						format: "png"
					}, {
						format: "svg"
					}, {
						format: "pdf",
						mergeFile: false
					}],
				target: "file",
				recordId: Nr,
				fieldId: fieldId("Tabelle", "Feld für den Export"),
				mergeFile: "Feld mit der Originaldatei",
				apiKey: "API_KEY",
			},

🔸 canvas

Mit dem canvas-Block definierst du die technische Zeichenfläche, also den kompletten Bereich, auf dem Shapes gezeichnet und verschoben werden können.

Dieser Bereich kann deutlich größer sein als der sichtbare Ausschnitt (artboard) und bestimmt, wie weit sich Nutzer im Zeichenbereich bewegen können (z. B. beim Verschieben oder Zoomen).

🔧 Struktur:

• width: Die gesamte Breite der Zeichenfläche in Pixeln.

• height: Die gesamte Höhe der Zeichenfläche in Pixeln.

• offsetX: Abstand zum linken und rechten Rand – kann genutzt werden, um Inhalte zentriert darzustellen.

• offsetY: Abstand zum oberen und unteren Rand – ideal für zusätzliche Arbeitsfläche oder Druckränder.

Tipp: Du kannst durchaus auch dynamische Werte aus Ninox Feldern oderBerechnungen hier einsetzen. Beispielsweise haben wir Workflows entwickelt, in denen wir die Größe des canvas abhängig von der Größe des Hintergrundshapes gemacht haben.

canvas: {
				width: 4000,
				height: 4000,
				offsetX: 0,
				offsetY: 0
			},

🔸 zooming

Der zooming-Block steuert, wie weit in das Zeichenfeld hinein- oder herausgezoomt werden kann – etwa per Mausrad oder Touch-Gesten. Damit definierst du den Zoombereich und wie fein abgestuft gezoomt wird.

🔧 Struktur:

• step: Gibt an, wie groß ein Zoom-Schritt ist, z. B. bei Klick auf die Plus/Minus-Buttons oder beim Scrollen mit gedrückter Strg-Taste. Ein kleiner Wert (z. B. 0.1) bedeutet feinere Zoomschritte.

• min: Der kleinste erlaubte Zoomfaktor (z. B. 0.1 = 10 %). Damit legst du fest, wie weit man maximal herauszoomen darf.

• max: Der größte erlaubte Zoomfaktor (z. B. 4 = 400 %). Damit begrenzt du das Hereinzoomen auf eine bestimmte Detailstufe.

zooming: {
				default: 0.5,
                step: 0.25,
				min: 0.01,
				max: 4
			},

💡 Hinweise:

• Der initiale Zoom wird automatisch so gesetzt, dass das Artboard gut in das Widget passt.

• Zoomaktionen wirken sich auf die Darstellung der Shapes aus, nicht auf ihre tatsächliche Größe im canvas.

• Wird kein zooming-Block gesetzt, gelten Standardwerte (Zoom zwischen ca. 10 % und 400 %).

🔸 drawingSettings

Mit dem drawingSettings-Block legst du die Standard-Eigenschaften für neue Zeichenobjekte fest – z. B. Linienfarbe und -stärke. Diese Werte gelten für alle neu gezeichneten Formen wie Linien, Rechtecke oder Kreise, solange der Nutzer keine individuellen Einstellungen verändert.

🔧 Struktur:

• strokeWidth: Bestimmt die Linienbreite in Pixeln.
  Ein Wert von 1 ergibt eine feine Linie, 2 oder 3 wirken etwas kräftiger.

• strokeColor: Definiert die Farbe der Linien im Hex-Format, z. B. #ffffff für Weiß oder #ffaa21 für Orange.

drawingSettings: {
				strokeWidth: 1,
				strokeColor: "#ffffff"
			},

💡 Hinweis:

Du kannst strokeColor und strokeWidth auch aus Ninox-Feldern dynamisch übergeben, um die Zeichenoptionen z. B. vom Nutzer auswählbar zu machen. So kannst du pro Datensatz individuelle Zeichenstile ermöglichen.

🔸 artboard

Der artboard-Block definiert den sichtbaren Ausschnitt deiner Zeichenfläche – also das, was der Nutzer beim Öffnen des Widgets zunächst sieht. Es handelt sich sozusagen um das „Papier“, auf dem gezeichnet wird – während der canvas-Bereich das „gesamte Atelier“ darstellt.

🔧 Struktur:

• width: Breite des sichtbaren Zeichenbereichs in Pixeln.

• height: Höhe des sichtbaren Zeichenbereichs in Pixeln.

Dieser Bereich wird automatisch zentriert und skaliert dargestellt, sodass er vollständig im Widget sichtbar ist (abhängig von Zoom- und Darstellungsparametern).

artboard: {
				width: 1000,
				height: 1000,
			},

💡 Hinweise:

• Das artboard ist rein visuell – alle Shapes können sich auch außerhalb dieses Bereichs befinden, solange sie innerhalb des canvas liegen.

• Wenn du ein bestimmtes Seitenverhältnis möchtest (z. B. A4 oder Quadrat), kannst du die width und height entsprechend setzen.

• In Kombination mit zooming und canvas kannst du gezielt steuern, wie viel Platz Nutzer:innen für ihre Zeichnung haben – und was beim Start sofort sichtbar ist.

Tipp: Du kannst durchaus auch dynamische Werte aus Ninox Feldern oderBerechnungen hier einsetzen. Beispielsweise haben wir Workflows entwickelt, in denen wir die Größe des artboards abhängig von der Größe des Hintergrundshapes gemacht haben. Dadurch scrollt der User nicht so viel hin und her.

🔸 stickerTypes

Der stickerTypes-Block erlaubt es dir, individuelle Sticker bereitzustellen, die Nutzer im Zeichenbereich platzieren können – z. B. Icons, Symbole, Marker oder Piktogramme.

Jeder Sticker ist ein Objekt mit Eigenschaften wie Bildquelle, Größe und Positionierungsverhalten.
Ideal für Use Cases wie:

• 🔧 Technische Markierungen auf Fotos oder Plänen

• 📍 Standortpins auf Karten oder Grundrissen

• 👕 Qualitätskontrollen in der Modebranche

• 🏥 Medizinische Annotationen auf Körpersilhouetten

🔧 Struktur je Sticker:

• uid: Eindeutige ID des Stickers (z. B. "pin_rot").

• image: Base64-Daten-URL oder URL zur Grafik.

• icon (optional): Vorschaubild im Sticker-Menü (wenn abweichend vom Stickerbild).

• label: Textbezeichnung des Stickers im Menü. (Später wichtig, wenn ein bestimmter Sticker dynamisch zu einem anderen Sticker geändert werden soll, z. B. bei erledigt)

• width: Breite des Stickers in Pixeln.

• height: Höhe des Stickers in Pixeln.

• originX: Horizontaler Ankerpunkt (0 = links, 0.5 = Mitte, 1 = rechts).

• originY: Vertikaler Ankerpunkt (0 = oben, 0.5 = Mitte, 1 = unten).

• default (optional): Wenn true, wird dieser Sticker vorausgewählt.

stickerTypes:[{
				uid: uid,
				image: "stickerBase64",
				icon: base64,
				label: Name,
				width: 100,
				height: 100,
				originX: 0.5,
				originY: 0.89,
				default: false
			}],

💡 Hinweise:

• Die Sticker erscheinen im linken Menü des Widgets unter „Stickers“.

• Beim Platzieren eines Stickers wird seine Position automatisch anhand von originX / originY berechnet. So kannst du z. B. Marker exakt mit ihrer Spitze am Klickpunkt ausrichten.

• Du kannst beliebig viele Sticker definieren – z. B. farbige Pins, Icons für Mängel, Emojis, Status-Symbole etc.

• Die Sticker-Grafiken sollten idealerweise als SVG oder als PNG mit transparentem Hintergrund vorbereitet sein.

Tipp: Erstell dir eine Ninox-Tabelle mit Stickern. Lade deine SVG oder PNG Datei in ein Bildfeld. Nutze die Ninox Funktion loadFileAsBase64URL(Image)in einem Funktionsfeld, um das base64 für deine Stickerliste im Drawing zu erhalten. Natürlich kannst du in deiner Stickerliste auch gleich Breite, Höhe, Name … definieren.

🔸 shapes

Der shapes-Block definiert die Liste der Zeichenobjekten, die du im Widget hinterlegst. Jedes Objekt im Array entspricht einem gespeicherten Eintrag in deiner tableId und enthält die nötigen Informationen zur Darstellung, Position und Interaktion.

Wichtig: Um Drawing korrekt nutzen zu können, ist es essentiell eine Tabelle Shapes aufzusetzen und darin mindestens ein Textfeld helper_shapeDataValue anzulegen.

🔧 Struktur je Shape:

• shapeId: Die eindeutige ID des Shapes (meist die Nr des Datensatzes).

• movable: Gibt an, ob das Objekt im Zeichenbereich verschoben werden darf (true oder false).

• shapeDataValue: Die gespeicherten Formdaten (z. B. Koordinaten, Größe, Farbe, Typ etc.). Dieses Feld enthält die vom Widget generierten JSON-Daten.

• stickerUID: Wenn du einen anderen Sticker, als den initial erstellten, anzeigen möchtest (z. B. weil sich ein Status geändert hat), musst du hier die UID des entsprechenden Stickers angeben.

• sidebarItem: Optional – zeigt das Shape zusätzlich in der rechten Seitenleiste an, mit:

  • header: Titel (z. B. „Mangel #3“)

  • content: Beschreibung oder weitere Infos

shapes: (Shapes).[{
					shapeId: Nr,
					movable: true,
					shapeDataValue: helper_shapeDataValue,
					stickerUID: "",
					sidebarItem: {
						header: "Titel des Eintrags",
						content: "Beschreibung des Eintrags",
					}
				}],

🔸 rightSideContent

Der Block rightSideContent steuert, ob eine rechte Seitenleiste im Widget angezeigt wird und was dort dargestellt werden soll. Diese Sidebar ist besonders nützlich, um eine Liste der gezeichneten Elemente anzuzeigen oder zusätzliche Informationen bereitzustellen.

🔧 Struktur:

• show: true oder false – aktiviert oder deaktiviert die rechte Sidebar.

• header: (optional) Widgets oder Textinhalt für den oberen Bereich der Sidebar.

• footer: (optional) Widgets oder Textinhalt für den unteren Bereich der Sidebar.

• content: (optional) Individuelle Konfiguration des mittleren Inhalts.

Wenn show: true gesetzt ist und die Shapes sidebarItem-Einträge enthalten (siehe shapes), wird automatisch eine interaktive Liste aller Shapes angezeigt – mit Titel, Beschreibung, Hover-Effekt und Auswahlverhalten.

🔍 content-Block im Detail:

• showShapeLayers:
  Wenn true, wird eine automatische Liste aller vorhandenen Shapes (mit sidebarItem) angezeigt – inklusive Titel, Beschreibung, Hover- & Klickverhalten.
  Ideal z. B. für Mängellisten, Prüfpunkte oder Annotationen.

• customLayout:
  Optionaler benutzerdefinierter Inhalt, der im mittleren Bereich angezeigt werden kann.
  Hier kannst du z. B. HTML, Ninox-Formelergebnisse oder vorbereitete Layout-Komponenten einbinden.

Wenn showShapeLayers aktiv ist, wird die Shape-Liste angezeigt. Wenn du stattdessen ein eigenes Layout anzeigen willst, kannst du customLayout nutzen.

rightSideContent: {
            show: true,
            header: "",
            content: {
                showShapeLayers: true,
                customLayout: "test"
            },
            footer: ""
        }

💡 Hinweise:

• Die Sidebar funktioniert besonders gut, wenn du Shapes mit sidebarItem-Infos versiehst.

• Der Bereich kann je nach Use Case rein informativ, interaktiv oder visuell angepasst werden.

• Du kannst customLayout auch dynamisch aus einem Ninox-Feld übernehmen – z. B. über eine Textformel oder HTML-Komponente.

• Wenn du beides kombinieren möchtest (Layer-Liste + eigene Inhalte), kannst du customLayout über dem Footer einfügen und showShapeLayers auf true lassen.

🔧 Kein Entwickler? Kein Problem.

Du hast keine Zeit, dich mit Code und Konfiguration zu beschäftigen? Wir vom arcRider-Team bieten dir einen Installations- und Einrichtungssupport für das arcCustomDrawing-Widget an – maßgeschneidert auf deinen Anwendungsfall.

➡️ Schreib uns einfach an office@arc-rider.com.

Wir helfen dir, in wenigen Stunden loszulegen – ohne technisches Kopfzerbrechen.