CycleTile puts a shadow on my images windows phone - windows-phone-8

I'm trying to make some tasty live tile action for my windows phone 8 app. I've chosen to use the Cycle Tile template for some awesome gliding images but there is a problem: Microsoft seem to have kindly added a grey translucent filter to all the images so that the title text at the bottom is legible even in the case of a white image. This is annoying if the developer intends to make a metro style collage by using WritableBitmap. Whites come out as an off-white grey and the theme colour is a shade darker than all the other tiles:
The code (in a usercontrol in the visual tree):
const double TILE_H = 336;
const double TILE_W = 691;
Size TILE_SIZE = new Size(TILE_W, TILE_H);
const string FILEDIREC = "/Shared/ShellContent";
LayoutRoot.Height = TILE_H;
LayoutRoot.Width = TILE_W;
LayoutRoot.Clip = new RectangleGeometry() { Rect = new Rect(new Point(), TILE_SIZE) };
LayoutRoot.Background = new SolidColorBrush(
((Color)Application.Current.Resources["PhoneAccentColor"]));
TextBlock tb = new TextBlock();
Canvas.SetLeft(tb, 200.0);
tb.Text = "Why is this text grey? + lots more text";
tb.FontSize = 50;
tb.Width = 300;
tb.Foreground = new SolidColorBrush(Colors.White);
tb.TextWrapping = TextWrapping.Wrap;
LayoutRoot.Children.Add(tb);
var bmp = new WriteableBitmap((int)TILE_W, (int)TILE_H);
bmp.Render(LayoutRoot, null);
bmp.Invalidate();
var isf = IsolatedStorageFile.GetUserStoreForApplication();
var filename = FILEDIREC + "/tile.jpg";
if (!isf.DirectoryExists(FILEDIREC))
{
isf.CreateDirectory(FILEDIREC);
}
using (var stream = isf.OpenFile(filename, System.IO.FileMode.OpenOrCreate))
{
bmp.SaveJpeg(stream, (int)TILE_W, (int)TILE_H, 0, 100);
}
imageURIs.Add(new Uri("isostore:" + filename, UriKind.Absolute));
//similar process for other images used by CycleTileData
//these images then added to CycleTileData in the usual way
Any help, explanation, advise or workarounds to get degreying will be greatly appreciated. Thanks. I've tried using the images in different tile types, eg. the front of the flip tile has no issues.

I don't see any obvious issues with the code, but something I would try is to use the Isolated Storage Explorer and download the file and see what it looks like.
When generating custom tiles you may want to consider generating a PNG instead of a JPG. One of the benefits is that you then can generate a transparent image (which means your tile will always have the right theme background color) and PNG also uses a non-lossy compression scheme so there are no compression artifacts introduced.
Take a look at this answer where I describe how I generate tiles in one of my apps. Hopefully that will be of some use to you.

Related

Set transparent for specific element

I want set transparent for specific element, i follow this code:
var instanceTree = this.viewer.model.getInstanceTree();
var fragList = this.viewer.model.getFragmentList();
this.listElement.forEach(element => {
instanceTree.enumNodeFragments(element, (fragId) => {
console.log(element.material)
var material = fragList.getMaterial(fragId)
if (material) {
material.opacity = value;
material.transparent = true;
material.needsUpdate = true;
}
});
});
this.viewer.impl.invalidate(true, true, true);
but it overide for all elements have that material. How can i set for selected element?
Appreciate any comments.
UPDATE 1:
i found go around way is clone main material than register it with different name:
var newMaterial = material.clone();
const materials = this.viewer.impl.matman();
materials.addMaterial('mymaterial',newMaterial,true);
fragList.setMaterial(fragId,newMaterial);
newMaterial.opacity = value;
newMaterial.transparent = true;
newMaterial.needsUpdate = true;
but effect is not what i want, it has different color and when set transparent i can only see a couple object behind it
You can create your own, custom THREE.js material and assign it to the fragment using fragList.setMaterial(fragId, material).
For more information on using custom materials or shaders, see https://forge.autodesk.com/blog/custom-shader-materials-forge-viewer.
EDIT:
Regarding the visual anomalies (for example, when you only see some of the objects behind something semi-transparent), this is a known problem, unfortunately with no clear solution. When the Forge Model Derivative service creates an SVF file to be viewed in Forge Viewer, the individual scene elements are stored in a data structure optimized for fast traversal, depending on whether they are semi-transparent or fully opaque. This data structure is fixed, and so unfortunately, when you take an object that was originally fully opaque, and you make it semi-transparent, it will most likely be rendered in a wrong order...

'Pin To Start' custom tile

