how to show vertical slider in [CodenameOne] - slider

I want to show slider vertically in CodenameOne. Below is code which I tried to make it possible but still shows horizontally.
Code :
Slider s1 = new Slider();
Slider s2 = new Slider();
s1.setVertical(true);
s1.repaint();
s2.setVertical(true);
s2.repaint();
findContMainT2O(f).add(BorderLayout.EAST, s1);
findContMainT2O(f).add(BorderLayout.WEST, s2);
findContMainT2O(f).repaint();
see output image here

There is one more thing to do to make this work.
If you you look at the Slider and SliderFull styling, you could see that they have horizontal images. You will have to change this to vertical.
This is what I usually do if I want to reuse codename one slider images:
Go into my res folder and take the hd.png from these folders, depending on the theme you selected, In your case...
hd.png from sliderBlueCenter renamed to sliderBlueCenterV
hd.png from sliderBlueLeft renamed to sliderBlueBottom
hd.png from sliderBlueRight renamed to sliderBlueTop
hd.png from sliderEmpty renamed to sliderEmptyCenter
hd.png from sliderEmptyLeft renamed to sliderEmptyBottom
hd.png from sliderEmptyRight renamed to sliderEmptyTop
Then I rotate 90 degrees counter-clockwise these copied and renamed images and using Image manipulation software like Gimp or Photoshop.
Now I open my theme.res and add this images using Quick Add Multi Images and selecting all of theme and choose HD.
The next thing is manipulating my current slider styling, I double click the slider and switch to border tab. Click the 3-dots and choose Vertical Image instead of Horizontal Image. Change your images to the added images appropriately.
Do the same for SliderFull then copy these 2 styles from Unselected and paste them into Selected and Pressed to override those.
Here is a dropbox link to download slider images I manipulated earlier.

Related

ListView Right-to-Left Mode Images Problem [duplicate]

I have a ListView. Its RightToLeft property is set to Yes and its RightToLeftLayout is set to True. The ListView is populated with files in a directory.
In my code, I get the appropriate icon of a file using System.Drawing.Icon.ExtractAssociatedIcon(string filePath) and assign it to the file. This means that the icon come directly from the operating system. I do not have a directory with custom icons.
So the result is this:
As you can see, the PowerPoint file icon is flipped. When I change the layout to LeftToRight it is shown perfectly. How can I fix it?
Thanks.
If you only need the icon to be reversed, I suggest putting it into a Bitmap then using the Bitmap.RotateFlip you can flip it horizontally.
Bitmap bm = System.Drawing.Icon.ExtractAssociatedIcon(string filePath).ToBitmap();
bm.RotateFlip(RotateFlipType.RotateNoneFlipX);

how can I transform size of svg with svg-edit

Is it possible to change the size of an existing svg using svg edit? I https://code.google.com/p/svg-edit/ I have a rather large svg that I wish to scale down. Google's tool doesn't have an icon (that I can see) to scale the size
Scaling an entire SVG document isn't really supported as a button press or anything but it can be accomplished.
Open your project into SVG-Edit, select everything (press A on your keyboard) then right click and choose Group. Then go to Menu > Document Properties and enter your new dimensions. Then select your SVG content and move it onto your new small canvas. Easiest way is to use the X and Y coordinates in the top grey bar (enter 0 for both). Then just resize the whole document as needed by dragging the small circles located on the corners of your content. Hold the shift key on your keyboard to scale proportionately.

Resize buttons styled with AppBarButtonStyle

I like the AppBarButtonStyle idea of using font character as button icon because of its scaling abilities, but it is of no use if i cannot resize them properly.
Changing Width or Height of button does not work, because AppBarButtonStyle only resizes padding between button icon and button borders. Changing FontSize of button does not work either.
Is there any way of resizing buttons styled with AppBarButtonStyle in WinRT application? I dont mind if i have to override or modify AppBarButtonStyle, as long as it preserves the ability to use font character as button icon.
Any useful advices will be appreciated!
You can easily create your own custom button from AppBarButtonStyle from the original in the standardstyles.xaml .
I did so to create a custom smaller button with no text and the only hard part was aligning everything: you're not adding shapes, you're adding a character, so it may not be as aligned as you think. Default Buttons contain 3 charatctes: outline, fill and glyph.
If you want, I can share my simplified code for the control.

Load larger image on tap of small image with animation

I'm trying to load a large version of an image in the centre of the user's screen when then tap on a smaller version of the image that's already on my view.
Ideally I want to do this using an animation to get to the new image like a vertical flip.
Also if there's a way to make the background look greyed out like it's not the foreground then that would be even better.
Here's an image of what I'm after, I'm at work at the moment so haven't got access to the actual code / images.
I'm a new user so can't add pictures. Click here if you want to see what I'm thinking.
Image
There is an KGmodal Example Exist in GitHUB hope that Might Help you.
You have to Change the content view and Add an Imageview Programatically (with required size ) in the content View.
Follow the below link: https://github.com/kgn/KGModal
For Fliping the image see the tutorial iphone Flip Image.
In the end I added the larger image on to begin with and set its alpha to 0, then added a gesture recognizer on the smaller image that animated the larger one and gradually changed its alpha to 1. The did the reverse on the large image. Don't know why I didn't think of that in the first place!

UITabBarItem and icon size

I am using UITabBarItem. If i set image, its not correctly displayed. Image is "zoomed", so I can see only top part of it. Image size is 60x60px.
I am setting image from xcodes XIB editor -> BarItem -> Image
Whats wrong with it ? According to Apple Doc, image should be 60x60 for Retina and even bigger images should be auto-scaled to fit viewing area.
When you are supplying a retina image you should name it with [name]#2x~iphone.png or [name]#2x~ipad.png. Then, in the IB you should put the name of the file without the whole suffix, so just [name] instead of [name]#2x~iphone.png. The image won't show up in the IB, but should be ok in the live app.
First, you have to make two icons, one of 30x30, and a second one 60x60 with "#2x" appended at the end of your filename.
Then bind the 30x30 icon to your UITabBarItem in XIB editor. Apple should select automatically the appropriate picture to display depending on the device it's running on.