Any idea about what backend technology might be in use for sites like photofunia.com and loonapix.com for image merging to create the effects? is it flash/flex or Open GL?
loonapix is doing server-side image processing to create the effect. If you look at the cloud over the ocean one, it looks like they just run a blur (perhaps a guassian blur) and remove the color through desaturation and then colorize it to blue, and then they overlay that on a stock image. This is a total guess, but it feels like they might have done this with Ruby On Rails -- if so, they probably use this: http://rmagick.rubyforge.org/
photofunia is also server-side. I also noticed that it uses a lot of face recognition to automatically place the face -- for that, they may be using OpenCV. Otherwise, it's mostly the same thing as loonapix, image processing and compositing on the server-side.
You could use many different image processing libraries to do that (ImageMagick or PIL). I work for a company that makes a .NET imaging SDK that can do it -- Atalasoft.
A few years ago, we posted this sample to show how to use blurs and noise generators to create random clouds. You'd need to do something like that except incorporate a photo into the process.
Related
Our company is redesigning a web service as an SPA. I designed the rough version of frontend using jquery+css+html. but one of my features is the Tabs interface. It can have up to 8 tabs and it seemed to slow down the whole web app. Each tab contains a table with sth like 100+ rows with the exception of few tabs that has a bit more complex ui.
Now, we have this another company that's been assigned to complete the service with the backend modifications and apply the new ui. This company insists on using iframes to make it easier for multiple developers to work to together at the same time and also improve performance.
I honestly think this makes little sense especially considering the DOM structure is hardly complex nor long for each tab. But the truth is iframe is something i do not like for no apparent reason. So i was wondering if people can advise on why not to use it or even, why i should go along with it
This is a question that is still relevant, so I'll throw in an answer 4 years too late. SPA's can quickly become monolithic, especially for enterprise apps, with slow build times, poor developer experience, framework lock-in and increasing difficulty to coordinate frequent stable releases. This is a more-or-less acknowledged problem, to which the solution goes under the banner micro front ends.
Here's a thoughtful article on Martin Fowler, on micro front ends. You'll note that Iframes are the 2nd "best" solution for creating a shell for your micro front ends, despite the fact that no one wants to use them because they're old fashioned and not cool. They permit a good degree of isolation between frames (separate documents, separate scopes). They're simple and well understood. IFrames descend from framesets, released with Netscape 2 round 1996. Web purists were horrified, but they straight away permitted content panes to scroll independently of the navigation, giving us the left-hand navigation panel that's with us still. So there you have it, frames are a permanently unfashionable but robust and useful solution.
I think that this is a bad idea to use iframes for this purpose.
iframe is slow, and pass events and info between the main frame to the iframe is not so easy.
The answer for this is very simple, use web-components.
This is solution for multiple developers to work together at the same time.Each developer works on single or multiple web-component, and also make development faster when you can reuse and share components.
If you load the components and render them in the right time you can gain really good performance, better then iframe.
Now to your problem, you can do any tab as a component and only when the user move to this tab render it. Thus you dont have to render all the tabs but only one.
Take a look at polymer - a library that is a sugar syntax for web-component.
You can also look at the other frameworks angular,react...
A client asked me about using Vuforia in order to recognize logos on the shop windows. Basically, they want to use logos as a QR.
Is this idea viable? Will it work pretty well? Can you tell my some alternatives to Vuforia about this?
Recognizing logos is hard.
Basically all image recognition algorithms rely on the same principle: trying to recognize "interest points" of the image. These interest points can for example be blobs or corners; in short, we want to look for places in an image where "things happen", compared to (for example) a large solid area painted in the same color where there is not much information to grab.
This comes to trying to recognize discriminant "details" of the image.
When applied to logos, this method tends to fail due to the fact that logos often don't have enough of such "details". Take the Nike logo for example: if corner detection is applied to it, it will only find 2 corners (the 2 ends of the accent). Blob detection will probably give no result at all. This is an extreme example, as the Nike logo is really simple, but even on more complex logos there will often not be enough details for recognition to work.
As for Vuforia: it works in this exact same way, and their web interface (Vuforia Target Manager) is very clear about it: when you upload an image on it for recognition, if there are not enough details on it, it will either warn you that results may be poor or simply reject the image.
To conclude: you can run some tests, it's still the best way to be sure of it, but I wouldn't expect great results. It will probably work for detailed logos, and fail on simpler ones.
Hope this helps!
I'm working on a standalone Flash application (written using Flex 3/ActionScript 3) that features a text crawl, like what you might see at the bottom of your TV when watching a cable news channel; it's a long narrow box that text moves across from right to left.
I've implemented it by creating a Label element, populating it with text, and then moving it using a mx:Move object with a Linear.easeNone easing function. It works, but it has ample room for improvement. It looks a bit jerky, and tends to have a fair amount of "tearing" (the top and bottom halves of the text sometimes fall out of sync).
I tried throwing math at the problem to get the crawl's movement rate synced with the monitor's refresh rate, but that was a bust. I found out the hard way that the app's frame rate jumps around too much; the "optimized" crawl varied between looking silky smooth and like it had epilepsy.
Is there anything else folks would recommend I try to smooth this thing out? Is there some alternate design you'd recommend I try?
Edit: Some context: the crawl is part of a digital signage application (played from a standalone Flash projector -- no web browser) that does stuff elsewhere on the screen, including video playback and rendering text and images. It definitely gets choppier during video playback, but it's never as smooth as I'd like it to be.
There are two potential solutions to this problem, but both have caveats, the first because of your use of Flex and a standalone projector, the second because it is a mitigator, not a complete solution.
Hardware Acceleration
When publishing your file, you can attempt to have Flash utilize hardware acceleration to alleviate the vertical refresh issue you are running into that is causing tearing. Sadly, Flex Builder 3 is incapable of enabling this setting at the SWF (projector) level (Link to bug). This has yet to be resolved and has been pushed from 4.0 to 4.1 to 4.x... If and when it is resolved, it will likely be a compiler argument in the project settings of Flash Builder 4.
You may be able to determine if this solution works for you by outputting your projector as a standard SWF and embedding it on an HTML document with the wmode set to "direct" or "gpu". Sadly, if it does (it should), you can't use it right now anyway. If you have Flash Builder 4, certain projects are capable of making round trips between FB4 and Flash Professional CS5, though I am not sure what the criteria for that is (my current AIR project has all the project modification menu options grayed out). If you do manage to get your project into Flash, you can enable hardware acceleration in the Publish Settings of the project (File->Publish Settings->Flash tab->Hardware Acceleration option in CS5).
This method is almost a certain solution for your problem, though it has two issues, one already highlighted above, and (for people publishing for the web) that by utilizing direct or GPU rendering on a webpage, you are unable to layer any DOM elements on top of flash.
direct: This mode tries to use the fastest path to screen, or direct path if you will. In most cases it will ignore whatever the browser would want to do to have things like overlapping HTML menus or such work. A typical use case for this mode is video playback. On Windows this mode is using DirectDraw or Direct3D on Vista, on OSX and Linux we are using OpenGL. Fidelity should not be affected when you use this mode.
gpu: This is fully fledged compositing (+some extras) using some functionality of the graphics card. Think of it being similar to what OSX and Vista do for their desktop managers, the content of windows (in flash language that means movie clips) is still rendered using software, but the result is composited using hardware. When possible we also scale video natively in the card. More and more parts of our software rasterizer might move to the GPU over the next few Flash Player versions, this is just a start. On Windows this mode uses Direct3D, on OSX and Linux we are using OpenGL.
**Source*
Direct is the ideal option for this situation, as you can actually have performance degredation with "gpu" as well as visual differences from graphics card to graphics card.
Lower your framerate
The Flash player will continue to play video at its native refresh rate independent of the rest of your project as long as you keep the framerate at or above approximately 2FPS (though I suggest 5FPS minimum). You won't want to run that low for this example, but you are able to lower the framerate of the entire scene without impacting video performance. The closer your framerate is to the screen refresh rate, the more apt you are to actually create the tearing effect unless you are able to absolutely sync with the monitor's refresh rate, which you probably cannot do without the above... Hardware Acceleration.
This problem has existed in the Flash Player for as long as it has been able to move objects horizontally. What happens is that Flash updates a buffered snapshot of the running animation at the same time that the screen is refreshing. If the buffered snapshot changes partway through a screen refresh, you get a tear. This is why lowering the framerate actually reduces the amount of tearing, you are refreshing the buffer less frequently.
As #Tegeril mentioned, using Flex is one of the reasons. Flex is a pretty heavy framework and it does a lot of things behind the scenes. If you're familiar with the life cycle of a component(especially invalidating properties, invalidating the display list, etc.).
As a few minor things that might improve performance:
try to keep a simple display list. If you know the app will always be displayed at one size, then flex won't waste time traversing the display list/tree up to the top and back for measurements. Also, try to use a Canvas. I know, it's not very clean, but since it uses absolute values and doesn't check with the 'parents' much, it should be faster than other containers(like HBox,VBox, etc.)
try to display the video at it's full size(make sure the encoded video dimensions are right so there be any CPU cycles on resizing video
Ok, this was Flex stuff.
It might be very handy to read sencular's article on Asynchronous ActionScript Execution which explains how Flash Player handles updates and renders.
(source: senocular.com)
Frames both execute ActionScript and render the screen
(source: senocular.com)
ActionScript taking a long time to complete delays rendering
I imagine the jerkiness is related to this. Also, I'm guessing you might
get moments of smooth movement then sudden halts, every now and then, when
Flash Player catches it's breath(Garbage Collector cleans up)
Victor Drâmbă article on “Multithreading” in Actionscript might also
be useful.
Soo, to recap:
use Profiler or something and see if the Flex framework is slowing you down, or where the 'bottleneck' is
improve as much as you can on that side then check if it's how Flash Player handles all the actionscript('elastic' frames)
If the bottleneck comes from the Flex framework, worst case, you
can try to minimise the number of components that traverse the display list,
and use pure actionscript for the other things(as #PatrickS suggested, use TweenLite, etc.)
If it helps, try to preload data(fetch rss feed and all that) at the start, and when you've got most of the important bits that don't require 'refreshes'/loads frequently, display the app. You will use more memory, but will have more cpu cycles to spare for other tasks.
Also, if it's display objects that are the 'bottleneck' and there's plenty of them, check if you can reuse them using Object Pools.
HTH
TweenMax or even TweenLite ( http://www.greensock.com )handles this sort of job pretty well. What else is your app doing while the text is scrolling though? Is it possible that some other processes are interfering?
This may not be helpful, but have you considered putting the crawling text into the html DOM and using CSS transitions to crawl the text. Obviously there's the IE problem, but it should be supported in IE9 and you could use javascript as a fallback.
This may seem silly, but CSS transitions are getting hardware acceleration and separate processes for plugins meaning on a multicore machine you could get parallel threads.
One thing you might consider is to move your label incrementally using a Timer instead of an easing function. That way you can take advantage of the updateAfterEvent method to get smoother rendering. Here's a link to an article/video from Chet Haase (Adobe's Flex graphics dude) that explains usage along with an example app with code:
http://graphics-geek.blogspot.com/2010/04/video-event-performance-in-flex.html
Hope that helps.
I'm in the process of optimizing a high traffic site. The site I am working on has many widgets - say 20 or so and only 7 are loaded by default. I was thinking of separating my css and image sprites for faster load times for the default widgets.
For the rest of the non-default widgets, I was thinking of having a separate css file and image sprite for each and every one. This way, when a user selects a non-default widget, I could dynamically inject the CSS file for that particular widget.
My question is - do you think this is OK to do or potentially worse for optimization since I would have more HTTP requests now since the non-default widgets would have their own css and image sprite files? Obviously though, the file sizes now would be cut down too.
Thoughts? Or anyone else who tackled the same issue?
do you think this is OK to do or potentially worse for optimization since I would have more HTTP requests now since the non-default widgets would have their own css and image sprite files?
Well, in the end that's down to mathematics and something only you can answer :) It will depend on what the actual numbers look like.
Keeping the default widgets' sprites in one file sounds obvious from what you describe.
As for the non-default widgets, If you have the technical means to do so, you could try analyzing your usage statistics. Which of the non-default widgets are being used the most? Are there some that stand out strongly from the others in terms of requests? Then build one image with all the necessary sprites for those, and keep separate images for the rest.
Also take into consideration whether the cost-benefit ratio is really good. Working out and using CSS sprites can increase maintenance costs in the long term, as updating graphics becomes a more difficult task that it was before. Now reducing the number of requests is a very important optimization technique, but there are other factors as well. Maybe the time and money saved by not using sprites could be better used somewhere else, like in improving the site's usability or buying new RAM for the server.
I'm looking at a project that requires the ability to play one flash video over the top of another... sort of like an animated watermark, where the video on top has transparent regions ans may not be the same width/height as the one underneath.
Using Flash/Flex, can this be done in a web-app at real time? Or would you have to use an offline server app?
EDIT: This is not an HTML question. It's about making a simple video-editing kind of tool solely in Flex. Maybe I want to overlay a video of a galloping horse over a video of passing scenery or something. Ultimately, being able to output a single mixed video is useful, but for video editing that's too slow, real-time playback as the position of the overlay video is changed would be needed.
Hope this clarifies things somewhat?
Put the 2 videos on different layers inside your fla. The video files will have to be .flvs. Make sure the alpha channel is encoded in the video that's meant to go on top... this is done using your encoding program, like Flash Video Encoder. This is probably why it's not working for you right now.
I haven't done much flash work lately, but what I remember of flash (and I assume this is part of flex) you could draw in several files and place them on different levels, like a z-index.
If you need some sort of real-time keying or something of that nature, that is beyond my knowledge of flash.
You may be able to use CSS with z-indexing to do this through basic HTML/CSS means as well. But I would look to having flash do all the heavy lifting of layering, if you can.
I don't think you'll get such features,
Well, I am thinking, why you need to play flash files overlapped on each other .. If you want some water mark (static or Dynamic content), you can have it in a single flash file, you need not overlap the two files for that ..
Even if it was possible to make two flash files overlap on web-page, it is not recommended as good practice, because it needs lot of data to be transfered over to browser(in worst case, 2 files, so double the data), in-turn introducing more delay to load the page.. it is a degradation to your own web-page .. Instead try to merge files (image or flash) to save the amount of memory to be transfered via browser ..