Text and Image edit on Canvas with save as file - windows-phone-8

I am working on an application, in which there is requirement for one page where user can
Add/Edit text on canvas and save as file to print/edit it again.
For example:
Add text to canvas, change its fonts, color, size, etc.
Later I want to add option for inserting the image on canvas.
It is just like MS Paint which is quite big software,here I just need simple canvas, under that a stack panel where I want to add options to edit text (color palette, size, & font).
Please help me out with suggestions & examples. It is not mandatory to use canvas. My objective to text/image edit page, save as file, and editable again.
Thank you in advance.

To save text to a file for later use, use a textBOX and isolated storage. A canvas is mostly to work with shapes, images, and other graphics controls.
Say you have a textbox named box in xaml.
XAML
<Textbox x:name="box" />
This code below could be in some kind of save click method when a button is clicked.
C#
using (IsolatedStorageFile isoFile = IsolatedStorageFile.GetUserStoreForApplication())
{
using (IsolatedStorageFileStream isoStream =
new IsolatedStorageFileStream("box.txt", FileMode.Create, isoFile))
{
using (StreamWriter sw = new StreamWriter(isoStream))
{
sw.Write(box.Text);
}
}
}

Related

Can Sikuli be used for web testing?

I was working with Sikuli for desktop application like notepad,
but want to know like can I open new tab in browser using Sikuli?
Yes, using Sikuli you can also automate browser. Take images of required web elements (Open new tab button in your case) and stimulate click action using Sikuli APIs.
Yes, you can use Sikuli for web testing.
In this code example, you can use sikuli app to: open browser --> New tab --> Give a like on a webpage (UTAD in this case):
click("mozilla_icon.png")
click("nova_aba.png")
click("endereco.png")
paste("www.utad.pt")
type(Key.ENTER)
wait(8)
click("like_btt.png")
wait(5)
Images of sikuli code:
yes you can use sikuli for performing open tab first take the image of new tab control like in case of FF https://drive.google.com/file/d/0B09BIsDTY_AuZFpMWko1U3BFc0E/view?usp=sharing .Save this image on you local machine. But make sure that image which is used for reference is visible on screen.Call the function mentioned below by and give it Absolute path to above mentioned image.
//provide absolute path in img
public void click_Image(String img)
{
s = new DesktopScreenRegion();
target = new ImageTarget(new File(img));
r = s.find(target);
// Create a mouse object
mouse = new DesktopMouse();
// Use the mouse object to click on the center of the target region
mouse.click(r.getCenter());
}

Can I type over an image and output as one image file?

Is there a way in HTML5 Canvas that allows me to type out a sentence into a text box and it puts that text onto a banner image and then allows me to save that image as one with text?
The reason I want to do this is that it's for a flyer builder so people without any software to edit banners can just choose a banner template that I've made without any text and then type in there own and then output the banner to the flyer as one image.
I know that there are things Canvas can do like typing onto images but I want to know if its possible to output the image to a set destination.
Thanks in advance.
I understand that your text - that the client can type - is drawn in the canvas?
If so - there is a way to save your entire canvas as an image.
you can use a div as a preview image of the drawing, and generate it like this:
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
Here's a fiddle http://jsfiddle.net/GnH8E/
The first image is the canvas - the next is the image prewiew.

Can Flash text and images be changed without modifying source FLA?

Generally speaking, let's say I create a small, simple FLA animation that simply takes the text "Take a look at Tuesday's Deals!" and moves it across the screen. I then build and generate the SWF file.
Is it somehow possible to create this FLA file so that, once the SFW is built, I can change the text without having to open the FLA and recreating the SWF?
Can it be done with images? For example, I create a FLA with a 50x50px image that moves across the screen. Can I switch to another 50x50px image without having to rebuild the SWF?
The reason I ask is because I can create the initial FLA, but I won't be able to modify. The person that will deal with modifying the text and/or image doesn't know Flash.
Thanks.
Yes, you can load content dynamically at run-time. The design of your application should be such that it loads an xml file or something of that nature to specify what artwork/text to use.
So you need to load an XML file , or some other type of data.
Then dynamically load audio/artwork based on that data.
You can even make the app so that it can load other .swf files with new content.
You can use command line assembler/disassembler to do this. Here are the two command line assembler/disassembler I know.
http://www.nowrap.de/flasm
http://swfmill.org/
Disassemble the swf using either one of this, you will get text file.
In your case you can define a variable for text and find and replace the text.
And finally assemble it a swf.
Hope this helps.
you can pass parameters to the swf containing information to be used.
http://www.mysite.com/banner/banner.swf?text="my text"&image="image1"
var flashVars:Object = this.root.loaderInfo.parameters;
var text:String = flashVars["text"];
var imagetype:String = flashVars["image"];
In the code you treat the data to be received.

