Adding image to annotation labels!

[bernard-ingenuity]

Hi SciChart team,

I would like to add and image to annotation without any text. Here is my code to create annotation:

` triggerHorizontalLine.set(y1: 0.0)

    triggerHorizontalLine.set(x1: 0.0)

    triggerHorizontalLine.isEditable = true

    triggerHorizontalLine.xAxisId = axisId

    triggerHorizontalLine.horizontalAlignment = .fillHorizontal

    triggerHorizontalLine.stroke =  SCISolidPenStyle(colorCode: SciChartColours.horizontalLineStyle, thickness: 2.5, strokeDashArray: [2.0, 4.0, 2.0, 4.0], antiAliasing: false)

    let lineAnnotationLabel = SCIAnnotationLabel()

    lineAnnotationLabel.labelPlacement = .topLeft

    triggerHorizontalLine.annotationSurface = .aboveChart

    triggerHorizontalLine.annotationLabels.add(lineAnnotationLabel)`

And also I added an extension:

`import SciChart

extension SCIAnnotationLabel {

func addImage(imageName: String) {
    let iconsSize = CGRect(x: 0, y: 0, width: 130, height: 130)
    let imageAttachement:NSTextAttachment = NSTextAttachment()
    imageAttachement.image = UIImage(named: imageName)
    imageAttachement.bounds = iconsSize
    self.attributedText = NSAttributedString(attachment: imageAttachement)
}

}`

And then later I add an image

self.triggerLineList[self.selectedTabIndex].annotationLabels.firstObject.addImage(imageName: ImageNames.btnDutyImage)

App is crashing in the library and here is the debug output:

2020-08-12 10:33:12.258598+1000 PokitMeter - Dev[339:20686] [Unknown process name] CGContextSetTextMatrix: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.
2020-08-12 10:33:12.258833+1000 PokitMeter - Dev[339:20686] [Unknown process name] CGContextTranslateCTM: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.
2020-08-12 10:33:12.258948+1000 PokitMeter - Dev[339:20686] [Unknown process name] CGContextRotateCTM: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.
2020-08-12 10:33:12.259041+1000 PokitMeter - Dev[339:20686] [Unknown process name] CGContextTranslateCTM: invalid context 0x0. If you want to see the backtrace, please set CG_CONTEXT_SHOW_BACKTRACE environmental variable.
2020-08-12 10:33:12.259352+1000 PokitMeter - Dev[339:20686] validateTextureDimensions, line 1226: error 'MTLTextureDescriptor has width of zero.'
validateTextureDimensions:1226: failed assertion `MTLTextureDescriptor has width of zero.'

If I add text to the attributed string crash issue is getting fixed but it does not show my image:

extension SCIAnnotationLabel {

    func addImage(imageName: String) {
        let iconsSize = CGRect(x: 0, y: 0, width: 130, height: 130)
        let imageAttachement:NSTextAttachment = NSTextAttachment()

        imageAttachement.image = UIImage(named: imageName)
        imageAttachement.bounds = iconsSize

        let myString:NSMutableAttributedString = NSMutableAttributedString(string: "RISING TRIGGER")
        myString.append(NSAttributedString(attachment: imageAttachement))

        self.attributedText = myString
    }
}

It would be great if you could show me how to add image to annotation labels.

Thanks

[andriypohorilko]

Hi, there.

Currently, you can't add images to annotation labels. As a workaround, you can subclass SCIAnnotationLabel, override onDraw:assetManager:, create a texture from your image and draw it instead of a label. See the code below:

import SciChart.Protected.SCIAnnotationLabel
import UIKit
class ImageLabelAnnotation: SCIAnnotationLabel {
    let image: UIImage

    init(image: UIImage) {
        self.image = image
    }
    private let textureID = SCIResourceId()

    override func onDraw(_ renderContext: ISCIRenderContext2D, assetManager: ISCIAssetManager2D) {
        let bitmap = image.sciBitmap()

        var texture = SCIAssetManagerUtil.tryGetTexture(with: textureID, size: frame.size, from: assetManager)
        if (texture == nil) {
            texture = assetManager.texture(with: image.sciBitmap())
            assetManager.storeResource(textureID, resource: texture!)
        } else {
            renderContext.update(texture!, withPixels: bitmap.data)
        }

        renderContext.drawTexture(texture!, in: self.frame)
    }
}

Let us know if it works for you