{"id":166,"date":"2020-11-29T11:58:50","date_gmt":"2020-11-29T19:58:50","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/math-in-office\/?p=166"},"modified":"2020-11-29T11:58:50","modified_gmt":"2020-11-29T19:58:50","slug":"displaying-enlarged-images-in-popup-window","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/math-in-office\/displaying-enlarged-images-in-popup-window\/","title":{"rendered":"Displaying Enlarged Images in Popup Window"},"content":{"rendered":"

RichEdit clients may want to zoom images that the user clicks on. To satisfy this need, the Microsoft 365 version of RichEdit supports the EN_IMAGE notification, which notifies the RichEdit client when the mouse moves over an image or the image is clicked on. The client can then display an enlarged image in a new window by sending the RichEdit control an EM_DISPLAYIMAGE message. This approach is efficient since the image is already in the RichEdit control’s memory and doesn’t have to be streamed out and back into another control. RichEdit calls the Windows Imaging Component<\/a> (WIC) to create a bitmap scaled to the new dimensions. This is important since otherwise the image would be blurry. The code assumes that the new window has the same resolution as the RichEdit window. This post documents the EN_IMAGE notification and the EM_DISPLAYIMAGE message.<\/p>\n

EN_IMAGE notification<\/h2>\n

Enable the EN_IMAGE notification by sending an EM_SETEVENTMASK<\/a> message with lParam equal to an event mask that includes the ENM_IMAGE flag defined by<\/p>\n

#define ENM_IMAGE\u00a0\u00a0\u00a0\u00a0\u00a0 0x00000400\u00a0\u00a0\u00a0 \/\/ Event mask for mouse over image<\/p>\n

In RichEdit window controls, the notification is sent to the parent window packaged in a WM_NOTIFY message with lParam being a pointer to an ENIMAGE struct defined by<\/p>\n

typedef struct _enimage\r\n{\r\n   NMHDR\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 nmhdr;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Notification header\r\n   UINT\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0msg;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Message causing notification, e.g. WM_LBUTTONDOWN\r\n   WPARAM\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 wParam;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Msg wParam\r\n   LPARAM\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 lParam;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Msg lParam\r\n   IMAGEDATA\u00a0\u00a0\u00a0\u00a0 ImageData;\u00a0\u00a0\u00a0 \/\/ Image Data\r\n} ENIMAGE;\r\n<\/pre>\n
where nmhdr.code = EN_IMAGE defined by<\/p>\n
#define EN_IMAGE\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 0x0721 \/\/ Notification when mouse is over an image<\/p>\n
IMAGEDATA is defined by<\/p>\n
typedef struct _imagedata\r\n{\r\n   LONG\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0cp;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ cp of image in RichEdit control\r\n   IMAGETYPE\u00a0\u00a0\u00a0\u00a0 Type;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Image type\r\n   LONG\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Width;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Image width in HIMETRIC units\r\n   LONG\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Height;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Image height in HIMETRIC units\r\n} IMAGEDATA;\r\n<\/pre>\n
and IMAGETYPE is defined by<\/p>\n
typedef enum _IMAGETYPE\r\n{\r\n   IT_NONE,\r\n   IT_BMP,\r\n   IT_GIF,\r\n   IT_JPEG,\r\n   IT_PNG,\r\n   IT_ICO,\r\n   IT_TIFF,\r\n   IT_WMP,\r\n   IT_UNKNOWN\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ User installed WIC codec\r\n} IMAGETYPE;\r\n<\/pre>\n
In windowless RichEdit controls, EN_IMAGE is passed to the host via an ITextHost::TxNotify() call. If the image is singly selected, RichEdit doesn\u2019t send EN_IMAGE notifications so that users can use the mouse to resize the image.<\/p>\n
EM_DISPLAYIMAGE<\/h2>\n
Clients can display an enlarged image whenever desired by sending the EM_DISPLAYIMAGE message defined by<\/p>\n
#define EM_DISPLAYIMAGE\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 (WM_USER + 386)<\/p>\n
The message wParam is a pointer to an IMAGEDATA structure defined above. The message lParam is an ID2D1RenderTarget* for the target window. The client should supply the desired new IMAGEDATA::Width and Height in HIMETRIC units. For example, on receipt of an EN_IMAGE notification, the client can use the data in the IMAGEDATA struct included in the ENIMAGE notification struct. The Width and Height values determine the image aspect ratio, which should be maintained in the enlarged image.<\/p>\n
Here is an example with an image of the Matterhorn in the edit control (upper image) and an enlarged image below it<\/p>\n
\"Image<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
RichEdit clients may want to zoom images that the user clicks on. To satisfy this need, the Microsoft 365 version of RichEdit supports the EN_IMAGE notification, which notifies the RichEdit client when the mouse moves over an image or the image is clicked on. The client can then display an enlarged image in a new […]<\/p>\n","protected":false},"author":40611,"featured_media":55,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-166","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-math-in-office"],"acf":[],"blog_post_summary":"
RichEdit clients may want to zoom images that the user clicks on. To satisfy this need, the Microsoft 365 version of RichEdit supports the EN_IMAGE notification, which notifies the RichEdit client when the mouse moves over an image or the image is clicked on. The client can then display an enlarged image in a new […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/math-in-office\/wp-json\/wp\/v2\/posts\/166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/math-in-office\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/math-in-office\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/math-in-office\/wp-json\/wp\/v2\/users\/40611"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/math-in-office\/wp-json\/wp\/v2\/comments?post=166"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/math-in-office\/wp-json\/wp\/v2\/posts\/166\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/math-in-office\/wp-json\/wp\/v2\/media\/55"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/math-in-office\/wp-json\/wp\/v2\/media?parent=166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/math-in-office\/wp-json\/wp\/v2\/categories?post=166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/math-in-office\/wp-json\/wp\/v2\/tags?post=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}