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!
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 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.
I just to pop up a window that has some static text and just one Ok button.
I know java\swing has a bunch of precanned classes that can just using one line of code that makes things very clean.
All of the angular pop ups I have seem like a lot code to implement for such simple piece of code. Angugular is supposed to make things easy to implement things there must be some easy one line methods that can be called.
Thank you very much for all of your help!!
I think you'll need to compromise when it comes to Angular because from my experience there's no pre-canned solution for popups that's ALSO powerful and customizable (talking about alert). What you should do is make a wrapper over a good popup library to suit your needs.
I think what you can do is to take ui-bootstrap's modal and Wrap all of the code needed for a popup in a factory.
Doing this will make it so that you can call the factory in any of your controllers and invoke a popup behaviour in ONE clean and easy to use line.
There isn't. You have two options: 1. use uib modal from the ui bootstrap package. It take few lines of code... 2. write your own directive that wraps solution 1 to one line of code :)
Being brand new to cytoscape.js, I may be missing something obvious. Please forgive me if that is so.
I am studying the first example offered here:
reached from this page
Three files are offered -- HTML, CSS, JavaScript -- along with the impression that these three will, when loaded into my browser, create a running example.
But the HTML seems to be incomplete, possibly in two ways:
the JavaScript on the jsbin page needs to be included via a script tag
the variable cy is not defined anywhere that I can see, leading to this error message in the console: Object #cy has no method cytoscape
A stack overflow search on that error message points back to the very fine cy.js documentation, but alas, I am still in the dark: where do I initialize the "cy" object?
And best of all, where can I find a complete working example, useful for such a raw beginner as myself, something I can pore over and study until I begin to grasp the logic of this style of programming, and make use of this very fine library?
Thanks!
Your first example is indeed a fully working example. Just use the menu to the top left. Choose File -> Download. This will download a single HTML-file, that works out of the box.
The file is called jsbin.ravecala.1.html. Open with
firefox jsbin.ravecala.1.html
(I also struggled a while before realizing this.)
I really don't know what's your JavaScript & jQuery knowledge level, but it seems you may need to practice it all a little.
Yes, if you're referring to the following tag:
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
This is indeed necessary, as it is the basis of cytoscape.js, the library itself, wich allows, for instance, add the method cytoscape to the variable #cy, as you mentioned in your second point.
The variable #cy is the div itself. jQuery refers to objects IDs this way, with #. So:
<div id="cy"></div>
Can be referred as $("#cy"). Wich adds the cytoscape function to it is the library itself.
I think that this live example is really good, although the one you linked is more basic and appropriate to get known with the basic structure and initialization of cytoscape.js. I suggest you to get known with jQuery (this course was really clear to me) and read the cytoscape.js documentation, which is full of rich examples.
Hopefully the title is clear. I'm talking about the large image comparison slider on the homepage of JpegMini.
I've managed to identify it as needing three core files (written as they are named on the site):
jquery.min.js
jquery-ui-1.8.14.min.js
scripts-0135.min.js
It's this last one I'm unable to find any information about so it may hold the secrets but I don't know.
Anyone got any ideas?
The .imagePairs elements have a mousemove event bound:
$('.imagePairs').data('events').mousemove[0].handler
is a function.
The code is apparent inside scripts-0135.min.js, but it is minified.
What you can do is parsing it through jsbeautifier and see if you can make something out of it. It will still have variable names which make no sense, so it will not be easy.
Looking at the code, it seems like they initialize it with $('.imagePairs').myBeforeAfter, which is most probably the function that handles the effect.
I never was able to determine the script used, in the end I searched the web and found a suitable alternative which came with good documentation. http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/