I'm currently trying to make my own Custom Receiver on a Chromecast based project. After thinking about building it from scratch, I chose to use the sample provided here since I'm a beginner in JS and that I couldn't find any guide or tutorial on how to build it.
Now after some tests and research, I understood that the sample custom receiver hasn't any image display functionalities built-in and that I have to write the logic myself.
However the documentation provided (here and there) isn't clear enough for my understanding and I don't get what I need to implement and what isn't necessary. It only explains what functions do but not when you should use them.
So what I understood is:
I have to place an <img src="" /> tag in the html file to display the images.
There is no state when you display images
The functionnalities are very limited when manipulating images
From what I understood of the code, in the sampleplayer.CastPlayer constructor we create the mediaElement_ like this: this.mediaElement_ = (this.element_.querySelector('video'));.
We then use it to create the mediaManager_:
this.mediaManager_ = new cast.receiver.MediaManager(this.mediaElement_);.
But then how do I do to include the image part? Should I create something like a this.imageElement_ in the same fashion as the mediaElement?
Then what do I pass to the mediaManager_?
Do I have to create a second manager for images only?
I read that someone wrote a function like this:
sampleplayer.CastPlayer.prototype.loadImage_ = function(info) {
this.log_('loadImage_');
var url = info.message.media.contentId;
document.getElementById("androidImage").src=url;
this.setState_(sampleplayer.State.PLAYING, true); //That's not good according to answers
};
It seems to have worked for him but I don't know what he did in the rest of the code...
It might look like silly questions to you but it is very unclear to me.
Could you help me figuring out the steps/functions I have to implement?
An answer like:
In the CastPlayer constructor you should:
- Add this.
- Modify that.
Add a ____ function to display the image
Create a message Bus like so: ______
Would be awesome :)
Thx in advance.
Related
Currently I am looking for efficient (means made by someone else) way to represent JS objects inside HTML page. Ideally I should provide arbitrary object and library should make dropdown or popup with all properties of that object that can be selected and viewed as well. Final goal is to make object representation as close to modern JS debugger interface as possible.
In case if I didn't get my point accross I want to find libarary that would allow to represent object on web page as on picture below.
So I would like to ask if any of you know a libarary that can help me to do this.
Update: I found that firebug-lite-debug.js has similar functionality but such approach requires unknown amount of work to extract code I need
Upadate: I ended up using json-formatter-js. It is able to render any js object and do it in lasy way so only expanded part of object is taken into account. Therefore gigantic things as window can be displayed.
It sounds like you just want a pre-made widget that will display an object as HTML?
I'd probably start with something like html-stringify
It spits out a mostly clean HTML string with basic formatting. You could use that directly in your page, or add some additional styles to help match the style of your page. You can try it out on RunKit to see if it'll meet your needs.
(RunKit is a nice way to try out packages like this, so you can see what the output looks like without having to install them.)
I'm trying to build a test-system for edge-animate composition, so I can load different compositions and test if they display correctly, change their customizable fields and so on. I tried the Edge Commons' EC.loadComposition function, but I have a problem with passing the composition-name from the outer html.
I've got the Main Composition that contains the field, where the external comps will be loaded. I managed to run the "Composition Loader" example (http://edgedocks.com/content/2013/12/nesting-animate-compositions-composition-loader-edge-commons), but I would love to give the user a chance to name a composition to load, from browser-level.
I guess it's going to have somthing in common with Bootstrapping the Compositions, but I'm fairly new to html/JS/Edge and I can't make it work as I want to.
Do you know any solutions, or directions to look at?
Thanks!
Ok, I found a workaround:
In the Bootstrap callback, I call AdobeEdge.Symbol.bindElementAction() and then bind a loading function to a symbol, that works as a button. With this approach, I can use JS or PHP to fill the composition-name argument of that function.
My Code is totally cramped, because I copied it from the edge-generated .js file, but it looks like this:
AdobeEdge.bootstrapCallback(function(compId) {
comp = AdobeEdge.getComposition(compId);
AdobeEdge.Symbol.bindElementAction(compId, 'stage', "${Button1}", "click", function(sym,e){
var loadedComp=EC.loadComposition(document.getElementById('idCard').value ,sym.$("Content"));loadedComp.done(function(comp)
{ loadedStage=comp.getStage();});});});
Sorry for the mess, but it contains so much nested definitions that I'm unable to format it to look good ;(
If you find any better way to solve this, let me know!
I am trying to create an interactive tutorial for learning an API. I've been googling my options for an entire day now. I came across ace, code mirror etc. but I'm not sure how I can use them in my case.
What I wish to do is that when the user clicks a button, a javascript code linked to it should open up in an editor on the same webpage. This would aid the users to see how the code is working and give them scope to modify and learn.
I know its not a constructive question but any help is appreciated! Thanks!
you can just wantch here how it is done
They made it with knockout MVVM but you can use angular or anything else you like.
I used tags to store my code and displayed it using codemirror's setValue property mentioned by #georg.
This is probably a very simple thing, but I'm very new to Javascript and HTML5 and can't seem to find an answer to my question.
I'm currently developing an app for Samsung Smart TV.
I currently have 2 major files: Main.js and index.html, in which most of my code is written. Also, I have a style sheet called Main.css.
My problem: I have a button the screen, that when pressing it (that is, when pushing enter on the remote), I want the screen to change in to a completely different one (from welcome screen to admin settings). How do I do that??
Hope my question is not too general. Any help would be appreciated.
You should divide your index.html with divs that represent a scene. To make it easy please use Basic Project it will generate a pattern to split the html/css/js like different pages and you only need to call sf.scene.show("SettingsScene")
If you're using javascript project, then the answer from user3384518 is the only way. Like i mentioned above, split your body to several divs and do hide/show the div
Your question is clear, but you don't say if you use a library (or not).
So, if you use jQuery :
$('.myButtonName').click(function () {
$('#myWelcomScreenDiv').hide(200, function () {
$('#myAdminSettingsDiv').show(200);
});
});
But, if you would like to do something better, I recommend you to use a framework like Backbone.js or Angular.js.
Basically this is the first time when i ASK A QUESTION on stackoverflow. Anyway i will really appreciate if someone can point me to some direction about creating an simple product catalog app using html5+xml+js.
Well the structure is the following:
A: Home page >click> Product Categ >click> List of Products >click> Product Page Description
I'm not sure how shall i create the dynamic pages for the products to be able to extract all the products description from XML whenever click on any of product from the list page.
For example i have 10 products on the page, when i click on product X, an dynamic page with the product X 's (image, description, price) to be created, and so on.
I hope all of these things make sense for you and thanks a lot for your precious time.
For reading XML files using JavaScript, check answers from this question. For HTML5 and JavaScript in general I suggest you to check tutorials for some basics:
JavaScript - http://www.w3schools.com/js/default.asp
HTML5 - http://www.w3schools.com/html/html5_intro.asp
You can also check jQuery library tutorial. And here is jQuery's website.
I think that you should read some basics to learn how to look for more in the web and search for "how-to" connected with specified things you want to do and still don't know where to start.
EDIT:
If you want to check something that you'll need exactly at the beginning, you can check this documentation of addEventListener JavaScript method that will allow you to set action that will be invoked when particular event of the element fires. You can also check links connected to jQuery I mentioned above - jQuery is JavaScript library that makes writing JS simplier. But with both JavaScript and jQuery you have to spend some time reading documentation to know what you can do and how to achieve it.