Im trying to make a script using JSFL but I have the following problem...
To understand what Im trying to do, first I used a script to export all images in the library, because I need to make a process to all PNG files.
Now I want to reinsert the images on the library.
If I create a new item I lose all references and that's not useful and I have duplicated items.
What I need to do is re-import the image for each item.
I mean, the same I do when a right-click on the library item->properties->Import...
I was trying to use this script but it doesn't work. Anyone can help me?
var folderURI = fl.browseForFolderURL('Select folder where all images should be exported as *.PNG');
var doc = fl.getDocumentDOM();
if(doc)
{
fl.outputPanel.trace("Start");
var library = doc.library;
var allLibItems = library.items;
var item;
var itemName;
for (var i = 0; i<allLibItems.length; ++i)
{
item = allLibItems[i];//only images will be processed
if(item.itemType == "bitmap")
{
itemName = item.name.slice(item.name.lastIndexOf("/")+1,item.name.lastIndexOf("."));
//Find proccesed image on the directory selected before
//and replace the sourceFilePath (I think this is what I need to use a new image but is not working)
item.sourceFilePath = folderURI + "/" + itemName +".png"
//This returns 'false'
fl.outputPanel.trace(library.updateItem(item.name));
//item.sourceFilePath has the old value, I don't understand why it was not changed
fl.outputPanel.trace(folderURI + "/" + itemName +".png" + " = " + item.sourceFilePath);
}
}
}
Finally, I unzipped the FLA file, it's like a zip and I have all images inside, so it's easy to replace them.
The problem that I had first was that images didnt change because in Flash you have an option to compress images when you create the swf, that's why I didnt see any change on the final result. (right click on the image inside the library -> Properties -> Compression)
I used JSFL to iterate all images (like the example above) and set Compression: "Lossless" instead of "Photo (JPG)".
Obviously this is only a good solution for me because Im using an external tool to compress images with a really great resolution and low size.
You can use JSFL to iterate all images and set Compression: "Photo (JPG)" to all images, with the quality that you want, but probably the result will be different.
Regards
try this
doc.importFile(currentFileURI, true, false, false);
doc.library.selectItem(currentFileName);
doc.library.moveToFolder(libraryPath, currentFileName, true);
but if item exists, FLASH show warning dialog
Related
I've got an API (https://datatank.stad.gent/4/cultuursportvrijetijd/kunstenplan.json)
I have a list of art spot names that I got from that API displayed on a page. (actually different lists each filtered by category)
What I want is when you click on a name, you get more information about that art spot on a separate page. How do I do this?
Here's a snippet of my code that will display a list of museums.
var list_museums='';
var list_galleries='';
var list_centers='';
var list_offspaces='';
var list_search='';
var item_name='';
var item_location='';
var item_site='';
var item_category='';
var item_info='';
for(var i=0;i<this.cultuurUtilities.length;i++)
{
var cultuur=this.cultuurUtilities[i];
var museums = cultuur.categorie=="Museum";
var galleries = cultuur.categorie=="galerie";
var centers = cultuur.categorie=="Centrum voor beeldende kunst";
var offspaces = cultuur.categorie=="Off-Spaces";
console.log("cultuur for loop");
if(museums==true){
list_museums+='<div class="museum-item"><li class="li-museums"><img class="museum-img"></img><div class="museum-link"><a href="detailpagina.html">'+cultuur.Naam;
list_museums+='</a></div></li></div>';
What I want is when you click on a name, you get more information about that art spot on a separate page
I think you mean opening a new window/tab? You can accomplish this in different ways:
1) Adding the "onclick" listener on your clickable element and write the function to be called. Inside it, you can open a new window using the "window.open" function (it opens a new window by default, so you can pass a second parameter to specify the frame where the new window/tab must be handled, because you might wanted to open the page in a new tab, not a new window. Check the docs here). It returns its handle, so you can write into it, just like you do usually in your page.
For example:
var mywindow = window.open("path_to_follow");
// The first parameter is optional. By removing it, it will give you a blank page
mywindow.document.write("<h3>My Selected Museum</h3>");
<< bunch of other instructions >>
2) Using a anchor tag with "href" attribute and the selected item identifier passed as a GET parameter. For example:
<a target="_blank" href="path_to_follow/display_page?museum_id=dinamically_set_id">Click Here to open</a>
In your "display_page" (you can name it as you like) you manage to use some server-side language (like PHP, Java, etc...) to prepare a "stub" of your page, and filling with the selected museum informations, using the museum identifier we said before.
If you need further information, just comment!
Okay, so I need to change images on hover in my Angular app. However, due to some peculiarities of the site, it wasn't really feasible to change images on hover via css [without a ton of extra work], which would have been the best way, I realize.
So instead, I'm using ng-mouseenter and ng-mouseleave to change the images on hover.
landing.jade
img.share-button(src='images/btn_share.png', ng-click='dropdownShareIcons()')
img.share-icon-top(src='{{ shareIcons[0].orig }}', data-id='0', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')
img.share-icon-top(src='{{ shareIcons[1].orig }}', data-id='1', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')
img.share-icon-top(src='{{ shareIcons[2].orig }}', data-id='2', ng-mouseenter='colorizeIcons($event)', ng-mouseleave='decolorizeIcons($event)')
Then in the controller I have an object which contains the paths to the images, and the functions which switch images on hover.
landing.js
$scope.shareIcons = [
{orig: 'images/follow_weibo_grey.png', hover: 'images/follow_weibo_colored.png'},
{orig: 'images/follow_wechat_grey.png', hover: 'images/follow_wechat_colored.png'},
{orig: 'images/follow_youku_grey.png', hover: 'images/follow_youku_colored.png'},
]
$scope.colorizeIcons = function($event) {
$event.target.src = $scope.shareIcons[$event.target.dataset.id].hover;
}
$scope.decolorizeIcons = function($event) {
$event.target.src = $scope.shareIcons[$event.target.dataset.id].orig;
}
This all works fine and well on my local environment, but on the production server it is veeeerrrrry slow. Like, 2-3 seconds to switch the images.
So my question is - is there an easy way to fix this? Either something within angular or a workaround/hack. Doesnt really matter as long as image switch time is sped up a bit. Or is it going to continue to be slow as long as I'm switching images via JS like this? Ideally, I would like avoid rewriting this using CSS.
Thanks in advance.
Hey bro I had the same problem, and all I could think of doing was preloading the images. That helped alot. Add a small piece of js code which loads asynchronously at the beginning of your document. Like this for example:
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
// for (i = 0; i < $scope.members.length; i ++){
// return members[i].source + ",";
// }
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image1.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image2.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image3.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image4.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image5.1.jpg",
"http://ramiawar.co/pages/speakersPage/pages/team/assets/images/image6.1.jpg"
)
I would consider optimizing the PNG image sizes. There are batch optimization tools available online, here is a blog post comparing a few of them to get you started: http://www.sitepoint.com/image-compression-tools/ perhaps you can test optimize a couple of images to see if you notice a change?
GL!
There's something strange and wired with the "image path" when using it in html page from IsolatedStorage.
I want to create an html-page, that will be used by app's webBrowser object. So I create an html page in IsolatedStorage and then use this page with webBroswser.Navigate.
Everything works fine except the images.
1) If I create an html page and images at the root of IsolatedStorage, everything works fine, the code <img src="image.png"> works and I can see the image at page page.
2) However, the way of saving pages and images at root is not a good idea in my opinion as I already have a number of directories, used by app there, so, I create a new directory "Html" and save all pages there.
Now, when I open this page I can't see my image. I've tried several variations of src links and still can't find an answer.
What'll be the correct link in <img src=..."> tag, if the hierarchy is:
IsolatedStorage-->Html(folder)-->index.html(file)
(1) IsolatedStorage-->Html(folder)-->image.png(file)
(2) IsolatedStorage-->Html(folder)-->Images(folder)-->image.png(file)
Actually, I thought it would be something like <img src="image.png"> for (1), but I tried several similar versions and none of them worked.
Well, that seems a bit strange:
This method will save the picture to the IsolatedStorage, but won't allow to use it in html img tag:
using (IsolatedStorageFile isopicsFile = IsolatedStorageFile.GetUserStoreForApplication())
{
if (isopicsFile.FileExists(Constants.HtmlFolderName + "launch.png") == false)
{
Stream yourFilepath = Application.GetResourceStream(new Uri("/someUri/launch.png", UriKind.Relative)).Stream;
BitmapImage b = new BitmapImage();
b.SetSource(yourFilepath);
WriteableBitmap wb = new WriteableBitmap(b);
using (var isoFileStream = isopicsFile.CreateFile(Constants.HtmlFolderName + "launch.png"))
{
var width = wb.PixelWidth;
var height = wb.PixelHeight;
// Theoretically, there may be the problem, as the file extention is png, not jpg
System.Windows.Media.Imaging.Extensions.SaveJpeg(wb, isoFileStream, width, height, 0, 100);
}
}
}
And this one will save the picture and will allow to use it with html tags:
string f = "somePath/launch.png";
StreamResourceInfo sr = Application.GetResourceStream(new Uri(f, UriKind.Relative));
using (BinaryReader br = new BinaryReader(sr.Stream))
{
byte[] data = br.ReadBytes((int)sr.Stream.Length);
string fileName = "launch.png";
string filePath = Constants.HtmlFolderName + fileName;
using (IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication())
{
if (isoStore.FileExists(filePath))
{
isoStore.DeleteFile(filePath);
}
using (BinaryWriter bw = new BinaryWriter(isoStore.CreateFile(filePath)))
{
bw.Write(data);
bw.Close();
}
}
}
Also, in second case, the picture properties must be set to Content + Always Copy.
I've started using LibTiff.NET for writing tiff IPTC tags lately and discovered strange behavior on some files that i have here. I'm using sample code that ships with LibTiff.NET binaries, and it works fine with most of the images, but some files are having image data corruption after these lines:
class Program
{
private const TiffTag TIFFTAG_GDAL_METADATA = (TiffTag)42112;
private static Tiff.TiffExtendProc m_parentExtender;
public static void TagExtender(Tiff tif)
{
TiffFieldInfo[] tiffFieldInfo =
{
new TiffFieldInfo(TIFFTAG_GDAL_METADATA, -1, -1, TiffType.ASCII,
FieldBit.Custom, true, false, "GDALMetadata"),
};
tif.MergeFieldInfo(tiffFieldInfo, tiffFieldInfo.Length);
if (m_parentExtender != null)
m_parentExtender(tif);
}
public static void Main(string[] args)
{
// Register the extender callback
// It's a good idea to keep track of the previous tag extender (if any) so that we can call it
// from our extender allowing a chain of customizations to take effect.
m_parentExtender = Tiff.SetTagExtender(TagExtender);
string destFile = #"d:\00000641(tiffed).tif";
File.Copy(#"d:\00000641.tif", destFile);
//Console.WriteLine("Hello World!");
// TODO: Implement Functionality Here
using (Tiff image = Tiff.Open(destFile, "a"))
{
// we should rewind to first directory (first image) because of append mode
image.SetDirectory(0);
// set the custom tag
string value = "<GDALMetadata>\n<Item name=\"IMG_GUID\">" +
"817C0168-0688-45CD-B799-CF8C4DE9AB2B</Item>\n<Item" +
" name=\"LAYER_TYPE\" sample=\"0\">athematic</Item>\n</GDALMetadata>";
image.SetField(TIFFTAG_GDAL_METADATA, value);
// rewrites directory saving new tag
image.CheckpointDirectory();
}
// restore previous tag extender
Tiff.SetTagExtender(m_parentExtender);
Console.Write("Press any key to continue . . . ");
Console.ReadKey(true);
}
}
After opening i see mostly blank white image or multiple black and white lines instead of text that have been written there (i don't need to read\write tags to produce this behavior). I noticed this happens when image already has a custom tag (console window alerts about it) or one of tags have got 'bad value' (console window in this case says 'vsetfield:%pathToTiffFile%: bad value 0 for "%TagName%" tag').
Original image: http://dl.dropbox.com/u/1476402/00000641.tif
Image after LibTiff.NET: http://dl.dropbox.com/u/1476402/00000641%28tiffed%29.tif
I would be grateful for any help provided.
You probably should not use CheckpointDirectory method for files opened in append mode. Try using RewriteDirectory method instead.
It will rewrite the directory, but instead of place it at it's old
location (as WriteDirectory() would) it will place them at the end of
the file, correcting the pointer from the preceeding directory or file
header to point to it's new location. This is particularly important
in cases where the size of the directory and pointed to data has
grown, so it won’t fit in the space available at the old location.
Note that this will result in the loss of the previously used
directory space.
im a little stuck using the canvas element in html5, have scoured the net looking for a workable solution but to no avail!
the main issue is that I want to click a button and send just the canvas element on the page to the printer.
i have tried using toDataUrl() - but this just seems to be resulting in a blank white image which has none of the canvas content!
the other issue i am experiencing is that attempting to initiate any javascript functions using "onClick" attached to a form button seems to be being tempermental at best!
here is my current attempt - this works in the sense that it does open a new window and attempt to send it to printer and it does create a base64 string (tested this using the "dataUrl" output on the second lowest document.write line) but as previously mentioned the image appears to be completely blank! (the canvas itself is definitely filled, both with an imported image and some text)
function printCanv()
{
var dataUrl = document.getElementById('copy').toDataURL(); //attempt to save base64 string to server using this var
document.getElementById('testBox').value = dataUrl; //load data into textarea
//attempt open window and add canvas etc
win = window.open();
self.focus();
win.document.open();
win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');
win.document.write('body, td { font-family: Verdana; font-size: 10pt;}');
win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');
((image code is here but site will not let me post it for some reason?))
win.document.write(dataUrl);
win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');
win.document.close();
win.print();
win.close();
}
note: the code from "win = window.open()" onwards is currently taken from a tutorial and not my own work!
it is currently being called using <body onload="printCanv";"> - for some reason I could not get this to work at all using a button (little chunk of code below is my attempt which seemed to fail)
<input type="button" id="test" value="click me" onClick="printCanv();"> </input>
apologies is this help request is all over the place! i haven't posted to a site like this before and it didn't like me posting some html/script!
thanks in advance for any help you may be able to offer :)
Edit: draw function:
function copydraw() { //function called "copydraw" (could be anything)
var testimage3 = document.getElementById('copy').getContext('2d'); //declare variable for canvas overall (inc paths)
var img3 = new Image(); //declare image variable called "img3"
var testVar = document.getElementById('userIn').value; //take value from userin box. only updating on browser refresh?
img3.onload = function(){ //when image has loaded (img.onload) run this function
testimage3.drawImage(img3,0,0); //draw "img" to testimage
testimage3.font = "30pt 'Arial'"; //font method varies font attrib (weight, size, face)
testimage3.fillStyle = "#000000"; //sets fill color
testimage3.fillText(testVar, 310, 360); //filltext method draws text (xup ydown)
}
img3.src = 'images/liecakeA4.jpg'; //source of image
}
This function works perfectly, it draws the object and adds text from the variable, but for some reason it seems to be preventing me from outputting it as an image. I'm really confused!
I'm not sure exactly what's wrong with your code, I suspect in your current version calling printCanv in the body load event will mean you're trying to print the canvas before it's drawn. Running it off the button should work better, I'm not sure why that wasn't working for you as there's no reason in principle why it shouldn't work.
To arrive at a working version I've modified your code slightly:
function printCanvas(el) {
var dataUrl = document.getElementById(el).toDataURL(); //attempt to save base64 string to server using this var
var windowContent = '<!DOCTYPE html>';
windowContent += '<html>'
windowContent += '<head><title>Print canvas</title></head>';
windowContent += '<body>'
windowContent += '<img src="' + dataUrl + '">';
windowContent += '</body>';
windowContent += '</html>';
var printWin = window.open('','','width=340,height=260');
printWin.document.open();
printWin.document.write(windowContent);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
This works for me in the Firefox 4.0 nightly.
One addition to the accepted-best-answer: It doesnt work here with Chrome 17.0.942.0 winvista, because the print-preview-dlg is shown within the website itself and printWin.close() will close the dlg too.
So printWin.close() must be delayed or initiated by the user, but those are no good solutions.
It would be best, if chrome printdlg could have a callback, sth. one knows, printing is done, and can close the window. If this is possible is another question.