When a user 'Pins To Start' on their wp8 / wp8.1 phone, how can I change the image that is saved as the live tile? Can I modify this?
I am guessing there is some sort of meta-tag or something that I am not aware of.
EDIT Sorry, i really should have clarified, this is for when you pin to start a web-page and it appears in the start menu. I was sure there was a meta tag that went into the section that solved it. Or is it something to do with Favicon?
May be you can try this ,This is for pinning a secondary tile.I am unsure of the possibility for changing the image in primary tile
StandardTileData standardTileData = new StandardTileData();
standardTileData.BackgroundImage = new Uri("ApplicationIcon.png", UriKind.Relative);
standardTileData.Title = "Your title";
standardTileData.Count = 26;
standardTileData.BackTitle = "Pinned";
standardTileData.BackContent = "Tile";
standardTileData.BackBackgroundImage = "Your image URL";
ShellTile tiletopin = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("MainPage.xaml"));
if (tiletopin == null)
{
ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), standardTileData);
}
else
{
MessageBox.Show("Already Pinned");
}
To change the Images on the pinned tile you need to update the images in the WMAppManifest.xml file.
Open the WMAppManifest.xml file present in Properties in Solution Explorer:
Once you Open the file Go to Application UI Tab and update the icons for small, Medium and Large size. The Icon that comes up when you pin the Application icon is The Medium Icon. So that will come up:

JSFL Replace image for library image

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

AS3 > Use different text styles (bold and regular) in the same dynamic text field

I've been using as3 for a lot of years but everytime I need to manipulate fonts I get crazy :(
My setup:
I'm filling up via code a movieClip with a lot of dynamic textFields. Their values come from an external XML.
My problem:
my client wants to insert html tags inside of the xml to have bold text in part of them. For example they want to have: "this string with this part bold".
The Xml part is ok, formatted with CDATA and so on. If I trace the value coming from the xml is html, but it is shown as regular text inside the textfield....
The textfields are using client custom font (not system font), and have the font embedded via embedding dialog panel in Flash by the graphic designer.
Any help?
This is the part of code that fills up the textfields (is inside a for loop)
var labelToWrite:String = labelsData.label.(#id == nameOfChildren)[VarHolder.activeLang];
if (labelToWrite != "") {
foundTextField.htmlText = labelToWrite;
// trace ("labelToWrite is -->" +labelToWrite);
}
And the trace outputs me
This should be <b>bold text with b tag</b> and this should be <strong>strong text </strong>.
Your code looks good. So the issue will be with the embedded Font. When you embed a font in flash, it doesn't embed any separate bold versions, so you may need to embed a bold version of your font.
Some resources:
Flash CS4 <b> tag in with htmlText
I find that html text works best by using the style sheets to declare your fonts instead of text formats.
var style:StyleSheet = new StyleSheet();
style.setStyle(".mainFont", { fontFamily: "Verdana", fontSize: 50, color: "#ff0000" } );
var foundTextField:TextField = new TextField();
foundTextField.embedFonts = true;
foundTextField.autoSize = TextFieldAutoSize.LEFT;
foundTextField.antiAliasType = AntiAliasType.ADVANCED;
foundTextField.styleSheet = style;
foundTextField.htmlText = "<div class=\"mainFont\">" + labelToWrite + "</div>";
See: flash as3 xml cdata bold tags rendered in htmlText with an embedded font
Other reasons maybe:
Are you embedding the right type of font (TLF vs CFF)?
If not using the flash IDE to make your textField, are you registering the font?
Font.registerFont(MyFontClass);
You can work with embeded fonts in Animate graphic design. Just add fonts and create them with a class name.
At Adobe Animate objects library you can add and create fonts as class objects like this:
Select a font and styles to add
Assign a name and export as a Action Script Class
At code frame, you must add the fonts with same classes names created before:
var gothamMediumItalic = new GothamMediumItalic();
var formatMediumItalic:TextFormat = new TextFormat();
formatMediumItalic.font = gothamMediumItalic.fontName;
var gothamBookItalic = new GothamBookItalic();
var formatBookItalic:TextFormat = new TextFormat();
formatBookItalic.font = gothamBookItalic.fontName;
var gothamBoldItalic = new GothamBoldItalic();
var formatBoldItalic:TextFormat = new TextFormat();
formatBoldItalic.font = gothamBoldItalic.fontName;
this.embedFonts = true;
this.antiAliasType = AntiAliasType.ADVANCED;
Finally, you just need to use your box added as graphic object, and set format and content:
var yourText:String = "Some Text";
boxText.defaultTextFormat = formatBook; //My default text font style
boxText.text = yourText; //Full text in same format
boxText.setTextFormat(formatBookItalic,yourText.indexOf("<i>"),yourText.indexOf("</i>")); //Some text in another format found by custom chars
That works fine and lets you use less code and more interface options. I hope this could be usefull for someone.

printing just canvas element on a page

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.