Static images on canvas

GoJS
1

Is it possible to anchor or otherwise fix a single part/node to a section of the canvas regardless of diagram settings?
I would like to display an image i.e. a watermark in the upper-left portion of the screen regardless of how the diagram is scaled or what parts are drawn on the canvas.
The diagram should initially center all parts in the existing diagram on load and then add the watermark at a fixed location.

I’ve tried several variations with the location and coordinate settings but once the diagram.intiialContentAlignment is set the image is always displayed in the center of the screen. Here’s the stripped down version I’ve been trying to get to work:


var diagram = new go.Diagram("myDiagramDiv");
diagram.initialContentAlignment = go.Spot.Center;
var goMake = go.GraphObject.make;
var locationTestTemplate = goMake (go.Part, "Position",
                                    {
                                        opacity: 0.2,
                                    },  new go.Binding("position", "pos", go.Point.parse),
                                   <span ="Apple-tab-span" style="white-space:pre">	</span>goMake (go.Picture, new go.Binding("source", "src")));
<span ="Apple-tab-span" style="white-space:pre">	</span>diagram.nodeTemplateMap.add("locationTestTemplate", locationTestTemplate);
var loctest = { key: "test", category: "locationTestTemplate", pos: "0 0" , src: "http://placekitten.com/g/30/30"};
<span style="line-height: 1.4;">diagram.model.addNodeData(loctest);</span>

<mytubeelement id=“myTubeRelayElementToPage” =“preferencesUpdated” ="“bundle”:“label_delimitor”:":",“percentage”:"%",“smart_buffer”:“Smart Buffer”,“start_playing_when_buffered”:“Start playing when buffered”,"":"",“desktop_notification”:“Desktop Notification”,“continuation_on_next_line”:"-",“loop”:“Loop”,“only_notify”:“Only Notify”,“estimated_time”:“Estimated Time”,“global_preferences”:“Global Preferences”,“no_notification_suped_on_your_browser”:“No notification style suped on your browser version”,“video_buffered”:“Video Buffered”,“buffered”:“Buffered”,“hyphen”:"-",“buffered_message”:“The video has been buffered as requested and is ready to play.”,“not_suped”:“Not Suped”,“on”:“On”,“off”:“Off”,“click_to_enable_for__site”:“Click to enable for site”,“desktop_notification_denied”:“You have denied permission for desktop notification for site”,“notification_status_delimitor”:";",“error”:“Error”,“adblock_interferance_message”:“Adblock or similar extension is known to interfere with SmartVideo. Please add to adblock whitelist.”,“calculating”:“Calculating”,“waiting”:“Waiting”,“will_start_buffering_when_initialized”:“Will start buffering when initialized”,“will_start_playing_when_initialized”:“Will start playing when initialized”,“completed”:“Completed”,“buffering_stalled”:“Buffering is stalled. Will stop.”,“stopped”:“Stopped”,“hr”:“Hr”,“min”:“Min”,“sec”:“Sec”,“any_moment”:“Any Moment”,“popup_donate_to”:“Donate to”,“extension_id”:“lnkdbjbjpnpjeciipoaflmpcddinpjjp”,“prefs”:“desktopNotification”:true,“Notification”:true,“logLevel”:0,“enable”:true,“loop”:false,“hidePopup”:false,“autoPlay”:false,“autoBuffer”:false,“autoPlayOnBuffer”:false,“autoPlayOnBufferPercentage”:42,“autoPlayOnSmartBuffer”:true,“quality”:“default”,“fshd”:false,“onlyNotification”:false,“enableFullScreen”:true,“saveBandwidth”:false,“hideAnnotations”:false,“turnOffPagedBuffering”:false"><mytubeelement id=“myTubeRelayElementToTab” =“relayPrefs” ="“loadBundle”:true">

2

This sample demonstrates what I think you are looking for: Fixed Title

Alternatively, just implement the watermark as an HTML element that overlaps with the Diagram’s DIV.

3

perfect! thanks much! <mytubeelement id=“myTubeRelayElementToPage” =“preferencesUpdated” ="“bundle”:“label_delimitor”:":",“percentage”:"%",“smart_buffer”:“Smart Buffer”,“start_playing_when_buffered”:“Start playing when buffered”,"":"",“desktop_notification”:“Desktop Notification”,“continuation_on_next_line”:"-",“loop”:“Loop”,“only_notify”:“Only Notify”,“estimated_time”:“Estimated Time”,“global_preferences”:“Global Preferences”,“no_notification_suped_on_your_browser”:“No notification style suped on your browser version”,“video_buffered”:“Video Buffered”,“buffered”:“Buffered”,“hyphen”:"-",“buffered_message”:“The video has been buffered as requested and is ready to play.”,“not_suped”:“Not Suped”,“on”:“On”,“off”:“Off”,“click_to_enable_for__site”:“Click to enable for site”,“desktop_notification_denied”:“You have denied permission for desktop notification for site”,“notification_status_delimitor”:";",“error”:“Error”,“adblock_interferance_message”:“Adblock or similar extension is known to interfere with SmartVideo. Please add to adblock whitelist.”,“calculating”:“Calculating”,“waiting”:“Waiting”,“will_start_buffering_when_initialized”:“Will start buffering when initialized”,“will_start_playing_when_initialized”:“Will start playing when initialized”,“completed”:“Completed”,“buffering_stalled”:“Buffering is stalled. Will stop.”,“stopped”:“Stopped”,“hr”:“Hr”,“min”:“Min”,“sec”:“Sec”,“any_moment”:“Any Moment”,“popup_donate_to”:“Donate to”,“extension_id”:“lnkdbjbjpnpjeciipoaflmpcddinpjjp”,“prefs”:“desktopNotification”:true,“Notification”:true,“logLevel”:0,“enable”:true,“loop”:false,“hidePopup”:false,“autoPlay”:false,“autoBuffer”:false,“autoPlayOnBuffer”:false,“autoPlayOnBufferPercentage”:42,“autoPlayOnSmartBuffer”:true,“quality”:“default”,“fshd”:false,“onlyNotification”:false,“enableFullScreen”:true,“saveBandwidth”:false,“hideAnnotations”:false,“turnOffPagedBuffering”:false"><mytubeelement id=“myTubeRelayElementToTab” =“relayPrefs” ="“loadBundle”:true">

4

That URL doesn’t seem to work anymore and I don’t see a current sample with that name.

Do you know a new sample that shows how to do this?

5

It’s covered by the Introduction page GoJS Legends and Titles -- Northwoods Software.

Also consider this sample: Kitten Monitor.

And also consider what I said above – using an HTML element that overlaps the Diagram’s DIV element.