How Do I Use Smokescreen/JavaScript to Convert Flash to an Image - javascript

I have a simple script from AccuWeather to display a weather button on my website:
I love the simple way this button displays. It's perfect for what I want.
However, the button generated is in Adobe Flash format (swf) and doesn't display on most mobile devices since iOS and Windows Phone have no support and Flash Player for Android is no longer available for download from the Google Play app store.
I thought I found a solution in an Open Source project called Smokescreen that has its development area at Github.
I don't need this to reproduce flash movies. All I need is a simple javascript-based conversion of the flash button to a flat image that can be displayed in any browser that can execute javascript, which includes mobile devices.
But the documentation and description of how to use Smokescreen at their GitHub site is minimal at best, and I'm not a javascript expert and cannot get it working.
The call I am making that obtains the Flash image from AccuWeather is:
<script src='http://netweather.accuweather.com/adcbin/netweather_v2/netweatherV2ex.asp
?partner=netweather&tStyle=whteYell&logo=0&zipcode=NAM|CA|MB|WINNIPEG|
&lang=eng&size=7&theme=blue&metric=1&target=_self'>
</script>
Can anyone tell me what the javascript would be to use Smokescreen to display the flash image produced by the above code as an image.
If Smokescreen can't do it, is there any other method that can do this live on a webpage?

Just tested smokescreen with the SWF of the page you posted, and it doesn't work, you will need to parse the SWF at server side if you still want to use that site.
I opened the dev console and tracked down the SWF from the iframe
copied the file into my computer, then
cloned the github repo and
edited the player.html (from the github repo), line 13 to point to the file I downloaded.
This is the SWF I downloaded: http://netwx.accuweather.com/netWx-V212.swf?zipcode=46958
Edit: this is the error message I got from the dev console:
TypeError: this.defineEditText is not a function [loader.js:136](https://github.com/cesmoak/smokescreen/blob/master/src/player/loader.js#L136)
My system asks for permission to allow the SWF to connect to netwx.accuweather.com.

A quick search on github reveals some nice pure javascript alternatives.
https://github.com/search?l=JavaScript&q=weather&ref=searchresults&type=Repositories
I think this one looks the most promising: http://simpleweatherjs.com/
This simpleweatherjs demo shows a nice icon as well: http://codepen.io/fleeting/pen/wHism

unfortunately there is no way your javascript can handle swf, espacially on mobile devices like whith ios or windows phone since the javascript is running on your device itself.
all you could try is to use swfobject which is described as a workaround for javascript
here is the documentation of swfobject

Have you considered using a headless browser like phantomjs? You could use something like Selenium instead for out-of-the-box plugin support, but there are headless options for Flash.
The beauty of such software is that it can automate any user task (that's why it's used for testing). Like logging onto a site and performing a search that would normally not be available externally because of antiforgery tokens. Or checking if a product's price has changed by seeing if its DOM element value's has changed. Or accessing your online banking to see if your balance is a prime number and rendering your credit card bill in fractal form.
I mean, if you want to go this far for a weather widget, you probably have power user needs :)
...also Accuweather seems to do a fairly similar mobile-friendly version. And if it's not 100% the same, you could always ask.
Edit: check their T&C, the mobile-friendly snippet might actually be the only option for legal reasons.

Related

How to create Browser Canvas Fingerprint for digital output

I need to create canvas fingerprint for device identification. So, i have seen so many blocks are available on the web. But, nothing is useful because I need raw coding only to apply on my site. i saw in codepen.com has some coding is working fine but they all are demo version only. periodically and automatically the canvas is changing. These all are similar. you can see at: 1)codepen.io/run-time/pen/XJNXWV
2)codepen.io/alpenzoo/pen/vRywwV
3)codepen.io/tjoen/pen/MYbeoy
those all are working fine, but all are like trial version.
So, anyone can help me to give raw coding to create browser fingerprint and output same as above in digital.

Minimizing apps via nodejs || plain js

I'm currently working on personal automation project and I want to add 'minimize app' feature.
For example: When I click button, I want to minimize the current browser. I already have window.close(); but this will close the app definitly. I found things like window.minimalize(); or window.minimize();, but none of them worked for me. So is there a way to minimize app?
Edited: It does not have to be only client-side JS, it can be used as terminal based nodejs app. Ex: I type minimize Google Chrome, and it will minimize it.
One Google search for how to minimize browser gives the following result:
There is no way to minimize the browser window within javascript. No, there isn't. However, depending on what you're doing and which browsers you're targeting, you could play around with the blur and focus events of the window to achieve similar effect.
Alternatively, if such control is required, you could always port your code to Electron.js or Neutrino.js, which were made to let you create desktop applications using JavaScript.
Maybe if you post some code and give us a train of thought to follow, we could work something out.

Sample WebView application source code Android

I'm working on an HTML5 based Android App, and I don't understand how to get WebView working. I was wondering if anyone could point me to a place where I can download the source code for an example application of this so I can modify it for my app, or at least reference it. It needs JavaScript support, and to open links in WebView, instead of in the Browser application, which I heard happens unless you change a setting. It will access local files only, not from the internet, but might later on interface with database systems, so it needs the Internet permission, but I think I understand how to add that. Thank you!
I will suggest you too have a look on Cordova.
You can find everything to start a hybrid android app.

Taking screenshot using javascript in chrome packaged app

I need to grab the current html inside a chrome packaged app. I am aware of Taking screenshot using javascript for chrome extensions but when I tried this, chrome states that the "tab" permission is not allowed for packaged apps.
Is there any way I can reliably grab the current page?
You cannot do what you are trying to do with a packaged Chrome application. Instead, you should probably look at making an extension, as that would be the way to go if you want to interact with the current page.
If you're unsure, here's a resource for figuring exactly what you should choose: https://developer.chrome.com/webstore/choosing
Not from a chrome extension, as those are browser-centric solutions (not webpage-centric).
Niklas Von Hurtzen has created a very useful js extension called html2canvas that essentially does what you're looking for, just not as a chrome extension. You can see it here.
Once "rendered," the plugin will create a canvas element by traversing the DOM tree of whatever you hand to the extension. From there it's pretty simple... yourRenderedCanvasElement.toDataUrl() will return a data: URL representation of that canvas element, which by default is a PNG, giving you a "screenshot."
Edit: Ha, I see now that you reference this exact thing in the message thread in the other answer...

How can one paste images into a Web App? What solutions are available? HTML 5 Canvas?

I'm currently building a very bare bones web app, that had the requirement of being able to copy an image while broswing the web, and then pasting it onto my page.
I know that this type of functionality IS possible - as I've pasted images into gmail while writing messages, and into Tumblr (I believe they use TinyMCE as their editor).
After long searching - I've been saddened by the poor quality of explanation for the available solutions out there.
This is what I've gathered:
$(document).bind('paste', function(e){
console.log(e);
})
Inspecting the event object, it seems that data is only included when there is text (in Chrome anyways).
I am aware that IE has a clipboardData object which gives you access to the clipboard contents.
I've also heard of possible solutions using Flash, Java Applets, and HTML 5 Canvas - but I haven't yet been able to find good write ups explaining those solutions.
Anyone done this successfully, and can suggest best practices?
This works fine in Chrome. Here's a live example supporting getting image data in pure JavaScript with no servers involved: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/
You could use the Clipboard API: http://dev.w3.org/2006/webapi/clipops/clipops.html
Or you can do is to use Zero ClipBoard. It uses an invisible Flash movie and provides a JavaScript interface to access the clipboard.

Categories

Resources