New post
Question
· Apr 21, 2016

Display images on disk in an <image> control.

#Frontend #Ensemble

Good afternoon, I have image files stored on disk. I would like to display those images in an <image> control as the end user clicks on rows in a tablepane. I already do this with image data stored in a cache database:

s imageComp = %page.%GetComponentById("ImgTab"_tLdCnt)
s imageComp.disabled=0
s tId=rsId.Get("ID")
s tPageObj=##class(My.PageObj).%OpenId(tId)
s oid=tPageObj.ImageBLOB.%Oid()
s encryptedOid=..Encrypt(oid)
s imageComp.src="%25CSP.StreamServer.cls?STREAMOID="_encryptedOid

 

In this project, I can displayed the image if I set the scrDisabled, scrMissing or src attributes to the full path and file name of the image in XData Contents.

However, the dynamic loading of the <image> control as the end user clicks on rows in a tablepane does not work.

 

I have tried setting the src attribute directly:

s imageComp=%page.%GetComponentById("ImgTab1")
s imageComp.disabled=1

s imageComp.src="E:\tmp\MyImage.jpg"

 

I have tried setting the src attriute using streams:

 

//s stream=##class(%FileCharacterStream).%New()
//s stream=##class(%Stream.FileCharacter).%New()
//s stream=##class(%Stream.FileBinary).%New()
//s stream.Filename="E:\tmp\MyImage.jpg"
//d stream.FilenameSet("E:\tmp\MyImage.jpg")
//d stream.LinkToFile("E:\tmp\MyImage.jpg")
s imageComp.src=stream
           

And

 

//s oid=##class(%FileCharacterStream).GetStreamIdForFile("E:\tmp\MyImage.jpg")
//s encryptedOid=..Encrypt(oid)
//s imageComp.src="%25CSP.StreamServer.cls?STREAMOID="_encryptedOid

 

In addition, the documentation states that This class(%FileCharacterStream) is deprecated in favor of %Stream.FileCharacter.

So I tried:

 

//s stream=##class(%Stream.FileCharacter).%New()
s stream=##class(%Stream.FileBinary).%New()
//s rc=stream.FilenameSet("E:\tmp\MyImage.jpg")
//d stream.LinkToFile(“E:\tmp\MyImage.jpg”)
s stream.Filename=("E:\tmp\MyImage.jpg")
//s stream.StreamFormatWrite=0
s imageComp.src=stream

 

I appreciate any and all feedback. Thank you.

Discussion (2)0
Log in or sign up to continue
Timothy Leavitt · Apr 21, 2016

You're really close; the key is using the stream's OID (from %Oid()). Here's a simple example; you can substitute any appropriate file path.

Class Demo.DynamicImage Extends %ZEN.Component.page
{

/// This XML block defines the contents of this page.
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<image id="myImage" src="" />
<button onclick="zenPage.ChangeImage(zen('myImage'))" caption="Dynamically Change Image" />
</page>
}

ClassMethod ChangeImage(pImage As %ZEN.Component.image) [ ZenMethod ]
{
    Set tStream = ##class(%Stream.FileBinary).%New()
    Do tStream.LinkToFile(##class(%File).ManagerDirectory()_"..\CSP\broker\images\einstein.jpg")
    Set tOID = ..Encrypt(tStream.%Oid())
    Set pImage.src = "%25CSP.StreamServer.cls?STREAMOID="_tOID
}

}

I'm really curious what that image is doing in /csp/broker/...

1 0