New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] API for rendering an adaptive card to an image #930

Closed
robinsedlaczek opened this Issue Nov 12, 2017 · 9 comments

Comments

Projects
None yet
4 participants
@robinsedlaczek

robinsedlaczek commented Nov 12, 2017

Issue Description

Adaptive cards are still not completely supported in e.g. Cortana, Skype and Teams. A roadmap is not really around. So adapting the Adaptive Card technology/standard is impeded, because people cannot bring their already existing adaptive card implementations to those platforms. Thus, people are stopped form releasing features.

Instead of waiting for Adaptive Cards being completely supported by a platform, we can simply use images: An adaptive card could be rendered to an image that can be used in conversation messages on channels that are not (yet) supporting adaptive cards or even in all new channels that will appear in the future.

Rendering cards to an image is shown in the WPFVisualizer sample (https://github.com/Microsoft/AdaptiveCards/tree/master/source/dotnet/Samples/WPFVisualizer). But this is specific to WPF and does not work properly in other scenarios (based on WPF, so you have to deploy it, e.g. with a bot implementation).

Feature Request

We need a utility service that renders an adaptive card to an image. Only a simple default design is needed, e.g. the card design of WebChat. The service works async and returns at least a byte stream of the image.

Code Example

var hostConfig = new AdaptiveHostConfig()
{
    SupportsInteractivity = false
};

var renderer = new AdaptiveCardRenderer(hostConfig)
{
    // Set defined resources here.
    Resources = new ResourceDictionary()
};

Stream pngImageStream = await renderer.RenderToImageAsync(parseResult.Card);
@matthidinger

This comment has been minimized.

Show comment
Hide comment
@matthidinger

matthidinger Nov 13, 2017

Member

Hi @robbiezhang, we are hard at work on all Microsoft channels getting native adaptive cards support launched asap. Stay tuned we should have more to share before the end of the year.

As for the image service, Bot Framework currently does automatically render to image on non-MSFT channels, this works today. It's a less than ideal experience in some cases, since Actions and Inputs get dropped. You are of course able to run/host that WPF image service yourself and use it any specific channels that don't have adaptive support yet.

Member

matthidinger commented Nov 13, 2017

Hi @robbiezhang, we are hard at work on all Microsoft channels getting native adaptive cards support launched asap. Stay tuned we should have more to share before the end of the year.

As for the image service, Bot Framework currently does automatically render to image on non-MSFT channels, this works today. It's a less than ideal experience in some cases, since Actions and Inputs get dropped. You are of course able to run/host that WPF image service yourself and use it any specific channels that don't have adaptive support yet.

@robinsedlaczek

This comment has been minimized.

Show comment
Hide comment
@robinsedlaczek

robinsedlaczek Nov 14, 2017

Why not providing the code for rendering as an image to non-MSFT channels to the community if it already exists? Only the basic rendering part? As I said, reduced, without special formatting and design for the target channel/platform would be enough.

I tried to use the WPF image service to render to an image within my bot. But it does not work properly. E.g. the method RenderToImageAsync does not return when using it within a bot implementation, adaptive image elements within a card are not rendered from time to time and at least, I don't know whether it's good to bring WPF with my bot implementation - only to render to an image.

Yes, as we can see in the images below, some channels show an image (e.g. Slack). But why not on the MSFT channels (Skype, Skype for Desktop, Cortana)? For show cases, that would be great.

01 - noadaptivecardinnewskype
02 - noadaptivecardinoldskype
03 - noadaptivecardincortana

Ok, if you say there will be something announced this year, I should perhaps wait. But a properly working image service could help in all cases you are not working on currently. And we can start show casing our bots with adaptive cards earlier. Especially when there is no official roadmap!! :)

robinsedlaczek commented Nov 14, 2017

Why not providing the code for rendering as an image to non-MSFT channels to the community if it already exists? Only the basic rendering part? As I said, reduced, without special formatting and design for the target channel/platform would be enough.

I tried to use the WPF image service to render to an image within my bot. But it does not work properly. E.g. the method RenderToImageAsync does not return when using it within a bot implementation, adaptive image elements within a card are not rendered from time to time and at least, I don't know whether it's good to bring WPF with my bot implementation - only to render to an image.

Yes, as we can see in the images below, some channels show an image (e.g. Slack). But why not on the MSFT channels (Skype, Skype for Desktop, Cortana)? For show cases, that would be great.