Downloading a dynamically generated SVG file from the browser

If I create an image using HTML SVG element, can I then offer this as an SVG file download to the user. For example I may want to load an SVG image, apply some basic transformations to it, add some text, then let the user download the result as a vector image.
Is that possible? I have been doing something similar with Canvas but have been struggling creating a vector image. I wasn't aware that SVG elements were so versatile when I cam across them this morning but if I can do the above it would be great.
Simple solution using a data URI:
var svg_root = document.getElementById('your_svg_root_element_here');
var svg_source = svg_root.outerHTML;
var svg_data_uri = 'data:image/svg+xml;base64,' + btoa(svg_source);
var link = document.getElementById('anchor_element');
link.setAttribute('href', svg_data_uri);
Although it worked, when clicking on the link, the browser stalled for a few seconds.
This seems to be the simplest solution and should be compatible with all modern browsers. However, it has some noticeable overhead. If someone else knows a different solution (maybe using blobs or something similar), please add here as another answer!

click doesn't fire when WMODE=TRANSPARENT in SWFUpload button

I have a Flash-based SWFUpload upload button in a HTML page.
I am trying to style that button. SWFUpload provides a Javascript setup interface to the Flash button's settings. I don't have Flash myself, so I have to work with the pre-compiled SWF file.
.....
button_width: "100",
button_height: "20",
button_placeholder_id: "spanButtonPlaceHolder",
button_text: '<span class="theFont">Upload</span>',
button_text_style: ".theFont { font-size: 18; font-family: Verdana; color: #FFFFFF; }",
button_text_left_padding
....
Now, I want the button to fit in with the background colour of the HTML element it resides on. I don't care whether I achieve this by transparency, or by giving the flash button a colour. But SWFUpload 2.20 doesn't have a setting to specify the background colour any more, and I don't want to use a background image with a specified colour.
I tried
button_window_mode : SWFUpload.WINDOW_MODE.TRANSPARENT,
this gives me a transparent button, but it does not react to click events any more. Not even when I click the tiny white pixels of the text.
I tried giving it a transparent background image:
button_image_url : "$swfupload_widget_webroot/images/transparent.png", // 1x1 Pixel
button_image_width: 100,
button_image_height: 20,
but to no avail.
Does anybody have an idea what to do?
Why won't the movie handle clicks any more when set to transparent?
I'm testing on Firefox 3.5 on Windows 7.
Window modes like transparent and opaque are notorious for the odd input bugs they inflict. It is definitely a good idea to stay away from it when you can.
I haven't used SWFUpload, so I'm not entirely sure how it goes about embedding the SWF file. But regardless of the specifics, in the end I'm sure it's using embed/object tags, and for those, there's the bgcolor parameter that overrides the background color specified inside the SWF file. I would suggest taking a look at this parameter (scroll down).
SWFObject is a common way to dynamically embed SWF files using javascript. In case that's what SWFUpload uses, you should be able to apply the following principle to set the bgcolor parameter:
var params = {
bgcolor: #ffcc00,
};
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0",
"expressInstall.swf", {}, params, {});
As I said, I'm not sure what the SWFUpload interface looks like, but the key is to find a way to specify the embed parameters. Hopefully that will at least nudge you in the right direction!
I noticed that with mode=transparent or mode=opaque the flash was seeing the mouse just not the click. So in the flash file I changed the button action from
on (release) {
to
on (rollOver) {
and wouldn't you know, it works. It's a little quirky since people will click on it anyway and will have to move the mouse off the button to "click" it again. But it's better than having to redesign the whole homepage menu because a client wants a flash banner on there.
Naturally, if you don't have the ability to edit the flash file itself then unfortunately this won't help.