PIXI.js - png image resource is not loaded as image/texture, MIME type set, but without extension - pixi.js

does anybody know how to force PIXI load PNG file without PNG extension as a Sprite? Please note that this image is quite big - 2048x2048px.
Problem is, that image is generated by ASP.NET MVC controller and the result is based on parameters.
Here's how my resources.background onject looks like in google developer console:
Resource
crossOrigin: ""
data: " PNG IHDE 0sRGB gAMA... etc"
error: null
isAudio: false
isDataUrl: false
isImage: false
isJson: false
isVideo: false
isXml: false
loadType: 1
metadata: Object
name: "background"
url: "http://localhost/controller/action/123?param1=png&param2=false"
xhr: XMLHttpRequest
xhrType: "text"

The problem is, that xhrType is set to "text". Also responseType is set to "text"
Workaround (not clearly described in documentation) is setting up options for Loader.
var loaderOptions = {
loadType: PIXI.loaders.Resource.LOAD_TYPE.IMAGE,
xhrType: PIXI.loaders.Resource.XHR_RESPONSE_TYPE.BLOB
};
var imageLoader = new PIXI.loaders.Loader()
imageLoader.add("background", "http://pathToImage/noExtension?p=a", loaderOptions);

For v6 it seems to be slightly different by the way:
const loaderOptions = {
loadType: PIXI.LoaderResource.LOAD_TYPE.IMAGE,
xhrType: PIXI.LoaderResource.XHR_RESPONSE_TYPE.BLOB
};

Related

How do I remove subtitles from vlckit?

I've written an app in swift that uses the vlckit framework. I have managed to get subtitles working by using
let url = URL(string: "file://Users/lonespeaker/test-subitltle.srt")
mediaPlayer.addPlaybackSlave(url, type: .subtitle, enforce: true)
but if the user wants to disable the subtitles after selecting one, I am stuck.
I have tried the following but had no luck
let url = URL(string: "")
mediaPlayer.addPlaybackSlave(url, type: .subtitle, enforce: true)
I've googled for an answer to remove the PlaybackSlave but there doesn't seem to be an API for it.
Here is an extract of my code :
guard let url = URL(string: "file://Users/lonespeaker/test-file.mkv") else { return }
let media = VLCMedia(url: url)
mediaPlayer.media = media
mediaPlayer.delegate = self
mediaPlayer.drawable = self.movieView
mediaPlayer.play()
then in the IBAction for disabling subtitles
#IBAction func disableSubtitles(_ sender: Any) {
let url = URL(string: "")
mediaPlayer.addPlaybackSlave(url, type: .subtitle, enforce: true)
}
I would have expected the PlaybackSlave to be changed/overwritten by the new URL and therefore disabling subtitles.
I would also expect an API call to disable a Playback Slave, but there doesn't appear to be one.
Anyone help? thanks.
Your approach is too complex. You can add an infinite number of playback slaves which indeed cannot be cleared using VLCKit at this point.
However, VLC will expose a list of available subtitles tracks during playback regardless of their source (you cannot differentiate between subtitles internal to the video and those added through an input slave), which you can iterate on and display to the user. Additionally, there is the player option to set the subtitles track ID you want to show. Those IDs can be queried from the API, too (note that the IDs can be 0, 1, 2, ... but it is perfectly legal to be 201, 4022, 8444, ..., too). However, to just disable, set this option to -1.
It looks like it's not exposed by vlckit, but libvlc does offer libvlc_media_slaves_clear.
You should try adding support for it in a local vlckit fork, and if it works, open a pull request. Other people might be interested.

Kentico CKEditor Configure Style Set Dynamically

I'm using Kentico 9 and I'd like to be able to use different CK Editor style sets on different pages. I have added a style set to the styles.js file as follows.
CKEDITOR.stylesSet.add("mystyles", [{ name: "testone", element: "p" }]);
Then in the page I've added some JS as per the CK Editor web site.
if (CKEDITOR.currentInstance) {
CKEDITOR.currentInstance.config.stylesSet = "mystyles";
}
When I load the page containing the CK Editor, the style drop down contains the default style set, not the custom one I defined.
Does anyone know how to achieve this?
If I remember it right you need to define your new toolbarset in config.js (CMSAdminControls/CKEditor/config.js) dropdown.
Something like:
config.toolbar_Basic = [
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'InsertLink', 'Unlink']
];
The other thing - you need to add new option to this dropdown in Webparts application > EditableText webpart> Properties > HTMLAreaToolbar > DataSource
Here's the documentation you need to read.
The dropdown styles are defined in CMS\CMSAdminControls\CKeditor\styles.js, such as:
{ name: 'Italic Title', element: 'h2', styles: { 'font-style': 'italic' } },
You define the name of the style (the name appears in the dropdown), and then the element and style(s) that should be applied.
After editing the file, make sure you clear your browser cache.
As most Kentico admin interface pages are nested and iframe'd, the caching is pretty agressive, and your styles might not appear until cache is cleared.
Well, it's just javascript after all, so you can simply check the url in some if statement or in some switch-case and then apply styles you need. Do you need some code example? You should be able to find many of them on the internet :)
Here is how I solved my issue. I added the following to styles.js:
CKEDITOR.stylesSet.add("my-styles", [
{ name: "Paragraph", element: "p" },
{ name: "Heading 1", element: "h1" }
]);
Then, in the master page for the area of my site that needs to use the "my-styles" style set, I added:
<script>window.ckstyleset = "my-styles"</script>
Finally, in config.js I added:
var styleset = window.ckstyleset ? window.ckstyleset : "default";
config.stylesSet = styleset;
Using this approach I was able to customise the styles listed in the drop down depending on what master page was is use.