01 - noadaptivecardinnewskype
02 - noadaptivecardinoldskype
03 - noadaptivecardincortana

Ok, if you say there will be something announced this year, I should perhaps wait. But a properly working image service could help in all cases you are not working on currently. And we can start show casing our bots with adaptive cards earlier. Especially when there is no official roadmap!! :)

@IntranetFactory

This comment has been minimized.

Show comment
Hide comment
@IntranetFactory

IntranetFactory Nov 18, 2017

@matthidinger is the image service you suggest https://github.com/Microsoft/AdaptiveCards/tree/master/source/dotnet/Samples/ImageRendererServer ?

That sample seems to work, but the resulting images are quite low quality and blurry. So I'm wondering if that is really the correct service?

IntranetFactory commented Nov 18, 2017

@matthidinger is the image service you suggest https://github.com/Microsoft/AdaptiveCards/tree/master/source/dotnet/Samples/ImageRendererServer ?

That sample seems to work, but the resulting images are quite low quality and blurry. So I'm wondering if that is really the correct service?

@robinsedlaczek

This comment has been minimized.

Show comment
Hide comment
@robinsedlaczek

robinsedlaczek Nov 18, 2017

@matthidinger I found the new method AdaptiveCardRenderer.RenderCardToImageAsync in package AdaptiveCards.Rendering.Wpf 1.0.0-beta06 and used it in my server as well. Works fairly good! The threading was the problem with previous version of the WPF renderer that caused images not to be rendered in a card. If that is the answer on that issue, many many thanks! :)

Works pretty fine. Resolution is ok, no blurry effect (last image):

pickupinskype2
pickupinskype3
pickupincortana

pickupinskype

robinsedlaczek commented Nov 18, 2017

@matthidinger I found the new method AdaptiveCardRenderer.RenderCardToImageAsync in package AdaptiveCards.Rendering.Wpf 1.0.0-beta06 and used it in my server as well. Works fairly good! The threading was the problem with previous version of the WPF renderer that caused images not to be rendered in a card. If that is the answer on that issue, many many thanks! :)

Works pretty fine. Resolution is ok, no blurry effect (last image):

pickupinskype2
pickupinskype3
pickupincortana

pickupinskype

@matthidinger

This comment has been minimized.

Show comment
Hide comment
@matthidinger

matthidinger Nov 18, 2017

Member

That's great that you got it working, that is indeed why we provided that library! Please let us know if you run into anything or have any other feedback!

Member

matthidinger commented Nov 18, 2017

That's great that you got it working, that is indeed why we provided that library! Please let us know if you run into anything or have any other feedback!

@robinsedlaczek

This comment has been minimized.

Show comment
Hide comment
@robinsedlaczek

robinsedlaczek Nov 18, 2017

Thanks for the lib and being so fast on this feedback! :)

robinsedlaczek commented Nov 18, 2017

Thanks for the lib and being so fast on this feedback! :)

@ejadib

This comment has been minimized.

Show comment
Hide comment
@ejadib

ejadib Nov 30, 2017

@matthidinger is there anything like the AdaptiveCardRenderer.RenderCardToImageAsync but for node?

ejadib commented Nov 30, 2017

@matthidinger is there anything like the AdaptiveCardRenderer.RenderCardToImageAsync but for node?

@matthidinger

This comment has been minimized.

Show comment
Hide comment
@matthidinger

matthidinger Nov 30, 2017

Member

@ejadib there isn't such a thing at this time, but I was doing some research and it seems like there are quite a few node packages that would enable it. I don't have time to really investigate it right now but I'd be more than happy to review/integrate a PR if someone got it going

Member

matthidinger commented Nov 30, 2017

@ejadib there isn't such a thing at this time, but I was doing some research and it seems like there are quite a few node packages that would enable it. I don't have time to really investigate it right now but I'd be more than happy to review/integrate a PR if someone got it going

@robinsedlaczek

This comment has been minimized.

Show comment
Hide comment
@robinsedlaczek

robinsedlaczek Nov 30, 2017

@matthidinger @ejadib I felt free to create issue #1012 for the NodeJS implementation. Hope that's ok. Could you please provide your results of package evaluation?

robinsedlaczek commented Nov 30, 2017

@matthidinger @ejadib I felt free to create issue #1012 for the NodeJS implementation. Hope that's ok. Could you please provide your results of package evaluation?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment