Skip to content

Commit 21d4121

Browse files
shai-almogshai-almog
committed
Fixed help and improved validation
1 parent db910a1 commit 21d4121

File tree

5 files changed

+115
-10
lines changed

5 files changed

+115
-10
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,5 @@ nbbuild/
66
dist/
77
lib/CodenameOne_SRC.zip
88
lib/impl/*
9+
10+
.cn1/.lock

‎codenameone_settings.properties‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
#
2-
#Sat May 28 20:24:10 IDT 2016
2+
#Thu Jun 02 12:00:51 IDT 2016
33
codename1.ios.appid=Q5GHSKAL2F.com.codename1.tools.skindesigner
44
codename1.ios.release.provision=
55
codename1.arg.java.version=8
66
codename1.arg.rim.obfuscation=false
77
codename1.arg.ios.newStorageLocation=true
88
codename1.j2me.nativeTheme=nbproject/nativej2me.res
99
codename1.arg.ios.project_type=ios
10+
codename1.arg.desktop.theme=desktoptheme
1011
codename1.arg.ios.interface_orientation=UIInterfaceOrientationPortrait\:UIInterfaceOrientationPortraitUpsideDown\:UIInterfaceOrientationLandscapeLeft\:UIInterfaceOrientationLandscapeRight
1112
codename1.displayName=CodenameOneSkinDesigner
1213
codename1.android.keystoreAlias=

‎native/javase/desktoptheme.res‎

385 KB
Binary file not shown.

‎src/com/codename1/tools/skindesigner/SkinDesigner.java‎

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@
2626
import com.codename1.components.FloatingHint;
2727
import com.codename1.components.ImageViewer;
2828
import com.codename1.components.OnOffSwitch;
29-
import com.codename1.components.ScaleImageButton;
3029
import com.codename1.components.ScaleImageLabel;
3130
import com.codename1.components.ToastBar;
3231
import com.codename1.io.FileSystemStorage;
@@ -41,18 +40,18 @@
4140
import com.codename1.io.Storage;
4241
import com.codename1.io.Util;
4342
import com.codename1.system.NativeLookup;
43+
import com.codename1.ui.BrowserComponent;
4444
import com.codename1.ui.Button;
4545
import com.codename1.ui.Command;
4646
import com.codename1.ui.Container;
47-
import com.codename1.ui.EncodedImage;
4847
import com.codename1.ui.FontImage;
4948
import com.codename1.ui.Graphics;
5049
import com.codename1.ui.Image;
5150
import com.codename1.ui.Tabs;
5251
import com.codename1.ui.TextArea;
5352
import com.codename1.ui.TextField;
5453
import com.codename1.ui.Toolbar;
55-
import com.codename1.ui.events.ActionEvent;
54+
import com.codename1.ui.geom.Rectangle;
5655
import com.codename1.ui.layouts.BorderLayout;
5756
import com.codename1.ui.layouts.BoxLayout;
5857
import com.codename1.ui.layouts.GridLayout;
@@ -61,9 +60,7 @@
6160
import com.codename1.ui.spinner.Picker;
6261
import com.codename1.ui.util.ImageIO;
6362
import com.codename1.ui.validation.NumericConstraint;
64-
import com.codename1.ui.validation.RegexConstraint;
6563
import com.codename1.ui.validation.Validator;
66-
import com.codename1.util.Base64;
6764
import java.io.ByteArrayOutputStream;
6865
import java.io.IOException;
6966
import java.io.InputStream;
@@ -162,8 +159,8 @@ private ImageSettings createImageSettings(String imageFile, String prefix, Valid
162159
autoSave(screenPositionY, prefix + "Y");
163160
vl.addConstraint(screenWidthPixels, new NumericConstraint(false, 20, 5000, "Screen size must be a valid integer in the 20-5000 range")).
164161
addConstraint(screenHeightPixels, new NumericConstraint(false, 20, 5000, "Screen size must be a valid integer in the 20-5000 range")).
165-
addConstraint(screenPositionX, new NumericConstraint(false, 20, 5000, "Screen size must be a valid integer in the 20-5000 range")).
166-
addConstraint(screenPositionY, new NumericConstraint(false, 20, 5000, "Screen size must be a valid integer in the 20-5000 range"));
162+
addConstraint(screenPositionX, new NumericConstraint(false, 0, 5000, "Screen position must be a valid integer in the 0-5000 range")).
163+
addConstraint(screenPositionY, new NumericConstraint(false, 0, 5000, "Screen position must be a valid integer in the 0-5000 range"));
167164

168165
Button aim = new Button();
169166
FontImage.setMaterialIcon(aim, FontImage.MATERIAL_PAN_TOOL);
@@ -190,7 +187,21 @@ public Container getContainer() {
190187

191188
@Override
192189
public Image getSkinImage() {
193-
return sl.getIcon();
190+
Image img = sl.getIcon();
191+
int[] data = img.getRGB();
192+
int width = img.getWidth();
193+
int height = img.getHeight();
194+
Rectangle screen = new Rectangle(screenPositionX.getAsInt(0), screenPositionY.getAsInt(0),
195+
screenWidthPixels.getAsInt(50), screenHeightPixels.getAsInt(50));
196+
for(int x = 0 ; x < width ; x++) {
197+
for(int y = 0 ; y < height ; y++) {
198+
if(screen.contains(x, y, 1, 1)) {
199+
data[y * width + x] = 0;
200+
}
201+
}
202+
}
203+
204+
return Image.createImage(data, width, height);
194205
}
195206

196207
@Override
@@ -444,7 +455,7 @@ public void start() {
444455
FontImage settingsIconSel = FontImage.createMaterial(FontImage.MATERIAL_SETTINGS, tabSel, 3.5f);
445456
details.addTab("Portrait", portraitIcon, imPortrait.getContainer());
446457
details.addTab("Landscape", landscapeIcon, imLandscape.getContainer());
447-
details.addTab("Settings", settingsIcon, settingsContainer);
458+
details.addTab("Settings", settingsIcon, settingsContainer);
448459
details.setTabSelectedIcon(0, portraitIconSel);
449460
details.setTabSelectedIcon(1, landscapeIconSel);
450461
details.setTabSelectedIcon(2, settingsIconSel);
@@ -478,6 +489,15 @@ public void start() {
478489
vl.addSubmitButtons(skinDesignerForm.getToolbar().findCommandComponent(saveCommand));
479490
}
480491

492+
skinDesignerForm.getToolbar().addMaterialCommandToLeftBar("", FontImage.MATERIAL_HELP, e -> {
493+
BrowserComponent help = new BrowserComponent();
494+
help.setURL("jar:///help.html");
495+
Form helpForm = new Form("Help", new BorderLayout());
496+
helpForm.add(BorderLayout.CENTER, help);
497+
helpForm.getToolbar().setBackCommand("Back", ee -> skinDesignerForm.showBack());
498+
helpForm.show();
499+
});
500+
481501
if(Display.getInstance().isNativeShareSupported()) {
482502
skinDesignerForm.getToolbar().addCommandToRightBar("",
483503
FontImage.createMaterial(FontImage.MATERIAL_SHARE, titleCommand), e -> {

‎src/help.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Help</title>
5+
<meta charset="windows-1252">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
</head>
8+
<body>
9+
<h1>Skin Designer Help</h1>
10+
<p>The skin designer tool allows you to visually design and save a Codename One skin file that you can
11+
use to simulate a custom device type. To use this tool you need two pictures of the device in portrait
12+
and landscape mode. The screen area of these pictures must match the device screen size!</p>
13+
14+
<p>
15+
<b>TIP:</b> To find files like that just search for the name of the device you are looking for followed by
16+
"mockup". This will bring up device mockups you can often use. FYI be sure to read the license of the
17+
graphic you use if you intend to publish this, many creators require attribution!
18+
</p>
19+
20+
<h2>Creating a Skin</h2>
21+
<p>
22+
You will need to select the device image in portrait/landscape, you can then enter the screen dimensions
23+
in pixels that should match the area within the graphic. <br />
24+
You can enter the X/Y position or use the hand "pan tool" to visually position the screen within the graphic.
25+
</p>
26+
<p>
27+
This process should be repeated both for portrait and landscape images respectively.
28+
</p>
29+
<p>
30+
You then need to enter a set of values to indicate details about the skin as described below:
31+
</p>
32+
<ul>
33+
<li><b>Native Theme</b> - the underlying native theme of the device, e.g. iOS devices use an iOS 7+ native theme</li>
34+
<li><b>Platform name</b> - This affects the <a href="https://www.codenameone.com/javadoc/com/codename1/ui/Display.html">Display</a>
35+
platform name</li>
36+
<li><b>Tablet</b> - this indicates if the <code>isTablet()</code> method will return true or false</li>
37+
<li><b>System Font Family</b> - the default builtin font family. Notice that this only applies to system fonts and not to native fonts</li>
38+
<li><b>Proportional Font Family</b> - the proportional builtin font family. Notice that this only applies to system fonts and not to native fonts</li>
39+
<li><b>Monospace Font Family</b> - the monospace font family. Notice that this only applies to system fonts and not to native fonts</li>
40+
<li><b>Small font size</b> - when you pick "small" for the font size this is the size it will have in pixels</li>
41+
<li><b>Medium font size</b> - when you pick "medium" for the font size this is the size it will have in pixels</li>
42+
<li><b>Large font size</b> - when you pick "large" for the font size this is the size it will have in pixels</li>
43+
<li><b>Pixel Ratio</b> - the number of pixels per <b>millimeter</b> on the device. To convert a PPI (pixels per inch)
44+
value to millimeters just divide the value by <code>25.4</code>. <br />
45+
E.g. a device with 264 ppi will have <code>264 / 25.4 = 10.3937008</code> pixels per millimeter</li>
46+
<li><b>Platform overrides</b> - These represent the theme override behavior which you can use
47+
to override platform specific behavior on the device</li>
48+
</ul>
49+
50+
<h3>Saving &amp; Testing</h3>
51+
52+
<p>
53+
You can save the skin by pressing the save button on the top right. In the desktop version it will reside in
54+
the <code>.SkinDesigner</code> directory in your home folder. In the web version you will be prompted
55+
to save the skin file.
56+
</p>
57+
<p>
58+
Rename the file to a name the represents the device and test it in the simulator by pressing the "Add" button
59+
in the skins menu.
60+
</p>
61+
62+
<h2>Submitting the Skin</h2>
63+
<p>
64+
Assuming your skin file doesn't violate any copyrights we'd appreciate if you submit it to our official skin
65+
repository!<br />
66+
If your skin file requires attribution please include that within the skin image...
67+
</p>
68+
<p>
69+
Start by navigating to <a href="https://github.com/codenameone/codenameone-skins">github.com/codenameone/codenameone-skins</a>
70+
&amp; fork the project. Drag your skin file into the OTA directory. Create a 112x112 icon png file for the skin
71+
and drag it into that directory as well.
72+
</p>
73+
<p>
74+
Next select the <code>Skins.xml</code> file and edit it. Add your skin in a similar way to the other skin files
75+
and commit.
76+
</p>
77+
<p>
78+
Now click the submit pull request button to submit these changes for inclusion in the main repository.
79+
</p>
80+
81+
</body>
82+
</html>

0 commit comments

Comments
 (0)