I have a very simple application that has one screen and one button. The main screen has a verticalFieldManager with a BitmapField inside it, and one button beneath the bitmap. I want to be able to overlay another image on top of this when the user clicks a button. The overlay image is a PNG with transparent background, and this is important for design, so I can't use popupscreen or a new screen because the backgrounds are always white by default, and I've heard alpha doesn't really do the trick.
I guess what I'm asking is if anyone knows a simple way to...
A) take a standard verticalFieldManager and overlay a PNG on top of the inner contents
B) overlay a PNG over the screen, no matter the contents
The basic functionality of this app was intended to be - show an image. on click, show another overlaid on top. on click again, remove the popup image.
I haven't found anything that addresses something like this online, but I have read of people doing similar things that utilize popupscreen and new screens in a way I don't need to do.
Hopefully this makes sense.
Thanks
Have you tried something like this in your custom class that overrides a screen?
EncodedImage _overlayImage;
boolean _overlay = false;
// this is to catch the click, you might do it different
public void fieldChanged(Field field, int context)
{
if (field == _imgChangeButton) {
// get the overlay image here, however you want
_overlayImage = getEncodedImageResource(blah);
_overlay = true;
invalidate();
}
}
protected void paint(Graphics graphics) {
super.paint(graphics);
if (_overlay) {
graphics.drawImage(...);
}
}
If the PNG has transparency in it the bb drawImage stuff should deal with it ok. In the drawImage call obviously you can mess around with finding the existing image and setting the x,y right on top of it.
In general I would say do a lot of testing with paint() and messing with the graphics directly before you try to do anything with another screen. You can do a lot overriding paint() for the screen... you get the whole graphics.
Related
I'm working on a basic design app where the user can upload images to a canvas, drag them around and resize them. The problem I have is resizing the image with a mouse drag. I'd like the user to position the mouse pointer on either corner of the bitmap image and drag either towards or away from the bitmap to resize it proportionally. I'd be grateful for any code or suggestions.
Lanny mentioned that you had this question here. ZIM, which is based on CreateJS has this functionality built in - it is called transform(). We also have an uploader built in called Loader().
Here is the code that you would use inside the ZIM template available on the code page at ZIM https://zimjs.com
const loader = new Loader().center();
loader.on("loaded", e=>{
e.bitmap.center().transform();
// or if you want multiple files
// loop(e.bitmaps, bitmap=>{
// bitmap.center().transform();
// });
loader.removeFrom();
stage.update();
});
Below is an image that has been loaded. You can try it here https://zimjs.com/explore/uploadresize.html. The transform interface will go away when the user clicks off the image and then comes back when they click on the image. There are various options for all of this that you can read about in the Docs available on the ZIM site.
All your regular CreateJS will work and you will find that ZIM is helpful in many other ways too! Aside from transform() there is drag() for normal dragging, and gesture() for pinch zoom and rotate - you would use one or the other of these not combined.
Situation
I am currently exploring android development on xamarin and therefor decided to develop a small game.
Within the game, I have an ImageButton to access some menus. For instance the level up screen.
I made some low res image for the image button:
Issue
Now, if I use this in the image button, the image gets scaled up and therefore looks Blurry:
I guess, the reason being is bi-linear image sizing.
The proper implementation for my specific case would be sizing with nearest neighbor, as it preserves the low pixel look:
Question
How would I go about changing this? I have found code for WPF winforms but realized that xamarin has different calls...
class ImageButtonWithHardEdgeExpansion : SomeControl
{
public InterpolationMode InterpolationMode { get; set; }
protected override void OnPaint(PaintEventArgs paintEventArgs)
{
paintEventArgs.Graphics.InterpolationMode = InterpolationMode;
base.OnPaint(paintEventArgs);
}
}
For an intermediate workaround, I can use an external image resizer and store the image in high res... but that defies the purpose for me a little. so I am looking for a more long term solution.
You can use the padding to do this.
Before padding:
After padding:
i am using the declarative/ui-binder method of adding images to a page. this is in combination with using the ImageBundle functions that GWT provides.
what i would like to do is change the image out when i hover over the image. my questions are: what are the best way to do this, and is my current method the best method in the first place?
my code looks something similar to:
<ui:with field='res' type='path.to.my.app.AppResources' />
...
<g:HorizontalPanel ui:field='horizPanel' >
<g:Image ui:field='image1' resource='{res.image1}'/>
</g:HorizontalPanel>
that is then tied into an ImageBundle class via the AbstractImagePrototype.
then, in my main handler, i have something like:
#UiHandler("image1")
public void onMouseOver(MouseOverEvent event)
{
/* What do I do here? */
}
say i want to replace image1 with image2 when the user hovers over image1 (and put image1 back when the pointer leaves the image). do i replace the image1 object? do i use the setUrl function for that image? do i create a whole new image, and use the add/remove functions for the horizontal panel to add it on? that seems awfully inefficient. do i not even need an ImageBundle; can i add images via something like <g:Image .... url='path/to/image1.png' /> and then use CSS and the hover attribute to swap out the image?
some guidance would be great. the GWT documentation is seriously lacking in this area. thanks.
PushButton is good for this kind of behavior. You can go father than :hover - you can specify arbitrary html and widgets for different faces of the buttons.
See gwt pushButton in UiBinder for an example in uibinder.
There will be more overhead in this approach, since it does register mouse handlers and set up a whole widget - if you really only need the rollover image and not any other event handling, a :hover css selector (maybe with a #sprite?) is probably best.
Using mouse handlers here seems a little overhead. I would use css and the hover selector
.foo {
background: url('path/to/image1.png');
/* height, width, etc. */
}
.foo:hover {
background: url('path/to/image2.png');
/* ... */
}
then use a widget that renders a div element (e.g. SimplePanel) instead of an image and set the style foo as stylePrimaryName
<g:HorizontalPanel ui:field='horizPanel' >
<g:SimplePanel ui:field='image1' stylePrimaryName='foo'/>
</g:HorizontalPanel>
I need to know, which is the best way to blur the background of the Windows Phone 7 app to concentrate the user's attention on a "always on top" popup window.
My idea is:
Make an in-memory screenshot of the background grid (by turning it into a freezable or something).
Add an image that overlaps the background grid, but is below (with the z-index) the popup.
Still I doubt I will be able to overlap the application bar.
At this point, if you have a solution, please advise.
A few pointers for you ...
Unfortunately the Silverlight BlurEffect and other Bitmap effects didn't make it into Window Phone 7, so you will have to implement the blur yourself. This is actually pretty simple, just use a Gaussian Convolution Filter.
To achieve this effect you can capture the visuals of your application into a WriteableBitmap, manipulate the image to create your blur, then overlay this image over your application using a PopUp. I did something similar in a blog post I wrote about fly-out text animations here:
http://www.scottlogic.co.uk/blog/colin/2011/04/metro-in-motion-3-flying-titles/
Find your root visual as follows:
var rootElement = Application.Current.RootVisual as FrameworkElement;
Add a copy of this UI into a popup as follows:
_backgroundMask = new Rectangle()
{
Fill = new SolidColorBrush(Colors.Black),
Opacity = 0.0,
Width = rootElement.ActualWidth,
Height = rootElement.ActualHeight
};
_popupCanvas.Children.Add(_backgroundMask);
_targetElementClone = new Image()
{
Source = new WriteableBitmap(element, null)
};
_popupCanvas.Children.Add(_targetElementClone);
And show it:
_popup.IsOpen = true;
I'll leave you to work out how to blur the background!
As an aside, your will not be able to overlay or capture the application bar visuals. Hide it before performing this transformation.
Finally, blurring the background isn't really very 'Metro'. Are you sure you want to do this?
Instead of blurring just use a semi transparent layer over the top of the page.
You should hide the application bar before trying to create such an effect as you won't be able to place anything on top of it.
I recently asked a question about translucent components causing odd artifacts from seemingly not updating properly. The answer I received caused the artifacts to go away, but at the cost of translucency.
The solution was to- for every translucent component- also call the setOpaque(false) function. This way, Swing knew that it needed to redraw the background behind those components.
However, this came at the cost of the translucency that I was trying to achieve. It caused the components to become transparent instead.
The premise is this: I am designing the GUI for a chat client, and a feature request was to have a background. I successfully got the background working by following a code snippet for extending the JPanel class, but then I wanted the components to allow the background to show. After setting their translucency, remnants of updated components were being displayed where they shouldn't have been. I came here and got my problem solved, but now I've got a new problem. So here we are.
So, here is what I've surmised:
-Calling the setOpaque(false) function for each desired component and NOT setting a translucent color does not achieve what I want.
-Setting a translucent color and NOT calling setOpaque(false) allows the translucent background to show, but causes artifacts, putting me back at square one.
So I need some middle ground between transparent with no artifacts, and translucent with artifacts. Namely, I want a translucent background (not completely transparent) that has no artifacts.
It seems like I'm going to need to override the JFrame to cause it to repaint all its components, regardless of the opacity. Unless there's something I'm missing.. which is why I'm here!
Thanks!
(Here's a link to the original question, with a picture for reference: Java Swing - Translucent Components causing Artifacts)
One option would be to override the components and draw the background yourself:
class TranslucentLabel extends JLabel {
public TranslucentLabel(String text) {
super(text);
setOpaque(false);
}
#Override
public void paintComponent(Graphics g) {
g.setColor(new Color(255, 0, 0, 64));
Insets insets = getInsets();
g.fillRect(insets.left, insets.top,
getWidth() - insets.left - insets.right,
getHeight() - insets.top - insets.bottom);
super.paintComponent(g);
}
}
EDIT: Alternatively you could draw the translucent background colour for the child components directly onto the panel, then you would not have to override components:
class YourPanel extends JPanel {
#Override
protected void paintComponent(Graphics g) {
Graphics2D g2d = (Graphics2D)g.create();
// Draw your background image here to g2d.
g2d.setColor(new Color(255, 0, 0, 64));
Area area = new Area();
for (Component component : getComponents()) {
area.add(new Area(component.getBounds()));
}
g2d.fill(area);
g2d.dispose();
}
}
There is a disadvantage to this approach. If there is a genuinely transparent part of a component (such as a rounded border), then its entire background will be coloured.