Fabric.js loadFromJSON width/height properties deserialization

I have a problem with Fabric.js.
When I'm trying to save fabric canvas like this:
var data = JSON.stringify(self.canvas.toJSON(['width', 'height']))
I get well serialized json with height and width properties.
But when I'm trying to deserialize it like that:
self.canvas.loadFromJSON(data, function () {
self.canvas.renderAll();
});
All objects init fine except height and width properties.
I saw deserialization example: http://jsfiddle.net/fmgXt/3/
If I add to json height and width properties its ignores with deserialization.
But if I set them into code - it also works well. Am I missing something?
At http://fabricjs.com/docs/fabric.StaticCanvas.html#loadFromJSON I didn't find any mentions for loadFromJSON about includedPropertiesNames list or something like that.
I've found a solution to get missing attributes at deserialization :
var object = JSON.parse(json); //use default json parser
canvas.loadFromJSON(json, function(){
canvas.width = object.width;
canvas.height = object.height;
});
This one made no luck for me.
I was able to make it working by setWidth and setHeight methods:
var object = JSON.parse(json);
canvas.loadFromJSON(json, function() {
canvas.setWidth(object.width);
canvas.setHeight(object.height);
canvas.renderAll.bind(canvas);
});

Add a MediaPicker to the General Site Settings

The current project I'm on is utilizing tenant sites. With each site, we want the ability to change the logo through out the tenant site by modifying the its settings (on the admin page, settings > general).
I've added two text fields to the site settings by following this well documented tutorial. However, I'd like the user to be able to pick the logos using the media picker instead of typing in the path.
Currently I have a LogoBarSettings part with its record, driver and handler. I'm not sure how to add the media picker to the my LogoBarSettings and even if I did, must I also create another handler, driver, and record for it? I can't imagine I would but I'm pretty stuck at this point.
Can someone provide some direction on this?
Here is my LogoBarSettings
public class LogoBarSettings : ContentPart<LogoBarSettingsPartRecord>
{
public string ImageUrl
{
get { return Record.ImageUrl; }
set { Record.ImageUrl = value; }
}
public string ImageAltText
{
get { return Record.ImageAltText; }
set { Record.ImageAltText = value; }
}
}
The MediaPicker is invoked through Javascript, so you shouldn't need to change any of your model classes. When the MediaPicker is loaded for a page, it sets up a jQuery event handler for all form elements on the page. Triggering the event orchard-admin-pickimage-open will open the MediaPicker. Supply a callback function to capture the picked media.
Here is a quick example that you can run in Firebug or Chrome Developer Tools from a page which has the MediaPicker loaded, such as a Page editor:
$('form').trigger("orchard-admin-pickimage-open", {
callback: function(data) {
console.log(data);
}})
This should print something similar to this:
Object {img: Object}
img: Object
align: ""
alt: ""
class: ""
height: "64"
html: "<img src="/Media/Default/images/test.jpg" alt="" width="64" height="64"/>"
src: "/Media/Default/images/test.jpg"
style: ""
width: "64"
__proto__: Object
__proto__: Object
The BodyPart editor integrates Orchard's MediaPicker with TinyMce, so you can start looking at that module for a more complete example, specifically Modules\TinyMce\Scripts\plugins\mediapicker\editor_plugin_src.js.

Missing FlashVars in Flash Professional CS5 and swfobject?

I have a Flash Professional CS5 movie which I'm trying to pass a parameter with swfobject. The problem is that movieclip's flashvar variables (under loaderInfo.parameters) is null.
Here is the swfobject code:
function loadSetupBar(connectId)
{
// add the setup bar to the DOM using swfobject
swfobject.embedSWF("{{setupBarSwf}}",
"swf-setup-bar",
{{gameWidth}}, $("#top-bar").height(),
"10.0.0", "{{installSwf}}",
{connectionId : connectId },
{
allowFullScreen : true,
wmode : 'opaque',
allowscriptaccess: "always"
},
{name:"swf-setup-bar"}
);
}
According to the swfobject documentation, everything seems to be ok.
Here's the corresponding code inside the FLA (A MovieClip with its own AS3 class):
var params : Object = root.loaderInfo.parameters;
var connectionId : String = params.connectionId;
if ( !params.hasOwnProperty('connectionId') )
// this line is always printed.
trace("[SetupBar-Error] loaderInfo parameters missing property 'connectionId'")
I'm not sure about what else to do.
Thanks.
EDIT: Here is a list of things I've tried that have failed:
casted root.loaderInfo to class LoaderInfo ( i.e. LoaderInfo(this.root.loaderInfo) )
passing a String literal in swfobject.embedSWF instead of param connectId
(i.e. {connectionID : 'myTestValue'})
There's a problem with the TLF TEXT control, when you add it to the stage the flashvars begins not working . just don't use it and your flashvars will work fine . i've faced the same problem and i got it solved by not using TLF TEXT control.
I hope i helped .
Best Regards
Try this:
var params:Object = LoaderInfo(this.root.loaderInfo).parameters;
var connectionID:String = params.connectionId;

Resources