question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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);

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
robinsedlaczekcommented, 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?

1reaction
matthidingercommented, 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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Implementing a Renderer - Adaptive Cards
An AdaptiveCard consists of a body and actions . The body is a collection of CardElement s that a renderer will enumerate and...
Read more >
Adaptive Cards
Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange. When delivered to a specific app, ......
Read more >
Adaptive card image partially rendered in MS Teams
I'm generating dynamic images and include them as part of the adaptive card, the images are relatively small only 60kb, when I reply...
Read more >
Adaptive Cards in Microsoft Teams using Power Automate
We will build forms in adaptive cards using text boxes, Images, ... a response 24:01 - Travel Request Adaptive Card Approval in Teams...
Read more >
The future of Adaptive Cards
Do you really want to know what is the future of Adaptive Cards? ... API to enumerate all images contained in a card;...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found