Weird rendering of the album-art-image in custom receiver - google-cast

I've developed a custom receiver which works very nicely, however the rendering of the graphic on the album art image looks weird. I've also tried the "styled media receiver", just to be sure that I haven't screwed anything up - same result.
Anyone else seen this (check the image below)? The channel logo is a transparent PNG.
Screenshot of bug

let shadowRootElement = document.querySelector( 'cast-media-player' ).shadowRoot;
let style = document.createElement( 'style' );
style.innerHTML = '#castMetadataImage { background-image: none !important; }';
shadowRootElement.appendChild( style )
Run this right after the player has been initizied and it should fix the issue.

Please share your code. It's difficult to know without any code to review. Did you follow the official guide on https://developers.google.com/cast/docs/caf_receiver/customize_ui for receivers applications? Also you need to check your sender application.

The issue seems to be related to the cssText property - removing this, fixes the rendering issue:
var fixDoubleLogoBug = function(){
try {
document.querySelector("#player")
.shadowRoot
.querySelector("#castMetadataImage").style.cssText = "";
}catch(e){
console.warn("Could not remove logo");
}
}

Related

Azure Bot Framework - Wrap card action and button text

I’m having an issue where buttons and actions in hero and adaptive cards won’t wrap text. I have searched the internet and everyone is mentioning a webchat.js and botchat.js files that can be adjusted to fix this. I can’t seem to find those in my code. Has the name changed? I know botchat was changed to webchat. Would anyone happen to know where to fix this in the Basic Bot NodeJS implementation SDK V4?
Assuming you are using webchat, you could use plain css. This worked for me:
.ac-pushButton > div {
white-space: normal !important;
}
I was able to find an answer in node_modules > wordwrap. There is a function that you can call in there to wrap any text you'd like. Thank you #Hessel for the help.
var wrap = require('wordwrap')(70);
return CardFactory.heroCard(
'',
answer,
CardFactory.images([]),
CardFactory.actions([
{
type: 'postBack',
title: wrap(YOUR_TEXT),
value: YOUR_VALUE
}
])
);

Nightmarejs screen resolution

Can I change the screen resolution in nightmarejs? (Not a viewportSize)
For example, how it works in Casperjs:
var casper = require("casper").create({
onPageInitialized: function (page) {
page.evaluate(function () {
window.screen = {
width: 1920,
height: 1080
};
});
}
});
Many thanks!
(This answer is pulled from my original answer in Nightmare #699.)
I'm not certain, but I don't think so, at least not directly. Electron's screen resolution depends on the framebuffer it's rendering to. You could use something like xvfb-run to alter the framebuffer (#224 touches on this, although for an entirely different reason).
Without more information, it's tough to answer your question. If you provide more information about what you're trying to accomplish, I'll update this answer.
Nightmare is based on electron. Refer similar question and my answer here

Auto focus camera without preview

I am running Win10 IoT on a pi 2. I need to be able to take pictures that are focused but cannot get the focus working. The application is a background app so I don't have a way of previewing the camera on a display. Is there any way of doing this? Currently I have
await _mediaCapture.StartPreviewAsync();
_mediaCapture.VideoDeviceController.FocusControl.Configure(new FocusSettings
{
Mode = FocusMode.Continuous,
WaitForFocus = true
});
await _mediaCapture.VideoDeviceController.FocusControl.FocusAsync();
await _mediaCapture.CapturePhotoToStreamAsync(ImageEncodingProperties.CreateJpeg(), stream);
await _mediaCapture.StopPreviewAsync();
but I am getting the error
WinRT information: Preview sink not set
when I try to focus. All of the examples I've seen online show that the preview is output to a control and I assume it wires a sink up automagically. Is there a way to do this manually through code? Possibly without the preview?
I wonder if the code may work even without FocusControl.
I propose you follow Customer Media Sink implementation example and use of StartPreviewToCustomSinkIdAsync method described at http://www.codeproject.com/Tips/772038/Custom-Media-Sink-for-Use-with-Media-Foundation-To
I didn't find a way to do this. I ended up converting the background app to a UI app with a Page containing a CaptureElement control in order to preview and focus.
Instead of adding a UI, just create a CaptureElement and set the source to the _mediaCapture before calling await _mediaCapture.StartPreviewAsync();
Something like:
_captureElement = new CaptureElement { Stretch = Stretch.Uniform };
_mediaCapture = new MediaCapture();
await _mediaCapture.InitializeAsync(...);
_captureElement.Source = _mediaCapture;
await _mediaCapture.StartPreviewAsync();

jspdf and addHTML / blurry font

I generate pdf file from a HTML-page via jspdf plugin addHTML.
It works but the rendered text / font is really blurry, the original HTML page is not. Rendered images are fine, only text is the problem (see attached images).
original_image: http://111900.test-my-website.de/stackoverflow/orig.jpg
blurry_image: http://111900.test-my-website.de/stackoverflow/blurry.jpg
I read all google results the last three days - maybe I am the only person in the world I have exact this problem?!?! :/
I added the following scripts in my code:
spdf.js
jspdf.plugin.from_html.js
jspdf.plugin.split_text_to_size.js
jspdf.plugin.standard_fonts_metrics.js
pdf generation code:
pdf.addHTML(document.getElementById("container"),10,15,function() {
var string = pdf.save(filename);
});
Is there a quality option in jspdf I missed?
How can I render the font?
Thanks for reply,
Thomas
I found that when creating a PDF and the text was blurred when using addHtml this was because of the width of the web page. Try using it with the browser not maximised as a test.
My solution was to add some styles to adjust the width before calling addHTML with a width parameter that matches the styles I added. I then remove the additional styles in the function that runs after addHTML.
I had the same problem and I resolved it.
Actually, the main issue here is to specify the 'dpi' to avoid having a blurred image. In addition to that, try to avoid any 'smoothening' features beacuse it may make it worse. I have taken a look around the API and other discussion about it and I came back with the following solution:
1- update your version of html2canvas : many blurring issues have been fixed after the 1.0.0-alpha release.
2- use the following properties :
const context = canvas.getContext('2d');
context.scale(2, 2);
context['dpi'] = 144;
context['imageSmoothingEnabled'] = false;
context['mozImageSmoothingEnabled'] = false;
context['oImageSmoothingEnabled'] = false;
context['webkitImageSmoothingEnabled'] = false;
context['msImageSmoothingEnabled'] = false;

raphael text() not working in ie9

Why is the following example not working in ie9?
http://jsfiddle.net/dzyyd/2/
It spits out a console error:
"Unexpected call to method or property access."
I found it pretty quickly. You created the element, but did not put it anywhere. Once it is added to the document body, everything seems to be fine.
this._width=300;
this._height=300;
this._bgSvgContainer = document.createElement("div");
//NOTE: add the created div to the body of the document so that it is displayed
document.body.appendChild(this._bgSvgContainer);
var bgCanvas = Raphael(this._bgSvgContainer, this._width, this._height);
this._bgCanvas = bgCanvas;
var num = this._bgCanvas.text(this._width-10,this._height-10,"1");
It's really hard to tell with such a tiny code-fragment (doesn't run on any browser for me), but it's probably a scope issue this in IE during events is completely different to this using the W3C event model. See: quirksmode-Event order-Problems of the Microsoft model

Resources