Using Fzip lib under Adobe Air App - javascript

I'm currently working on a project for Adobe Air (1.5.3) and I need to unzip a file, copy some of its contents to another file.
Then I saw people talking about the Fzip (http://codeazur.com.br/lab/fzip) lib. The problem is that I don't know how to "import" or use this library with Javascript and Adobe Air, since Javascript doesn't have the import directive.
How can I manage to do that ?

I posted a demo of how to use FZip with Adobe Air and Javascript. I hope it hopes clear things up for you.
In short you need to pull the SWF file out of the compiled SWC (when applicable) and access the class.
The demo is pretty simple and really just a proof of concept but you should be able to extend it easily.
http://www.drybydesign.com/2010/05/12/adobe-air-fzip-without-flex/
-Ari

Ari's example is pretty good, and it got me started but he left out some pretty crucial stuff--like writing the uncompressed files back to the disk. And the zip file does not have to be hosted remotely--the thing about AIR is that it runs like a local Application...here is an example that build on the good start Ari gave us. (I am using HTML5 just to be cool and hip and modern! :)-
<!DOCTYPE HTML>
<html>
<head>
<title>Test Fzip</title>
<script type="application/x-shockwave-flash" src="scripts/fzip.swf"></script>
<script type="text/javascript" src="scripts/AIRAliases.js"></script>
<script type="text/javascript" src="scripts/AIRIntrospector.js"></script>
<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
<script type="text/javascript">
var fzip;
if (window.runtime) {
if (!fzip)
fzip = {};
fzip.FZip = window.runtime.deng.fzip.FZip;
fzip.FZipFile = window.runtime.deng.fzip.FZipFile;
}
var file = air.File.documentsDirectory.resolvePath("test.zip");
//file.url
var zip = new fzip.FZip;
zip.addEventListener(air.Event.OPEN, onopen);
zip.addEventListener(air.Event.COMPLETE, oncomplete);
zip.load(new air.URLRequest(file.url.toString()));
function oncomplete(event) {
var count = zip.getFileCount();
alert(count);
for ( var idx = 0; idx < count; idx++)
{
var zfile = zip.getFileAt(idx);
// alert(zfile.filename);
var uzfile = air.File.applicationStorageDirectory.resolvePath(zfile.filename);
var stream = new air.FileStream();
stream.open( uzfile, air.FileMode.WRITE );
stream.writeBytes( zfile.content,0, zfile.content.length );
stream.close();
}
}
function onopen(event) {
alert("file is opened");
}
</script>
</head>
<body>
</body>
</html>

Related

how to embed html5 into website via plugin?

I’m trying to embed an html/javascript application into my website.
I do this my first time and bought an with a bit of description how to do it.
I thought it’s easier but I don’t get it to work.
That’s the tutorial that comes with the app:
https://support.vebto.com/help-center/articles/10/13/50/getting-started
What I did to embed it was creating a new plugin folder in FDP-Manager. And put all the Plugin-Files in it, like described.
And made a .php file, in which I defined a shortcode, so I can place the app wherever I want on my webpage.
Underneath I put the code, which they provide for embedding the plugin.
My code firist:
<?php
/**
* Plugin Name: My_first_embed
* Plugin URI: http://www.my_first_embed.doesntmatter
* Description: My_first_embed
* Version: 1.0
* Author: Me
* Author URI:
**/
?>
add_shortcode( ‘shortcode_name’, function () {
$out = ‘<p>[editor]</p>’;
return $out;
} );
add_action( ‘wp_head’, function () { ?>
<script>
<html>
<head>
<link rel=”stylesheet” href=”pixie/styles.min.css”>
</head>
<body>
<pixie-editor></pixie-editor>
​
<script src=”pixie/scripts.min.js”></script>
​
<script>
var pixie = new Pixie({
onLoad: function() {
console.log(‘Pixie is ready’);
}
});
</script>
</body>
</html>
First, the plugin worked, but it was not loading, then I changed the code too because I thought that it should be enough... but it didn’t work either:
<pixie-editor></pixie-editor>
​
<script src=”pixie/scripts.min.js”></script>
​
<script>
var pixie = new Pixie({
onLoad: function() {
console.log(‘Pixie is ready’);
}
});
</script>​
So any suggestions? 🙂
I appreciate every contribution!
thank you!
cheers

Aurelia with Standalone library integration

I'm working on aurelia+scheduler poc. I have found one standalone js library for displaying meeting events. The issue is integrating this js with aurelia. I'm using jspm for downloading project dependencies.
Has anybody tried to integrate a standalone js library with aurilia.
Below is the library that I'm trying to integrate.
http://javascript.daypilot.org/demo/scheduler/scalehours.html.
<ai-dialog-body>
<script>
function sample(){
var dp = new DayPilot.Scheduler("dp");
dp.startDate = new DayPilot.Date("2016-06-28");
dp.cellGroupBy = "Month";
dp.days = 1;
dp.cellDuration = 1440;
dp.timeHeaders = [
{ groupBy: "Day" },
{ groupBy: "Cell" }
];
dp.scale = "Hour";
dp.bubble = new DayPilot.Bubble();
dp.treeEnabled = true;
dp.rowHeaderWidth = 200;
dp.resources = [{"id":"test#xyz.com","name":"Test"}];
dp.events.list = [{"start":"2016-06-27T16:30:00","end":"2016-06-27T17:00:00","text":"Busy","resource":"test#xyz.com","id":2170}]
dp.cellWidth = 60;
dp.init();
}
</script>
<div id="dp"></div>
<button onclick="sample()">Ok</button>
</ai-dialog-body>
when reference 3rd party library class getting below message.
ReferenceError: sample is not defined
Have you tried to download the source and then reference it in your html:
<body aurelia-app>
<script src="jspm_packages/system.js" charset="utf-8"></script>
<!-- Place a referece to the downloaded library here -->
<script src="config.js" charset="utf-8"></script>
<script type="text/javascript">
System.import("aurelia-bootstrapper");
</script>
</body>

Having a cycled (interval) pictures on pre-loaded page through a directory

I am currently working for a library that would like to have a webpage designed digital signage. Most of it has been designed with widgets and through a program called Xcite Pro. I was unable to find any widgets that will allow me to do a slideshow from a directory that will cycle through. I do know the foundations to JavaScript and php.
I do not know how to take a directory and have JavaScript run through an entire directory into a array with picture values. I would like to use the setInterval() command but I seem to only know how to search through a directory by php. I did find a explanation on this site that tells me how to use php to search through and then pull all pictures to be shown. If i can get that to all go into an array that could be used with JavaScript on the site that would actually work fine. The link for that explanation is LINK.
Currently I am just using a folder called pics in my main file. So my directory is "pics" nothing to special. I have seen some things being talked about html5 using a new file search function but that sounds more like for finding particular files rather then taking the entire components of a folder into an array.
Edited 12/23/2013 Per PHPGlue Request and help.
So far the code that I have played with are:
Test html (Main Page)
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Basic XHTML Document</title>
</head>
<body>
<p>President Obama is from Hawaii</p>
<p><img id="scroller" alt="" src="pics/test.jpg" width="600" height="400"/></p>
<script type='text/javascript' src='common.js'></script>
<script type='text/javascript' src='pics\imagefun.php'></script>
</body>
</html>
Common js File in main directory with main page
// common.js
//<![CDATA[
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
function gteIE(version, className){
if(IE >= version){
bod.className = className;
}
}
function E(e){
return doc.getElementById(e);
}
//]]>
Finally I have 2 pictures in a picture folder along with a imagefun php file.
// imagefun.php
<?php
$imgs = implode(array_merge(glob('*.png'), glob('*.jpg')), "', '");
echo "//<![CDATA[
var imgs = ['$imgs'], ni, iA = [];
for(var i in imgs){
ni = new Image; ni.src = imgs[i]; iA[i] = ni;
}
var pre = onload, iN = 0, iL = imgs.length-1, imgElementId = E('scroller');
imgElementId.src = imgs[0];
onload = function(){
if(pre)pre();
imgElementId.src = iA[0];
setInterval(function(){
if(iN >= iL)iN = 0;
imgElementId.src = iA[++iN];
}, 2000);
}
//]]>";
?>
PHPGlue-- Thank you for all the time that you have put into this. Really not trying to be a pain at all and I really do appreciate all of your patience. I have made sure to swap names based on my file structures. Based on what I see for the basic ideas of the code I would think it should work. As I said though when I load to test it, it will only show the picture I defaulted on the load and then never change. One thing that I have noticed is that if you take the code of the image fun php code and run just that, all it returns is an output of //=IL)iN = 0; imgElement.src = iA[++iN]; }, 2000; } //]]> If I am right then that string of output should be similar to the whole thing rather then just a fragment of a line like it is. I do believe if I am understanding the goal of this code we are having it spit out some code into the src location of the picture location?
Ultimately if possible I would like to have a cloud based file location that I could use to have an individual who works here store pictures in that file and then have the website pull all files in that location to be loaded to the page one at a time at an interval of about 15000ms. I would appreciated any comments or recommendations.
I ended up resolving this myself. Thank you for all the help.
This was a multi parter either way.
I created a php cycler code
Note** This code will actually run through all that was needed just in php. Sadly though as I wanted this to show up on a web page that would cycle on a timer I needed to use some javascript coding. This caused me to change parts of what was used. If you want to do the same thing you drop all code after you have created the pics array or you can even keep up to the point of the forwards and backwards array to be passed into javascript.
<?php
// create a variable to hold the directory location
$Dir = "..\Directory\pics";
// Variable to directory
$dirOpen = opendir($Dir);
// Need to start with a main array
$pics = array();
// Need two arrays for going forward and back
$forwards = array();
$backwards = array();
// Need variables for the program
$c = 0;
$d = 0;
$e = 0;
$i = 0;
$f = 0;
// Need to run through all files in folder and store into an array
while ($curFile = readdir($dirOpen))
{
if(strpos($curFile,'.jpg') !== false)
{
$pics[$i] = $curFile;
++$i;
}
}
closedir($dirOpen);
// declare variables to count previous opening of file
$a = count($pics); // number of pics in the folder
$b = count($pics) - 1; // need to account for starting at 0
// run through pics array fowards
while($f < $a)
{
$forwards[$f] = $pics[$f];
++$f;
}
// run through the pics array backwards
while($b > -1)
{
$backwards[$c] = $pics[$b];
--$b;
++$c;
}
// variables for the functions us
// use function for forward pics
/*function forward($array, $a)
{
$d = 0;
if($d == $a)
{
$d = 0;
return "pics/".$array[$d];
++$d;
}
else
{
return "pics/".$array[$d];
++$d;
}
}
function backward($backwards, $b)
{
if ($e == $b) // going to have a conflict with B becuase right now it should be at -1 or 0. need to compare to the value of -1 and have it reset to the max when reached.
{
}
}
*/
/*// Test the output of each array
foreach($pics as $imgs)
echo $imgs . "<br />";
foreach($forwards as $fors)
echo $fors . "<br />";
foreach($backwards as $backs)
echo $backs . "<br />";
*/
// $forwards and $backwards are the arrays to use for pics cycling
?>
To pass onto the java script I had to use the following code on another php page created to work with all html design of the main page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<form name="myForm">
<p> </p>
<p> </p>
<p class="auto-style1"><img alt="" src="" id="pics" height="400" width="300"/></p>
<?php include 'imgCycler.php'; ?>
<script type='text/javascript'>
/* <![CDATA [ */
var forwards = <?php echo json_encode($forwards); ?>;
var backwards= <?php echo json_encode($backwards); ?>;
var max = <?php echo $a ?>;
var count = 0;
function changePic()
{
document.myForm.pics.src='pics/' +forwards[count];
//document.myForm.pics2.src='pics/'+backwards[count];
++count;
if (count == max)
{
count = 0;
}
}
var start = setInterval('changePic()',5000);
</script>
</body>
</html>
Again PHPGlue thank you for all the help you offered. Hope this is useful for anyone else that wishes to do something similar. Please let me know if there are any questions on the code.
Let's start by making a common.js file:
// common.js
//<![CDATA[
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
function gteIE(version, className){
if(IE >= version){
bod.className = className;
}
}
function E(e){
return doc.getElementById(e);
}
//]]>
Now put the script below in the same folder you keep your images in:
// imagefun.php
<?php
$imgs = implode(array_merge(glob('*.png'), glob('*.jpg')), "', '");
echo "//<![CDATA[
var imgs = ['$imgs'];
for(var i in imgs){
new Image().src = imgs[i];
}
var pre = onload, iN = 0, iL = imgs.length-1, imgElement = E('imgElementId');
imgElement.src = imgs[0];
onload = function(){
if(pre)pre();
imgElement.src = imgs[0];
setInterval(function(){
if(iN > iL)iN = 0;
imgElement.src = imgs[iN++];
}, 2000);
}
//]]>";
?>
Change the imgElementId to yours inside E('imgElementId'). E('imgElementId') must refer to an <img id='imgElementId' /> tag.
Now on your HTML page, refer to this JavaScript page as PHP, at the bottom of your body:
<script type='text/javascript' src='common.js'></script>
<script type='text/javascript' src='path/imagefun.php'></script>
</body>
</html>
Also, change src='path/ to your image folder path, and add or subtract the correct , glob('*.jpg')s and the like, to suit your needs.
Notes:
E(id) gets your Element by id. bod.className changes to the <body class='njs'> to <body class='js'>, assuming you have the class attribute njs in your HTML body tag, for CSS without JavaScript (progressive enhancement). gteIE(version, className) is for Internet Explorer versions greater than or equal to a number passed as version, changing that version or greater's body class attribute to the className argument, because IE10+ won't accept HTML IE comments for CSS changes. imgfun.php caches the images into your Browser memory based on globs found in the folder the script resides in. Then, once these images are loaded into your Browser cache, they are cycled through using setInterval.

JS works in IE, Safari, Chrome but not in Firefox?

Most my work is done running on Webkit stuff and using Chrome's dev tools. But this code doesn't run in Firefox; it doesn't even throw a console error so I have no idea what's wrong. Any ideas. I'm sure its terribly easy. My code is designed to look throw a div for a specific syntax "t_" "r_" which are references to an external document; I'm trying to find all said references and replace them with hyperlink. I"m a novice JS coder so sorry for the naiveness you'll undoubtedly see in here.
(I'm using FF 22.0)
<!DOCTYPE html>
<html>
<head>
<script>
function pre_forwarder(){ //First Step
patt_1=/\[r_/g;
patt_2=/\[t_/g;
patt_S_and_R_1 = "[r_";
patt_S_and_R_2 = "[t_";
forwarder(patt_1,patt_S_and_R_1);
forwarder(patt_2,patt_S_and_R_2);
}
function forwarder(Pattern,Pre_SearchReplace){
rule_string = document.getElementById("divid");
rule_string = rule_string.innerText;
var patt1 = Pattern;
while (patt1.test(rule_string)==true)
{
begin_string = patt1.lastIndex;
fullpar_string = patt1.lastIndex + 5;
partial_string = rule_string.slice(begin_string,fullpar_string); //5 characters
//alert("partial_string-"+partial_string);
refined_string_end = partial_string.indexOf("]");
refined_str = partial_string.slice(0,refined_string_end); //raw number
full_str = Pre_SearchReplace+refined_str+"]"; //restructured
SectionNum = refined_str;
SearchReplace = full_str; //Variable to pass to parse()
//alert("S&R="+SearchReplace+" >> full_string-"+full_str);
//alert("S&R"+SearchReplace+">>SecNum-"+SectionNum+">>Pre-Search-"+Pre_SearchReplace);
Parse(SearchReplace,SectionNum,Pre_SearchReplace);
}
//var patt_end=/\[t_/g;
}
function Parse(SearchReplace,SectionNum,Pre_SearchReplace){
if (Pre_SearchReplace == patt_S_and_R_1){
ref_URL = "UEB_Ref.html#";
}else if (Pre_SearchReplace == patt_S_and_R_2){
ref_URL = "UEB_Tech.html#";
}
linkCreate = 'Link to ch-'+SectionNum+' ';
document.getElementById("divid").innerHTML = document.getElementById("divid").innerHTML.replace(SearchReplace, linkCreate);
}
function Dude(SectionNum){
alert(SectionNum);
}
</script>
</head>
<body onload="pre_forwarder();">
<button onclick="pre_forwarder();">
New Tool</button>
<div id="divid">
hello [dude] ok the end [r_12.1][r_7] [r_22]
<br>bro try this [t_15.3][t_6] [t_5.5]
</div>
<div id="hyperlink">
</div>
</body>
</html>
You've rule_string = rule_string.innerText; at line 15. FF doesn't know innerText, you need to use textContent, or a fix like:
rule_string = rule_string.innerText || rule_string.textContent;
A live demo at jsFiddle.
As a side note: Looks like your app is based on global variables. Please don't use this kind of programming technique. It'll do the job, as long as there's not much of code, but when your apps are getting larger, you'll lose control over a ton of global variables.
For starters, you can read JavaScript Guide at MDN, especially chapters 4, 8 and 9.

Detecting installed plugins under different browsers?

I'm wondering if there is a way to detect installed plugins on different browsers.
So far I have found that you can "detect" plugins on firefox by trying to guess if chrome://path/to/some/plugin/image.gif exists.
This code for firefox looks like this:
<img src="chrome://firebug/content/blank.gif" onload="var a=document.getElementById('FireBug'); a.innerHTML = 'You are using FireBug';" style="visibility:hidden">
<div id="FireBug">You are not using FireBug</div>
I'm interested how does the code look in IE (more important to me) and if there are other ways to accomplish this task for other browsers too?
I want to know because I'm having an idiot client who claims he doesn't have installed plugins though I'm 99,99% sure he has. The problem is that some of those plugins are breaking parts of a web site admin control panel I've wrote.
Anyway I'd be glad to hear any tips,tricks,workarounds and etc for getting the plugin list of the popular browsers (ff,ie,opera,chrome,safari) :)
This code will list all the plugins installed in the browser
<html>
<body>
<div id="example"></div>
<script type="text/javascript">
var x=navigator.plugins.length; // store the total no of plugin stored
var txt="Total plugin installed: "+x+"<br/>";
txt+="Available plugins are->"+"<br/>";
for(var i=0;i<x;i++)
{
txt+=navigator.plugins[i].name + "<br/>";
}
document.getElementById("example").innerHTML=txt;
</script>
</body>
</html>
You could try this: http://www.sliceratwork.com/detect-installed-browser-plugins-using-javascript
... but this is not going to detect browser add-ons like firebug, noscript, etc.
That script seems to detect only the following plugins:-
Java
3D Markup Language for Web
DjVu
Flash
Google Talk
Acrobat Reader
QuickTime
RealPlayer
SVG Viewer
Shockwave
Silverlight
Skype
VLC
Windows Media Player
Xara
This code will give you all the info you need:
<HTML>
<HEAD>
<TITLE>About Plug-ins</TITLE>
</HEAD>
<BODY>
<SCRIPT language="javascript">
numPlugins = navigator.plugins.length;
if (numPlugins > 0)
document.writeln("Installed plug-ins");
else
document.writeln("No plug-ins are installed.");
for (i = 0; i < numPlugins; i++) {
plugin = navigator.plugins[i];
document.write("<center><font size=+1><b>");
document.write(plugin.name);
document.writeln("</b></font></center><br>");
document.writeln("<dl>");
document.writeln("<dd>File name:");
document.write(plugin.filename);
document.write("<dd><br>");
document.write(plugin.description);
document.writeln("</dl>");
document.writeln("<p>");
document.writeln("<table border=1 >");
document.writeln("<tr>");
document.writeln("<th width=20%>Mime Type</th>");
document.writeln("<th width=50%>Description</th>");
document.writeln("<th width=20%>Suffixes</th>");
document.writeln("<th>Enabled</th>");
document.writeln("</tr>");
numTypes = plugin.length;
for (j = 0; j < numTypes; j++)
{
mimetype = plugin[j];
if (mimetype){
enabled = "No";
enabledPlugin = mimetype.enabledPlugin;
if (enabledPlugin && (enabledPlugin.name == plugin.name))
enabled = "Yes";
document.writeln("<tr align=center>");
document.writeln("<td>");
document.write(mimetype.type);
document.writeln("</td>");
document.writeln("<td>");
document.write(mimetype.description);
document.writeln("</td>");
document.writeln("<td>");
document.write(mimetype.suffixes);
document.writeln("</td>");
document.writeln("<td>");
document.writeln(enabled);
document.writeln("</td>");
document.writeln("</tr>");
}
}
document.write("</table>");
}
</SCRIPT>
</BODY>
</HTML>

Categories

Resources