Tag and Import
Adding the images from this website to your OmniGraffle document is a very easy process. You simply “Tag” and then “Import!” It really is that effortless. Just follow the instructions below.
var slds = document.windows[0].selection.solids
if (slds.length == 1){
slds[0].setUserData('AAAAA','BBBBB')
slds[0].notes = 'DDDDD'
slds[0].setUserData('EEEEE','FFFFF')
slds[0].name = 'BBBBB'
} else {
alert = new Alert('SELECTION ERROR','Please select a single graphic.')
alert.show(function(result){})
}
var cnvs = document.windows[0].selection.canvas
var dataKey = 'SKU'
var urlKey = 'URL'
var keyValues = new Array()
var urlValues = new Array()
for(i = 0; i < cnvs.graphics.length; i++){
aGraph = cnvs.graphics[i]
aValue = aGraph.getUserData(dataKey)
if(aValue != null){
keyValues.push(aValue)
u = aGraph.getUserData(urlKey)
if(u != null){
urlValues.push(u)
} else {
urlValues.push('')
}
}
}
var valCount = keyValues.length
for (i = 0; i < valCount; i++) {
var keyValue = keyValues[i]
aStr = urlValues[i]
fileURL = URL.fromString(aStr)
fileURL.fetch((function(keyValue, data) {
aGraph = cnvs.graphicWithUserDataForKey(keyValue, dataKey)
aGraph.image = addImage(data)
}).bind(this, keyValue))
}
var cnvs = document.windows[0].selection.canvas
var dataKey = 'SKU'
var fileExtension = 'jpg'
var keyValues = new Array()
for(i = 0; i < cnvs.graphics.length; i++){
aGraph = cnvs.graphics[i]
aValue = aGraph.getUserData(dataKey)
if(aValue != null){keyValues.push(aValue)}
}
var valCount = keyValues.length
if(valCount == 0){
new Alert('MISSING DATA KEYS','No graphics are assigned the data key:\n\n\t' + dataKey).show(function(result){throw new Error('script cancelled')})
} else {
fldrURL = URL.fromString('https://omni-automation.com/omnigraffle/tagged-import/gfx/')
if (fldrURL == null){throw new Error('user cancelled')}
fldrURLstr = fldrURL.string
for (i = 0; i < valCount; i++) {
var keyValue = keyValues[i]
aStr = fldrURLstr + keyValue + '.' + fileExtension
console.log(aStr)
fileURL = URL.fromString(aStr)
fileURL.fetch((function(keyValue, data) {
aGraph = cnvs.graphicWithUserDataForKey(keyValue, dataKey)
aGraph.image = addImage(data)
}).bind(this, keyValue))
}
}
// default settings
var defaultOffset = 12
var defaultTextSize = 14
// prompt for placement location
var alert = new Alert("Notes Placement", "Should the notes be placed to the left, right, or below the selected graphic?")
alert.addOption("Right")
alert.addOption("Left")
alert.addOption("Below")
alert.show(function(result){
var cnvs = document.windows[0].selection.canvas
var slds = document.windows[0].selection.solids
if (result == 0){
slds.forEach(function(sld){
sName = sld.name
sNotes = sld.notes
cRect = sld.geometry
nRect = new Rect(cRect.maxX + defaultOffset, cRect.minY, cRect.width, cRect.height)
aShape = cnvs.addShape('Rectangle',nRect)
aShape.text = sNotes
aShape.name = sName
aShape.shadowColor = null
aShape.strokeType = null
aShape.fillType = null
aShape.autosizing = TextAutosizing.Overflow
aShape.textHorizontalAlignment = HorizontalTextAlignment.Left
aShape.textHorizontalPadding = 0
aShape.textVerticalPlacement = VerticalTextPlacement.Top
aShape.textVerticalPadding = 0
aShape.textSize = defaultTextSize
})
} else if (result == 1){
slds.forEach(function(sld){
sName = sld.name
sNotes = sld.notes
cRect = sld.geometry
nRect = new Rect(cRect.minX - defaultOffset - cRect.width, cRect.minY, cRect.width, cRect.height)
aShape = cnvs.addShape('Rectangle',nRect)
aShape.text = sNotes
aShape.name = sName
aShape.shadowColor = null
aShape.strokeType = null
aShape.fillType = null
aShape.autosizing = TextAutosizing.Overflow
aShape.textHorizontalAlignment = HorizontalTextAlignment.Left
aShape.textHorizontalPadding = 0
aShape.textVerticalPlacement = VerticalTextPlacement.Top
aShape.textVerticalPadding = 0
aShape.textSize = defaultTextSize
})
} else {
slds.forEach(function(sld){
sName = sld.name
sNotes = sld.notes
cRect = sld.geometry
nRect = new Rect(cRect.minX, cRect.maxY + defaultOffset, cRect.width, cRect.height)
aShape = cnvs.addShape('Rectangle',nRect)
aShape.text = sNotes
aShape.name = sName
aShape.shadowColor = null
aShape.strokeType = null
aShape.fillType = null
aShape.autosizing = TextAutosizing.Overflow
aShape.textHorizontalAlignment = HorizontalTextAlignment.Left
aShape.textHorizontalPadding = 0
aShape.textVerticalPlacement = VerticalTextPlacement.Top
aShape.textVerticalPadding = 0
aShape.textSize = defaultTextSize
})
}
})
INSTRUCTIONS:
- First, in the example OmniGraffle document, select a single graphic (not a line).
- Click|tap the image on this page you wish to link to the selected graphic. A user data key and value will be assigned to the selected graphic.
- Repeat the previous step for each of the graphics in the OmniGraffle document you want to contain images.
- After you have completed tagging all of the graphics you wish to fill, TAP|CLICK the Import Images button to import the images from this webpage into the tagged graphics.
- To extract and place the notes for tagged graphics, select the tagged graphic(s), then TAP|CLICK the Place Notes button to create a text box containing the notes, to the right of the selected graphic(s).
 |
 |
 |
 |
| 129775 | 323037 | 323698 | 327764 |
 |
 |
 |
 |
| 328393 | 330039 | 330334 | 330361 |
 |
 |
 |
 |
| 330441 | 330452 | 330575 | 330803 |
 |
 |
 |
 |
| 331133 | 331183 | 331731 | 331996 |
 |
 |
||
| 332822 | 333163 |