I'm having some problems with bold text in hero cards, currently I build my hero card like so:
var workloadCard = new HeroCard
{
Title = $"Partido #{number+1}",
Subtitle = $"**{matches[number].equipo1} vs {matches[number].equipo2}**",
Text = ($"El {fecha.ToString("dd/MM/yyyy", System.Globalization.CultureInfo.InvariantCulture)} a las: \nMéxico: **{matches[number].hora.Replace(" ", "")}** \nRusia: **{horaRUs}** \nEn {matches[number].sede}"),
Images = new System.Collections.Generic.List<CardImage> { new CardImage($"{url}") },
Buttons = cardButtons,
};
The problem is that the text between ** ** is shown with asterisks instead of being bold:
$"**{matches[number].equipo1} vs {matches[number].equipo2}**
Turns into
**México vs Suecia**
Instead of
México vs Suecia
This happens in any part of the hero card but otherwise works in flat responses, what is the cause of this and how can I fix it?
Hero cards accept html tags inside them so I fixed this problem by doing this:
$"<b>{matches[number].equipo1} vs {matches[number].equipo2}</b>
Instead of this:
$"**{matches[number].equipo1} vs {matches[number].equipo2}**
Related
So this is really frustrating... on the mymaths website: https://www.mymaths.co.uk/, there's an image of a primary school child on a computer with this image address: https://www.mymaths.co.uk/assets/images/big/primary-school-photo-2.jpg.
I've tried so many things, but I can't seem to replace it.
Say I wanted to replace it with a picture of a hamburger, with this address: https://images.ctfassets.net/sd2voc54sjgs/5L6livQvCw28S04IUSAcm6/6482ea1819e86be1b4f7e85bfbbfe9a6/Blog_Header_Hamburger_History_Option.png?fm=jpg&q=80&fl=progressive&w=1100.
So far I've tried lots of threads, but this image seems to be different from images on other websites, which is why my code isn't working on it:
var images3 = document.getElementsByTagName ("img");
var i3=0;
while(i3<images3.length)
{
if(images[i3].src == "https://www.mymaths.co.uk/assets/images/big/primary-school-photo-2.jpg")
{
images[i3].src = "https://images.ctfassets.net/sd2voc54sjgs/5L6livQvCw28S04IUSAcm6/6482ea1819e86be1b4f7e85bfbbfe9a6/Blog_Header_Hamburger_History_Option.png?fm=jpg&q=80&fl=progressive&w=1100";
}
i3=i3+1;
}
Can somebody help me please? Thank you.
Well, this was new for me too. Apparently, the <picture> tag is not just a wrapper - it's a smarter version of <img>.
It allows to chose different URLs for the image tag depending on screen size and type. For example, try to do this in developper tools:
I replaced srcset for the <source> that has (max-width: 767px), which means it is active when browser window is smaller than 767px. Now if you resize browser window to make it smaller, at some point the original image will be raplaced with burger image.
So what you want to do is to replace all <source>'s srcset. This worked for me:
// Limit the list of omages on those that are under `<picture>` tag
const images = document.querySelectorAll("picture img, picture source");
// RegExp to check if we want to replace the URL
const replaceChecker = /primary-school-photo-2\.jpg$/i;
// The replacement URL
const replaceWith = "https://images.ctfassets.net/sd2voc54sjgs/5L6livQvCw28S04IUSAcm6/6482ea1819e86be1b4f7e85bfbbfe9a6/Blog_Header_Hamburger_History_Option.png?fm=jpg&q=80&fl=progressive&w=1100";
for(const image of images) {
// Pick the name of the attribute we want to change based on whether it's <img> or <source>
const srcAttributeName = image.tagName.toLowerCase() == "img" ? "src" : "srcset";
const oldURL = image[srcAttributeName] + "";
if(replaceChecker.test(oldURL)) {
image[srcAttributeName] = replaceWith;
}
}
You could improve that by checking the media attribute and if it says minimum screen width, use URL for smaller image of the hamburger. That is set by the w GET param in the hamburger image's URL.
I know that markdown is supported on the HeroCard "text" field value, even though I couldn't make it work(Tested on MSTeams):
Code
this.bot.dialog("sendCard", (session, args, next) => {
session.sendTyping();
const card = new builder.HeroCard(session);
card.title("Title");
card.subtitle("Subtitle");
card.text("This is some *mardown* text! \n\n - one \n\n - two");
const msg = new builder.Message(session);
msg.textFormat("markdown");
msg.attachments([
card,
]);
session.endDialog(msg);
});
I am wondering how can I achieve this formatting(From mailclark bot in MSTeams):
As you can see, it is a carousel of what I think it might be HeroCards, but they are formatted with bold, code and unordered lists on new paragraphs.
It seems to be a known issue that message attachments do not receive formatting, but how could the mailclark guys achieve it?
Edit:
Unordered list example:
Bold and code example:
As Hero Cards eventually will be convert to Rich Card send to user from bot, and from MS Teams documents at https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/bots/bots-conversations#formatting-text-content:
Microsoft Teams supports a subset of Markdown and XML (HTML) formatting tags.
Rich cards do not support Markdown or table formatting
So in MS Teams channel, markdown formatting is only supported in text only message, however, we can leverage HTML tags in Rich Card.
Please consider following code snippet:
bot.dialog('/', function (session) {
const card = new builder.HeroCard(session);
card.title("Type your question to our support team here");
card.subtitle("Or, click the ◀▶ arrows for a series of how-tos");
card.images([builder.CardImage.create(session,"<image url>")])
card.text("<p>This is some <i>mardown</i> <b>text</b>!</p> <ul><li><b>one</b></li><li><code>two</code></li></ul>")
const msg = new builder.Message(session);
msg.attachmentLayout(builder.AttachmentLayout.carousel);
msg.attachments([
card,card,card
]).toMessage();
session.send(msg);
session.endDialog("This is some *mardown* **text**! \n\n - **one** \n\n - `two`");
});
This shows in MS Teams as following:
MailClark here. You're right: it's a carousel of Hero Cards.
As Gary said, it's mostly simple HTML with a few <code> and <strong> tags.
But this is the real secret: the list is not HTML it's just regular text and the 3 lines are starting with a good old bullet character: • (we didn't like the style produced by <ul><li>).
I know how to use VS Extensibility to get the entire active document's text. Unfortunately, that only gets me the text and doesn't give me the formatting, and I want that too.
I can, for example, get an IWpfTextView but once I get it, I'm not sure what to do with it. Are there examples of actually getting all the formatting from it? I'm only really interested in text foreground/background color, that's it.
Note: I need the formatted text on every edit, so unfortunately doing cut-and-paste using the clipboard is not an option.
Possibly the simplest method is to select all of the text and copy it to the clipboard. VS puts the rich text into the clipboard, so when you paste, elsewhere, you'll get the colors (assuming you handle rich text in your destination).
Here's my not-the-simplest solution. TL;DR: you can jump to the code at https://github.com/jimmylewis/GetVSTextViewFormattedTextSample.
The VS editor uses "classifications" to show segments of text which have special meaning. These classifications can then be formatted differently according to the language and user settings.
There's an API for getting the classifications in a document, but it didn't work for me. Or other people, apparently. But we can still get the classifications through an ITagAggregator<IClassificationTag>, as described in the preceding link, or right here:
[Import]
IViewTagAggregatorFactoryService tagAggregatorFactory = null;
// in some method...
var classificationAggregator = tagAggregatorFactory.CreateTagAggregator<IClassificationTag>(textView);
var wholeBufferSpan = new SnapshotSpan(textBuffer.CurrentSnapshot, 0, textBuffer.CurrentSnapshot.Length);
var tags = classificationAggregator.GetTags(wholeBufferSpan);
Armed with these, we can rebuild the document. It's important to note that some text is not classified, so you have to piece everything together in chunks.
It's also notable that at this point, we have no idea how any of these tags are formatted - i.e. the colors used during rendering. If you want to, you can define your own mapping from IClassificationType to a color of your choice. Or, we can ask VS for what it would do using an IClassificationFormatMap. Again, remember, this is affected by user settings, Light vs. Dark theme, etc.
Either way, it could look something like this:
// Magic sauce pt1: See the example repo for an RTFStringBuilder I threw together.
RTFStringBuilder sb = new RTFStringBuilder();
var wholeBufferSpan = new SnapshotSpan(textBuffer.CurrentSnapshot, 0, textBuffer.CurrentSnapshot.Length);
// Magic sauce pt2: see the example repo, but it's basically just
// mapping the spans from the snippet above with the formatting settings
// from the IClassificationFormatMap.
var textSpans = GetTextSpansWithFormatting(textBuffer);
int currentPos = 0;
var formattedSpanEnumerator = textSpans.GetEnumerator();
while (currentPos < wholeBufferSpan.Length && formattedSpanEnumerator.MoveNext())
{
var spanToFormat = formattedSpanEnumerator.Current;
if (currentPos < spanToFormat.Span.Start)
{
int unformattedLength = spanToFormat.Span.Start - currentPos;
SnapshotSpan unformattedSpan = new SnapshotSpan(textBuffer.CurrentSnapshot, currentPos, unformattedLength);
sb.AppendText(unformattedSpan.GetText(), System.Drawing.Color.Black);
}
System.Drawing.Color textColor = GetTextColor(spanToFormat.Formatting.ForegroundBrush);
sb.AppendText(spanToFormat.Span.GetText(), textColor);
currentPos = spanToFormat.Span.End;
}
if (currentPos < wholeBufferSpan.Length)
{
// append any remaining unformatted text
SnapshotSpan unformattedSpan = new SnapshotSpan(textBuffer.CurrentSnapshot, currentPos, wholeBufferSpan.Length - currentPos);
sb.AppendText(unformattedSpan.GetText(), System.Drawing.Color.Black);
}
return sb.ToString();
Hope this helps with whatever you're doing. The example repo will ask if you you want the formatted text in the clipboard after each edit, but that was just a dirty way that I could test and see that it worked. It's annoying, but it was just a PoC.
With a Xamarin.iOS project, I'm trying to use a Unicode character (gear icon) for the left bar button item in my top menu. I could use a custom icon for this, bit I read on some iOS posts here on SO that you can also use Unicode characters. So I followed an example, translated form Swift and it all works fine, except that my button title is always the literal Unicode string instead of the decoded gear icon.
Also, the code below will not build because that string ("\u{2699}") needs to be escaped. I've used \ and # escaping methods but I always end up with just the literal string in my button. Any ideas what I'm doing wrong?
var ltButton = new UIBarButtonItem();
ltButton.Title = new NSString("\u{2699}", NSStringEncoding.UTF8);
ltButton.Style = UIBarButtonItemStyle.Plain;
var font = UIFont.FromName("Helvetica", 18.0f);
ltButton.SetTitleTextAttributes(new UITextAttributes { Font = font }, UIControlState.Normal);
this.NavigationItem.SetLeftBarButtonItem(ltButton, true);
This is all you need:
ltButton.Title = "\u2699";
ltButton.Title = "\uD83D\uDE03";
I want to display text in multiple lines in the pin's label when it is clicked, but when I have a very long text to be displayed in Address it shows me only a part of it and rest of it remains hidden eg: 'Street 12A...'.
How can I make the label to display the whole text on clicking it and if possible then in multiple lines using Xamarin.Forms.Maps.
var pin = new Pin
{
Type = PinType.Place,
Position = position,
Label = "Label Name",
Address = "some text..........."
};
map.Pins.Add(pin);
You would be to create a custom render for map on each platform to replace the standard iOS pin annotations, Android pin markers, etc...
Xamarin has a full guide for creating custom pin annotations/markers and thus you can create the UI elements you need to display your full text.
Ref: https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/map/